/* ==========================================================================
   eFreshhh – modern theme layer
   --------------------------------------------------------------------------
   Loaded after custom.css on every page whose <body> has class="market".
   Pages without that class keep the original styling.

   CUSTOMISE (first two blocks):
     --buttons        brand colour (also driven by the demo colour switcher)
     --fx-lime        fresh highlight colour (hero blob, chips, newsletter)
     --fx-sale        sale price / discount badge colour
     --fx-display     headline font, --fx-font body font (self-hosted, assets/fonts/)
   Written with logical properties so the same file serves html-rtl/.
   Interactions live in assets/js/market.js (homepage).
   ========================================================================== */

/* ---------- fonts (self-hosted, SIL OFL – see assets/fonts/) ---------- */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
    /* brand colour – the demo colour switcher writes this variable */
    --buttons: #0E6B3B;
    --a-hover: #0E6B3B;
    --new-label: #0E6B3B;
    --sale-label: #C2410C;
}

body.market {
    --fx-brand: var(--buttons);
    --fx-brand-ink: #FFFFFF;
    --fx-brand-hover: color-mix(in srgb, var(--buttons) 82%, #000);
    --fx-deep: color-mix(in srgb, var(--buttons) 55%, #03130A);
    --fx-brand-soft: color-mix(in srgb, var(--buttons) 8%, #FFFFFF);
    --fx-brand-text: var(--buttons);
    --fx-lime: #D4F58A;
    --fx-lime-soft: #F1FADF;
    --fx-bg: #FFFFFF;
    --fx-surface: #F5F6F3;
    --fx-card: #FFFFFF;
    --fx-photo: #F6F5F3;          /* matches the product photo backdrop */
    --fx-line: #E7EAE6;
    --fx-text: #0F1512;
    --fx-muted: #5E6963;
    --fx-sale: #C2410C;
    --fx-star: #E59A0B;
    --fx-glass: rgba(255, 255, 255, .78);
    --fx-shadow: 0 18px 40px -18px rgba(15, 21, 18, .25);
    --fx-shadow-lg: 0 30px 60px -24px rgba(15, 21, 18, .35);
    --fx-display: var(--fx-font);
    --fx-font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
    --fx-radius: 22px;
    --fx-gap: clamp(14px, 1.6vw, 24px);
    --fx-section: clamp(56px, 7vw, 104px);
    --fx-ease: cubic-bezier(.16, 1, .3, 1);
    --fx-spring: cubic-bezier(.34, 1.56, .64, 1);

    background: var(--fx-bg);
    color: var(--fx-text);
    font-family: var(--fx-font);
    font-size: 16px;
}

body.market.dark-mode {
    --fx-brand-soft: color-mix(in srgb, var(--buttons) 20%, #0C110E);
    --fx-brand-text: color-mix(in srgb, var(--buttons) 35%, #FFFFFF);
    --fx-lime: #B5DD5C;
    --fx-lime-soft: #18210F;
    --fx-bg: #0C110E;
    --fx-surface: #141A16;
    --fx-card: #161D19;
    --fx-line: #232D27;
    --fx-text: #ECF1ED;
    --fx-muted: #9DA9A2;
    --fx-sale: #FB7A3C;
    --fx-star: #F5B94A;
    --fx-glass: rgba(18, 24, 20, .78);
    --fx-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
    --fx-shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, .9);
    background: var(--fx-bg);
    color: var(--fx-text);
}

/* custom.css sets Lato on "*" – :where() keeps icon classes winning */
:where(body.market) * {
    font-family: var(--fx-font);
}

body.market :is(h1, h2, h3, h4, h5, h6, .main_title, .title, .sub-title) {
    font-family: var(--fx-font);
}

:where(body.market) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--fx-text);
}

body.market ::selection {
    background: var(--fx-lime);
    color: #0F1512;
}

body.market :focus-visible {
    outline: 2px solid var(--fx-brand);
    outline-offset: 3px;
}

body.market {
    scrollbar-color: color-mix(in srgb, var(--fx-brand) 50%, transparent) transparent;
}

/* ==========================================================================
   Primitives
   ========================================================================== */

.fx-display {
    font-family: var(--fx-display) !important;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: .98;
}

.fx-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: var(--fx-brand);
    color: var(--fx-brand-ink) !important;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: transform .4s var(--fx-ease), box-shadow .4s var(--fx-ease), background-color .3s;
    cursor: pointer;
}

.fx-btn em {
    transition: transform .4s var(--fx-ease);
}

.fx-btn:hover {
    background: var(--fx-brand-hover);
    box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--fx-brand) 70%, transparent);
    transform: translateY(-2px);
}

.fx-btn:hover em {
    transform: translateX(4px);
}

[dir="rtl"] .fx-btn:hover em {
    transform: translateX(-4px);
}

.fx-btn:active {
    transform: translateY(0) scale(.98);
}

.fx-btn--light {
    background: #FFFFFF;
    color: var(--fx-deep) !important;
}

.fx-btn--light:hover {
    background: var(--fx-lime);
    box-shadow: none;
}

.fx-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fx-text) !important;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    padding-bottom: 2px;
    transition: background-size .4s var(--fx-ease);
}

.fx-textlink:hover {
    background-size: 100% 1.5px;
}

[dir="rtl"] .fx-textlink {
    background-position: 100% 100%;
}

.fx-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background: var(--fx-text);
    color: var(--fx-bg);
}

.fx-badge--sale {
    background: var(--fx-sale);
    color: #FFFFFF;
}

.fx-badge--new {
    background: var(--fx-lime);
    color: #1A2A0C;
}

.fx-section {
    padding-top: var(--fx-section);
}

.fx-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
    margin-bottom: clamp(20px, 2.5vw, 32px);
}

.fx-head h2 {
    margin: 0;
    font-family: var(--fx-display) !important;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.fx-head p {
    margin: 10px 0 0;
    color: var(--fx-muted);
    font-size: 16px;
    max-width: 46ch;
}

/* round icon button (rails) */
.fx-icon-btn {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--fx-line);
    border-radius: 50%;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 18px;
    transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--fx-spring), opacity .25s;
}

.fx-icon-btn:hover:not(:disabled) {
    background: var(--fx-text);
    border-color: var(--fx-text);
    color: var(--fx-bg);
    transform: scale(1.06);
}

.fx-icon-btn:disabled {
    opacity: .35;
    cursor: default;
}

.fx-rail-nav {
    display: flex;
    gap: 8px;
}

/* scroll reveal – content is visible without JS; market.js adds .fx-js */
.fx-js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--fx-ease), transform .9s var(--fx-ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}

.fx-js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   Product card
   ========================================================================== */

.fx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--fx-radius);
    background: var(--fx-card);
    transition: transform .5s var(--fx-ease);
}

.fx-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / .95;
    border-radius: var(--fx-radius);
    background: var(--fx-photo);
    overflow: hidden;
}

.fx-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10%;
    transition: transform .8s var(--fx-ease);
}

.fx-card__badges {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}

.fx-like {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--fx-glass);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--fx-text) !important;
    font-size: 17px;
    text-decoration: none;
    transition: transform .3s var(--fx-spring), color .2s;
}

.fx-like:hover {
    transform: scale(1.1);
}

.fx-like.is-on {
    color: #E11D48 !important;
}


.fx-like.is-pop {
    animation: fx-pop .45s var(--fx-spring);
}

@keyframes fx-pop {
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.fx-quick {
    position: absolute;
    inset-inline: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    border-radius: 999px;
    background: var(--fx-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--fx-text) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s var(--fx-ease), transform .35s var(--fx-ease), background-color .2s;
}

.fx-quick:hover {
    background: var(--fx-card);
}

.fx-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 6px 6px;
    flex: 1;
}

.fx-card__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.fx-card__name a {
    color: var(--fx-text) !important;
    text-decoration: none;
}

.fx-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--fx-muted);
}

.fx-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

.fx-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fx-rating em {
    color: var(--fx-star);
    font-size: 13px;
}

.fx-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.fx-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.fx-price strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--fx-text);
    letter-spacing: -0.01em;
}

.fx-price del {
    font-size: 13px;
    color: var(--fx-muted);
}

.fx-card--sale .fx-price strong {
    color: var(--fx-sale);
}

/* add button → quantity stepper (market.js) */
.fx-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 88px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--fx-text);
    color: var(--fx-bg) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .25s, color .25s, transform .3s var(--fx-spring);
}

.fx-add:hover {
    background: var(--fx-brand);
    color: #FFFFFF !important;
}

.fx-add:active {
    transform: scale(.94);
}

.fx-stepper {
    display: inline-grid;
    grid-template-columns: 34px minmax(22px, 1fr) 34px;
    align-items: center;
    min-width: 104px;
    height: 40px;
    border-radius: 999px;
    background: var(--fx-brand);
    color: #FFFFFF;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    animation: fx-grow .45s var(--fx-spring);
}

.fx-stepper button {
    height: 40px;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1;
    border-radius: 999px;
    transition: background-color .2s;
}

.fx-stepper button:hover {
    background: rgba(255, 255, 255, .16);
}

.fx-stepper output {
    font-size: 15px;
}

.fx-stepper output.is-tick {
    animation: fx-tick .3s var(--fx-ease);
}

@keyframes fx-grow {
    from { transform: scale(.8); opacity: .4; }
}

@keyframes fx-tick {
    from { transform: translateY(-6px); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) {
    .fx-card:hover {
        transform: translateY(-6px);
    }

    .fx-card:hover .fx-card__media img {
        transform: scale(1.08) rotate(-2deg);
    }

    .fx-card:hover .fx-quick,
    .fx-card:focus-within .fx-quick {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Header – one sticky row (layout via CSS only; markup is shared by all pages)
   ========================================================================== */

body.market header {
    position: relative;
    z-index: 100;
    background: var(--fx-bg);
}

body.market .main_header {
    background: transparent;
}

body.market .header_top {
    background: var(--fx-deep);
    border: 0;
}

body.market .header_top .row {
    padding-block: 7px !important;
}

body.market .header_top p,
body.market .header_top a,
body.market .header_top em {
    margin: 0;
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 500;
}

body.market .header_top a:hover em {
    color: var(--fx-lime) !important;
}

@media (min-width: 992px) {
    /* flatten the three header rows into one grid row */
    body.market .middle_content,
    body.market .middle_content > .container,
    body.market .middle_content .row,
    body.market .middle_content .row > [class*="col-"],
    body.market .middle_content .content_right_info,
    body.market .header_bottom,
    body.market .header_bottom > .container,
    body.market .header_bottom .row,
    body.market .header_bottom .row > [class*="col-"]:not(.mobail_s_block) {
        display: contents;
    }

    body.market .main_header {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) minmax(220px, 340px) auto;
        align-items: center;
        column-gap: clamp(14px, 1.6vw, 28px);
        max-width: 1320px;
        margin-inline: auto;
        padding-inline: 12px;
    }

    body.market .header_top {
        grid-column: 1 / -1;
        margin-inline: -12px;
        box-shadow: 0 0 0 100vmax var(--fx-deep);
        clip-path: inset(0 -100vmax);
    }

    body.market .main_header .logo {
        grid-row: 2;
        grid-column: 1;
        padding-block: 18px;
        transition: padding .35s var(--fx-ease);
    }

    body.market .categories_menu {
        grid-row: 2;
        grid-column: 2;
        position: relative;
    }

    body.market .main_menu_content {
        grid-row: 2;
        grid-column: 3;
        justify-self: center;
    }

    body.market .searchbar_content.mobile_screen_none {
        grid-row: 2;
        grid-column: 4;
    }

    body.market .header_account_area {
        grid-row: 2;
        grid-column: 5;
    }

    body.market .connect-with-us,
    body.market .mobail_s_block {
        display: none;
    }

    body.market header::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 1px;
        background: var(--fx-line);
    }

    /* stuck state (market.js toggles body.fx-stuck after scrolling) */
    body.market.fx-stuck header {
        position: fixed;
        inset-inline: 0;
        top: 0;
        background: var(--fx-glass);
        -webkit-backdrop-filter: saturate(1.6) blur(16px);
        backdrop-filter: saturate(1.6) blur(16px);
        box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .4);
        animation: fx-drop .5s var(--fx-ease);
    }

    body.market.fx-stuck .header_top {
        display: none;
    }

    body.market.fx-stuck .main_header .logo {
        padding-block: 10px;
    }

    body.market.fx-stuck .main_menu_content nav > ul > li > a {
        line-height: 60px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.market .categories_menu {
        display: none;
    }
}

@keyframes fx-drop {
    from { transform: translateY(-100%); }
}

body.market .main_header .logo img {
    max-height: 44px;
    width: auto;
    max-width: 160px;
}

body.market.dark-mode .main_header .logo a,
body.market.dark-mode .footer .f-logo a {
    display: inline-flex;
    padding: 6px 10px;
    background: #FFFFFF;
    border-radius: 12px;
}

/* nav */
body.market .main_menu_content nav > ul > li > a,
body.market .main_menu_content nav > ul > li > a em {
    color: var(--fx-text);
    font-size: 15px;
    font-weight: 500;
    text-transform: capitalize;
}

body.market .main_menu_content nav > ul > li > a {
    position: relative;
    line-height: 80px;
    padding-inline: 8px;
    transition: line-height .35s var(--fx-ease), color .2s;
}

body.market .main_menu_content nav > ul > li > a::before {
    display: none;
}

body.market .main_menu_content nav > ul > li > a::after {
    content: "";
    position: absolute;
    inset-inline: 8px;
    bottom: calc(50% - 16px);
    height: 2px;
    border-radius: 2px;
    background: var(--fx-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--fx-ease);
}

body.market .main_menu_content nav > ul > li:hover > a::after,
body.market .main_menu_content nav > ul > li > a.active::after {
    transform: scaleX(1);
}

body.market .main_menu_content nav > ul > li:hover > a,
body.market .main_menu_content nav > ul > li > a.active,
body.market .main_menu_content nav > ul > li > a.active em {
    color: var(--fx-brand-text);
}

body.market .main_menu_content nav > ul > li ul.sub_menu,
body.market .main_menu_content nav > ul > li .mega_menu {
    border: 1px solid var(--fx-line);
    border-radius: 18px;
    background: var(--fx-card);
    box-shadow: var(--fx-shadow-lg);
    padding: 10px;
    top: calc(100% - 10px);
    z-index: 30;
}

body.market .main_menu_content nav > ul > li ul.sub_menu li a,
body.market .main_menu_content .mega_menu a {
    color: var(--fx-text);
    border-radius: 10px;
    transition: background-color .2s, color .2s, padding .3s var(--fx-ease);
}

body.market .main_menu_content nav > ul > li ul.sub_menu li a:hover {
    background: var(--fx-surface);
    color: var(--fx-brand-text);
    padding-inline-start: 22px;
}

/* account */
body.market .header_account_list,
body.market .header_account_list a,
body.market .header_account_list em,
body.market .header_account_list button {
    color: var(--fx-text) !important;
}

body.market .header_account_list em {
    font-size: 20px;
}

body.market .header_account_list button,
body.market.dark-mode .login-sec button {
    background: transparent;
    font-size: 15px;
    font-weight: 500;
}

body.market .header_account_list span.item_count {
    min-width: 18px;
    padding-inline: 4px;
    background: var(--fx-brand);
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 999px;
}

body.market .item_count.is-bump {
    animation: fx-bump .5s var(--fx-spring);
}

@keyframes fx-bump {
    40% { transform: scale(1.5); }
}

/* categories pill */
body.market .title_content {
    height: 46px;
    padding-inline: 18px 42px;
    background: var(--fx-surface);
    border-radius: 999px;
    transition: background-color .2s;
}

body.market .title_content:hover {
    background: var(--fx-brand-soft);
}

body.market .title_content h2 {
    line-height: 46px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fx-text);
    white-space: nowrap;
}

body.market .title_content em {
    color: var(--fx-text);
}

body.market .categories_content_toggle {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    min-width: 260px;
    padding: 8px;
    border: 1px solid var(--fx-line);
    border-radius: 18px;
    background: var(--fx-card);
    box-shadow: var(--fx-shadow-lg);
    z-index: 40;
}

body.market .categories_content_toggle a {
    color: var(--fx-text);
    border-radius: 10px;
}

/* search pill */
body.market .searchbar_content form {
    position: relative;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--fx-surface);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s, background-color .25s;
}

body.market .searchbar_content form:focus-within {
    border-color: var(--fx-brand);
    background: var(--fx-card);
    box-shadow: 0 0 0 5px var(--fx-brand-soft);
}

body.market .searchbar_content .category_hover_content {
    display: none;
}

body.market .search-box {
    width: 100%;
}

body.market .search-box input {
    width: 100%;
    height: 46px;
    padding-inline: 20px 52px;
    background: transparent;
    color: var(--fx-text);
    border: 0;
}

body.market .search-box input::placeholder {
    color: var(--fx-muted);
}

body.market .search-box button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--fx-text);
    color: var(--fx-bg);
    transition: background-color .2s, transform .3s var(--fx-spring);
}

body.market .search-box button:hover {
    background: var(--fx-brand);
    color: #FFFFFF;
    transform: scale(1.06);
}

/* mini cart drawer */
body.market .mini_cart {
    border: 0;
    background: var(--fx-card);
    box-shadow: var(--fx-shadow-lg);
}

body.market .mini_cart em,
body.market .mini_cart a,
body.market .mini_cart span,
body.market .mini_cart p {
    color: var(--fx-text) !important;
}

body.market .mini_cart .cart_button a {
    background: var(--fx-brand);
    color: #FFFFFF !important;
    border-radius: 999px;
}

body.market .mini_cart .cart_button a em {
    color: #FFFFFF !important;
}

/* mobile header */
@media (max-width: 991.98px) {
    body.market .middle_content {
        padding: 10px 0 6px;
        background: var(--fx-bg);
    }

    body.market .header_bottom {
        padding-block: 4px 14px;
        border-bottom: 1px solid var(--fx-line);
    }

    body.market .header_bottom .categories_menu,
    body.market .header_bottom .connect-with-us {
        display: none;
    }

    body.market .mobile_menu {
        background: transparent;
    }

    body.market .mobile_canvas_open a {
        background: var(--fx-surface);
        color: var(--fx-text);
        border-radius: 50%;
    }

    body.market .mobile_wrapper {
        background: var(--fx-card);
    }
}

/* ==========================================================================
   Hero – light split hero: badge, headline, actions, rating row | produce
   visual with floating info chips (parallax: assets/js/market.js)
   To use a photo of a person instead of the produce cutout, replace the
   <img class="fx-hero__visual-img"> src with a transparent PNG.
   ========================================================================== */

.fx-hero {
    position: relative;
    background: var(--fx-hero-bg);
    overflow: hidden;
    isolation: isolate;
}

.fx-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 48px);
    align-items: center;
    min-height: clamp(520px, 44vw, 640px);
}

.fx-hero__copy {
    padding-block: clamp(48px, 6vw, 88px);
}

.fx-hero__copy > * {
    animation: fx-rise .9s var(--fx-ease) both;
}

.fx-hero__copy > :nth-child(2) { animation-delay: .08s; }
.fx-hero__copy > :nth-child(3) { animation-delay: .16s; }
.fx-hero__copy > :nth-child(4) { animation-delay: .24s; }
.fx-hero__copy > :nth-child(5) { animation-delay: .32s; }

@keyframes fx-rise {
    from { opacity: 0; transform: translateY(22px); }
}

.fx-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 6px 18px 6px 6px;
    border-radius: 999px;
    background: var(--fx-card);
    box-shadow: 0 8px 24px -16px rgba(15, 21, 18, .35);
    font-size: 15px;
    font-weight: 500;
    color: var(--fx-text);
}

[dir="rtl"] .fx-hero__badge {
    padding: 6px 6px 6px 18px;
}

.fx-hero__badge em {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fx-brand);
    color: var(--fx-yellow);
    font-size: 16px;
}

.fx-hero h1 {
    margin: 0 0 20px;
    font-size: clamp(40px, 4.6vw, 66px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--fx-text);
    text-wrap: balance;
}

.fx-hero h1 span {
    color: var(--fx-brand-text);
}

.fx-hero__lead {
    margin: 0 0 32px;
    max-width: 46ch;
    color: var(--fx-muted);
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.6;
}

.fx-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 30px;
}

.fx-hero__link {
    color: var(--fx-text) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 6px;
    transition: color .2s, text-underline-offset .3s var(--fx-ease);
}

.fx-hero__link:hover {
    color: var(--fx-brand-text) !important;
    text-underline-offset: 9px;
}

.fx-hero__proof {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 44px;
}

.fx-avatars {
    display: flex;
}

.fx-avatars img,
.fx-avatars span {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid var(--fx-hero-bg);
    object-fit: cover;
    background: var(--fx-surface);
}

.fx-avatars > * + * {
    margin-inline-start: -14px;
}

.fx-avatars span {
    display: grid;
    place-items: center;
    background: var(--fx-yellow);
    color: #1F1A05;
    font-size: 18px;
}

.fx-hero__proof strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.fx-hero__proof strong em {
    color: var(--fx-star);
    font-size: 15px;
    margin-inline-end: 4px;
}

.fx-hero__proof small {
    color: var(--fx-muted);
    font-size: 14px;
}

/* visual */
.fx-hero__visual {
    position: relative;
    align-self: stretch;
    display: grid;
    place-items: end center;
    min-height: 460px;
}

.fx-hero__visual::before {
    /* soft green disc behind the produce */
    content: "";
    position: absolute;
    z-index: -1;
    width: min(88%, 520px);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    translate: -50% -46%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--fx-brand) 16%, var(--fx-hero-bg)) 0%, color-mix(in srgb, var(--fx-brand) 8%, var(--fx-hero-bg)) 70%, transparent 71%);
}

.fx-hero__visual-img {
    width: min(100%, 560px);
    max-height: 560px;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 30px 30px rgba(15, 21, 18, .2));
    animation: fx-pop-in 1s .15s var(--fx-ease) both;
    transition: transform .6s var(--fx-ease);
}

@keyframes fx-pop-in {
    from { opacity: 0; scale: .9; }
}

.fx-hero__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    background: var(--fx-card);
    box-shadow: 0 18px 36px -18px rgba(15, 21, 18, .4);
    font-size: 14px;
    font-weight: 600;
    color: var(--fx-text);
    white-space: nowrap;
    transition: transform .6s var(--fx-ease);
    animation: fx-rise .8s var(--fx-ease) both;
}

[dir="rtl"] .fx-hero__chip {
    padding: 8px 8px 8px 16px;
}

.fx-hero__chip em {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fx-brand);
    color: #FFFFFF;
    font-size: 16px;
}

.fx-hero__chip--a {
    top: 34%;
    inset-inline-end: 0;
    animation-delay: .5s;
}

.fx-hero__chip--b {
    bottom: 16%;
    inset-inline-start: 4%;
    animation-delay: .7s;
}

.fx-hero__spark {
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--fx-yellow);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: fx-twinkle 2.4s ease-in-out infinite;
}

.fx-hero__spark--a {
    top: 30%;
    inset-inline-end: 4%;
    translate: 0 -28px;
}

.fx-hero__spark--b {
    bottom: 13%;
    inset-inline-start: 2%;
    width: 16px;
    height: 16px;
    animation-delay: 1.2s;
}

@keyframes fx-twinkle {
    50% { transform: scale(.6) rotate(45deg); opacity: .6; }
}

@media (max-width: 991.98px) {
    .fx-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .fx-hero__copy {
        padding-bottom: 8px;
    }

    .fx-hero__visual {
        min-height: 0;
        max-width: 520px;
        width: 100%;
        justify-self: center;
    }
}

@media (max-width: 575.98px) {
    .fx-hero__chip--a {
        top: 18%;
    }

    .fx-hero__proof {
        margin-top: 32px;
    }
}

/* marquee of perks */
.fx-marquee {
    margin-top: clamp(40px, 5vw, 72px);
    padding-block: 18px;
    border-block: 1px solid var(--fx-line);
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.fx-marquee__track {
    display: flex;
    width: max-content;
    animation: fx-marquee 40s linear infinite;
}

.fx-marquee:hover .fx-marquee__track {
    animation-play-state: paused;
}

[dir="rtl"] .fx-marquee__track {
    animation-direction: reverse;
}

.fx-marquee ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fx-marquee li {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-inline: 24px;
    font-family: var(--fx-display) !important;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.fx-marquee li em {
    color: var(--fx-brand-text);
    font-size: 24px;
}

.fx-marquee li::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-inline-start: 36px;
    border-radius: 50%;
    background: var(--fx-lime);
}

@keyframes fx-marquee {
    to { transform: translateX(-50%); }
}

/* ==========================================================================
   Category pills
   ========================================================================== */

.fx-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fx-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 20px 6px 6px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: var(--fx-card);
    transition: border-color .3s, background-color .3s, transform .4s var(--fx-spring), box-shadow .4s var(--fx-ease);
}

[dir="rtl"] .fx-pill {
    padding: 6px 6px 6px 20px;
}

.fx-pill img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 80% 50%;
    background: var(--fx-surface);
    transition: transform .6s var(--fx-ease);
}

.fx-pill a {
    color: var(--fx-text) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.fx-pill a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.fx-pill span {
    color: var(--fx-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.fx-pill:hover {
    border-color: transparent;
    background: var(--fx-lime-soft);
    transform: translateY(-3px);
    box-shadow: var(--fx-shadow);
}

.fx-pill:hover img {
    transform: rotate(-12deg) scale(1.1);
}

/* ==========================================================================
   Deal + trending
   ========================================================================== */

.fx-deals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.7fr);
    gap: clamp(16px, 2vw, 28px);
    align-items: start;
}

.fx-deal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px;
    border-radius: 28px;
    background: var(--fx-deep);
    color: #FFFFFF;
    overflow: hidden;
    isolation: isolate;
}

.fx-deal::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 320px;
    height: 320px;
    top: -80px;
    inset-inline-end: -140px;
    border-radius: 50%;
    background: var(--fx-lime);
    opacity: .14;
}

.fx-deal__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fx-deal__top h2 {
    margin: 0;
    color: #FFFFFF;
    font-family: var(--fx-display) !important;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fx-deal__media {
    display: block;
    border-radius: 22px;
    background: var(--fx-photo);
    overflow: hidden;
}

.fx-deal__media img {
    width: 100%;
    aspect-ratio: 1 / .78;
    object-fit: contain;
    padding: 8%;
    transition: transform .8s var(--fx-ease);
}

.fx-deal:hover .fx-deal__media img {
    transform: scale(1.06) rotate(-3deg);
}

.fx-deal h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.fx-deal h3 a {
    color: #FFFFFF !important;
    text-decoration: none;
}

.fx-deal .fx-price strong {
    font-size: 28px;
    color: var(--fx-lime);
}

.fx-deal .fx-price del {
    color: rgba(255, 255, 255, .6);
}

.fx-deal .countdown_area {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.fx-deal .single_countdown {
    margin: 0;
    width: auto;
    height: auto;
    padding: 10px 4px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    text-align: center;
}

body.market .fx-deal .countdown_number {
    color: #FFFFFF !important;
    font-family: var(--fx-display) !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

body.market .fx-deal .countdown_title {
    color: rgba(255, 255, 255, .72) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.fx-deal .fx-btn {
    width: 100%;
}

/* filter tabs */
.fx-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--fx-surface);
}

.fx-tabs button {
    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fx-muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .25s, background-color .25s, box-shadow .25s;
}

.fx-tabs button:hover {
    color: var(--fx-text);
}

.fx-tabs button[aria-selected="true"] {
    background: var(--fx-card);
    color: var(--fx-text);
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .25);
}

.fx-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 28px var(--fx-gap);
}

.fx-grid > .is-hidden {
    display: none;
}

.fx-grid > .is-entering {
    animation: fx-in .5s var(--fx-ease) both;
    animation-delay: calc(var(--i, 0) * 50ms);
}

@keyframes fx-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
}

/* ==========================================================================
   Offers (bento)
   ========================================================================== */

.fx-offers {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: var(--fx-gap);
}

.fx-offer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-height: 320px;
    padding: 30px;
    border-radius: 28px;
    background: var(--fx-surface);
    overflow: hidden;
    isolation: isolate;
}

.fx-offer--lime {
    background: var(--fx-lime-soft);
}

.fx-offer--deep {
    background: var(--fx-deep);
    color: #FFFFFF;
}

.fx-offer h3 {
    max-width: 11ch;
    margin: 0 0 10px;
    font-family: var(--fx-display) !important;
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: inherit;
}

.fx-offer--deep h3 {
    color: #FFFFFF;
}

.fx-offer p {
    max-width: 22ch;
    margin: 0;
    color: var(--fx-muted);
    font-size: 15px;
}

.fx-offer--deep p {
    color: rgba(255, 255, 255, .78);
}

.fx-offer .fx-textlink {
    align-self: flex-start;
}

.fx-offer .fx-textlink::after {
    content: "";
    position: absolute;
    inset: 0;
}

.fx-offer--deep .fx-textlink {
    color: #FFFFFF !important;
}

.fx-offer img {
    position: absolute;
    z-index: -1;
    width: 58%;
    max-width: 280px;
    inset-inline-end: -3%;
    bottom: -4%;
    object-fit: contain;
    transition: transform .8s var(--fx-ease);
}

.fx-offer:hover img {
    transform: translateY(-10px) rotate(-6deg) scale(1.06);
}

/* ==========================================================================
   Rail (new arrivals)
   ========================================================================== */

.fx-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--fx-gap)) / 4);
    gap: var(--fx-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 8px 2px 20px;
    margin: -8px -2px -20px;
    cursor: grab;
}

.fx-rail::-webkit-scrollbar {
    display: none;
}

.fx-rail > * {
    scroll-snap-align: start;
}

.fx-rail.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.fx-rail.is-dragging a,
.fx-rail.is-dragging img {
    pointer-events: none;
}

/* ==========================================================================
   Feature banner
   ========================================================================== */

.fx-feature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: clamp(32px, 5vw, 72px);
    border-radius: 36px;
    background: var(--fx-deep);
    color: #FFFFFF;
    overflow: hidden;
    isolation: isolate;
}

.fx-feature::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(620px, 70%);
    aspect-ratio: 1;
    inset-inline-end: -8%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--fx-lime);
    opacity: .16;
}

.fx-feature h2 {
    margin: 0 0 18px;
    color: #FFFFFF;
    font-size: clamp(38px, 4.6vw, 68px);
}

.fx-feature p {
    margin: 0 0 28px;
    max-width: 40ch;
    color: rgba(255, 255, 255, .8);
    font-size: 18px;
}

.fx-feature__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.fx-feature__list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 14px;
    font-weight: 500;
}

.fx-feature__list em {
    color: var(--fx-lime);
}

.fx-feature img {
    width: 100%;
    max-width: 480px;
    justify-self: center;
    filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35));
    animation: fx-float 7s ease-in-out infinite;
}

@keyframes fx-float {
    50% { transform: translateY(-12px); }
}

/* ==========================================================================
   Featured mini list
   ========================================================================== */

.fx-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px var(--fx-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fx-mini {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 8px;
    padding-inline-end: 12px;
    border-radius: 20px;
    transition: background-color .3s;
}

.fx-mini:hover {
    background: var(--fx-surface);
}

.fx-mini img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 16px;
    background: var(--fx-photo);
    padding: 6px;
    transition: transform .5s var(--fx-ease);
}

.fx-mini:hover img {
    transform: rotate(-6deg) scale(1.05);
}

.fx-mini h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.fx-mini h3 a {
    color: var(--fx-text) !important;
    text-decoration: none;
}

.fx-mini .fx-price strong {
    font-size: 16px;
}

.fx-mini--sale .fx-price strong {
    color: var(--fx-sale);
}

.fx-plus {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--fx-line);
    border-radius: 50%;
    background: var(--fx-card);
    color: var(--fx-text) !important;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .25s, color .25s, border-color .25s, transform .4s var(--fx-spring);
}

.fx-plus:hover {
    background: var(--fx-brand);
    border-color: var(--fx-brand);
    color: #FFFFFF !important;
    transform: rotate(90deg);
}

.fx-plus.is-done {
    background: var(--fx-brand);
    border-color: var(--fx-brand);
    color: #FFFFFF !important;
    transform: none;
}

/* ==========================================================================
   Toast
   ========================================================================== */

.fx-toast {
    position: fixed;
    z-index: 1200;
    bottom: 24px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 10px 10px 10px 18px;
    border-radius: 999px;
    background: #0F1512;
    color: #FFFFFF;
    box-shadow: var(--fx-shadow-lg);
    font-size: 14px;
    font-weight: 500;
    transform: translate(-50%, 160%);
    transition: transform .5s var(--fx-spring);
}

.fx-toast.is-on {
    transform: translate(-50%, 0);
}

.fx-toast em {
    color: #D4F58A;
    font-size: 20px;
}

.fx-toast a {
    padding: 8px 14px;
    border-radius: 999px;
    background: #D4F58A;
    color: #0F1512 !important;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* ==========================================================================
   Newsletter + footer
   ========================================================================== */

body.market .subscribe-news,
body.market .subscribe-news .newsletter {
    background: transparent !important;
    border: 0;
}

body.market .subscribe-news {
    padding: var(--fx-section) 0;
}

body.market .subscribe-news .newsletter-bg {
    position: relative;
    padding: clamp(32px, 4vw, 56px);
    border-radius: 36px;
    background: #D4F58A !important;
    overflow: hidden;
}

body.market .subscribe-news .newsletter-icon {
    display: none;
}

body.market .subscribe-news .main_title {
    font-family: var(--fx-display) !important;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    color: #0F1512;
}

body.market .subscribe-news .sub-title {
    margin-top: 8px;
    color: #2F3A1F;
    font-size: 16px;
}

body.market .newsletter-box {
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 20px 40px -24px rgba(15, 21, 18, .45);
}

body.market .newsletter-box .newsletter-field-icon {
    display: none;
}

body.market .subscribe-news .newsletter-box input {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #0F1512;
}

body.market .subscribe-news .newsletter-box input::placeholder {
    color: #5E6963 !important;
    opacity: 1;
}

body.market .subscribe-news .newsletter-box button {
    position: static;
    min-height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px !important;
    background: #0F1512;
    color: #FFFFFF;
    font-weight: 600;
    transition: background-color .25s;
}

body.market .subscribe-news .newsletter-box button:hover {
    background: var(--fx-brand);
}

body.market .fx-newsletter-done {
    margin: 14px 0 0;
    color: #0F1512;
    font-weight: 600;
}

body.market .footer {
    background: var(--fx-surface);
    border: 0;
}

body.market .footer > .container > hr:first-child {
    display: none;
}

body.market .footer,
body.market .footer p,
body.market .footer a,
body.market .footer li,
body.market .footer .title,
body.market .footer .copy-right {
    color: var(--fx-text);
}

body.market .footer p,
body.market .footer li,
body.market .footer .link a {
    color: var(--fx-muted);
}

body.market .footer .link a {
    transition: color .2s, padding .3s var(--fx-ease);
}

body.market .footer .link a:hover {
    color: var(--fx-text);
    padding-inline-start: 6px;
}

body.market .footer .title {
    font-family: var(--fx-display) !important;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.market .footer .title > span {
    display: none;
}

body.market .footer .f-logo a {
    padding: 0;
    background: none;
}

body.market .footer hr {
    border-color: var(--fx-line);
    opacity: 1;
}

body.market .footer em,
body.market .footer ul.social-icon li em.fab {
    color: var(--fx-text);
}

body.market .footer ul.social-icon li a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fx-card);
    transition: background-color .25s, transform .4s var(--fx-spring);
}

body.market .footer ul.social-icon li a:hover {
    background: var(--fx-brand);
    transform: translateY(-3px);
}

body.market .footer ul.social-icon li a:hover em {
    color: #FFFFFF;
}

body.market #switch-mode {
    background: var(--fx-card);
    color: var(--fx-text);
    box-shadow: var(--fx-shadow);
}

body.market #return-to-top {
    background: var(--fx-text);
    border-radius: 50%;
}

/* ==========================================================================
   RTL text order for English demo copy
   ========================================================================== */

[dir="rtl"] body.market :is(.fx-hero h1, .fx-hero__lead, .fx-head p, .fx-offer p, .fx-feature p, .connect-with-us p, .header_top p) {
    unicode-bidi: plaintext;
    text-align: right;
}

[dir="rtl"] body.market :is(.fx-badge, .fx-price, .fx-pill span, .fx-chip, .fx-rating) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.market a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    body.market *,
    body.market *::before,
    body.market *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .fx-marquee__track {
        animation: none !important;
    }

    .fx-js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
    .fx-deals {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-deal {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 28px;
    }

    .fx-deal__top {
        grid-column: 1 / -1;
    }

    .fx-deal__media {
        grid-row: span 5;
        align-self: start;
    }

    .fx-grid {
        --cols: 3 !important;
    }

    .fx-offers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fx-offers > :first-child {
        grid-column: 1 / -1;
    }

    .fx-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fx-rail {
        grid-auto-columns: calc((100% - 2 * var(--fx-gap)) / 3);
    }
}

@media (max-width: 991.98px) {

    .fx-feature {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    body.market {
        --fx-section: 56px;
        --fx-radius: 18px;
    }


    .fx-grid {
        --cols: 2 !important;
        gap: 22px 14px;
    }

    .fx-deal {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-deal__media {
        grid-row: auto;
    }

    .fx-offers {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-offers > :first-child {
        grid-column: auto;
    }

    .fx-offer {
        min-height: 240px;
    }

    .fx-offer img {
        width: 46%;
    }

    .fx-rail {
        grid-auto-columns: 62%;
    }

    .fx-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -12px;
        padding: 0 12px 6px;
    }

    .fx-pills::-webkit-scrollbar {
        display: none;
    }

    .fx-add {
        min-width: 72px;
        padding: 0 12px;
    }

    .fx-tabs {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* deal card: full-width add button and stepper */
.fx-deal .fx-add,
.fx-deal .fx-stepper {
    width: 100%;
    height: 54px;
    font-size: 16px;
}

.fx-deal .fx-add {
    background: #FFFFFF;
    color: var(--fx-deep) !important;
}

.fx-deal .fx-add:hover {
    background: var(--fx-lime);
}

.fx-deal .fx-stepper {
    grid-template-columns: 54px 1fr 54px;
    background: var(--fx-lime);
    color: #0F1512;
}

.fx-deal .fx-stepper button {
    height: 54px;
    color: #0F1512;
}

/* header: legacy search widths must not overflow the grid column */
body.market .searchbar_content,
body.market .searchbar_content form,
body.market .search-box {
    width: 100%;
    min-width: 0;
    max-width: none;
}

body.market .main_menu_content nav > ul {
    display: flex;
    flex-wrap: nowrap;
}

body.market .main_menu_content nav > ul > li > a {
    white-space: nowrap;
}

body.market .main_menu_content nav > ul > li > a em {
    display: inline-block;
    margin-inline-start: 4px;
    font-size: 13px;
}

@media (min-width: 992px) {
    body.market .main_header {
        grid-template-columns: auto auto minmax(0, 1fr) minmax(200px, 270px) auto;
        column-gap: clamp(12px, 1.3vw, 22px);
    }

    /* icon-only account cluster: the Login button covers the user icon */
    body.market .header_account_area {
        gap: 6px;
    }

    body.market .header_account_list {
        position: relative;
        margin: 0 !important;
        width: 42px;
        height: 42px;
        display: grid !important;
        place-items: center;
        border-radius: 50%;
        transition: background-color .2s;
    }

    body.market .header_account_list:hover {
        background: var(--fx-surface);
    }

    body.market .header_account_list.register button {
        position: absolute;
        inset: 0;
        width: 100%;
        border-radius: 50%;
        color: transparent !important;
        font-size: 0;
        cursor: pointer;
    }

    body.market .header_account_list span.item_count {
        position: absolute;
        top: 2px;
        inset-inline-end: 0;
        margin: 0;
        font-size: 11px;
        line-height: 18px;
        height: 18px;
    }

    body.market .main_menu_content nav > ul > li {
        margin: 0 !important;
    }

    body.market .main_menu_content nav > ul > li > a {
        padding-inline: 10px;
    }
}

/* quick view: round icon button under the wishlist heart (label stays for screen readers) */
.fx-quick {
    inset-inline: auto 10px;
    top: 56px;
    bottom: auto;
    width: 38px;
    height: 38px;
    gap: 0;
    font-size: 0;
}

.fx-quick em {
    font-size: 17px;
}

@media (hover: none) {
    .fx-quick {
        opacity: 1;
        transform: none;
    }
}

/* liked heart colour on the icon itself (legacy rules colour em elements) */
.fx-like.is-on em {
    color: #E11D48 !important;
}

/* ==========================================================================
   Search bar – flex row so the round button is centred in the pill
   (legacy custom.css pins the button absolute at top:0 and fades the input)
   ========================================================================== */
body.market .searchbar_content form {
    display: block;
    height: auto;
    margin: 0;
}

body.market .search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    margin: 0;
    padding: 4px;
    padding-inline-start: 18px;
    border: 0;
    border-radius: 999px;
}

body.market .search-box input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    opacity: 1;
    font-size: 15px;
    line-height: normal;
}

body.market .search-box button {
    position: static;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    line-height: 1;
    font-size: 17px;
}

@media (max-width: 991.98px) {
    body.market .searchbar_content {
        margin: 0;
    }

    body.market .searchbar_content form {
        border: 1px solid var(--fx-line);
    }
}

/* RTL: English placeholder and labels keep their punctuation order */
[dir="rtl"] body.market :is(.fx-hero__tags > span, .fx-hero__offer, .fx-hero__search input, .search-box input) {
    unicode-bidi: plaintext;
}


[dir="rtl"] body.market :is(.fx-hero__search, .search-box) input::placeholder {
    direction: ltr;
    text-align: right;
}

/* ==========================================================================
   Header v2 – green two-row band
   row 1: logo | search with category select | account icons
   row 2: Browse All Categories (yellow) | nav | support phone
   Layout by CSS only; the header markup is shared by every page.
   ========================================================================== */
body.market {
    --fx-yellow: #FFC531;
    --fx-hero-bg: #F3F5F1;
}

body.market.dark-mode {
    --fx-hero-bg: #121915;
}

body.market header {
    background: var(--fx-brand);
    border-top: 4px solid var(--fx-yellow);
}

body.market header::after {
    display: none;
}

body.market .main_header .logo a {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 12px;
    background: #FFFFFF;
}

body.market .main_header .logo img {
    max-height: 38px;
}

/* account icons on green */
body.market .header_account_list,
body.market .header_account_list a,
body.market .header_account_list em,
body.market .header_account_list button {
    color: #FFFFFF !important;
}

body.market .header_account_list:hover {
    background: rgba(255, 255, 255, .12) !important;
}

body.market .header_account_list span.item_count {
    background: var(--fx-yellow);
    color: #1F1A05;
}

/* search: white bar with the category select as a left segment */
body.market .searchbar_content form {
    display: flex !important;
    align-items: center;
    border: 0;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: none;
}

body.market .searchbar_content form:focus-within {
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(255, 197, 49, .55);
}

body.market .searchbar_content .category_hover_content {
    display: block;
    flex: none;
    position: relative;
    border-inline-end: 1px solid #E3E8E5;
}

body.market .searchbar_content .nice-select {
    float: none;
    height: 48px;
    line-height: 48px;
    padding-inline: 18px 38px;
    border: 0;
    border-radius: 12px 0 0 12px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #0F1512;
}

body.market .searchbar_content .nice-select .current {
    color: #0F1512;
    text-transform: capitalize;
}

body.market .searchbar_content .nice-select::after {
    border-color: #0F1512;
}

body.market .searchbar_content .nice-select .list {
    border-radius: 14px;
    box-shadow: var(--fx-shadow-lg);
    z-index: 60;
}

body.market .search-box {
    flex: 1;
    height: 48px;
    padding-inline-start: 14px;
    border-radius: 0 12px 12px 0;
    background: transparent;
}

body.market .search-box input {
    color: #0F1512;
}

body.market .search-box input::placeholder {
    color: #6B756F;
}

body.market .search-box button {
    background: transparent;
    color: #0F1512;
}

body.market .search-box button:hover {
    background: var(--fx-brand);
    color: #FFFFFF;
}

/* nav on green */
body.market .main_menu_content nav > ul > li > a,
body.market .main_menu_content nav > ul > li > a em,
body.market .main_menu_content nav > ul > li:hover > a,
body.market .main_menu_content nav > ul > li > a.active,
body.market .main_menu_content nav > ul > li > a.active em {
    color: #FFFFFF;
}

body.market .main_menu_content nav > ul > li > a::after {
    background: var(--fx-yellow);
}

/* yellow Browse All Categories button */
body.market .title_content {
    height: 44px;
    padding-inline: 18px 40px;
    border-radius: 10px;
    background: var(--fx-yellow);
}

body.market .title_content:hover {
    background: #FFD45E;
}

body.market .title_content h2,
body.market .title_content em {
    color: #1F1A05;
}

body.market .title_content h2 {
    line-height: 44px;
    font-size: 14px;
    font-weight: 700;
}

body.market .title_content h2::before {
    content: "Browse ";
}

/* support phone */
body.market .connect-with-us p,
body.market .connect-with-us p a {
    color: #FFFFFF;
}

body.market .connect-with-us p::before {
    filter: brightness(0) invert(1);
}

@media (min-width: 992px) {
    body.market .header_top {
        display: none;
    }

    body.market .main_header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "logo search account"
            "cats nav phone";
        column-gap: clamp(16px, 2.4vw, 40px);
        row-gap: 0;
    }

    body.market .main_header .logo {
        grid-area: logo;
        padding-block: 14px;
    }

    body.market .searchbar_content.mobile_screen_none {
        grid-area: search;
        width: 100%;
        max-width: 680px;
        justify-self: center;
    }

    body.market .header_account_area {
        grid-area: account;
    }

    body.market .categories_menu {
        grid-area: cats;
        display: block !important;
        padding-bottom: 12px;
    }

    body.market .main_menu_content {
        grid-area: nav;
        justify-self: start;
        padding-bottom: 12px;
    }

    body.market .connect-with-us {
        grid-area: phone;
        display: block;
        padding-bottom: 12px;
    }

    body.market .connect-with-us p {
        padding-inline-start: 40px;
        text-align: start;
    }

    body.market .connect-with-us p::before {
        left: 0;
        top: 50%;
        transform: translateY(-50%) scale(.8);
    }

    body.market .main_menu_content nav > ul > li > a {
        line-height: 44px;
    }

    body.market .main_menu_content nav > ul > li > a::after {
        bottom: 4px;
    }

    body.market .main_menu_content nav > ul > li ul.sub_menu,
    body.market .main_menu_content nav > ul > li .mega_menu {
        top: 100%;
    }

    /* stuck: keep the green band, slightly translucent */
    body.market.fx-stuck header {
        background: color-mix(in srgb, var(--fx-brand) 94%, transparent);
    }

    body.market.fx-stuck .main_header .logo {
        padding-block: 8px;
    }

    body.market.fx-stuck .main_menu_content nav > ul > li > a {
        line-height: 40px;
    }

    body.market.fx-stuck .categories_menu,
    body.market.fx-stuck .main_menu_content,
    body.market.fx-stuck .connect-with-us {
        padding-bottom: 8px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.market .connect-with-us {
        display: none !important;
    }

    body.market .main_header {
        grid-template-areas:
            "logo search account"
            "cats nav nav";
    }
}

@media (max-width: 991.98px) {
    body.market .middle_content,
    body.market .header_bottom {
        background: var(--fx-brand);
        border: 0;
    }

    body.market .header_bottom .searchbar_content form {
        border: 0;
    }

    body.market .mobile_canvas_open a {
        background: rgba(255, 255, 255, .14);
        color: #FFFFFF;
    }
}

[dir="rtl"] body.market :is(.fx-hero__badge, .fx-hero__proof strong, .fx-hero__proof small) {
    unicode-bidi: plaintext;
}

/* header aligns with Bootstrap's .container widths */
@media (min-width: 992px) {
    body.market .main_header {
        max-width: 960px;
        padding-inline: 12px;
    }

    body.market .title_content em {
        position: absolute;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%);
        inset-inline-end: 16px;
        margin: 0;
        line-height: 1;
    }

    [dir="rtl"] body.market .title_content em {
        right: auto;
    }
}

@media (min-width: 1200px) {
    body.market .main_header {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    body.market .main_header {
        max-width: 1320px;
    }
}

/* mobile: search without the category segment, smaller logo plate */
@media (max-width: 991.98px) {
    body.market .header_bottom .category_hover_content {
        display: none;
    }

    body.market .main_header .logo a {
        padding: 4px 10px;
    }

    body.market .main_header .logo img {
        max-height: 32px;
    }
}

body.market .main_header .logo a {
    line-height: 0;
    align-items: center;
}

body.market .main_header .logo img {
    display: block;
}

/* plate sized by the image, not by its intrinsic attribute box */
body.market .main_header .logo a {
    display: inline-block;
}

@media (max-width: 991.98px) {
    body.market .main_header .logo {
        padding-block: 14px 6px;
    }

    body.market .main_header .logo img {
        margin: 0;
    }
}

/* ==========================================================================
   Popular Categories – pastel gradient cards
   ========================================================================== */
.fx-showall {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 6px 0 20px;
    border-radius: 999px;
    background: var(--fx-text);
    color: var(--fx-bg) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .25s;
}

[dir="rtl"] .fx-showall {
    padding: 0 20px 0 6px;
}

.fx-showall span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fx-bg);
    color: var(--fx-text);
    font-size: 15px;
    transition: transform .4s var(--fx-ease);
}

.fx-showall:hover {
    background: var(--fx-brand);
}

.fx-showall:hover span {
    transform: translateX(3px);
}

[dir="rtl"] .fx-showall:hover span {
    transform: translateX(-3px);
}

.fx-catcards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
}

.fx-catcard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 14px 24px;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--tint) 0%, color-mix(in srgb, var(--tint) 35%, #FFFFFF) 70%, #FFFFFF 100%);
    text-align: center;
    transition: transform .45s var(--fx-ease), box-shadow .45s var(--fx-ease);
}

.fx-catcard img {
    width: 100%;
    max-width: 150px;
    height: 120px;
    margin-bottom: 18px;
    object-fit: contain;
    transition: transform .6s var(--fx-ease);
}

/* is-keyed: product photos with the backdrop keyed out (assets/images/cat-*.png) */




.fx-catcard h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.fx-catcard h3 a {
    color: #0F1512 !important;
    text-decoration: none;
}

.fx-catcard h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.fx-catcard p {
    margin: 0;
    color: #5E6963;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* hover: deeper tint rises from the bottom, product floats up, name gets an underline */
.fx-catcard {
    overflow: hidden;
    isolation: isolate;
}

.fx-catcard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--tint) 100%, #0F1512 6%);
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform .55s var(--fx-ease);
}

.fx-catcard h3 a {
    background: linear-gradient(var(--fx-brand), var(--fx-brand)) 50% 100% / 0 2px no-repeat;
    padding-bottom: 3px;
    transition: background-size .45s var(--fx-ease), color .3s;
}

@media (hover: hover) and (pointer: fine) {
    .fx-catcard:hover::before,
    .fx-catcard:focus-within::before {
        transform: translateY(0);
    }

    .fx-catcard:hover img,
    .fx-catcard:focus-within img {
        transform: translateY(-10px) scale(1.12);
        animation: fx-cat-bob 1.6s .55s ease-in-out infinite;
    }

    .fx-catcard:hover h3 a,
    .fx-catcard:focus-within h3 a {
        color: var(--fx-brand) !important;
        background-size: 100% 2px;
    }
}

@keyframes fx-cat-bob {
    0%, 100% { transform: translateY(-10px) scale(1.12); }
    50% { transform: translateY(-16px) scale(1.12); }
}

body.market.dark-mode .fx-catcard::before {
    background: color-mix(in srgb, var(--tint) 30%, var(--fx-card));
}

body.market.dark-mode .fx-catcard:hover h3 a {
    color: var(--fx-brand-text) !important;
}

body.market.dark-mode .fx-catcard {
    background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 22%, var(--fx-card)) 0%, var(--fx-card) 100%);
}

body.market.dark-mode .fx-catcard h3 a {
    color: var(--fx-text) !important;
}

body.market.dark-mode .fx-catcard p {
    color: var(--fx-muted);
}


@media (max-width: 1199.98px) {
    .fx-catcards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .fx-catcards {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 42%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: -12px;
        padding: 4px 12px 12px;
    }

    .fx-catcards::-webkit-scrollbar {
        display: none;
    }

    .fx-catcard {
        scroll-snap-align: start;
    }

    .fx-catcard img {
        height: 96px;
    }
}

[dir="rtl"] body.market .fx-marquee li {
    unicode-bidi: plaintext;
}

/* white logo straight on the green header – no plate */
body.market .main_header .logo a,
body.market.dark-mode .main_header .logo a {
    padding: 0;
    background: none;
    border-radius: 0;
}

body.market .main_header .logo img {
    max-height: 46px;
}

/* category section: flat – no shadows anywhere */
.fx-catcard,
.fx-catcard:hover,
.fx-catcard:focus-within,
.fx-catcard img {
    box-shadow: none !important;
    filter: none !important;
}

.fx-catcard:hover {
    transform: none !important;
}

/* ==========================================================================
   Category card hover v3 – gradient border (no fill, no shadow)
   The border follows the card's own tint, top to bottom, only darker.
   ========================================================================== */
.fx-catcard::before {
    display: none;
}

.fx-catcard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--tint) 55%, #0F1512 28%) 0%,
            color-mix(in srgb, var(--tint) 70%, #0F1512 12%) 60%,
            color-mix(in srgb, var(--tint) 45%, #FFFFFF) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--fx-ease);
}

.fx-catcard:hover::after,
.fx-catcard:focus-within::after {
    opacity: 1;
}

body.market.dark-mode .fx-catcard::after {
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--tint) 70%, #FFFFFF 0%) 0%,
            color-mix(in srgb, var(--tint) 40%, var(--fx-card)) 100%);
}

/* richer border: same hue as the card tint, darker and more saturated (relative colour syntax) */
@supports (color: oklch(from red l c h)) {
    .fx-catcard::after {
        background: linear-gradient(180deg,
                oklch(from var(--tint) calc(l - .30) calc(c * 5 + .06) h) 0%,
                oklch(from var(--tint) calc(l - .18) calc(c * 4 + .04) h) 55%,
                oklch(from var(--tint) calc(l - .04) calc(c * 2) h) 100%);
    }

    body.market.dark-mode .fx-catcard::after {
        background: linear-gradient(180deg,
                oklch(from var(--tint) calc(l - .12) calc(c * 5 + .06) h) 0%,
                oklch(from var(--tint) calc(l - .45) calc(c * 3) h) 100%);
    }
}

/* ==========================================================================
   Browse All Categories dropdown (.fx-cm) – list with thumbnails + flyout
   Open/close: script.js toggles .categories_content_toggle on .title_content
   ========================================================================== */
body.market .categories_content_toggle.fx-cm {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    width: 300px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--fx-line);
    border-radius: 18px;
    background: var(--fx-card);
    box-shadow: 0 30px 60px -24px rgba(15, 21, 18, .35);
    z-index: 60;
}

body.market .fx-cm > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.market .fx-cm > ul > li {
    position: static;
    border: 0;
}

body.market .fx-cm > ul > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 12px 6px 6px;
    border: 0;
    border-radius: 12px;
    color: var(--fx-text) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
    transition: background-color .2s, color .2s;
}

[dir="rtl"] body.market .fx-cm > ul > li > a {
    padding: 6px 6px 6px 12px;
}

body.market .fx-cm__thumb {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 80% 50%;
    background: var(--fx-surface);
    transition: transform .4s var(--fx-ease);
}

body.market .fx-cm__thumb[src*="cat-"] {
    object-fit: contain;
    padding: 4px;
}

body.market .fx-cm__name {
    flex: 1;
    min-width: 0;
}

body.market .fx-cm__name small {
    display: block;
    margin-top: 2px;
    color: var(--fx-muted);
    font-size: 12px;
    font-weight: 500;
}

body.market .fx-cm > ul > li > a > em {
    position: static !important;
    flex: none;
    color: var(--fx-muted) !important;
    font-size: 14px;
    transform: none;
    transition: transform .3s var(--fx-ease), color .2s;
}

body.market .fx-cm .expand {
    display: none;
}

body.market .fx-cm > ul > li:hover > a,
body.market .fx-cm > ul > li:focus-within > a {
    background: var(--fx-surface);
    color: var(--fx-brand-text) !important;
}

body.market .fx-cm > ul > li:hover .fx-cm__thumb {
    transform: scale(1.1) rotate(-6deg);
}

body.market .fx-cm > ul > li:hover > a > em {
    color: var(--fx-brand-text) !important;
    transform: translateX(3px);
}

[dir="rtl"] body.market .fx-cm > ul > li:hover > a > em {
    transform: translateX(-3px);
}

/* flyout panel */
body.market .fx-cm .cate_mega_menu {
    position: absolute !important;
    top: 0 !important;
    inset-inline-start: calc(100% + 8px) !important;
    left: auto;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 2px 16px;
    width: 420px !important;
    min-height: 100%;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--fx-line);
    border-radius: 18px;
    background: var(--fx-card);
    box-shadow: 0 30px 60px -24px rgba(15, 21, 18, .35);
    list-style: none;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-8px);
    transition: opacity .25s var(--fx-ease), transform .3s var(--fx-ease), visibility 0s .25s;
}

body.market:not([dir="rtl"]) .fx-cm .cate_mega_menu {
    left: calc(100% + 8px) !important;
}

[dir="rtl"] body.market .fx-cm .cate_mega_menu {
    right: calc(100% + 8px) !important;
    left: auto !important;
    transform: translateX(8px);
}

body.market .fx-cm > ul > li:hover > .cate_mega_menu,
body.market .fx-cm > ul > li:focus-within > .cate_mega_menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none;
    transition: opacity .25s var(--fx-ease), transform .3s var(--fx-ease), visibility 0s;
}

/* bridge the 8px gap so the pointer can travel to the flyout */
body.market .fx-cm .cate_mega_menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    inset-inline-start: -12px;
}

body.market .fx-cm .fx-cm__title {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 700;
}

body.market .fx-cm .cate_mega_menu > li > a {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--fx-muted) !important;
    font-size: 14px;
    font-weight: 500;
    transition: background-color .2s, color .2s, padding .25s var(--fx-ease);
}

body.market .fx-cm .cate_mega_menu > li > a:hover {
    background: var(--fx-surface);
    color: var(--fx-brand-text) !important;
    padding-inline-start: 14px;
}

body.market .fx-cm .fx-cm__promo-li {
    grid-column: 1 / -1;
    margin-top: 10px;
}

body.market .fx-cm .cate_mega_menu > li > a.fx-cm__promo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--fx-lime-soft);
    color: var(--fx-text) !important;
    font-size: 14px;
    font-weight: 600;
}

body.market .fx-cm__promo img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
}

body.market .fx-cm__promo img[src*="cat-"] {
    object-fit: contain;
}

/* footer link */
body.market .fx-cm .fx-cm__all {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--fx-line);
}

body.market .fx-cm .fx-cm__all > a {
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    color: var(--fx-brand-text) !important;
}

body.market .fx-cm .fx-cm__all > a > em {
    color: inherit !important;
}

body.market .fx-cm .cate_mega_menu > li > a,
body.market .fx-cm .fx-cm__title,
body.market .fx-cm__promo span {
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
}

body.market.dark-mode .fx-cm .cate_mega_menu > li > a {
    color: #C9D3CD !important;
}

body.market.dark-mode .fx-cm .cate_mega_menu > li > a:hover {
    color: var(--fx-brand-text) !important;
}

body.market.dark-mode .fx-cm .cate_mega_menu > li > a.fx-cm__promo {
    color: #ECF1ED !important;
}

[dir="rtl"] body.market .fx-cm__name small {
    unicode-bidi: plaintext;
}

/* Deal of the week stays in view while the trending grid scrolls (desktop) */
@media (min-width: 1200px) {
    .fx-deal {
        position: sticky;
        top: calc(var(--fx-header-h, 0px) + 20px);
        transition: top .35s var(--fx-ease);
    }
}

/* custom.css sets body { overflow-x: hidden }, which turns body into a scroll
   container and breaks position: sticky. clip hides sideways overflow without that. */
html:has(body.market),
body.market {
    overflow-x: clip;
    overflow-y: visible;
}

/* ==========================================================================
   Fresh & healthy vegetables – patterned green panel
   Pattern: inline SVG tile of produce line-art (change --fx-veg-pattern-opacity)
   ========================================================================== */
.fx-veg {
    --fx-veg-pattern-opacity: .07;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(36px, 5vw, 72px);
    border-radius: 36px;
    background:
        radial-gradient(55% 75% at 82% 45%, color-mix(in srgb, var(--fx-brand) 65%, #7DC24B) 0%, transparent 70%),
        var(--fx-deep);
    color: #FFFFFF;
    overflow: hidden;
    isolation: isolate;
}

.fx-veg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M22 46c0-14 10-24 22-24 0 14-10 24-22 24z'/%3E%3Cpath d='M22 46l14-14'/%3E %3Cpath d='M104 20l-22 34 6 4 22-34z'/%3E%3Cpath d='M104 20c4-6 10-6 12-2M104 20c2-6 0-12-4-12M108 24c6-2 12 0 12 4'/%3E %3Ccircle cx='130' cy='92' r='13'/%3E%3Cpath d='M126 79c2-4 6-4 8 0M130 79v-5'/%3E %3Cpath d='M40 118c-8 0-14 6-14 14s6 14 14 14 14-6 14-14-6-14-14-14z'/%3E%3Cpath d='M40 118c-2-5 0-9 5-10M40 118c3-4 8-5 11-3'/%3E %3Cpath d='M84 104c-6 6-6 16 0 22 6-6 6-16 0-22z'/%3E%3Cpath d='M84 104v-8'/%3E %3Ccircle cx='70' cy='70' r='2'/%3E%3Ccircle cx='148' cy='40' r='2'/%3E%3Ccircle cx='12' cy='86' r='2'/%3E%3Ccircle cx='112' cy='146' r='2'/%3E %3C/svg%3E");
    background-size: 160px 160px;
    opacity: var(--fx-veg-pattern-opacity);
    -webkit-mask: linear-gradient(105deg, #000 0%, #000 45%, transparent 85%);
    mask: linear-gradient(105deg, #000 0%, #000 45%, transparent 85%);
    animation: fx-veg-drift 60s linear infinite;
}

@keyframes fx-veg-drift {
    to { background-position: 160px 160px; }
}

.fx-veg h2 {
    margin: 0 0 18px;
    color: #FFFFFF;
    font-size: clamp(32px, 3.6vw, 52px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    text-wrap: balance;
}

.fx-veg h2 span {
    color: var(--fx-lime);
}

.fx-veg__copy > p {
    margin: 0 0 30px;
    max-width: 44ch;
    color: rgba(255, 255, 255, .8);
    font-size: 17px;
    line-height: 1.6;
}

.fx-veg__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
    counter-reset: fx-step;
}

.fx-veg__steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    counter-increment: fx-step;
    transition: background-color .3s, border-color .3s;
}

.fx-veg__steps li::after {
    content: "0" counter(fx-step);
    position: absolute;
    top: 14px;
    inset-inline-end: 16px;
    color: rgba(255, 255, 255, .35);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fx-veg__steps li:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(212, 245, 138, .5);
}

.fx-veg__steps em {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--fx-lime);
    color: #14260A;
    font-size: 18px;
}

.fx-veg__steps strong {
    font-size: 15px;
    font-weight: 700;
}

.fx-veg__steps span {
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
}

.fx-veg__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 28px;
}

.fx-veg__link {
    color: #FFFFFF !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .45);
    text-underline-offset: 6px;
    transition: text-decoration-color .2s;
}

.fx-veg__link:hover {
    text-decoration-color: var(--fx-lime);
}

/* art */
.fx-veg__art {
    position: relative;
    aspect-ratio: 1;
    max-width: 520px;
    width: 100%;
    justify-self: center;
}

.fx-veg__disc {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(212, 245, 138, .3), rgba(212, 245, 138, .08) 70%);
    border: 1px dashed rgba(212, 245, 138, .4);
}

.fx-veg__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: fx-spin 40s linear infinite;
}

.fx-veg__ring text {
    fill: rgba(255, 255, 255, .75);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
}

@keyframes fx-spin {
    to { transform: rotate(360deg); }
}

.fx-veg__main {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 52%;
    translate: -50% -50%;
    transition: transform .6s var(--fx-ease);
}

.fx-veg__bubble {
    position: absolute;
    width: 26%;
    aspect-ratio: 1;
    padding: 4%;
    object-fit: contain;
    border-radius: 50%;
    background: #FFFFFF;
    transition: transform .6s var(--fx-ease);
    animation: fx-veg-float 6s ease-in-out infinite;
}

.fx-veg__bubble--a {
    top: 8%;
    inset-inline-end: 4%;
}

.fx-veg__bubble--b {
    bottom: 6%;
    inset-inline-start: 2%;
    width: 22%;
    animation-delay: -3s;
}

@keyframes fx-veg-float {
    50% { translate: 0 -10px; }
}

@media (max-width: 991.98px) {
    .fx-veg {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-veg::before {
        -webkit-mask: none;
        mask: none;
    }
}

@media (max-width: 767.98px) {
    .fx-veg {
        border-radius: 26px;
    }

    .fx-veg__steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-veg__steps li {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 12px;
    }

    .fx-veg__steps em {
        margin-bottom: 0;
    }

    .fx-veg__steps li > span {
        flex-basis: 100%;
        padding-inline-start: 52px;
        margin-top: -14px;
    }
}

[dir="rtl"] body.market .fx-veg__copy > p,
[dir="rtl"] body.market .fx-veg h2 {
    unicode-bidi: plaintext;
}

.fx-veg__ring {
    direction: ltr;
    unicode-bidi: isolate;
}

.fx-veg__bubble--a {
    top: -2%;
    inset-inline-end: -3%;
    width: 22%;
}

.fx-veg__bubble--b {
    bottom: -1%;
    inset-inline-start: -3%;
    width: 19%;
}

/* ==========================================================================
   Header nav dropdowns (.fx-dd) – Home list, Shop mega panel, More grid
   Pure CSS: open on hover / keyboard focus (desktop header only)
   ========================================================================== */
body.market .main_menu_content nav > ul > li.fx-dd-parent {
    position: relative;
}

body.market .main_menu_content nav > ul > li.fx-dd-parent > a > em {
    transition: transform .3s var(--fx-ease);
}

body.market .main_menu_content nav > ul > li.fx-dd-parent:hover > a > em,
body.market .main_menu_content nav > ul > li.fx-dd-parent:focus-within > a > em {
    transform: rotate(180deg);
}

body.market .fx-dd {
    position: absolute;
    top: 100%;
    inset-inline-start: 50%;
    z-index: 70;
    padding: 10px;
    border: 1px solid var(--fx-line);
    border-radius: 20px;
    background: var(--fx-card);
    box-shadow: 0 30px 60px -24px rgba(15, 21, 18, .35);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity .25s var(--fx-ease), transform .3s var(--fx-ease), visibility 0s .25s;
}

[dir="rtl"] body.market .fx-dd {
    transform: translate(50%, 10px);
}

/* hover bridge between the link and the panel */
body.market .fx-dd::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -14px;
    height: 14px;
}

body.market li.fx-dd-parent:hover > .fx-dd,
body.market li.fx-dd-parent:focus-within > .fx-dd {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 6px);
    transition: opacity .25s var(--fx-ease), transform .3s var(--fx-ease), visibility 0s;
}

[dir="rtl"] body.market li.fx-dd-parent:hover > .fx-dd,
[dir="rtl"] body.market li.fx-dd-parent:focus-within > .fx-dd {
    transform: translate(50%, 6px);
}

body.market .fx-dd ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.market .fx-dd li {
    margin: 0;
}

body.market .fx-dd li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border-radius: 12px;
    color: var(--fx-text) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}

[dir="rtl"] body.market .fx-dd li > a {
    padding: 8px 8px 8px 12px;
}

body.market .fx-dd li > a::after {
    display: none !important;
}

body.market .fx-dd li > a > em {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--fx-surface);
    color: var(--fx-brand-text) !important;
    font-size: 16px;
    transition: background-color .2s, color .2s, transform .3s var(--fx-spring);
}

body.market .fx-dd li > a small {
    display: block;
    margin-top: 2px;
    color: var(--fx-muted);
    font-size: 12px;
    font-weight: 500;
}

body.market .fx-dd li > a:hover,
body.market .fx-dd li > a:focus-visible {
    background: var(--fx-surface);
    color: var(--fx-brand-text) !important;
}

body.market .fx-dd li > a:hover > em {
    background: var(--fx-brand);
    color: #FFFFFF !important;
    transform: scale(1.06);
}

/* Home: list */
body.market .fx-dd--list {
    width: 260px;
}

/* More: two-column grid */
body.market .fx-dd--grid {
    width: 420px;
}

body.market .fx-dd--grid ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
}

/* Shop: mega panel anchored under the Shop link */
body.market .fx-dd--mega {
    display: grid;
    grid-template-columns: 1fr 1fr 220px;
    gap: 8px;
    width: 680px;
    padding: 16px;
}

body.market .fx-dd__title {
    margin: 4px 8px 8px;
    color: var(--fx-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.market .fx-dd__promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    min-height: 100%;
    padding: 18px;
    border-radius: 16px;
    background: var(--fx-lime-soft);
    color: var(--fx-text) !important;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}

body.market .fx-dd__promo img {
    position: absolute;
    z-index: -1;
    top: 10px;
    inset-inline-end: -10px;
    width: 72%;
    transition: transform .6s var(--fx-ease);
}

body.market .fx-dd__promo:hover img {
    transform: scale(1.08) rotate(-6deg);
}

body.market .fx-dd__promo strong {
    margin-top: 110px;
    font-size: 17px;
    font-weight: 700;
}

body.market .fx-dd__promo span {
    color: var(--fx-muted);
    font-size: 13px;
}

body.market .fx-dd__promo .fx-dd__promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--fx-brand-text);
    font-size: 14px;
    font-weight: 700;
}

/* keep panels inside the viewport at narrower desktop widths */
@media (max-width: 1399.98px) {
    body.market .fx-dd--mega {
        width: 600px;
        grid-template-columns: 1fr 1fr 180px;
    }
}

/* ==========================================================================
   Quick view modal (.fx-qv) – filled from the clicked product card (market.js)
   ========================================================================== */
body.market .fx-qv .modal-dialog {
    max-width: 980px;
    padding: 12px;
}

body.market .fx-qv .modal-content {
    position: relative;
    border: 0;
    border-radius: 28px;
    background: var(--fx-card);
    color: var(--fx-text);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45);
    overflow: hidden;
}

body.market .modal-backdrop.show {
    background: #0F1512;
    opacity: .55;
}

body.market .fx-qv.fade .modal-dialog {
    transform: translateY(24px) scale(.97);
    transition: transform .45s var(--fx-ease);
}

body.market .fx-qv.show .modal-dialog {
    transform: none;
}

.fx-qv__close {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    z-index: 5;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--fx-surface);
    color: var(--fx-text);
    font-size: 18px;
    transition: background-color .2s, color .2s, transform .4s var(--fx-spring);
}

.fx-qv__close:hover {
    background: var(--fx-text);
    color: var(--fx-bg);
    transform: rotate(90deg);
}

.fx-qv__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* gallery */
.fx-qv__gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--fx-surface);
}

.fx-qv__stage {
    position: relative;
    flex: 1;
    min-height: 340px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: var(--fx-photo);
    overflow: hidden;
}

.fx-qv__main {
    width: 86%;
    max-height: 400px;
    object-fit: contain;
    transition: opacity .25s, transform .5s var(--fx-ease);
}

.fx-qv__main.is-swapping {
    opacity: 0;
    transform: scale(.94);
}

.fx-qv__stage:hover .fx-qv__main {
    transform: scale(1.06);
}

.fx-qv__off {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    font-size: 13px;
    padding: 6px 10px;
}

.fx-qv__off[hidden] {
    display: none;
}

.fx-qv__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.fx-qv__thumbs button {
    aspect-ratio: 1;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--fx-photo);
    transition: border-color .2s, transform .3s var(--fx-spring);
}

.fx-qv__thumbs button:hover {
    transform: translateY(-2px);
}

.fx-qv__thumbs button.is-active {
    border-color: var(--fx-brand);
}

.fx-qv__thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* info */
.fx-qv__info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(24px, 3vw, 40px);
    padding-top: clamp(28px, 3vw, 44px);
}

.fx-qv__cat {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--fx-brand-soft);
    color: var(--fx-brand-text);
    font-size: 13px;
    font-weight: 600;
}

.fx-qv__info h2 {
    margin: 0;
    padding-inline-end: 40px;
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.fx-qv__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
}

.fx-qv__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--fx-star);
    font-size: 15px;
}

.fx-qv__score {
    font-weight: 700;
}

.fx-qv__reviews {
    color: var(--fx-muted);
}

.fx-qv__price strong {
    font-size: 30px;
}

.fx-qv__price del {
    font-size: 16px;
}

.fx-qv__desc {
    margin: 0;
    color: var(--fx-muted);
    font-size: 15px;
    line-height: 1.6;
}

.fx-qv__weights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.fx-qv__weights legend {
    float: none;
    width: 100%;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.fx-qv__weights label {
    cursor: pointer;
}

.fx-qv__weights input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fx-qv__weights span {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border: 1.5px solid var(--fx-line);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .2s, background-color .2s, color .2s;
}

.fx-qv__weights label:hover span {
    border-color: var(--fx-brand);
}

.fx-qv__weights input:checked + span {
    border-color: var(--fx-brand);
    background: var(--fx-brand);
    color: #FFFFFF;
}

.fx-qv__weights input:focus-visible + span {
    outline: 2px solid var(--fx-brand);
    outline-offset: 2px;
}

.fx-qv__buy {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.fx-qv__qty {
    display: inline-grid;
    grid-template-columns: 44px 40px 44px;
    align-items: center;
    height: 54px;
    border-radius: 999px;
    background: var(--fx-surface);
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fx-qv__qty button {
    height: 54px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fx-text);
    font-size: 20px;
    transition: background-color .2s;
}

.fx-qv__qty button:hover {
    background: var(--fx-line);
}

.fx-qv__add {
    flex: 1;
}

.fx-qv__add.is-done {
    background: var(--fx-text);
}

.fx-qv__like {
    width: 54px;
    height: 54px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--fx-line);
    border-radius: 50%;
    background: transparent;
    color: var(--fx-text);
    font-size: 20px;
    transition: border-color .2s, color .2s, transform .3s var(--fx-spring);
}

.fx-qv__like:hover {
    border-color: #E11D48;
    color: #E11D48;
}

.fx-qv__like.is-on,
.fx-qv__like.is-on em {
    border-color: #E11D48;
    color: #E11D48 !important;
}

.fx-qv__like.is-on em::before {
    --si: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

.fx-qv__perks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 6px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--fx-line);
    list-style: none;
    color: var(--fx-muted);
    font-size: 14px;
}

.fx-qv__perks li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fx-qv__perks em {
    color: var(--fx-brand-text);
    font-size: 17px;
}

.fx-qv__more {
    align-self: flex-start;
}

@media (max-width: 767.98px) {
    .fx-qv__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-qv__stage {
        min-height: 240px;
    }

    .fx-qv__buy {
        flex-wrap: wrap;
    }

    .fx-qv__add {
        order: 3;
        flex-basis: 100%;
    }
}

[dir="rtl"] body.market :is(.fx-qv__desc, .fx-qv__perks li, .fx-qv__reviews, .fx-qv__price) {
    unicode-bidi: plaintext;
}

/* quick view: keep the discount chip above the zooming photo */
.fx-qv__off {
    z-index: 2;
    white-space: nowrap;
}

.fx-qv__main {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   HOME 2 (index-2.html) – same theme, different layouts (.h2-*)
   ========================================================================== */

/* ---------- hero: full-bleed photo slider ---------- */
.h2-hero {
    padding-top: clamp(16px, 2vw, 28px);
}

.h2-slider {
    position: relative;
    display: grid;
    min-height: clamp(460px, 42vw, 600px);
    border-radius: clamp(24px, 3vw, 36px);
    overflow: hidden;
    background: #F4F3EF;
    isolation: isolate;
}

.h2-slide {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    padding: clamp(32px, 5vw, 80px);
    padding-bottom: clamp(96px, 9vw, 120px);
    background-color: #F4F3EF;
    background-position: 70% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    visibility: hidden;
    opacity: 0;
    transition: opacity .8s var(--fx-ease), visibility 0s .8s;
}

[dir="rtl"] .h2-slide {
    background-position: 30% 50%;
    transform: scaleX(-1);
}

[dir="rtl"] .h2-slide > * {
    transform: scaleX(-1);
}

.h2-slide.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity .8s var(--fx-ease), visibility 0s 0s;
}

.h2-slide::before {
    /* soft wash so copy reads over the photo */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(244, 243, 239, .96) 0%, rgba(244, 243, 239, .8) 38%, rgba(244, 243, 239, 0) 62%);
}

.h2-slide__copy {
    max-width: 520px;
}

.h2-slide.is-active .h2-slide__copy > * {
    animation: fx-rise .9s var(--fx-ease) both;
}

.h2-slide.is-active .h2-slide__copy > :nth-child(2) { animation-delay: .08s; }
.h2-slide.is-active .h2-slide__copy > :nth-child(3) { animation-delay: .16s; }
.h2-slide.is-active .h2-slide__copy > :nth-child(4) { animation-delay: .24s; }

.h2-slide__sub {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    color: #3D4842;
    font-size: 15px;
    font-weight: 600;
}

.h2-slide__title {
    margin: 0 0 18px;
    color: #0F1512;
    font-size: clamp(42px, 5.4vw, 76px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    text-wrap: balance;
}

.h2-slide__title span {
    color: var(--buttons);
}

.h2-slide__text {
    margin: 0 0 32px;
    max-width: 40ch;
    color: #4F5A54;
    font-size: 18px;
    line-height: 1.55;
}

.h2-slide__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 28px;
}

.h2-slide .fx-hero__link {
    color: #0F1512 !important;
}

.h2-slider__ui {
    position: absolute;
    z-index: 3;
    inset-inline: clamp(32px, 5vw, 80px);
    bottom: clamp(24px, 3vw, 36px);
    display: flex;
    align-items: center;
    gap: 24px;
}

.h2-slider__count {
    margin: 0;
    color: #4F5A54;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.h2-slider__count strong {
    color: #0F1512;
    font-size: 22px;
}

.h2-slider__bars {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 260px;
}

.h2-slider__bars button {
    position: relative;
    flex: 1;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(15, 21, 18, .15);
    overflow: hidden;
}

.h2-slider__bars button span {
    position: absolute;
    inset: 0;
    background: var(--buttons);
    transform: scaleX(0);
    transform-origin: left;
}

[dir="rtl"] .h2-slider__bars button span {
    transform-origin: right;
}

.h2-slider__bars button.is-done span {
    transform: none;
}

.h2-slider__bars button[aria-current="true"] span {
    animation: h2-progress var(--h2-autoplay, 7000ms) linear forwards;
}

.h2-slider.is-paused .h2-slider__bars button span {
    animation-play-state: paused;
}

.h2-slider.no-autoplay .h2-slider__bars button[aria-current="true"] span {
    animation: none;
    transform: none;
}

@keyframes h2-progress {
    to { transform: scaleX(1); }
}

.h2-slider__arrows {
    display: flex;
    gap: 8px;
    margin-inline-start: auto;
}

.h2-slider__arrows .fx-icon-btn {
    background: #FFFFFF;
    border-color: transparent;
    color: #0F1512;
}

.h2-slider__arrows .fx-icon-btn:hover {
    background: #0F1512;
    color: #FFFFFF;
}

/* ---------- perks row ---------- */
.h2-perks {
    padding-top: clamp(24px, 3vw, 40px);
}

.h2-perks__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 24px;
    background: var(--fx-surface);
}

.h2-perks__list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    transition: background-color .3s;
}

.h2-perks__list li:hover {
    background: var(--fx-card);
}

.h2-perks__list li + li {
    border-inline-start: 1px solid var(--fx-line);
}

.h2-perks__list em {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--buttons);
    color: #FFFFFF;
    font-size: 20px;
}

.h2-perks__list h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.h2-perks__list p {
    margin: 2px 0 0;
    color: var(--fx-muted);
    font-size: 13px;
}

/* ---------- centred section head ---------- */
.h2-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(24px, 3vw, 40px);
    text-align: center;
}

.h2-head h2 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.h2-head p {
    margin: 0 0 8px;
    color: var(--fx-muted);
    font-size: 16px;
}

/* ---------- promo bento ---------- */
.h2-bento {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--fx-gap);
    min-height: 460px;
}

.h2-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 30px;
    border-radius: 28px;
    background: var(--fx-surface);
    color: var(--fx-text) !important;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}

.h2-promo--big {
    grid-row: 1 / -1;
    justify-content: flex-end;
    padding: clamp(30px, 3.5vw, 48px);
    background: var(--fx-deep);
    color: #FFFFFF !important;
}

.h2-promo--tint {
    background: #FFE6EC;
    color: #0F1512 !important;
}

.h2-promo--lime {
    background: var(--fx-lime-soft);
}

.h2-promo h3 {
    max-width: 14ch;
    margin: 6px 0 0;
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: inherit;
}

.h2-promo--big h3 {
    color: #FFFFFF;
    font-size: clamp(34px, 3.6vw, 52px);
}

.h2-promo p {
    margin: 0 0 14px;
    font-size: 15px;
    opacity: .8;
}

.h2-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-weight: 700;
    font-size: 15px;
}

.h2-promo--big .h2-promo__cta {
    margin-top: 0;
    padding: 12px 22px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--fx-deep);
}

.h2-promo--big .fx-badge {
    margin-bottom: auto;
}

.h2-promo img {
    position: absolute;
    z-index: -1;
    inset-inline-end: 4%;
    bottom: 8%;
    width: 38%;
    max-height: 80%;
    object-fit: contain;
    transition: transform .7s var(--fx-ease);
}

.h2-promo--big img {
    top: 8%;
    bottom: auto;
    width: 52%;
}

.h2-promo:hover img {
    transform: translateY(-8px) rotate(-5deg) scale(1.05);
}

/* ---------- new arrivals: sticky intro + rail ---------- */
.h2-arrivals {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}

.h2-arrivals__intro {
    position: sticky;
    top: calc(var(--fx-header-h, 0px) + 24px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 30px;
    border-radius: 28px;
    background: var(--fx-surface);
}

.h2-arrivals__intro h2 {
    margin: 0;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.h2-arrivals__intro p {
    margin: 0;
    color: var(--fx-muted);
    font-size: 15px;
}

.h2-rail {
    grid-auto-columns: calc((100% - 2 * var(--fx-gap)) / 3);
}

/* ---------- blog: magazine ---------- */
.h2-blog {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 32px);
}

.h2-post {
    position: relative;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.h2-post__img {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
}

.h2-post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--fx-ease);
}

.h2-post:hover .h2-post__img img {
    transform: scale(1.06);
}

.h2-post__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    color: var(--fx-muted);
    font-size: 13px;
}

.h2-post__meta span {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--fx-brand-soft);
    color: var(--fx-brand-text);
    font-weight: 600;
}

.h2-post h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.h2-post h3 a {
    color: var(--fx-text) !important;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    transition: background-size .45s var(--fx-ease);
}

.h2-post h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.h2-post:hover h3 a {
    background-size: 100% 1.5px;
}

.h2-post--lead {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

.h2-post--lead .h2-post__img {
    aspect-ratio: 16 / 10;
    border-radius: 24px;
}

.h2-post--lead h3 {
    font-size: clamp(24px, 2.2vw, 32px);
    letter-spacing: -0.02em;
}

.h2-post--lead .h2-post__body > p:last-child {
    margin: 12px 0 0;
    color: var(--fx-muted);
    font-size: 16px;
    max-width: 52ch;
}

.h2-blog__list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.h2-blog__list .h2-post + .h2-post {
    padding-top: 18px;
    border-top: 1px solid var(--fx-line);
}

/* ---------- brands marquee ---------- */
.h2-brands__title {
    margin: 0 0 24px;
    color: var(--fx-muted);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.h2-brands__strip {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.h2-brands__track {
    display: flex;
    width: max-content;
    animation: fx-marquee 45s linear infinite;
}

.h2-brands__strip:hover .h2-brands__track {
    animation-play-state: paused;
}

[dir="rtl"] .h2-brands__track {
    animation-direction: reverse;
}

.h2-brands ul {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0 9px;
    list-style: none;
}

.h2-brands li {
    display: grid;
    place-items: center;
    width: 180px;
    height: 96px;
    border-radius: 20px;
    background: var(--fx-surface);
}

.h2-brands li img {
    max-width: 120px;
    max-height: 56px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .3s, opacity .3s;
}

.h2-brands li:hover img {
    filter: none;
    opacity: 1;
}

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    .h2-grid {
        --cols: 4 !important;
    }

    .h2-rail {
        grid-auto-columns: calc((100% - var(--fx-gap)) / 2);
    }
}

@media (max-width: 991.98px) {
    .h2-perks__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h2-perks__list li:nth-child(3) {
        border-inline-start: 0;
    }

    .h2-arrivals {
        grid-template-columns: minmax(0, 1fr);
    }

    .h2-arrivals__intro {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .h2-arrivals__intro p {
        flex-basis: 100%;
        order: 2;
    }

    .h2-blog {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .h2-slide {
        align-items: flex-end;
        background-position: 75% 0;
        background-size: auto 60%;
        padding: 24px 22px 96px;
        min-height: 560px;
    }

    .h2-slide::before {
        background: linear-gradient(0deg, rgba(244, 243, 239, 1) 0%, rgba(244, 243, 239, .95) 48%, rgba(244, 243, 239, 0) 70%);
    }

    .h2-slider__ui {
        inset-inline: 22px;
        bottom: 22px;
        gap: 14px;
    }

    .h2-perks__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .h2-perks__list li + li {
        border-inline-start: 0;
        border-top: 1px solid var(--fx-line);
    }

    .h2-grid {
        --cols: 2 !important;
    }

    .h2-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

    .h2-promo--big {
        grid-row: auto;
        min-height: 380px;
    }

    .h2-promo {
        min-height: 200px;
    }

    .h2-rail {
        grid-auto-columns: 70%;
    }

    .h2-post {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .h2-post--lead {
        grid-template-columns: minmax(0, 1fr);
    }
}

[dir="rtl"] body.market :is(.h2-slide__text, .h2-head p, .h2-post p, .h2-perks__list p, .h2-promo p, .h2-slider__count) {
    unicode-bidi: plaintext;
}

/* Home 2 hero – RTL: the slide is mirrored so the produce stays opposite the copy;
   lay it out LTR inside the mirror, then restore RTL for the text */
[dir="rtl"] .h2-slide {
    direction: ltr;
}

[dir="rtl"] .h2-slide__copy {
    direction: rtl;
}

/* Home 2 hero – mobile: photo band on top, copy on a solid ground below */
@media (max-width: 767.98px) {
    .h2-slide {
        align-items: flex-end;
        min-height: 600px;
        padding: 280px 22px 96px;
        background-size: auto 300px;
        background-position: 70% 0;
    }

    [dir="rtl"] .h2-slide {
        background-position: 30% 0;
    }

    .h2-slide::before {
        background: linear-gradient(180deg, rgba(244, 243, 239, 0) 0, rgba(244, 243, 239, 0) 200px, #F4F3EF 290px);
    }

    .h2-slide__title {
        font-size: 40px;
    }

    .h2-slide__text {
        font-size: 16px;
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   HOME 2 – own header, product card, full-width banner, newsletter, footer
   (scoped to body.home-2)
   ========================================================================== */

/* ---------- header: white bar, deep-green announcement strip ---------- */
body.home-2 header {
    background: var(--fx-bg);
    border-top: 0;
    border-bottom: 1px solid var(--fx-line);
}

body.home-2 .header_top {
    display: block !important;
    background: var(--fx-deep);
}

body.home-2 .header_top p,
body.home-2 .header_top a,
body.home-2 .header_top em {
    color: #FFFFFF !important;
}

body.home-2 .main_menu_content nav > ul > li > a,
body.home-2 .main_menu_content nav > ul > li > a em,
body.home-2 .main_menu_content nav > ul > li:hover > a,
body.home-2 .main_menu_content nav > ul > li > a.active,
body.home-2 .main_menu_content nav > ul > li > a.active em {
    color: var(--fx-text);
}

body.home-2 .main_menu_content nav > ul > li:hover > a,
body.home-2 .main_menu_content nav > ul > li > a.active {
    color: var(--fx-brand-text);
}

body.home-2 .main_menu_content nav > ul > li > a::after {
    background: var(--buttons);
}

body.home-2 .header_account_list,
body.home-2 .header_account_list a,
body.home-2 .header_account_list em,
body.home-2 .header_account_list button {
    color: var(--fx-text) !important;
}

body.home-2 .header_account_list:hover {
    background: var(--fx-surface) !important;
}

body.home-2 .header_account_list span.item_count {
    background: var(--buttons);
    color: #FFFFFF;
}

body.home-2 .searchbar_content form {
    background: var(--fx-surface);
    border: 1px solid var(--fx-line);
}

body.home-2 .searchbar_content form:focus-within {
    background: var(--fx-card);
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

body.home-2 .searchbar_content .category_hover_content {
    border-inline-end-color: var(--fx-line);
}

body.home-2 .searchbar_content .nice-select,
body.home-2 .searchbar_content .nice-select .current,
body.home-2 .search-box input,
body.home-2 .search-box button {
    color: var(--fx-text);
}

body.home-2 .searchbar_content .nice-select::after {
    border-color: var(--fx-text);
}

body.home-2 .search-box button {
    background: var(--buttons);
    color: #FFFFFF;
}

body.home-2 .title_content {
    background: var(--buttons);
}

body.home-2 .title_content:hover {
    background: var(--fx-deep);
}

body.home-2 .title_content h2,
body.home-2 .title_content em {
    color: #FFFFFF;
}

body.home-2 .connect-with-us p,
body.home-2 .connect-with-us p a {
    color: var(--fx-text);
}

body.home-2 .connect-with-us p::before {
    filter: none;
}

body.home-2 .main_header .logo img {
    max-height: 44px;
}

@media (min-width: 992px) {
    body.home-2 .main_header {
        grid-template-areas:
            "top top top"
            "logo search account"
            "cats nav phone";
    }

    body.home-2 .header_top {
        grid-area: top;
    }

    body.home-2 .categories_menu,
    body.home-2 .main_menu_content,
    body.home-2 .connect-with-us {
        padding-bottom: 14px;
    }

    body.home-2.fx-stuck header {
        background: var(--fx-glass);
    }

    body.home-2.fx-stuck .header_top {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    body.home-2 .middle_content,
    body.home-2 .header_bottom {
        background: var(--fx-bg);
    }

    body.home-2 .header_bottom .searchbar_content form {
        border: 1px solid var(--fx-line);
    }

    body.home-2 .mobile_canvas_open a {
        background: var(--fx-surface);
        color: var(--fx-text);
    }
}

body.home-2.dark-mode .main_header .logo a {
    padding: 4px 10px;
    background: #FFFFFF;
    border-radius: 10px;
}

/* ---------- product card: bordered, centred, full-width cart button ---------- */
body.home-2 .fx-card--h2 {
    padding: 10px;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
    text-align: center;
    transition: border-color .3s, transform .5s var(--fx-ease);
}

body.home-2 .fx-card--h2 .fx-card__media {
    aspect-ratio: 1 / .9;
    border-radius: 18px;
}

body.home-2 .fx-card--h2 .fx-card__body {
    align-items: center;
    padding: 14px 6px 4px;
}

body.home-2 .fx-card--h2 .fx-card__meta {
    order: -1;
    justify-content: center;
}

body.home-2 .fx-card--h2 .fx-card__foot {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
}

body.home-2 .fx-card--h2 .fx-price {
    justify-content: center;
}

body.home-2 .fx-card--h2 .fx-price strong {
    font-size: 20px;
}

body.home-2 .fx-card--h2 .fx-add,
body.home-2 .fx-card--h2 .fx-stepper {
    width: 100%;
    height: 44px;
}

body.home-2 .fx-card--h2 .fx-add {
    gap: 8px;
    border: 1.5px solid var(--fx-line);
    background: transparent;
    color: var(--fx-text) !important;
}

body.home-2 .fx-card--h2 .fx-add::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.home-2 .fx-card--h2 .fx-add:hover {
    border-color: var(--buttons);
    background: var(--buttons);
    color: #FFFFFF !important;
}

body.home-2 .fx-card--h2 .fx-stepper {
    grid-template-columns: 44px 1fr 44px;
}

body.home-2 .fx-card--h2 .fx-stepper button {
    height: 44px;
}

/* wishlist + quick view stacked on the side, slide in on hover */
body.home-2 .fx-card--h2 .fx-like,
body.home-2 .fx-card--h2 .fx-quick {
    inset-inline-end: 20px;
    background: var(--fx-card);
}

body.home-2 .fx-card--h2 .fx-like {
    top: 20px;
}

body.home-2 .fx-card--h2 .fx-quick {
    top: 64px;
}

body.home-2 .fx-card--h2 .fx-card__badges {
    top: 20px;
    inset-inline-start: 20px;
}

@media (hover: hover) and (pointer: fine) {
    body.home-2 .fx-card--h2:hover {
        border-color: var(--buttons);
        transform: translateY(-4px);
    }

    body.home-2 .fx-card--h2 .fx-like:not(.is-on) {
        opacity: 0;
        transform: translateX(8px);
        transition: opacity .3s var(--fx-ease), transform .3s var(--fx-ease), color .2s;
    }

    [dir="rtl"] body.home-2 .fx-card--h2 .fx-like:not(.is-on) {
        transform: translateX(-8px);
    }

    body.home-2 .fx-card--h2:hover .fx-like,
    body.home-2 .fx-card--h2:focus-within .fx-like {
        opacity: 1;
        transform: none;
    }

    body.home-2 .fx-card--h2 .fx-quick {
        transform: translateX(8px);
        transition-delay: .04s;
    }

    [dir="rtl"] body.home-2 .fx-card--h2 .fx-quick {
        transform: translateX(-8px);
    }
}

/* ---------- full-width photo banner (no text) ---------- */
.h2-banner {
    width: 100%;
}

.h2-banner__link {
    display: block;
    width: 100%;
    overflow: hidden;
}

.h2-banner__link img {
    display: block;
    width: 100%;
    height: clamp(220px, 32vw, 520px);
    object-fit: cover;
    object-position: 50% 50%;
    transition: transform 1.2s var(--fx-ease);
}

.h2-banner__link:hover img {
    transform: scale(1.03);
}

/* ---------- newsletter: deep-green band with produce ---------- */
body.home-2 .subscribe-news {
    padding: var(--fx-section) 0 0;
}

body.home-2 .subscribe-news .newsletter-bg {
    padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 72px);
    border-radius: 36px 36px 0 0;
    background:
        url("../images/cat-vegetables.png") right 6% bottom -40px / auto 115% no-repeat,
        radial-gradient(60% 120% at 90% 50%, color-mix(in srgb, var(--buttons) 65%, #7DC24B) 0%, transparent 70%),
        var(--fx-deep) !important;
}

[dir="rtl"] body.home-2 .subscribe-news .newsletter-bg {
    background-position: left 6% bottom -40px, 10% 50%, 0 0 !important;
}

body.home-2 .subscribe-news .newsletter-bg .row {
    max-width: 760px;
}

body.home-2 .subscribe-news .newsletter-bg .row > [class*="col-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

body.home-2 .subscribe-news .main_title {
    color: #FFFFFF;
    font-size: clamp(30px, 3.4vw, 46px);
}

body.home-2 .subscribe-news .sub-title {
    margin: 10px 0 26px;
    color: rgba(255, 255, 255, .8);
}

body.home-2 .newsletter-box {
    max-width: 520px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: none;
}

body.home-2 .subscribe-news .newsletter-box input {
    color: #FFFFFF;
}

body.home-2 .subscribe-news .newsletter-box input::placeholder {
    color: rgba(255, 255, 255, .7) !important;
}

body.home-2 .subscribe-news .newsletter-box button {
    background: var(--fx-lime);
    color: #0F1512;
}

body.home-2 .subscribe-news .newsletter-box button:hover {
    background: #FFFFFF;
}

body.home-2 .fx-newsletter-done {
    color: var(--fx-lime);
}

/* ---------- footer: dark green, joined to the newsletter band ---------- */
body.home-2 .footer {
    background: #0A2416;
    color: rgba(255, 255, 255, .78);
}

body.home-2 .subscribe-news .container + *,
body.home-2 .subscribe-news {
    margin-bottom: 0;
}

body.home-2 .footer,
body.home-2 .footer p,
body.home-2 .footer li,
body.home-2 .footer .link a,
body.home-2 .footer .copy-right,
body.home-2 .footer .site-link a {
    color: rgba(255, 255, 255, .72);
}

body.home-2 .footer .title,
body.home-2 .footer .copy-right a,
body.home-2 .footer .social-icon .title {
    color: #FFFFFF;
}

body.home-2 .footer .link a:hover,
body.home-2 .footer .site-link a:hover,
body.home-2 .footer a:hover {
    color: var(--fx-lime);
}

body.home-2 .footer em {
    color: var(--fx-lime);
}

body.home-2 .footer hr {
    border-color: rgba(255, 255, 255, .12);
}

body.home-2 .footer ul.social-icon li a {
    background: rgba(255, 255, 255, .08);
}

body.home-2 .footer ul.social-icon li em.fab {
    color: #FFFFFF;
}

body.home-2 .footer ul.social-icon li a:hover {
    background: var(--fx-lime);
}

body.home-2 .footer ul.social-icon li a:hover em {
    color: #0F1512;
}

body.home-2 .footer .f-logo img {
    max-width: 170px;
}

body.home-2.dark-mode .footer .f-logo a {
    padding: 0;
    background: none;
}

body.home-2 .footer .payment_icon img {
    filter: brightness(1.05);
    opacity: .9;
}

@media (max-width: 767.98px) {
    body.home-2 .subscribe-news .newsletter-bg {
        padding-bottom: 200px;
        background-position: center bottom -30px, 50% 80%, 0 0 !important;
        background-size: auto 220px, auto, auto !important;
    }
}

body.home-2 .footer .address-footer a,
body.home-2 .footer .address-footer p {
    color: rgba(255, 255, 255, .78) !important;
}

body.home-2 .subscribe-news .newsletter-inner > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

[dir="rtl"] body.market :is(.h2-perks__list h2, .h2-post h3) {
    unicode-bidi: plaintext;
}

/* ==========================================================================
   Newsletter (.fx-news) – split card: copy + form | produce art + coupon
   (Home 2 keeps its own dark-green version)
   ========================================================================== */
body.market .fx-news {
    padding: var(--fx-section) 0;
    background: transparent !important;
}

.fx-news__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    padding: clamp(28px, 4vw, 56px);
    border-radius: 36px;
    background: var(--fx-lime-soft);
    overflow: hidden;
    isolation: isolate;
}

/* soft dotted texture on the copy side */
.fx-news__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(color-mix(in srgb, var(--buttons) 18%, transparent) 1.2px, transparent 1.6px);
    background-size: 20px 20px;
    -webkit-mask: linear-gradient(100deg, #000 0%, transparent 55%);
    mask: linear-gradient(100deg, #000 0%, transparent 55%);
}

[dir="rtl"] .fx-news__card::before {
    -webkit-mask: linear-gradient(260deg, #000 0%, transparent 55%);
    mask: linear-gradient(260deg, #000 0%, transparent 55%);
}

.fx-news__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 18px;
    background: var(--buttons);
    color: #FFFFFF;
    font-size: 24px;
    rotate: -6deg;
}

.fx-news__copy h2 {
    margin: 0 0 14px;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.06;
    text-wrap: balance;
}

.fx-news__copy h2 span {
    color: var(--fx-brand-text);
}

.fx-news__copy > p {
    margin: 0 0 26px;
    max-width: 46ch;
    color: var(--fx-muted);
    font-size: 17px;
    line-height: 1.55;
}

.fx-news__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 540px;
    padding: 6px;
    padding-inline-start: 50px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--fx-card);
    box-shadow: 0 18px 40px -26px rgba(15, 21, 18, .5);
    transition: border-color .25s, box-shadow .25s;
}

.fx-news__form:focus-within {
    border-color: var(--buttons);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--buttons) 15%, transparent);
}

.fx-news__form > em {
    position: absolute;
    inset-inline-start: 20px;
    top: 50%;
    translate: 0 -50%;
    color: var(--fx-muted);
    font-size: 19px;
}

.fx-news__form input {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: 0;
    background: transparent;
    color: var(--fx-text);
    font-size: 16px;
    outline: 0;
}

.fx-news__form input::placeholder {
    color: var(--fx-muted);
}

.fx-news__form .fx-btn {
    flex: none;
    min-height: 50px;
}

.fx-news__points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 500;
}

.fx-news__points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fx-news__points em {
    color: var(--fx-brand-text);
    font-size: 17px;
}

body.market .fx-news .fx-newsletter-done {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--buttons);
    color: #FFFFFF;
    font-size: 14px;
    animation: fx-rise .5s var(--fx-ease) both;
}

/* art */
.fx-news__art {
    position: relative;
    aspect-ratio: 1 / .82;
    max-width: 460px;
    width: 100%;
    justify-self: center;
}

.fx-news__ring {
    position: absolute;
    inset: 6% 10%;
    border-radius: 50%;
    background: var(--fx-lime);
}

.fx-news__ring::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--buttons) 40%, transparent);
    animation: fx-spin 50s linear infinite;
}

.fx-news__img {
    position: absolute;
    object-fit: contain;
    transition: transform .6s var(--fx-ease);
}

.fx-news__img--a {
    width: 46%;
    left: 27%;
    top: 16%;
}

.fx-news__img--b {
    width: 28%;
    inset-inline-start: 2%;
    top: 4%;
    animation: fx-veg-float 6s ease-in-out infinite;
}

.fx-news__img--c {
    width: 32%;
    inset-inline-end: 0;
    bottom: 6%;
    animation: fx-veg-float 7s -2s ease-in-out infinite;
}

/* coupon ticket with notched sides */
.fx-news__coupon {
    position: absolute;
    inset-inline-start: 4%;
    bottom: 4%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-radius: 16px;
    background: var(--fx-card);
    color: var(--fx-text);
    box-shadow: 0 20px 40px -22px rgba(15, 21, 18, .55);
    -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
    rotate: -6deg;
    transition: transform .6s var(--fx-ease), rotate .4s var(--fx-spring);
}

.fx-news__coupon:hover {
    rotate: 0deg;
}

.fx-news__coupon strong {
    display: flex;
    align-items: baseline;
    gap: 3px;
    padding-inline-end: 14px;
    border-inline-end: 2px dashed var(--fx-line);
    color: var(--fx-sale);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.fx-news__coupon strong small {
    font-size: 13px;
    font-weight: 800;
}

.fx-news__coupon span {
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    .fx-news__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-news__art {
        max-width: 380px;
    }
}

@media (max-width: 575.98px) {
    .fx-news__card {
        border-radius: 26px;
    }

    .fx-news__form {
        flex-wrap: wrap;
        padding: 6px;
        padding-inline-start: 46px;
        border-radius: 26px;
    }

    .fx-news__form > em {
        top: 31px;
    }

    .fx-news__form .fx-btn {
        flex: 1 1 100%;
    }
}

body.market.dark-mode .fx-news__ring {
    background: color-mix(in srgb, var(--fx-lime) 30%, var(--fx-card));
}

[dir="rtl"] body.market :is(.fx-news__copy > p, .fx-news__coupon strong) {
    unicode-bidi: plaintext;
}

[dir="rtl"] .fx-news__coupon strong {
    direction: ltr;
}

@media (max-width: 575.98px) {
    .fx-news__form .fx-btn {
        margin-inline-start: -40px;
    }
}

/* ==========================================================================
   HOME 2 newsletter (.h2-news) – centred band with rings + floating produce,
   joined to the dark-green footer
   ========================================================================== */
body.home-2 .h2-news {
    padding: var(--fx-section) 0 0;
    background: transparent !important;
}

.h2-news__band {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 460px;
    padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 48px);
    border-radius: 40px 40px 0 0;
    background:
        radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--buttons) 70%, #7DC24B) 0%, transparent 70%),
        var(--fx-deep);
    color: #FFFFFF;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

/* concentric rings */
.h2-news__rings {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.h2-news__rings span {
    grid-area: 1 / 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
    animation: h2-ring 6s ease-in-out infinite;
}

.h2-news__rings span:nth-child(1) { width: 420px; height: 420px; }
.h2-news__rings span:nth-child(2) { width: 680px; height: 680px; animation-delay: -2s; }
.h2-news__rings span:nth-child(3) { width: 940px; height: 940px; animation-delay: -4s; }

@keyframes h2-ring {
    50% { transform: scale(1.04); border-color: rgba(212, 245, 138, .16); }
}

/* floating produce bubbles */
.h2-news__bubble {
    position: absolute;
    display: grid;
    place-items: center;
    width: clamp(84px, 9vw, 128px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6);
    transition: transform .6s var(--fx-ease);
}

.h2-news__bubble img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    animation: fx-veg-float 6s ease-in-out infinite;
}

.h2-news__bubble--1 { top: 14%; inset-inline-start: 7%; }
.h2-news__bubble--2 { bottom: 12%; inset-inline-start: 13%; width: clamp(64px, 6.5vw, 92px); }
.h2-news__bubble--3 { top: 12%; inset-inline-end: 9%; width: clamp(70px, 7vw, 100px); }
.h2-news__bubble--4 { bottom: 14%; inset-inline-end: 6%; }

.h2-news__bubble--2 img { animation-delay: -1.5s; }
.h2-news__bubble--3 img { animation-delay: -3s; }
.h2-news__bubble--4 img { animation-delay: -4.5s; }

/* content */
.h2-news__content {
    max-width: 600px;
}

.h2-news__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(212, 245, 138, .14);
    border: 1px solid rgba(212, 245, 138, .3);
    color: var(--fx-lime);
    font-size: 14px;
    font-weight: 600;
}

.h2-news h2 {
    margin: 0 0 16px;
    color: #FFFFFF;
    font-size: clamp(36px, 4.6vw, 64px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    text-wrap: balance;
}

.h2-news h2 span {
    color: var(--fx-lime);
}

.h2-news__lead {
    margin: 0 auto 32px;
    max-width: 44ch;
    color: rgba(255, 255, 255, .78);
    font-size: 17px;
    line-height: 1.55;
}

.h2-news__form {
    display: flex;
    gap: 8px;
    max-width: 520px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6);
    transition: box-shadow .25s;
}

.h2-news__form:focus-within {
    box-shadow: 0 0 0 5px rgba(212, 245, 138, .4), 0 24px 50px -24px rgba(0, 0, 0, .6);
}

.h2-news__form input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding-inline: 22px 8px;
    border: 0;
    background: transparent;
    color: #0F1512;
    font-size: 16px;
    outline: 0;
}

.h2-news__form input::placeholder {
    color: #6B756F;
}

.h2-news__form button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--fx-lime);
    color: #0F1512;
    font-size: 15px;
    font-weight: 700;
    transition: background-color .25s, transform .3s var(--fx-spring);
}

.h2-news__form button:hover {
    background: var(--buttons);
    color: #FFFFFF;
}

.h2-news__form button:active {
    transform: scale(.97);
}

.h2-news__perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}

.h2-news__perks li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.h2-news__perks em {
    color: var(--fx-lime);
    font-size: 16px;
}

body.home-2 .h2-news .fx-newsletter-done {
    display: inline-flex;
    margin: 18px 0 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--fx-lime);
    color: #0F1512;
    font-size: 14px;
    font-weight: 600;
    animation: fx-rise .5s var(--fx-ease) both;
}

@media (max-width: 991.98px) {
    .h2-news__bubble--1 { top: 4%; inset-inline-start: 4%; }
    .h2-news__bubble--3 { top: 4%; inset-inline-end: 4%; }
    .h2-news__bubble--2,
    .h2-news__bubble--4 { display: none; }

    .h2-news__band {
        padding-top: 130px;
    }
}

@media (max-width: 575.98px) {
    .h2-news__band {
        border-radius: 28px 28px 0 0;
        padding-inline: 18px;
    }

    .h2-news__form {
        flex-direction: column;
        border-radius: 24px;
    }

    .h2-news__form button {
        justify-content: center;
        height: 50px;
    }
}

[dir="rtl"] body.home-2 :is(.h2-news__lead, .h2-news__pill) {
    unicode-bidi: plaintext;
}

/* Home 2 newsletter: detached floating card (not joined to the footer) */
body.home-2 .h2-news {
    padding: var(--fx-section) 0;
}

body.home-2 .h2-news .h2-news__band {
    border-radius: 40px;
    box-shadow: 0 40px 80px -40px rgba(10, 36, 22, .55);
}

@media (max-width: 575.98px) {
    body.home-2 .h2-news .h2-news__band {
        border-radius: 28px;
    }
}

/* ==========================================================================
   Home 2 hero: full-bleed (edge to edge), copy aligned to the page container
   ========================================================================== */
.h2-hero {
    --h2-gutter: max(22px, calc((100vw - 1320px) / 2 + 12px));
    padding-top: 0;
}

.h2-hero > .container {
    max-width: none;
    padding-inline: 0;
}

.h2-hero .h2-slider {
    border-radius: 0;
    min-height: clamp(480px, 40vw, 680px);
}

.h2-hero .h2-slide {
    padding-inline: var(--h2-gutter);
}

.h2-hero .h2-slider__ui {
    inset-inline: var(--h2-gutter);
}

/* stronger wash so the copy stays readable over any photo */
.h2-hero .h2-slide::before {
    background: linear-gradient(90deg,
            rgba(244, 243, 239, .97) 0%,
            rgba(244, 243, 239, .93) calc(var(--h2-gutter) + 420px),
            rgba(244, 243, 239, .55) calc(var(--h2-gutter) + 620px),
            rgba(244, 243, 239, 0) calc(var(--h2-gutter) + 820px));
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .h2-hero {
        --h2-gutter: max(22px, calc((100vw - 1140px) / 2 + 12px));
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .h2-hero {
        --h2-gutter: max(22px, calc((100vw - 960px) / 2 + 12px));
    }
}

@media (max-width: 767.98px) {
    .h2-hero .h2-slide {
        padding-inline: 22px;
    }

    .h2-hero .h2-slider__ui {
        inset-inline: 22px;
    }

    .h2-hero .h2-slide::before {
        background: linear-gradient(180deg, rgba(244, 243, 239, 0) 0, rgba(244, 243, 239, 0) 200px, #F4F3EF 290px);
    }
}

/* wash must paint above the slide photo */
.h2-slide {
    position: relative;
    isolation: isolate;
}

/* ==========================================================================
   Home 2 header layout: centred logo
   row 1: phone | logo | account     row 2 (light strip): categories | nav | search
   ========================================================================== */
@media (min-width: 992px) {
    body.home-2 .main_header {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "top top top"
            "phone logo account"
            "cats nav search";
        column-gap: 24px;
    }

    body.home-2 .connect-with-us {
        grid-area: phone;
        display: block !important;
        justify-self: start;
        padding-bottom: 0;
    }

    body.home-2 .main_header .logo {
        grid-area: logo;
        justify-self: center;
        padding-block: 18px;
    }

    body.home-2 .main_header .logo img {
        max-height: 52px;
    }

    body.home-2 .header_account_area {
        grid-area: account;
        justify-self: end;
    }

    body.home-2 .categories_menu {
        grid-area: cats;
        justify-self: start;
        padding-block: 10px;
    }

    body.home-2 .main_menu_content {
        grid-area: nav;
        justify-self: center;
        padding-block: 0;
    }

    body.home-2 .searchbar_content.mobile_screen_none {
        grid-area: search;
        justify-self: end;
        width: 100%;
        max-width: 320px;
        padding-block: 10px;
    }

    /* compact search: no category segment in the strip */
    body.home-2 .searchbar_content.mobile_screen_none .category_hover_content {
        display: none;
    }

    body.home-2 .searchbar_content.mobile_screen_none form {
        background: var(--fx-card);
    }

    body.home-2 .searchbar_content.mobile_screen_none .search-box {
        height: 44px;
    }

    body.home-2 .searchbar_content.mobile_screen_none .search-box button {
        width: 36px;
        height: 36px;
    }

    /* light strip behind row 2, full width */
    body.home-2 header {
        background:
            linear-gradient(var(--fx-line), var(--fx-line)) 0 var(--h2-row2, 125px) / 100% 1px no-repeat,
            linear-gradient(var(--fx-surface), var(--fx-surface)) 0 var(--h2-row2, 125px) / 100% 100% no-repeat,
            var(--fx-bg);
    }

    body.home-2 .main_menu_content nav > ul > li > a {
        line-height: 64px;
    }

    body.home-2 .title_content {
        height: 44px;
    }

    body.home-2 .connect-with-us p {
        padding-inline-start: 44px;
    }

    body.home-2.fx-stuck .main_header .logo {
        padding-block: 8px;
    }

    body.home-2.fx-stuck .main_header .logo img {
        max-height: 40px;
    }

    body.home-2.fx-stuck .main_menu_content nav > ul > li > a {
        line-height: 52px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.home-2 .main_header {
        grid-template-areas:
            "top top top"
            "phone logo account"
            "nav nav search";
    }

    body.home-2 .connect-with-us {
        display: block !important;
    }

    body.home-2 .categories_menu {
        display: none !important;
    }

    body.home-2 .main_menu_content {
        justify-self: start;
    }
}

/* Home 2 header: search flush with the right edge, one corner radius (12px) */
@media (min-width: 992px) {
    body.home-2 .searchbar_content.mobile_screen_none {
        justify-self: end !important;
        margin-inline-start: auto;
        width: 320px;
        max-width: 100%;
    }
}

body.home-2 .title_content,
body.home-2 .searchbar_content form,
body.home-2 .header_bottom .searchbar_content form,
body.home-2 .categories_content_toggle.fx-cm,
body.home-2 .fx-dd {
    border-radius: 12px;
}

body.home-2 .search-box,
body.home-2 .search-box input {
    border-radius: 12px;
}

body.home-2 .search-box button,
body.home-2 .header_account_list {
    border-radius: 9px;
}

@media (min-width: 992px) {
    body.home-2 .searchbar_content.mobile_screen_none {
        margin-inline-end: 0;
    }
}

/* ==========================================================================
   Home 2 – brands spacing + image banner as a parallax section break
   ========================================================================== */
.h2-brands__title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 36px;
    color: var(--fx-muted);
    font-size: 14px;
    letter-spacing: .1em;
}

.h2-brands__title::before,
.h2-brands__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fx-line);
}

.h2-brands__strip {
    padding-block: 4px;
}

.h2-brands ul {
    gap: 20px;
    padding-inline: 10px;
}

.h2-brands li {
    width: 196px;
    height: 104px;
    border: 1px solid var(--fx-line);
    background: var(--fx-card);
    transition: border-color .3s, background-color .3s;
}

.h2-brands li img {
    max-width: 130px;
    filter: grayscale(1);
    opacity: .85;
}

.h2-brands li:hover {
    border-color: var(--buttons);
    background: var(--fx-brand-soft);
}

/* banner: shorter band, photo drifts slower than the page (market.js) */
.h2-banner__link {
    position: relative;
    height: clamp(240px, 26vw, 420px);
}

.h2-banner__link img {
    position: absolute;
    left: 0;
    top: -15%;
    width: 100%;
    height: 130%;
    object-fit: cover;
    transform: translate3d(0, var(--h2-px, 0px), 0);
    transition: none;
    will-change: transform;
}

.h2-banner__link:hover img {
    transform: translate3d(0, var(--h2-px, 0px), 0);
}

.h2-banner__link::after {
    /* soft vignette so the band blends into the white page */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, transparent 25%, transparent 75%, rgba(0, 0, 0, .12) 100%);
    pointer-events: none;
}

/* Home 2 brands: heading-to-logos spacing (overrides a later h2 margin reset) */
body.home-2 .h2-brands .h2-brands__title {
    margin: 0 0 40px;
    line-height: 1.4;
}

body.home-2 .h2-brands {
    padding-bottom: 8px;
}

/* ==========================================================================
   HOME 3 (index-3.html) – same theme, own layouts (.h3-*), scoped body.home-3
   ========================================================================== */

/* ---------- hero: open category list + split slider ---------- */
.h3-hero {
    padding-top: clamp(16px, 2vw, 28px);
}

.h3-hero__grid {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: var(--fx-gap);
    align-items: stretch;
}

.h3-cats {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: 1px solid var(--fx-line);
    border-radius: 28px;
    background: var(--fx-card);
}

body.market .h3-cats__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    padding: 16px 18px;
    border-radius: 20px;
    background: var(--fx-deep);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.h3-cats__title em {
    color: var(--fx-lime);
    font-size: 20px;
}

.h3-cats ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.h3-cats li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 12px 7px 8px;
    border-radius: 16px;
    color: var(--fx-text) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .25s, padding .35s var(--fx-ease);
}

.h3-cats li a img {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 12px;
    background: var(--fx-surface);
    object-fit: contain;
    transition: transform .4s var(--fx-spring), background-color .25s;
}

.h3-cats li a span {
    flex: 1;
    min-width: 0;
}

.h3-cats li a small {
    display: block;
    margin-top: 2px;
    color: var(--fx-muted);
    font-size: 12px;
    font-weight: 500;
}

.h3-cats li a > em {
    color: var(--fx-muted);
    font-size: 16px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s, transform .35s var(--fx-ease);
}

[dir="rtl"] .h3-cats li a > em {
    transform: translateX(6px) scaleX(-1);
}

.h3-cats li a:hover,
.h3-cats li a:focus-visible {
    background: var(--fx-lime-soft);
    padding-inline-start: 12px;
}

.h3-cats li a:hover img,
.h3-cats li a:focus-visible img {
    background: var(--fx-lime);
    transform: rotate(-8deg) scale(1.06);
}

.h3-cats li a:hover > em,
.h3-cats li a:focus-visible > em {
    color: var(--fx-brand-text);
    opacity: 1;
    transform: none;
}

[dir="rtl"] .h3-cats li a:hover > em,
[dir="rtl"] .h3-cats li a:focus-visible > em {
    transform: scaleX(-1);
}

.h3-cats__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 14px 18px;
    border-top: 1px dashed var(--fx-line);
    color: var(--fx-brand-text) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.h3-cats__more em {
    transition: transform .35s var(--fx-ease);
}

.h3-cats__more:hover em {
    transform: translateX(4px);
}

[dir="rtl"] .h3-cats__more em {
    transform: scaleX(-1);
}

[dir="rtl"] .h3-cats__more:hover em {
    transform: translateX(-4px) scaleX(-1);
}

/* slider: copy on a cream ground, photo fades in from the end side */
.h3-slider {
    min-height: 100%;
    border-radius: 28px;
    background: #F4F3EF;
}

.h3-slider .h3-slide {
    position: relative;
    isolation: isolate;
    min-height: 560px;
    padding: clamp(32px, 4vw, 64px);
    padding-bottom: 104px;
    background: #F4F3EF;
}

[dir="rtl"] .h3-slider .h3-slide,
[dir="rtl"] .h3-slider .h3-slide > * {
    transform: none;
}

[dir="rtl"] .h3-slider .h3-slide {
    direction: rtl;
}

.h3-slider .h3-slide::before {
    content: none;
}

.h3-slide__img {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: -1;
    width: 64%;
    height: 100%;
    object-fit: cover;
    -webkit-mask: linear-gradient(to right, transparent 0%, #000 34%);
    mask: linear-gradient(to right, transparent 0%, #000 34%);
    transform: scale(1.08);
    transition: transform 6s linear;
}

[dir="rtl"] .h3-slide__img {
    -webkit-mask: linear-gradient(to left, transparent 0%, #000 34%);
    mask: linear-gradient(to left, transparent 0%, #000 34%);
}

.h3-slide.is-active .h3-slide__img {
    transform: scale(1);
}

.h3-slider .h2-slide__copy {
    max-width: 440px;
}

.h3-slider .h2-slide__title {
    font-size: clamp(38px, 4vw, 60px);
}

.h3-slider .h2-slide__text {
    font-size: 17px;
    max-width: 34ch;
}

.h3-slider .h2-slider__ui {
    inset-inline: clamp(32px, 4vw, 64px);
    bottom: 32px;
}

/* ---------- perks: deep-green band ---------- */
.h3-perks {
    padding-top: var(--fx-gap);
}

.h3-perks__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 10px;
    list-style: none;
    border-radius: 28px;
    background: var(--fx-deep);
}

.h3-perks__list li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 20px;
    transition: background-color .3s;
}

.h3-perks__list li + li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: rgba(255, 255, 255, .14);
}

.h3-perks__list li:hover {
    background: rgba(255, 255, 255, .06);
}

.h3-perks__icon {
    flex: none;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 22px;
    transition: transform .5s var(--fx-spring);
}

.h3-perks__list li:hover .h3-perks__icon {
    transform: rotate(-12deg) scale(1.08);
}

body.market .h3-perks__list h2 {
    margin: 0 0 3px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.h3-perks__list p {
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

/* ---------- promo duo ---------- */
.h3-duo-sec {
    padding-top: clamp(32px, 4vw, 56px);
}

.h3-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fx-gap);
}

.h3-promo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 260px;
    padding: clamp(24px, 3vw, 40px);
    border-radius: 28px;
    background: var(--tint);
    overflow: hidden;
    isolation: isolate;
}

.h3-promo--lime {
    --tint: var(--fx-lime-soft);
    --blob: var(--fx-lime);
}

.h3-promo--sun {
    --tint: #FFF6DA;
    --blob: #FFE08A;
}

.h3-promo::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-end: -60px;
    top: 50%;
    width: 300px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blob);
    translate: 0 -50%;
    transition: scale .7s var(--fx-ease);
}

.h3-promo:hover::before {
    scale: 1.12;
}

.h3-promo__copy {
    position: relative;
    max-width: 58%;
}

.h3-promo__kicker {
    margin: 0 0 10px;
    color: var(--fx-brand-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.market .h3-promo h3 {
    margin: 0 0 22px;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.h3-promo h3 span {
    color: var(--fx-brand-text);
}

.h3-promo--sun h3 span {
    color: var(--fx-sale);
}

.h3-promo__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.h3-promo .fx-btn {
    min-height: 48px;
    padding: 0 22px;
    font-size: 15px;
}

.h3-promo > img {
    position: absolute;
    inset-inline-end: 3%;
    top: 50%;
    width: 36%;
    max-width: 210px;
    translate: 0 -50%;
    transition: transform .7s var(--fx-ease);
}

.h3-promo:hover > img {
    transform: rotate(-6deg) scale(1.06);
}

/* tap-to-copy coupon chip */
.h3-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px;
    border: 1.5px dashed color-mix(in srgb, var(--fx-text) 35%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    transition: background-color .25s, border-color .25s, transform .3s var(--fx-spring);
}

.h3-code:hover {
    background: #FFFFFF;
    border-color: var(--fx-text);
}

.h3-code:active {
    transform: scale(.96);
}

.h3-code.is-copied {
    border-style: solid;
    border-color: var(--fx-brand);
    background: var(--fx-brand);
    color: #FFFFFF;
}

/* ---------- new arrivals: spotlight + grid ---------- */
.h3-spot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
    gap: var(--fx-gap);
    align-items: start;
}

.h3-spot__hero {
    position: sticky;
    top: calc(var(--fx-header-h, 0px) + 20px);
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: 28px;
    background: var(--fx-lime-soft);
}

.h3-spot__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.h3-spot__hero .fx-like {
    position: static;
}

.h3-spot__media {
    display: block;
    margin: 12px 0 18px;
    border-radius: 22px;
    background: var(--fx-photo);
    overflow: hidden;
}

.h3-spot__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform .8s var(--fx-ease);
}

.h3-spot__hero:hover .h3-spot__media img {
    transform: scale(1.06);
}

.h3-spot__meta,
.h3-mini__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--fx-muted);
    font-size: 13px;
}

body.market .h3-spot__hero h3 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.h3-spot__hero h3 a,
.h3-deal h3 a,
.h3-mini h4 a {
    color: var(--fx-text) !important;
    text-decoration: none;
}

.h3-spot__text {
    margin: 0 0 20px;
    color: var(--fx-muted);
    font-size: 15px;
    line-height: 1.5;
}

.h3-spot__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.h3-spot__foot .fx-price strong {
    font-size: 26px;
}

.h3-spot__foot .fx-add,
.h3-spot__foot .fx-stepper,
.h3-deal .fx-add,
.h3-deal .fx-stepper {
    height: 48px;
    min-height: 48px;
    padding: 0 22px;
    background: var(--fx-brand);
    color: #FFFFFF !important;
    font-size: 15px;
}

.h3-spot__foot .fx-stepper,
.h3-deal .fx-stepper {
    min-width: 140px;
    padding: 0;
    grid-template-columns: 44px 1fr 44px;
}

.h3-spot__foot .fx-stepper button,
.h3-deal .fx-stepper button {
    height: 48px;
}

/* ---------- deals of the week: dark band ---------- */
.h3-deals {
    position: relative;
    padding: clamp(28px, 4vw, 56px);
    border-radius: 36px;
    background:
        radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--buttons) 60%, #7DC24B) 0%, transparent 70%),
        var(--fx-deep);
    color: #FFFFFF;
    overflow: hidden;
    isolation: isolate;
}

.h3-deals::before {
    /* faint dot grid */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask: linear-gradient(180deg, #000, transparent 70%);
    mask: linear-gradient(180deg, #000, transparent 70%);
}

.h3-deals__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-bottom: clamp(24px, 3vw, 36px);
}

.h3-deals__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(212, 245, 138, .14);
    color: var(--fx-lime);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.market .h3-deals h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(32px, 3.6vw, 50px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.h3-deals__timer .countdown_area {
    display: flex;
    gap: 8px;
}

.h3-deals__timer .single_countdown {
    position: relative;
    width: 76px;
    height: auto;
    margin: 0;
    padding: 12px 4px 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
    text-align: center;
}

body.market .h3-deals__timer .countdown_number {
    color: var(--fx-lime) !important;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

body.market .h3-deals__timer .countdown_title {
    color: rgba(255, 255, 255, .7) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.h3-deals__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fx-gap);
}

.h3-deal {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 14px;
    border-radius: 26px;
    background: var(--fx-card);
    color: var(--fx-text);
    transition: transform .5s var(--fx-ease);
}

.h3-deal:hover {
    transform: translateY(-4px);
}

.h3-deal__media {
    position: relative;
    display: block;
    height: 100%;
    min-height: 200px;
    border-radius: 18px;
    background: var(--fx-photo);
    overflow: hidden;
}

.h3-deal__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform .8s var(--fx-ease);
}

.h3-deal:hover .h3-deal__media img {
    transform: scale(1.08);
}

.h3-deal__media .fx-badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
}

body.market .h3-deal h3 {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.h3-deal .fx-price {
    margin-bottom: 14px;
}

.h3-stock {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 10px;
    margin-bottom: 16px;
    color: var(--fx-muted);
    font-size: 12px;
}

.h3-stock b {
    color: var(--fx-text);
}

.h3-stock i {
    flex: 1 1 100%;
    height: 6px;
    border-radius: 6px;
    background:
        linear-gradient(90deg, var(--fx-sale), #F59E0B) 0 0 / var(--p) 100% no-repeat,
        var(--fx-surface);
}

[dir="rtl"] .h3-stock i {
    background:
        linear-gradient(270deg, var(--fx-sale), #F59E0B) 100% 0 / var(--p) 100% no-repeat,
        var(--fx-surface);
}

.h3-deal .fx-add,
.h3-deal .fx-stepper {
    width: 100%;
}

/* ---------- ticker: two crossing marquee bands ---------- */
.h3-ticker {
    position: relative;
    display: grid;
    margin-top: var(--fx-section);
    padding-block: 34px;
    overflow: hidden;
}

.h3-ticker__band {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    margin-inline: -20px;
    padding-block: 18px;
    background: var(--fx-lime);
    color: var(--fx-deep);
    rotate: -2deg;
}

.h3-ticker__band--back {
    z-index: 0;
    background: var(--fx-deep);
    color: #FFFFFF;
    rotate: 2deg;
}

.h3-ticker__track {
    display: flex;
    width: max-content;
    animation: h3-marquee 38s linear infinite;
}

.h3-ticker__band--back .h3-ticker__track {
    animation-direction: reverse;
}

.h3-ticker:hover .h3-ticker__track {
    animation-play-state: paused;
}

.h3-ticker ul {
    display: flex;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h3-ticker li {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding-inline-end: 28px;
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.h3-ticker li em {
    font-size: .9em;
    opacity: .8;
}

@keyframes h3-marquee {
    to { transform: translateX(-50%); }
}

[dir="rtl"] .h3-ticker__track {
    animation-name: h3-marquee-rtl;
}

@keyframes h3-marquee-rtl {
    to { transform: translateX(50%); }
}

/* ---------- product lists ---------- */
.h3-lists {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fx-gap);
}

.h3-list {
    padding: 22px;
    border: 1px solid var(--fx-line);
    border-radius: 28px;
    background: var(--fx-card);
}

body.market .h3-list__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fx-line);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.h3-list__title::after {
    content: "";
    flex: none;
    width: 28px;
    height: 4px;
    margin-inline-start: auto;
    border-radius: 4px;
    background: var(--fx-lime);
}

.h3-list:nth-child(2) .h3-list__title::after { background: #FFC531; }
.h3-list:nth-child(3) .h3-list__title::after { background: var(--fx-sale); }

.h3-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.h3-mini {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    margin-inline: -10px;
    border-radius: 18px;
    transition: background-color .25s;
}

.h3-mini:hover {
    background: var(--fx-surface);
}

.h3-mini__img {
    flex: none;
    width: 78px;
    height: 78px;
    border-radius: 14px;
    background: var(--fx-photo);
    overflow: hidden;
}

.h3-mini__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform .6s var(--fx-ease);
}

.h3-mini:hover .h3-mini__img img {
    transform: scale(1.1);
}

.h3-mini__body {
    flex: 1;
    min-width: 0;
}

body.market .h3-mini h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.h3-mini__meta {
    margin-bottom: 4px;
    font-size: 12px;
}

.h3-mini .fx-price {
    margin: 0;
}

.h3-mini .fx-price strong {
    font-size: 17px;
}

/* ---------- popular categories: round tiles ---------- */
.h3-center-head {
    margin-bottom: clamp(28px, 3vw, 44px);
    text-align: center;
}

body.market .h3-center-head h2 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.h3-center-head p {
    margin: 12px 0 0;
    color: var(--fx-muted);
}

.h3-circles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--fx-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.h3-circles a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--fx-text) !important;
    text-align: center;
    text-decoration: none;
}

.h3-circles__disc {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--tint);
    transition: background-color .4s;
}

.h3-circles__disc::after {
    /* dashed ring that spins in on hover */
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--tint) 45%, var(--fx-deep));
    opacity: 0;
    scale: .92;
    transition: opacity .3s, scale .5s var(--fx-spring);
}

.h3-circles a:hover .h3-circles__disc::after,
.h3-circles a:focus-visible .h3-circles__disc::after {
    opacity: 1;
    scale: 1;
    animation: fx-spin 14s linear infinite;
}

.h3-circles__disc img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    transition: transform .6s var(--fx-spring);
}

.h3-circles a:hover .h3-circles__disc img,
.h3-circles a:focus-visible .h3-circles__disc img {
    transform: translateY(-6px) scale(1.08) rotate(-4deg);
}

.h3-circles strong {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.h3-circles small {
    margin-top: 2px;
    color: var(--fx-muted);
    font-size: 13px;
}

/* ---------- brands: statement + logo grid ---------- */
.h3-brands__wrap {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 2fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}

body.market .h3-brands__intro h2 {
    margin: 0 0 14px;
    font-size: clamp(28px, 2.8vw, 38px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.h3-brands__intro p {
    margin: 0;
    color: var(--fx-muted);
    font-size: 16px;
}

.h3-brands__intro strong {
    color: var(--fx-text);
}

.h3-brands__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--fx-line);
    border-radius: 28px;
    overflow: hidden;
}

.h3-brands__grid li {
    display: grid;
    place-items: center;
    height: 120px;
    padding: 20px;
    margin: 0 -1px -1px 0;
    border-inline-end: 1px solid var(--fx-line);
    border-bottom: 1px solid var(--fx-line);
    transition: background-color .3s;
}

.h3-brands__grid li:hover {
    background: var(--fx-lime-soft);
}

.h3-brands__grid img {
    width: 100%;
    max-width: 170px;
    max-height: 64px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .75;
    transition: filter .3s, opacity .3s, transform .4s var(--fx-spring);
}

.h3-brands__grid li:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
}

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    .h3-hero__grid {
        grid-template-columns: 252px minmax(0, 1fr);
    }

    .h3-deals__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h3-deal:nth-child(3) {
        display: none;
    }

    .h3-lists {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h3-list:nth-child(3) {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .h3-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .h3-cats {
        display: none;
    }

    .h3-perks__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h3-perks__list li:nth-child(3)::before {
        content: none;
    }

    .h3-duo,
    .h3-spot,
    .h3-brands__wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .h3-spot__hero {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 24px;
    }

    .h3-spot__hero > :not(.h3-spot__media) {
        grid-column: 2;
    }

    .h3-spot__media {
        grid-column: 1;
        grid-row: 1 / span 6;
        margin: 0;
    }

    .h3-spot__top {
        align-self: start;
    }

    .h3-circles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 32px;
    }

    .h3-brands__intro {
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .h3-slider .h3-slide {
        min-height: 560px;
        align-items: flex-end;
        padding: 24px 22px 96px;
        background-size: initial;
    }

    .h3-slide__img {
        inset-inline: 0;
        width: 100%;
        height: 260px;
        -webkit-mask: linear-gradient(180deg, #000 60%, transparent);
        mask: linear-gradient(180deg, #000 60%, transparent);
    }

    [dir="rtl"] .h3-slide__img {
        -webkit-mask: linear-gradient(180deg, #000 60%, transparent);
        mask: linear-gradient(180deg, #000 60%, transparent);
    }

    .h3-slider .h2-slide__title {
        font-size: 34px;
    }

    .h3-slider .h2-slider__ui {
        inset-inline: 22px;
    }

    .h3-deals__list,
    .h3-lists {
        grid-template-columns: minmax(0, 1fr);
    }

    .h3-deal:nth-child(3),
    .h3-list:nth-child(3) {
        display: block;
    }

    .h3-deal:nth-child(3) {
        display: grid;
    }

    .h3-spot__hero {
        display: flex;
    }

    .h3-spot__media {
        margin: 12px 0 18px;
    }

    .h3-brands__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .h3-perks__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .h3-perks__list li + li::before {
        inset-inline: 22px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }

    .h3-perks__list li:nth-child(3)::before {
        content: "";
    }

    .h3-promo {
        min-height: 0;
        padding-bottom: 170px;
        align-items: flex-start;
    }

    .h3-promo__copy {
        max-width: none;
    }

    .h3-promo > img {
        top: auto;
        bottom: -10px;
        width: 170px;
        translate: none;
    }

    .h3-promo::before {
        top: auto;
        bottom: -120px;
        translate: none;
    }

    .h3-deal {
        grid-template-columns: 38% minmax(0, 1fr);
    }

    .h3-deals__timer .single_countdown {
        width: 66px;
    }

    .h3-circles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .h3-ticker__track {
        animation: none;
    }
}

body.market.dark-mode .h3-promo--sun {
    --tint: color-mix(in srgb, #FFC531 14%, var(--fx-card));
    --blob: color-mix(in srgb, #FFC531 30%, var(--fx-card));
}

body.market.dark-mode .h3-promo--lime {
    --tint: color-mix(in srgb, var(--fx-lime) 12%, var(--fx-card));
    --blob: color-mix(in srgb, var(--fx-lime) 28%, var(--fx-card));
}

body.market.dark-mode .h3-slider,
body.market.dark-mode .h3-slider .h3-slide {
    background: #F4F3EF;
}

[dir="rtl"] body.market :is(.h2-slide__text, .h3-spot__text, .h3-perks__list p, .h3-brands__intro p, .h3-center-head p, .h3-stock) {
    unicode-bidi: plaintext;
}

/* Home 3 – mobile fixes: photo stacked above the copy, coupon chips above cutouts,
   full-width Add buttons in the 2-column grid */
.h3-promo__copy {
    z-index: 1;
}

@media (max-width: 767.98px) {
    .h3-slider .h3-slide {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: 0;
        padding-top: 0;
    }

    .h3-slide__img {
        position: relative;
        z-index: 0;
        flex: none;
        width: calc(100% + 44px);
        height: 230px;
        margin: 0 -22px 8px;
    }

    .h3-slider .h2-slide__sub {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    .h3-promo {
        padding-bottom: 180px;
    }

    .h3-promo > img {
        width: 160px;
    }

    .h3-spot__grid .fx-card__foot {
        flex-wrap: wrap;
        gap: 8px;
    }

    .h3-spot__grid .fx-add,
    .h3-spot__grid .fx-stepper {
        width: 100%;
    }
}

[dir="rtl"] body.market :is(.h3-perks__list h2, .h3-cats li a small, .h3-spot__meta, .h3-mini__meta, .h3-circles small) {
    unicode-bidi: plaintext;
}

.h3-code {
    background: #FFFFFF;
}

/* ==========================================================================
   HOME 3 header – "floating island": slim announcement row on a cream band,
   then one white rounded bar: logo | categories | nav | search | account
   ========================================================================== */
body.home-3 header {
    --h3-band: #F3F4EE;
    background: var(--h3-band);
    border: 0;
}

body.home-3 .header_top {
    display: block !important;
    background: transparent;
    box-shadow: none;
}

body.home-3 .header_top p,
body.home-3 .header_top a,
body.home-3 .header_top em {
    color: var(--fx-text) !important;
}

body.home-3 .header_top .price-marquee p {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

body.home-3 .header_top .price-marquee p::before {
    content: "New";
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.home-3 .header_top .header_social_icon a {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: background-color .2s;
}

body.home-3 .header_top .header_social_icon a:hover {
    background: #FFFFFF;
}

body.home-3 .header_top a:hover em {
    color: var(--fx-brand-text) !important;
}

/* nav: dark text, pill hover, lime pill on the active item */
body.home-3 .main_menu_content nav > ul > li > a,
body.home-3 .main_menu_content nav > ul > li > a em,
body.home-3 .main_menu_content nav > ul > li:hover > a,
body.home-3 .main_menu_content nav > ul > li > a.active,
body.home-3 .main_menu_content nav > ul > li > a.active em {
    color: var(--fx-text);
}

body.home-3 .main_menu_content nav > ul > li > a.active {
    color: var(--fx-deep);
}

/* account icons: dark on light, cart as a filled green button */
body.home-3 .header_account_list,
body.home-3 .header_account_list a,
body.home-3 .header_account_list em,
body.home-3 .header_account_list button {
    color: var(--fx-text) !important;
}

body.home-3 .header_account_list span.item_count {
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-weight: 700;
}

body.home-3 .connect-with-us p,
body.home-3 .connect-with-us p a {
    color: var(--fx-text);
}

body.home-3 .connect-with-us p::before {
    filter: none;
}

/* search: soft pill */
body.home-3 .searchbar_content form {
    background: var(--h3-band);
    border: 1px solid transparent;
    border-radius: 999px;
}

body.home-3 .searchbar_content form:focus-within {
    background: #FFFFFF;
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

body.home-3 .search-box,
body.home-3 .search-box input {
    border-radius: 999px;
    color: var(--fx-text);
}

body.home-3 .search-box button {
    border-radius: 50%;
    background: var(--fx-deep);
    color: var(--fx-lime);
}

body.home-3 .search-box button:hover {
    background: var(--buttons);
    color: #FFFFFF;
}

/* categories: deep pill with a lime icon */
body.home-3 .title_content {
    border-radius: 999px;
    background: var(--fx-deep);
}

body.home-3 .title_content:hover {
    background: var(--buttons);
}

body.home-3 .title_content h2 {
    color: #FFFFFF;
}

body.home-3 .title_content em {
    color: var(--fx-lime);
}

body.home-3 .title_content h2::before {
    content: none;
}

body.home-3 .categories_content_toggle.fx-cm,
body.home-3 .fx-dd {
    border-radius: 20px;
}

@media (min-width: 992px) {
    body.home-3 .main_header {
        position: relative;
        isolation: isolate;
        grid-template-columns: auto auto minmax(0, 1fr) minmax(200px, 280px) auto;
        grid-template-areas:
            "top top top top top"
            "logo cats nav search account";
        column-gap: clamp(12px, 1.4vw, 22px);
        padding-bottom: 14px;
    }

    /* the island */
    body.home-3 .main_header::before {
        content: "";
        grid-row: 2;
        grid-column: 1 / -1;
        align-self: stretch;
        z-index: -1;
        border: 1px solid var(--fx-line);
        border-radius: 999px;
        background: #FFFFFF;
        transition: box-shadow .35s var(--fx-ease);
    }

    body.home-3 .header_top {
        grid-area: top;
        margin-inline: 0;
        clip-path: none;
    }

    body.home-3 .header_top .row {
        padding-block: 9px !important;
    }

    body.home-3 .main_header .logo {
        grid-area: logo;
        padding-block: 12px;
        padding-inline-start: 22px;
    }

    body.home-3 .main_header .logo img {
        max-height: 42px;
        width: auto;
    }

    body.home-3 .categories_menu {
        grid-area: cats;
        padding: 0;
    }

    body.home-3 .title_content {
        height: 46px;
    }

    body.home-3 .title_content h2 {
        line-height: 46px;
    }

    body.home-3 .main_menu_content {
        grid-area: nav;
        justify-self: center;
        padding: 0;
    }

    body.home-3 .main_menu_content nav > ul {
        display: flex;
        gap: 2px;
    }

    body.home-3 .main_menu_content nav > ul > li > a {
        position: relative;
        line-height: 40px;
        padding-inline: 14px;
        border-radius: 999px;
        transition: background-color .2s, color .2s;
    }

    body.home-3 .main_menu_content nav > ul > li:hover > a {
        background: var(--h3-band);
    }

    body.home-3 .main_menu_content nav > ul > li > a.active {
        background: var(--fx-lime-soft);
    }

    body.home-3 .main_menu_content nav > ul > li > a::after {
        content: none;
    }

    body.home-3 .searchbar_content.mobile_screen_none {
        grid-area: search;
        justify-self: end;
        width: 100%;
        margin: 0;
    }

    body.home-3 .searchbar_content.mobile_screen_none .category_hover_content {
        display: none;
    }

    body.home-3 .searchbar_content.mobile_screen_none .search-box {
        height: 46px;
        padding-inline-start: 20px;
    }

    body.home-3 .searchbar_content.mobile_screen_none .search-box button {
        width: 36px;
        height: 36px;
        margin-inline-end: 5px;
    }

    body.home-3 .header_account_area {
        grid-area: account;
        padding-inline-end: 8px;
    }

    body.home-3 .header_account_list {
        width: 46px;
        height: 46px;
        background: var(--h3-band);
    }

    body.home-3 .header_account_list:hover {
        background: var(--fx-lime-soft) !important;
    }

    body.home-3 .header_account_list.mini_cart_wrapper {
        background: var(--fx-deep);
    }

    body.home-3 .header_account_list.mini_cart_wrapper > a,
    body.home-3 .header_account_list.mini_cart_wrapper > a em {
        color: #FFFFFF !important;
    }

    body.home-3 .header_account_list.mini_cart_wrapper:hover {
        background: var(--buttons) !important;
    }

    body.home-3 .header_account_list span.item_count {
        top: -3px;
        inset-inline-end: -3px;
        box-shadow: 0 0 0 2px #FFFFFF;
    }

    body.home-3 .connect-with-us {
        display: none !important;
    }

    /* stuck: drop the announcement row, island floats over the page */
    body.home-3.fx-stuck header {
        background: transparent;
    }

    body.home-3.fx-stuck .header_top {
        display: none !important;
    }

    body.home-3.fx-stuck .main_header {
        padding-block: 10px;
    }

    body.home-3.fx-stuck .main_header::before {
        border-color: var(--fx-line);
        background: rgba(255, 255, 255, .9);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        backdrop-filter: blur(14px) saturate(1.4);
        box-shadow: 0 18px 40px -22px rgba(15, 21, 18, .35);
    }

    body.home-3.fx-stuck .main_header .logo {
        padding-block: 8px;
    }

    body.home-3.fx-stuck .main_header .logo img {
        max-height: 36px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.home-3 .main_header {
        grid-template-columns: auto minmax(0, 1fr) minmax(170px, 220px) auto;
        grid-template-areas:
            "top top top top"
            "logo nav search account";
    }

    body.home-3 .categories_menu {
        display: none !important;
    }

    body.home-3 .main_menu_content nav > ul > li > a {
        padding-inline: 10px;
    }
}

/* mobile: light bars, dark icons */
@media (max-width: 991.98px) {
    body.home-3 .header_top {
        display: none !important;
    }

    body.home-3 .middle_content,
    body.home-3 .header_bottom {
        background: var(--h3-band);
    }

    body.home-3 .header_bottom .searchbar_content form {
        background: #FFFFFF;
        border: 1px solid var(--fx-line);
    }

    body.home-3 .mobile_canvas_open a {
        background: #FFFFFF;
        color: var(--fx-text);
    }

    body.home-3 .main_header .logo a {
        background: transparent;
    }
}

/* dark mode */
body.home-3.dark-mode header {
    --h3-band: #121815;
}

body.home-3.dark-mode .main_header::before {
    background: var(--fx-card);
}

body.home-3.dark-mode.fx-stuck .main_header::before {
    background: color-mix(in srgb, var(--fx-card) 90%, transparent);
}

body.home-3.dark-mode .main_header .logo a {
    padding: 4px 10px;
    background: #FFFFFF;
    border-radius: 999px;
}

body.home-3.dark-mode .header_account_list span.item_count {
    box-shadow: 0 0 0 2px var(--fx-card);
}

[dir="rtl"] body.home-3 .header_top .price-marquee p {
    unicode-bidi: plaintext;
}

/* Home 3 header: blur/shadow belong to the island only, no full-width rule */
@media (min-width: 992px) {
    body.home-3 header::after {
        content: none;
    }

    body.home-3.fx-stuck header {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        pointer-events: none;
    }

    body.home-3.fx-stuck .main_header > * {
        pointer-events: auto;
    }
}

/* ==========================================================================
   HOME 3 header – nav at the true centre of the bar (≥1400px), logo on the
   same centre line as the other items
   ========================================================================== */
@media (min-width: 992px) {
    body.home-3 .main_header .logo {
        display: flex;
        align-items: center;
        align-self: stretch;
    }

    body.home-3 .main_header .logo a,
    body.home-3 .main_header .logo img {
        display: block;
    }
}

@media (min-width: 1400px) {
    body.home-3 .main_header {
        grid-template-columns: auto auto minmax(0, 1fr) 240px auto;
        grid-template-areas:
            "top top top top top"
            "logo cats . search account";
    }

    /* absolutely positioned grid item: its containing block is the whole bar row,
       so justify-self centres it on the page */
    body.home-3 .main_menu_content {
        position: absolute;
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: center;
        align-self: center;
    }
}

/* ==========================================================================
   HOME 3 footer (.h3-footer) – cream band that mirrors the header: statement
   + CTA, one white card with the link columns, bottom bar, giant wordmark
   ========================================================================== */
.h3-footer {
    --h3-band: #F3F4EE;
    position: relative;
    margin-top: 0;
    padding-top: clamp(48px, 6vw, 80px);
    background: var(--h3-band);
    color: var(--fx-text);
    overflow: hidden;
}

.h3-footer__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 40px;
    margin-bottom: clamp(28px, 3.5vw, 44px);
}

body.market .h3-footer__title {
    margin: 0;
    max-width: 20ch;
    color: var(--fx-text);
    font-size: clamp(34px, 4.4vw, 62px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}

.h3-footer__title span {
    color: var(--fx-brand-text);
}

.h3-footer__cta {
    flex: none;
}

/* the card */
.h3-footer__card {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
    gap: 32px clamp(20px, 3vw, 48px);
    padding: clamp(28px, 3.5vw, 48px);
    border: 1px solid var(--fx-line);
    border-radius: 32px;
    background: #FFFFFF;
}

.h3-footer__logo img {
    display: block;
    max-height: 46px;
    width: auto;
}

.h3-footer__brand p {
    margin: 18px 0 22px;
    max-width: 34ch;
    color: var(--fx-muted);
    font-size: 15px;
    line-height: 1.6;
}

.h3-footer__social {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h3-footer__social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--h3-band);
    color: var(--fx-text) !important;
    font-size: 17px;
    text-decoration: none;
    transition: background-color .25s, color .25s, transform .4s var(--fx-spring);
}

.h3-footer__social a em {
    color: inherit !important;
}

.h3-footer__social a:hover {
    background: var(--fx-deep);
    color: var(--fx-lime) !important;
    transform: translateY(-3px) rotate(-8deg);
}

body.market .h3-footer__col h3 {
    margin: 4px 0 18px;
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.h3-footer__col ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h3-footer__col a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fx-muted) !important;
    font-size: 15px;
    text-decoration: none;
    transition: color .2s, transform .35s var(--fx-ease);
}

.h3-footer__col:not(.h3-footer__contact) a::before {
    /* lime dot slides in on hover */
    content: "";
    width: 0;
    height: 6px;
    border-radius: 6px;
    background: var(--fx-lime);
    transition: width .35s var(--fx-ease);
}

.h3-footer__col a:hover {
    color: var(--fx-text) !important;
}

.h3-footer__col:not(.h3-footer__contact) a:hover::before {
    width: 14px;
}

.h3-footer__contact ul {
    gap: 14px;
}

.h3-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.h3-footer__ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-size: 16px;
}

.h3-footer__ic em {
    color: inherit !important;
}

.h3-footer__contact p {
    margin: 0;
    padding-top: 7px;
    color: var(--fx-muted);
    font-size: 14px;
    line-height: 1.5;
}

.h3-footer__contact p a {
    font-size: 14px;
}

/* bottom bar */
.h3-footer__bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-block: 24px;
}

.h3-footer__copy {
    margin: 0;
    color: var(--fx-muted);
    font-size: 14px;
}

.h3-footer__copy a {
    color: var(--fx-text) !important;
    font-weight: 600;
}

.h3-footer__pay {
    height: 26px;
    width: auto;
    margin-inline-start: auto;
}

.h3-footer__top-btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--fx-deep);
    color: var(--fx-lime);
    font-size: 18px;
    transition: background-color .25s, transform .4s var(--fx-spring);
}

.h3-footer__top-btn em {
    rotate: -90deg;
}

.h3-footer__top-btn:hover {
    background: var(--buttons);
    transform: translateY(-4px);
}

/* giant wordmark peeking out of the bottom edge */
.h3-footer__word {
    margin: 0 0 -0.24em;
    color: color-mix(in srgb, var(--buttons) 22%, var(--h3-band));
    -webkit-mask: linear-gradient(180deg, #000 0%, transparent 92%);
    mask: linear-gradient(180deg, #000 0%, transparent 92%);
    font-size: clamp(90px, 21vw, 330px);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: .9;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

@media (max-width: 1199.98px) {
    .h3-footer__card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .h3-footer__brand,
    .h3-footer__contact {
        grid-column: span 3;
    }

    .h3-footer__brand {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px 32px;
    }

    .h3-footer__brand p {
        margin: 0;
        flex: 1 1 320px;
    }

    .h3-footer__contact ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .h3-footer__card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 26px;
    }

    .h3-footer__brand,
    .h3-footer__contact {
        grid-column: 1 / -1;
    }

    .h3-footer__brand {
        display: block;
    }

    .h3-footer__brand p {
        margin: 16px 0 20px;
    }

    .h3-footer__contact ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .h3-footer__bottom {
        justify-content: center;
        text-align: center;
    }

    .h3-footer__pay {
        margin-inline-start: 0;
    }
}

body.market.dark-mode .h3-footer {
    --h3-band: #121815;
}

body.market.dark-mode .h3-footer__card {
    background: var(--fx-card);
}

body.market.dark-mode .h3-footer__logo {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #FFFFFF;
}

[dir="rtl"] body.market :is(.h3-footer__brand p, .h3-footer__contact p, .h3-footer__copy) {
    unicode-bidi: plaintext;
}

/* Home 3 header: spacing below/around the bar lives on <header>, so the grid row
   is exactly the bar (keeps the centred nav on the same line as the rest) */
@media (min-width: 992px) {
    body.home-3 header {
        padding-bottom: 14px;
    }

    body.home-3 .main_header,
    body.home-3.fx-stuck .main_header {
        padding-block: 0;
    }

    body.home-3.fx-stuck header {
        padding-block: 10px;
    }
}

[dir="rtl"] .h3-footer__top-btn em {
    rotate: 90deg;
}

[dir="rtl"] body.market .h3-footer__title {
    unicode-bidi: plaintext;
}

/* footer links: no indent until the hover dot appears */
.h3-footer__col a {
    gap: 0;
}

.h3-footer__col:not(.h3-footer__contact) a::before {
    transition: width .35s var(--fx-ease), margin .35s var(--fx-ease);
}

.h3-footer__col:not(.h3-footer__contact) a:hover::before {
    margin-inline-end: 8px;
}

/* ==========================================================================
   HOME 3 – new arrivals card (.fx-card--h3): one tinted panel per category,
   unit line, round "+" button that opens into "+ Add" on hover
   ========================================================================== */
.fx-card--h3 {
    --tint: var(--fx-surface);
    padding: 8px;
    border-radius: 26px;
    background: var(--tint);
    transition: transform .5s var(--fx-ease), background-color .35s;
}

.fx-card--h3 .fx-card__media {
    aspect-ratio: 1 / .86;
    border-radius: 20px;
    background: transparent;
}

.fx-card--h3 .fx-card__media img {
    padding: 8%;
    mix-blend-mode: multiply;
    transition: transform .8s var(--fx-spring);
}

.fx-card--h3:hover {
    transform: translateY(-4px);
    background: color-mix(in srgb, var(--tint) 80%, #C9D9B4);
}

.fx-card--h3:hover .fx-card__media img {
    transform: scale(1.08) rotate(-4deg);
}

.fx-card--h3 .fx-like,
.fx-card--h3 .fx-quick {
    background: rgba(255, 255, 255, .85);
}

.fx-card--h3 .fx-card__body {
    gap: 4px;
    padding: 6px 10px 8px;
}

.fx-card--h3 .fx-card__name {
    font-size: 17px;
    font-weight: 700;
}

.h3-card__unit {
    margin: 0;
    color: var(--fx-muted);
    font-size: 13px;
}

.fx-card--h3 .fx-card__foot {
    padding-top: 12px;
}

.fx-card--h3 .fx-price strong {
    font-size: 20px;
}

/* round add button that grows into a pill on hover */
.fx-card--h3 .fx-add {
    gap: 0;
    min-width: 0;
    width: auto;
    height: 44px;
    padding: 0 13px;
    background: var(--fx-deep);
    color: #FFFFFF !important;
    font-size: 14px;
    overflow: hidden;
    transition: background-color .25s, gap .35s var(--fx-ease), padding .35s var(--fx-ease), transform .3s var(--fx-spring);
}

.fx-card--h3 .fx-add em {
    color: var(--fx-lime);
    font-size: 18px;
    transition: transform .4s var(--fx-spring);
}

.fx-card--h3 .fx-add span {
    max-width: 0;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .35s var(--fx-ease), opacity .25s;
}

.fx-card--h3:hover .fx-add,
.fx-card--h3 .fx-add:focus-visible {
    gap: 6px;
    padding-inline: 14px 18px;
}

.fx-card--h3:hover .fx-add span,
.fx-card--h3 .fx-add:focus-visible span {
    max-width: 48px;
    opacity: 1;
}

.fx-card--h3 .fx-add:hover {
    background: var(--buttons);
}

.fx-card--h3 .fx-add:hover em {
    transform: rotate(90deg);
}

.fx-card--h3 .fx-stepper {
    height: 44px;
    min-width: 108px;
    background: var(--fx-deep);
}

.fx-card--h3 .fx-stepper button {
    height: 44px;
}

body.market.dark-mode .fx-card--h3 {
    background: color-mix(in srgb, var(--tint) 14%, var(--fx-card));
}

body.market.dark-mode .fx-card--h3 .fx-card__media {
    background: var(--fx-photo);
}

@media (max-width: 575.98px) {
    .fx-card--h3 .fx-add {
        width: 100%;
        gap: 6px;
    }

    .fx-card--h3 .fx-add span {
        max-width: 48px;
        opacity: 1;
    }
}

/* ==========================================================================
   HOME 3 newsletter (.h3-news) – coupon ticket: lime gift stub | perforation |
   deep-green form panel
   ========================================================================== */
body.market .h3-news {
    padding: var(--fx-section) 0;
    background: transparent !important;
}

.h3-news__ticket {
    --stub: 34%;
    --notch: 18px;
    position: relative;
    display: grid;
    grid-template-columns: var(--stub) minmax(0, 1fr);
    border-radius: 32px;
    overflow: hidden;
    /* half-circle notches cut where stub and panel meet */
    -webkit-mask:
        radial-gradient(circle var(--notch) at var(--stub) 0, transparent 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at var(--stub) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at var(--stub) 0, transparent 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at var(--stub) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}

[dir="rtl"] .h3-news__ticket {
    -webkit-mask:
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}

/* stub */
.h3-news__stub {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: clamp(28px, 3.5vw, 48px);
    background: var(--fx-lime);
    color: var(--fx-deep);
    overflow: hidden;
    isolation: isolate;
}

.h3-news__stub::after {
    /* perforation */
    content: "";
    position: absolute;
    inset-block: 28px;
    inset-inline-end: 0;
    border-inline-end: 2px dashed color-mix(in srgb, var(--fx-deep) 35%, transparent);
}

.h3-news__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.h3-news__off {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.h3-news__off strong {
    font-size: clamp(64px, 7vw, 104px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: .9;
}

.h3-news__off span {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.h3-news__code {
    border-color: color-mix(in srgb, var(--fx-deep) 45%, transparent);
}

.h3-news__img {
    position: absolute;
    z-index: -1;
    inset-inline-end: -26px;
    bottom: -22px;
    width: 46%;
    max-width: 190px;
    opacity: .95;
    transition: transform .7s var(--fx-spring);
}

.h3-news__ticket:hover .h3-news__img {
    transform: rotate(-10deg) scale(1.06);
}

/* main panel */
.h3-news__main {
    position: relative;
    padding: clamp(28px, 4vw, 56px);
    background:
        radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--buttons) 55%, #7DC24B) 0%, transparent 65%),
        var(--fx-deep);
    color: #FFFFFF;
}

body.market .h3-news h2 {
    margin: 0 0 12px;
    color: #FFFFFF;
    font-size: clamp(32px, 3.6vw, 50px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.h3-news h2 span {
    color: var(--fx-lime);
}

.h3-news__lead {
    margin: 0 0 26px;
    max-width: 46ch;
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    line-height: 1.55;
}

.h3-news__form {
    position: relative;
    display: flex;
    gap: 6px;
    max-width: 560px;
    padding: 6px;
    padding-inline-start: 48px;
    border-radius: 999px;
    background: #FFFFFF;
    transition: box-shadow .25s;
}

.h3-news__form:focus-within {
    box-shadow: 0 0 0 5px rgba(212, 245, 138, .4);
}

.h3-news__form > em {
    position: absolute;
    inset-inline-start: 20px;
    top: 50%;
    translate: 0 -50%;
    color: var(--fx-muted);
    font-size: 18px;
}

.h3-news__form input {
    flex: 1;
    min-width: 0;
    height: 50px;
    border: 0;
    background: transparent;
    color: #0F1512;
    font-size: 16px;
    outline: 0;
}

.h3-news__form input::placeholder {
    color: #6B756F;
}

.h3-news__form button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 15px;
    font-weight: 700;
    transition: background-color .25s, color .25s, transform .3s var(--fx-spring);
}

.h3-news__form button:hover {
    background: var(--buttons);
    color: #FFFFFF;
}

.h3-news__form button:active {
    transform: scale(.97);
}

.h3-news__perks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}

.h3-news__perks li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.h3-news__perks em {
    color: var(--fx-lime);
}

body.market .h3-news .fx-newsletter-done {
    display: inline-flex;
    margin: 16px 0 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 14px;
    font-weight: 600;
    animation: fx-rise .5s var(--fx-ease) both;
}

@media (max-width: 991.98px) {
    .h3-news__ticket {
        --stub: 220px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--stub) auto;
        -webkit-mask:
            radial-gradient(circle var(--notch) at 0 var(--stub), transparent 98%, #000) left / 51% 100% no-repeat,
            radial-gradient(circle var(--notch) at 100% var(--stub), transparent 98%, #000) right / 51% 100% no-repeat;
        mask:
            radial-gradient(circle var(--notch) at 0 var(--stub), transparent 98%, #000) left / 51% 100% no-repeat,
            radial-gradient(circle var(--notch) at 100% var(--stub), transparent 98%, #000) right / 51% 100% no-repeat;
    }

    [dir="rtl"] .h3-news__ticket {
        -webkit-mask:
            radial-gradient(circle var(--notch) at 0 var(--stub), transparent 98%, #000) left / 51% 100% no-repeat,
            radial-gradient(circle var(--notch) at 100% var(--stub), transparent 98%, #000) right / 51% 100% no-repeat;
        mask:
            radial-gradient(circle var(--notch) at 0 var(--stub), transparent 98%, #000) left / 51% 100% no-repeat,
            radial-gradient(circle var(--notch) at 100% var(--stub), transparent 98%, #000) right / 51% 100% no-repeat;
    }

    .h3-news__stub::after {
        inset-block: auto 0;
        inset-inline: 28px;
        border-inline-end: 0;
        border-bottom: 2px dashed color-mix(in srgb, var(--fx-deep) 35%, transparent);
    }

    .h3-news__img {
        width: 170px;
    }
}

@media (max-width: 575.98px) {
    .h3-news__ticket {
        border-radius: 26px;
    }

    .h3-news__form {
        flex-wrap: wrap;
        padding-inline-start: 6px;
        border-radius: 26px;
    }

    .h3-news__form > em {
        display: none;
    }

    .h3-news__form input {
        padding-inline: 16px;
    }

    .h3-news__form button {
        flex: 1 1 100%;
        justify-content: center;
        height: 50px;
    }
}

[dir="rtl"] body.market :is(.h3-news__lead, .h3-news__off span, .h3-card__unit) {
    unicode-bidi: plaintext;
}

/* photo backdrop → white, so multiply leaves only the card tint */
.fx-card--h3 .fx-card__media img {
    filter: brightness(1.06) contrast(1.03);
}

body.market.dark-mode .fx-card--h3 .fx-card__media img {
    filter: none;
}

/* Home 3 new arrivals: neutral cards (no category tints) – white card, thin
   border, photo on the shared light photo ground */
.fx-card--h3 {
    --tint: var(--fx-card);
    border: 1px solid var(--fx-line);
    background: var(--fx-card);
}

.fx-card--h3:hover {
    background: var(--fx-card);
    border-color: color-mix(in srgb, var(--fx-text) 22%, var(--fx-line));
}

.fx-card--h3 .fx-card__media {
    background: var(--fx-photo);
}

.fx-card--h3 .fx-card__media img {
    filter: none;
}

body.market.dark-mode .fx-card--h3 {
    background: var(--fx-card);
}

.h3-spot__hero {
    border: 1px solid var(--fx-line);
    background: var(--fx-card);
}

.h3-spot__media {
    background: var(--fx-photo);
}

.fx-card--h3 .fx-card__media img {
    mix-blend-mode: normal;
}

/* ==========================================================================
   HOME 4 (index-4.html) – photo-led and restrained (reference: UI8 "Uptech").
   One ink colour for text, green only on buttons, photography from UI8 RAW.
   Scoped body.home-4.
   ========================================================================== */
html:has(body.home-4) {
    scrollbar-width: thin;
    scrollbar-color: rgb(127 127 127 / .35) transparent;
}

body.home-4::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
body.home-4::-webkit-scrollbar-track { background: transparent; }
body.home-4::-webkit-scrollbar-thumb { background: rgb(127 127 127 / .35); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
body.home-4::-webkit-scrollbar-thumb:hover { background-color: rgb(127 127 127 / .55); }

body.home-4 {
    --h4-ink: #121614;
    --h4-muted: #5B635E;
    --h4-surface: #F4F4F1;
    --h4-r: 24px;
    font-size: 17px;
}

body.home-4 :is(h1, h2, h3) {
    text-wrap: balance;
}

body.home-4 p {
    text-wrap: pretty;
}

/* ---------- buttons ---------- */
.h4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border: 1.5px solid var(--buttons);
    border-radius: 999px;
    background: var(--buttons);
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}

.h4-btn:hover {
    background: var(--fx-deep);
    border-color: var(--fx-deep);
}

.h4-btn:active {
    transform: scale(.98);
}

.h4-btn--ghost {
    background: transparent;
    border-color: color-mix(in srgb, var(--h4-ink) 25%, transparent);
    color: var(--h4-ink) !important;
}

.h4-btn--ghost:hover {
    background: var(--h4-ink);
    border-color: var(--h4-ink);
    color: #FFFFFF !important;
}

.h4-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--h4-ink) !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.h4-link em {
    transition: transform .2s;
}

.h4-link:hover em {
    transform: translateX(4px);
}

[dir="rtl"] .h4-link em {
    transform: scaleX(-1);
}

[dir="rtl"] .h4-link:hover em {
    transform: translateX(-4px) scaleX(-1);
}

/* ---------- section rhythm + heads ---------- */
.h4-section {
    padding-top: clamp(72px, 9vw, 128px);
}

.h4-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin-bottom: clamp(28px, 3vw, 44px);
}

body.market .h4-head h2,
body.market .h4-story h2,
body.market .h4-news h2 {
    margin: 0;
    color: var(--h4-ink);
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

/* ---------- hero ---------- */
.h4-hero {
    padding-top: clamp(40px, 5vw, 72px);
}

.h4-hero__head {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    gap: 24px clamp(32px, 5vw, 80px);
    margin-bottom: clamp(32px, 4vw, 48px);
}

body.market .h4-hero h1 {
    margin: 0;
    color: var(--h4-ink);
    font-size: clamp(44px, 6vw, 88px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
}

.h4-hero__side p {
    margin: 0 0 24px;
    max-width: 36ch;
    color: var(--h4-muted);
    font-size: 18px;
    line-height: 1.55;
}

.h4-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.h4-hero__photo {
    margin: 0;
    border-radius: 32px;
    overflow: hidden;
    background: var(--h4-surface);
}

.h4-hero__photo img {
    display: block;
    width: 100%;
    height: clamp(320px, 42vw, 620px);
    object-fit: cover;
    object-position: 50% 55%;
}

/* ---------- categories ---------- */
.h4-cats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.h4-cat {
    display: flex;
    flex-direction: column;
    color: var(--h4-ink) !important;
    text-decoration: none;
}

.h4-cat__img {
    display: block;
    aspect-ratio: 1;
    margin-bottom: 14px;
    border-radius: var(--h4-r);
    background: #FFFFFF;
    overflow: hidden;
    outline: 1px solid rgb(0 0 0 / .06);
    outline-offset: -1px;
}

.h4-cat__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.h4-cat:hover .h4-cat__img img {
    transform: scale(1.05);
}

.h4-cat__name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.h4-cat__count {
    color: var(--h4-muted);
    font-size: 15px;
}

/* ---------- product card ---------- */
.h4-tabs {
    background: var(--h4-surface);
}

.h4-tabs button {
    font-size: 15px;
}

.fx-card--h4 {
    background: transparent;
}

.fx-card--h4 .fx-card__media {
    aspect-ratio: 1;
    border-radius: var(--h4-r);
    background: #FFFFFF;
    outline: 1px solid rgb(0 0 0 / .06);
    outline-offset: -1px;
}

.fx-card--h4 .fx-card__media img {
    padding: 0;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.fx-card--h4:hover .fx-card__media img {
    transform: scale(1.04);
}

.fx-card--h4 .fx-card__body {
    gap: 4px;
    padding: 16px 2px 0;
}

.fx-card--h4 .fx-card__name {
    font-size: 18px;
    font-weight: 600;
}

.fx-card--h4 .fx-card__meta {
    font-size: 15px;
    color: var(--h4-muted);
}

.fx-card--h4 .fx-price strong {
    font-size: 19px;
    font-weight: 600;
    color: var(--h4-ink);
}

.fx-card--h4.fx-card--sale .fx-price strong {
    color: var(--h4-ink);
}

.fx-card--h4 .fx-price del {
    font-size: 15px;
}

.fx-card--h4 .fx-add {
    height: 44px;
    min-width: 76px;
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--h4-ink) 22%, transparent);
    color: var(--h4-ink) !important;
    font-size: 15px;
}

.fx-card--h4 .fx-add:hover {
    background: var(--buttons);
    border-color: var(--buttons);
    color: #FFFFFF !important;
}

.fx-card--h4 .fx-stepper,
.fx-card--h4 .fx-stepper button {
    height: 44px;
}

/* ---------- story ---------- */
.h4-story {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
}

.h4-story__photo {
    margin: 0;
    border-radius: 32px;
    overflow: hidden;
}

.h4-story__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.h4-story__copy p {
    margin: 20px 0 32px;
    max-width: 38ch;
    color: var(--h4-muted);
    font-size: 18px;
    line-height: 1.55;
}

/* ---------- newsletter ---------- */
body.market .h4-news {
    padding: clamp(72px, 9vw, 128px) 0;
    background: transparent !important;
}

.h4-news__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px 48px;
    padding: clamp(32px, 5vw, 64px);
    border-radius: 32px;
    background: var(--h4-surface);
}

.h4-news__form {
    display: flex;
    gap: 8px;
    padding: 6px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: #FFFFFF;
    transition: border-color .2s, box-shadow .2s;
}

.h4-news__form:focus-within {
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

.h4-news__form input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding-inline: 20px 8px;
    border: 0;
    background: transparent;
    color: var(--h4-ink);
    font-size: 17px;
    outline: 0;
}

.h4-news__form input::placeholder {
    color: var(--h4-muted);
}

.h4-news__form .h4-btn {
    flex: none;
}

body.market .h4-news .fx-newsletter-done {
    grid-column: 2;
    margin: 0;
    color: var(--h4-ink);
    font-size: 16px;
    font-weight: 600;
}

/* ---------- footer ---------- */
.h4-footer {
    padding: clamp(56px, 7vw, 96px) 0 32px;
    background: var(--h4-ink);
    color: rgb(255 255 255 / .72);
}

.h4-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 48px;
}

.h4-footer__brand img {
    display: block;
    max-height: 44px;
    width: auto;
    margin-bottom: 20px;
}

.h4-footer__brand p {
    margin: 0 0 12px;
    max-width: 34ch;
    font-size: 15px;
    line-height: 1.6;
}

.h4-footer a {
    color: rgb(255 255 255 / .72) !important;
    text-decoration: none;
    transition: color .2s;
}

.h4-footer a:hover {
    color: #FFFFFF !important;
}

body.market .h4-footer__col h3 {
    margin: 4px 0 16px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
}

.h4-footer__col ul,
.h4-footer__social {
    margin: 0;
    padding: 0;
    list-style: none;
}

.h4-footer__col li {
    margin-bottom: 10px;
    font-size: 15px;
}

.h4-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 28px;
    border-top: 1px solid rgb(255 255 255 / .12);
}

.h4-footer__bottom p {
    margin: 0;
    font-size: 15px;
}

.h4-footer__social {
    display: flex;
    gap: 8px;
}

.h4-footer__social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgb(255 255 255 / .08);
    font-size: 17px;
}

.h4-footer__social a em {
    color: inherit !important;
}

.h4-footer__social a:hover {
    background: rgb(255 255 255 / .16);
}

/* ---------- header: white, one row (logo | nav | search + account) ---------- */
body.home-4 header {
    background: #FFFFFF;
    border: 0;
}

body.home-4 .header_top {
    display: none !important;
}

body.home-4 .main_menu_content nav > ul > li > a,
body.home-4 .main_menu_content nav > ul > li > a em,
body.home-4 .main_menu_content nav > ul > li:hover > a,
body.home-4 .main_menu_content nav > ul > li > a.active,
body.home-4 .main_menu_content nav > ul > li > a.active em {
    color: var(--h4-ink);
}

body.home-4 .main_menu_content nav > ul > li > a {
    font-size: 16px;
    font-weight: 500;
}

body.home-4 .main_menu_content nav > ul > li > a::after {
    background: var(--h4-ink);
    height: 1.5px;
}

body.home-4 .header_account_list,
body.home-4 .header_account_list a,
body.home-4 .header_account_list em,
body.home-4 .header_account_list button {
    color: var(--h4-ink) !important;
}

body.home-4 .header_account_list span.item_count {
    background: var(--buttons);
    color: #FFFFFF;
}

body.home-4 .searchbar_content form {
    background: var(--h4-surface);
    border: 1.5px solid transparent;
    border-radius: 999px;
}

body.home-4 .searchbar_content form:focus-within {
    background: #FFFFFF;
    border-color: var(--buttons);
}

body.home-4 .search-box,
body.home-4 .search-box input {
    border-radius: 999px;
    color: var(--h4-ink);
}

body.home-4 .search-box button {
    border-radius: 50%;
    color: var(--h4-ink);
}

body.home-4 .connect-with-us p,
body.home-4 .connect-with-us p a {
    color: var(--h4-ink);
}

body.home-4 .connect-with-us p::before {
    filter: none;
}

body.home-4 .fx-dd,
body.home-4 .categories_content_toggle.fx-cm {
    border-radius: 20px;
}

@media (min-width: 992px) {
    body.home-4 header::after {
        content: none;
    }

    body.home-4 .main_header {
        grid-template-columns: auto minmax(0, 1fr) 260px auto;
        grid-template-areas: "logo nav search account";
        column-gap: 24px;
    }

    body.home-4 .main_header .logo {
        grid-area: logo;
        display: flex;
        align-items: center;
        padding-block: 18px;
    }

    body.home-4 .main_header .logo a,
    body.home-4 .main_header .logo img {
        display: block;
        max-height: 42px;
        width: auto;
    }

    body.home-4 .categories_menu,
    body.home-4 .connect-with-us {
        display: none !important;
    }

    body.home-4 .main_menu_content {
        grid-area: nav;
        justify-self: center;
        padding: 0;
    }

    body.home-4 .main_menu_content nav > ul > li > a {
        line-height: 44px;
        padding-inline: 14px;
    }

    body.home-4 .searchbar_content.mobile_screen_none {
        grid-area: search;
        width: 100%;
        margin: 0;
    }

    body.home-4 .searchbar_content.mobile_screen_none .category_hover_content {
        display: none;
    }

    body.home-4 .searchbar_content.mobile_screen_none .search-box {
        height: 46px;
        padding-inline-start: 18px;
    }

    body.home-4 .header_account_area {
        grid-area: account;
    }

    body.home-4.fx-stuck header {
        background: rgb(255 255 255 / .92);
    }
}

@media (min-width: 1400px) {
    /* nav at the true centre of the bar */
    body.home-4 .main_header {
        grid-template-areas: "logo . search account";
    }

    body.home-4 .main_menu_content {
        position: absolute;
        grid-row: 1;
        grid-column: 1 / -1;
        justify-self: center;
        align-self: center;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.home-4 .main_header {
        grid-template-columns: auto minmax(0, 1fr) 200px auto;
    }

    body.home-4 .main_menu_content nav > ul > li > a {
        padding-inline: 10px;
    }
}

@media (max-width: 991.98px) {
    body.home-4 .middle_content,
    body.home-4 .header_bottom {
        background: #FFFFFF;
    }

    body.home-4 .header_bottom .searchbar_content form {
        border: 1.5px solid var(--fx-line);
    }

    body.home-4 .mobile_canvas_open a {
        background: var(--h4-surface);
        color: var(--h4-ink);
    }

    .h4-hero__head,
    .h4-story,
    .h4-news__box {
        grid-template-columns: minmax(0, 1fr);
    }

    .h4-cats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 28px;
    }

    .h4-footer__top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .h4-footer__brand {
        grid-column: 1 / -1;
    }

    body.market .h4-news .fx-newsletter-done {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .h4-section {
        padding-top: 72px;
    }

    .h4-hero {
        padding-top: 28px;
    }

    .h4-hero__actions .h4-btn {
        flex: 1 1 100%;
    }

    .h4-hero__photo,
    .h4-story__photo,
    .h4-news__box {
        border-radius: 24px;
    }

    .h4-hero__photo img {
        height: 300px;
    }

    .h4-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h4-tabs {
        max-width: 100%;
        overflow-x: auto;
    }

    .h4-grid .fx-card__foot {
        flex-wrap: wrap;
        gap: 8px;
    }

    .h4-grid .fx-add,
    .h4-grid .fx-stepper {
        width: 100%;
    }

    .h4-news__form {
        flex-direction: column;
        border-radius: 24px;
    }

    .h4-news__form input {
        padding-inline: 16px;
    }

    .h4-footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* dark mode */
body.home-4.dark-mode {
    --h4-ink: #EEF1EE;
    --h4-muted: #A7AFAA;
    --h4-surface: #18201C;
}

body.home-4.dark-mode header,
body.home-4.dark-mode.fx-stuck header {
    background: var(--fx-bg);
}

body.home-4.dark-mode .main_header .logo a {
    padding: 4px 10px;
    border-radius: 999px;
    background: #FFFFFF;
}

body.home-4.dark-mode .h4-footer {
    background: #0B0F0D;
}

body.home-4.dark-mode .h4-btn--ghost:hover {
    color: #0B0F0D !important;
}

[dir="rtl"] body.home-4 :is(.h4-hero__side p, .h4-story__copy p, .h4-footer__brand p, .h4-cat__count, .fx-card__meta) {
    unicode-bidi: plaintext;
}

/* ==========================================================================
   HOME 4 hero v2 – copy + search on the left, photo mosaic on the right
   (tall market photo | product tile with Add | deep-green delivery note)
   ========================================================================== */
.h4-hero {
    padding-top: clamp(28px, 3.5vw, 48px);
}

.h4-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
}

body.market .h4-hero h1 {
    font-size: clamp(44px, 5.2vw, 80px);
}

.h4-hero__copy > p {
    margin: 24px 0 32px;
    max-width: 38ch;
    color: var(--h4-muted);
    font-size: 19px;
    line-height: 1.55;
}

/* search */
.h4-search {
    position: relative;
    display: flex;
    gap: 8px;
    max-width: 520px;
    padding: 6px;
    padding-inline-start: 50px;
    border: 1.5px solid color-mix(in srgb, var(--h4-ink) 14%, transparent);
    border-radius: 999px;
    background: #FFFFFF;
    transition: border-color .2s, box-shadow .2s;
}

.h4-search:focus-within {
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

.h4-search > em {
    position: absolute;
    inset-inline-start: 20px;
    top: 50%;
    translate: 0 -50%;
    color: var(--h4-muted);
    font-size: 18px;
}

.h4-search input {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: 0;
    background: transparent;
    color: var(--h4-ink);
    font-size: 17px;
    outline: 0;
}

.h4-search input::placeholder {
    color: var(--h4-muted);
}

.h4-search input::-webkit-search-cancel-button {
    display: none;
}

.h4-search .h4-btn {
    flex: none;
}

/* popular searches (real controls: fill the search field) */
.h4-hero__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    color: var(--h4-muted);
    font-size: 15px;
}

.h4-hero__tags button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--h4-ink) 12%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--h4-ink);
    font-size: 15px;
    transition: background-color .2s, border-color .2s;
}

.h4-hero__tags button:hover {
    background: var(--h4-surface);
    border-color: transparent;
}

/* mosaic */
.h4-hero__mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 16px;
    height: clamp(460px, 44vw, 640px);
}

.h4-tile {
    position: relative;
    margin: 0;
    border-radius: var(--h4-r);
    overflow: hidden;
}

.h4-tile--photo {
    grid-row: 1 / span 2;
}

.h4-tile--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 38% 50%;
}

/* product tile */
.h4-tile--product {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    outline: 1px solid rgb(0 0 0 / .07);
    outline-offset: -1px;
}

.h4-tile__img {
    flex: 1;
    min-height: 0;
    display: block;
}

.h4-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.h4-tile--product:hover .h4-tile__img img {
    transform: scale(1.05);
}

.h4-tile__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 16px;
}

body.market .h4-tile__row h2 {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.h4-tile__row h2 a {
    color: var(--h4-ink) !important;
    text-decoration: none;
}

.h4-tile__row p {
    margin: 0;
    color: var(--h4-muted);
    font-size: 15px;
}

.h4-tile__row p strong {
    color: var(--h4-ink);
    font-weight: 600;
}

.h4-tile--product .fx-add,
.h4-tile--product .fx-stepper,
.h4-tile--product .fx-stepper button {
    height: 44px;
}

.h4-tile--product .fx-add {
    background: var(--buttons);
    color: #FFFFFF !important;
    font-size: 15px;
}

.h4-tile--product .fx-add:hover {
    background: var(--fx-deep);
}

/* delivery note */
.h4-tile--note {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: var(--fx-deep);
    color: #FFFFFF;
}

.h4-tile__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 21px;
}

.h4-tile--note p {
    margin: 0;
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.h4-tile--note .h4-link {
    color: #FFFFFF !important;
    font-size: 15px;
}

@media (max-width: 991.98px) {
    .h4-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .h4-hero__mosaic {
        height: 520px;
    }
}

@media (max-width: 575.98px) {
    .h4-search {
        padding-inline-start: 44px;
    }

    .h4-search > em {
        inset-inline-start: 16px;
    }

    .h4-search .h4-btn {
        padding: 0 18px;
    }

    .h4-hero__mosaic {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 240px auto;
        height: auto;
        gap: 12px;
    }

    .h4-tile--photo {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .h4-tile__img {
        flex: none;
        aspect-ratio: 1;
    }

    .h4-tile__row {
        flex-direction: column;
        align-items: stretch;
        padding: 0 12px 12px;
    }

    .h4-tile--product .fx-add,
    .h4-tile--product .fx-stepper {
        width: 100%;
    }

    .h4-tile--note {
        padding: 16px;
    }

    .h4-tile--note p {
        font-size: 18px;
    }
}

body.home-4.dark-mode .h4-search,
body.home-4.dark-mode .h4-tile--product {
    background: var(--fx-card);
}

[dir="rtl"] .h4-tile--photo img {
    object-position: 62% 50%;
}

[dir="rtl"] body.home-4 :is(.h4-hero__copy > p, .h4-tile--note p, .h4-tile__row p) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.home-4 :is(.h4-hero__tags span, .h4-search input) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.home-4 .h4-search input {
    text-align: right;
}

/* Home 4 hero product tile: keep the hover zoom inside the photo box */
.h4-tile__img {
    position: relative;
    overflow: hidden;
}

.h4-tile__row {
    position: relative;
    z-index: 1;
    padding-top: 12px;
    background: inherit;
}

/* ==========================================================================
   HOME 4 – weekly box, recipes, delivery
   ========================================================================== */
/* weekly box */
.h4-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    padding: clamp(28px, 4vw, 56px);
    border-radius: 32px;
    background: var(--h4-surface);
}

.h4-box__copy > p {
    margin: 16px 0 28px;
    max-width: 38ch;
    color: var(--h4-muted);
    font-size: 18px;
    line-height: 1.55;
}

.h4-box__list {
    display: grid;
    gap: 12px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
    color: var(--h4-ink);
    font-size: 17px;
}

.h4-box__list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h4-box__list em {
    color: var(--buttons);
    font-size: 19px;
}

.h4-box__buy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.h4-box__buy .fx-price strong {
    font-size: 28px;
    font-weight: 600;
    color: var(--h4-ink);
}

.h4-box__buy .fx-price del {
    font-size: 17px;
}

.h4-box__buy .fx-add {
    height: 52px;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    background: var(--buttons);
    color: #FFFFFF !important;
    font-size: 16px;
}

.h4-box__buy .fx-stepper,
.h4-box__buy .fx-stepper button {
    height: 52px;
}

.h4-box__buy .fx-stepper {
    min-width: 140px;
}

.h4-box__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.h4-box__grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 20px;
    background: #FFFFFF;
}

/* recipes */
.h4-recipes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}

.h4-recipe__img {
    display: block;
    margin-bottom: 18px;
    border-radius: var(--h4-r);
    overflow: hidden;
}

.h4-recipe__img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.h4-recipe:hover .h4-recipe__img img {
    transform: scale(1.04);
}

body.market .h4-recipe h3 {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.h4-recipe h3 a {
    color: var(--h4-ink) !important;
    text-decoration: none;
}

.h4-recipe p {
    margin: 0;
    color: var(--h4-muted);
    font-size: 15px;
}

/* delivery */
.h4-delivery__photo {
    margin: 0 0 clamp(32px, 4vw, 48px);
    border-radius: 32px;
    overflow: hidden;
}

.h4-delivery__photo img {
    display: block;
    width: 100%;
    height: clamp(280px, 34vw, 500px);
    object-fit: cover;
    object-position: 50% 60%;
}

.h4-delivery {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    gap: 24px clamp(32px, 5vw, 80px);
}

body.market .h4-delivery h2 {
    margin: 0;
    color: var(--h4-ink);
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.h4-delivery__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h4-delivery__facts li {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.h4-delivery__facts em {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--h4-surface);
    color: var(--h4-ink);
    font-size: 20px;
}

.h4-delivery__facts span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--h4-muted);
    font-size: 15px;
    line-height: 1.45;
}

.h4-delivery__facts strong {
    color: var(--h4-ink);
    font-size: 17px;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .h4-box,
    .h4-delivery {
        grid-template-columns: minmax(0, 1fr);
    }

    .h4-box__grid {
        max-width: 520px;
    }

    .h4-recipes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h4-recipe:nth-child(3) {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .h4-box,
    .h4-delivery__photo {
        border-radius: 24px;
    }

    .h4-box__buy .fx-add,
    .h4-box__buy .fx-stepper {
        width: 100%;
    }

    .h4-recipes {
        grid-template-columns: minmax(0, 1fr);
    }

    .h4-recipe:nth-child(3) {
        display: block;
    }

    .h4-delivery__photo img {
        height: 240px;
    }

    .h4-delivery__facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .h4-delivery__facts li {
        flex-direction: row;
        align-items: center;
    }

    .h4-delivery__facts em {
        flex: none;
    }
}

body.home-4.dark-mode .h4-box__grid img {
    background: var(--fx-card);
}

[dir="rtl"] body.home-4 :is(.h4-box__copy > p, .h4-box__list li, .h4-recipe p, .h4-delivery__facts span) {
    unicode-bidi: plaintext;
}

body.market .h4-box h2 {
    margin: 0;
    color: var(--h4-ink);
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

/* ==========================================================================
   SHOP – full width grid (shop.html): header band, sticky toolbar, grid,
   list view, filters panel. Scoped body.shop-page.
   ========================================================================== */
/* header band */
.sp-head {
    padding: clamp(28px, 4vw, 56px) 0 clamp(20px, 2.5vw, 32px);
}

.sp-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    color: var(--fx-muted);
    font-size: 15px;
}

.sp-crumbs li + li::before {
    content: "/";
    margin-inline-end: 8px;
    opacity: .5;
}

.sp-crumbs a {
    color: var(--fx-muted) !important;
    text-decoration: none;
}

.sp-crumbs a:hover {
    color: var(--fx-text) !important;
}

.sp-crumbs [aria-current] {
    color: var(--fx-text);
}

.sp-head__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 32px;
}

body.market .sp-head h1 {
    margin: 0;
    color: var(--fx-text);
    font-size: clamp(36px, 4.6vw, 64px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}

.sp-count {
    margin: 0;
    color: var(--fx-muted);
    font-size: 16px;
}

.sp-count strong {
    color: var(--fx-text);
    font-variant-numeric: tabular-nums;
}

/* sticky toolbar */
.sp-toolbar {
    position: sticky;
    top: var(--fx-header-h, 0px);
    z-index: 20;
    padding: 12px 0;
    border-bottom: 1px solid var(--fx-line);
    background: color-mix(in srgb, var(--fx-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.sp-toolbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
}

.sp-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sp-tabs button span {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fx-text) 8%, transparent);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.sp-tabs button[aria-selected="true"] span {
    background: var(--fx-lime);
    color: var(--fx-deep);
}

.sp-toolbar__tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 15px;
    font-weight: 600;
    transition: border-color .2s, background-color .2s;
}

.sp-tool:hover {
    border-color: var(--fx-text);
}

.sp-filters-btn__n {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--buttons);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 20px;
}

.sp-filters-btn__n[hidden] {
    display: none;
}

.sp-sort {
    position: relative;
    margin: 0;
}

.sp-sort select {
    height: 44px;
    padding: 0 40px 0 18px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 15px;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.sp-sort select:focus-visible {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

.sp-sort em {
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    translate: 0 -50%;
    pointer-events: none;
    font-size: 16px;
}

[dir="rtl"] .sp-sort select {
    padding: 0 18px 0 40px;
}

.sp-view {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: var(--fx-card);
}

.sp-view button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fx-muted);
    font-size: 17px;
    transition: background-color .2s, color .2s;
}

.sp-view button[aria-pressed="true"] {
    background: var(--fx-text);
    color: var(--fx-bg);
}

/* grid */
.sp-main {
    padding: clamp(24px, 3vw, 40px) 0 0;
}

.sp-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 28px) clamp(14px, 1.6vw, 24px);
}

.sp-card[hidden] {
    display: none;
}

.sp-card__desc {
    display: none;
    margin: 0;
    color: var(--fx-muted);
    font-size: 15px;
    line-height: 1.5;
}

.sp-badge--out {
    background: var(--fx-text);
    color: var(--fx-bg);
}

.sp-card.is-out .fx-card__media img {
    opacity: .55;
    filter: grayscale(.6);
}

.sp-out {
    color: var(--fx-muted);
    font-size: 14px;
    font-weight: 600;
}

/* list view */
.sp-grid.is-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sp-grid.is-list .sp-card {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--fx-line);
    border-radius: 26px;
}

.sp-grid.is-list .fx-card__media {
    aspect-ratio: 1;
}

.sp-grid.is-list .fx-card__badges {
    top: 22px;
    inset-inline-start: 22px;
}

.sp-grid.is-list .fx-like {
    top: 20px;
    inset-inline-end: auto;
    inset-inline-start: 166px;
}

.sp-grid.is-list .fx-quick {
    display: none;
}

.sp-grid.is-list .fx-card__body {
    padding: 0 8px 0 0;
}

.sp-grid.is-list .fx-card__name {
    font-size: 19px;
}

.sp-grid.is-list .sp-card__desc {
    display: block;
}

/* empty state */
.sp-empty {
    padding: 72px 20px;
    border: 1px dashed var(--fx-line);
    border-radius: 28px;
    text-align: center;
}

body.market .sp-empty h2 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sp-empty p {
    margin: 0 0 24px;
    color: var(--fx-muted);
}

/* pagination */
.sp-pages {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(40px, 5vw, 64px);
}

.sp-pages a {
    display: grid;
    place-items: center;
    min-width: 46px;
    height: 46px;
    padding: 0 6px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    color: var(--fx-text) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}

.sp-pages a:hover {
    border-color: var(--fx-text);
}

.sp-pages a[aria-current="page"] {
    border-color: var(--fx-text);
    background: var(--fx-text);
    color: var(--fx-bg) !important;
}

.sp-pages a.is-disabled {
    opacity: .4;
    pointer-events: none;
}

[dir="rtl"] .sp-pages__arrow em {
    transform: scaleX(-1);
}

/* filters panel (Bootstrap offcanvas) */
.sp-panel.offcanvas {
    --bs-offcanvas-width: 400px;
    border: 0 !important;
    background: var(--fx-bg);
    color: var(--fx-text);
}

.sp-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 8px;
}

body.market .sp-panel__head h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sp-panel__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--fx-surface);
    color: var(--fx-text);
    font-size: 18px;
}

.sp-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px 24px;
}

.sp-group {
    margin: 0;
    padding: 20px 0;
    border: 0;
    border-bottom: 1px solid var(--fx-line);
}

.sp-group legend {
    float: none;
    width: auto;
    margin: 0 0 14px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
}

/* jQuery UI range slider */
body.market .sp-panel #slider-range {
    position: relative;
    height: 6px;
    margin: 14px 10px 18px;
    border: 0;
    border-radius: 6px;
    background: var(--fx-surface);
}

body.market .sp-panel #slider-range .ui-slider-range {
    position: absolute;
    height: 100%;
    border-radius: 6px;
    background: var(--buttons);
}

body.market .sp-panel #slider-range .ui-slider-handle {
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border: 3px solid var(--buttons);
    border-radius: 50%;
    background: #FFFFFF;
    translate: 0 -50%;
    cursor: grab;
    outline: 0;
}

body.market .sp-panel #slider-range .ui-slider-handle:focus-visible {
    box-shadow: 0 0 0 5px var(--fx-brand-soft);
}

.sp-panel #amount {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sp-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-choices label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.sp-choices input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sp-choices span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    font-size: 15px;
    transition: border-color .2s, background-color .2s;
}

.sp-choices span em {
    color: var(--fx-star);
}

.sp-choices input:checked + span {
    border-color: var(--fx-text);
    background: var(--fx-text);
    color: var(--fx-bg);
}

.sp-choices input:focus-visible + span {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

.sp-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 16px;
    cursor: pointer;
}

.sp-switch input {
    position: absolute;
    opacity: 0;
}

.sp-switch__track {
    position: relative;
    flex: none;
    width: 46px;
    height: 28px;
    border-radius: 999px;
    background: var(--fx-line);
    transition: background-color .2s;
}

.sp-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .25s var(--fx-ease);
}

.sp-switch input:checked + .sp-switch__track {
    background: var(--buttons);
}

.sp-switch input:checked + .sp-switch__track::after {
    transform: translateX(18px);
}

[dir="rtl"] .sp-switch input:checked + .sp-switch__track::after {
    transform: translateX(-18px);
}

.sp-switch input:focus-visible + .sp-switch__track {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

.sp-panel__foot {
    display: flex;
    gap: 10px;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--fx-line);
}

.sp-panel__foot .fx-btn {
    flex: 1;
    min-height: 48px;
}

.sp-panel__foot .sp-tool {
    height: 48px;
}

/* responsive */
@media (max-width: 1399.98px) {
    .sp-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .sp-grid.is-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .sp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sp-toolbar {
        position: static;
    }

    .sp-tabs {
        max-width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 767.98px) {
    .sp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-toolbar__tools {
        width: 100%;
    }

    .sp-sort {
        flex: 1;
    }

    .sp-sort select {
        width: 100%;
    }

    .sp-grid.is-list .sp-card {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 14px;
    }

    .sp-grid.is-list .fx-like {
        inset-inline-start: 86px;
        top: 16px;
        width: 32px;
        height: 32px;
    }

    .sp-grid.is-list .sp-card__desc {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .sp-grid .fx-card__foot {
        flex-wrap: wrap;
        gap: 8px;
    }

    .sp-grid:not(.is-list) .fx-add,
    .sp-grid:not(.is-list) .fx-stepper {
        width: 100%;
    }

    .sp-filters-btn {
        padding: 0 14px;
    }

    .sp-panel.offcanvas {
        --bs-offcanvas-width: 100%;
    }
}

[dir="rtl"] body.market :is(.sp-card__desc, .sp-count, .sp-empty p) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.market .sp-panel #slider-range .ui-slider-handle {
    margin-left: -12px;
}

/* shop filters panel: tighter legends */
.sp-group legend {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 12px;
}

.sp-group:first-child {
    padding-top: 8px;
}

/* ==========================================================================
   SHOP – right filter sidebar (shop-right-sidebar.html). Sticky on desktop,
   Bootstrap offcanvas-lg panel below 992px. Reuses the .sp-* shop styles.
   ========================================================================== */
.sp-main--side {
    padding-top: 0;
}

.sp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: clamp(24px, 3vw, 44px);
}

.sp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fx-line);
}

.shop-side .sp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shop-side .sp-grid.is-list {
    grid-template-columns: minmax(0, 1fr);
}

/* the sidebar */
@media (min-width: 992px) {
    .sp-side {
        position: sticky;
        top: calc(var(--fx-header-h, 0px) + 20px);
        max-height: calc(100vh - var(--fx-header-h, 0px) - 40px);
        overflow-y: auto;
        scrollbar-width: thin;
        border: 1px solid var(--fx-line);
        border-radius: 28px;
        background: var(--fx-card);
    }
}

.sp-side__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 22px 4px;
}

body.market .sp-side__head h2 {
    margin: 0;
    margin-inline-end: auto;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sp-side__clear {
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: var(--fx-brand-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-side__body {
    padding: 0 22px 22px;
}

.sp-side .sp-group:first-child {
    padding-top: 12px;
}

/* category rows */
.sp-cats {
    display: grid;
    gap: 4px;
}

.sp-cats label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.sp-cats input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sp-cats span {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 6px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s;
}

.sp-cats img {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 4px;
    border-radius: 10px;
    background: var(--fx-surface);
    object-fit: contain;
    transition: background-color .2s, transform .35s var(--fx-spring);
}

.sp-cats small {
    margin-inline-start: auto;
    min-width: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--fx-surface);
    color: var(--fx-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.sp-cats label:hover span {
    background: var(--fx-surface);
}

.sp-cats input:checked + span {
    background: var(--fx-lime-soft);
}

.sp-cats input:checked + span img {
    background: var(--fx-lime);
    transform: rotate(-8deg);
}

.sp-cats input:checked + span small {
    background: var(--fx-lime);
    color: var(--fx-deep);
}

.sp-cats input:focus-visible + span {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

/* the jQuery UI slider lives in the sidebar here */
body.market .sp-side #slider-range {
    position: relative;
    height: 6px;
    margin: 14px 10px 18px;
    border: 0;
    border-radius: 6px;
    background: var(--fx-surface);
}

body.market .sp-side #slider-range .ui-slider-range {
    position: absolute;
    height: 100%;
    border-radius: 6px;
    background: var(--buttons);
}

body.market .sp-side #slider-range .ui-slider-handle {
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border: 3px solid var(--buttons);
    border-radius: 50%;
    background: #FFFFFF;
    translate: 0 -50%;
    cursor: grab;
    outline: 0;
}

body.market .sp-side #slider-range .ui-slider-handle:focus-visible {
    box-shadow: 0 0 0 5px var(--fx-brand-soft);
}

.sp-side #amount {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sp-side .sp-choices span {
    min-height: 40px;
    padding: 0 14px;
}

/* promo */
.sp-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 22px;
    padding: 20px 110px 20px 20px;
    border-radius: 20px;
    background: var(--fx-deep);
    color: #FFFFFF !important;
    text-decoration: none;
    overflow: hidden;
}

[dir="rtl"] .sp-promo {
    padding: 20px 20px 20px 110px;
}

.sp-promo strong {
    font-size: 17px;
}

.sp-promo span {
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    line-height: 1.4;
}

.sp-promo img {
    position: absolute;
    inset-inline-end: -14px;
    bottom: -14px;
    width: 120px;
    transition: transform .5s var(--fx-spring);
}

.sp-promo:hover img {
    transform: rotate(-8deg) scale(1.06);
}

/* below 992px: offcanvas panel */
@media (max-width: 991.98px) {
    .sp-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-side.offcanvas-lg {
        --bs-offcanvas-width: 380px;
        background: var(--fx-bg);
        color: var(--fx-text);
    }

    .sp-side .sp-side__body {
        flex: 1;
        overflow-y: auto;
    }

    .shop-side .sp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sp-side .sp-panel__foot .fx-btn {
        flex: 1;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .shop-side .sp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shop-side .sp-grid.is-list .sp-card {
        grid-template-columns: 160px minmax(0, 1fr);
    }

    .shop-side .sp-grid.is-list .fx-like {
        inset-inline-start: 126px;
    }
}

@media (max-width: 767.98px) {
    .shop-side .sp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-bar .sp-toolbar__tools {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .sp-side.offcanvas-lg {
        --bs-offcanvas-width: 100%;
    }
}

/* shop filters – RTL: keep "$0 – $70" and "4.5+" in reading order */
[dir="rtl"] body.market :is(.sp-side, .sp-panel) #amount {
    direction: ltr;
    text-align: right;
}

[dir="rtl"] body.market :is(.sp-choices span, .sp-cats small, .sp-tabs button span) {
    unicode-bidi: plaintext;
}

/* shop filters: legends flow inside the padding (fieldset legends otherwise sit on
   the top edge, glued to the divider) – even 20 / 12 / 20 rhythm per group */
.sp-group > legend {
    float: left;
    width: 100%;
    margin: 0 0 12px;
}

.sp-group > legend + * {
    clear: both;
}

body.market :is(.sp-side, .sp-panel) #slider-range {
    margin: 10px 12px 14px;
}

.sp-side__head {
    padding-bottom: 0;
}

.sp-side .sp-group:first-child {
    padding-top: 16px;
}

.sp-side .sp-group:last-of-type {
    border-bottom: 0;
}

.sp-side .sp-promo {
    margin-top: 4px;
}

/* room for the 24px handles above/below the 6px track */
body.market :is(.sp-side, .sp-panel) #slider-range {
    margin: 21px 12px 21px;
}

/* ==========================================================================
   SHOP – full width list (shop-fullwidth-list.html): rich rows
   photo | details | buy box. Grid toggle falls back to compact cards.
   ========================================================================== */
.shop-list .sp-grid.is-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.shop-list .sp-grid.is-list .sp-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 240px;
    align-items: stretch;
    gap: 28px;
    padding: 14px;
    border: 1px solid var(--fx-line);
    border-radius: 28px;
    background: var(--fx-card);
    transition: border-color .25s;
}

.shop-list .sp-grid.is-list .sp-row:hover {
    border-color: color-mix(in srgb, var(--fx-text) 25%, var(--fx-line));
    transform: none;
}

.shop-list .sp-grid.is-list .fx-card__media {
    aspect-ratio: 1;
    border-radius: 20px;
}

.shop-list .sp-grid.is-list .fx-card__badges {
    top: 26px;
    inset-inline-start: 26px;
}

.shop-list .sp-grid.is-list .fx-like {
    top: 24px;
    inset-inline-start: 186px;
    inset-inline-end: auto;
}

.shop-list .sp-grid.is-list .fx-quick {
    display: flex;
    top: auto;
    bottom: 24px;
    inset-inline-start: 186px;
    inset-inline-end: auto;
}

.shop-list .sp-grid.is-list .fx-card__body {
    align-self: center;
    gap: 8px;
    padding: 6px 0;
}

.shop-list .sp-grid.is-list .fx-card__name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.shop-list .sp-grid.is-list .sp-card__desc {
    display: block;
    max-width: 56ch;
    font-size: 16px;
}

.sp-row__reviews {
    color: var(--fx-muted);
}

.sp-row__facts {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.shop-list .sp-grid.is-list .sp-row__facts {
    display: flex;
}

.sp-row__facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--fx-surface);
    color: var(--fx-text);
    font-size: 14px;
}

.sp-row__facts em {
    color: var(--fx-brand-text);
    font-size: 15px;
}

/* buy box */
.sp-row__buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding: 8px 6px 6px;
}

.sp-row__save,
.sp-row__stock,
.sp-row__notify {
    display: none;
}

.shop-list .sp-grid.is-list .sp-row__buy {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 20px;
    border-radius: 20px;
    background: var(--fx-surface);
}

.shop-list .sp-grid.is-list .sp-row__buy .fx-price strong {
    font-size: 28px;
}

.shop-list .sp-grid.is-list .sp-row__buy .fx-price del {
    font-size: 15px;
}

.shop-list .sp-grid.is-list :is(.sp-row__save, .sp-row__stock) {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.sp-row__save {
    color: var(--fx-sale);
}

.sp-row__stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fx-brand-text);
}

.sp-row__stock::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

.sp-row__stock.is-out {
    color: var(--fx-muted);
}

.shop-list .sp-grid.is-list .sp-row__buy .fx-add,
.shop-list .sp-grid.is-list .sp-row__buy .fx-stepper {
    width: 100%;
    height: 48px;
    font-size: 15px;
}

.shop-list .sp-grid.is-list .sp-row__buy .fx-add {
    background: var(--buttons);
}

.shop-list .sp-grid.is-list .sp-row__buy .fx-add:hover {
    background: var(--fx-deep);
}

.shop-list .sp-grid.is-list .sp-row__buy .fx-stepper button {
    height: 48px;
}

.shop-list .sp-grid.is-list .sp-row__notify {
    display: grid;
    place-items: center;
    height: 48px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: var(--fx-card);
    color: var(--fx-text) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.shop-list .sp-grid.is-list .sp-row__notify:hover {
    border-color: var(--fx-text);
}

/* grid view on this page: compact add button */
.shop-list .sp-grid:not(.is-list) .sp-row__buy .fx-add {
    min-width: 0;
    font-size: 0;
    width: 40px;
    padding: 0;
}

.shop-list .sp-grid:not(.is-list) .sp-row__buy .fx-add::before {
    content: "+";
    font-size: 20px;
}

@media (max-width: 1199.98px) {
    .shop-list .sp-grid.is-list .sp-row {
        grid-template-columns: 180px minmax(0, 1fr) 210px;
        gap: 20px;
    }

    .shop-list .sp-grid.is-list :is(.fx-like, .fx-quick) {
        inset-inline-start: 146px;
    }
}

@media (max-width: 991.98px) {
    .shop-list .sp-grid.is-list .sp-row {
        grid-template-columns: 160px minmax(0, 1fr);
    }

    .shop-list .sp-grid.is-list .sp-row__buy {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 14px 16px;
    }

    .shop-list .sp-grid.is-list .sp-row__buy .fx-price {
        margin-inline-end: auto;
    }

    .shop-list .sp-grid.is-list .sp-row__buy :is(.fx-add, .fx-stepper, .sp-row__notify) {
        width: auto;
        min-width: 160px;
    }

    .shop-list .sp-grid.is-list :is(.fx-like, .fx-quick) {
        inset-inline-start: 126px;
    }

    .shop-list .sp-grid.is-list .fx-quick {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .shop-list .sp-grid.is-list .sp-row {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 14px;
        padding: 12px;
        border-radius: 22px;
    }

    .shop-list .sp-grid.is-list .fx-card__name {
        font-size: 18px;
    }

    .shop-list .sp-grid.is-list .sp-card__desc,
    .shop-list .sp-grid.is-list .sp-row__reviews {
        display: none;
    }

    .shop-list .sp-grid.is-list .sp-row__facts li:nth-child(n+2) {
        display: none;
    }

    .shop-list .sp-grid.is-list .fx-like {
        inset-inline-start: 82px;
        top: 16px;
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .shop-list .sp-grid.is-list .fx-card__badges {
        top: 18px;
        inset-inline-start: 18px;
    }

    .shop-list .sp-grid.is-list .sp-row__save {
        display: none;
    }

    .shop-list .sp-grid.is-list .sp-row__buy :is(.fx-add, .fx-stepper, .sp-row__notify) {
        flex: 1 1 100%;
    }
}

[dir="rtl"] body.market :is(.sp-row__reviews, .sp-row__save) {
    unicode-bidi: plaintext;
}

/* list page – grid view keeps only price + add; mobile heart below the badges; RTL facts */
.shop-list .sp-grid:not(.is-list) :is(.sp-row__stock, .sp-row__save, .sp-row__notify, .sp-row__reviews) {
    display: none;
}

@media (max-width: 575.98px) {
    .shop-list .sp-grid.is-list .fx-like {
        top: auto;
        bottom: 18px;
    }
}

[dir="rtl"] body.market .sp-row__facts li {
    unicode-bidi: plaintext;
}

@media (max-width: 575.98px) {
    /* 12px card padding + 110px photo − 32px heart − 6px inset */
    .shop-list .sp-grid.is-list .fx-like {
        top: 84px;
        bottom: auto;
        inset-inline-start: 84px;
    }
}

/* list page, grid view: geometric "+" (a text glyph sits on the baseline, so it drifts
   off-centre); two 2px bars centred in a true 40px circle */
.shop-list .sp-grid:not(.is-list) .sp-row__buy .fx-add {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 0;
}

.shop-list .sp-grid:not(.is-list) .sp-row__buy .fx-add::before {
    content: "";
    width: 16px;
    height: 16px;
    font-size: 0;
    background:
        linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat;
}

/* the hidden "Add" label is a zero-size text node: in a grid it forms a second row and
   pushes the plus up, so use a single flex row with no gap */
.shop-list .sp-grid:not(.is-list) .sp-row__buy .fx-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.shop-list .sp-grid:not(.is-list) .sp-row__buy .fx-add::before {
    flex: none;
}

/* ==========================================================================
   PRODUCT DETAILS (product-details.html) – body.pd-page
   ========================================================================== */
.pd-crumbs {
    padding: clamp(20px, 3vw, 36px) 0 8px;
}

.pd-crumbs .sp-crumbs ol {
    margin: 0;
}

.pd-main {
    padding: 16px 0 0;
}

.pd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 4vw, 64px);
}

/* gallery */
.pd-gallery {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
}

.pd-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pd-thumbs button {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 18px;
    background: var(--fx-photo);
    overflow: hidden;
    aspect-ratio: 1;
    transition: border-color .2s, transform .3s var(--fx-spring);
}

.pd-thumbs button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-thumbs button:hover {
    transform: translateY(-2px);
}

.pd-thumbs button[aria-selected="true"] {
    border-color: var(--buttons);
}

.pd-thumbs button:focus-visible {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

.pd-stage {
    position: relative;
    border-radius: 32px;
    background: var(--fx-photo);
    overflow: hidden;
}

.pd-zoom {
    aspect-ratio: 1;
    overflow: hidden;
    cursor: zoom-in;
}

.pd-stage__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s var(--fx-ease);
}

.pd-stage__img.is-in {
    animation: pd-fade .45s var(--fx-ease);
}

@keyframes pd-fade {
    from { opacity: .3; transform: scale(.98); }
}

.pd-zoom.is-zoom .pd-stage__img {
    transform: scale(1.9);
}

.pd-stage__badge {
    position: absolute;
    top: 20px;
    inset-inline-start: 20px;
    z-index: 2;
}

.pd-stage .pd-stage__like {
    top: 16px;
    inset-inline-end: 16px;
    width: 46px;
    height: 46px;
    font-size: 20px;
}

.pd-stage__nav {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    pointer-events: none;
}

.pd-stage__nav > * {
    pointer-events: auto;
}

.pd-stage__nav .fx-icon-btn {
    border-color: transparent;
    background: rgba(255, 255, 255, .9);
}

.pd-stage__count {
    min-width: 60px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--fx-muted);
    font-size: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pd-stage__count strong {
    color: var(--fx-text);
}

[dir="rtl"] .pd-stage__nav .fx-icon-btn em {
    transform: scaleX(-1);
}

/* info column */
.pd-info {
    position: sticky;
    top: calc(var(--fx-header-h, 0px) + 24px);
}

.pd-info__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pd-cat {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.pd-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fx-brand-text);
    font-size: 14px;
    font-weight: 600;
}

.pd-stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--buttons) 15%, transparent);
}

body.market .pd-info h1 {
    margin: 0 0 12px;
    color: var(--fx-text);
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.pd-rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fx-muted) !important;
    font-size: 15px;
    text-decoration: none;
}

.pd-rating:hover span:last-child {
    color: var(--fx-text);
    text-decoration: underline;
}

.pd-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--fx-star);
    font-size: 16px;
}

.pd-stars em {
    color: var(--fx-star) !important;
}

.pd-stars em.is-off {
    color: var(--fx-line) !important;
}

.pd-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 20px 0 16px;
}

.pd-price strong {
    color: var(--fx-text);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pd-price strong.is-tick {
    animation: fx-tick .35s var(--fx-ease);
}

.pd-price del {
    color: var(--fx-muted);
    font-size: 19px;
}

.pd-save {
    align-self: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fx-sale) 12%, transparent);
    color: var(--fx-sale);
    font-size: 14px;
    font-weight: 700;
}

.pd-lead {
    margin: 0 0 24px;
    max-width: 52ch;
    color: var(--fx-muted);
    font-size: 17px;
    line-height: 1.6;
}

.pd-opt {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.pd-opt legend {
    float: left;
    width: 100%;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
}

.pd-weights {
    clear: both;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pd-weights label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.pd-weights input {
    position: absolute;
    opacity: 0;
}

.pd-weights span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border: 1.5px solid var(--fx-line);
    border-radius: 16px;
    color: var(--fx-muted);
    font-size: 14px;
    transition: border-color .2s, background-color .2s;
}

.pd-weights strong {
    color: var(--fx-text);
    font-size: 16px;
}

.pd-weights label:hover span {
    border-color: color-mix(in srgb, var(--fx-text) 30%, var(--fx-line));
}

.pd-weights input:checked + span {
    border-color: var(--buttons);
    background: var(--fx-lime-soft);
}

.pd-weights input:focus-visible + span {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

/* buy row */
.pd-buy {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.pd-qty {
    display: inline-grid;
    grid-template-columns: 48px 40px 48px;
    align-items: center;
    height: 56px;
    border: 1.5px solid var(--fx-line);
    border-radius: 999px;
    text-align: center;
}

.pd-qty button {
    height: 100%;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fx-text);
    font-size: 20px;
    transition: background-color .2s;
}

.pd-qty button:hover {
    background: var(--fx-surface);
}

.pd-qty output {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pd-add {
    flex: 1;
    min-height: 56px;
    font-size: 17px;
}

.pd-add.is-done,
.pd-bar .fx-btn.is-done {
    background: var(--fx-deep);
}

/* perks + meta */
.pd-perks {
    display: grid;
    gap: 2px;
    margin: 0 0 24px;
    padding: 6px;
    border-radius: 22px;
    background: var(--fx-surface);
    list-style: none;
}

.pd-perks li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
}

.pd-perks em {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--fx-card);
    color: var(--fx-brand-text);
    font-size: 18px;
}

.pd-perks span {
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.pd-perks strong {
    color: var(--fx-text);
    font-size: 15px;
}

.pd-meta {
    display: grid;
    gap: 10px;
    margin: 0;
    font-size: 15px;
}

.pd-meta > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pd-meta dt {
    width: 80px;
    color: var(--fx-muted);
    font-weight: 500;
}

.pd-meta dd {
    margin: 0;
    color: var(--fx-text);
}

.pd-meta a {
    color: var(--fx-text) !important;
}

.pd-share {
    display: flex;
    gap: 6px;
}

.pd-share a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fx-surface);
    font-size: 15px;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.pd-share a em {
    color: inherit !important;
}

.pd-share a:hover {
    background: var(--fx-text);
    color: var(--fx-bg) !important;
}

/* tabs */
.pd-tabs-sec {
    padding-top: var(--fx-section);
}

.pd-tabs {
    margin-bottom: 28px;
}

.pd-tabs button span {
    margin-inline-start: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fx-text) 8%, transparent);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
}

.pd-panels {
    padding: clamp(24px, 3.5vw, 48px);
    border: 1px solid var(--fx-line);
    border-radius: 32px;
}

.pd-desc {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
}

body.market .pd-desc h2 {
    margin: 0 0 16px;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pd-desc p {
    margin: 0 0 14px;
    color: var(--fx-muted);
    font-size: 16px;
    line-height: 1.65;
}

.pd-checks {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.pd-checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.pd-checks em {
    color: var(--buttons);
    font-size: 18px;
}

.pd-nutrition {
    align-self: start;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 20px;
    background: var(--fx-surface);
    font-size: 15px;
}

.pd-nutrition caption {
    caption-side: top;
    padding: 0 0 12px;
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 700;
}

.pd-nutrition th,
.pd-nutrition td {
    padding: 12px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--fx-text) 7%, transparent);
}

.pd-nutrition tr:last-child th,
.pd-nutrition tr:last-child td {
    border-bottom: 0;
}

.pd-nutrition th {
    color: var(--fx-muted);
    font-weight: 500;
}

.pd-nutrition td {
    text-align: end;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* reviews */
.pd-reviews {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.pd-score {
    padding: 24px;
    border-radius: 24px;
    background: var(--fx-surface);
    text-align: center;
}

.pd-score__big {
    margin: 0;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pd-score .pd-stars {
    margin: 10px 0 6px;
    font-size: 18px;
}

.pd-score__n {
    margin: 0 0 18px;
    color: var(--fx-muted);
    font-size: 14px;
}

.pd-bars {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: start;
}

.pd-bars li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    color: var(--fx-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.pd-bars em {
    color: var(--fx-star) !important;
    font-size: 12px;
}

.pd-bars i {
    height: 6px;
    border-radius: 6px;
    background:
        linear-gradient(var(--fx-star), var(--fx-star)) 0 0 / var(--p) 100% no-repeat,
        color-mix(in srgb, var(--fx-text) 10%, transparent);
}

[dir="rtl"] .pd-bars i {
    background-position: 100% 0, 0 0;
}

.pd-bars li span:last-child {
    text-align: end;
}

.pd-review {
    padding: 0 0 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--fx-line);
}

.pd-review__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.pd-review__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-weight: 700;
}

.pd-review__head > div {
    display: flex;
    flex-direction: column;
    margin-inline-end: auto;
}

.pd-review__head > div span {
    color: var(--fx-muted);
    font-size: 13px;
}

.pd-review p {
    margin: 0;
    color: var(--fx-text);
    font-size: 16px;
    line-height: 1.6;
}

.pd-review-form {
    display: grid;
    gap: 14px;
    padding: 24px;
    border-radius: 24px;
    background: var(--fx-surface);
}

body.market .pd-review-form h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.pd-review-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pd-review-form label {
    display: grid;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.pd-review-form input,
.pd-review-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--fx-line);
    border-radius: 14px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 400;
    outline: 0;
    transition: border-color .2s, box-shadow .2s;
}

.pd-review-form input:focus,
.pd-review-form textarea:focus {
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

.pd-review-form .fx-btn {
    justify-self: start;
    min-height: 50px;
}

.pd-review-form__done {
    margin: 0;
    color: var(--fx-brand-text);
    font-weight: 600;
}

/* shipping */
.pd-ship {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.pd-ship em {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-size: 20px;
}

body.market .pd-ship h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.pd-ship p {
    margin: 0;
    color: var(--fx-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* mobile buy bar */
.pd-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .pd-grid,
    .pd-desc,
    .pd-reviews {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-info {
        position: static;
    }

    .pd-ship {
        grid-template-columns: minmax(0, 1fr);
    }


    .pd-bar {
        position: fixed;
        z-index: 90;
        inset-inline: 12px;
        bottom: 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 8px 8px 8px;
        border-radius: 22px;
        background: var(--fx-card);
        box-shadow: 0 18px 40px -16px rgba(15, 21, 18, .45);
        transform: translateY(140%);
        transition: transform .4s var(--fx-ease);
    }

    .pd-bar.is-on {
        transform: none;
    }

    .pd-bar img {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        object-fit: cover;
        background: var(--fx-photo);
    }

    .pd-bar > div {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        font-size: 13px;
        color: var(--fx-muted);
    }

    .pd-bar strong {
        overflow: hidden;
        color: var(--fx-text);
        font-size: 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .pd-bar .fx-btn {
        min-height: 46px;
        padding: 0 22px;
    }
}

@media (max-width: 575.98px) {
    .pd-gallery {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-thumbs {
        order: 2;
        flex-direction: row;
        overflow-x: auto;
    }

    .pd-thumbs button {
        flex: 0 0 64px;
        border-radius: 14px;
    }

    .pd-stage {
        border-radius: 24px;
    }

    .pd-price strong {
        font-size: 34px;
    }

    .pd-weights span {
        padding: 10px 12px;
    }

    .pd-panels {
        padding: 20px;
        border-radius: 24px;
    }

    .pd-tabs {
        max-width: 100%;
        overflow-x: auto;
    }

    .pd-review-form__row {
        grid-template-columns: minmax(0, 1fr);
    }

}

[dir="rtl"] body.market :is(.pd-lead, .pd-desc p, .pd-review p, .pd-ship p, .pd-perks span, .pd-rating span, .pd-weights span, .pd-bars li) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.market :is(.pd-weights strong, .pd-weights span > :not(strong)) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.market .pd-stage__count {
    direction: ltr;
}

/* ==========================================================================
   CART (cart.html) – body.ct-page
   ========================================================================== */
.ct-head {
    padding: clamp(28px, 4vw, 52px) 0 clamp(20px, 2.5vw, 32px);
}

.ct-head__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 32px;
}

body.market .ct-head h1 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: clamp(36px, 4.4vw, 60px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}

.ct-head h1 span {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 20px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.ct-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fx-muted);
    font-size: 15px;
    font-weight: 600;
}

.ct-steps li + li::before {
    content: "";
    width: 28px;
    height: 1.5px;
    margin-inline-end: 4px;
    background: var(--fx-line);
}

.ct-steps span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--fx-line);
    border-radius: 50%;
    font-size: 13px;
}

.ct-steps .is-current {
    color: var(--fx-text);
}

.ct-steps .is-current span {
    border-color: var(--buttons);
    background: var(--buttons);
    color: #FFFFFF;
}

/* layout */
.ct-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    gap: clamp(24px, 3vw, 44px);
}

.ct-grid[hidden] {
    display: none;
}

/* free delivery */
.ct-free {
    margin-bottom: 16px;
    padding: 16px 20px;
    border-radius: 20px;
    background: var(--fx-lime-soft);
}

.ct-free p {
    margin: 0 0 10px;
    color: var(--fx-text);
    font-size: 15px;
}

.ct-free i {
    display: block;
    height: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .8);
    overflow: hidden;
}

.ct-free b {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: var(--buttons);
    transition: width .5s var(--fx-ease);
}

.ct-free.is-free p strong {
    color: var(--fx-brand-text);
}

/* items */
.ct-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto 110px;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--fx-line);
    transition: opacity .3s, transform .3s var(--fx-ease);
}

.ct-item.is-leaving {
    opacity: 0;
    transform: translateX(-24px);
}

[dir="rtl"] .ct-item.is-leaving {
    transform: translateX(24px);
}

.ct-item__img {
    display: block;
    aspect-ratio: 1;
    border-radius: 20px;
    background: var(--fx-photo);
    overflow: hidden;
}

.ct-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.market .ct-item h2 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ct-item h2 a {
    color: var(--fx-text) !important;
    text-decoration: none;
}

.ct-item__info p {
    margin: 0 0 10px;
    color: var(--fx-muted);
    font-size: 15px;
}

.ct-item__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.ct-item__links a,
.ct-item__links button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fx-muted) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
}

.ct-item__links a:hover {
    color: var(--fx-text) !important;
}

.ct-item__links button:hover {
    color: var(--fx-sale) !important;
}

.ct-qty {
    display: inline-grid;
    grid-template-columns: 40px 34px 40px;
    align-items: center;
    height: 46px;
    border: 1.5px solid var(--fx-line);
    border-radius: 999px;
    text-align: center;
}

.ct-qty button {
    height: 100%;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fx-text);
    font-size: 18px;
    transition: background-color .2s;
}

.ct-qty button:hover {
    background: var(--fx-surface);
}

.ct-qty output {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ct-qty output.is-tick {
    animation: fx-tick .3s var(--fx-ease);
}

.ct-item__total {
    margin: 0;
    color: var(--fx-text);
    font-size: 19px;
    font-weight: 700;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.ct-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    color: var(--fx-text) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.ct-back em {
    transition: transform .25s var(--fx-ease);
}

.ct-back:hover em {
    transform: translateX(-4px);
}

[dir="rtl"] .ct-back em {
    transform: scaleX(-1);
}

[dir="rtl"] .ct-back:hover em {
    transform: translateX(4px) scaleX(-1);
}

/* summary */
.ct-summary {
    position: sticky;
    top: calc(var(--fx-header-h, 0px) + 24px);
    padding: 28px;
    border-radius: 28px;
    background: var(--fx-surface);
}

body.market .ct-summary h2 {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ct-rows {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
}

.ct-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
}

.ct-rows > div[hidden] {
    display: none;
}

.ct-rows dt {
    color: var(--fx-muted);
    font-weight: 500;
}

.ct-rows dd {
    margin: 0;
    color: var(--fx-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ct-rows__disc dd,
.ct-rows__disc dt span {
    color: var(--fx-brand-text);
}

.ct-coupon {
    display: flex;
    gap: 6px;
    padding: 5px;
    border: 1.5px solid var(--fx-line);
    border-radius: 999px;
    background: var(--fx-card);
    transition: border-color .2s, box-shadow .2s;
}

.ct-coupon:focus-within {
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

.ct-coupon input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding-inline: 14px 4px;
    border: 0;
    background: transparent;
    color: var(--fx-text);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    outline: 0;
}

.ct-coupon input::placeholder {
    text-transform: none;
    letter-spacing: 0;
    color: var(--fx-muted);
}

.ct-coupon button {
    flex: none;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--fx-text);
    color: var(--fx-bg);
    font-size: 14px;
    font-weight: 700;
    transition: background-color .2s;
}

.ct-coupon button:hover {
    background: var(--buttons);
    color: #FFFFFF;
}

.ct-coupon__msg {
    margin: 10px 4px 20px;
    color: var(--fx-muted);
    font-size: 14px;
}

.ct-coupon__msg.is-ok {
    color: var(--fx-brand-text);
    font-weight: 600;
}

.ct-coupon__msg.is-error {
    color: var(--fx-sale);
    font-weight: 600;
}

.ct-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 18px;
    margin-bottom: 20px;
    border-top: 1px solid color-mix(in srgb, var(--fx-text) 10%, transparent);
    font-size: 17px;
    font-weight: 600;
}

.ct-total strong {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ct-checkout {
    width: 100%;
}

.ct-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 12px;
    color: var(--fx-muted);
    font-size: 14px;
}

.ct-pay {
    display: block;
    height: 24px;
    width: auto;
    margin: 0 auto;
}

/* empty */
.ct-empty {
    max-width: 520px;
    margin: 0 auto;
    padding: 32px 20px 0;
    text-align: center;
}

.ct-empty img {
    width: 180px;
    margin-bottom: 16px;
}

body.market .ct-empty h2 {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ct-empty p {
    margin: 0 0 24px;
    color: var(--fx-muted);
}

@media (max-width: 1199.98px) {
    .ct-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

@media (max-width: 991.98px) {
    .ct-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-summary {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .ct-steps li + li::before {
        width: 14px;
    }

    .ct-item {
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-areas:
            "img info"
            "img qty";
        row-gap: 12px;
        column-gap: 14px;
    }

    .ct-item__img {
        grid-area: img;
        align-self: start;
    }

    .ct-item__info {
        grid-area: info;
    }

    .ct-qty {
        grid-area: qty;
        justify-self: start;
    }

    .ct-item__total {
        grid-area: qty;
        justify-self: end;
        align-self: center;
    }

    .ct-summary {
        padding: 22px;
        border-radius: 24px;
    }
}

[dir="rtl"] body.market :is(.ct-item__info p, .ct-free p, .ct-coupon__msg, .ct-secure) {
    unicode-bidi: plaintext;
}

/* ==========================================================================
   CHECKOUT (checkout.html, body.co-page) + ORDER SUCCESS (order-success.html, body.os-page)
   Reuses .ct-head / .ct-steps / .ct-grid / .ct-rows / .ct-total from the cart.
   ========================================================================== */
.ct-steps a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit !important;
    text-decoration: none;
}

.ct-steps .is-done {
    color: var(--fx-text);
}

.ct-steps .is-done span {
    border-color: var(--buttons);
    background: var(--fx-lime-soft);
    color: var(--buttons);
    font-size: 16px;
}

.ct-steps .is-done + li::before,
.ct-steps .is-current::before {
    background: var(--buttons);
}

/* steps */
.co-flow {
    display: grid;
    gap: 14px;
}

.co-step {
    border: 1px solid var(--fx-line);
    border-radius: 28px;
    background: var(--fx-card);
    transition: border-color .25s;
}

.co-step.is-open {
    border-color: color-mix(in srgb, var(--buttons) 45%, var(--fx-line));
}

.co-step__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 22px 26px;
}

.co-step__n {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--fx-surface);
    color: var(--fx-muted);
    font-size: 15px;
    font-weight: 700;
}

.co-step.is-open .co-step__n {
    background: var(--buttons);
    color: #FFFFFF;
}

.co-step.is-done .co-step__n {
    background: var(--fx-lime);
    color: var(--fx-deep);
}

body.market .co-step__head h2 {
    margin: 0;
    margin-inline-end: auto;
    color: var(--fx-text);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.co-step:not(.is-open):not(.is-done) .co-step__head h2 {
    color: var(--fx-muted);
}

.co-step__done {
    display: none;
    order: 5;
    flex-basis: 100%;
    margin: 0;
    padding-inline-start: 48px;
    color: var(--fx-muted);
    font-size: 15px;
}

.co-step.is-done .co-step__done {
    display: block;
}

.co-step__edit {
    display: none;
    padding: 6px 14px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: transparent;
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 600;
}

.co-step__edit:hover {
    border-color: var(--fx-text);
}

.co-step.is-done .co-step__edit {
    display: inline-block;
}

.co-step__body {
    display: none;
    padding: 0 26px 26px;
}

.co-step.is-open .co-step__body {
    display: block;
    animation: fx-rise .45s var(--fx-ease) both;
}

/* selectable cards (addresses, payment) */
.co-cards,
.co-pay {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.co-pay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.co-card {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.co-card input,
.co-days input,
.co-slots input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.co-card span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 16px 16px 16px 52px;
    border: 1.5px solid var(--fx-line);
    border-radius: 18px;
    color: var(--fx-muted);
    font-size: 14px;
    line-height: 1.45;
    transition: border-color .2s, background-color .2s;
}

[dir="rtl"] .co-card span {
    padding: 16px 52px 16px 16px;
}

.co-card strong {
    color: var(--fx-text);
    font-size: 16px;
}

.co-card em {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    color: var(--fx-text);
    font-size: 20px;
}

.co-card:hover span {
    border-color: color-mix(in srgb, var(--fx-text) 30%, var(--fx-line));
}

.co-card input:checked + span {
    border-color: var(--buttons);
    background: var(--fx-lime-soft);
}

.co-card input:checked + span em {
    color: var(--fx-brand-text);
}

:is(.co-card, .co-days label, .co-slots label) input:focus-visible + span {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

/* fields */
.co-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.co-fields[hidden] {
    display: none;
}

.co-field {
    display: grid;
    gap: 6px;
    margin: 0;
}

.co-field--full {
    grid-column: 1 / -1;
}

.co-field > span {
    font-size: 14px;
    font-weight: 600;
}

.co-field small {
    color: var(--fx-muted);
    font-weight: 400;
}

.co-field input,
.co-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--fx-line);
    border-radius: 14px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 16px;
    outline: 0;
    transition: border-color .2s, box-shadow .2s;
}

.co-field input::placeholder,
.co-field textarea::placeholder {
    color: color-mix(in srgb, var(--fx-muted) 70%, transparent);
}

.co-field input:focus,
.co-field textarea:focus {
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

.co-field.is-bad input {
    border-color: var(--fx-sale);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-sale) 14%, transparent);
}

/* delivery day + slot */
.co-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.co-days label,
.co-slots label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.co-days span {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px;
    border: 1.5px solid var(--fx-line);
    border-radius: 18px;
    color: var(--fx-muted);
    font-size: 14px;
    transition: border-color .2s, background-color .2s;
}

.co-days strong {
    color: var(--fx-text);
    font-size: 16px;
}

.co-days input:checked + span {
    border-color: var(--fx-text);
    background: var(--fx-text);
    color: color-mix(in srgb, var(--fx-bg) 75%, transparent);
}

.co-days input:checked + span strong {
    color: var(--fx-bg);
}

.co-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.co-slots span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 1.5px solid var(--fx-line);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: border-color .2s, background-color .2s;
}

.co-slots input:checked + span {
    border-color: var(--buttons);
    background: var(--fx-lime-soft);
}

.co-slots input:disabled + span {
    color: var(--fx-muted);
    text-decoration: line-through;
    opacity: .6;
    cursor: not-allowed;
}

.co-slots small {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--fx-surface);
    font-size: 11px;
    text-decoration: none;
}

.co-switch {
    margin-bottom: 24px !important;
}

.co-next,
.co-place {
    min-height: 54px;
}

.co-demo {
    margin: -6px 0 14px;
    color: var(--fx-muted);
    font-size: 14px;
}

.co-terms {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 15px;
}

.co-terms input {
    width: 20px;
    height: 20px;
    accent-color: var(--buttons);
}

.co-terms a {
    color: var(--fx-brand-text) !important;
}

.co-place {
    width: 100%;
}

/* summary */
.co-summary {
    position: sticky;
    top: calc(var(--fx-header-h, 0px) + 24px);
    padding: 28px;
    border-radius: 28px;
    background: var(--fx-surface);
}

body.market .co-summary h2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.co-summary h2 span {
    color: var(--fx-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

.co-lines {
    display: grid;
    gap: 14px;
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--fx-text) 10%, transparent);
    list-style: none;
}

.co-lines li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.co-lines__img {
    position: relative;
    flex: none;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--fx-card);
}

.co-lines__img img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.co-lines__img b {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--fx-text);
    color: var(--fx-bg);
    font-size: 12px;
}

.co-lines__name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 600;
}

.co-lines__name small {
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 400;
}

.co-lines strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.co-summary .ct-total {
    margin-bottom: 0;
}

.co-summary__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    color: var(--fx-muted);
    font-size: 14px;
}

/* order success */
.os-main {
    padding: clamp(36px, 5vw, 72px) 0 0;
}

.os-hero {
    max-width: 760px;
    margin: 0 auto clamp(36px, 5vw, 56px);
    text-align: center;
}

.os-check {
    display: inline-grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 44px;
    animation: os-pop .7s var(--fx-spring) both;
}

.os-check em {
    color: inherit !important;
}

@keyframes os-pop {
    from { transform: scale(.4); opacity: 0; }
}

body.market .os-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.os-hero > p {
    margin: 0 0 28px;
    color: var(--fx-muted);
    font-size: 17px;
}

.os-hero > p strong {
    color: var(--fx-text);
}

.os-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
    text-align: start;
    overflow: hidden;
}

.os-facts > div {
    padding: 18px 20px;
}

.os-facts > div + div {
    border-inline-start: 1px solid var(--fx-line);
}

.os-facts dt {
    margin-bottom: 4px;
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 500;
}

.os-facts dd {
    margin: 0;
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 700;
}

.os-track {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--fx-line);
    border-radius: 28px;
}

body.market .os-track h2 {
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.os-steps {
    position: relative;
    display: grid;
    gap: 24px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.os-steps::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    inset-inline-start: 21px;
    width: 2px;
    background: var(--fx-line);
}

.os-steps li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.os-steps em {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fx-surface);
    color: var(--fx-muted);
    font-size: 19px;
    box-shadow: 0 0 0 6px var(--fx-bg);
}

.os-steps .is-done em {
    background: var(--buttons);
    color: #FFFFFF;
}

.os-steps .is-current em {
    background: var(--fx-lime);
    color: var(--fx-deep);
    animation: os-pulse 2s ease-in-out infinite;
}

@keyframes os-pulse {
    50% { box-shadow: 0 0 0 6px var(--fx-bg), 0 0 0 12px color-mix(in srgb, var(--fx-lime) 45%, transparent); }
}

.os-steps div {
    display: flex;
    flex-direction: column;
}

.os-steps strong {
    color: var(--fx-text);
    font-size: 16px;
}

.os-steps li:not(.is-done):not(.is-current) strong {
    color: var(--fx-muted);
}

.os-steps span {
    color: var(--fx-muted);
    font-size: 14px;
}

.os-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.os-actions .sp-tool {
    height: 54px;
    padding: 0 24px;
    text-decoration: none;
    color: var(--fx-text) !important;
}

@media (max-width: 991.98px) {
    .co-summary {
        position: static;
        order: -1;
    }

    .os-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .os-facts > div:nth-child(3) {
        border-inline-start: 0;
    }

    .os-facts > div:nth-child(n+3) {
        border-top: 1px solid var(--fx-line);
    }
}

@media (max-width: 767.98px) {
    .co-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .co-days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .co-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .co-step__head {
        padding: 18px;
    }

    .co-step__body {
        padding: 0 18px 20px;
    }

    .co-step__done {
        padding-inline-start: 0;
    }

    .co-pay,
    .co-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .co-next {
        width: 100%;
    }

    .co-summary {
        padding: 22px;
    }

    .os-actions > * {
        flex: 1 1 100%;
    }
}

[dir="rtl"] body.market :is(.co-card span, .co-step__done, .co-lines__name small, .os-hero > p, .os-steps span, .co-demo) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.market :is(.co-slots span, .os-facts dd) {
    direction: ltr;
}

[dir="rtl"] body.market .os-facts dd {
    text-align: right;
}

.os-hero {
    max-width: 880px;
}

.os-facts dd {
    white-space: nowrap;
}

[dir="rtl"] body.market :is(.co-summary h2 span, .co-summary__note) {
    unicode-bidi: plaintext;
}

/* ==========================================================================
   ACCOUNT AREA (overview / orders / wallet / wishlist / address) – body.ac-page
   ========================================================================== */
.ac-lead {
    margin: 12px 0 0;
    color: var(--fx-muted);
    font-size: 17px;
}

.ac-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 3vw, 44px);
}

/* sidebar */
.ac-side {
    position: sticky;
    top: calc(var(--fx-header-h, 0px) + 24px);
    padding: 12px;
    border: 1px solid var(--fx-line);
    border-radius: 28px;
    background: var(--fx-card);
}

.ac-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--fx-line);
}

.ac-user__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fx-deep);
    color: var(--fx-lime);
    font-size: 18px;
    font-weight: 700;
}

.ac-user div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ac-user strong {
    font-size: 17px;
}

.ac-user span {
    overflow: hidden;
    color: var(--fx-muted);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ac-nav ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--fx-text) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s;
}

.ac-nav a em {
    width: 20px;
    color: var(--fx-muted);
    font-size: 18px;
    text-align: center;
}

.ac-nav a span {
    margin-inline-start: auto;
    min-width: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--fx-surface);
    color: var(--fx-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.ac-nav a:hover {
    background: var(--fx-surface);
}

.ac-nav a[aria-current="page"] {
    background: var(--fx-lime-soft);
}

.ac-nav a[aria-current="page"] em {
    color: var(--fx-brand-text);
}

.ac-nav a[aria-current="page"] span {
    background: var(--fx-lime);
    color: var(--fx-deep);
}

.ac-signout {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 14px;
    border-top: 1px solid var(--fx-line);
    color: var(--fx-muted) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.ac-signout:hover {
    color: var(--fx-sale) !important;
}

.ac-content {
    display: grid;
    gap: 24px;
    min-width: 0;
}

/* blocks */
.ac-block {
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid var(--fx-line);
    border-radius: 28px;
}

.ac-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

body.market .ac-block h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.ac-more {
    font-size: 15px;
}

.ac-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.ac-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ac-bar__count {
    margin: 0;
    color: var(--fx-muted);
}

.ac-bar__count strong {
    color: var(--fx-text);
}

.ac-bar .fx-tabs button span {
    margin-inline-start: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fx-text) 8%, transparent);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
}

.ac-btn {
    min-height: 46px;
    padding: 0 22px;
    font-size: 15px;
}

.is-leaving {
    opacity: 0;
    transform: scale(.96);
    transition: opacity .3s, transform .3s var(--fx-ease);
}

/* overview */
.ac-hello {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 3.5vw, 40px);
    border-radius: 28px;
    background:
        radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--buttons) 60%, #7DC24B) 0%, transparent 70%),
        var(--fx-deep);
    color: #FFFFFF;
    overflow: hidden;
}

body.market .ac-hello h2 {
    margin: 0 0 8px;
    color: #FFFFFF;
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ac-hello p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
}

.ac-hello .fx-btn {
    min-height: 48px;
}

.ac-hello img {
    flex: none;
    width: 170px;
    margin: -20px -10px -40px 0;
}

.ac-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-quick a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--fx-line);
    border-radius: 22px;
    color: var(--fx-muted) !important;
    font-size: 14px;
    text-decoration: none;
    transition: border-color .2s, transform .3s var(--fx-ease);
}

.ac-quick a:hover {
    border-color: color-mix(in srgb, var(--fx-text) 30%, var(--fx-line));
    transform: translateY(-2px);
}

.ac-quick em {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-size: 18px;
}

.ac-quick strong {
    color: var(--fx-text);
    font-size: 22px;
    letter-spacing: -0.01em;
}

.ac-mini__line {
    display: flex;
    gap: 14px;
    margin: 0;
    color: var(--fx-muted);
    font-size: 15px;
    line-height: 1.6;
}

.ac-mini__line em {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--fx-surface);
    color: var(--fx-text);
    font-size: 18px;
}

.ac-mini__line strong {
    display: block;
    color: var(--fx-text);
}

.ac-mini__big {
    margin: 0 0 4px;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ac-mini__sub {
    margin: 0;
    color: var(--fx-muted);
    font-size: 14px;
}

/* orders */
.ac-orders {
    display: grid;
    gap: 14px;
}

.ac-order {
    padding: 20px;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
    background: var(--fx-card);
}

.ac-order__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ac-order__head div {
    display: flex;
    flex-direction: column;
}

.ac-order__head strong {
    font-size: 17px;
}

.ac-order__head span {
    color: var(--fx-muted);
    font-size: 14px;
}

.ac-pill {
    flex: none;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.ac-order__head .ac-pill {
    color: inherit;
}

.ac-pill--processing {
    background: #FFF4D6;
    color: #8A5A00 !important;
}

.ac-pill--delivered {
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text) !important;
}

.ac-pill--cancelled {
    background: color-mix(in srgb, var(--fx-sale) 12%, transparent);
    color: var(--fx-sale) !important;
}

.ac-order__body {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ac-thumbs {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-thumbs li {
    width: 56px;
    height: 56px;
    border: 3px solid var(--fx-card);
    border-radius: 16px;
    background: var(--fx-photo);
    overflow: hidden;
}

.ac-thumbs li + li {
    margin-inline-start: -14px;
}

.ac-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-order__info p {
    margin: 0;
    color: var(--fx-muted);
    font-size: 15px;
}

.ac-order__info strong {
    color: var(--fx-text);
}

.ac-order__eta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px !important;
}

.ac-order__eta em {
    color: var(--fx-brand-text);
}

.ac-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ac-track li {
    padding-top: 10px;
    border-top: 4px solid var(--fx-line);
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 600;
}

.ac-track .is-done {
    border-color: var(--buttons);
    color: var(--fx-text);
}

.ac-track .is-current {
    border-color: var(--fx-lime);
    color: var(--fx-text);
}

.ac-order__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.ac-order__actions .sp-tool {
    height: 46px;
    color: var(--fx-text) !important;
    text-decoration: none;
}

/* wallet */
.ac-balance {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    padding: 28px;
    border-radius: 28px;
    background:
        radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--buttons) 60%, #7DC24B) 0%, transparent 70%),
        var(--fx-deep);
    color: #FFFFFF;
}

.ac-balance p {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
    font-weight: 600;
}

.ac-balance strong {
    font-size: clamp(40px, 4.4vw, 56px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ac-balance strong.is-tick {
    animation: fx-tick .4s var(--fx-ease);
}

.ac-balance span {
    margin-top: 12px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.ac-topup form {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.ac-amounts {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ac-amounts span {
    justify-content: center;
    width: 100%;
}

.ac-amounts input,
.ac-amounts label {
    position: relative;
}

.ac-amounts input {
    position: absolute;
    opacity: 0;
}

.ac-topup .fx-btn {
    min-height: 50px;
}

.ac-rewards {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 24px;
    background: var(--fx-lime-soft);
}

.ac-rewards > em {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 22px;
}

.ac-rewards > div {
    flex: 1;
}

body.market .ac-rewards h2 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
}

.ac-rewards p {
    margin: 0 0 10px;
    color: var(--fx-muted);
    font-size: 15px;
}

.ac-rewards i {
    display: block;
    height: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .8);
    overflow: hidden;
}

.ac-rewards b {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: var(--buttons);
}

.ac-tx {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-tx li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--fx-line);
}

.ac-tx li:last-child {
    border-bottom: 0;
}

.ac-tx li.is-new {
    animation: fx-rise .45s var(--fx-ease) both;
}

.ac-tx em {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 17px;
}

.ac-tx .is-in em {
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
}

.ac-tx .is-out em {
    background: var(--fx-surface);
    color: var(--fx-text);
}

.ac-tx span {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.ac-tx span strong {
    color: var(--fx-text);
    font-size: 15px;
}

.ac-tx b {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.ac-tx .is-in b {
    color: var(--fx-brand-text);
}

/* wishlist */
.ac-wish__remove {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--fx-glass);
    color: var(--fx-text);
    font-size: 16px;
    transition: background-color .2s, color .2s, transform .3s var(--fx-spring);
}

.ac-wish__remove:hover {
    background: var(--fx-sale);
    color: #FFFFFF;
    transform: rotate(90deg);
}

.ac-wishes[hidden] {
    display: none;
}

/* addresses */
.ac-addrs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ac-addr {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1.5px solid var(--fx-line);
    border-radius: 24px;
    background: var(--fx-card);
    transition: border-color .25s, background-color .25s;
}

.ac-addr.is-default {
    border-color: var(--buttons);
    background: var(--fx-lime-soft);
}

.ac-addr.is-new {
    animation: fx-rise .45s var(--fx-ease) both;
}

.ac-addr__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 17px;
}

.ac-addr__head em {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--fx-surface);
    color: var(--fx-text);
    font-size: 16px;
}

.ac-addr.is-default .ac-addr__head em {
    background: var(--fx-card);
    color: var(--fx-brand-text);
}

.ac-pill--default {
    display: none;
    margin-inline-start: auto;
    background: var(--buttons);
    color: #FFFFFF;
}

.ac-addr.is-default .ac-pill--default {
    display: inline-block;
}

.ac-addr p {
    flex: 1;
    margin: 0 0 16px;
    color: var(--fx-muted);
    font-size: 15px;
    line-height: 1.6;
}

.ac-addr p strong {
    display: block;
    color: var(--fx-text);
}

.ac-addr__actions {
    display: flex;
    gap: 18px;
}

.ac-addr__actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 600;
}

.ac-addr__actions [data-ac-delete] {
    color: var(--fx-muted);
}

.ac-addr__actions [data-ac-delete]:hover {
    color: var(--fx-sale);
}

.ac-addr.is-default [data-ac-default] {
    display: none;
}

.ac-addr--new {
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 200px;
    border-style: dashed;
    background: transparent;
    color: var(--fx-text);
    font-size: 16px;
    cursor: pointer;
}

.ac-addr--new em {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fx-surface);
    font-size: 22px;
    transition: transform .4s var(--fx-spring), background-color .2s;
}

.ac-addr--new:hover {
    border-color: var(--buttons);
}

.ac-addr--new:hover em,
.ac-addr--new[aria-expanded="true"] em {
    background: var(--fx-lime);
    transform: rotate(90deg);
}

.ac-addr-form h2 {
    margin-bottom: 18px !important;
}

.ac-addr-form[hidden] {
    display: none;
}

.ac-form-actions {
    display: flex;
    gap: 10px;
}

.ac-form-actions .sp-tool {
    height: 54px;
    padding: 0 24px;
}

@media (max-width: 1199.98px) {
    .ac-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ac-wishes {
        --cols: 2 !important;
    }
}

@media (max-width: 991.98px) {
    .ac-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ac-side {
        position: static;
        padding: 8px;
        border-radius: 22px;
    }

    .ac-user,
    .ac-signout {
        display: none;
    }

    .ac-nav ul {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ac-nav a {
        white-space: nowrap;
    }

    .ac-two,
    .ac-addrs {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ac-hello img {
        display: none;
    }

    .ac-track li {
        font-size: 11px;
    }

    .ac-order__actions > * {
        flex: 1;
    }

    .ac-amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ac-wishes {
        --cols: 2 !important;
    }
}

body.market.dark-mode .ac-pill--processing {
    background: color-mix(in srgb, #FFC531 18%, var(--fx-card));
    color: #FFD45E !important;
}

[dir="rtl"] body.market :is(.ac-lead, .ac-user span, .ac-order__head span, .ac-order__info p, .ac-mini__line span, .ac-mini__sub, .ac-tx span, .ac-addr p, .ac-rewards p, .ac-hello p, .ac-bar__count) {
    unicode-bidi: plaintext;
}

[dir="rtl"] .ac-hello img {
    margin: -20px 0 -40px -10px;
}

/* avatar initials (the generic .ac-user span rule was winning) */
.ac-user .ac-user__avatar {
    overflow: visible;
    color: var(--fx-lime);
    font-size: 18px;
    font-weight: 700;
}

[dir="rtl"] body.market :is(.ac-quick strong, .ac-order__head strong, .ac-tx b, .ac-tx span strong, .ac-rewards h2) {
    unicode-bidi: plaintext;
}

/* ==========================================================================
   ACCOUNT – sign-out / delete-account actions + confirmation modals
   ========================================================================== */
.ac-side__end {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--fx-line);
}

.ac-side__end .ac-signout {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    text-align: start;
    transition: background-color .2s, color .2s;
}

.ac-side__end .ac-signout:hover {
    background: var(--fx-surface);
    color: var(--fx-text) !important;
}

.ac-side__end .ac-delete {
    padding-top: 10px;
    color: color-mix(in srgb, var(--fx-sale) 80%, var(--fx-muted)) !important;
}

.ac-side__end .ac-delete:hover {
    background: color-mix(in srgb, var(--fx-sale) 8%, transparent);
    color: var(--fx-sale) !important;
}

.ac-modal .modal-dialog {
    max-width: 440px;
}

.ac-modal .modal-content {
    align-items: center;
    padding: 32px 28px 26px;
    border: 0;
    border-radius: 28px;
    background: var(--fx-bg);
    color: var(--fx-text);
    text-align: center;
}

.ac-modal__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-size: 26px;
}

.ac-modal__icon em {
    color: inherit !important;
}

.ac-modal--danger .ac-modal__icon {
    background: color-mix(in srgb, var(--fx-sale) 12%, transparent);
    color: var(--fx-sale);
}

body.market .ac-modal h2 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ac-modal p {
    margin: 0 0 22px;
    color: var(--fx-muted);
    font-size: 16px;
    line-height: 1.55;
}

.ac-modal p strong {
    color: var(--fx-text);
}

.ac-modal__confirm {
    width: 100%;
    margin-bottom: 22px;
    text-align: start;
}

.ac-modal__confirm input {
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ac-modal__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.ac-modal__actions .sp-tool,
.ac-modal__actions .fx-btn {
    justify-content: center;
    height: 52px;
    min-height: 52px;
    padding: 0 16px;
    font-size: 15px;
}

.ac-modal__danger {
    background: var(--fx-sale);
}

.ac-modal__danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--fx-sale) 82%, #000);
    box-shadow: none;
}

.ac-modal__danger:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 991.98px) {
    /* the sidebar becomes a tab bar on small screens: keep the two actions under it */
    .ac-side__end {
        display: flex;
        gap: 4px;
    }

    .ac-side__end .ac-signout {
        display: flex;
        width: auto;
    }
}

[dir="rtl"] body.market .ac-modal p {
    unicode-bidi: plaintext;
}

/* confirmation dialogs stay compact (a site-wide rule widens .modal-dialog) */
.ac-modal {
    --bs-modal-width: 440px;
}

.ac-modal .modal-dialog {
    max-width: min(440px, calc(100% - 24px)) !important;
    margin-inline: auto;
}

.ac-modal .modal-dialog {
    min-width: 0 !important;
    width: auto !important;
}

.ac-modal p {
    text-wrap: balance;
}

/* ==========================================================================
   MY PROFILE (myprofile.html) – body.ac-page.mp-page, in-page panels
   ========================================================================== */
.mp-panel {
    display: grid;
    gap: 24px;
}

.mp-panel[hidden] {
    display: none;
}

.mp-panel.is-in {
    animation: fx-rise .4s var(--fx-ease) both;
}

.mp-link {
    padding: 0;
    border: 0;
    background: transparent;
}

.mp-info {
    display: grid;
    gap: 14px;
    margin: 0;
}

.mp-info > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--fx-line);
    font-size: 15px;
}

.mp-info > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.mp-info dt {
    color: var(--fx-muted);
    font-weight: 500;
}

.mp-info dd {
    margin: 0;
    color: var(--fx-text);
    font-weight: 600;
    text-align: end;
    overflow-wrap: anywhere;
}

.mp-prefs {
    display: grid;
    gap: 16px;
}

/* account details */
.mp-avatar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 16px;
    border-radius: 20px;
    background: var(--fx-surface);
}

.mp-avatar .ac-user__avatar {
    width: 64px;
    height: 64px;
    color: var(--fx-lime);
    font-size: 22px;
    font-weight: 700;
}

.ac-user__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.mp-avatar > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.mp-avatar strong {
    color: var(--fx-text);
    font-size: 16px;
}

.mp-upload {
    position: relative;
    height: 44px;
    cursor: pointer;
}

.mp-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.mp-upload:focus-within {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

.mp-gender {
    margin: 0;
    padding: 0;
    border: 0;
}

.mp-gender legend {
    float: left;
    width: 100%;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
}

.mp-gender .sp-choices {
    clear: both;
}

.mp-gender .sp-choices span {
    min-height: 48px;
}

.mp-sub {
    margin-top: 6px;
}

.mp-addrs {
    margin-bottom: 24px;
}

.mp-addrs .ac-addr p {
    margin-bottom: 0;
}

/* password */
.mp-note {
    margin: -6px 0 20px;
    color: var(--fx-muted);
    font-size: 15px;
}

.mp-pw__box {
    position: relative;
    display: block;
}

.mp-pw__box input {
    padding-inline-end: 52px !important;
}

.mp-pw__box button {
    position: absolute;
    top: 50%;
    inset-inline-end: 6px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--fx-muted);
    font-size: 17px;
    translate: 0 -50%;
}

.mp-pw__box button:hover,
.mp-pw__box button[aria-pressed="true"] {
    background: var(--fx-surface);
    color: var(--fx-text);
}

.mp-meter {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: -6px 0 14px;
    color: var(--fx-muted);
    font-size: 14px;
    font-weight: 600;
}

.mp-meter i {
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: var(--fx-surface);
    overflow: hidden;
}

.mp-meter b {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 6px;
    background: var(--fx-sale);
    transition: width .35s var(--fx-ease), background-color .35s;
}

.mp-meter b[data-level="2"] { background: #F59E0B; }
.mp-meter b[data-level="3"] { background: #84CC16; }
.mp-meter b[data-level="4"] { background: var(--buttons); }

.mp-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.mp-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fx-muted);
    font-size: 14px;
}

.mp-rules li::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--fx-line);
    border-radius: 50%;
    transition: background-color .2s, border-color .2s;
}

.mp-rules li.is-ok {
    color: var(--fx-text);
}

.mp-rules li.is-ok::before {
    border-color: var(--buttons);
    background:
        linear-gradient(var(--buttons), var(--buttons)),
        var(--buttons);
    box-shadow: inset 0 0 0 4px var(--fx-bg);
}

.mp-msg {
    min-height: 1.2em;
    margin: -6px 0 16px;
    font-size: 15px;
    font-weight: 600;
}

.mp-msg.is-error {
    color: var(--fx-sale);
}

.mp-msg.is-ok {
    color: var(--fx-brand-text);
}

@media (max-width: 575.98px) {
    .mp-avatar {
        flex-wrap: wrap;
    }

    .mp-rules {
        grid-template-columns: minmax(0, 1fr);
    }
}

[dir="rtl"] body.market :is(.mp-info dd, .mp-note, .mp-rules li, .mp-avatar > div span) {
    unicode-bidi: plaintext;
}

/* ==========================================================================
   MY PROFILE v2 (myprofile.html, body.pf-page) – profile cover + horizontal
   tabs; its own components (distinct from the My Profile 2 / account pages)
   ========================================================================== */
.pf-hero {
    padding: clamp(24px, 3vw, 40px) 0 0;
}

.pf-cover {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-top: 12px;
    padding: clamp(28px, 4vw, 48px);
    padding-top: clamp(64px, 8vw, 110px);
    border-radius: 32px;
    background:
        radial-gradient(circle at 88% 20%, rgba(212, 245, 138, .28) 0 18%, transparent 18.2%),
        radial-gradient(circle at 96% 92%, rgba(212, 245, 138, .16) 0 26%, transparent 26.2%),
        linear-gradient(120deg, var(--fx-deep) 0%, color-mix(in srgb, var(--buttons) 80%, #3E8E2F) 100%);
    color: #FFFFFF;
    overflow: hidden;
    isolation: isolate;
}

.pf-cover::after {
    /* fine dot texture */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .1) 1.2px, transparent 1.6px);
    background-size: 18px 18px;
    -webkit-mask: linear-gradient(180deg, #000, transparent 75%);
    mask: linear-gradient(180deg, #000, transparent 75%);
}

.pf-id {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.pf-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border: 5px solid rgba(255, 255, 255, .9);
    border-radius: 32px;
    background: var(--fx-lime) center / cover no-repeat;
    color: var(--fx-deep);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.02em;
    rotate: -4deg;
    transition: rotate .4s var(--fx-spring);
}

.pf-avatar:hover {
    rotate: 0deg;
}

.pf-avatar.has-img span {
    visibility: hidden;
}

.pf-tier {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 197, 49, .18);
    color: #FFD45E;
    font-size: 13px;
    font-weight: 700;
}

.pf-tier em {
    color: inherit !important;
}

body.market .pf-cover h1 {
    margin: 0 0 6px;
    color: #FFFFFF;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pf-id__sub {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
}

.pf-cover__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pf-cover__actions .fx-btn {
    min-height: 48px;
}

.pf-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: transparent;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s, border-color .2s;
}

.pf-ghost:hover {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, .1);
}

/* horizontal tabs */
.pf-tabs {
    position: sticky;
    top: var(--fx-header-h, 0px);
    z-index: 15;
    display: flex;
    gap: 4px;
    margin-top: 18px;
    padding: 6px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fx-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow-x: auto;
    scrollbar-width: none;
}

.pf-tabs::-webkit-scrollbar {
    display: none;
}

.pf-tabs button {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fx-muted);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}

.pf-tabs button:hover {
    color: var(--fx-text);
}

.pf-tabs button[aria-selected="true"] {
    background: var(--fx-text);
    color: var(--fx-bg);
}

.pf-tabs button:focus-visible {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

.pf-main {
    padding-top: clamp(20px, 2.5vw, 32px);
}

.pf-panel {
    display: grid;
    gap: 20px;
}

.pf-panel[hidden] {
    display: none;
}

.pf-panel.is-in {
    animation: fx-rise .4s var(--fx-ease) both;
}

.pf-panel:focus-visible {
    outline: 0;
}

/* shared card */
.pf-card {
    padding: clamp(20px, 2.4vw, 28px);
    border-radius: 28px;
    background: var(--fx-surface);
}

.pf-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 16px;
}

body.market .pf-card__head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.pf-big {
    margin: 0 0 4px;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pf-muted {
    margin: 0;
    color: var(--fx-muted);
    font-size: 15px;
}

.pf-center {
    text-align: center;
}

.pf-full {
    width: 100%;
    justify-content: center;
}

.pf-chip {
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 13px;
    font-weight: 700;
}

.pf-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fx-brand-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pf-tag {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    vertical-align: 1px;
}

.pf-tag--drop {
    background: color-mix(in srgb, var(--fx-sale) 12%, transparent);
    color: var(--fx-sale);
}

.pf-tag--low {
    background: #FFF4D6;
    color: #8A5A00;
}

.pf-tag--def {
    background: var(--fx-lime);
    color: var(--fx-deep);
}

/* dashboard bento */
.pf-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
}

.pf-card--delivery { grid-column: span 7; background: var(--fx-card); border: 1px solid var(--fx-line); }
.pf-card--points { grid-column: span 5; }
.pf-card--wallet { grid-column: span 5; }
.pf-card--actions { grid-column: span 7; background: var(--fx-card); border: 1px solid var(--fx-line); }
.pf-card--recent { grid-column: span 12; }

.pf-dots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 22px 0;
    padding: 0;
    list-style: none;
    counter-reset: dot;
}

.pf-dots li {
    position: relative;
    padding-top: 26px;
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.pf-dots li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border: 2px solid var(--fx-line);
    border-radius: 50%;
    background: var(--fx-card);
    z-index: 1;
}

.pf-dots li + li::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--fx-line);
}

[dir="rtl"] .pf-dots li + li::after {
    right: auto;
    left: 50%;
}

.pf-dots .is-done,
.pf-dots .is-current {
    color: var(--fx-text);
}

.pf-dots .is-done::before {
    border-color: var(--buttons);
    background: var(--buttons);
}

.pf-dots .is-done::after,
.pf-dots .is-current::after {
    background: var(--buttons) !important;
}

.pf-dots .is-current::before {
    border-color: var(--buttons);
    background: var(--fx-lime);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--fx-lime) 45%, transparent);
}

.pf-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pf-ring {
    --p: 50;
    position: relative;
    display: grid;
    place-items: center;
    width: 170px;
    aspect-ratio: 1;
    margin: 4px auto 16px;
    border-radius: 50%;
    background: conic-gradient(var(--buttons) calc(var(--p) * 1%), color-mix(in srgb, var(--fx-text) 8%, transparent) 0);
}

.pf-ring::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: var(--fx-surface);
}

.pf-ring span {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--fx-muted);
    font-size: 14px;
}

.pf-ring strong {
    color: var(--fx-text);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pf-card--points .sp-tool {
    margin-top: 16px;
}

.pf-card--wallet {
    background: var(--fx-deep);
    color: #FFFFFF;
}

body.market .pf-card--wallet h2 {
    color: #FFFFFF;
}

.pf-soft {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.pf-bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 110px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-bars li {
    position: relative;
    flex: 1;
    height: var(--h);
    border-radius: 10px 10px 4px 4px;
    background: rgba(212, 245, 138, .35);
    transition: background-color .2s;
}

.pf-bars li:last-child {
    background: var(--fx-lime);
}

.pf-bars li:hover {
    background: var(--fx-lime);
}

.pf-bars span {
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    text-align: center;
}

.pf-card--wallet .pf-bars {
    margin-bottom: 18px;
}

.pf-actions {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-actions a,
.pf-actions > li > div,
.pf-actions button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--fx-text) !important;
    text-align: start;
    text-decoration: none;
    transition: background-color .2s;
}

.pf-actions a:hover,
.pf-actions button:hover {
    background: var(--fx-surface);
}

.pf-actions em:first-child {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-size: 18px;
}

.pf-actions span {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.pf-actions strong {
    color: var(--fx-text);
    font-size: 15px;
}

.pf-actions .pf-code {
    flex: none;
    height: 40px;
}

.pf-actions .pf-code span {
    flex: none;
    display: inline;
    color: var(--fx-text);
}

.pf-recent {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-recent a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--fx-text) !important;
    text-decoration: none;
}

.pf-recent a > span {
    display: block;
    aspect-ratio: 1;
    margin-bottom: 8px;
    border-radius: 18px;
    background: var(--fx-card);
    overflow: hidden;
}

.pf-recent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--fx-ease);
}

.pf-recent a:hover img {
    transform: scale(1.06);
}

.pf-recent strong {
    font-size: 15px;
}

.pf-recent small {
    color: var(--fx-muted);
    font-size: 14px;
}

/* wallet */
.pf-wallet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.pf-wallet__left {
    display: grid;
    gap: 16px;
}

.pf-vcard {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1.6;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 28px;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(212, 245, 138, .35) 0%, transparent 45%),
        radial-gradient(90% 90% at 0% 100%, rgba(0, 0, 0, .35) 0%, transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--buttons) 85%, #3E8E2F), var(--fx-deep));
    color: #FFFFFF;
    overflow: hidden;
}

.pf-vcard::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    aspect-ratio: 1;
    border: 30px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.pf-vcard.is-pulse {
    animation: pf-pulse .6s var(--fx-spring);
}

@keyframes pf-pulse {
    40% { transform: scale(1.02) rotate(-.6deg); }
}

.pf-vcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: auto;
}

.pf-vcard__top img {
    height: 30px;
    width: auto;
}

.pf-vcard__chip {
    width: 46px;
    height: 34px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, .18) 45% 55%, transparent 55%),
        linear-gradient(0deg, transparent 45%, rgba(0, 0, 0, .18) 45% 55%, transparent 55%),
        linear-gradient(135deg, #F7E7A1, #C9A84C);
}

.pf-vcard__label {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
}

.pf-vcard__bal {
    margin: 0 0 16px;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pf-vcard__bottom {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
}

.pf-auto {
    align-items: flex-start !important;
    padding: 16px;
    border-radius: 20px;
    background: var(--fx-surface);
}

.pf-auto > span:last-child {
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.pf-auto strong {
    color: var(--fx-text);
    font-size: 15px;
}

.pf-topup {
    display: flex;
    flex-direction: column;
}

.pf-amount {
    display: block;
    margin: 4px 0 18px;
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pf-range {
    --fill: 10%;
    width: 100%;
    height: 8px;
    border-radius: 8px;
    background: linear-gradient(var(--buttons), var(--buttons)) 0 0 / var(--fill) 100% no-repeat, color-mix(in srgb, var(--fx-text) 10%, transparent);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

[dir="rtl"] .pf-range {
    background-position: 100% 0, 0 0;
}

.pf-range::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    border: 4px solid var(--buttons);
    border-radius: 50%;
    background: #FFFFFF;
    -webkit-appearance: none;
    appearance: none;
}

.pf-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 4px solid var(--buttons);
    border-radius: 50%;
    background: #FFFFFF;
}

.pf-range:focus-visible {
    outline: 2px solid var(--buttons);
    outline-offset: 6px;
}

.pf-range__ends {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 18px;
    color: var(--fx-muted);
    font-size: 13px;
}

.pf-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

.pf-presets button {
    min-height: 44px;
    border: 1.5px solid var(--fx-line);
    border-radius: 14px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 15px;
    font-weight: 700;
    transition: border-color .2s, background-color .2s;
}

.pf-presets button[aria-pressed="true"] {
    border-color: var(--buttons);
    background: var(--fx-lime-soft);
}

.pf-timeline h3 {
    margin: 0 0 10px;
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pf-timeline ol {
    position: relative;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.pf-timeline ol:last-child {
    margin-bottom: 0;
}

.pf-timeline ol::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    inset-inline-start: 7px;
    width: 2px;
    background: var(--fx-line);
}

.pf-timeline li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
}

.pf-timeline li.is-new {
    animation: fx-rise .45s var(--fx-ease) both;
}

.pf-timeline__dot {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    border: 3px solid var(--fx-surface);
    border-radius: 50%;
    background: var(--fx-muted);
    box-shadow: 0 0 0 2px var(--fx-line);
}

.pf-timeline .is-in .pf-timeline__dot {
    background: var(--buttons);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--buttons) 35%, transparent);
}

.pf-timeline__txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.pf-timeline__txt strong {
    color: var(--fx-text);
    font-size: 15px;
}

.pf-timeline b {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.pf-timeline .is-in b {
    color: var(--fx-brand-text);
}

/* wishlist rows */
.pf-wl-head {
    margin-bottom: 8px;
}

.pf-wl-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-wl-tools .sp-tool {
    height: 46px;
}

.pf-wl {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-wrow {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto auto 40px;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--fx-text) 8%, transparent);
}

.pf-wrow:last-child {
    border-bottom: 0;
}

.pf-wrow.is-leaving,
.pf-devices li.is-leaving {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .3s, transform .3s var(--fx-ease);
}

.pf-wrow__img {
    display: block;
    aspect-ratio: 1;
    border-radius: 18px;
    background: var(--fx-card);
    overflow: hidden;
}

.pf-wrow__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.market .pf-wrow h3 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
}

.pf-wrow h3 a {
    color: var(--fx-text) !important;
    text-decoration: none;
}

.pf-wrow__info p {
    margin: 0;
    color: var(--fx-muted);
    font-size: 14px;
}

.pf-wrow__price {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.pf-x {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fx-muted);
    font-size: 16px;
    transition: background-color .2s, color .2s;
}

.pf-x:hover {
    background: color-mix(in srgb, var(--fx-sale) 12%, transparent);
    color: var(--fx-sale);
}

.pf-wl[hidden] {
    display: none;
}

.pf-empty {
    padding: 40px 20px;
    text-align: center;
}

.pf-empty > em {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--fx-card);
    color: var(--fx-sale);
    font-size: 26px;
}

body.market .pf-empty h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
}

.pf-empty p {
    margin: 0 0 18px;
    color: var(--fx-muted);
}

/* details – settings rows */
.pf-settings {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.pf-settings .pf-card--rows:last-child {
    grid-column: 2;
}

.pf-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.pf-avatar--lg {
    width: 140px;
    height: 140px;
    border-color: var(--fx-card);
    font-size: 46px;
}

.pf-photo__btns {
    display: flex;
    gap: 8px;
}

.pf-upload {
    position: relative;
    cursor: pointer;
}

.pf-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.pf-upload:focus-within {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

.pf-photo__btns .sp-tool {
    height: 46px;
}

.pf-card--rows {
    background: var(--fx-card);
    border: 1px solid var(--fx-line);
}

.pf-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 20px;
    min-height: 64px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fx-line);
}

.pf-row:last-child {
    border-bottom: 0;
}

.pf-row__label {
    color: var(--fx-muted);
    font-size: 15px;
    font-weight: 500;
}

.pf-row__value {
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pf-row__edit {
    display: none;
}

.pf-row__edit input,
.pf-row__edit select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--buttons);
    border-radius: 12px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 16px;
    outline: 0;
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

.pf-row__btns {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pf-row__btns .pf-save,
.pf-row__btns [data-pf-cancel] {
    display: none;
}

.pf-save {
    min-height: 40px;
    padding: 0 18px;
    font-size: 14px;
}

.pf-row.is-editing {
    background: linear-gradient(var(--fx-lime-soft), var(--fx-lime-soft)) 0 0 / 100% 100% no-repeat;
    margin-inline: -14px;
    padding-inline: 14px;
    border-radius: 16px;
}

.pf-row.is-editing .pf-row__value,
.pf-row.is-editing [data-pf-edit] {
    display: none;
}

.pf-row.is-editing .pf-row__edit {
    display: block;
}

.pf-row.is-editing .pf-save,
.pf-row.is-editing [data-pf-cancel] {
    display: inline-flex;
}

.pf-addrs {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-addrs li {
    display: flex;
    gap: 14px;
    padding: 12px 0;
}

.pf-addrs em {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--fx-surface);
    font-size: 17px;
}

.pf-addrs span {
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.pf-addrs strong {
    color: var(--fx-text);
    font-size: 15px;
}

/* orders – expandable rows */
.pf-otable {
    display: grid;
    gap: 10px;
}

.pf-otable > .is-hidden {
    display: none;
}

.pf-ohead,
.pf-order summary {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .9fr) 40px;
    align-items: center;
    gap: 14px;
}

.pf-ohead {
    padding: 0 18px;
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pf-order {
    border-radius: 22px;
    background: var(--fx-card);
    border: 1px solid var(--fx-line);
    transition: border-color .2s;
}

.pf-order[open] {
    border-color: color-mix(in srgb, var(--buttons) 40%, var(--fx-line));
}

.pf-order summary {
    padding: 14px 18px;
    list-style: none;
    cursor: pointer;
}

.pf-order summary::-webkit-details-marker {
    display: none;
}

.pf-order summary:focus-visible {
    outline: 2px solid var(--buttons);
    outline-offset: -2px;
    border-radius: 22px;
}

.pf-order__no {
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.pf-order__no strong {
    color: var(--fx-text);
    font-size: 16px;
}

.pf-th {
    display: block;
    width: 46px;
    height: 46px;
    border: 3px solid var(--fx-card);
    border-radius: 14px;
    background: var(--fx-photo);
    overflow: hidden;
}

.pf-th + .pf-th {
    margin-inline-start: -12px;
}

.pf-th img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-order__total {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pf-order__chev {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fx-surface);
    transition: transform .3s var(--fx-ease);
}

.pf-order[open] .pf-order__chev {
    transform: rotate(180deg);
}

.pf-order__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    padding: 6px 18px 20px;
    animation: fx-rise .35s var(--fx-ease) both;
}

.pf-order__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-order__items li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fx-line);
}

.pf-order__items img {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--fx-photo);
    object-fit: cover;
}

.pf-order__items span {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 600;
}

.pf-order__items small {
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 400;
}

.pf-order__side {
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--fx-surface);
}

.pf-order__side .pf-dots {
    margin: 4px 0 18px;
}

.pf-order__side .pf-dots li::before {
    background: var(--fx-surface);
}

.pf-order__side .ct-rows {
    margin-bottom: 16px;
}

.pf-order__btns {
    display: flex;
    gap: 8px;
}

.pf-order__btns .sp-tool {
    height: 46px;
    color: var(--fx-text) !important;
    text-decoration: none;
}

/* security */
.pf-sec {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.pf-pass {
    background: var(--fx-card);
    border: 1px solid var(--fx-line);
}

.pf-sec__side {
    display: grid;
    gap: 20px;
}

.pf-sec__side .pf-auto {
    padding: 0;
    background: transparent;
}

.pf-devices {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-devices li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--fx-text) 8%, transparent);
}

.pf-devices li:last-child {
    border-bottom: 0;
}

.pf-devices em {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--fx-card);
    font-size: 17px;
}

.pf-devices span:not(.pf-tag) {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.pf-devices strong {
    color: var(--fx-text);
    font-size: 15px;
}

.pf-danger {
    border: 1.5px solid color-mix(in srgb, var(--fx-sale) 35%, transparent);
    background: color-mix(in srgb, var(--fx-sale) 5%, var(--fx-bg));
}

body.market .pf-danger h2 {
    color: var(--fx-sale);
}

.pf-danger .pf-muted {
    margin-bottom: 16px;
}

.pf-danger__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border: 1.5px solid var(--fx-sale);
    border-radius: 999px;
    background: transparent;
    color: var(--fx-sale);
    font-size: 15px;
    font-weight: 700;
    transition: background-color .2s, color .2s;
}

.pf-danger__btn:hover {
    background: var(--fx-sale);
    color: #FFFFFF;
}

/* responsive */
@media (max-width: 1199.98px) {
    .pf-recent {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pf-recent li:nth-child(5) {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .pf-card--delivery,
    .pf-card--points,
    .pf-card--wallet,
    .pf-card--actions {
        grid-column: span 12;
    }

    .pf-wallet,
    .pf-sec,
    .pf-settings,
    .pf-order__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-settings .pf-card--rows:last-child {
        grid-column: auto;
    }

    .pf-ohead {
        display: none;
    }

    .pf-order summary {
        grid-template-columns: minmax(0, 1fr) auto 36px;
        grid-template-areas:
            "no status chev"
            "thumbs total chev";
    }

    .pf-order__no { grid-area: no; }
    .pf-order summary .ac-thumbs { grid-area: thumbs; }
    .pf-order__total { grid-area: total; justify-self: end; }
    .pf-order summary > span:nth-child(4) { grid-area: status; justify-self: end; }
    .pf-order__chev { grid-area: chev; }
}

@media (max-width: 767.98px) {
    .pf-recent {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-recent li:nth-child(5) {
        display: block;
    }

    .pf-wrow {
        grid-template-columns: 64px minmax(0, 1fr) 36px;
        grid-template-areas:
            "img info x"
            "img price add";
        gap: 6px 14px;
    }

    .pf-wrow__img { grid-area: img; align-self: start; }
    .pf-wrow__info { grid-area: info; }
    .pf-wrow__price { grid-area: price; flex-direction: row; align-items: baseline; gap: 8px; }
    .pf-wrow .fx-add,
    .pf-wrow .fx-stepper { grid-area: add; justify-self: end; grid-column: 3 / 4; }
    .pf-x { grid-area: x; }

    .pf-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label btns"
            "value value";
        gap: 4px 12px;
        padding: 14px 0;
    }

    .pf-row__label { grid-area: label; }
    .pf-row__value,
    .pf-row__edit { grid-area: value; }
    .pf-row__btns { grid-area: btns; }
}

@media (max-width: 575.98px) {
    .pf-cover {
        padding-top: 48px;
        border-radius: 26px;
    }

    .pf-id {
        flex-direction: column;
        align-items: flex-start;
    }

    .pf-avatar {
        width: 88px;
        height: 88px;
        font-size: 30px;
        border-radius: 26px;
    }

    .pf-cover__actions > * {
        flex: 1;
        justify-content: center;
    }

    .pf-tabs {
        border-radius: 20px;
    }

    .pf-tabs button {
        flex: 0 0 auto;
    }

    .pf-amount {
        font-size: 46px;
    }

    .pf-wrow .fx-add {
        min-width: 70px;
    }
}

[dir="rtl"] body.market :is(.pf-id__sub, .pf-muted, .pf-soft, .pf-timeline__txt, .pf-wrow__info p, .pf-addrs span, .pf-devices span, .pf-actions span, .pf-auto > span:last-child, .pf-order__items small, .pf-ring span) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.market :is(.pf-vcard__bottom, .pf-amount, .pf-range__ends) {
    direction: ltr;
}

/* invite-code chip inside Quick actions keeps its chip look (not the full-width row button) */
.pf-actions .pf-code {
    flex: none;
    width: auto;
    height: 40px;
    padding: 0 14px;
    border: 1.5px dashed color-mix(in srgb, var(--fx-text) 35%, transparent);
    border-radius: 999px;
    background: var(--fx-card);
    gap: 8px;
}

.pf-actions .pf-code:hover {
    background: var(--fx-card);
    border-color: var(--fx-text);
}

.pf-actions .pf-code.is-copied {
    border-style: solid;
    border-color: var(--buttons);
    background: var(--buttons);
    color: #FFFFFF !important;
}

.pf-actions .pf-code em {
    width: auto;
    height: auto;
    background: none;
    color: inherit;
    font-size: 14px;
}

.pf-ohead {
    margin-bottom: 10px;
}

.pf-cover__actions .fx-btn,
.pf-ghost {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .pf-cover__actions .fx-btn,
    .pf-ghost {
        padding: 0 14px;
        font-size: 14px;
    }
}

/* ==========================================================================
   BLOG – journal home (blog.html, body.bl-page) + article (blog-details.html, body.bd-page)
   ========================================================================== */
.bl-head {
    padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 36px);
}

.bl-head__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 40px;
}

body.market .bl-head h1 {
    margin: 0 0 12px;
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}

.bl-head p {
    margin: 0;
    max-width: 48ch;
    color: var(--fx-muted);
    font-size: 17px;
}

.bl-search {
    position: relative;
    flex: 0 1 340px;
    margin: 0;
}

.bl-search em {
    position: absolute;
    inset-inline-start: 18px;
    top: 50%;
    translate: 0 -50%;
    color: var(--fx-muted);
    font-size: 17px;
}

.bl-search input {
    width: 100%;
    height: 52px;
    padding-inline: 48px 18px;
    border: 1.5px solid var(--fx-line);
    border-radius: 999px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 16px;
    outline: 0;
    transition: border-color .2s, box-shadow .2s;
}

.bl-search input:focus {
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

/* meta + chips */
.bl-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0 0 12px;
    color: var(--fx-muted);
    font-size: 14px;
}

.bl-cat {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-size: 13px;
    font-weight: 700;
}

.bl-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.bl-author > span:last-child {
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.bl-author strong {
    color: var(--fx-text);
    font-size: 15px;
}

.bl-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fx-deep);
    color: var(--fx-lime);
    font-size: 14px;
    font-weight: 700;
}

.bl-avatar--lg {
    width: 64px;
    height: 64px;
    font-size: 20px;
}

/* featured */
.bl-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    margin-bottom: clamp(40px, 5vw, 64px);
    padding: 14px;
    border-radius: 32px;
    background: var(--fx-surface);
}

.bl-feature__img {
    display: block;
    aspect-ratio: 16 / 11;
    border-radius: 24px;
    overflow: hidden;
}

.bl-feature__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--fx-ease);
}

.bl-feature:hover .bl-feature__img img {
    transform: scale(1.04);
}

.bl-feature__body {
    padding: 16px clamp(8px, 2vw, 28px) 16px 0;
}

[dir="rtl"] .bl-feature__body {
    padding: 16px 0 16px clamp(8px, 2vw, 28px);
}

body.market .bl-feature h2 {
    margin: 0 0 14px;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.bl-feature h2 a,
.bl-card h3 a {
    color: var(--fx-text) !important;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    transition: background-size .4s var(--fx-ease);
}

.bl-feature h2 a:hover,
.bl-card h3 a:hover {
    background-size: 100% 2px;
}

.bl-feature__body > p:not(.bl-meta):not(.bl-author) {
    margin: 0 0 22px;
    color: var(--fx-muted);
    font-size: 17px;
    line-height: 1.6;
}

.bl-feature .bl-author {
    margin-bottom: 24px;
}

/* bar + grid */
.bl-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.bl-bar .fx-tabs {
    max-width: 100%;
    overflow-x: auto;
}

.bl-count {
    margin: 0;
    color: var(--fx-muted);
}

.bl-count strong {
    color: var(--fx-text);
}

.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px clamp(16px, 2vw, 28px);
}

.bl-card[hidden] {
    display: none;
}

.bl-card {
    display: flex;
    flex-direction: column;
    animation: fx-rise .45s var(--fx-ease) both;
}

.bl-card__img {
    display: block;
    aspect-ratio: 4 / 3;
    margin-bottom: 16px;
    border-radius: 24px;
    background: var(--fx-photo);
    overflow: hidden;
}

.bl-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--fx-ease);
}

.bl-card:hover .bl-card__img img {
    transform: scale(1.05);
}

.bl-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.market .bl-card h3 {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.bl-card__ex {
    margin: 0 0 16px;
    color: var(--fx-muted);
    font-size: 15px;
    line-height: 1.55;
}

.bl-card .bl-author {
    margin-top: auto;
}

.bl-empty {
    margin-top: 8px;
}

.bl-more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.bl-more[hidden] {
    display: none;
}

.bl-more .sp-tool {
    height: 52px;
    padding: 0 28px;
}

/* ---------- article ---------- */
.bl-progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1100;
    height: 4px;
    pointer-events: none;
}

.bl-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--buttons), var(--fx-lime));
    transform: scaleX(0);
    transform-origin: left;
}

[dir="rtl"] .bl-progress i {
    transform-origin: right;
}

.bd-head {
    padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 36px);
}

.bd-head .sp-crumbs ol {
    margin-bottom: 22px;
}

body.market .bd-head h1 {
    max-width: 22ch;
    margin: 0 0 24px;
    font-size: clamp(34px, 4.6vw, 62px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
}

.bd-byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.bd-share {
    display: flex;
    gap: 8px;
}

.bd-share a,
.bd-share button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--fx-line);
    border-radius: 50%;
    background: transparent;
    color: var(--fx-text) !important;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .2s, color .2s, border-color .2s;
}

.bd-share em {
    color: inherit !important;
}

.bd-share a:hover,
.bd-share button:hover {
    border-color: var(--fx-text);
    background: var(--fx-text);
    color: var(--fx-bg) !important;
}

.bd-cover {
    margin: 0 0 clamp(36px, 5vw, 56px);
}

.bd-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    border-radius: 32px;
    object-fit: cover;
}

.bd-cover figcaption,
.bd-figure figcaption {
    margin-top: 10px;
    color: var(--fx-muted);
    font-size: 14px;
    text-align: center;
}

.bd-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 720px);
    justify-content: center;
    gap: clamp(32px, 5vw, 80px);
}

.bd-side {
    position: relative;
}

.bd-toc {
    position: sticky;
    top: calc(var(--fx-header-h, 0px) + 32px);
}

.bd-toc > p {
    margin: 0 0 12px;
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bd-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-inline-start: 2px solid var(--fx-line);
}

.bd-toc a {
    display: block;
    margin-inline-start: -2px;
    padding: 8px 0 8px 16px;
    border-inline-start: 2px solid transparent;
    color: var(--fx-muted) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s, border-color .2s;
}

[dir="rtl"] .bd-toc a {
    padding: 8px 16px 8px 0;
}

.bd-toc a:hover {
    color: var(--fx-text) !important;
}

.bd-toc a.is-active {
    border-color: var(--buttons);
    color: var(--fx-text) !important;
}

.bd-body {
    min-width: 0;
    color: var(--fx-text);
    font-size: 18px;
    line-height: 1.75;
}

.bd-body > p {
    margin: 0 0 22px;
    color: color-mix(in srgb, var(--fx-text) 85%, transparent);
}

.bd-lead {
    font-size: 22px;
    line-height: 1.6;
    color: var(--fx-text) !important;
}

body.market .bd-body h2 {
    margin: 48px 0 16px;
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    scroll-margin-top: calc(var(--fx-header-h, 0px) + 24px);
}

.bd-quote {
    margin: 36px 0;
    padding: 28px 32px;
    border-inline-start: 4px solid var(--fx-lime);
    border-radius: 0 24px 24px 0;
    background: var(--fx-lime-soft);
}

[dir="rtl"] .bd-quote {
    border-radius: 24px 0 0 24px;
}

.bd-quote p {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.4;
}

.bd-quote cite {
    color: var(--fx-muted);
    font-size: 15px;
    font-style: normal;
}

.bd-tip {
    display: flex;
    gap: 14px;
    margin: 0 0 22px;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--fx-surface);
}

.bd-tip em {
    flex: none;
    color: var(--buttons);
    font-size: 22px;
    line-height: 1.5;
}

.bd-tip p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

.bd-ingredients {
    margin: 0 0 28px;
    padding: 24px;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
}

.bd-ingredients__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

body.market .bd-ingredients h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.bd-ingredients h3 span {
    color: var(--fx-muted);
    font-weight: 500;
}

.bd-ingredients__n {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--fx-surface);
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 700;
}

.bd-ingredients__n.is-done {
    background: var(--fx-lime);
    color: var(--fx-deep);
}

.bd-ingredients ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.bd-ingredients label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px dashed var(--fx-line);
    font-size: 16px;
    cursor: pointer;
}

.bd-ingredients input {
    width: 22px;
    height: 22px;
    accent-color: var(--buttons);
}

.bd-ingredients input:checked + span {
    color: var(--fx-muted);
    text-decoration: line-through;
}

.bd-steps {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.bd-steps li {
    position: relative;
    margin-bottom: 16px;
    padding-inline-start: 52px;
    font-size: 17px;
    counter-increment: step;
}

.bd-steps li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--fx-deep);
    color: var(--fx-lime);
    font-size: 15px;
    font-weight: 700;
}

.bd-figure {
    margin: 0 0 28px;
}

.bd-figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    object-fit: cover;
    background: #FFFFFF;
}

.bd-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 36px 0;
    padding-top: 24px;
    border-top: 1px solid var(--fx-line);
    font-size: 15px;
}

.bd-tags span {
    color: var(--fx-muted);
    font-weight: 600;
}

.bd-tags a {
    padding: 6px 14px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    color: var(--fx-text) !important;
    font-size: 14px;
    text-decoration: none;
    transition: border-color .2s;
}

.bd-tags a:hover {
    border-color: var(--fx-text);
}

.bd-authorbox {
    display: flex;
    gap: 18px;
    margin-bottom: 48px;
    padding: 24px;
    border-radius: 24px;
    background: var(--fx-surface);
}

.bd-authorbox strong {
    font-size: 17px;
}

.bd-authorbox p {
    margin: 4px 0 0;
    color: var(--fx-muted);
    font-size: 15px;
    line-height: 1.6;
}

body.market .bd-comments h2 {
    margin-top: 0;
}

.bd-clist {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.bd-c {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--fx-line);
}

.bd-c.is-new {
    animation: fx-rise .45s var(--fx-ease) both;
}

.bd-c.is-reply {
    margin-inline-start: 54px;
}

.bd-c > div {
    flex: 1;
    min-width: 0;
}

.bd-c p {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.6;
}

.bd-c__head {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.bd-c__head span {
    color: var(--fx-muted);
    font-size: 13px;
}

.bd-c__to {
    color: var(--fx-brand-text);
    font-weight: 600;
}

.bd-cform {
    padding: 24px;
    border-radius: 24px;
    background: var(--fx-surface);
}

body.market .bd-cform h3 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
}

.bd-cform__reply {
    margin: -6px 0 14px;
    color: var(--fx-muted);
    font-size: 15px;
}

.bd-cform textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--fx-line);
    border-radius: 14px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 16px;
    outline: 0;
}

.bd-cform textarea:focus {
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

.bl-related .bl-card {
    animation: none;
}

@media (max-width: 991.98px) {
    .bl-feature,
    .bd-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bl-feature__body,
    [dir="rtl"] .bl-feature__body {
        padding: 6px 10px 12px;
    }

    .bl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bd-side {
        display: none;
    }

    .bl-related .bl-card:nth-child(3) {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .bl-search {
        flex-basis: 100%;
    }

    .bl-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bl-related .bl-card:nth-child(3) {
        display: flex;
    }

    .bd-cover img {
        aspect-ratio: 4 / 3;
        border-radius: 24px;
    }

    .bd-body {
        font-size: 17px;
    }

    .bd-lead {
        font-size: 19px;
    }

    .bd-quote {
        padding: 22px;
    }

    .bd-quote p {
        font-size: 20px;
    }

    .bd-c.is-reply {
        margin-inline-start: 24px;
    }
}

[dir="rtl"] body.market :is(.bl-head p, .bl-card__ex, .bl-author span, .bl-meta, .bd-body p, .bd-ingredients label, .bd-steps li, .bd-c p) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.market :is(.bl-meta > span, .bl-count, .bl-feature__body > p, .bl-search input, .bd-cover figcaption, .bd-figure figcaption, .bd-tip p, .bd-quote p, .bd-authorbox p) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.market .bl-search input {
    text-align: right;
}

/* pull quote: no side-stripe accent – soft panel with a large quote mark instead */
.bd-quote,
[dir="rtl"] .bd-quote {
    position: relative;
    border-inline-start: 0;
    border-radius: 24px;
    padding-top: 52px;
}

.bd-quote::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    inset-inline-start: 28px;
    color: var(--buttons);
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
}

/* ==========================================================================
   "MORE" PAGES – about, faq, contact, 404, typography, elements, progress,
   categories (body.pg-page). Shared page head + per-page blocks.
   ========================================================================== */
.pg-head {
    padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 40px);
}

.pg-head__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 40px;
}

body.market .pg-head h1 {
    max-width: 18ch;
    margin: 0 0 12px;
    font-size: clamp(38px, 5vw, 66px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.pg-head p {
    margin: 0;
    max-width: 52ch;
    color: var(--fx-muted);
    font-size: 17px;
    line-height: 1.55;
}

.pg-search {
    flex: 0 1 340px;
}

.pg-sec-head {
    margin-bottom: clamp(20px, 2.5vw, 32px);
}

body.market .pg-sec-head h2 {
    margin: 0;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* ---------- ABOUT ---------- */
.ab-sec {
    margin-top: clamp(56px, 7vw, 104px);
}

.ab-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.ab-lead {
    margin: 0 0 28px;
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.6;
    color: var(--fx-text);
}

.ab-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
}

.ab-hero__btns .sp-tool {
    height: 54px;
    padding: 0 24px;
    color: var(--fx-text) !important;
    text-decoration: none;
}

.ab-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 36px;
    margin: 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--fx-line);
    list-style: none;
}

.ab-facts li {
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.ab-facts strong {
    color: var(--fx-text);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ab-hero__art {
    position: relative;
    aspect-ratio: 1.1;
}

.ab-hero__art img {
    position: absolute;
    object-fit: cover;
    border-radius: 28px;
}

.ab-hero__a {
    inset: 0 18% 14% 0;
    width: 82%;
    height: 86%;
}

.ab-hero__b {
    right: 0;
    bottom: 0;
    width: 52%;
    height: 50%;
    border: 6px solid var(--fx-bg);
}

[dir="rtl"] .ab-hero__a {
    inset: 0 0 14% 18%;
}

[dir="rtl"] .ab-hero__b {
    right: auto;
    left: 0;
}

.ab-hero__badge {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 14px;
    font-weight: 700;
}

.ab-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.ab-story img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 28px;
    object-fit: cover;
}

body.market .ab-story h2 {
    margin: 0 0 16px;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.ab-story p {
    margin: 0 0 16px;
    color: var(--fx-muted);
    font-size: 17px;
    line-height: 1.65;
}

.ab-checks {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.ab-checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.ab-checks em {
    color: var(--buttons);
    font-size: 18px;
}

.ab-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: abs;
}

.ab-steps li {
    position: relative;
    padding: 24px;
    border-radius: 24px;
    background: var(--fx-surface);
    counter-increment: abs;
}

.ab-steps li::after {
    content: "0" counter(abs);
    position: absolute;
    top: 20px;
    inset-inline-end: 22px;
    color: color-mix(in srgb, var(--fx-text) 15%, transparent);
    font-size: 30px;
    font-weight: 800;
}

.ab-steps em {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 20px;
}

body.market .ab-steps h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
}

.ab-steps p {
    margin: 0;
    color: var(--fx-muted);
    font-size: 15px;
}

.ab-team {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ab-member {
    padding: 24px;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
    text-align: center;
    transition: border-color .25s, transform .4s var(--fx-ease);
}

.ab-member:hover {
    border-color: color-mix(in srgb, var(--fx-text) 25%, var(--fx-line));
    transform: translateY(-3px);
}

.ab-member__av {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    border-radius: 32px;
    background: var(--tint);
    color: var(--fx-deep);
    font-size: 30px;
    font-weight: 800;
    rotate: -4deg;
    transition: rotate .4s var(--fx-spring);
}

.ab-member:hover .ab-member__av {
    rotate: 0deg;
}

body.market .ab-member h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
}

.ab-member p {
    margin: 0 0 14px;
    color: var(--fx-muted);
    font-size: 14px;
}

.ab-member__social {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.ab-member__social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fx-surface);
    color: var(--fx-text) !important;
    font-size: 14px;
    text-decoration: none;
}

.ab-member__social a em {
    color: inherit !important;
}

.ab-quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ab-quotes figure {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 26px;
    border-radius: 24px;
    background: var(--fx-lime-soft);
}

.ab-quotes blockquote {
    flex: 1;
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.55;
}

.ab-quotes figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ab-quotes figcaption > span:last-child {
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 14px;
}

.ab-quotes strong {
    color: var(--fx-text);
}

.ab-partners {
    text-align: center;
}

.ab-partners p {
    margin: 0 0 20px;
    color: var(--fx-muted);
    font-size: 15px;
}

.ab-partners ul {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
    overflow: hidden;
}

.ab-partners li {
    display: grid;
    place-items: center;
    height: 100px;
    padding: 18px;
}

.ab-partners li + li {
    border-inline-start: 1px solid var(--fx-line);
}

.ab-partners img {
    max-width: 140px;
    max-height: 50px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .3s, opacity .3s;
}

.ab-partners li:hover img {
    filter: none;
    opacity: 1;
}

.ab-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-top: clamp(56px, 7vw, 104px);
    padding: clamp(28px, 4vw, 48px);
    border-radius: 32px;
    background:
        radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--buttons) 60%, #7DC24B) 0%, transparent 70%),
        var(--fx-deep);
    color: #FFFFFF;
}

body.market .ab-cta h2 {
    margin: 0 0 6px;
    color: #FFFFFF;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.ab-cta p {
    margin: 0;
    color: rgba(255, 255, 255, .8);
}

.ab-cta strong {
    color: var(--fx-lime);
}

/* ---------- FAQ ---------- */
.fq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
}

.fq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.fq-chips button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: transparent;
    color: var(--fx-text);
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s, border-color .2s, color .2s;
}

.fq-chips button:hover {
    border-color: var(--fx-text);
}

.fq-chips button[aria-selected="true"] {
    border-color: var(--fx-text);
    background: var(--fx-text);
    color: var(--fx-bg);
}

.fq-list {
    display: grid;
    gap: 10px;
}

.fq-item {
    border: 1px solid var(--fx-line);
    border-radius: 20px;
    background: var(--fx-card);
    transition: border-color .2s, background-color .2s;
}

.fq-item[hidden] {
    display: none;
}

.fq-item[open] {
    border-color: transparent;
    background: var(--fx-surface);
}

.fq-item summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    list-style: none;
    cursor: pointer;
}

.fq-item summary::-webkit-details-marker {
    display: none;
}

.fq-item summary:focus-visible {
    outline: 2px solid var(--buttons);
    outline-offset: -2px;
    border-radius: 20px;
}

.fq-item__cat {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-size: 12px;
    font-weight: 700;
}

.fq-item__q {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
}

.fq-item__icon {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fx-surface);
    transition: transform .3s var(--fx-ease), background-color .2s;
}

.fq-item__icon::before,
.fq-item__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background: var(--fx-text);
}

.fq-item__icon::after {
    transform: rotate(90deg);
    transition: transform .3s var(--fx-ease);
}

.fq-item[open] .fq-item__icon {
    background: var(--fx-text);
}

.fq-item[open] .fq-item__icon::before,
.fq-item[open] .fq-item__icon::after {
    background: var(--fx-bg);
}

.fq-item[open] .fq-item__icon::after {
    transform: rotate(0deg);
}

.fq-item p {
    margin: 0;
    padding: 0 20px 20px;
    color: var(--fx-muted);
    font-size: 16px;
    line-height: 1.65;
    animation: fx-rise .3s var(--fx-ease) both;
}

.fq-help {
    position: sticky;
    top: calc(var(--fx-header-h, 0px) + 24px);
    padding: 28px;
    border-radius: 28px;
    background: var(--fx-deep);
    color: #FFFFFF;
}

.fq-help__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: var(--fx-lime);
    color: var(--fx-deep);
    font-size: 22px;
}

.fq-help__icon em {
    color: inherit !important;
}

body.market .fq-help h2 {
    margin: 0 0 6px;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 700;
}

.fq-help > p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
}

.fq-help ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fq-help a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    color: #FFFFFF !important;
    text-decoration: none;
    transition: background-color .2s;
}

.fq-help a:hover {
    background: rgba(255, 255, 255, .14);
}

.fq-help a em {
    color: var(--fx-lime) !important;
    font-size: 17px;
}

.fq-help a span {
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.fq-help a strong {
    color: #FFFFFF;
    font-size: 15px;
}

/* ---------- CONTACT ---------- */
.cu-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 clamp(32px, 4vw, 48px);
    padding: 0;
    list-style: none;
}

.cu-cards a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
    color: var(--fx-muted) !important;
    font-size: 14px;
    text-decoration: none;
    transition: border-color .25s, transform .4s var(--fx-ease);
}

.cu-cards a:hover {
    border-color: var(--buttons);
    transform: translateY(-3px);
}

.cu-cards em {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text) !important;
    font-size: 20px;
}

.cu-cards strong {
    color: var(--fx-text);
    font-size: 18px;
}

.cu-cards span {
    margin: 4px 0 2px;
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 600;
}

.cu-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 3vw, 40px);
}

.cu-form {
    position: relative;
    padding: clamp(22px, 3vw, 36px);
    border-radius: 28px;
    background: var(--fx-surface);
}

body.market .cu-form h2 {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.cu-form .co-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--fx-line);
    border-radius: 14px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 16px;
    outline: 0;
}

.cu-form .co-field textarea:focus {
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

.co-field.is-bad textarea,
.co-field.is-bad select {
    border-color: var(--fx-sale) !important;
}

.cu-select select {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    border-width: 1.5px;
    background: var(--fx-card);
}

.cu-form .fx-btn {
    min-height: 54px;
}

.cu-done {
    padding: 24px 0 8px;
    text-align: center;
}

.cu-done p {
    margin: 0 0 20px;
    color: var(--fx-muted);
}

.cu-done .sp-tool {
    height: 48px;
}

.cu-side {
    display: grid;
    gap: 16px;
}

.cu-hours {
    padding: 24px;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
}

body.market .cu-hours h2 {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 700;
}

.cu-hours ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cu-hours li {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 15px;
}

.cu-hours li span:last-child {
    color: var(--fx-muted);
    font-variant-numeric: tabular-nums;
}

.cu-hours li.is-today {
    background: var(--fx-lime-soft);
    font-weight: 700;
}

.cu-hours li.is-today span:last-child {
    color: var(--fx-text);
}

.cu-map {
    position: relative;
    display: block;
    border-radius: 24px;
    overflow: hidden;
}

.cu-map img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .6s var(--fx-ease);
}

.cu-map:hover img {
    transform: scale(1.04);
}

.cu-map span {
    position: absolute;
    bottom: 14px;
    inset-inline-start: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 700;
}

/* ---------- 404 ---------- */
.er {
    padding: clamp(48px, 8vw, 110px) 0 0;
}

.er-box {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.er-art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.5vw, 16px);
    margin-bottom: 28px;
}

.er-digit {
    color: var(--fx-deep);
    font-size: clamp(120px, 22vw, 240px);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: .85;
}

.er-zero {
    display: grid;
    place-items: center;
    width: clamp(110px, 20vw, 210px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--fx-lime);
    animation: er-bob 4s ease-in-out infinite;
}

.er-zero img {
    width: 70%;
    rotate: -10deg;
}

@keyframes er-bob {
    50% { transform: translateY(-10px) rotate(6deg); }
}

body.market .er-box h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.er-box > p {
    margin: 0 auto 28px;
    max-width: 44ch;
    color: var(--fx-muted);
    font-size: 17px;
}

.er-search {
    margin: 0 auto 20px;
}

.er-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.er-links .sp-tool {
    height: 54px;
    padding: 0 24px;
    color: var(--fx-text) !important;
    text-decoration: none;
}

.er-popular {
    color: var(--fx-muted);
    font-size: 15px;
}

.er-popular a {
    margin: 0 8px;
    color: var(--fx-text) !important;
    font-weight: 600;
}

/* ---------- STYLEGUIDE (typography, elements, progress) ---------- */
.sg-nav {
    position: sticky;
    top: var(--fx-header-h, 0px);
    z-index: 10;
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 6px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fx-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow-x: auto;
    scrollbar-width: none;
}

.sg-nav a {
    flex: none;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--fx-muted) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.sg-nav a:hover {
    background: var(--fx-surface);
    color: var(--fx-text) !important;
}

.sg-sec {
    padding: clamp(28px, 4vw, 44px) 0;
    border-bottom: 1px solid var(--fx-line);
    scroll-margin-top: calc(var(--fx-header-h, 0px) + 80px);
}

.sg-sec:last-child {
    border-bottom: 0;
}

body.market .sg-title {
    margin: 0 0 22px;
    color: var(--fx-muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sg-scale > div {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--fx-line);
}

.sg-scale span {
    color: var(--fx-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.sg-scale p {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.sg-h1 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.035em !important; }
.sg-h2 { font-size: clamp(32px, 3.6vw, 46px); }
.sg-h3 { font-size: 28px; }
.sg-h4 { font-size: 22px; }
.sg-h5 { font-size: 18px; }
.sg-h6 { font-size: 15px; letter-spacing: 0 !important; }

.sg-grid2,
.sg-grid3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 40px;
}

.sg-grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sg-lead {
    margin: 0 0 16px;
    font-size: 21px;
    line-height: 1.55;
}

.sg-grid2 p {
    color: var(--fx-muted);
    line-height: 1.65;
}

.sg-small {
    font-size: 14px;
}

.sg-inline {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 20px 24px;
    border-radius: 20px;
    background: var(--fx-surface);
    list-style: none;
    font-size: 16px;
}

.sg-em {
    font-style: italic;
}

.sg-inline mark {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--fx-lime);
}

.sg-inline code,
.sg-inline kbd {
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--fx-card);
    color: var(--fx-sale);
    font-size: 14px;
}

.sg-inline kbd {
    border: 1px solid var(--fx-line);
    box-shadow: 0 2px 0 var(--fx-line);
    color: var(--fx-text);
}

.sg-label {
    margin: 0 0 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.sg-ul,
.sg-ol {
    margin: 0;
    padding-inline-start: 22px;
    font-size: 16px;
    line-height: 1.9;
}

.sg-ul li::marker,
.sg-ol li::marker {
    color: var(--buttons);
    font-weight: 700;
}

.sg-quote2 {
    margin: 0;
    padding: 28px;
    border-radius: 24px;
    background: var(--fx-deep);
    color: #FFFFFF;
}

.sg-quote2 p {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
    color: #FFFFFF !important;
}

.sg-quote2 cite {
    color: var(--fx-lime);
    font-size: 15px;
    font-style: normal;
}

.sg-alerts {
    display: grid;
    gap: 10px;
}

.sg-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 16px 18px;
    border-radius: 18px;
    font-size: 15px;
}

.sg-alert p {
    flex: 1;
    margin: 0;
}

.sg-alert > em {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    font-size: 16px;
}

.sg-alert--ok { background: var(--fx-lime-soft); color: var(--fx-deep); }
.sg-alert--info { background: #E5F0FF; color: #123A73; }
.sg-alert--warn { background: #FFF4D6; color: #6B4600; }
.sg-alert--err { background: color-mix(in srgb, var(--fx-sale) 12%, var(--fx-bg)); color: color-mix(in srgb, var(--fx-sale) 80%, #000); }

.sg-alert em {
    color: inherit !important;
}

.sg-alert__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
}

.sg-alert__close:hover {
    background: rgba(255, 255, 255, .6);
}

.sg-alert.fade:not(.show) {
    opacity: 0;
}

.sg-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--fx-line);
    border-radius: 20px;
}

.sg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.sg-table th,
.sg-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--fx-line);
    text-align: start;
}

.sg-table thead th {
    background: var(--fx-surface);
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sg-table tbody tr:last-child td {
    border-bottom: 0;
}

.sg-table tbody tr:hover {
    background: color-mix(in srgb, var(--fx-surface) 60%, transparent);
}

.sg-table .num {
    text-align: end;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sg-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.sg-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sg-cols > div {
    padding: 18px;
    border: 1.5px dashed color-mix(in srgb, var(--buttons) 35%, var(--fx-line));
    border-radius: 16px;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-weight: 700;
    text-align: center;
}

.sg-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.sg-row .fx-like {
    position: static;
}

.sg-on-light {
    border: 1px solid var(--fx-line) !important;
}

.sg-btn-lg {
    height: 54px;
    padding: 0 24px;
}

.sg-btn-sm {
    min-height: 42px;
    padding: 0 18px;
    font-size: 14px;
}

.fx-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.sg-fields {
    margin: 0;
}

.sg-fields textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--fx-line);
    border-radius: 14px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 16px;
    outline: 0;
}

.sg-stack {
    display: grid;
    align-content: start;
    gap: 18px;
}

.sg-range {
    display: grid;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.sg-range output {
    color: var(--fx-brand-text);
}

.sg-tabpanels {
    margin-top: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--fx-surface);
}

.sg-tabpanels p {
    margin: 0;
}

.sg-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.sg-pages {
    justify-content: flex-start;
    margin-top: 18px;
}

.sg-tip {
    position: relative;
    padding: 10px 2px;
    border-bottom: 1.5px dashed var(--fx-muted);
    font-size: 15px;
    font-weight: 600;
    cursor: help;
}

.sg-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    width: max-content;
    max-width: 240px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--fx-text);
    color: var(--fx-bg);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity .2s, transform .25s var(--fx-ease);
}

.sg-tip:hover::after,
.sg-tip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* progress */
.pb-bars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 40px;
}

.pb-bar__top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
}

.pb-bar__top strong {
    font-variant-numeric: tabular-nums;
}

.pb-bar__track {
    height: 12px;
    border-radius: 12px;
    background: var(--fx-surface);
    overflow: hidden;
}

.pb-bar__track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 12px;
    background: var(--buttons);
    transition: width 1.4s cubic-bezier(.2, .8, .2, 1);
}

.pb-bar__track.is-striped i {
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 10px, transparent 10px 20px),
        linear-gradient(90deg, var(--buttons), #84CC16);
    background-size: 28px 28px, 100% 100%;
    animation: pb-stripes 1s linear infinite;
}

@keyframes pb-stripes {
    to { background-position: 28px 0, 0 0; }
}

.is-run .pb-bar__track i {
    width: var(--v);
}

.pb-rings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.pb-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px;
    border-radius: 24px;
    background: var(--fx-surface);
    color: var(--fx-muted);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

@property --pbv {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.pb-ring__c {
    --pbv: 0;
    position: relative;
    display: grid;
    place-items: center;
    width: 140px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--buttons) calc(var(--pbv) * 1%), color-mix(in srgb, var(--fx-text) 8%, transparent) 0);
    transition: --pbv 1.4s cubic-bezier(.2, .8, .2, 1);
}

.is-run .pb-ring__c {
    --pbv: var(--v);
}

.pb-ring__c::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: var(--fx-surface);
}

.pb-ring__c strong {
    position: relative;
    color: var(--fx-text);
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pb-counters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-counters li {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
    color: var(--fx-muted);
    font-size: 15px;
}

.pb-counters strong {
    color: var(--fx-text);
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pb-steps-card {
    max-width: 720px;
    padding: 24px;
    border-radius: 24px;
    background: var(--fx-surface);
}

.pb-steps-card .pf-dots li::before {
    background: var(--fx-surface);
}

.pb-steps-card .sg-row {
    margin: 0;
}

/* ---------- CATEGORIES ---------- */
.cg-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.cg-feature a {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 26px;
    border-radius: 28px;
    color: var(--fx-text) !important;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}

.cg-feature__big {
    grid-row: span 2;
    min-height: 380px;
    background: var(--fx-lime-soft);
}

.cg-feature__sm {
    min-height: 182px;
}

.cg-feature__sm--a { background: #F6E3EA; }
.cg-feature__sm--b { background: #FFF4C9; }

.cg-feature span {
    display: flex;
    flex-direction: column;
    color: var(--fx-muted);
    font-size: 15px;
}

.cg-feature strong {
    color: var(--fx-text);
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.cg-feature img {
    position: absolute;
    z-index: -1;
    top: 50%;
    inset-inline-end: 4%;
    width: 50%;
    max-width: 320px;
    translate: 0 -50%;
    transition: transform .6s var(--fx-spring);
}

.cg-feature__sm img {
    width: 42%;
    max-width: 170px;
}

.cg-feature a:hover img {
    transform: rotate(-6deg) scale(1.06);
}

.cg-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cg-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid var(--fx-line);
    border-radius: 26px;
    transition: border-color .25s, transform .4s var(--fx-ease);
}

.cg-card[hidden] {
    display: none;
}

.cg-card:hover {
    border-color: color-mix(in srgb, var(--fx-text) 25%, var(--fx-line));
    transform: translateY(-3px);
}

.cg-card__img {
    display: grid;
    place-items: center;
    aspect-ratio: 1.3;
    border-radius: 20px;
    background: var(--tint);
    overflow: hidden;
}

.cg-card__img img {
    width: 62%;
    height: 80%;
    object-fit: contain;
    transition: transform .6s var(--fx-spring);
}

.cg-card__img img[src*="home-4"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.cg-card:hover .cg-card__img img {
    transform: scale(1.08) rotate(-4deg);
}

.cg-card__body {
    padding: 14px 10px 8px;
}

body.market .cg-card h2 {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 700;
}

.cg-card h2 a {
    color: var(--fx-text) !important;
    text-decoration: none;
}

.cg-card p {
    margin: 0 0 12px;
    color: var(--fx-muted);
    font-size: 14px;
}

.cg-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cg-card ul a {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--fx-surface);
    color: var(--fx-text) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s;
}

.cg-card ul a:hover {
    background: var(--fx-lime);
}

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    .ab-team,
    .cg-grid,
    .pb-rings,
    .pb-counters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ab-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .ab-hero,
    .ab-story,
    .fq-layout,
    .cu-layout,
    .sg-grid2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ab-quotes,
    .cu-cards,
    .sg-grid3,
    .sg-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .fq-help {
        position: static;
    }

    .ab-partners ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ab-partners li:nth-child(n+4) {
        border-top: 1px solid var(--fx-line);
    }

    .ab-partners li:nth-child(4) {
        border-inline-start: 0;
    }

    .pb-bars {
        grid-template-columns: minmax(0, 1fr);
    }

    .cg-feature {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

    .cg-feature__big {
        grid-row: auto;
        min-height: 240px;
    }

    .sg-cards {
        max-width: 420px;
    }
}

@media (max-width: 575.98px) {
    .pg-search {
        flex-basis: 100%;
    }

    .ab-steps,
    .ab-team,
    .cg-grid,
    .sg-cols--3,
    .sg-cols--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .sg-cols--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ab-partners ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sg-scale > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .pb-rings,
    .pb-counters {
        grid-template-columns: minmax(0, 1fr);
    }

    .fq-item summary {
        flex-wrap: wrap;
    }

    .fq-item__q {
        flex-basis: calc(100% - 50px);
        order: 2;
    }

    .fq-item__icon {
        order: 3;
    }

    .er-search {
        flex-wrap: wrap;
    }
}

body.market.dark-mode .sg-alert--info { background: #172A45; color: #CFE1FF; }
body.market.dark-mode .sg-alert--warn { background: #3A2C0B; color: #FFE3A3; }
body.market.dark-mode :is(.cg-card__img, .cg-feature a) { filter: saturate(.9); }

[dir="rtl"] body.market :is(.pg-head p, .ab-lead, .ab-story p, .ab-steps p, .ab-quotes blockquote, .fq-item p, .fq-help p, .cu-cards small, .cu-done p, .er-box > p, .sg-grid2 p, .sg-alert p, .cg-card p, .cg-feature span) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.market :is(.cu-hours li span:last-child, .pb-bar__top strong, .ab-facts strong) {
    direction: ltr;
}

[dir="rtl"] body.pg-page :is(.pg-head h1, .pg-sec-head h2, .fq-item__q, .fq-help h2, .fq-help a span, .er-box h1, .ab-story h2, .ab-cta h2, .ab-cta p, .cu-form h2, .sg-lead, .sg-quote2 p) {
    unicode-bidi: plaintext;
}

/* current page inside the header dropdowns */
body.market .fx-dd li > a[aria-current="page"] {
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text) !important;
}

body.market .fx-dd li > a[aria-current="page"] > em {
    background: var(--fx-brand);
    color: #FFFFFF !important;
}

/* 404 search: the shared .h4-search border uses Home 4 tokens (--h4-ink), which
   don't exist on this page – give it its own border */
.er-search {
    max-width: 520px;
    border: 1.5px solid var(--fx-line);
    background: var(--fx-card);
}

.er-search:hover {
    border-color: color-mix(in srgb, var(--fx-text) 30%, var(--fx-line));
}

.er-search:focus-within {
    border-color: var(--buttons);
    box-shadow: 0 0 0 4px var(--fx-brand-soft);
}

.er-search > em,
.er-search input::placeholder {
    color: var(--fx-muted);
}

.er-search input {
    color: var(--fx-text);
}

.er-search {
    border-color: color-mix(in srgb, var(--fx-text) 18%, transparent);
}

/* ==========================================================================
   ELEMENTS LIBRARY (elements.html) – component showcase grid
   ========================================================================== */
.el-lib .sg-sec {
    padding-top: clamp(32px, 4vw, 48px);
}

.el-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.el-item {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
    background: var(--fx-card);
}

.el-item--wide {
    grid-column: 1 / -1;
}

.el-cap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--fx-line);
    color: var(--fx-muted);
    font-size: 13px;
}

.el-cap code {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--fx-surface);
    color: var(--fx-brand-text);
    font-size: 13px;
    font-weight: 700;
}

.el-demo {
    min-width: 0;
}

.el-demo > .sg-row:last-child,
.el-demo .sg-row:last-child {
    margin-bottom: 0;
}

.el-demo .fx-card,
.el-demo .bl-card,
.el-demo .h3-deal {
    max-width: 320px;
}

.el-demo .h3-deal {
    max-width: none;
}

.el-dark {
    padding: 18px;
    border-radius: 18px;
    background: var(--fx-deep);
}

.el-dark .sg-row,
.el-dark.sg-row {
    margin: 0;
}

.el-dark--pill {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
}

.el-dark--pill .pf-tier {
    margin: 0;
}

.el-surface {
    padding: 18px;
    border-radius: 18px;
    background: var(--fx-surface);
}

.el-surface .pf-ring::before {
    background: var(--fx-surface);
}

.el-static,
.el-demo .ac-side,
.el-demo .bd-toc,
.el-demo .pf-tabs {
    position: static !important;
}

.el-demo .ac-side {
    max-width: 320px;
}

.el-demo .pf-tabs {
    margin-top: 0;
}

.el-h4 {
    --h4-ink: #121614;
    --h4-muted: #5B635E;
    --h4-surface: #F4F4F1;
    --h4-r: 24px;
}

body.market.dark-mode .el-h4 {
    --h4-ink: #EEF1EE;
    --h4-muted: #A7AFAA;
    --h4-surface: #18201C;
}

.el-2,
.el-3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.el-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.el-list,
.el-demo .pf-wl {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.el-fields {
    margin: 0;
}

.el-fields textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--fx-line);
    border-radius: 14px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 16px;
    outline: 0;
}

.el-demo .pf-amount {
    font-size: 40px;
}

.el-demo .ct-free {
    margin: 0;
}

.el-demo .h3-deals__timer .single_countdown {
    width: auto;
    flex: 1;
}

.el-demo .shop-list .sp-grid.is-list .sp-row {
    margin: 0;
}

@media (max-width: 991.98px) {
    .el-grid,
    .el-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .el-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .el-item {
        padding: 14px;
    }
}

[dir="rtl"] body.market .el-cap span {
    unicode-bidi: plaintext;
}

.el-demo .sp-row {
    max-width: none !important;
}

/* table caption sat flush against the rounded clip edge */
.pd-nutrition caption {
    padding-inline: 4px;
    text-align: start;
}

/* ==========================================================================
   Header search – category dropdown (jQuery niceSelect). The form used to clip
   it with overflow:hidden, so the list opened invisibly. Now: visible, styled.
   ========================================================================== */
body.market .searchbar_content form {
    overflow: visible !important;
}

body.market .searchbar_content .category_hover_content {
    position: relative;
    z-index: 70;
}

body.market .searchbar_content .nice-select {
    float: none;
    display: flex;
    align-items: center;
    height: 48px;
    line-height: 48px;
    border-radius: 12px 0 0 12px;
}

[dir="rtl"] body.market .searchbar_content .nice-select {
    border-radius: 0 12px 12px 0;
    padding-inline: 38px 18px;
    text-align: right !important;
}

body.market .searchbar_content .nice-select .current {
    overflow: hidden;
    max-width: 150px;
    text-overflow: ellipsis;
}

body.market .searchbar_content .nice-select::after {
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-width: 0 2px 2px 0;
}

[dir="rtl"] body.market .searchbar_content .nice-select::after {
    right: auto;
    left: 16px;
}

body.market .searchbar_content .nice-select .list {
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: max-content;
    min-width: 240px;
    max-height: min(380px, 60vh);
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid var(--fx-line);
    border-radius: 18px;
    background: var(--fx-card);
    box-shadow: 0 24px 50px -20px rgba(15, 21, 18, .35);
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .25s var(--fx-ease);
    scrollbar-width: thin;
}

[dir="rtl"] body.market .searchbar_content .nice-select .list {
    left: auto;
    right: 0;
}

body.market .searchbar_content .nice-select.open .list {
    transform: none;
}

body.market .searchbar_content .nice-select .option {
    position: relative;
    min-height: 0;
    padding: 10px 40px 10px 14px;
    border-radius: 12px;
    color: var(--fx-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: start;
    text-transform: none;
}

[dir="rtl"] body.market .searchbar_content .nice-select .option {
    padding: 10px 14px 10px 40px;
    text-align: right;
}

body.market .searchbar_content .nice-select .option:hover,
body.market .searchbar_content .nice-select .option.focus {
    background: var(--fx-surface) !important;
}

body.market .searchbar_content .nice-select .option.selected {
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-weight: 700;
}

body.market .searchbar_content .nice-select .option.selected::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: 16px;
    width: 6px;
    height: 11px;
    margin-top: -7px;
    border: solid var(--buttons);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

body.market .searchbar_content .nice-select .option:first-child {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--fx-line);
    border-radius: 12px 12px 0 0;
}

[dir="rtl"] body.market .searchbar_content .nice-select {
    padding-inline: 18px 40px;
}


/* ==========================================================================
   Shared components (every page)
   1. Sign in / create account modal  .au-*
   2. Drawers: mobile menu + mini cart .mk-drawer, .mk-menu, .mk-cart
   3. Mobile header + burger          .mk-burger
   4. Inner-page footer               .mk-footer
   5. Floating dock + customiser      .mk-dock, .mk-theme
   Behaviour: assets/js/market.js, module 22.
   ========================================================================== */

/* ---------- 1. Auth modal ---------- */
body.market .au-modal .modal-dialog {
    min-width: 0 !important;
    width: calc(100% - 24px) !important;
    max-width: 920px;
    margin-inline: auto;
}

body.market .au-modal .modal-content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: var(--fx-card);
    box-shadow: 0 40px 90px -30px rgba(3, 19, 10, .55);
}

body.market .au-close,
body.market .mk-x {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--fx-line);
    border-radius: 50%;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 16px;
    cursor: pointer;
    transition: transform .4s var(--fx-ease), background-color .2s, border-color .2s;
}

body.market .au-close:hover,
body.market .mk-x:hover {
    border-color: var(--fx-text);
    transform: rotate(90deg);
}

body.market .au-close {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    z-index: 3;
}

/* left visual */
body.market .au-art {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 100%;
    padding: 36px 34px 0;
    overflow: hidden;
    background:
        radial-gradient(120% 70% at 100% 100%, color-mix(in srgb, var(--fx-lime) 30%, transparent), transparent 60%),
        var(--fx-deep);
    color: #FFFFFF;
}

body.market .au-art__logo {
    width: 132px;
    height: auto;
}

body.market .au-art__title {
    margin: 10px 0 0;
    color: #FFFFFF;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
}

body.market .au-art__title span {
    display: block;
    color: var(--fx-lime);
}

body.market .au-art__perks {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.market .au-art__perks li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .86);
    font-size: 15px;
}

body.market .au-art__perks em {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--fx-lime);
    font-size: 15px;
}

body.market .au-art__img {
    position: relative;
    flex: 1;
    min-height: 170px;
    margin-top: auto;
}

body.market .au-art__img img {
    position: absolute;
    bottom: -18px;
    width: 58%;
    height: auto;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35));
    transition: transform .8s var(--fx-ease);
}

body.market .au-art__img img:first-child {
    inset-inline-start: -4%;
    transform: rotate(-8deg);
}

body.market .au-art__img img:last-child {
    inset-inline-end: -6%;
    bottom: 6px;
    width: 50%;
    transform: rotate(10deg);
}

body.market .au-modal.show .au-art__img img:first-child {
    transform: rotate(-4deg) translateY(-6px);
}

body.market .au-modal.show .au-art__img img:last-child {
    transform: rotate(6deg) translateY(-10px);
}

/* right form */
body.market .au-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 34px clamp(24px, 3.4vw, 44px) 36px;
}

body.market .au-tabs {
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    margin-bottom: 26px;
    padding: 4px;
    border-radius: 999px;
    background: var(--fx-surface);
}

body.market .au-tabs[hidden] {
    display: none;
}

body.market .au-tabs button {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fx-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .25s, color .25s, box-shadow .25s;
}

body.market .au-tabs button[aria-selected="true"] {
    background: var(--fx-card);
    color: var(--fx-text);
    box-shadow: 0 6px 16px -10px rgba(15, 21, 18, .45);
}

body.market .au-view:not([hidden]) {
    animation: au-in .45s var(--fx-ease) both;
}

@keyframes au-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

body.market .au-title {
    margin: 0 0 6px;
    color: var(--fx-text);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
}

body.market .au-sub {
    margin: 0 0 24px;
    color: var(--fx-muted);
    font-size: 15px;
    line-height: 1.55;
}

body.market .au-sub strong {
    color: var(--fx-text);
    unicode-bidi: plaintext;
}

body.market .au-form {
    display: grid;
    gap: 16px;
}

body.market .au-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

body.market .au-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

body.market .au-field label,
body.market .au-label-row {
    margin: 0;
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 600;
}

body.market .au-field label small {
    color: var(--fx-muted);
    font-weight: 400;
}

body.market .au-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

body.market .au-input {
    display: flex;
    align-items: center;
    min-height: 52px;
    overflow: hidden;
    border: 1.5px solid var(--fx-line);
    border-radius: 14px;
    background: var(--fx-card);
    transition: border-color .2s, box-shadow .2s;
}

body.market .au-input:focus-within {
    border-color: var(--fx-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-brand) 14%, transparent);
}

body.market .au-input input {
    flex: 1;
    min-width: 0;
    height: 49px;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fx-text);
    font-size: 16px;
}

body.market .au-input input::placeholder {
    color: color-mix(in srgb, var(--fx-muted) 70%, transparent);
}

body.market .au-input--phone input {
    direction: ltr;
}

[dir="rtl"] body.market .au-input--phone input {
    text-align: right;
}

body.market .au-cc {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 14px;
    border-inline-end: 1.5px solid var(--fx-line);
    background: var(--fx-surface);
    color: var(--fx-text);
    font-weight: 600;
    direction: ltr;
}

body.market .au-eye {
    display: inline-grid;
    place-items: center;
    width: 46px;
    align-self: stretch;
    border: 0;
    background: transparent;
    color: var(--fx-muted);
    cursor: pointer;
}

body.market .au-eye:hover {
    color: var(--fx-text);
}

body.market .au-err {
    display: none;
    margin: 0;
    color: var(--fx-sale);
    font-size: 13px;
}

body.market .is-bad > .au-err,
body.market .au-err.is-on {
    display: block;
}

body.market .au-field.is-bad .au-input {
    border-color: var(--fx-sale);
}

body.market .au-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--fx-brand-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
    cursor: pointer;
}

body.market .au-link:hover {
    text-decoration-color: currentColor;
}

body.market .au-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--fx-muted);
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}

body.market .au-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--fx-brand);
}

body.market .au-check a {
    color: var(--fx-text);
    font-weight: 600;
}

body.market .au-btn,
body.market .mk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border: 1.5px solid var(--fx-brand);
    border-radius: 999px;
    background: var(--fx-brand);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s, border-color .25s, color .25s, transform .4s var(--fx-ease);
}

body.market .au-btn:hover,
body.market .mk-btn:hover {
    border-color: var(--fx-brand-hover);
    background: var(--fx-brand-hover);
    color: #FFFFFF;
}

body.market .au-btn:active,
body.market .mk-btn:active {
    transform: scale(.98);
}

body.market .au-btn em,
body.market .mk-btn em {
    transition: transform .4s var(--fx-ease);
}

body.market .au-btn:hover em.fa-arrow-right,
body.market .mk-btn:hover em.fa-arrow-right {
    transform: translateX(4px);
}

[dir="rtl"] body.market :is(.au-btn, .mk-btn):hover em.fa-arrow-right {
    transform: translateX(-4px);
}

body.market .au-btn--ghost,
body.market .mk-btn--ghost {
    border-color: var(--fx-line);
    background: transparent;
    color: var(--fx-text);
}

body.market .au-btn--ghost:hover,
body.market .mk-btn--ghost:hover {
    border-color: var(--fx-text);
    background: transparent;
    color: var(--fx-text);
}

body.market .au-btn.is-busy {
    pointer-events: none;
    opacity: .75;
}

body.market .au-or {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--fx-muted);
    font-size: 13px;
}

body.market .au-or::before,
body.market .au-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fx-line);
}

body.market .au-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fx-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

body.market .au-back:hover {
    color: var(--fx-text);
}


body.market .au-badge {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-size: 24px;
}

/* password strength */
body.market .au-meter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -6px;
    color: var(--fx-muted);
    font-size: 13px;
}

body.market .au-meter i {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

body.market .au-meter b {
    height: 5px;
    border-radius: 3px;
    background: var(--fx-line);
    transition: background-color .3s;
}

body.market .au-meter[data-level="1"] b:nth-child(-n+1) { background: var(--fx-sale); }
body.market .au-meter[data-level="2"] b:nth-child(-n+2) { background: var(--fx-star); }
body.market .au-meter[data-level="3"] b:nth-child(-n+3) { background: color-mix(in srgb, var(--fx-brand) 60%, var(--fx-lime)); }
body.market .au-meter[data-level="4"] b { background: var(--fx-brand); }

/* OTP */
body.market .au-otp {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    direction: ltr;
}

body.market .au-otp input {
    width: 100%;
    height: 60px;
    padding: 0;
    border: 1.5px solid var(--fx-line);
    border-radius: 14px;
    outline: 0;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    transition: border-color .2s, box-shadow .2s, transform .3s var(--fx-spring);
}

body.market .au-otp input:focus {
    border-color: var(--fx-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-brand) 14%, transparent);
}

body.market .au-otp input.is-filled {
    border-color: var(--fx-brand);
    background: var(--fx-brand-soft);
    transform: translateY(-2px);
}

body.market .au-otp.is-bad input {
    border-color: var(--fx-sale);
    animation: au-shake .4s;
}

@keyframes au-shake {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

body.market .au-resend {
    margin: 0;
    color: var(--fx-muted);
    font-size: 14px;
}

body.market .au-resend b {
    color: var(--fx-text);
}

body.market .au-hint {
    margin: 0;
    color: var(--fx-muted);
    font-size: 13px;
    text-align: center;
}

/* done */
body.market .au-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 360px;
    text-align: center;
}

body.market .au-done[hidden] {
    display: none;
}

body.market .au-done__icon {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--fx-brand);
    color: #FFFFFF;
    font-size: 38px;
    box-shadow: 0 0 0 10px var(--fx-brand-soft);
    animation: au-pop .6s var(--fx-spring) both;
}

@keyframes au-pop {
    from {
        transform: scale(.4);
        opacity: 0;
    }
}

body.market .au-done .au-btn {
    min-width: 220px;
}

@media (max-width: 767.98px) {
    body.market .au-modal .modal-content {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    body.market .au-art {
        display: none;
    }

    body.market .au-main {
        padding: 26px 20px 28px;
    }

    body.market .au-row {
        grid-template-columns: 1fr;
    }

    body.market .au-otp {
        gap: 7px;
    }

    body.market .au-otp input {
        height: 52px;
        font-size: 20px;
    }

    body.market .au-close {
        top: 14px;
        inset-inline-end: 14px;
    }
}

/* ---------- 2. Drawers ---------- */
body.market .mk-scrim {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(5, 14, 9, .5);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .35s ease;
}

body.market .mk-scrim.is-on {
    opacity: 1;
}

body.market .mk-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    width: min(420px, 92vw);
    background: var(--fx-card);
    color: var(--fx-text);
    box-shadow: 0 0 60px -10px rgba(3, 19, 10, .35);
    visibility: hidden;
    outline: 0;
    transition: transform .5s var(--fx-ease), visibility 0s linear .5s;
}

body.market .mk-drawer.is-open {
    visibility: visible;
    transform: none;
    transition: transform .5s var(--fx-ease), visibility 0s;
}

body.market .mk-menu {
    inset-inline-start: 0;
    width: min(360px, 88vw);
    transform: translateX(-100%);
}

body.market .mk-cart {
    inset-inline-end: 0;
    transform: translateX(100%);
}

[dir="rtl"] body.market .mk-menu {
    transform: translateX(100%);
}

[dir="rtl"] body.market .mk-cart {
    transform: translateX(-100%);
}

body.market .mk-drawer.is-open {
    transform: none;
}

body.market .mk-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--fx-line);
}

body.market.mk-lock {
    overflow: hidden;
}

/* mobile menu */
body.market .mk-menu {
    overflow-y: auto;
    scrollbar-width: thin;
}

body.market .mk-menu__logo img {
    width: 128px;
    height: auto;
}

/* mobile menu logo: colour / white pair, see "Logo pairs" at the end */

body.market .mk-menu__search {
    position: relative;
    margin: 18px 20px 0;
}

body.market .mk-menu__search em {
    position: absolute;
    top: 50%;
    inset-inline-start: 16px;
    color: var(--fx-muted);
    transform: translateY(-50%);
}

body.market .mk-menu__search input {
    width: 100%;
    height: 48px;
    padding-inline: 44px 16px;
    border: 1.5px solid var(--fx-line);
    border-radius: 999px;
    outline: 0;
    background: var(--fx-surface);
    color: var(--fx-text);
    font-size: 15px;
}

body.market .mk-menu__search input:focus {
    border-color: var(--fx-brand);
    background: var(--fx-card);
}

body.market .mk-menu__quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 16px 20px 6px;
}

body.market .mk-menu__quick :is(a, button) {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border: 0;
    border-radius: 16px;
    background: var(--fx-surface);
    color: var(--fx-text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, transform .3s var(--fx-ease);
}

body.market .mk-menu__quick :is(a, button):hover {
    background: var(--fx-lime-soft);
    transform: translateY(-2px);
}

body.market .mk-menu__quick em {
    color: var(--fx-brand-text);
    font-size: 19px;
}

body.market .mk-nav {
    flex: 1;
    padding: 6px 20px;
}

body.market .mk-nav > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.market .mk-nav > ul > li {
    border-bottom: 1px solid var(--fx-line);
}

body.market .mk-nav__toggle,
body.market .mk-nav__link {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

body.market .mk-nav__toggle > em:first-child,
body.market .mk-nav__link > em {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--fx-surface);
    color: var(--fx-brand-text);
    font-size: 15px;
}

body.market .mk-nav__toggle span,
body.market .mk-nav__link span {
    flex: 1;
}

body.market .mk-nav__chev {
    color: var(--fx-muted);
    transition: transform .35s var(--fx-ease);
}

body.market .mk-nav__group.is-open .mk-nav__chev {
    transform: rotate(180deg);
}

body.market .mk-nav__link[aria-current="page"],
body.market .mk-nav__group:has([aria-current="page"]) > .mk-nav__toggle {
    color: var(--fx-brand-text);
}

body.market .mk-nav__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--fx-ease);
}

body.market .mk-nav__group.is-open .mk-nav__panel {
    grid-template-rows: 1fr;
}

body.market .mk-nav__panel > ul {
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

body.market .mk-nav__group.is-open .mk-nav__panel > ul {
    padding-bottom: 12px;
}

body.market .mk-nav__panel a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-inline-start: 48px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--fx-muted);
    font-size: 15px;
    text-decoration: none;
    visibility: hidden;
    transition: background-color .2s, color .2s;
}

body.market .mk-nav__group.is-open .mk-nav__panel a {
    visibility: visible;
}

body.market .mk-nav__panel a small {
    color: var(--fx-muted);
    font-size: 12px;
    opacity: .8;
}

body.market .mk-nav__panel a:hover {
    background: var(--fx-surface);
    color: var(--fx-text);
}

body.market .mk-nav__panel a[aria-current="page"] {
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-weight: 600;
}

body.market .mk-menu__foot {
    display: grid;
    gap: 14px;
    padding: 18px 20px 24px;
}

body.market .mk-menu__help {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--fx-deep);
    color: #FFFFFF;
    text-decoration: none;
}

body.market .mk-menu__help em {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--fx-lime);
    font-size: 18px;
}

body.market .mk-menu__help small {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
}

body.market .mk-menu__help b {
    color: #FFFFFF;
    font-size: 16px;
    direction: ltr;
    unicode-bidi: isolate;
}

body.market .mk-menu__row {
    display: flex;
    gap: 8px;
}

body.market .mk-menu__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: transparent;
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

body.market .mk-menu__chip:first-child {
    flex: 1;
}

body.market .mk-menu__chip:hover {
    border-color: var(--fx-text);
    color: var(--fx-text);
}

body.market .mk-menu__chip[aria-pressed="true"] {
    border-color: var(--fx-brand);
    background: var(--fx-brand-soft);
}

body.market .mk-social {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.market .mk-social a {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--fx-line);
    border-radius: 50%;
    color: var(--fx-text);
    font-size: 15px;
    transition: background-color .2s, color .2s, border-color .2s, transform .3s var(--fx-ease);
}

body.market .mk-social a:hover {
    border-color: var(--fx-brand);
    background: var(--fx-brand);
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* mini cart */
body.market .mk-cart__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--fx-text);
    font-size: 22px;
    font-weight: 700;
}

body.market .mk-cart__title span {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--fx-lime);
    color: #0F1512;
    font-size: 14px;
}

body.market .mk-free {
    padding: 16px 20px;
    background: var(--fx-surface);
}

body.market .mk-free p {
    margin: 0 0 10px;
    color: var(--fx-text);
    font-size: 14px;
}

body.market .mk-free p strong {
    color: var(--fx-brand-text);
}

body.market .mk-free i {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--fx-line);
}

body.market .mk-free b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--fx-brand), color-mix(in srgb, var(--fx-brand) 50%, var(--fx-lime)));
    transition: width .6s var(--fx-ease);
}

body.market .mk-free.is-done b {
    background: var(--fx-brand);
}

body.market .mk-cart__scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
}

body.market .mk-items {
    margin: 0;
    padding: 6px 20px;
    list-style: none;
}

body.market .mk-item {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--fx-line);
    animation: mk-item-in .45s var(--fx-ease) both;
}

@keyframes mk-item-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

body.market .mk-item.is-leaving {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity .3s, transform .3s var(--fx-ease);
}

body.market .mk-item__img {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: var(--fx-photo);
}

body.market .mk-item__img img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    transition: transform .5s var(--fx-ease);
}

body.market .mk-item:hover .mk-item__img img {
    transform: scale(1.06);
}

body.market .mk-item__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

body.market .mk-item__name {
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

body.market .mk-item__name:hover {
    color: var(--fx-brand-text);
}

body.market .mk-item__meta {
    color: var(--fx-muted);
    font-size: 13px;
}

body.market .mk-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

body.market .mk-item__price {
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 700;
    unicode-bidi: plaintext;
}

body.market .mk-qty {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 3px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
}

body.market .mk-qty button {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fx-text);
    font-size: 12px;
    cursor: pointer;
    transition: background-color .2s;
}

body.market .mk-qty button:hover {
    background: var(--fx-surface);
}

body.market .mk-qty output {
    min-width: 26px;
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

body.market .mk-item__remove {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fx-muted);
    font-size: 15px;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

body.market .mk-item__remove:hover {
    background: color-mix(in srgb, var(--fx-sale) 12%, transparent);
    color: var(--fx-sale);
}

body.market .mk-upsell {
    margin: 8px 20px 20px;
    padding: 16px;
    border: 1px dashed var(--fx-line);
    border-radius: 18px;
}

body.market .mk-upsell[hidden] {
    display: none;
}

body.market .mk-upsell__title {
    margin: 0 0 12px;
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 600;
}

body.market .mk-upsell__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.market .mk-upsell__item img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--fx-photo);
    object-fit: cover;
}

body.market .mk-upsell__item span {
    display: grid;
    flex: 1;
    color: var(--fx-text);
    font-size: 15px;
}

body.market .mk-upsell__item small {
    color: var(--fx-muted);
    font-size: 14px;
}

body.market .mk-upsell__add {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--fx-lime);
    color: #0F1512;
    cursor: pointer;
    transition: transform .3s var(--fx-spring);
}

body.market .mk-upsell__add:hover {
    transform: scale(1.1) rotate(90deg);
}

body.market .mk-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 56px 28px;
    text-align: center;
}

body.market .mk-empty[hidden] {
    display: none;
}

body.market .mk-empty__icon {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--fx-lime-soft);
    color: var(--fx-brand-text);
    font-size: 34px;
}

body.market .mk-empty__title {
    margin: 0;
    color: var(--fx-text);
    font-size: 20px;
    font-weight: 700;
}

body.market .mk-empty p {
    margin: 0 0 14px;
    color: var(--fx-muted);
}

body.market .mk-drawer__foot {
    padding: 18px 20px 22px;
    border-top: 1px solid var(--fx-line);
    background: var(--fx-card);
}

body.market .mk-drawer__foot[hidden] {
    display: none;
}

body.market .mk-sub {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    color: var(--fx-text);
    font-size: 16px;
}

body.market .mk-sub strong {
    font-size: 22px;
    unicode-bidi: plaintext;
}

body.market .mk-note {
    margin: 4px 0 16px;
    color: var(--fx-muted);
    font-size: 13px;
}

body.market .mk-actions {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 10px;
}

body.market .mk-actions .mk-btn {
    min-height: 50px;
    padding: 0 16px;
}

/* ---------- 3. Mobile header ---------- */
body.market .mk-burger {
    display: none;
}

@media (max-width: 991.98px) {
    body.market .mk-burger {
        position: relative;
        display: inline-grid;
        flex: none;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 14px;
        background: rgba(255, 255, 255, .14);
        cursor: pointer;
    }

    body.market .mk-burger span,
    body.market .mk-burger span::before,
    body.market .mk-burger span::after {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #FFFFFF;
        transition: transform .3s var(--fx-ease), width .3s var(--fx-ease);
    }

    body.market .mk-burger span {
        position: relative;
    }

    body.market .mk-burger span::before,
    body.market .mk-burger span::after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
    }

    body.market .mk-burger span::before {
        top: -6px;
    }

    body.market .mk-burger span::after {
        top: 6px;
        width: 12px;
    }

    body.market .mk-burger:hover span::after {
        width: 18px;
    }

    body.market .middle_content .logo {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body.market .middle_content .logo a {
        display: inline-flex;
    }

    body.market .middle_content .logo img {
        width: 132px;
        height: auto;
    }

    body.market .middle_content .row {
        flex-wrap: nowrap;
        align-items: center;
    }

    body.market .middle_content .row > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
    }

    body.market .middle_content .row > [class*="col-"]:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.market .middle_content .content_right_info,
    body.market .middle_content .header_account_area {
        justify-content: flex-end;
        margin: 0;
    }
}

@media (max-width: 575.98px) {
    body.market .middle_content .login-sec em > button {
        font-size: 0;
    }

    body.market .middle_content .header_account_area {
        gap: 4px;
    }

    body.market .middle_content .logo img {
        width: 116px;
    }
}

/* light headers (Home 3 and 4) */
body.home-3 .mk-burger,
body.home-4 .mk-burger {
    background: var(--fx-surface);
}

body.home-3 .mk-burger span,
body.home-3 .mk-burger span::before,
body.home-3 .mk-burger span::after,
body.home-4 .mk-burger span,
body.home-4 .mk-burger span::before,
body.home-4 .mk-burger span::after {
    background: var(--fx-text);
}

/* ---------- 4. Footer ---------- */
body.market .mk-footer {
    margin-top: var(--fx-section);
    padding: 0 0 28px;
    background:
        radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--fx-lime) 12%, transparent), transparent 70%),
        var(--fx-deep);
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
}

body.market .fx-news + .mk-footer,
body.market .fx-news + * + .mk-footer {
    margin-top: 0;
}

body.market .mk-footer__trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    list-style: none;
}

body.market .mk-footer__trust li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 30px 20px;
}

body.market .mk-footer__trust li:first-child {
    padding-inline-start: 0;
}

body.market .mk-footer__trust li + li {
    border-inline-start: 1px solid rgba(255, 255, 255, .1);
}

body.market .mk-footer__trust em {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    color: var(--fx-lime);
    font-size: 20px;
    transition: transform .4s var(--fx-spring);
}

body.market .mk-footer__trust li:hover em {
    transform: rotate(-8deg) scale(1.08);
}

body.market .mk-footer__trust span {
    display: grid;
    font-size: 14px;
}

body.market .mk-footer__trust strong {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
}

body.market .mk-footer__main {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr;
    gap: 40px;
    padding: 56px 0 48px;
}

body.market .mk-footer__brand img {
    width: 160px;
    height: auto;
}

body.market .mk-footer__brand p {
    max-width: 300px;
    margin: 18px 0 22px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.6;
}

body.market .mk-footer .mk-social a {
    border-color: rgba(255, 255, 255, .18);
    color: #FFFFFF;
}

body.market .mk-footer .mk-social a:hover {
    border-color: var(--fx-lime);
    background: var(--fx-lime);
    color: #0F1512;
}

body.market .mk-footer__col h3 {
    margin: 0 0 18px;
}

body.market .mk-footer__col h3 button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-align: start;
    pointer-events: none;
}

body.market .mk-footer__col h3 em {
    display: none;
}

body.market .mk-footer__col ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.market .mk-footer__col a {
    position: relative;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .2s;
}

body.market .mk-footer__col ul a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -3px;
    height: 1px;
    background: var(--fx-lime);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform .35s var(--fx-ease);
}

body.market .mk-footer__col a:hover {
    color: var(--fx-lime);
}

body.market .mk-footer__col ul a:hover::after {
    transform: scaleX(1);
}

body.market .mk-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
}

body.market .mk-footer__contact em {
    flex: none;
    margin-top: 3px;
    color: var(--fx-lime);
}

body.market .mk-footer__contact a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

body.market .mk-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
}

body.market .mk-footer__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
}

body.market .mk-footer__bottom p a {
    color: #FFFFFF;
    font-weight: 600;
}

body.market .mk-footer__legal {
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.market .mk-footer__legal a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
}

body.market .mk-footer__legal a:hover {
    color: var(--fx-lime);
}

body.market .mk-footer__pay {
    width: auto;
    height: 26px;
    margin-inline-start: auto;
    padding: 4px 10px;
    border-radius: 8px;
    background: #FFFFFF;
    box-sizing: content-box;
}

body.market.dark-mode .mk-footer {
    background:
        radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--fx-lime) 8%, transparent), transparent 70%),
        #08100B;
    border-top: 1px solid var(--fx-line);
}

@media (max-width: 1199.98px) {
    body.market .mk-footer__main {
        grid-template-columns: repeat(3, 1fr);
    }

    body.market .mk-footer__brand {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px 32px;
    }

    body.market .mk-footer__brand p {
        flex: 1;
        min-width: 260px;
        margin: 0;
    }

    body.market .mk-footer__contact {
        grid-column: span 3;
    }

    body.market .mk-footer__contact ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    body.market .mk-footer__trust {
        grid-template-columns: repeat(2, 1fr);
    }

    body.market .mk-footer__trust li {
        padding: 22px 16px;
    }

    body.market .mk-footer__trust li:nth-child(odd) {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    body.market .mk-footer__trust li:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
}

@media (max-width: 767.98px) {
    body.market .mk-footer__trust li {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    body.market .mk-footer__main {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 36px 0 24px;
    }

    body.market .mk-footer__brand {
        display: block;
        padding-bottom: 26px;
    }

    body.market .mk-footer__brand p {
        margin: 16px 0 20px;
    }

    body.market .mk-footer__contact {
        grid-column: auto;
    }

    body.market .mk-footer__contact ul {
        grid-template-columns: 1fr;
    }

    body.market .mk-footer__col {
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    body.market .mk-footer__col h3 {
        margin: 0;
    }

    body.market .mk-footer__col h3 button {
        min-height: 58px;
        pointer-events: auto;
        cursor: pointer;
    }

    body.market .mk-footer__col h3 em {
        display: inline-block;
        color: rgba(255, 255, 255, .6);
        transition: transform .35s var(--fx-ease);
    }

    body.market .mk-footer__col h3 button[aria-expanded="true"] em {
        transform: rotate(180deg);
    }

    body.market .mk-footer__col h3 button[aria-expanded="false"] + *,
    body.market .mk-footer__col h3:has(button[aria-expanded="false"]) + ul {
        display: none;
    }

    body.market .mk-footer__col ul {
        padding-bottom: 20px;
    }

    body.market .mk-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    body.market .mk-footer__pay {
        margin-inline-start: 0;
    }
}

/* ---------- 5. Floating dock ---------- */
body.market .mk-dock {
    position: fixed;
    bottom: 22px;
    inset-inline-end: 22px;
    z-index: 1030;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
}

body.market .mk-dock__btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--fx-line);
    border-radius: 50%;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 18px;
    box-shadow: 0 12px 30px -12px rgba(15, 21, 18, .35);
    cursor: pointer;
    transition: transform .35s var(--fx-ease), background-color .2s, color .2s, opacity .3s, visibility .3s;
}

body.market .mk-dock__btn:hover {
    transform: translateY(-3px);
}

body.market .mk-dock__btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--fx-brand) 45%, transparent);
    outline-offset: 2px;
}

body.market .mk-dock__mode .fa-sun,
body.market.dark-mode .mk-dock__mode .fa-moon {
    display: none;
}

body.market.dark-mode .mk-dock__mode .fa-sun {
    display: inline-block;
}

body.market .mk-dock__theme {
    border-color: var(--fx-brand);
    background: var(--fx-brand);
    color: #FFFFFF;
}

body.market .mk-dock__theme[aria-expanded="true"] em {
    transform: rotate(-30deg);
}

body.market .mk-dock__theme em {
    transition: transform .4s var(--fx-spring);
}

body.market .mk-top {
    border: 0;
    background: var(--fx-text);
    color: var(--fx-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

body.market .mk-top.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}

body.market .mk-top.is-on:hover {
    transform: translateY(-3px);
}

body.market .mk-top__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

body.market .mk-top__ring circle {
    fill: none;
    stroke: var(--fx-lime);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--p, 0) * 100);
}

body.market .mk-theme {
    position: absolute;
    bottom: 0;
    inset-inline-end: 62px;
    width: 290px;
    padding: 18px;
    border: 1px solid var(--fx-line);
    border-radius: 22px;
    background: var(--fx-card);
    color: var(--fx-text);
    box-shadow: var(--fx-shadow-lg);
    transform-origin: bottom right;
    animation: mk-pop .35s var(--fx-ease) both;
}

[dir="rtl"] body.market .mk-theme {
    transform-origin: bottom left;
}

@keyframes mk-pop {
    from {
        opacity: 0;
        transform: scale(.92) translateY(8px);
    }
}

body.market .mk-theme[hidden] {
    display: none;
}

body.market .mk-theme__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

body.market .mk-theme__head .mk-x {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

body.market .mk-theme__title {
    margin: 0;
    color: var(--fx-text);
    font-size: 18px;
    font-weight: 700;
}

body.market .mk-theme__label {
    margin: 14px 0 8px;
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 600;
}

body.market .mk-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

body.market .mk-swatches > button,
body.market .mk-swatch-custom {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c);
    cursor: pointer;
    transition: transform .3s var(--fx-spring);
}

body.market .mk-swatches > button:hover,
body.market .mk-swatch-custom:hover {
    transform: scale(1.12);
}

body.market .mk-swatches > button[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--fx-card), 0 0 0 4px var(--c);
}

body.market .mk-swatches > button[aria-checked="true"]::after {
    content: "";
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: #FFFFFF;
}

body.market .mk-swatch-custom {
    overflow: hidden;
    border: 1.5px dashed var(--fx-muted);
    background: transparent;
    color: var(--fx-muted);
    font-size: 12px;
}

body.market .mk-swatch-custom input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

body.market .mk-swatch-custom.is-on {
    border-style: solid;
    border-color: transparent;
    background: var(--c);
    color: #FFFFFF;
    box-shadow: 0 0 0 2px var(--fx-card), 0 0 0 4px var(--c);
}

body.market .mk-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--fx-surface);
}

body.market .mk-seg :is(button, a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--fx-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

body.market .mk-seg :is(button[aria-pressed="true"], a[aria-current]) {
    background: var(--fx-card);
    color: var(--fx-text);
    box-shadow: 0 4px 12px -8px rgba(15, 21, 18, .5);
}

body.market .mk-theme__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    margin-top: 16px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: transparent;
    color: var(--fx-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

body.market .mk-theme__reset:hover {
    border-color: var(--fx-text);
}

@media (max-width: 575.98px) {
    body.market .mk-dock {
        bottom: 14px;
        inset-inline-end: 14px;
        gap: 8px;
    }

    body.market .mk-dock__btn {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    body.market .mk-theme {
        position: fixed;
        inset-inline: 14px;
        bottom: 14px;
        width: auto;
    }
}

/* Home 3's footer has its own back-to-top button */
body.home-3 .mk-top {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    body.market .mk-drawer,
    body.market .mk-drawer.is-open {
        transition: visibility 0s;
    }
}

/* RTL: English demo copy keeps its punctuation and numbers in order */
[dir="rtl"] body.market :is(.au-sub, .au-art__perks li, .au-err, .au-hint, .au-resend, .au-check span, .au-link, .mk-item__meta, .mk-note, .mk-free p, .mk-empty p, .mk-upsell__item small, .mk-footer__brand p, .mk-footer__trust span, .mk-footer__contact span, .mk-footer__bottom p, .mk-nav__panel small, .mk-menu__help small) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.market :is(.au-sub, .au-err, .au-resend, .mk-item__meta, .mk-note, .mk-free p, .mk-footer__brand p, .mk-footer__trust span, .mk-footer__contact span, .mk-footer__bottom p) {
    text-align: right;
}

/* Dark mode: areas that sit on light photos or pastel tiles keep light-theme ink */
body.market.dark-mode :is(.h3-code, .cg-feature__sm) {
    --fx-text: #0F1512;
    --fx-muted: #5E6963;
    --fx-brand-text: var(--buttons);
    --fx-line: #E7EAE6;
}

body.market.dark-mode .h3-code {
    color: #0F1512;
}

body.market.dark-mode .cg-feature__sm strong {
    color: #0F1512;
}

body.home-3.dark-mode .main_menu_content nav > ul > li > a.active {
    color: var(--fx-lime);
}

/* progress page counters: number and label must not overlap */
.pb-counters li {
    gap: 8px;
}

.pb-counters strong {
    display: block;
    line-height: 1.1;
}

.pb-counters span {
    display: block;
    line-height: 1.4;
}

/* Home 2 market banner: photo band with copy, stats and actions */
body.home-2 .h2-banner__link {
    height: clamp(460px, 40vw, 600px);
    overflow: hidden;
}

body.home-2 .h2-banner__link::after {
    z-index: 1;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--fx-deep) 94%, transparent) 0%, color-mix(in srgb, var(--fx-deep) 78%, transparent) 38%, transparent 72%),
        linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, transparent 30%);
}

[dir="rtl"] body.home-2 .h2-banner__link::after {
    background:
        linear-gradient(270deg, color-mix(in srgb, var(--fx-deep) 94%, transparent) 0%, color-mix(in srgb, var(--fx-deep) 78%, transparent) 38%, transparent 72%),
        linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, transparent 30%);
}

body.home-2 .h2-banner__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
}

body.home-2 .h2-banner__copy {
    max-width: 540px;
    color: rgba(255, 255, 255, .82);
}

body.home-2 .h2-banner__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: var(--fx-lime);
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(6px);
}

body.home-2 .h2-banner__copy h2 {
    margin: 18px 0 14px;
    color: #FFFFFF;
    font-size: clamp(30px, 3.6vw, 50px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.025em;
}

body.home-2 .h2-banner__copy h2 span {
    display: block;
    color: var(--fx-lime);
}

body.home-2 .h2-banner__copy p {
    max-width: 460px;
    margin: 0 0 26px;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
    line-height: 1.6;
}

body.home-2 .h2-banner__stats {
    display: flex;
    gap: 0;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

body.home-2 .h2-banner__stats li {
    display: grid;
    gap: 2px;
    padding-inline: 0 24px;
}

body.home-2 .h2-banner__stats li + li {
    padding-inline-start: 24px;
    border-inline-start: 1px solid rgba(255, 255, 255, .2);
}

body.home-2 .h2-banner__stats strong {
    color: #FFFFFF;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.1;
}

body.home-2 .h2-banner__stats span {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1.4;
}

body.home-2 .h2-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
}

body.home-2 .h2-banner__cta {
    background: var(--fx-lime);
    color: #0F1512 !important;
}

body.home-2 .h2-banner__cta:hover {
    background: #FFFFFF;
}

body.home-2 .h2-banner__cta:hover em {
    transform: translateX(4px);
}

[dir="rtl"] body.home-2 .h2-banner__cta:hover em {
    transform: translateX(-4px);
}

body.home-2 .h2-banner__link2 {
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .4);
    text-underline-offset: 5px;
}

body.home-2 .h2-banner__link2:hover {
    color: var(--fx-lime);
    text-decoration-color: currentColor;
}

[dir="rtl"] body.home-2 :is(.h2-banner__copy p, .h2-banner__tag) {
    unicode-bidi: plaintext;
}

[dir="rtl"] body.home-2 .h2-banner__copy p {
    text-align: right;
}

@media (max-width: 767.98px) {
    body.home-2 .h2-banner__link {
        height: auto;
    }

    body.home-2 .h2-banner__link img {
        top: 0;
        height: 100%;
    }

    body.home-2 .h2-banner__link::after {
        background: color-mix(in srgb, var(--fx-deep) 82%, transparent);
    }

    body.home-2 .h2-banner__content {
        position: relative;
        padding: 56px 0;
    }

    body.home-2 .h2-banner__stats li {
        padding-inline-end: 16px;
    }

    body.home-2 .h2-banner__stats li + li {
        padding-inline-start: 16px;
    }
}

[dir="rtl"] body.home-2 :is(.h2-banner__copy h2, .h2-banner__stats strong, .h2-banner__stats span) {
    unicode-bidi: plaintext;
}

/* Home 2 has a white header too: dark burger */
body.home-2 .mk-burger {
    background: var(--fx-surface);
}

body.home-2 .mk-burger span,
body.home-2 .mk-burger span::before,
body.home-2 .mk-burger span::after {
    background: var(--fx-text);
}

/* Home 3 new arrivals: featured card fills the height of the product grid */
@media (min-width: 992px) {
    .h3-spot {
        align-items: stretch;
    }

    .h3-spot__hero {
        position: relative;
        top: auto;
    }

    .h3-spot__media {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-height: 260px;
    }

    .h3-spot__media img {
        height: 100%;
        max-height: 100%;
        aspect-ratio: auto;
        object-fit: contain;
    }
}

/* photos already sit on the card backdrop: no multiply blend (it darkened the backdrop) */
.h3-spot__media img {
    mix-blend-mode: normal;
}

.h3-deal__media img,
.h3-mini__img img {
    mix-blend-mode: normal;
}

/* Home 3 header island: inner breathing room + every item on the bar's centre line */
@media (min-width: 992px) {
    body.home-3 .main_header {
        align-items: center;
    }

    body.home-3.fx-stuck .main_header {
        padding-block: 8px;
    }

    body.home-3 .main_header .logo,
    body.home-3 .categories_menu,
    body.home-3 .header_account_area,
    body.home-3 .searchbar_content.mobile_screen_none {
        align-self: center;
    }

    body.home-3 .main_menu_content {
        display: flex;
        align-items: center;
        top: 50% !important;
        transform: translateY(-50%);
    }

    body.home-3 .main_menu_content nav > ul {
        align-items: center;
        margin: 0;
    }
}

@media (min-width: 992px) {
    body.home-3 .main_header .categories_menu {
        padding-block: 0;
    }
}

/* RTL: English placeholder keeps its trailing dots */
[dir="rtl"] body.market input::placeholder {
    unicode-bidi: plaintext;
}

/* Home 3 sticky island: taller pill with room around every item */
@media (min-width: 992px) {
    body.home-3.fx-stuck .main_header {
        grid-template-rows: auto 70px;
        padding-block: 12px;
    }

    body.home-3.fx-stuck .main_header .logo {
        padding-inline-start: 26px;
    }

    body.home-3.fx-stuck .header_account_area {
        padding-inline-end: 12px;
    }

    body.home-3.fx-stuck .main_header::before {
        box-shadow: 0 22px 44px -24px rgba(15, 21, 18, .35);
    }
}

/* Header on scroll: hidden while scrolling down, slides back on scroll up (assets/js/market.js, module 1) */
@media (min-width: 992px) {
    body.market.fx-stuck header {
        transition: transform .4s var(--fx-ease), box-shadow .3s;
        will-change: transform;
    }

    body.market.fx-stuck.fx-hide header {
        transform: translateY(calc(-100% - 12px));
        box-shadow: none;
    }

    /* sticky panels under the header follow it up and down */
    body.market :is(.fx-deal, .h2-arrivals__intro, .h3-spot__hero, .sp-toolbar, .sp-side, .pd-info, .ct-summary, .co-summary, .ac-side, .pf-tabs, .bd-toc, .fq-help, .sg-nav) {
        transition: top .4s var(--fx-ease);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.market.fx-stuck header {
        transition: none;
    }
}

/* Home 2 footer: social icons spaced and centred in their circles */
body.home-2 .footer ul.social-icon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

body.home-2 .footer ul.social-icon li {
    margin: 0;
}

body.home-2 .footer ul.social-icon li .title {
    margin-inline-end: 6px;
}

body.home-2 .footer ul.social-icon li a {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 1;
}

body.home-2 .footer ul.social-icon li a em {
    width: auto;
    margin: 0;
    line-height: 1;
}

/* Dark mode: Home 3 category discs keep a soft tint instead of full pastel */
body.market.dark-mode .h3-circles__disc {
    background: color-mix(in srgb, var(--tint, #E7F3DC) 16%, var(--fx-card)) !important;
}

/* Dark mode: the selected filter tab stands out */
body.market.dark-mode .fx-tabs [role="tab"][aria-selected="true"] {
    background: color-mix(in srgb, var(--fx-lime) 18%, var(--fx-card));
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-lime) 45%, transparent);
}

body.market.dark-mode .fx-tabs [role="tab"]:not([aria-selected="true"]):hover {
    color: #FFFFFF;
}

/* Dark mode: list-view Add to cart reads white on green */
body.market.dark-mode.shop-list .fx-add,
body.market.dark-mode.shop-list .fx-add:hover {
    background: var(--buttons);
    color: #FFFFFF !important;
}

/* Dark mode: product photo arrows and counter sit on the light photo, keep dark ink */
/* product photo arrows: see "Product gallery arrows" further down */

body.home-2 .footer ul.social-icon li a em {
    padding: 0;
}

/* Transparent product photos (.webp): tiles follow the theme, no multiply blend in dark mode */
body.market.dark-mode {
    --fx-photo: #1A221E;
}

body.market.dark-mode img[src$=".webp"] {
    mix-blend-mode: normal !important;
}

/* Home 4: product and category tiles follow the theme with transparent photos */
body.home-4.dark-mode .h4-cat__img {
    background: var(--fx-photo);
    outline-color: rgb(255 255 255 / .06);
}

body.home-4.dark-mode .fx-card--h4 .fx-card__media {
    background: var(--fx-photo);
    outline-color: rgb(255 255 255 / .06);
}

/* Home 2 footer bottom bar: copyright left, social group flush right, one centre line */
body.home-2 .footer .footer-bottom > .row:first-child {
    align-items: center;
}

body.home-2 .footer .copy-right {
    margin: 0;
    padding: 0;
    line-height: 40px;
}

body.home-2 .footer .footer_social {
    padding: 0;
}

body.home-2 .footer ul.social-icon {
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

body.home-2 .footer ul.social-icon li .title {
    margin: 0 6px 0 0;
    line-height: 40px;
}

[dir="rtl"] body.home-2 .footer ul.social-icon li .title {
    margin: 0 0 0 6px;
}

@media (max-width: 991.98px) {
    body.home-2 .footer .copy-right {
        text-align: center;
    }

    body.home-2 .footer ul.social-icon {
        justify-content: center;
        margin-top: 12px;
    }
}

[dir="rtl"] body.home-2 .footer :is(.copy-right, ul.social-icon li .title) {
    unicode-bidi: plaintext;
}

@media (min-width: 992px) {
    [dir="rtl"] body.home-2 .footer .copy-right {
        text-align: right;
    }
}


/* Product gallery arrows + counter: dark frosted glass with white icons and a light ring,
   readable on white, light and dark photos in both themes */
body.market .pd-stage__nav .fx-icon-btn,
body.market .pd-stage__count {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(15, 21, 18, .62);
    color: #FFFFFF;
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .55);
}

body.market .pd-stage__nav .fx-icon-btn {
    width: 44px;
    height: 44px;
    font-size: 17px;
}

body.market .pd-stage__nav .fx-icon-btn:hover:not(:disabled),
body.market .pd-stage__nav .fx-icon-btn:focus-visible {
    border-color: var(--buttons);
    background: var(--buttons);
    color: #FFFFFF;
    transform: scale(1.06);
}

body.market .pd-stage__nav .fx-icon-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--fx-lime) 70%, transparent);
    outline-offset: 2px;
}

body.market .pd-stage__nav .fx-icon-btn:active {
    transform: scale(.95);
}

body.market .pd-stage__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 36px;
    padding: 0 14px;
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
}

body.market .pd-stage__count strong {
    color: #FFFFFF;
}

/* the icon set already mirrors arrows in RTL: no second flip here */
[dir="rtl"] body.market .pd-stage__nav .fx-icon-btn em {
    transform: none;
}

@media (max-width: 575.98px) {
    body.market .pd-stage__nav {
        bottom: 12px;
        gap: 10px;
    }

    body.market .pd-stage__nav .fx-icon-btn {
        width: 40px;
        height: 40px;
    }
}

/* Dark mode: borderless product cards sit straight on the page like in light mode;
   only the image tile keeps a background. (Home 2/3 cards are bordered by design.) */
body.market.dark-mode .fx-card:not(.fx-card--h2):not(.fx-card--h3):not(.fx-card--h4) {
    background: transparent;
}

/* Dark mode: every product card style keeps only its image tile filled */
body.market.dark-mode .fx-card,
body.market.dark-mode .fx-card--h2,
body.market.dark-mode .fx-card--h3,
body.market.dark-mode .fx-card--h4 {
    background: transparent !important;
    box-shadow: none;
}

body.market.dark-mode .h3-spot__hero {
    background: transparent;
}

/* Home 1 category cards, dark mode: each card's own hue (deepened) fading into the page,
   the same way the light cards fade into white */
body.market.dark-mode .fx-catcard {
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--tint) 16%, var(--fx-bg)) 0%,
            color-mix(in srgb, var(--tint) 6%, var(--fx-bg)) 70%,
            var(--fx-bg) 100%);
}

@supports (color: oklch(from red l c h)) {
    body.market.dark-mode .fx-catcard {
        background: linear-gradient(180deg,
                oklch(from var(--tint) .27 calc(c * 2 + .02) h) 0%,
                oklch(from var(--tint) .2 calc(c * 1.2 + .008) h) 55%,
                var(--fx-bg) 100%);
    }
}

[dir="rtl"] body.market .fx-catcard p {
    unicode-bidi: plaintext;
}

/* Dark mode newsletter: the email field stands off the green panel */
body.market.dark-mode .fx-news__form {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px -26px rgba(0, 0, 0, .8);
}

body.market.dark-mode .fx-news__form:hover {
    border-color: rgba(255, 255, 255, .28);
}

body.market.dark-mode .fx-news__form:focus-within {
    border-color: var(--fx-lime);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-lime) 22%, transparent);
}

body.market.dark-mode .fx-news__form > em {
    color: rgba(255, 255, 255, .7);
}

body.market.dark-mode .fx-news__form input {
    color: #FFFFFF;
}

body.market.dark-mode .fx-news__form input::placeholder {
    color: rgba(255, 255, 255, .62);
}

/* Hero slides (Home 2 + Home 3): transparent slide photos, so the slide colour follows the theme */
body.market.dark-mode :is(.h2-slider, .h2-slide, .h3-slider, .h3-slider .h3-slide) {
    background-color: var(--fx-hero-bg, #121915) !important;
}

body.market.dark-mode .h2-slide::before {
    background: linear-gradient(90deg, rgba(18, 25, 21, .96) 0%, rgba(18, 25, 21, .8) 38%, rgba(18, 25, 21, 0) 62%);
}

body.market.dark-mode .h2-hero .h2-slide::before {
    background: linear-gradient(90deg,
            rgba(18, 25, 21, .97) 0%,
            rgba(18, 25, 21, .93) calc(var(--h2-gutter) + 420px),
            rgba(18, 25, 21, .55) calc(var(--h2-gutter) + 620px),
            rgba(18, 25, 21, 0) calc(var(--h2-gutter) + 820px));
}

@media (max-width: 767.98px) {
    body.market.dark-mode .h2-slide::before,
    body.market.dark-mode .h2-hero .h2-slide::before {
        background: linear-gradient(180deg, rgba(18, 25, 21, 0) 0, rgba(18, 25, 21, 0) 200px, #121915 290px);
    }
}

body.market.dark-mode .h2-slide__title {
    color: var(--fx-text);
}

body.market.dark-mode .h2-slide__title span {
    color: var(--fx-brand-text);
}

/* Dark mode slide copy and slider controls (these colours are fixed for the light slide) */
body.market.dark-mode .h2-slide__sub {
    color: rgba(236, 241, 237, .78);
}

body.market.dark-mode .h2-slide__text {
    color: var(--fx-muted);
}

body.market.dark-mode .h2-slide .fx-hero__link {
    color: var(--fx-text) !important;
}

body.market.dark-mode .h2-slider__count {
    color: var(--fx-muted);
}

body.market.dark-mode .h2-slider__count strong {
    color: var(--fx-text);
}

body.market.dark-mode .h2-slider__bars button {
    background: rgba(255, 255, 255, .18);
}

body.market.dark-mode .h2-slider__bars button span {
    background: var(--fx-lime);
}

/* Home 2 cards: quick view lands exactly under the wishlist button on hover */
@media (hover: hover) and (pointer: fine) {
    body.home-2 .fx-card--h2:hover .fx-quick,
    body.home-2 .fx-card--h2:focus-within .fx-quick {
        opacity: 1;
        transform: none;
    }
}

/* Home 2 "Berry season" promo keeps its light pink card in dark mode: dark ink on it */
body.market.dark-mode .h2-promo--tint h3 {
    color: #0F1512;
}

body.market.dark-mode .h2-promo--tint p {
    color: #4F5A54;
}

body.market.dark-mode .h2-promo--tint .h2-promo__cta {
    color: #0F1512;
}

/* Logo pairs: colour logo on light backgrounds, white logo on dark backgrounds, no shape behind it */
.logo-dark {
    display: none !important;
}

body.market.dark-mode .logo-dark {
    display: inline-block !important;
}

body.market.dark-mode .logo-light {
    display: none !important;
}

body.market.dark-mode .main_header .logo a,
body.market.dark-mode .footer .f-logo a,
body.market.dark-mode .h3-footer__logo,
body.home-2.dark-mode .main_header .logo a,
body.home-3.dark-mode .main_header .logo a,
body.home-4.dark-mode .main_header .logo a {
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* Dark theme before first paint (html.fx-dark is set by the inline script in <head>):
   dark page and a dark loader screen, cart lifted so it reads on dark */
html.fx-dark,
html.fx-dark body {
    background-color: #0C110E;
}

html.fx-dark .loader,
body.market.dark-mode .loader {
    background-color: #0C110E !important;
}

html.fx-dark .loader .ecom-lottie-loader,
body.market.dark-mode .loader .ecom-lottie-loader {
    --track-color: #5B6B63;
    --shadow-color: rgba(0, 0, 0, .55);
}

html.fx-dark .loader svg,
body.market.dark-mode .loader svg {
    filter: brightness(1.5) drop-shadow(0 0 1px rgba(255, 255, 255, .35));
}

/* Dark mode: Home 3 card wishlist + quick view use dark glass so the light icon stays visible */
body.market.dark-mode .fx-card--h3 .fx-like,
body.market.dark-mode .fx-card--h3 .fx-quick {
    background: rgba(15, 21, 18, .72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    color: #ECF1ED !important;
}

body.market.dark-mode .fx-card--h3 .fx-like:hover,
body.market.dark-mode .fx-card--h3 .fx-quick:hover {
    background: var(--buttons);
    color: #fff !important;
}

body.market.dark-mode .fx-card--h3 .fx-like.is-on {
    color: #FB7185 !important;
}

/* Dark mode: header search stays dark while typing (all home headers) */
body.market.dark-mode .searchbar_content form,
body.market.dark-mode .searchbar_content form:focus-within,
body.market.dark-mode .search-box,
body.market.dark-mode .search-box input {
    background-color: #161D19 !important;
}

body.market.dark-mode .searchbar_content form:focus-within {
    border-color: var(--fx-brand-text, #B5E45C) !important;
    box-shadow: 0 0 0 4px rgba(181, 228, 92, .18) !important;
}

body.market.dark-mode .searchbar_content input,
body.market.dark-mode .search-box input,
body.market.dark-mode .h4-search input,
body.market.dark-mode .er-search input,
body.market.dark-mode .bl-search input,
body.market.dark-mode .mk-menu__search input {
    color: #ECF1ED !important;
    -webkit-text-fill-color: #ECF1ED;
    caret-color: #B5E45C;
}

body.market.dark-mode .searchbar_content input::placeholder,
body.market.dark-mode .search-box input::placeholder {
    color: #8A968F !important;
    -webkit-text-fill-color: #8A968F;
}

body.market.dark-mode .searchbar_content .nice-select,
body.market.dark-mode .searchbar_content .nice-select .current,
body.market.dark-mode .searchbar_content button,
body.market.dark-mode .searchbar_content button em {
    color: #ECF1ED !important;
}

body.market.dark-mode .searchbar_content .nice-select::after {
    border-color: #ECF1ED !important;
}

body.market.dark-mode .searchbar_content .category_hover_content {
    border-color: rgba(255, 255, 255, .14) !important;
}


/* ---------- Custom sort dropdown (market.js module 24) ---------- */
.sp-sort.is-enhanced select {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.sp-sort__btn {
    display: inline-flex;
    align-items: center;
    min-width: 190px;
    height: 44px;
    padding: 0 44px 0 18px;
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    background: var(--fx-card);
    color: var(--fx-text);
    font-size: 15px;
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

[dir="rtl"] .sp-sort__btn {
    padding: 0 18px 0 44px;
}

.sp-sort__btn:hover,
.sp-sort.is-open .sp-sort__btn {
    border-color: var(--buttons);
}

.sp-sort__btn:focus-visible {
    outline: 2px solid var(--buttons);
    outline-offset: 2px;
}

.sp-sort.is-enhanced > em {
    transition: rotate .25s ease;
}

.sp-sort.is-open > em {
    rotate: 180deg;
}

.sp-sort__list {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 30;
    min-width: 100%;
    width: max-content;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--fx-line);
    border-radius: 18px;
    background: var(--fx-card);
    box-shadow: 0 18px 40px -18px rgba(15, 21, 18, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transform-origin: top center;
    transition: opacity .18s, transform .22s ease, visibility 0s .22s;
}

.sp-sort.is-open .sp-sort__list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s, transform .22s ease;
}

.sp-sort__list:focus {
    outline: none;
}

.sp-sort__list li {
    position: relative;
    padding: 10px 40px 10px 14px;
    border-radius: 12px;
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
}

[dir="rtl"] .sp-sort__list li {
    padding: 10px 14px 10px 40px;
}

.sp-sort__list li.is-active {
    background: var(--fx-brand-soft, rgba(14, 107, 59, .08));
}

.sp-sort__list li[aria-selected="true"] {
    color: var(--buttons);
    font-weight: 700;
}

.sp-sort__list li[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    width: 6px;
    height: 11px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    translate: 0 -65%;
    rotate: 45deg;
}

body.market.dark-mode .sp-sort__list {
    background: #161D19;
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .7);
}

body.market.dark-mode .sp-sort__list li.is-active {
    background: rgba(255, 255, 255, .06);
}

body.market.dark-mode .sp-sort__list li[aria-selected="true"] {
    color: #B5E45C;
}

@media (max-width: 575.98px) {
    .sp-sort__btn {
        width: 100%;
        min-width: 0;
    }

    .sp-sort__list {
        inset-inline: 0;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-sort__list,
    .sp-sort.is-enhanced > em {
        transition: none;
    }
}

.sp-sort.is-open {
    z-index: 40;
}

.sp-toolbar:has(.sp-sort.is-open),
.sp-toolbar__tools:has(.sp-sort.is-open) {
    position: relative;
    z-index: 40;
}

/* Dark mode: header category dropdown options */
body.market.dark-mode .searchbar_content .nice-select .list {
    background: #161D19 !important;
    border-color: rgba(255, 255, 255, .1) !important;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .75) !important;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

body.market.dark-mode .searchbar_content .nice-select .option {
    color: #D5DCD7 !important;
    -webkit-text-fill-color: #D5DCD7;
}

body.market.dark-mode .searchbar_content .nice-select .option:hover,
body.market.dark-mode .searchbar_content .nice-select .option.focus {
    background: rgba(255, 255, 255, .06) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF;
}

body.market.dark-mode .searchbar_content .nice-select .option.selected {
    background: rgba(181, 228, 92, .12) !important;
    color: #B5E45C !important;
    -webkit-text-fill-color: #B5E45C;
}

body.market.dark-mode .searchbar_content .nice-select .option.selected::after {
    border-color: #B5E45C !important;
}

body.market.dark-mode .searchbar_content .nice-select .option:first-child {
    border-bottom-color: rgba(255, 255, 255, .1) !important;
}


/* Quick view: close-up thumb (same photo zoomed in) when a product has no second photo */
.fx-qv__thumbs button {
    overflow: hidden;
}

.fx-qv__thumbs button.is-closeup img {
    transform: scale(1.9);
}

.fx-qv__main.is-closeup,
.fx-qv__stage:hover .fx-qv__main.is-closeup {
    transform: scale(1.7);
}

.fx-qv__main.is-closeup.is-swapping {
    transform: scale(1.6);
}

.fx-qv__stage {
    overflow: hidden;
}