/** Shopify CDN: Minification failed

Line 1791:57 Expected identifier but found ","
Line 1832:14 Expected identifier but found whitespace
Line 1832:15 Unexpected "var("

**/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}
button{
    border: none;
    background: transparent;
    cursor: pointer;
}
.pointer{
    cursor: pointer;
}
:root {
    --lum-primary-1: #ecf7ee;
    --lum-primary-2: #c5e8cd;
    --lum-primary-3: #9ed8ad;
    --lum-primary-4: #74c78d;
    --lum-primary-5: #41b66c;
    --lum-primary-6: #15ae5c;
    --lum-primary-7: #11974f;
    --lum-primary-8: #086a36;
    --lum-primary-9: #03411f;
    --lum-primary-10: #011c0a;
    --lum-primary: var(--lum-primary-6);
    --lum-danger: #ff6666;
    --lum-success: #12B76A;
    --lum-star:    #FAAD14;
    --lum-shop:    #5433EB;
    --lum-shop-dot:#5A31F4;
    --lum-info:    #0C8CE9;
    --lum-n-1000: #000000;
    --lum-n-900: #091e42;
    --lum-n-800: #172b4d;
    --lum-n-700: #253858;
    --lum-n-600: #344563;
    --lum-n-500: #42526e;
    --lum-n-400: #505f79;
    --lum-n-300: #5e6c84;
    --lum-n-200: #6b778c;
    --lum-n-100: #7a869a;
    --lum-n-90: #8993a4;
    --lum-n-80: #97a0af;
    --lum-n-70: #a5adba;
    --lum-n-60: #b3bac5;
    --lum-n-50: #c1c7d0;
    --lum-n-40: #dfe1e6;
    --lum-n-30: #ebecf0;
    --lum-n-20: #f4f5f7;
    --lum-n-10: #fafbfc;
    --lum-n-0: #ffffff;
    --lum-border: var(--lum-n-30);
    --lum-font: 'Inter', 'Open Sans', sans-serif;
    --lum-w-body: 500;
    --lum-w-heading: 700;
    --lum-heading-md:20.25px;
    --lum-heading-sm:18px;
    --lum-heading-xs:16px;
    --lum-h-heading-sm:32px;
    --lum-text-lg: 16px;
    --lum-text-lg-lh: 32px;
    --lum-text-md: 14.22px;
    --lum-text-md-lh: 28px;
    --lum-text-sm: 12.64px;
    --lum-text-sm-lh: 24px;
    --lum-text-xs: 11.24px;
    --lum-text-xs-lh: 20px;
    --lum-text-xxs: 9.99px;
    --lum-text-xxs-lh: 12px;
    --lum-text-xxxs: 8.88px;
    --lum-text-xxxs-lh: 12px;
    --lum-h-heading-xs: 32px;
    --lum-h-heading-sm:32px;
    --lum-h-heading-md: 36px;
    --lum-h-lg: 22.78px;
    --lum-h-lg-lh: 40px;
    --lum-h-lg-w: 700;
    --lum-h-md: 20.25px;
    --lum-h-md-lh: 36px;
    --lum-h-sm: 18px;
    --lum-h-sm-lh: 32px;
    --lum-h-xs: 16px;
    --lum-h-xs-lh: 32px;
    --lum-h-xxs: 14.22px;
    --lum-h-xxs-lh: 28px;
    --lum-containr: 1536px;
    --lum-b-xs: 400px;
    --lum-b-sm: 520px;
    --lum-b-md: 768px;
    --lum-b-lg: 1024px;
    --lum-b-xl: 1280px;
    --lum-b-2xl: 1600px;
    --lum-b-3xl: 1800px;
    /*icons size*/
    --lum-icon-xs: 12px;
    --lum-icon-sm: 16px;
    --lum-icon-md: 20px;
    --lum-icon-lg: 24px;
    --lum-icon-xl: 28px;
}

@media screen and (min-width: 1024px) {
    :root {
        --lum-heading-xs: 20.25px ;
        --lum-h-heading-sm: 40px;
         --lum-heading-sm:22.78px;
        --lum-heading-md:32.44px;
        --lum-text-lg: 18px;
        --lum-text-lg-lh: 36px;
        --lum-text-md: 16px;
        --lum-text-md-lh: 32px;
        --lum-text-sm: 14.22px;
        --lum-text-sm-lh: 24px;
        --lum-text-xs: 12.64px;
        --lum-text-xs-lh: 20px;
        --lum-text-xxs: 11.24px;
        --lum-text-xxs-lh: 16px;
        --lum-text-xxxs: 9.99px;
        --lum-text-xxxs-lh: 12px;
        --lum-h-heading-md: 56px;
        --lum-h-heading-sm: 40px;
        --lum-h-heading-xs: 32px;
        --lum-h-lg: 41.05px;
        --lum-h-lg-lh: 72px;
        --lum-h-lg-w: 900;
        --lum-h-md: 32.44px;
        --lum-h-md-lh: 56px;
        --lum-h-sm: 22.78px;
        --lum-h-sm-lh: 40px;
        --lum-h-xs: 20.25px;
        --lum-h-xs-lh: 36px;
        --lum-h-xxs: 18px;
        --lum-h-xxs-lh: 32px;
    }
}

.text-primary {
    color: var(--lum-primary) !important;
}

/* ---------- Typography utilities ---------- */
.lum-text-lg, .lum-text-md, .lum-text-sm,
.lum-text-xs, .lum-text-2xs, .lum-text-3xs {
    font-family: var(--lum-font);
    font-weight: var(--lum-w-body);
}
.lum-h-lg, .lum-h-md, .lum-h-sm, .lum-h-xs, .lum-h-2xs {
    font-family: var(--lum-font);
    font-weight: var(--lum-w-heading);
}

.lum-bold{
    font-weight: var(--lum-w-heading);
}
/*heading*/
.lum-heading-md{
    font-size: var(--lum-heading-md);
    font-weight: var(--lum-w-heading);
    line-height: var(--lum-h-heading-md);
}
.lum-heading-sm{
    font-size: var(--lum-heading-sm);
    font-weight: var(--lum-w-heading);
    line-height: var(--lum-h-heading-sm);
}
.lum-heading-xs{
    font-size: var(--lum-heading-xs);
    font-weight: var(--lum-w-heading);
    line-height: var(--lum-h-heading-xs);
}

/*=======================*/


.lum-text-lg {
    font-size: var(--lum-text-lg);
    line-height: var(--lum-text-lg-lh);
}

.lum-text-md {
    font-size: var(--lum-text-md);
    line-height: var(--lum-text-md-lh);
}

.lum-text-sm {
    font-size: var(--lum-text-sm);
    line-height: var(--lum-text-sm-lh);
}

.lum-text-xs {
    font-size: var(--lum-text-xs);
    line-height: var(--lum-text-xs-lh);
}

.lum-text-2xs {
    font-size: var(--lum-text-xxs);
    line-height: var(--lum-text-xxs-lh);
}

.lum-text-3xs {
    font-size: var(--lum-text-xxxs);
    line-height: var(--lum-text-xxxs-lh);
}

.lum-h-lg {
    font-size: var(--lum-h-lg);
    line-height: var(--lum-h-lg-lh);
    font-weight: var(--lum-h-lg-w);
}

.lum-h-md {
    font-size: var(--lum-h-md);
    line-height: var(--lum-h-md-lh);
}

.lum-h-sm {
    font-size: var(--lum-h-sm);
    line-height: var(--lum-h-sm-lh);
}

.lum-h-xslum-h-xs {
    font-size: var(--lum-h-xs);
    line-height: var(--lum-h-xs-lh);
}

.lum-h-2xs {
    font-size: var(--lum-h-xxs);
    line-height: var(--lum-h-xxs-lh);
}

.lum-container {
    width: 100%;
    max-width: var(--lum-containr);
    margin: 0 auto;
}


.lum-utility { 
    background: var(--lum-primary);
    color: var(--lum-n-0);
    position: relative;
}
.lum-utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 32px;
}
.lum-utility__links { display: flex; align-items: center; gap: 16px; }
.lum-utility__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lum-n-0);
    text-decoration: none;
}
.lum-utility__link  span {
    display: none;
}
.lum-utility__link:hover { opacity: .85; }
@media screen and (min-width: 1024px) {
    .lum-utility__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 40px;
    }
    .lum-utility__link  span {
        display: inline-block;
    }
}




/*-------------------- buttons --------------------- */
.lum-button {
    --h: 40px;
    --px: 24px;
    --gap: 8px;
    --rounded: 8px;
    --border: 1px;
    --icon: 16px;
    outline: none;
    --fs: var(--lum-text-sm);
    --fl: var(--lum-text-xs-lh);
    @media screen and (min-width: 1024px) {
        --h: 48px;
        --px: 32px;
        --icon: 24px;
        --fs: var(--lum-text-sm);
        --fl: var(--lum-text-xs-lh);
    }
    height: var(--h);
    white-space: nowrap;
    cursor: pointer;
    padding: 0 var(--px);
    border-radius: var(--rounded);
    display: flex;
    gap: var(--gap);
    transition: all 0.3s ease;
    align-items: center;
    width: 100%;
    justify-content: center;
    border: var(--border) solid transparent;
    .text__lum-button {
        font-size: var(--fs);
        font-weight: 500;
        line-height: var(--fl);
    }

    &.primary {
        background: var(--lum-primary);
        color: var(--lum-n-0);
    }

    &.outline {

        background: white;
        border: 1px solid var(--lum-n-30);
        color: var(--lum-n-1000);
    }

    &:hover {
        border-color: var(--lum-primary);
        box-shadow: 0 0 0 3px rgba(21, 174, 92, 0.15);

    }
    &:disabled{
        color: var(--lum-n-200);
        background: var(--lum-n-40);
        border-color: var(--lum-n-40);
        box-shadow: none;
    }
    &.glass {
        background: rgba(255, 255, 255, 0.30);
        border-color: var(--lum-border);
        color: var(--lum-n-30);
    }
}


/* ==========================================================================
   EMAIL FIELD (lum-field) — states: default / focus / error.
   (used here with a fallback so the demo renders standalone)
   ========================================================================== */
.lum-field {
    --_danger: var(--lum-danger);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lum-field__label { font-size: var(--lum-text-sm); font-weight: 700; color: var(--lum-n-900); }
.lum-field__label span { color: var(--lum-primary   ); font-weight: 500; }

.lum-field__input {
    block-size: 48px;
    padding-inline: 16px;
    border: 1px solid var(--lum-n-30);
    border-radius: 8px;
    background: var(--lum-n-0);
    font-family: inherit;
    font-size: var(--lum-text-sm);
    color: var(--lum-n-1000);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.lum-field__input::placeholder { color: var(--lum-n-100); }
.lum-field__input:focus{
    border-color: var(--lum-primary);
    box-shadow: 0 0 0 3px rgba(21, 174, 92, .15);
}

.lum-field--error .lum-field__input {
    border-color: var(--_danger);
    box-shadow: 0 0 0 3px rgba(255, 102, 102, .15);
}
.lum-field__error {
    font-size: var(--lum-text-xs);
    color: var(--_danger);
    display: none;
}
.lum-field--error .lum-field__error { display: block; }
/* ==========================================================================
   BREADCRUMB (lum-breadcrumb)
   ========================================================================== */
.lum-breadcrumb {
    --_fg: var(--lum-n-500);
    --_sep: var(--lum-n-300);
}
.lum-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.lum-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lum-breadcrumb__link {
    color: var(--_fg);
    font-size: var(--lum-text-sm);
    transition: color .2s ease;

    &:hover { color: var(--lum-primary); }
}
.lum-breadcrumb__sep {
    color: var(--_sep);
    flex-shrink: 0;
}
.lum-breadcrumb__current {
    color: var(--_fg);
    font-size: var(--lum-text-sm);
}

/* ==========================================================================
   SHOW-MORE TEXT (lum-show more)
   ========================================================================== */
.lum-showmore {
    --_clamp: 2;   /* lines shown before the button */
    color: var(--lum-n-600);
    font-size: var(--lum-text-sm);
    line-height: 1.7;
}
.lum-showmore__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--_clamp);
    overflow: hidden;
    font-size: var(--lum-text-lg);
    color: var(--lum-n-700);
    line-height: var(--lum-text-lg-lh);
}
.lum-showmore[data-expanded] .lum-showmore__text {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.lum-showmore__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-block-start: 6px;
    border: 0;
    background: transparent;
    color: var(--lum-primary);

    font-size: var(--lum-text-sm);
    cursor: pointer;
}
.lum-showmore__toggle-caret { transform: rotate(90deg); transition: transform .2s ease; } /* no chevron-down yet */
.lum-showmore[data-expanded] .lum-showmore__toggle-caret { transform: rotate(-90deg); }
.lum-showmore__toggle-less { display: none; }
.lum-showmore[data-expanded] .lum-showmore__toggle-more { display: none; }
.lum-showmore[data-expanded] .lum-showmore__toggle-less { display: inline; }

/* ==========================================================================
   SWITCH (lum-switch) — accessible toggle built on a real checkbox.
   ========================================================================== */
.lum-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    justify-content: space-between;
}
.lum-switch__input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.lum-switch__track {
    position: relative;
    inline-size: 32px;
    block-size: 18px;
    border-radius: 999px;
    background: var(--lum-n-40);
    transition: background-color .2s ease;
    flex-shrink: 0;
}
.lum-switch__thumb {
    position: absolute;
    inset-block-start: 1px;
    inset-inline-start: -1px;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--lum-n-0);
    box-shadow: 0 1px 3px rgb(9 30 66 / .3);
    transition: transform .2s ease;
}
.lum-switch__input:checked + .lum-switch__track { background: var(--lum-primary); }
.lum-switch__input:checked + .lum-switch__track .lum-switch__thumb { transform: translateX(16px) }
.lum-switch__input:focus-visible + .lum-switch__track { outline: 2px solid var(--lum-primary); outline-offset: 2px; }
.lum-switch__label { color: var(--lum-n-900); font-size: var(--lum-text-md); }
.lum-accordion {
    border-radius: 12px;
    overflow: hidden;
}
.lum-accordion__item + .lum-accordion__item { border-block-start: 1px solid var(--lum-n-30); }
.lum-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    padding: 16px;
    border: 0;
    background: var(--lum-n-0);
    color: var(--lum-n-1000);

    font-size: var(--lum-text-md);
    font-weight: 700;
    text-align: start;
    cursor: pointer;
    transition: background-color .2s ease;
}
.lum-accordion__summary:hover { background: var(--lum-n-10); }
.lum-accordion__caret { color: var(--lum-n-500); transform: rotate(90deg); transition: transform .2s ease; flex-shrink: 0; } /* no chevron-down yet */
.lum-accordion__item[data-open] .lum-accordion__caret { transform: rotate(-90deg); }
.lum-accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.lum-accordion__item[data-open] .lum-accordion__body { grid-template-rows: 1fr; }
.lum-accordion__inner { min-block-size: 0; overflow: hidden; }
.lum-accordion__details { padding: 0 16px 16px; color: var(--lum-n-600); font-size: var(--lum-text-sm); line-height: 1.7; }
/* optional actions row (like MUI AccordionActions) */
.lum-accordion__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 16px; }

/* ==========================================================================
   CHECKBOX (lum-check) — custom box on a real <input type=checkbox>.
   Default: white bg, our border, small radius. Checked: primary + white tick.
   ========================================================================== */
.lum-check { display: flex; align-items: center; gap: 10px; cursor: pointer; justify-content: space-between }
.lum-check__input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.lum-check__box {
    position: relative;
    inline-size: 20px;
    block-size: 20px;
    border: 1px solid var(--lum-n-50);
    border-radius: 4px;               /* slight round */
    background: var(--lum-n-0);        /* white */
    flex-shrink: 0;
    transition: background-color .2s ease, border-color .2s ease;
}
/* tick (hidden until checked) */
.lum-check__box::after {
    content: "";
    position: absolute;
    inset-block-start: 45%;
    inset-inline-start: 50%;
    inline-size: 5px;
    block-size: 10px;
    border: solid var(--lum-n-0);     /* white tick */
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg) scale(0);
    transition: transform .15s ease;
}
.lum-check__input:checked + .lum-check__box {
    background: var(--lum-primary);
    border-color: var(--lum-primary);
}
.lum-check__input:checked + .lum-check__box::after { transform: translate(-50%, -55%) rotate(45deg) scale(1); }
.lum-check__input:focus-visible + .lum-check__box { outline: 2px solid var(--lum-primary); outline-offset: 2px; }
.lum-check__label { color: var(--lum-n-900); font-size: var(--lum-text-md); }
/* ==========================================================================
   DUAL RANGE (lum-range) — two native range inputs stacked on one track.
   Native <input type=range> has ONE thumb, so we overlay two and only let each
   grab its own thumb (pointer-events juggled in CSS + JS clamps values).
   ========================================================================== */
.lum-range__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-block-end: 16px;
}
.lum-range__field {
    display: grid;
    grid-template-columns: 32px auto 10px;
    gap: 16px;
    align-items: center;
}
.lum-range__field-label { inline-size: 40px; color: var(--lum-n-400); font-size: var(--lum-text-sm); }
.lum-range__input {
    width: 100%;
    block-size: 44px;
    padding-inline: 16px;
    text-align: center;
    background: var(--lum-n-20);
    border: 1px solid var(--lum-n-30);
    border-radius: 8px;
    font-size: var(--lum-text-sm);
    color: var(--lum-n-1000);
    outline: none;
}
.lum-range__input:focus { border-color: var(--lum-primary); box-shadow: 0 0 0 3px rgba(21,174,92,.15); }
.lum-range__suffix { inline-size: 40px; color: var(--lum-n-400); font-size: var(--lum-text-sm); }
/* ==========================================================================
   CATEGORY CARDS ROW (lum-catrow) — single horizontal row, never wraps,
   scrolls on overflow. Active card = primary border.
   Private --_ tokens on the block; media query swaps values only. BP 1024.
   ========================================================================== */
/* ==========================================================================
   FILTER SEARCH (lum-fsearch) — small search that live-filters the list below
   it (client-side). Pairs with lum-check items. Matches on each item's text.
   ========================================================================== */
.lum-fsearch {
    display: flex;
    align-items: center;
    gap: 10px;
    block-size: 48px;
    padding-inline: 16px;
    background: var(--lum-n-10);
    border: 1px solid var(--lum-n-30);
    border-radius: 10px;

    transition: border-color .2s ease, box-shadow .2s ease;
}
.lum-fsearch:focus-within { border-color: var(--lum-primary); box-shadow: 0 0 0 3px rgba(21,174,92,.15); }
.lum-fsearch__icon { color: var(--lum-n-300); flex-shrink: 0; }
.lum-fsearch__input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;

    font-size: var(--lum-text-md);
    color: var(--lum-n-1000);
}
.lum-fsearch__input::placeholder { color: var(--lum-n-100); }

/* the list this search controls */
.lum-fsearch-list { display: flex; flex-direction: column; gap: 4px; margin-block-start: 12px; }
.lum-fsearch-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 10px;

    color: var(--lum-n-900);
    font-size: var(--lum-text-md);
}
.lum-fsearch-list__row[hidden] { display: none; }
.lum-fsearch__empty { padding-block: 12px; color: var(--lum-n-300); font-size: var(--lum-text-sm); }
.lum-fsearch__empty[hidden] { display: none; }

/* reuse the checkbox box look (compact) */
.lum-check__box2 { inline-size: 20px; block-size: 20px; border: 1px solid var(--lum-border); border-radius: 4px; background: var(--lum-n-0); }
.lum-catrow {
    --_card: 107px;    /* card width (mobile) */
    --_img:  64px;     /* image box (mobile) */
    --_gap:  12px;
}
@media screen and (min-width: 1024px) {
    .lum-catrow { --_card: 184px; --_img: 80px; --_gap: 16px; }
}

.lum-catrow__scroll {
    display: flex;
    flex-wrap: nowrap;              /* never wrap */
    gap: var(--_gap);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: 4px;            /* room so active border/shadow isn't clipped */
}
.lum-catrow__scroll::-webkit-scrollbar { display: none; }

.lum-catcard {
    flex: 0 0 var(--_card);
    inline-size: var(--_card);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border: 1px solid var(--lum-n-30);
    border-radius: 12px;
    background: var(--lum-n-0);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.lum-catcard:hover { border-color: var(--lum-primary); }
.lum-catcard.is-active {
    border-color: var(--lum-primary);
    box-shadow: 0 0 0 3px rgba(21, 174, 92, .12);
}
.lum-catcard__img {
    inline-size: var(--_img);
    block-size: var(--_img);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lum-catcard__img img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.lum-catcard__name {
    font-size: var(--lum-text-sm);
    color: var(--lum-n-1000);
    text-align: center;
    line-height: 30px;
}
/* slider */
.lum-range__slider { position: relative; block-size: 24px; }
.lum-range__rail {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    block-size: 4px;
    translate: 0 -50%;
    background: var(--lum-n-30);
    border-radius: 999px;
}
.lum-range__fill {
    position: absolute;
    inset-block-start: 50%;
    block-size: 4px;
    translate: 0 -50%;
    background: var(--lum-primary);
    border-radius: 999px;
}
.lum-range__thumbs { position: absolute; inset: 0; }
.lum-range__thumbs input {
    position: absolute;
    inset-inline: 0;
    inset-block: 0;
    inline-size: 100%;
    margin: 0;
    background: none;
    pointer-events: none;   /* only the thumb is interactive (set below) */
    -webkit-appearance: none;
    appearance: none;
}
/* thumb styling — WebKit */
.lum-range__thumbs input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    background: var(--lum-primary);
    border: 2px solid var(--lum-n-0);
    box-shadow: 0 1px 4px rgb(9 30 66 / .3);
    cursor: pointer;
}
/* thumb styling — Firefox */
.lum-range__thumbs input::-moz-range-thumb {
    pointer-events: auto;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    background: var(--lum-primary);
    border: 2px solid var(--lum-n-0);
    box-shadow: 0 1px 4px rgb(9 30 66 / .3);
    cursor: pointer;
}
.lum-range__ends { display: flex; justify-content: space-between; margin-block-start: 8px; }
.lum-range__end { color: var(--lum-n-400); font-size: var(--lum-text-xs); }
/* ==========================================================================
/* ==========================================================================
   PAGINATION (lum-pager)
   Active page = solid primary. Prev/Next = primary text + chevron.
   Disabled Prev/Next = muted, not clickable. "…" for skipped pages.
   Logical properties, no !important. Chevron via lum-icon (left/right).
   ========================================================================== */
.lum-pager__list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lum-pager__item { display: inline-flex; }

/* number links */
.lum-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 40px;
    block-size: 40px;
    padding-inline: 12px;
    border-radius: 8px;
    color: var(--lum-n-700);
    font-size: var(--lum-text-sm);
    transition: background-color .2s ease, color .2s ease;
}
.lum-pager__link:hover { background: var(--lum-n-20); color: var(--lum-n-1000); }

/* active page */
.lum-pager__item[aria-current="page"] .lum-pager__link,
.lum-pager__link.is-active {
    background: var(--lum-primary);
    color: var(--lum-n-0);
}

/* ellipsis */
.lum-pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 40px;
    block-size: 40px;
    color: var(--lum-n-400);  
    background: transparent;   
    border: 0;
    cursor: default;
    pointer-events: none;       
}

/* prev / next */
.lum-pager__edge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    block-size: 40px;
    padding-inline: 12px;
    border-radius: 8px;
    color: var(--lum-primary);
    font-size: var(--lum-text-sm);
    font-weight: 500;
    transition: background-color .2s ease;
}
.lum-pager__edge:hover { background: var(--lum-n-20); }
.lum-pager__edge[aria-disabled="true"] {
    color: var(--lum-n-60);
    pointer-events: none;
}

/* ---------- mobile: hide Previous label text, compress, show fewer numbers ---------- */
@media screen and (max-width: 767px) {
    .lum-pager__list { gap: 2px; }
    .lum-pager__link, .lum-pager__gap { min-inline-size: 36px; block-size: 36px; padding-inline: 8px; }
    .lum-pager__edge { block-size: 36px; padding-inline: 8px; }

    /* Previous edge is hidden on mobile (like the design) */
    .lum-pager__item[data-role="prev"] { display: none; }

    /* keep only: first page, last page, current (and its immediate neighbours),
       and the ellipsis. Hide the rest. */
    .lum-pager__item[data-role="page"]:not([data-keep]) { display: none; }
}

.lum-swatch {
    --_c: var(--lum-n-40);          /* fallback colour */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
     input{
        display:none;
     }
    .lum-swatch__chip {
        inline-size: 24px;
        block-size: 24px;
        border-radius: 6px;
        overflow: hidden;
        background: var(--_c);
        border: 1px solid var(--lum-n-30);
        box-shadow: inset 0 0 0 2px var(--lum-n-0);
        transition: box-shadow .2s ease;
        display: flex ;
        justify-content: center;
        align-items: center;
        i{
            display: none;
            color: var(--lum-n-0);
            width: 16px;
            height: 16px;
        }
        &.lg{
            @media screen and (min-width: 1024px) {
                inline-size: 40px;
                block-size: 40px;
                box-shadow: inset 0 0 0 4px var(--lum-n-0);
                i{
                    width: 32px;
                    height: 32px;
                }
            }
        }
        &.is-selected{
            box-shadow: inset 0 0 0 3px var(--lum-n-0), 0 0 0 2px var(--lum-primary);
        }
    }
    &:disabled{
        color: var(--lum-n-1000);
        i{
            display: inline-block;
        }
    }
}





/*-------------------- Input -------------------- */
.lum-input {
    --py: 10px;
    --px: 12px;
    --gap: 8px;
    --rounded: 8px;
    --border: 1px;
    --icon: 16px;
    --fs: var(--lum-text-sm);
    --fl: var(--lum-text-xs-lh);
    @media screen and (min-width: 1024px) {

    }
    border: var(--border) solid var(--lum-border);
    height: var(--h);
    gap: var(--gap);
    cursor: pointer;
    padding: var(--py) var(--px);
    border-radius: var(--rounded);
    display: flex;
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
    color: var(--lum-n-1000);

    .lum-input__field {
        border: none;
        outline: none;
        background: transparent;
        width: 100%;
        height: 100%;
        font-weight: 500;
        line-height: var(--fl);

    }

    .lum-input__icon {
        color: var(--lum-n-1000);
    }

    &:hover {
        border-color: var(--lum-primary);
        box-shadow: 0 0 0 3px rgba(21, 174, 92, 0.15);

    }
}

/*-------------------- product card -------------------- */
.lum-product-card {
    background: var(--lum-n-0);
    box-shadow: 0 0 0 1px var(--lum-border);
    display:flex;
    flex-direction: column;
    height:100%;

    .lum-product-card__img {
        --py: 0px;
        --px: 26px;
        padding: var(--py) var(--px);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 5/4;

        img {
            width: 100%;
            height: 100%;
            aspect-ratio: 1/1;
        }
    }

    .lum-product-card__content {
        --pb: 16px;
        --pt: 8px;
        --px: 16px;
        --gap: 4px;
        padding: var(--pt) var(--px) var(--pb) var(--px);
        cursor: pointer;
        display: flex;
        gap: var(--gap);
        flex-direction: column;
        justify-content:space-between;
        height:100%;
         color:var(--lum-n-1000);

        .lum-product-card__content-header {
            font-size: var(--lum-text-xs);
            color: var(--lum-primary-6);
                display: -webkit-box;
            -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
            @media screen and (min-width: 1024px) {
                font-size: var(--lum-text-xs) ;
                font-weight: 500;
                line-height: var(--lum-h-md) ;
            }
        }

        .lum-product-card__content-main {
            margin-top: 4px;
            font-size: var(--lum-text-md);
            line-height: var(--lum-h-md);
              display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
        }

        .lum-product-card__content-footer {
            margin-top: 4px;
            font-size: var(--lum-text-md);

            @media screen and (min-width: 1024px) {
                font-size: var(--lum-text-xs-lh) ;
                line-height: var(--lum-text-lg-lh) ;

            }
        }

    }

    &:hover .lum-product-card__content {
        background: linear-gradient(0deg, rgba(21, 174, 92, 0.15) -0.39%, rgba(255, 255, 255, 0.00) 49.39%);
    }

}

/*-------------------- lum sec head -------------------- */
.lum-sec-head {
    &[data-diraction="col"] {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;

        .lum-sec-head__desc {
            max-width: 900px;
        }
    }

    &[data-diraction="row"] {
        @media screen and (min-width: 1024px) {
            grid-template-columns: repeat(2, 1fr);
            display: grid;
            text-align: start;
            align-items: end;
            gap: 48px;
            .lum-eyebrow {
                &::after {
                    content: '';
                    display: none;
                }
            }
            
        }
         .lum-sec-head__title{
                text-align: start;
             }
    }

    .lum-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--lum-primary);
        text-transform: uppercase;
        letter-spacing: .06em;

        &::before, &::after {
            content: '';
            width: 24px;
            height: 1px;
            background: var(--lum-primary);
        }
    }

    .lum-sec-head__title {
        text-align: center;
        font-size: 22.78px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
        color: var(--lum-n-1000);
        @media screen and (min-width: 1024px) {
            font-size: 41.05px;
            font-style: normal;
            font-weight: 900;
            line-height: 72px;
        }
    }

    .lum-sec-head__desc {
        color: var(--lum-n-100);
    }

    .lum-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--lum-primary);
        text-decoration: none;
    }

    .lum-link:hover {
        color: var(--lum-primary);
    }
}
.lum-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lum-primary);
    text-decoration: none;
}

/*=====================================================*/
.lum-badge {
    min-inline-size: 20px;
    block-size: 20px;
    padding-inline: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lum-primary);
    color: var(--lum-n-0);
    font-size: var(--lum-text-xs);
    font-weight: 500;
    border-radius: 999px; }
/* ---------- categories ---------- */
.lum-cat__circle {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    background: var(--lum-n-20);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22%;
    box-sizing: border-box;
    transition: background .2s ease;
}

.lum-cat:hover .lum-cat__circle {
    background: var(--lum-n-30);
}

.lum-cat__circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lum-cat__name {
    color: var(--lum-n-700);
    text-align: center;
}

.lum-promos {
    padding: 24px 0 ;
    @media screen and (min-width: 1024px) {
        padding: 72px 0 ;
    }
}

.lum-promos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    @media screen and (min-width: 1024px) {
        gap: 32px;
    }
}

.lum-promo {
    position: relative;
    display: block;
    border-radius: 24px;
    @media screen and (min-width: 1024px) {
        border-radius: 40px;
    }
    aspect-ratio: 4/5;
    overflow: hidden;
    text-decoration: none;
}

.lum-promo__img {
    inset: 0;
    width: 100%;
    object-fit: cover;
}

.lum-promo__content {
    position: relative;
    padding: 28px;
    max-width: 62%;
}

.lum-promo__title {
    margin: 0 0 10px;
    color: var(--lum-n-900);
}

.lum-promo__text {
    margin: 0 0 16px;
    color: var(--lum-n-500);
}

/* ---------- ordered grid ---------- */
.lum-ordered {
        padding: 24px 0 ;
        @media screen and (min-width: 1024px) {
        padding: 72px 0 ;
    }
}

.lum-ordered__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    border: 1px solid var(--lum-border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;

}

/* ---------- responsive ---------- */
@media screen and (max-width: 1199px) {
    .lum-ordered__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 989px) {
    .lum-promos__grid {
        grid-template-columns: 1fr;
    }

    .lum-ordered__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 749px) {
    .lum-ordered__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/*---------- mbj -------- */
.lum-cta {
     padding:0 0 24px 0;
    @media screen and (min-width: 1024px) {
    padding:0 0 72px 0;
    }
}
/* ---------------------- */
.lum-cta__inner {
    display: flex;
    align-items: start;
    gap: 16px;
    @media screen and (min-width: 1024px) {
        gap: 20px;
    }

    flex-direction: column;
    padding: 24px;
    border-radius: 12px;
    background: var(--lum-primary);
    color: var(--lum-n-0);
    @media screen and (min-width: 1024px) {
        flex-direction: row;
        align-items: center;
        padding: 24px 40px;
        height: 156px;
    }
}

.lum-cta__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.lum-cta__text {
    flex: 1 1 auto;
    min-width: 0;
}

.lum-cta__title {
    margin: 0 0 4px;
    color: var(--lum-n-0);
    font-size: var(--lum-h-xs);
    line-height: var(--lum-h-xs-lh);
}

.lum-cta__desc {
    margin: 0;
    color: rgba(255, 255, 255, .85);
}

.lum-cta__actions {
    width: 100%;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns:  1fr;
    gap: 16px;
    @media screen and (min-width: 768px) {
        width: auto;
        grid-template-columns:  1fr 1fr;
    }
}

.lum-btn--white {
    background: var(--lum-n-0);
    border-color: var(--lum-n-0);
    color: var(--lum-n-700);
}

.lum-btn--white:hover {
    background: var(--lum-n-10);
}

/* ---------- blog ---------- */
.lum-blog {
    padding: 0 0 72px;
}



.lum-post {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lum-n-30);
    border-radius: 12px;
    overflow: hidden;
    background: var(--lum-n-0);
    transition: border-color .2s ease;
}

.lum-post:hover {
    border-color: var(--lum-primary);
}

.lum-post__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.lum-post__body {
    padding: 16px;
}

.lum-post__title {
    margin: 0 0 8px;
    font-size: var(--lum-text-lg);
    font-weight: 700;
    color: var(--lum-n-900);
}

.lum-post__excerpt {
    margin: 0 0 12px;

    color: var(--lum-n-100);
}

.lum-post__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--lum-text-xs);
    color: var(--lum-n-50);
}
/* ==========================================================================
   VIEW-MORE DIVIDER (lum-viewmore) — centered button with a faint rule
   running out to both edges. Rule is drawn with a flex line on each side.
   ========================================================================== */
.lum-viewmore {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    padding-block: 32px;
    font-family: var(--lum-font);
}
.lum-viewmore::before,
.lum-viewmore::after {
    content: "";
    flex: 1;                       /* each line fills the space to the edge */
    block-size: 1px;
    background: var(--lum-n-30);
}
.lum-viewmore__btn { flex: 0 0 auto; }  /* button keeps its size, lines flex */

/* ==========================================================================
   CATEGORY SHOWCASE (lum-showcase)
   Two blocks side by side (desktop) / stacked (mobile). Each block:
   banner + head (title + See All) + independent product Swiper (no tabs).
   Private --_ tokens on the block; media query swaps values only. BP 1024.
   ========================================================================== */
.lum-showcase {
    --_cols: 1;
    --_gap: 24px;
    --_banner-ratio: 466 / 271;
    --_radius: 16px;
    padding-block: clamp(32px, 5vw, 72px);
    font-family: var(--lum-font);
    .lum-pswiper { position: relative; padding: 0 16px 16px; }
    .lum-pswiper .swiper { overflow: hidden; }
    .lum-pswiper .swiper-slide { height: auto; }
    .lum-pswiper__arrow {
        position: absolute;
        inset-block-start: 40%;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 32px;
        block-size: 48px;
        border-radius: 40%;
        border: 1px solid var(--lum-n-30);
        background: var(--lum-n-0);
        color: var(--lum-n-700);
        cursor: pointer;
        box-shadow: 0 2px 8px rgb(9 30 66 / .12);
    }
    .lum-pswiper__arrow--prev { inset-inline-start: 4px; }
    .lum-pswiper__arrow--next { inset-inline-end: 4px; }
    .lum-pswiper__arrow.swiper-button-disabled { opacity: 0; pointer-events: none; }

}
@media (min-width: 1024px){
    .lum-showcase { --_cols: 2; --_gap: 32px; }
}

.lum-showcase__grid {
    display: grid;
    grid-template-columns: repeat(var(--_cols), 1fr);
    gap: var(--_gap);
}

/* ---- one block ---- */
.lum-showcase__block {
    border: 1px solid var(--lum-n-30);
    border-radius: var(--_radius);
    overflow: hidden;
    background: var(--lum-n-0);
    display: flex;
    flex-direction: column;
}
.lum-showcase__banner {
    display: block;
    aspect-ratio: var(--_banner-ratio);
    background: var(--lum-n-30);
    overflow: hidden;
}
.lum-showcase__banner img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.lum-showcase__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
}
.lum-showcase__title { margin: 0; color: var(--lum-n-1000); font-size: var(--lum-text-lg); font-weight: 700; }
.lum-showcase__seeall {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--lum-primary);
    font-size: var(--lum-text-sm);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- product swiper (independent, no tabs) ---- */



/* placeholder product card — REPLACE with your real horizontal product card */
.demo-pcard {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--lum-n-30);
    border-radius: 12px;
    block-size: 100%;
    &:hover {
        border-color: var(--lum-primary);
    }
}




.demo-pcard.is-active { border-color: var(--lum-primary); box-shadow: 0 0 0 2px rgba(21,174,92,.15); }
.demo-pcard__img {
    aspect-ratio: 4/5;
    border-radius: 8px;
    flex-shrink: 0;
    img{
        width: 60px;
        height: 60px;
    }

}
.demo-pcard__body { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.demo-pcard__name { 
    font-size: var(--lum-text-xs);
     color: var(--lum-n-1000); 
    line-height: 1.4;   
    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3em;
 }
.demo-pcard__meta { display: inline-flex; align-items: center; gap: 6px; }
.demo-pcard__price { font-size: var(--lum-text-xs); font-weight: 700; color: var(--lum-n-1000); }

/* ==========================================================================
   BRAND NETWORK (lum-brandnet) — split head + logo grid with hairline dividers.
   Dividers use the background+gap trick (grid bg shows through 1px gaps).
   Private --_ tokens on the block; media query swaps values only. BP 1024.
   ========================================================================== */
.lum-brandnet {
    --_cols: 2;
    --_pad: 24px;
    padding:24px 0 ;
    font-family: var(--lum-font);
}
@media (min-width: 768px){ .lum-brandnet { --_cols: 3; } }
@media (min-width: 1024px){ .lum-brandnet { --_cols: 6;} .lum-brandnet {padding:72px 0; }  }

/* ---- head (split) ---- */
.lum-brandnet__head { display: grid; gap: 16px; margin-block-end: 32px; }
@media (min-width: 1024px){
    .lum-brandnet__head { grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
}
.lum-brandnet__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--lum-primary);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 500;
    margin-block-end: 12px;
}
.lum-brandnet__eyebrow::before { content: ""; inline-size: 24px; block-size: 1px; background: currentColor; }
.lum-brandnet__title { margin: 0; color: var(--lum-n-1000); }
.lum-brandnet__lead { margin: 0; color: var(--lum-n-500); font-size: var(--lum-text-sm); line-height: 1.7; }

/* ---- logo grid ---- */
.lum-brandnet__grid {
    display: grid;
    grid-template-columns: repeat(var(--_cols), 1fr);
    gap: 1px;                       /* hairline gap */
    background: var(--lum-n-30);    /* shows through the gaps as dividers */
    border: 1px solid var(--lum-n-30);
    border-radius: 16px;
    overflow: hidden;
}
.lum-brandnet__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    background: var(--lum-n-0);      /* each cell opaque, so only gaps show grey */
    transition: background-color .2s ease;
    img{
        width: 120px;
        height: 120px;
        aspect-ratio: 1/1;
        @media (min-width: 1024px){
            width: 170px;
            height: 170px;
        }
    }
}
.lum-brandnet__cell:hover { background: var(--lum-n-10); }


/* placeholder box until real logos are dropped in */
.lum-brandnet__ph {
    inline-size: 96px; block-size: 40px;
    border-radius: 6px;
    background: var(--lum-n-20);
    display: flex; align-items: center; justify-content: center;
}

/* last cell: View all */
.lum-brandnet__all {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--lum-n-900);
    font-size: var(--lum-text-sm);
}
.lum-brandnet__all-icon {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 32px; block-size: 32px;
    border-radius: 50%;
    color: var(--lum-n-900);
}
.lum-brandnet__cell--all:hover { background: var(--lum-n-10); }
.lum-brandnet__cell--all:hover .lum-brandnet__all { color: var(--lum-primary); }

/* ==========================================================================
   FILTER DRAWER (lum-fdrawer) — mobile bottom sheet.
   Layout: header (fixed) / content (scrolls) / footer (sticky).
   Only the middle scrolls, so the two footer buttons always stay visible.
   ========================================================================== */
.lum-fdrawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;              /* toggled to flex when open */
    align-items: flex-end;      /* sheet sits at the bottom */
}
.lum-fdrawer[data-open] { display: flex; }

.lum-fdrawer__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgb(9 30 66 / .5);
    cursor: pointer;
}

.lum-fdrawer__panel {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    /* KEY FIX: max-height (a ceiling), not min-height. So content overflows and scrolls. */
    max-block-size: 100dvh;
    display: flex;
    flex-direction: column;     /* header / content / footer */
    background: var(--lum-n-0);
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
    overflow: hidden;           /* radius clip; inner content does the scrolling */
}

/* grab handle */
.lum-fdrawer__handle {
    inline-size: 32px;
    block-size: 4px;
    margin: 8px auto 4px;
    border-radius: 999px;
    background: var(--lum-n-70);
    flex-shrink: 0;
}

/* header (fixed) */
.lum-fdrawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 16px;
    border-block-end: 1px solid var(--lum-n-30);
    flex-shrink: 0;
}
.lum-fdrawer__title-wrap { display: inline-flex; align-items: center; gap: 8px; }
.lum-fdrawer__title { margin: 0; font-size: var(--lum-text-lg); font-weight: 700; color: var(--lum-n-1000); }
.lum-fdrawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border: 0;
    background: transparent;
    color: var(--lum-n-900);
    cursor: pointer;
}

/* content (the ONLY scrolling area) */
.lum-fdrawer__content {
    flex: 1;
    min-block-size: 0;          /* allows the flex child to actually shrink & scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

/* footer (sticky at the bottom of the sheet) */
.lum-fdrawer__footer {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 16px;
    border-block-start: 1px solid var(--lum-n-30);
    background: var(--lum-n-0);
    flex-shrink: 0;
}
.lum-fdrawer__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color:  #d64545;
    font-family: var(--lum-font);
    font-size: var(--lum-text-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.lum-fdrawer__apply {
    flex: 1;
    block-size: 48px;
    border: 0;
    border-radius: 10px;
    background: var(--lum-primary);
    color: var(--lum-n-0);
    font-family: var(--lum-font);
    font-size: var(--lum-text-md);
    font-weight: 700;
    cursor: pointer;
}

.lum-mini__prvice{
    color: var(--Neutrals-Dark-N700, #253858);
    font-weight: 700;
}


/* ==========================================================================
   BLOG CONTENT + SEO BOX typography
   Plain CSS with lum-* tokens, native nesting (shallow), BP 1024,
   logical properties, no hardcoded colors.
   ========================================================================== */

.blog-content,
.box-seo-content {
    /* ---------- headings ---------- */
    & .title,
    & h1{
        font-size: 25.63px;
        font-weight: 700;
        line-height: 44px;
        @media (min-width: 1024px) { font-size: 32.44px; line-height: 52px; }
    }
    

    & h2 {
        font-size: 22.78px;
        font-weight: 700;
        line-height: 40px;
        @media (min-width: 1024px) { font-size: 28.83px; line-height: 48px; }
    }
    & h3 {
        font-size: 20.25px;
        font-weight: 700;
        line-height: 36px;
        @media (min-width: 1024px) { font-size: 25.63px; line-height: 44px; }
    }
    & h4 {
        font-size: 18px;
        font-weight: 700;
        line-height: 32px;
        @media (min-width: 1024px) { font-size: 22p.78x; , line-height:40px; }
    }
    & h5 {
        font-size: 16px;
        font-weight: 700;
        line-height: 28px;
        @media (min-width: 1024px) { font-size: 20.25px; line-height: 36px; }
    }
    & h6 {
        font-size: 14.22;
        font-weight: 700;
        line-height: 24px;
        @media (min-width: 1024px) { font-size: 18px; line-height: 32px; }
    }

    /* ---------- lists ---------- */
    & ul { padding-inline: 16px; }
}

.blog-content , .box-seo-content {
    /* ---------- body text ---------- */
    & p,
    & ul,
    & ol,
    & li,
    & a {
        font-size: var(--lum-text-sm);
        font-weight: 500;
        line-height: 28px;
        @media (min-width: 1024px) { font-size: var(--lum-text-lg); line-height: 32px; }
    }

    & li { list-style: disc; }
    & strong { font-weight: 700; color: var(--lum-n-900); }
    & a { color: var(--lum-primary); }

    /* ---------- spacing ---------- */
    & p,
    & a,
    & li { margin-block-start: 8px;  }
     & a {
        color: var(--lum-primary)
        &::hover{
            color: var(--lum-primary-5)
        }
     }
    & ul,
    & ol {
        margin-block-start: 8px;
        @media (min-width: 1024px) { margin-block-start: 16px; }
    }

    /* ---------- images ---------- */
    & img {
        inline-size: 100%;
        border-radius: 16px;
        margin: 8px 0 ;
        @media (min-width: 1024px) { margin: 16px 0; };
        box-shadow: none;
    }

     p{
        color: var(--lum-n-700);
        margin: 4px 0;
    }

}

.block_box {
    margin-block-start: 12px;
    @media (min-width: 1024px) { margin-block-start: 24px; }
}

.lum-swatch { position: relative; border: 0; background: transparent; cursor: pointer; padding: 0; }

.lum-swatch__name {
    position: fixed;
    z-index: 9999;
    padding: 6px 10px;
    background: var(--lum-n-1000);
    color: var(--lum-n-0);
    font-size: var(--lum-text-xs);
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    inset-block-start: -9999px;
    inset-inline-start: -9999px;
}
.lum-swatch__name.is-visible { opacity: 1; }
.lum-swatch__name::after { content: ""; position: absolute; border: 5px solid transparent; }
.lum-swatch__name[data-side="top"]::after    { inset-block-start: 100%; inset-inline-start: 50%; translate: -50% 0; border-block-start-color: var(--lum-n-1000); }
.lum-swatch__name[data-side="bottom"]::after { inset-block-end: 100%; inset-inline-start: 50%; translate: -50% 0; border-block-end-color: var(--lum-n-1000); }
.lum-swatch__name[data-side="left"]::after   { inset-inline-start: 100%; inset-block-start: 50%; translate: 0 -50%; border-inline-start-color: var(--lum-n-1000); }
.lum-swatch__name[data-side="right"]::after  { inset-inline-end: 100%; inset-block-start: 50%; translate: 0 -50%; border-inline-end-color: var(--lum-n-1000); }


.qtc:not(.is-mobile) .qtc-section--sticky-header{
    z-index:3 !important;
}

.lum-logo{
    width:103px;
    height:32px;
    @media (min-width: 1024px) { 
        width:181px;
        height:56px;
     }
}