@font-face{
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNY.eot) format("eot"), 
        url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2"), 
        url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format("woff"), 
        url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format("ttf");
    font-feature-settings: "liga";
}

/* ---- Design tokens (only variables referenced by the classes below) ---- */
:root {
    --f-heading-2xl: 6rem;
    --f-heading-xl: 4rem;
    --f-heading-lg: 2.5rem;
    --f-heading-md: 2rem;
    --f-heading-sm: 1.25rem;
    --f-heading-xs: 1.125rem;
    --f-body-md: 1rem;
    --f-body-sm: 0.75rem;
    --f-body-lg: 1.25rem;

    /*site styles - spaces */
    --f-space-2xl: 12rem;
    --f-space-xl: 8rem;
    --f-space-lg: 4rem;
    --f-space-md: 2rem;
    --f-space-sm: 1.5rem;
    --f-space-xs: 0.75rem;
    --f-space-2xs: 0.25rem;

    --f-section: 4rem;

    --f-radius-lg:2rem;
    --f-radius-default: 0.75rem;

    --f-row-width-01: 1420px;
    --f-trans-default: 0.2s;

    /* header height (not including padding) */
    --f-header-height: 4.75rem;
    --f-header-height-scroll: 4rem;
    --f-banner-height: 40px;

    --f-color-border: #aaa;
}

/* headings ans spacings responsive */
@media screen and (max-width:1441px){

    :root{
        --f-heading-2xl: 5.5rem;
        --f-heading-xl: 3rem;
        --f-heading-lg: 2.25rem;
        --f-heading-md: 1.5rem;
        --f-space-2xl: 11rem;
        --f-space-xl: 6rem;
        --f-section: 3rem;
    }
}
@media screen and (max-width:1024px){

    :root{
        --f-heading-2xl: 4rem;
        --f-heading-lg: 2rem;
        --f-heading-md: 1.5rem;
        --f-heading-sm: 1.125rem;
        --f-heading-xs: 0.9rem;
        --f-space-2xl: 10rem;
        --f-space-xl: 5rem;
        --f-header-height: 4.5rem;
        --f-header-height-scroll: 3.75rem;
        --f-radius-lg:1.75rem;
        --f-section: 2rem;
    }
}

@media screen and (max-width: 767px){
    :root{
        --f-heading-2xl: 2.5rem;
        --f-heading-xl: 2rem;
        --f-heading-lg: 1.75rem;
        --f-heading-md: 1.25rem;
        --f-body-lg: 1.1rem;
        --f-body-md: 1.0rem;
        --f-body-sm: 0.8rem;
        --f-space-2xl: 6rem;
        --f-space-xl: 4rem;
        --f-space-lg:2.5rem;
        --f-space-md: 1.5rem;
        --f-space-sm: 1rem;
        --f-space-xs: 0.5rem;
        --f-header-height: 2.8rem;
        --f-header-height-scroll: 2.3rem;
        --f-radius-lg:1rem;
        --f-section:2rem;
    }
}
html{
    scroll-behavior: smooth;
}
#voucher_page, #product_page, #products_page, #xmas_corp {
    /* --f--- Layout & utility classes (from styles.css) --f--- */
    .none{display:none;}
    .object-cover {object-fit: cover;}
    .w-100 {width:100%;}
    .h-100 {height:100%;}
    .relative {position: relative;}
    .absolute {position: absolute;}
    .absolute.top{top:0;}
    .absolute.right{right:0;}
    .flex-col {flex-direction: column;display: flex;}
    .flex-row {flex-direction: row;display: flex;}
    .justify-center {justify-content: center;}
    .justify-space-between {justify-content: space-between;}
    .align-center {align-items: center;}
    .align-end {align-items: end;}
    .align-start {align-items: flex-start;}
    .align-self-end {align-self: flex-end;}
    .flex-grow-1 {flex-grow: 1;}
    .flex-col.wrap, .flex-row.wrap{
        flex-wrap: wrap;
    }

    .text-center{text-align: center;}
    .grid {display: grid;padding:2px;}
    .cols-1-1-1-1 {grid-template-columns: 1fr 1fr 1fr 1fr;}
    .cols-1-1-1 {grid-template-columns: 1fr 1fr 1fr;}
    .cols-1-1 {grid-template-columns: 1fr 1fr;}
    .cols-1-2 {grid-template-columns: 1fr 2fr;}
    .cols-2-3 {grid-template-columns: 2fr 3fr;}
    .italic {font-style: italic;}
    .circle {border-radius: 50%; aspect-ratio: 1;}
    .rounded-lg {border-radius: var(--f-radius-lg);}
    .rounded {border-radius: var(--f-radius-default);}
    .overflow-hidden {overflow:hidden;}
    .pointer {cursor: pointer;}
    .landscape{aspect-ratio:16/9;}
    .four3{aspect-ratio: 4/3;}
    .circle, .square{aspect-ratio: 1;}
    .rw05{max-width:50rem;}
    .balance{text-wrap:balance;}
    .border{border:1px solid var(--f-color-border);}
    .page-h1{font-size:54px; line-height:1.1;}
    @media screen and (max-width:1024px) {
        .flex-row.tab-cols-1 {
            flex-direction: column;
        }
        .tab-cols-1-1 {
           grid-template-columns: 1fr 1fr;
        }
        .tab-cols-1 {
            grid-template-columns: 1fr;
        }
        .page-h1{font-size:46px; line-height:1.1;}
    }
    @media screen and (max-width: 767px) {
        .flex-row.mob-cols-1 {
            flex-direction: column;
        }
        .mob-cols-1 {
            grid-template-columns: 1fr;
        }
        .mob-order-1{
            order:-1;
        }
        .mob-hide {display:none !important}
        .page-h1{font-size:32px; line-height:1.1;}
    }
    .ml-xs {margin-left:var(--f-space-xs);}
    .mb-sm {margin-bottom:var(--f-space-sm);}
    .mb-md {margin-bottom:var(--f-space-md);}
    .mb-xs {margin-bottom:var(--f-space-xs);}
    .p-sm {padding:var(--f-space-sm);}
    .p-xs {padding:var(--f-space-xs);}
    .pb-2xs {padding-bottom:var(--f-space-2xs);}
    .pb-xs {padding-bottom:var(--f-space-xs);}
    .pl-xs {padding-left:var(--f-space-xs);}
    .px-sm {padding-left:var(--f-space-sm); padding-right:var(--f-space-sm)}
    .px-xs {padding-left:var(--f-space-xs); padding-right:var(--f-space-xs)}
    .py-xs {padding-top:var(--f-space-xs); padding-bottom:var(--f-space-xs)}
    .py-2xs {padding-top:var(--f-space-2xs); padding-bottom:var(--f-space-2xs)}
    .py-sec {padding-top:var(--f-section); padding-bottom:var(--f-section)}
    .pr-xs {padding-right:var(--f-space-xs);}
    .pb-sm {padding-bottom:var(--f-space-sm);}
    .pt-xs {padding-top:var(--f-space-xs);}
    .pt-2xs {padding-top:var(--f-space-2xs);}
    .gap-xl {gap: var(--f-space-xl);}
    .gap-lg {gap: var(--f-space-lg);}
    .gap-md {gap: var(--f-space-md);}
    .row-gap-lg{row-gap: var(--f-space-lg);}
    .col-gap-lg{column-gap: var(--f-space-lg);}
    .row-gap-md{row-gap: var(--f-space-md);}
    .col-gap-md{column-gap: var(--f-space-md);}
    .gap-sm {gap: var(--f-space-sm);}
    .row-gap-sm{row-gap: var(--f-space-sm);}
    .col-gap-sm{column-gap: var(--f-space-sm);}
    .gap-xs {gap: var(--f-space-xs);}
    .row-gap-xs{row-gap: var(--f-space-xs);}
    .col-gap-xs{column-gap: var(--f-space-xs);}
    .gap-2xs {gap: var(--f-space-2xs);}
    .heading {
        color: var(--color-heading-text); 
        text-transform: uppercase;
        line-height: 1;
    }
    .icn{
        font-family: 'Material Icons' !important;
        font-weight: normal !important;
        font-feature-settings: liga;
        text-transform: initial;
        text-indent: 0 !important;
        overflow: hidden;
        font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24
    }
    .icn.xl {height:var(--f-heading-xl);min-width: fit-content;}
    .icn.lg {height:var(--f-heading-lg);min-width: fit-content;}
    .icn.md {height:var(--f-heading-md);min-width: fit-content;}
    .icn.sm {height:var(--f-heading-sm);min-width: fit-content;}
    .icn.xs {height:var(--f-heading-xs);min-width: fit-content;}
    .icn.xxs {height:var(--f-body-sm);min-width: fit-content;}
    .heading.xl, .text-xl, .icn.xl {font-size: var(--f-heading-xl);}
    .heading.lg, .text-lg, .icn.lg {font-size: var(--f-heading-lg);}
    .heading.md, .text-md, .icn.md {font-size: var(--f-heading-md);}
    .heading.sm, .text-sm, .icn.sm {font-size: var(--f-heading-sm);}
    .heading.xs, .text-xs, .icn.xs {font-size: var(--f-heading-xs);}
    .heading.xxs, .text-2xs, .icn.xxs {font-size: var(--f-body-sm);}
    .body-text {
        text-transform: none;
        font-size: var(--f-body-md);
        margin:0;
        line-height:140%;
        color:var(--font-color);
    }
    .body-text-size {
        text-transform: none;
        font-size: var(--f-body-md);
        margin:0;
        line-height:140%;
        font-weight:400;
    }
    .body-text-lg {
        text-transform: none;
        font-size: var(--f-body-lg);
        line-height:140%;
    }
    .heading.lg, .heading.md, .heading.sm, .heading.xs {
        font-weight: 500;
        margin:0 !important;
    }
    .heading.mid-weight {font-weight:600;}
    .heading.bold {font-weight:900;}
    .h1.h, p, span{
        margin:0 !important;
    }
    .border {border:solid 1px var(--f-color-border);}
    .border-b {border-bottom:solid 1px var(--f-color-border);}
    .scroll-to {scroll-margin-top: calc(var(--f-space-xl) + var(--f-banner-height))}
    .square {aspect-ratio: 1/1;}
    a {color: var(--color-link-text); transition: var(--f-trans-default); text-decoration: none;}
    p a:hover {color: var(--color-link-text-hover);}
    @media screen and (max-width:1024px) {
        .tab-hide {display:none !important}
    }
    section, .row {position:relative;}

    .light-bg{
        background-color: var(--light-bg-color);
        color:var(--light-text-color) !important;
        margin-top: var(--f-section);
        margin-bottom: var(--f-section);
    }
    .light-bg.py-sec{
        padding-top:calc(var(--f-section) * 2);
        padding-bottom:calc(var(--f-section) * 2);
    }
    .bg-body{
        background-color: var(--body-bg-color);
    }

    /* SPECIFIC STYLES */
    /* Accordion */
    .prod-accordion{
        overflow: hidden;
    }
    .prod-accordion-title{
        cursor:pointer;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: start;
        gap:var(--f-space-sm);
    }
    .prod-accordion-content{
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows var(--f-trans-default);
    }
    .prod-accordion .prod-accordion-title .icn{
        transition: all var(--f-trans-default);
    }
    .prod-accordion.active .prod-accordion-content{
        grid-template-rows: 1fr;
    }
    .prod-accordion.active .prod-accordion-title .icn{
        transform: rotateZ(45deg);
    }
    .prod-accoridon-content-wrapper{
        min-height: 0;
        visibility: hidden;
        transition: var(--f-trans-default);
    }
    .prod-accordion.active .prod-accoridon-content-wrapper{
        visibility: visible;
    }
    .faq-answer{
        padding: var(--f-space-xs) var(--f-space-xs) 0 var(--f-space-xs);
    }

    /* Voucher Widet */
    #priceTextWrap{
        min-width: 5rem;
    }
    .priceWrapper .control{
        width: 20px;
        height: 20px;
        position: relative;
        min-width: 20px;
        cursor: pointer;
        align-self: center;
    }
    .priceWrapper .control > .line{
        background-color: var(--font-color, #1b1b1b);
    }
    .priceWrapper .control > .line:nth-child(1) {
        width: 100%;
        height: 4px;
        position: absolute;
        top: calc(50% - 2px);
    }
    .priceWrapper .control > .line:nth-child(2) {
        width: 4px;
        height: 100%;
        position: absolute;
        left: calc(50% - 2px);
    }

    /* Review */
    .prod-review-swiper .swiper-slide{
        width: 30%;
        height: auto !important;
        flex-grow: 1;
    }
    .review-slide{
        height:100%;
        display:flex;
        flex-direction:column
    }
    .review-slide .rev{
        background-color: var(--btn-bg-color);
        color: var(--body-bg-color);
        flex-grow:1;
        padding: var(--f-space-sm);
        border: 1px solid var(--f-color-border);
        border-radius: var(--f-radius-default);
        display:flex;
        flex-direction: column;
        gap:var(--f-space-sm);
        justify-content: space-between;
    }
    .review-slide .review.readmore .desc p{
        max-height: 37px;
    }

    /* Swiper */
    .swiper-wrapper{
        padding-bottom:0px;
        margin-left:-4px;
        margin-bottom:var(--f-space-sm);
    }
    .swiper-button-disabled{
        opacity:60%;
    }
    .swiper-btn{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .swiper-slide{
        padding:4px;
    }
    .scroll-fade-out{    
        position:absolute;
        right:0;
        top:0;
        bottom:0;
        width: 5%;
        max-width: 5%;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--body-bg-color, #fff));
        z-index: 10;
    }

    /* product tile */
    .tile-wrapper{
        height:100%;
    }
    .prod-swiper .swiper-slide{
        width: 30%;
        height: auto !important;
        flex-grow: 1;
    }
    .product-tile{
        border: 1px solid var(--f-color-border);
        border-radius:var(--f-radius-default);
        overflow:hidden;
        height:100%;
        display:flex;
        flex-direction:column;
        transition: var(--f-trans-default) all;
    }
    .product-img{
        position:relative;
        aspect-ratio:4/3;
        overflow:hidden;
    }
    .product-img img{
        transition:var(--f-trans-default) all
    }
    .product-tile:hover{
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    }
    .product-tile:hover .product-img img{
        transform: scale(1.1);
    }

    /* --f--- Buttons, inputs & theme-specific overrides (from colour-scheme-light.css) --f--- */
    .button.outline a{
        box-shadow: inset 0 0 0 2px var(--font-color);
        background-color: transparent;
        color: var(--font-color) !important;
    }
    .button.border-top a{
        border-top: 1px solid var(--f-color-border);
        background-color: transparent;
        color: var(--font-color) !important;
        border-radius: 0;
    }
    .prevBtn{
        padding: var(--f-space-xs) 0; 
    }
    .prevBtn .btn-title{
        color: var(--color-body-text);
    }
    /*#actSelect{
        background-color: transparent;
    }*/

    /*----- FILTERS -----*/
    #filters{
        position:sticky;
        top:0;
    }
    #sort-products, #actSelect{
        /*border:unset;*/
        background: white !important;
    }
    #sort-products:focus-visible{
        border:unset;
        outline:unset;
    }
    .filter-container{
        position:fixed;
        inset:0;
        background-color: rgba(0,0,0,0.25);
        z-index:2010;
        visibility:hidden;
    }
    .filter-wrapper{
        transition: 300ms;
        left:-35rem;
        position:relative;
        padding:var(--f-space-md) var(--f-space-sm);
        max-width:30rem;
        height:100%;
        background-color: var(--body-bg-color);
        display:flex;
        flex-direction: column;
        gap:var(--f-space-sm);
        max-height:100svh;
        overflow-y:scroll;
    }
    .filter-container.is-open{
        visibility: visible;
    }
    .filter-container.is-open .filter-wrapper{
        left: 0;
    }
    .range_container {
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: 100px auto;
    }
    .sliders_control {
        position: relative;
        min-height: 50px;
    }
    .form_control {
        position: relative;
        display: flex;
        justify-content: space-between;
        font-size: 24px;
        color: #635a5a;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        pointer-events: all;
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 1px #C6C6C6;
        cursor: pointer;
    }
    input[type=range]::-moz-range-thumb {
        -webkit-appearance: none;
        pointer-events: all;
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 1px #C6C6C6;
        cursor: pointer;  
    }
    input[type=range]::-webkit-slider-thumb:hover {
        background: #f7f7f7;
    }
    input[type=range]::-webkit-slider-thumb:active {
        box-shadow: inset 0 0 3px var(--color-accent), 0 0 9px var(--color-accent);
        -webkit-box-shadow: inset 0 0 3px var(--color-accent), 0 0 9px var(--color-accent);
    }
    input[type="number"]:not(.input-number) {
        width: 50px;
        height: var(--f-heading-xs);
        border: none;
    }
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button {  
        opacity: 1;
    }
    input[type="range"] {
        -webkit-appearance: none; 
        appearance: none;
        height: 0.5rem;
        width: 100%;
        position: absolute;
        background-color: #808080ff;
        pointer-events: none;
    }
    #fromSlider {
        height: 0;
        z-index: 1;
        top:0.25rem;
    }
    #toSlider{
        border: 1px solid #808080ff;
    }
    .filter-tick{
        height:var(--f-space-xs);
        aspect-ratio:1;
        padding: 1px;
        border-radius: 0.1rem;
        border: solid 2px var(--f-color-border);
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        position:relative
    }
    .filter-tick .tick-mark{
        background-color: transparent;
    }
    .shop-filter.active .tick-mark{
        background-color: var(--font-color);
    }
    .clear-filter{cursor: pointer;}
    .filter-list-item{
        padding:4px;
        border:1px solid var(--font-color, #000)
    }
    .filter-list-item p{
        text-wrap: nowrap
    }
    .act-filter{
        display: none;
    }
    .act-filter.row-0{
        display:flex;
    }
    /*--------- RESPONSIVE ------------*/
    @media screen and (max-width:1024px){
        .prod-swiper .swiper-slide{
            width: 40%;
        } 
        .prod-review-swiper .swiper-slide{
            width: 40%;
        }
    }
    @media screen and (max-width:767px){
        .prod-swiper .swiper-slide{
            width: 60%;
        } 
        .prod-review-swiper .swiper-slide{
            width: 50%;
        }
    }
    @media screen and (max-width:512px){
        .prod-swiper .swiper-slide{
            width: 90%;
        } 
        .prod-review-swiper .swiper-slide{
            width: 80%;
        }
    }
}