/*variables */

:root {
    --icon_images: url("../adminpanel/css_admin/kk_sprite_admin.png");
    --icon_size: 120px 1000px;
    --bg_color: #fff6e5;
    --box_bg_color: #fffaf7;
    --box_color: linear-gradient(90deg, #ebebeb 0%, #e1e1e1 100%);
    --border_color: #efd9cc;
    --main_color: #3a291d;
    --text_color_dark: #592620;
    --text_color_light: #ba8c5c;
    --button-bg-color: #3f434c;
    --button-font-color: #b5b5ba;
    --red: #D92525;
    --green: #20BF55;
    --gray: #7C7F90;
    --highlight_red: linear-gradient(to top, #ff0844 0%, #d70236 100%);
    --highlight_yellow: linear-gradient(to top, #ffbb00 0%, #eba405 100%);
}
/*Reset*/
/*SCROLL BAR*/
/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d3b9a9;
}
::-webkit-scrollbar-thumb:hover {
    background: #d3b9a9;
}


*:where(:not(body, html, iframe, canvas, img, svg, video, audio, li, ul):not(svg *, symbol *)) {
    all: unset;
    display: revert;
    line-height: normal;
    transition: .5s;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    overscroll-behavior: none;
    /*scroll-behavior: smooth;*/

}

body, input, select, textarea{
    margin: 0;
    padding: 0;
    border: none;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: 14px;
    color: var(--text_color_dark);
    line-height: 100%;
    user-select: none;
}
h1, h2, h3{
    font-family: "Playfair Display", serif;
    font-weight: bold;
}
a{
    cursor: pointer;
}



input[type='button']{
    background-color: var(--button-bg-color);
    color: var(--button-font-color);
    cursor: pointer;
    text-align: center;
}
input[type='button']:hover{
    background-color: #2f3239;
}
ol, ul, li, menu, summary {
    list-style: none;
}
img {
    max-inline-size: 100%;
    max-block-size: 100%;
}
table {
    border-collapse: collapse;
}
input[type='text'],input[type='password']{
    width: 100%;
    height: 40px;
    padding: 0 20px;
    -webkit-user-select: auto;
    border: 1px solid var(--border_color);
    background-image: none;
    background-color: #FFF;
}
textarea {
    width: 100%;
    min-height: 120px;
    padding: 20px;
    border: 1px solid var(--border_color);
    background-image: none;
    background-color: #FFF;
    white-space: revert;
    -webkit-user-select: auto;
    overflow: auto;
}
select{
    width: 100%;
    height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    background-color: var(--border_color);
    border: 1px solid var(--border_color);
    -webkit-user-select: auto;
    display: flex;
    align-items: center;
}


/* checkbox settings 👇 */

input[type=checkbox] {
    --primary-color: #1677ff;
    --secondary-color: #fff;
    --primary-hover-color: #4096ff;
    /* checkbox */
    --checkbox-diameter: 20px;
    --checkbox-border-radius: 5px;
    --checkbox-border-color: #d9d9d9;
    --checkbox-border-width: 1px;
    --checkbox-border-style: solid;
    /* checkmark */
    --checkmark-size: 1.2;
}

input[type=checkbox],
input[type=checkbox] *,
input[type=checkbox] *::before,
input[type=checkbox] *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--checkbox-diameter);
    height: var(--checkbox-diameter);
    border-radius: var(--checkbox-border-radius);
    background: var(--secondary-color);
    border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

input[type=checkbox]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
    box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
    border-radius: inherit;
    opacity: 0;
    -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
    -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
    transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

input[type=checkbox]::before {
    top: 40%;
    left: 50%;
    content: "";
    position: absolute;
    width: 4px;
    height: 7px;
    border-right: 2px solid var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0;
    -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
    -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
}

/* actions */

input[type=checkbox]:hover {
    border-color: var(--primary-color);
}

input[type=checkbox]:checked {
    background: var(--primary-color);
    border-color: transparent;
}

input[type=checkbox]:checked::before {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
    -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

input[type=checkbox]:active:not(:checked)::after {
    -webkit-transition: none;
    -o-transition: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    transition: none;
    opacity: 1;
}

#successcanvas {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
}
.noscroll{
    overflow: hidden;
}
.topbar{
    position: relative;
    padding: 10px 20px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    z-index: 2;
    border-bottom: 1px solid var(--border_color);
    justify-content: space-between;
    align-items: center;
    justify-items: center;
}
.topbarpagelogo {
    position: relative;
    margin-right: auto;
    width: 111px;
    cursor: pointer;
}

.topbarsearchbarback, .topbarsearchiconformobile {
    display: none;
}
.topbarsearchbarholder {
    position: relative;
    width: 100%;
    max-width: 400px;
    grid-column-start: 2;
    grid-row-start: 1;
}
.topbarrightpart{
    position: relative;
    float: left;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    z-index: 1;
}
.topbarsearchbardropdownholder {
    display: none;
    /*display: block!important;*/
    position: absolute;
    top: 32px;
    width: 100%;
    padding-top: 10px;
    background-color: #FFFFFF;
    border: 1px solid var(--border_color);
    border-top: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px -10px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.dropdownsearchbtn{
    padding: 10px 0;
}
.dropdownsearchtext{
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbarsearchbardropdown {
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.topbarsearchbar {
    padding-left: 40px!important;
    padding-right: 10px!important;
}
.topbarsearchicon {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -40px -40px;
    cursor: pointer;
}
.dropdownsearchprimary {
    position: relative;
    float: left;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;

}
.topbarsearchbardropdownsuggestions{
    position: relative;
    float: left;
    width: 100%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;

}
.dropdownsearch:hover .dropdownsearchtext{
    text-decoration: underline;
}
.dropdownsearchprimarytext{
    font-weight: bold;
}
.dropdownsearchprimary:hover .dropdownsearchprimarytext{
    text-decoration: underline;
}

.topbarsearchiconinner {
    width: 40px;
    height: 40px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -40px -80px;
    cursor: pointer;
    margin-left: -10px;
}
.dropdownsearchprimarytype {
    margin-left: auto;
    text-decoration: underline;
}
.topbarsearchiconcategory{
    width: 40px;
    height: 40px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -80px -80px;
    cursor: pointer;
    margin-left: -10px;
}
.dropdownsearch {
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 5px;
    text-decoration: none;
    transition: background-color .5s;
    align-items: center;
}

.topbarcartholder {
    position: relative;
    float: left;
}
.accountnavhholder {
    position: relative;
    float: right;
    height: 100%;
    display: flex;
    align-items: center;
}
.topbarcartbutton {
    position: relative;
    float: left;
    height: 50px;
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}
.topbarcarticon {
    width: 40px;
    height: 40px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -20px 0;
    cursor: pointer;
}
.topbarcartdropdownwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);
    z-index: 1;
}
.topbarcartdropdownholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.topbarcartdropdown{
    position: relative;
    width: 100%;
    height: calc(100% - 20px);
    padding: 20px;
    padding-bottom: 120px;
    margin: 10px;
    max-width: 460px;
    background-color: var(--bg_color);
}
.topbarcartdropdowncontent{
    width: 100%;
    height: 100%;
    /*padding-right: 10px;*/
    display: grid;
    grid-template-rows: 40px 1fr;
    gap: 10px;
    overflow: auto;
}
.topbarcartdropdowntopbar{
    position: sticky;
    top: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg_color);
}
.topbarcartdropdownclose{
    width: 30px;
    height: 30px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -80px -120px;
    cursor: pointer;
}
.topbarcartdropdowncartitems{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.topbarcartdropdowncartitemlist, .topbarcartdropdowncartitemlistoutofstock{
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 5px;
    align-items: center;
}
.topbarcartdropdowncartitemlistoutofstock{
    opacity: .6;
}
.cartitemoutofstocklabel{
    position: absolute;
    left: 0;
    bottom: 30px;
    font-size: 12px;
    color: var(--red);
}
.accountloginnameholder, .accountloginbuttonholder {
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.topbarcartdropdowncartitemdetails{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.topbarcartdropdowncartitemname{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.topbarcartdropdowncartitempriceandqty{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.topbarcartdropdowncartitemprice{
    font-weight: bold;
    margin-right: auto;
    font-size: 16px;
    white-space: nowrap;
}
.topbarcartdropdowncartitemremove{
    width: 30px;
    height: 30px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -80px -160px;
    cursor: pointer;
}
.topbarcartdropdowncartitemqtyselector{
    display: flex;
    align-items: center;
    border: 1px solid var(--border_color);
}
.cartqtyfield{
    width: 40px!important;
    padding: 0!important;
    border: none!important;
    text-align: center!important;
    user-select: none!important;
    background-color: var(--bg_color) !important;
}
.cartqtyminus, .cartqtyplus{
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
}
.topbarcartdropdownfooter{
    padding-top: 10px;
    display: grid;
    grid-template-columns: 1fr 120px;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--border_color);
}
.topbarcartdropdownfooterpricebox{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cartdropdownfooterlabelwrapper{
    display: flex;
    justify-content: space-between;
}
.topbarcartdropdownfootercheckout{
    width: 120px;
    height: 40px;
    background-color: var(--button-bg-color);
    color: var(--button-font-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topbarcartdropdownfootercheckout:hover{
    background-color: #2f3239;
}






.accountnavdropdown{
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    width: 160px;
    background-color: #EEEEEE;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.topbaritemholder{
    display: flex;
    flex-direction: column;
}
.topbaritem{
    padding: 0 20px;
    height: 40px;
    display: flex;
    align-items: center;
}
.topbaritem:hover{
    /*background-color: var(--border_color);*/
    background-color: #CFCFCF;
}
.pagecontainer{
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-height: 700px;
    display: flow-root;

}
.pagecontentholder{
    width: 100%;
    max-width: 1024px;
    margin: 60px auto;
    padding: 0 10px;
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.pagecontenttitle{
    width: 100%;
    font-family: "Playfair Display", serif;
    font-size: 22px;
    padding-bottom: 20px;
    color: var(--text_color_light);
    grid-column-start: 1;
    grid-column-end: -1;
}


.indexproductbox, .indexshopitembox{
    overflow: hidden;
    border-bottom: 1px solid var(--border_color);
    padding-bottom: 5px;
}
.indexproductbox:hover, .indexshopitembox:hover{
    background-color: var(--box_bg_color);
}
.indexproductbox a, .indexshopitembox a{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.indexproductboximage{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.indexproductboxdetails{
    position: relative;
    width: 100%;
    height: 85px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.indextoprowitem .indexproductboxdetails{
    position: absolute;
    width: 100%;
    height: 55px;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 10px;
    backdrop-filter: blur(1px);
    background-color: rgb(33 37 41 / 60%);
    color: #FFF;
}
.indexproductboxcat{
    position: absolute;
    top: 0;
    color: var(--text_color_light);
    font-size: calc(100% - 2px);
}
.indexproductboxtitle{
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    text-overflow: ellipsis;
}
.indexproductboxprice{
    display: flex;
    gap: 5px;
    font-size: 16px;
    font-weight: bold;
    align-items: center;
}
.strikethrough {
    position: relative;
    display: inline-block;
    text-decoration: none;
    opacity: .6;
    font-size: 12px;
}
.strikethrough:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px;
    right: -5px;
    border-top: 2px solid var(--text_color_dark);
    z-index: -1;
}
.indexreduction_percentagetag{
    font-size: 12px;
    background-image: var(--highlight_red);
    color: #FFF;
    padding: 1px 4px;
}
.indextoprowcampaignitem .indexreduction_percentagetag{
    font-size: 20px;
}
.indexpopularproducts{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 20px;
    align-items: center;
}
.indexallproductsholder{
    width: 100%;
    min-height: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    grid-gap: 20px;
    row-gap: 50px;
}
.indexallproductsloadmoreholder{
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.indexallproductsloadmore{
    width: 150px;
    height: 40px;
    display: flex;
}
.pagecontentrow{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: center;
    gap: 20px;
}
.indextoprowitemholder{
    width: 100%;
    display: flex;
    gap: 50px;
    flex-direction: column;
}
.indextoprowitemtitle{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", serif;
    font-size: 22px;
    padding-bottom: 20px;
    color: var(--text_color_light);
}
.indextoprowitem{
    position: relative;
    flex: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}
.pagecontenttextbig{
    margin-top: 30px;
    font-size: 26px;
    color: var(--text_color_light);
}
.indexshopcategoryholder{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.indexshopcategory{
    font-size: 16px;
}

.pagecontentwrapper{
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
}
.pagecontentcolorwrapper{
    background-color: var(--bg_color);
}

.swiper{
    overflow: unset!important;
}
.pagecontentcolumn{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pagecontentexplorebtn{
    width: 150px;
    height: 40px;
    background-color: var(--button-bg-color);
    color: var(--button-font-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pagecontenttext{
    font-family: "Noto Serif Display", serif;
    font-optical-sizing: auto;
    font-style: italic;
    font-size: 20px;
    color: var(--text_color_light);
}
.kkloginformpopupwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);
}
.kkloginformpopupholder{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kkloginformpopup{
    position: relative;
    width: 100%;
    padding: 40px 20px;
    max-width: 400px;
    background-color: #FFF;
}
.kkloginformpopuptopclose{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -20px -80px;
    cursor: pointer;
}
.kkadminloginformholder{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.kkloginformpopuptoptitleholder{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.kkadminloginform {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: column;
}
.usernameholder, .passwordholder{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.invalid-feedback {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -15px;
    color: var(--red);
}
.loginerrormsg{
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--red);
}
.popupresetpasswordlink{
    margin-left: auto;
}
.submitloginbutton{
    width: 150px;
    height: 40px;
    text-align: center;
    background-color: var(--button-bg-color);
    color: var(--button-font-color);
    cursor: pointer;
}
.popupresetpasswordlink:hover{
    text-decoration: underline;
}
.accountcreatebutton{
    margin-top: 20px;
}
.accountcreatebutton a:hover{
    text-decoration: underline;
}
.indexalertlabelstockout{
    position: absolute;
    padding: 5px 10px;
    top: 15px;
    right: 0px;
    background-image: var(--highlight_red);
    color: #FFF;
}
.indexalertlabellowstock{
    position: absolute;
    padding: 5px 10px;
    top: 15px;
    right: 0px;
    background-image: var(--highlight_yellow);
    color: #FFF;
}

.productcontent{
    width: 100%;
    max-width: 1440px;
    display: grid;
    justify-self: center;
    grid-template-columns: 400px 1fr 300px;
    gap: 20px;
    padding: 0 10px;
    padding-top: 10px;
}
.proproductboxprice {
    display: flex;
    gap: 10px;
    font-size: 16px;
    align-items: center;
    margin-bottom: 20px;
}
.proproductboxpricetext{
    font-weight: bold;
    font-size: 22px;
}
.proreduction_percentagetag {
    color: var(--red);
}
.relatedproductscontainer{
    display: flex;
    gap: 10px;
    grid-column-start: 1;
    grid-column-end: -1;
    flex-direction: column;
    margin-top: 50px;
}
.relatedproductscontainer .indexproductboxdetails{
    padding-top: 0;
    height: 65px;
}
.productdeliveryoptionholder{
    width: 100%;
    max-width: 300px;
    display: flex;
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 5px;
    flex-wrap: wrap;
}
.productdeliveryicon {
    width: 20px;
    height: 20px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -80px 0;
    cursor: pointer;
}
.addtocartbtnwrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.productcontentdetailsvariantpopupdetailsimages{
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    grid-gap: 14px;
}
.productvariantthumb{
    cursor: pointer;
    outline: 2px solid var(--border_color);
    outline-offset: 2px;
    border-radius: 5px;
}
.productvariantthumbselected{
    outline: 2px solid var(--red);
}
.productvariantthumbhighlight{
    outline: 2px solid var(--red);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.productcontentdetailsdescription{
    width: 100%;
    white-space: pre-line;
    margin-top: 10px;
}
.productcontentdetailsvariantpopupdetailsname{
    height: 20px;
}
.itemoutofstock{
    opacity: .6;
    cursor: no-drop;
}
.addtocartbtn, .selectvariantbtn{
    width: 150px;
    height: 40px;
    display: flex;
    justify-self: end;
}
.glyimgdownload{
    position: absolute;
    width: 100px;
    height: 40px;
    display: flex;
    font-weight: bold;
    background-color: var(--button-bg-color);
    color: var(--button-font-color);
    align-items: center;
    justify-content: center;
    opacity: .7;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
}
.productcontentimageslider{
    width: 100%;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background-color: var(--bg_color);
}
.productcontentimagebox{
    display: flex;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1;
}
.remainingimages{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 20px;
    cursor: pointer;
}
.productcontentimagebox::before {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: -180%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.productcontentimagebox:not(.productcontentimagebox:nth-last-child(1)):hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}

@-webkit-keyframes shine {
    100% {
        left: 80%;
    }
}
.imagegallerymaxwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);
}
.imagegallerymaxholderouter{
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.imagegallerymaxholder{
    position: relative;
    float: left;
    width: calc(100% - 20px);
    max-width: 800px;
    height: calc(100% - 20px);
    max-height: 1000px;
    background-color: #000000;
    border-radius: 10px;
    display: grid;
    grid-template-rows: 60px 1fr;
    overflow: auto;
}
.imagegallerymaxtopbar{
    width: 100%;
    position: sticky;
    top: 0;
    background-color: rgb(0 0 0 / 60%);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    cursor: pointer;
    z-index: 1;
}
.imagegallerymaxtopbaricon{
    width: 20px;
    height: 20px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -20px -140px;
    cursor: pointer;
}
.imagegallerymaxtopbarname{
    width: 100%;
    color: #FFFFFF;
}
.imagegallerymax{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.imagegallerymaxbox{
    position: relative;
}
.imagegallerymaximage{
    width: 100%;
    height: auto;
}
.topbarcarticon_animation{
    animation-duration: .3s;
    animation-iteration-count: infinite;
    animation-name: tilt-shaking;
}
@keyframes tilt-shaking {
    0% { transform: rotate(0deg) translateY(-7px); }
    25% { transform: rotate(10deg) translateY(-7px); }
    50% { transform: rotate(0deg) translateY(-7px); }
    75% { transform: rotate(-10deg) translateY(-7px); }
    100% { transform: rotate(0deg) translateY(-7px); }
}
.addtocartbtnholder{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.pagefootercontainer {
    width: 100%;
    padding: 0 10px;
    padding-top: 60px;
    margin-top: 20px;
    padding-bottom: 60px;
    background-color: var(--bg_color);
}
.pagefooterrowtop{
    width: 100%;
    max-width: 1420px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    align-items: start;
    justify-self: center;
}
.pagefooterrow{
    width: 100%;
    max-width: 1420px;
    margin-top: 10px;
    display: flex;
    grid-column-start: 1;
    grid-column-end: -1;
    justify-content: space-between;
    justify-self: center;
    border-top: 1px solid var(--border_color);
    padding-top: 10px;

}
.pagefooterlink {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 10px;
    justify-items: start;
}
.pagefootersubscriberowinner{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pagefootersubscribe{
    position: absolute;
    width: 110px;
    height: 40px;
    right: 0;
}
.pagefooterlogo{
    align-self: end;
}
.pagefootersocialiconfb{
    width: 30px;
    height: 30px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -80px -200px;
    cursor: pointer;
}
.pagefootersocialiconinsta{
    width: 30px;
    height: 30px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -80px -240px;
    cursor: pointer;
}
.pagefootersociallink{
    display: flex;
    align-items: center;
    gap: 10px;
}
.pagefootername:hover{
    text-decoration: underline;
}
.fireicon{
    color: var(--red);
}
.checkoutaddresspickerpopupwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);
    z-index: 2;
}
.checkoutaddresspickerpopupholder{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkoutaddresspickerpopup{
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 10px;
    max-width: 800px;
    max-height: 620px;
    background-color: var(--box_bg_color);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checkoutpagenewaddressbutton{
    height: 40px;
    margin-top: 10px;
}
.savedaddressholder, .checkoutpagecartitemdetails, .savedaddressboxholder {
    width: 100%;
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.webcheckoutcontent{
    width: 100%;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr minmax(300px, 600px);
}
.savedaddressboxmore{
    font-weight: bold;
    color: var(--text_color_light);
    align-self: center;
    text-decoration: underline;
}

.savedaddressbox{
    position: relative;
    padding: 10px;
    background-color: var(--bg_color);
    border: 1px solid var(--bg_color);
    cursor: pointer;
}

.savedaddressboxsekected{
    border: 1px solid var(--red);
}
.savedaddressboxlabel{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 100px;
    height: 30px;
    border: 1px solid var(--border_color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.savedreceiverdetailschangebutton{
    width: fit-content;
    cursor: pointer;
    align-self: end;
}
.checkoutaddresspickerpopuptop{
    width: 100%;
    height: 50px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.checkoutaddresspickerpopupclose{
    width: 30px;
    height: 30px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -80px -120px;
    cursor: pointer;
}
.shippingaddressdetailsphoneholder, .shippingaddressdetailsOTPholder{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.shippingaddressphonecheck, .shippingaddressOTPcheck{
    width: 100px;
    height: 40px;
    background-color: var(--button-bg-color);
    color: var(--button-font-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


.feedbackholder {
    /*display: none;*/
    position: absolute;
    width: 30px;
    height: 30px;
    right: 10px;
    top: 15px;
}

.feedbacktext {
    position: absolute;
    left: 0;
    bottom: -20px;
    color: var(--red);
    font-size: 12px;
    white-space: nowrap;
}
.shippingaddressbtnholder{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.menualorderdetailswrapper, .checkoutpageorderdetailsholder{
    width: 100%;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(350px, 400px) 1fr;
}

.orderdetailsholder, .checkoutpageorderdetails{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.deliverydetailsholder, .checkoutpagepaymentselector{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}
.shippingaddressdetailsholder, .shippingaddressotherdetails{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.shippingdetailsrow{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.shippingdetailsbtnrow{
    display: flex;
    gap: 5px;
}

.addressholderwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);
}
.addressholder {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addressholderinner {
    display: block;
    width: calc(100% - 20px);
    max-width: 460px;
    background-color: var(--box_bg_color);

}
.addressholdertitlebar{
    position: sticky;
    top: 0;
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--box_bg_color);
    z-index: 1;
}
.addressholderarea{
    overflow: auto;
    width: 100%;
    height: 260px;
    padding: 10px;
    border-top: 1px solid var(--border_color);
}
.cityholder, .zoneholder, .areaholder {
    width: 100%;
    display: none;
    margin: 0;
    padding: 0;
}
.cityholder{
    display: block;
}
.city, .zone, .area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cityname, .zonename, .areaname {
    cursor: pointer;
}
.shippingaddressdetailsdeliveryarea{
    background-color: transparent;
}
.selecteddeliveryareaholder{
    /*display: none;*/
    position: absolute;
    width: 100%;
    height: 40px;
    top: 25px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    pointer-events: none;
}
.rightarrow{
    width: 20px;
    height: 20px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -40px -120px;
}
.cleararea{
    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 30px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -20px -80px;
    cursor: pointer;
}
.selecteddeliveryareatabholder{
    width: 100%;
    padding: 10px;
    padding-top: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 30px;
}
.citytab, .zonetab, .areatab{
    color: var(--text_color_light);
    cursor: pointer;
    border-bottom: 1px solid transparent;
}
.selectedtab{
    color: var(--red);
    border-bottom: 1px solid var(--border_color);
}
.selectedtabitem{
    color: var(--text_color_light);
}
.menualcheckoutpaymentbuttonsholder{
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}
.menualcheckoutpaymentbutton{
    width: 140px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border_color);
    cursor: pointer;
}
.menualcheckoutpaymentbutton:hover{
    background-color: var(--bg_color);
}
.menualcheckoutpaymentbuttonSelected{
    background-color: var(--border_color);
}

.shippingaddressdetailssubmit{
  height: 40px;
}
.shippingaddressdetailssubmit:disabled, .shippingaddressphonecheck:disabled, .checkoutpageorderplacebutton:disabled{
    opacity: .4;
    cursor: not-allowed;
}
.orderdetailstitle{
    width: 100%;
    font-family: "Playfair Display", serif;
    font-size: 22px;
    color: var(--text_color_light);
}
.orderdetailsitemholder{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--bg_color);
    padding: 10px;
}
.userorderdetailsholder{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.userorderqty{
    position: absolute;
    right: 0;
    bottom: 0;
}
.userorderdetailswrapper{
    max-width: 500px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 5px;
    align-items: start;
}
.userorderdetailspriceholder{
    display: flex;
    align-items: center;
    gap: 10px;
}
.checkoutpagecartitemdetails>.topbarcartdropdowncartitems{
    background-color: var(--bg_color);
    padding: 10px;
}
.orderdetailsbillsummaryholder, .checkoutordersummaryholder{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border_color);
}
.checkoutpageorderplacebutton{
    height: 40px;
}
.orderdetailssummary, .checkoutpagetotalordervalue, .checkoutpagediscountvalue, .checkoutpageshippingvalue, .checkoutpagetotalpayablevalue, .checkoutpagevaucherholder{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.checkoutpagevaucherlabel{
    width: 100%;
}
.checkoutpagevauchercodeapplybutton{
    width: 100%;
    height: 40px;
}
.estdeliverydateholder{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.deliverypartner{
    display: flex;
    align-items: center;
    gap: 10px;
}
.pagefooterhotline{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.errormessagewrapper{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px);
    background-color: rgb(33 37 41 / 40%);
    z-index: 2;
}
.errormessageholder{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.errormessagebg{
    width: calc(100% - 20px);
    max-width: 400px;
    padding: 10px;
    min-height: 120px;
    background-color: var(--bg_color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-around;
}

.errormessageokbtn{
    width: 80px;
    height: 31px;
    margin-left: auto;
}

    /* HTML: <div class="loader"></div> */
.fullloader{
    display: none;
    position: fixed;
    z-index: 3;
}
.fullloaderholder{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);

    display: flex;
    align-items: center;
    justify-content: center;
}
.cardbtnloader, .fullloaderspinner, .loader, .verificationloader, .arealoader  {
    display: none;
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
            radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
            conic-gradient(#0000 30%,#ffa516);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation: l13 1s infinite linear;
}
.arealoader{
    margin: 0 auto;
}
.fullloaderspinner{
    display: block;
}
@keyframes l13{
    100%{transform: rotate(1turn)}
}
.savedreceiverareadetails, .cpdeliveryareaholder{
    position: relative;
    display: flex;
    align-items: center;
}
.cporderdelievrydetailsholder{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cporderdelievrydetailsholder>span{
    user-select: text;
}
.btnrow{
    display: flex;
    gap: 20px;
}
.manualChecoutbKashpaymentbtn, .manualChecoutCODpaymentbtn{
    width: 100px;
    height: 40px;
}
.bold{
    font-weight: bold;
}
.deliverystatustimelineholder{
    display: flex;
    align-items: center;
}
.deliverystatustimelineblock{
    position: relative;
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.deliverystatustimelineblock::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    border: 1px dashed var(--gray);
    top: 9px;
    left: 40px;
    z-index: -1;
}
.deliverystatustimelineblock:nth-last-child(1)::before{
    content: none;
}
.deliverystatustimelineblockactive::before{
    border: 1px dashed var(--green);
}
.dstimelinedoticon{
    width: 20px;
    height: 20px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -80px -40px;
}
.deliverystatustimelineblockactive>.dstimelinedoticon{
    background-position: -80px -20px;
}
.savedaddressboxmenualwrapper{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);
}
.savedaddressboxmenualholder{
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.savedaddressboxmenual{
    width: calc(100% - 20px);
    max-width: 460px;
    padding: 20px;
    background-color: var(--box_bg_color);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.savedaddressboxmenual>span{
    margin-bottom: 10px;
}
.savedaddressboxcardmenual{
    position: relative;
    padding: 10px;
    background-color: var(--bg_color);
    border: 1px solid var(--bg_color);
    cursor: pointer;
}
.savedaddressboxcardmenualdeselect{
    margin-top: 10px;
    height: 40px;
}
.showsavedaddressbtn{
    cursor: pointer;
    color: var(--text_color_light);
}
.showsavedaddressbtn:hover{
    text-decoration: underline;
}
.areaselectorback{
    display: none;
    width: 30px;
    height: 30px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -80px -120px;
    cursor: pointer;
}
.checkouttrackinglink{

}
.checkoutpagewarningtext{
    font-weight: bold;
    background-color: var(--border_color);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 5px;
}
.checkoutpagewarningtext a{
    text-decoration: underline;
}
.checkoutpagepaymentselectortitle{
    font-weight: bold;
}
.checkoutpagepaymentoptionholder{
    display: flex;
    gap: 20px;
}
.checkoutpagepaymentoptions{
    width: 140px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.codpaymentoptionholderweb{
    position: relative;
}
.checkoutconfirmationpopupwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);
    z-index: 2;
}
.checkoutconfirmationpopupholder{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkoutconfirmationpopup{
    width: calc(100% - 20px);
    max-width: 460px;
    background-color: var(--box_bg_color);
    padding: 20px;
}
.checkoutconfirmationpopupbuttons{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 20px;
}
.checkoutconfirmationpopupbuttons>div{
    width: 140px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button-bg-color);
    color: var(--button-font-color);
    cursor: pointer;
    text-align: center;
}
.checkoutconfirmationpopupbuttons>div:hover{
    background-color: #2f3239;
}
.profilepageuserfullnameholder{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding-bottom: 20px;
}
.pagecontentusername{
    font-family: "Playfair Display", serif;
    font-size: 22px;
    color: var(--text_color_light);
}
.profilepageuserverified{
    width: 20px;
    height: 20px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -80px -60px;
    cursor: pointer;
}
.profilepageverifiybyadminbutton{
    background-color: var(--button-bg-color);
    cursor: pointer;
    text-align: center;
    padding: 2px 5px;
    font-size: 12px;
    color: #FFF;
}
.profilepageprofiledetailstitle{
    font-weight: bold;
}
.profilepageprofiledetails{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
.profilepageuserdetailsname, .profilepageuserdetailsuserid, .profilepageuserdetailsemail, .profilepageuserdetailsmobile, .profilepageuserdetailsgender, .profilepageuserdetailsdob {
    width: 100%;
    max-width: 500px;
    display: grid;
    grid-template-columns: 90px 1fr 80px;
    align-items: center;
}
.profilepageuserdetailssave{
    width: 80px;
    height: 40px;
    display: flex;
    background-color: var(--button-bg-color);
    color: var(--button-font-color);
    cursor: pointer;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.profilepageuserdetailsedit {
    width: 70px;
    height: 40px;
    margin-left: 10px;
    display: flex;
    cursor: pointer;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.profilepageuserdetails:disabled {
    background-color: transparent;
    border: 1px solid transparent;
    cursor: unset;
    user-select: none;
    caret-color: transparent;
    color: var(--text_color_light);
    font-weight: bold;
}
.accountactivationdropdownwrapper{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);
    z-index: 2;
}
.accountactivationdropdownholder{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.accountactivationdropdown{
    display: flex;
    width: calc(100% - 20px);
    max-width: 460px;
    height: 160px;
    padding: 20px;
    background-color: var(--box_bg_color);
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.accountactivationstep1, .accountactivationstep2{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.accountactivationstep2{
    display: none;
}
.accountactivationskip{
    cursor: pointer;
}
.accountactivationtitle{
    text-align: center;
    font-weight: bold;
}
.accountactivationphonewrapper, .accountactivationcodewrapper{
    display: flex;
    align-items: center;
    gap: 10px;
}
.accountactivationgetbutton, .accountactivationbutton{
    width: 120px;
    height: 40px;
}
.pagetitle{
    width: 100%;
    font-family: "Playfair Display", serif;
    font-size: 22px;
    padding-bottom: 20px;
    color: var(--text_color_light);
}
.myorderboxcartitemholder{
    width: 100%;
    min-height: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
.myorderboxcartitemholder>.userorderdetailswrapper{
    background-color: var(--bg_color);
    padding: 10px;
    display: flex;
    align-items: center;
}
.myorderboxholder{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.myorderbox{
    width: 100%;
    padding: 10px;
    background-color: var(--bg_color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.myorderboxrow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.myorderboxdateholder {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}
.myorderboxpaymentrow{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}
.myorderboxdetails{
    display: none;
    width: 100%;
}
.myorderboxrowpaymentamount{
    color: var(--red);
    font-weight: bold;
}
.myorderboxfooterbuttonholder {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    align-items: center;
}
.vieworderdetailsbutton{
    cursor: pointer;
    font-weight: bold;
    margin-right: auto;
}
.websiteorderboxbodyorderdetails{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border_color);
}
.websiteorderboxbody{
    width: 100%;
    display: flex;
    gap: 20px;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border_color);
    flex-direction: column;
}
.websiteorderboxbodyordervaluedetails{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: -10px;
    padding-top: 20px;
    border-top: 1px solid var(--border_color);
}
.websiteorderboxordervalueholder{
    display: flex;
    align-items: center;
    gap: 10px;
}
.websiteorderboxordervalueamount{
    width: 55px;
    display: flex;
    justify-content: flex-end;
}
.websiteorderboxotherdetails{
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}
.checkoutpagediscountvaluecode{
    font-size: 10px;
    border: 1px solid var(--green);
    color: var(--green);
    margin-right: auto;
    padding: 1px 5px;
}
.websiteorderboxshippingdetails *{
    font-weight: bold;
}
.myorderboxfooterbutton{
    width: 100px;
    height: 40px;
    display: flex;
    justify-self: end;
    background-color: var(--button-bg-color);
    color: var(--button-font-color);
    cursor: pointer;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.myorderboxfooterbutton:hover{
    background-color: #2f3239;
}
.ordercancelconfirmationdropdownwrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);
    z-index: 2;
}
.ordercancelconfirmationdropdownholder{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ordercancelconfirmationdropdown{
    display: flex;
    width: calc(100% - 20px);
    max-width: 460px;
    padding: 20px;
    background-color: var(--box_bg_color);
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.weborderstatusholder{
    display: flex;
    gap: 10px;
    align-items: center;
}
.weborderstatus{
    color: var(--green);
    font-weight: bold;
}
.myorderboxrowdeleverydate{
    color: var(--red);
    font-weight: bold;
}
.savedreceiverarea{
    white-space: nowrap;
}
.savedaddressbox{
    display: block;
}
.savedaddressboxholderless>.savedaddressbox{
    display: none;
}
.savedaddressboxholderless>.savedaddressbox:nth-child(1){
    display: block;
}
.savedaddressboxholderless>.savedaddressbox:nth-child(2){
    display: block;
}

.productrelated{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.productdeliveryoption{
    font-weight: bold;
}
.returnpolicysum{
    display: flex;
    flex-direction: column;
}
.returnpolicysum span{
    font-weight: bold;
}
.returnpolicyli{
    list-style: square;
}
.returnpolicyurl{
    margin-left: auto;
    text-decoration: underline;
    font-weight: bold;
}
.indexcampaignproductmore{
    position: absolute;
    right: 0;
    bottom: -35px;
    text-decoration: underline;
    font-weight: bold;
}
.pagecontenttitleholder{
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.pagecontentcategoryselectholder{
    position: relative;
    cursor: pointer;
}
.pagecontentcategoryselectholder:hover .pagecontentcategoryselect{
    background-color: var(--border_color);
}
.indexproductboxmore a{
    aspect-ratio: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border_color);
}
.indexproductboxmore a:hover{
    background-color: var(--border_color);
}
.pagecontentcategoryselect{
    width: 100%;
    height: 40px;
    margin-top: -5px;
    padding: 0 20px;
    padding-right: 40px;
    -webkit-user-select: auto;
    border: 1px solid var(--border_color);
    background-image: none;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.pagecontentcategorymore{
    position: absolute;
    top: 5px;
    right: 10px;
    transform: rotate(90deg);
    width: 20px;
    height: 20px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -40px -120px;
    cursor: pointer;
}

.pagecontentcategorydropdownwrapper{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px);
    background-color: rgb(0 0 0 / 75%);
    z-index: 2;
    cursor: auto;
}
.pagecontentcategorydropdowncontent{
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pagecontentcategorydropdowncontent a{
    text-decoration: underline;
}
.pagecontentcategorydropdownholder{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagecontentcategorydropdown{
    position: relative;
    width: 100%;
    padding: 20px;
    max-width: 400px;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.categorydropdowntitleholder{
    display: flex;
    justify-content: space-between;
}
.categorydropdowntitle{
    font-weight: bold;
}
.categorydropdownclose{
    width: 20px;
    height: 20px;
    background-image: var(--icon_images);
    background-size: var(--icon_size);
    background-position: -20px -80px;
    cursor: pointer;
}
.viewcartbtn{
    display: none;
}
.redbg{
    background-image: var(--highlight_red);
    color: #FFF!important;
}






@media only screen and (max-width: 1024px){
    .productcontent{
        grid-template-columns: 1fr 1fr;
    }
    .productrelated{
        flex-direction: row;
        grid-column-start: 1;
        grid-column-end: -1;
        border-top: 1px solid var(--border_color);
        padding-top: 10px;
    }

}












@media only screen and (max-width: 768px){
    body, input, select, textarea{
        font-size: 11px;
    }
    .topbar{
        grid-template-rows: 40px 40px;
        gap: 5px;
        grid-template-columns: 1fr 1fr;
    }
    .topbarpagelogo{
        width: 80px;
    }

    .topbarsearchicon{

    }
    .topbarsearchbarholder{
        display: flex;
        grid-column-start: 1;
        grid-column-end: -1;
        grid-row-start: 2;
        max-width: 100%;
    }
    .topbarsearchbarback{

    }
    .topbarsearchbar {

    }
    .topbarcarticon{
        transform: scale(.8);
    }
    .accountnavdropdown{
        top: 40px;
    }
    .pagecontentholder{
        margin: 10px auto;
    }
    .pagecontenttitle{
        font-size: 19px;
        padding-bottom: 0;
    }
    .orderdetailsholder, .checkoutpageorderdetails, .orderdetailsitemholder{
        gap: 5px;
    }
    .menualorderdetailswrapper, .checkoutpageorderdetailsholder, .webcheckoutcontent{
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .orderdetailsbillsummaryholder, .checkoutordersummaryholder, .estdeliverydateholder, .cporderdelievrydetailsholder{
        gap: 5px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--border_color);
    }
    /*.checkoutordersummaryholder{*/
    /*    position: fixed;*/
    /*    width: 100%;*/
    /*    padding: 10px;*/
    /*    left: 0;*/
    /*    bottom: 0;*/
    /*    background-color: var(--box_bg_color);*/
    /*    z-index: 1;*/
    /*    border-top: 1px solid var(--border_color);*/
    /*}*/
    .deliverydetailsholder, .checkoutpagepaymentselector, .shippingaddressdetailsphoneholder, .shippingaddressdetailsOTPholder, .shippingaddressdetailsholder, .shippingaddressotherdetails{
        gap: 10px;
    }
    .selecteddeliveryareaholder{
        top: 20px;
    }
    .feedbacktext {
        left: 10px;
        bottom: 0;
        font-size: 10px;
    }
    .pagecontentusername{
        font-size: 19px;
    }
    .profilepageuserfullnameholder{
        padding-bottom: 10px;
    }
    .profilepageprofiledetails{
        margin-top: 10px;
        gap: 0;
    }
    .pagetitle{
        font-size: 19px;
        padding-bottom: 10px;
    }
    .myorderboxcartitemholder, .myorderboxholder, .myorderbox, .websiteorderboxbody, .topbarcartdropdowncartitempriceandqty{
        gap: 10px;
    }
    .topbarcartdropdown{
        padding: 10px;
        padding-bottom: 100px;
    }
    .topbarcartdropdownfooter{
        gap: 10px;
        grid-template-columns: 1fr 80px;
    }
    .topbarcartdropdownfootercheckout{
        width: 80px;
    }
    .topbarcartdropdowncartitemprice{
        font-size: 13px;
    }
    .topbarcartdropdowncartitemremove, .topbarcartdropdowncartitemqtyselector{
        transform: scale(.8);
    }
    .productcontent{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .proproductboxprice{
        margin-bottom: 10px;
    }
    .addtocartbtnwrapper{
        gap: 5px;
    }
    .productrelated{
        flex-direction: column;
    }
    .relatedproductscontainer{
        margin-top: 20px;
    }
    .indextoprowitem{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .indextoprowitemholder .indexproductbox:nth-child(4){
        display: none;
    }
    .indexproductboxprice{
        font-size: 14px;
    }
    .indextoprowcampaignitem .indexreduction_percentagetag{
        font-size: 16px;
    }
    .viewcartbtn{
        width: 150px;
        height: 40px;
        display: flex;
        margin-right: auto;
        background-color: var(--button-bg-color);
        color: var(--button-font-color);
        cursor: pointer;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    .addtocartbtnholder{
        position: sticky;
        width: 100%;
        bottom: 10px;
        z-index: 1;
        background-color: #d4d6e1;
        padding: 10px;
    }
}

@media only screen and (max-width: 425px){
    .indextoprowitem{
        grid-template-columns: 1fr 1fr;
    }
    .indextoprowitemholder .indexproductbox:nth-child(4){
        display: block;
    }
    .indexallproductsholder{
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        grid-gap: 10px;
        row-gap: 30px;
    }
}