/* =======================================================================
   لبخند زیبا · Liquid Glass · Header (FULLY ISOLATED)
   Every rule is scoped under #lz-header so the old theme styles
   (main.css / styles.css / all.css) can never win the cascade, and a
   hard reset below neutralises any inherited layout/plugin styles.
   Loaded LAST. Palette: neutral-light + refined pink + clinical mint.
   ======================================================================= */

/* =======================================================================
   GLOBAL FONT · Dana  (replaces YekanBakh / IRANYekan across the site)
   Dana woff2 live at  public/fonts/Dana/  →  served from  /fonts/Dana/.
   This file loads LAST, so:
     (1) we declare the real `Dana` family (standard weight scale), and
     (2) we RE-DECLARE the theme's own families `yekan-bakh` & `iranyekan`
         to point at Dana glyphs. Because these come after main.css, every
         existing `font-family:'yekan-bakh'`/`iranyekan` rule in the theme
         transparently renders Dana — no per-rule hunting, and icon fonts
         (Material Design Icons, etc.) keep their own family names → safe.
   The yekan-bakh weight map mirrors the theme's original (400/500 were
   SemiBold) so the swap changes the typeface, not the perceived weight.
   ======================================================================= */

/* 1 ── real Dana family (standard weight scale) ───────────────────────── */
@font-face{font-family:'Dana';font-style:normal;font-weight:100;font-display:swap;src:url('/fonts/Dana/Dana-Thin.woff2') format('woff2');}
@font-face{font-family:'Dana';font-style:normal;font-weight:200;font-display:swap;src:url('/fonts/Dana/Dana-UltraLight.woff2') format('woff2');}
@font-face{font-family:'Dana';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/Dana/Dana-Light.woff2') format('woff2');}
@font-face{font-family:'Dana';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Dana/Dana-Regular.woff2') format('woff2');}
@font-face{font-family:'Dana';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Dana/Dana-Medium.woff2') format('woff2');}
@font-face{font-family:'Dana';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Dana/Dana-DemiBold.woff2') format('woff2');}
@font-face{font-family:'Dana';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Dana/Dana-Bold.woff2') format('woff2');}
@font-face{font-family:'Dana';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/Dana/Dana-ExtraBold.woff2') format('woff2');}
@font-face{font-family:'Dana';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/Dana/Dana-Black.woff2') format('woff2');}

/* 2 ── re-point the theme's `yekan-bakh` family to Dana (faithful weights) */
@font-face{font-display:swap;font-family:'yekan-bakh';font-style:normal;font-weight:100;src:url('/fonts/Dana/Dana-Thin.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'yekan-bakh';font-style:normal;font-weight:200;src:url('/fonts/Dana/Dana-Light.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'yekan-bakh';font-style:normal;font-weight:300;src:url('/fonts/Dana/Dana-Regular.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'yekan-bakh';font-style:normal;font-weight:400;src:url('/fonts/Dana/Dana-DemiBold.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'yekan-bakh';font-style:normal;font-weight:500;src:url('/fonts/Dana/Dana-DemiBold.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'yekan-bakh';font-style:normal;font-weight:600;src:url('/fonts/Dana/Dana-Bold.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'yekan-bakh';font-style:normal;font-weight:700;src:url('/fonts/Dana/Dana-ExtraBold.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'yekan-bakh';font-style:normal;font-weight:800;src:url('/fonts/Dana/Dana-Black.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'yekan-bakh';font-style:normal;font-weight:900;src:url('/fonts/Dana/Dana-Black.woff2') format('woff2');}

/* 3 ── re-point the theme's `iranyekan` family to Dana ─────────────────── */
@font-face{font-display:swap;font-family:iranyekan;font-style:normal;font-weight:300;src:url('/fonts/Dana/Dana-Light.woff2') format('woff2');}
@font-face{font-display:swap;font-family:iranyekan;font-style:normal;font-weight:normal;src:url('/fonts/Dana/Dana-Regular.woff2') format('woff2');}
@font-face{font-display:swap;font-family:iranyekan;font-style:normal;font-weight:bold;src:url('/fonts/Dana/Dana-Bold.woff2') format('woff2');}

/* 4 ── base + the few non-Yekan text rules (Verdana stacks) → Dana ─────── */
html, body{font-family:'yekan-bakh','Dana','IRANYekan',Tahoma,system-ui,sans-serif;}
.profile-navbar h4 span.font-en,
.checkout-alert-highlighted,
.checkout-details-title h4 span,
footer.mini-footer .copy-right-mini-footer{font-family:'Dana','yekan-bakh',Tahoma,sans-serif;}

:root {
    --lz-base:          #F6F8FC;
    --lz-ink:           #14182B;
    --lz-ink-soft:      #5C6275;
    --lz-ink-mute:      #8A90A2;

    --lz-accent:        #E84A8A;
    --lz-accent-strong: #D62F73;
    --lz-accent-soft:   #FFE3EF;
    --lz-mint:          #2FC9BD;
    --lz-mint-deep:     #129A8F;

    --lz-glass-strong:  rgba(255, 255, 255, 0.74);
    --lz-glass-solid:   #FFFFFF;
    --lz-glass-edge:    rgba(255, 255, 255, 0.78);
    --lz-hair:          rgba(20, 24, 43, 0.08);
    --lz-blur:          20px;
    --lz-blur-strong:   30px;
    --lz-saturate:      170%;

    --lz-r-sm:  12px;
    --lz-r:     16px;
    --lz-r-lg:  22px;
    --lz-pill:  999px;

    --lz-sh-sm:    0 4px 16px rgba(20, 24, 43, .06);
    --lz-sh:       0 14px 34px -12px rgba(20, 24, 43, .16), 0 2px 8px rgba(20, 24, 43, .05);
    --lz-sh-pop:   0 22px 50px -16px rgba(20, 24, 43, .22);
    --lz-sh-bar:   0 16px 40px -14px rgba(20, 24, 43, .28), inset 0 1px 0 rgba(255,255,255,.7);
    --lz-sh-accent:0 10px 24px -8px rgba(232, 74, 138, .50);
    --lz-sh-mint:  0 10px 24px -8px rgba(18, 154, 143, .42);

    --lz-ease:  cubic-bezier(.22, 1, .36, 1);
    --lz-fast:  160ms;
    --lz-mid:   280ms;

    --lz-grad-brand: linear-gradient(115deg, #FF5C9E 0%, #E84A8A 45%, #B14BD0 105%);
    --lz-grad-mint:  linear-gradient(120deg, #5FE0D4 0%, #2FC9BD 55%, #129A8F 100%);

    --lz-font: 'Dana', 'yekan-bakh', 'IRANYekan', Tahoma, system-ui, sans-serif;
    --lz-bar-h: 64px;

    --primary-color: var(--lz-accent);
}

/* =======================================================================
   0. HARD RESET (low-specificity via :where, = just #lz-header) so it
   always sits BELOW our styling rules but ABOVE the theme's classes.
   `display` is intentionally NOT reset (protects the cart .dropdown-menu),
   and icon <i> / badge <span> / cart <div> are not matched (icons stay).
   ======================================================================= */
#lz-header :where(.main-menu, .main-menu ul, .main-menu li, .main-menu a, .main-menu .master-menu,
                  .search-area, .search-area form, .search-area input, .search-area button, .search-area .search-result) {
    position: static;
    float: none;
    inset: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    list-style: none;
    transform: none;
    transition: none;
    color: inherit;
    text-decoration: none;
    line-height: normal;
    font-family: var(--lz-font);
}
#lz-header, #lz-header *, #lz-header *::before, #lz-header *::after { box-sizing: border-box; }

/* =======================================================================
   1. Floating header shell — fixed, overlaps the section below (hero)
   ======================================================================= */
#lz-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1000;
    pointer-events: none;
    background: none;
    border: 0;
    box-shadow: none;
    font-family: var(--lz-font);
    -webkit-font-smoothing: antialiased;
}
#lz-header a { text-decoration: none; }
#lz-header .lz-barwrap { padding-top: 14px; padding-inline: 0; pointer-events: none; }

/* content offset so inner pages aren't hidden under the fixed pill.
   Home page keeps padding-top:0 → hero tucks under the pill. */
.wrapper.lz-ua-desktop.lz-inner { padding-top: calc(var(--lz-bar-h) + 30px); }

/* =======================================================================
   2. The single rounded glass pill
   ======================================================================= */
#lz-header .lz-bar {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 6px 14px;
    height: var(--lz-bar-h);
    padding-inline: 18px 10px;
    border-radius: var(--lz-pill);
    /* glassier: more transparent frosted gradient + stronger blur; flat (no shadow) */
    background: linear-gradient(180deg, rgba(255, 255, 255, .50), rgba(255, 255, 255, .30));
    -webkit-backdrop-filter: blur(36px) saturate(185%);
    backdrop-filter: blur(36px) saturate(185%);
    border: 1px solid var(--lz-glass-edge);
    box-shadow: none;
    transition: background var(--lz-mid) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease);
}

/* ---- logo ---- */
#lz-header .lz-logo { order: 1; flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 0; }
#lz-header .lz-logo img { height: 40px; width: auto; max-width: 150px; object-fit: contain; }

/* =======================================================================
   3. Compact, centred search
   ======================================================================= */
#lz-header .lz-search { order: 3; margin-inline-start: auto; flex: 0 1 350px; min-width: 130px; }
#lz-header .lz-search .search { position: relative; width: 100%; }
#lz-header .lz-search #search-input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--lz-hair);
    border-radius: var(--lz-pill);
    background: rgba(255, 255, 255, .55);
    padding-inline-start: 46px;
    padding-inline-end: 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lz-ink);
    transition: border-color var(--lz-mid) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease), background var(--lz-mid) var(--lz-ease);
}
#lz-header .lz-search #search-input::placeholder { color: var(--lz-ink-mute); }
#lz-header .lz-search #search-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--lz-accent);
    box-shadow: 0 0 0 4px rgba(232, 74, 138, .14);
}
#lz-header .lz-search .lz-search__submit {
    position: absolute;
    inset-inline-start: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--lz-pill);
    background: var(--lz-grad-brand);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--lz-sh-accent);
    transition: transform var(--lz-fast) var(--lz-ease), filter var(--lz-fast) var(--lz-ease);
}
#lz-header .lz-search .lz-search__submit svg { width: 17px; height: 17px; }
#lz-header .lz-search .lz-search__submit:hover { transform: translateY(-50%) scale(1.06); }
#lz-header .lz-search .lz-search__submit:active { transform: translateY(-50%) scale(.95); }
#lz-header .lz-search .close-search-result {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 24, 43, .07);
    color: var(--lz-ink-soft);
    cursor: pointer;
    z-index: 2;
}
#lz-header .lz-search .close-search-result.show { display: flex; }
#lz-header .lz-search .close-search-result:hover { background: var(--lz-accent-soft); color: var(--lz-accent-strong); }

/* autocomplete panel */
#lz-header .lz-search .search-result {
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-start: 50%;
    transform: translate(50%, 8px);  /* RTL-safe centring under the field */
    width: 360px;
    max-width: 78vw;
    background: var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(var(--lz-blur-strong)) saturate(var(--lz-saturate));
    backdrop-filter: blur(var(--lz-blur-strong)) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    border-radius: var(--lz-r-lg);
    box-shadow: var(--lz-sh-pop);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lz-mid) var(--lz-ease), transform var(--lz-mid) var(--lz-ease), visibility var(--lz-mid);
    z-index: 60;
}
#lz-header .lz-search .search-result.open { max-height: 70vh; overflow-y: auto; opacity: 1; visibility: visible; transform: translate(50%, 0); }
#lz-header .lz-search .search-result ul { list-style: none; margin: 0; padding: 6px; }
#lz-header .lz-search .search-result ul li { display: flex; align-items: center; gap: 12px; padding: 10px 12px !important; border-radius: var(--lz-r); transition: background var(--lz-fast) var(--lz-ease); }
#lz-header .lz-search .search-result ul li:hover { background: rgba(232, 74, 138, .08); }
#lz-header .lz-search .search-result ul li img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #fff; flex: 0 0 auto; }
#lz-header .lz-search .search-result-text { flex: 1 1 auto; min-width: 0; }
#lz-header .lz-search .search-result-body a { display: block; color: var(--lz-ink); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lz-header .lz-search .search-result-body span { font-size: 12px; color: var(--lz-ink-mute); }
#lz-header .lz-search .box-search-price { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#lz-header .lz-search .box-search-price span { font-weight: 700; font-size: 12.5px; color: var(--lz-accent-strong); }
#lz-header .lz-search .box-search-price .search-icon { color: var(--lz-mint-deep); }

/* =======================================================================
   4. Menu include — flatten so nav + cart order inside the pill
   ======================================================================= */
#lz-header .lz-bar .main-menu { display: contents; }

/* nav links */
#lz-header .lz-bar .main-menu .list.float-right {
    order: 2;
    display: flex;
    align-items: center;
    gap: 1px;
}
#lz-header .lz-bar .main-menu .list > .list-item { position: relative; }
#lz-header .lz-bar .main-menu .list > .list-item > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--lz-pill);
    color: var(--lz-ink);
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    transition: color var(--lz-fast) var(--lz-ease), background var(--lz-fast) var(--lz-ease);
}
#lz-header .lz-bar .main-menu .list > .list-item > .nav-link:hover { color: var(--lz-accent-strong); background: rgba(232, 74, 138, .09); }
#lz-header .lz-bar .main-menu .list > .list-item-has-children > .nav-link::after {
    content: "";
    width: 6px; height: 6px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: .45;
    transition: transform var(--lz-fast) var(--lz-ease), opacity var(--lz-fast) var(--lz-ease);
}
#lz-header .lz-bar .main-menu .list > .list-item-has-children:hover > .nav-link::after { opacity: 1; transform: rotate(-135deg) translateY(1px); }

/* ---- glass dropdowns ---- */
#lz-header .lz-bar .main-menu .sub-menu {
    display: block;
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-start: 0;
    min-width: 232px;
    padding: 8px;
    background: var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(var(--lz-blur-strong)) saturate(var(--lz-saturate));
    backdrop-filter: blur(var(--lz-blur-strong)) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    border-radius: var(--lz-r-lg);
    box-shadow: var(--lz-sh-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.98);
    transform-origin: top center;
    transition: opacity var(--lz-mid) var(--lz-ease), transform var(--lz-mid) var(--lz-ease), visibility var(--lz-mid);
    z-index: 80;
}
#lz-header .lz-bar .main-menu .list-item-has-children:hover > .sub-menu,
#lz-header .lz-bar .main-menu .sub-menu .list-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
#lz-header .lz-bar .main-menu .sub-menu .list-item { position: relative; }
#lz-header .lz-bar .main-menu .sub-menu .nav-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 13px; border-radius: var(--lz-r-sm);
    color: var(--lz-ink-soft); font-weight: 500; font-size: 13.5px;
    transition: background var(--lz-fast) var(--lz-ease), color var(--lz-fast) var(--lz-ease);
}
#lz-header .lz-bar .main-menu .sub-menu .nav-link:hover { background: rgba(232, 74, 138, .10); color: var(--lz-accent-strong); }
#lz-header .lz-bar .main-menu .sub-menu .sub-menu { top: -9px; inset-inline-start: calc(100% + 8px); }

/* =========================================================================
   MEGA MENU — right-side category rail + left preview panel.
   FULLY ISOLATED: its markup uses DEDICATED classes (.lz-mega, .lz-mega__cat,
   .lz-mega__panel, .lz-mega__h, .lz-mega__s) — NOT the theme's .f-menu /
   .megadrop / .master-menu / .h5 / .h6, which carry a whole competing (and
   !important-laden) mega-menu implementation in all.css. The panel keeps only
   the structural `.sub-menu` (our own base dropdown = show-on-hover + glass) +
   `.position-static` on the parent <li>. Nothing here can collide with theme
   styles. A small script (partials/lz-floaters) marks the first non-empty
   category `.is-active` so a real panel shows the instant the menu opens.
   ========================================================================= */
#lz-header .lz-bar .main-menu .list-item.position-static { position: static; }

/* the dropdown shell — full-width glass panel. The `.sub-menu` in the selector
   is intentional: the panel carries both classes and a later base rule
   (`…main-menu .sub-menu { background: var(--lz-glass-solid) }`) would otherwise
   win at equal specificity and re-transparentise it. `.lz-mega.sub-menu` (1,4,0)
   beats that (1,3,0). */
#lz-header .lz-bar .main-menu .lz-mega.sub-menu {
    inset-inline: 0;
    width: 100%;
    display: block;
    padding: 0;
    min-height: 340px;
    overflow: hidden;                 /* clip children to the rounded panel   */
    /* A dense menu over the busy hero needs a solid backing — drop the base
       .sub-menu frosted-glass (blur can't help legibility here and isn't
       honoured everywhere) for a clean, always-readable near-opaque panel. */
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 24px 60px -18px rgba(20, 24, 43, .28), 0 2px 8px rgba(20, 24, 43, .06);
}
/* the 1px rail↔panel divider (inline-start = right edge in RTL, 252px in) */
#lz-header .lz-bar .main-menu .lz-mega::after {
    content: "";
    position: absolute;
    inset-block: 14px;
    inset-inline-start: 252px;
    width: 1px;
    background: var(--lz-glass-edge);
    pointer-events: none;
}

/* ---- RAIL: category rows pinned to the inline-start (right) column ---- */
#lz-header .lz-bar .main-menu .lz-mega > li {
    display: block;
    width: 252px;
    padding: 5px 12px;
}
#lz-header .lz-bar .main-menu .lz-mega > li:first-child { padding-top: 12px; }
#lz-header .lz-bar .main-menu .lz-mega > li:last-child  { padding-bottom: 12px; }
#lz-header .lz-bar .main-menu .lz-mega__cat {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 13px; margin: 0; border-radius: 13px;
    font-size: 13.5px; font-weight: 600; color: var(--lz-ink-soft);
    transition: background var(--lz-fast) var(--lz-ease), color var(--lz-fast) var(--lz-ease);
}
/* admin-set category icon (config/menu_icons.php); it takes the accent dot's place */
#lz-header .lz-bar .main-menu .lz-mega__icon {
    flex: 0 0 auto; display: inline-flex; width: 20px; height: 20px;
    color: var(--lz-accent);
    transition: color var(--lz-fast) var(--lz-ease), transform var(--lz-fast) var(--lz-ease);
}
#lz-header .lz-bar .main-menu .lz-mega__icon svg { width: 100%; height: 100%; display: block; }
#lz-header .lz-bar .main-menu .lz-mega__cat:has(.lz-mega__icon)::before { display: none; }
#lz-header .lz-bar .main-menu .lz-mega > li:hover .lz-mega__icon,
#lz-header .lz-bar .main-menu .lz-mega > li.is-active .lz-mega__icon { color: var(--lz-accent-strong); transform: scale(1.06); }
/* leading accent dot */
#lz-header .lz-bar .main-menu .lz-mega__cat::before {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: .3;
    transition: opacity var(--lz-fast) var(--lz-ease), transform var(--lz-fast) var(--lz-ease);
}
/* trailing chevron (points toward the panel = inline-end/left in RTL) */
#lz-header .lz-bar .main-menu .lz-mega__cat::after {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-inline-start: auto;
    border-inline-start: 2px solid currentColor; border-block-end: 2px solid currentColor;
    transform: rotate(45deg); opacity: 0;
    transition: opacity var(--lz-fast) var(--lz-ease), transform var(--lz-fast) var(--lz-ease);
}
#lz-header .lz-bar .main-menu .lz-mega > li:hover .lz-mega__cat,
#lz-header .lz-bar .main-menu .lz-mega > li.is-active .lz-mega__cat {
    background: var(--lz-accent-soft);
    color: var(--lz-accent-strong);
}
#lz-header .lz-bar .main-menu .lz-mega > li:hover .lz-mega__cat::before,
#lz-header .lz-bar .main-menu .lz-mega > li.is-active .lz-mega__cat::before { opacity: 1; transform: scale(1.05); }
#lz-header .lz-bar .main-menu .lz-mega > li:hover .lz-mega__cat::after,
#lz-header .lz-bar .main-menu .lz-mega > li.is-active .lz-mega__cat::after { opacity: .75; transform: rotate(45deg) translateX(-1px); }
/* while the pointer is inside the menu, only the hovered row stays lit
   (so the default .is-active row hands its highlight to the hovered one) */
#lz-header .lz-bar .main-menu .lz-mega:hover > li:not(:hover) > .lz-mega__cat {
    background: transparent; color: var(--lz-ink-soft);
}
#lz-header .lz-bar .main-menu .lz-mega:hover > li:not(:hover) > .lz-mega__cat::before { opacity: .3; transform: none; }
#lz-header .lz-bar .main-menu .lz-mega:hover > li:not(:hover) > .lz-mega__cat::after { opacity: 0; }

/* ---- PREVIEW PANEL: fills the inline-end (left) area next to the rail ---- */
#lz-header .lz-bar .main-menu .lz-mega__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 253px;         /* begins just past the rail + divider */
    inset-inline-end: 0;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(166px, 1fr));
    grid-auto-rows: min-content;
    gap: 2px 12px;
    align-content: start;
    overflow-y: auto;
    opacity: 0; visibility: hidden;
    transition: opacity var(--lz-fast) var(--lz-ease), visibility var(--lz-fast);
}
/* The closed mega shell must NOT intercept pointer events. It is hidden with
   opacity:0 (not display:none), and its `.is-active` preview panel forces
   `visibility:visible`, which re-enables hit-testing on that subtree. Since the
   panel is full-width and sits directly over the hero/slider, moving the mouse
   onto the slider counted as hovering the menu and popped it open. Disable
   pointer events while the menu is closed; restore them once it is hovered. */
#lz-header .lz-bar .main-menu .lz-mega.sub-menu { pointer-events: none; }
#lz-header .lz-bar .main-menu .list-item-has-children:hover > .lz-mega.sub-menu { pointer-events: auto; }
/* default (menu open, pointer not on a row yet) → the active category.
   Gate the reveal on the menu actually being open, so the panel stays
   `visibility:hidden` (and thus non-hit-testing) until the trigger is hovered. */
#lz-header .lz-bar .main-menu .list-item-has-children:hover > .lz-mega > li.is-active > .lz-mega__panel { opacity: 1; visibility: visible; }
/* pointer inside the menu → show ONLY the hovered category's panel */
#lz-header .lz-bar .main-menu .lz-mega:hover > li:not(:hover) > .lz-mega__panel { opacity: 0; visibility: hidden; }
#lz-header .lz-bar .main-menu .lz-mega > li:hover > .lz-mega__panel { opacity: 1; visibility: visible; }

#lz-header .lz-bar .main-menu .lz-mega__panel a {
    display: block; padding: 7px 11px; border-radius: var(--lz-r-sm);
    color: var(--lz-ink-soft);
    transition: background var(--lz-fast) var(--lz-ease), color var(--lz-fast) var(--lz-ease), padding-inline-start var(--lz-fast) var(--lz-ease);
}
#lz-header .lz-bar .main-menu .lz-mega__panel a:hover { background: var(--lz-accent-soft); padding-inline-start: 16px; }
#lz-header .lz-bar .main-menu .lz-mega__h {
    font-size: 13px; font-weight: 600; color: var(--lz-ink); margin: 0; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#lz-header .lz-bar .main-menu .lz-mega__s { font-size: 12.5px; font-weight: 500; color: var(--lz-ink-soft); margin: 0; line-height: 1.5; }
#lz-header .lz-bar .main-menu .lz-mega__panel a:hover .lz-mega__h,
#lz-header .lz-bar .main-menu .lz-mega__panel a:hover .lz-mega__s { color: var(--lz-accent-strong); }

/* graceful placeholder when a category has no sub-links */
#lz-header .lz-bar .main-menu .lz-mega__panel:empty {
    display: flex; align-items: center; justify-content: center;
}
#lz-header .lz-bar .main-menu .lz-mega__panel:empty::after {
    content: "برای مشاهده‌ی همه‌ی محصولات این دسته کلیک کنید";
    color: var(--lz-ink-soft); font-size: 13.5px; opacity: .65;
}

/* slim scrollbar for long link lists */
#lz-header .lz-bar .main-menu .lz-mega__panel::-webkit-scrollbar { width: 8px; }
#lz-header .lz-bar .main-menu .lz-mega__panel::-webkit-scrollbar-thumb { background: var(--lz-glass-edge); border-radius: 8px; }
#lz-header .lz-bar .main-menu .lz-mega__panel::-webkit-scrollbar-track { background: transparent; }

/* =======================================================================
   5. Cart — compact white-glass pill (icon + count)
   ======================================================================= */
#lz-header .lz-bar .main-menu .nav.float-left { order: 4; display: flex; align-items: center; }
#lz-header .lz-bar .main-menu .nav.float-left > .nav-item { position: relative; }
#lz-header .lz-bar .main-menu .nav.float-left > .nav-item > .nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 13px;
    border-radius: var(--lz-pill);
    background: rgba(255, 255, 255, .6);
    border: 1px solid var(--lz-hair);
    color: var(--lz-ink); font-weight: 700; font-size: 13px;
    white-space: nowrap;
    box-shadow: var(--lz-sh-sm);
    transition: transform var(--lz-fast) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease);
}
#lz-header .lz-bar .main-menu .nav.float-left > .nav-item > .nav-link:hover { transform: translateY(-2px); box-shadow: var(--lz-sh); }
#lz-header .lz-bar .main-menu .nav.float-left .nav-link i { font-size: 21px; color: var(--lz-mint-deep); }
#lz-header .lz-bar .main-menu .nav.float-left .nav-link .label-dropdown { display: none; }
#lz-header .lz-bar .main-menu .nav.float-left .nav-link .count {
    position: static;
    inset: auto;
    margin: 0;
    min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px; background: var(--lz-grad-brand); color: #fff; border-radius: var(--lz-pill);
    font-size: 11.5px; font-weight: 800; line-height: 1;
}
#lz-header .lz-bar .main-menu .nav.float-left .dropdown-menu.cart {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 12px);
    border: 1px solid var(--lz-glass-edge); border-radius: var(--lz-r-lg);
    background: var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(var(--lz-blur-strong)) saturate(var(--lz-saturate));
    backdrop-filter: blur(var(--lz-blur-strong)) saturate(var(--lz-saturate));
    box-shadow: var(--lz-sh-pop);
    z-index: 90;
}

/* =======================================================================
   6. Account — single merged ورود/ثبت‌نام (or account) button
   ======================================================================= */
#lz-header .lz-actions { order: 5; flex: 0 0 auto; display: flex; align-items: center; }
#lz-header .lz-acct {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 18px;
    border-radius: var(--lz-pill);
    background: var(--lz-grad-brand);
    color: #fff; font-weight: 700; font-size: 13.5px;
    box-shadow: var(--lz-sh-accent);
    transition: transform var(--lz-fast) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease), filter var(--lz-fast) var(--lz-ease);
}
#lz-header .lz-acct svg { width: 18px; height: 18px; }
#lz-header .lz-acct:hover { transform: translateY(-2px); filter: saturate(1.06); box-shadow: 0 16px 30px -8px rgba(232, 74, 138, .55); }

/* =======================================================================
   7. Hide mobile offcanvas bits inside the pill on wide screens
   ======================================================================= */
#lz-header .lz-bar .btn-menu,
#lz-header .lz-bar .side-menu,
#lz-header .lz-bar .overlay-side-menu,
#lz-header .lz-bar .logo-nav-res { display: none; }
#lz-header .lz-bar .btn-menu .align { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; width: 100%; height: 100%; }
#lz-header .lz-bar .btn-menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--lz-ink); }
#lz-header .lz-bar .side-menu.open { display: block; }
#lz-header .lz-bar .overlay-side-menu.show { display: block; }

/* =======================================================================
   8. Scrolled state
   ======================================================================= */
#lz-header.lz-scrolled .lz-bar { background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .46)); box-shadow: none; }

/* =======================================================================
   9. Responsive
   ======================================================================= */
@media (max-width: 1180px) {
    #lz-header .lz-bar .main-menu .list > .list-item > .nav-link { padding: 0 9px; font-size: 13px; }
    #lz-header .lz-search { flex-basis: 190px; }
}
@media (max-width: 992px) {
    #lz-header .lz-bar .main-menu .list.float-right { display: none; }
    /* position:static overrides the theme's `.btn-menu{position:absolute;top:10px;right:6px}`
       (all.css) — otherwise the hamburger floats to the pill's corner ON TOP of the logo.
       As a static flex item it joins the cluster (order:2) with cart + account. */
    #lz-header .lz-bar .btn-menu { order: 2; position: static; top: auto; right: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--lz-hair); border-radius: 50%; background: rgba(255,255,255,.6); cursor: pointer; }
    #lz-header .lz-search { flex-basis: 150px; }
}
@media (max-width: 600px) {
    #lz-header .lz-search { display: none; }
}

/* =======================================================================
   10. Accessibility — reduced motion / transparency / no-backdrop
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
    #lz-header *, #lz-header *::before, #lz-header *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
    #lz-header .lz-bar, #lz-header .lz-search .search-result, #lz-header .lz-bar .main-menu .sub-menu { background: var(--lz-glass-solid); }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #lz-header .lz-bar { background: #fff; }
    #lz-header .lz-search .search-result, #lz-header .lz-bar .main-menu .sub-menu, #lz-header .lz-bar .main-menu .nav.float-left .dropdown-menu.cart { background: #fff; }
}


/* =======================================================================
   ============================  FOOTER  =================================
   Dark Liquid-Glass footer · fully isolated under #lz-footer.
   ======================================================================= */
#lz-footer {
    --f-bg1:   #1d2350;
    --f-bg2:   #10132a;
    --f-glass: rgba(255, 255, 255, .055);
    --f-glass2:rgba(255, 255, 255, .10);
    --f-border:rgba(255, 255, 255, .12);
    --f-head:  #ffffff;
    --f-text:  rgba(255, 255, 255, .70);
    --f-mute:  rgba(255, 255, 255, .48);

    position: relative;
    display: block;
    /* main.main-content is float:right (RTL theme layout). A plain display:block
       footer's box ignores the float and stretches up over the whole page,
       blanketing it with a transparent layer that eats every click (looked like
       "sliders/JS dead"). The old theme footer was display:flex (a formatting
       context that sat below the float); clear:both restores that behaviour. */
    clear: both;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--f-text);
    font-family: var(--lz-font);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* low-specificity reset for reused/base elements (icons & display untouched) */
#lz-footer :where(.lz-foot, .lz-foot ul, .lz-foot li, .lz-foot a, .lz-foot p,
                  .lz-foot h3, .lz-foot strong, .lz-foot span, .lz-foot form,
                  .lz-foot input, .lz-foot button, .back-to-top) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    list-style: none;
    float: none;
    text-decoration: none;
    color: inherit;
    font-family: var(--lz-font);
    line-height: inherit;
}
#lz-footer, #lz-footer *, #lz-footer *::before, #lz-footer *::after { box-sizing: border-box; }

/* ---- shell ---- */
#lz-footer { display: block; width: 100%; }
#lz-footer .lz-foot {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 56px;
    padding: 0 0 0;
    border-radius: 38px 38px 0 0;
    background:
        radial-gradient(120% 90% at 100% 0%, #2a2f63 0%, transparent 55%),
        linear-gradient(170deg, var(--f-bg1) 0%, var(--f-bg2) 70%);
    color: var(--f-text);
}
#lz-footer .lz-foot__glow {
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 60%;
    pointer-events: none;
    background:
        radial-gradient(38% 80% at 84% 0%, rgba(232, 74, 138, .30), transparent 70%),
        radial-gradient(38% 80% at 14% 6%, rgba(47, 201, 189, .26), transparent 72%);
    filter: blur(8px);
    z-index: 0;
}
#lz-footer .lz-foot > .container { position: relative; z-index: 1; }

/* =======================================================================
   services strip
   ======================================================================= */
#lz-footer .lz-foot__services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 34px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--f-border);
}
#lz-footer .lz-svc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--lz-r);
    background: var(--f-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--f-border);
    transition: transform var(--lz-mid) var(--lz-ease), background var(--lz-mid) var(--lz-ease), border-color var(--lz-mid) var(--lz-ease);
}
#lz-footer .lz-svc:hover { transform: translateY(-4px); background: var(--f-glass2); border-color: rgba(232,74,138,.4); }
#lz-footer .lz-svc__icon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, rgba(232,74,138,.9), rgba(47,201,189,.85));
    box-shadow: 0 8px 18px -6px rgba(232,74,138,.5);
}
#lz-footer .lz-svc__icon svg { width: 23px; height: 23px; }
#lz-footer .lz-svc__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#lz-footer .lz-svc__txt strong { color: var(--f-head); font-weight: 700; font-size: 14px; }
#lz-footer .lz-svc__txt span { color: var(--f-mute); font-size: 12.5px; }

/* =======================================================================
   main grid
   ======================================================================= */
#lz-footer .lz-foot__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 38px 44px;
    padding: 44px 0 40px;
}
#lz-footer .lz-foot__brand { flex: 1 1 300px; max-width: 380px; }
#lz-footer .lz-foot__col   { flex: 1 1 150px; min-width: 140px; }
#lz-footer .lz-foot__aside { flex: 1 1 290px; max-width: 360px; }

/* brand */
#lz-footer .lz-foot__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    line-height: 0;
}
#lz-footer .lz-foot__logo img { height: 58px; width: auto; max-width: 200px; object-fit: contain; display: block; }
#lz-footer .lz-foot__about { color: var(--f-text); font-size: 13.5px; line-height: 2; margin-bottom: 20px; }
#lz-footer .lz-foot__contact { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
#lz-footer .lz-foot__contact li { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; color: var(--f-text); line-height: 1.85; }
#lz-footer .lz-foot__contact a { color: var(--f-text); }
#lz-footer .lz-foot__contact a:hover { color: #fff; }
#lz-footer .lz-foot__ci {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    color: var(--lz-mint);
    background: var(--f-glass);
    border: 1px solid var(--f-border);
}
#lz-footer .lz-foot__ci svg { width: 17px; height: 17px; }

/* socials */
#lz-footer .lz-foot__socials { display: flex; gap: 10px; flex-wrap: wrap; }
#lz-footer .lz-foot__socials a {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--f-glass);
    border: 1px solid var(--f-border);
    color: #fff;
    font-size: 21px;
    transition: transform var(--lz-fast) var(--lz-ease), background var(--lz-mid) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease);
}
#lz-footer .lz-foot__socials a:hover { transform: translateY(-3px); background: var(--lz-grad-brand); box-shadow: var(--lz-sh-accent); }
#lz-footer .lz-foot__socials a i { line-height: 1; }

/* link columns */
#lz-footer .lz-foot__title {
    position: relative;
    color: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
}
#lz-footer .lz-foot__title::after {
    content: "";
    position: absolute;
    bottom: 0; inset-inline-start: 0;
    width: 32px; height: 3px;
    border-radius: 3px;
    background: var(--lz-grad-brand);
}
#lz-footer .lz-foot__links { display: flex; flex-direction: column; gap: 12px; }
#lz-footer .lz-foot__links a {
    position: relative;
    display: inline-block;
    color: var(--f-text);
    font-size: 13.5px;
    padding-inline-start: 16px;
    transition: color var(--lz-fast) var(--lz-ease), padding var(--lz-fast) var(--lz-ease);
}
#lz-footer .lz-foot__links a::before {
    content: "";
    position: absolute;
    inset-inline-start: 0; top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lz-mint);
    transform: translateY(-50%);
    opacity: .5;
    transition: opacity var(--lz-fast) var(--lz-ease), transform var(--lz-fast) var(--lz-ease);
}
#lz-footer .lz-foot__links a:hover { color: #fff; padding-inline-start: 22px; }
#lz-footer .lz-foot__links a:hover::before { opacity: 1; background: var(--lz-accent); }

/* newsletter + seals */
#lz-footer .lz-news {
    padding: 22px;
    border-radius: var(--lz-r-lg);
    background: linear-gradient(150deg, rgba(232,74,138,.16), rgba(47,201,189,.12));
    border: 1px solid var(--f-border);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
#lz-footer .lz-news__title { color: var(--f-head); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
#lz-footer .lz-news__sub { color: var(--f-text); font-size: 12.8px; line-height: 1.9; margin-bottom: 16px; }
#lz-footer .lz-news__form { position: relative; display: flex; }
#lz-footer .lz-news__form input {
    flex: 1 1 auto;
    width: 100%;
    height: 48px;
    padding-inline: 16px 96px;
    border-radius: var(--lz-pill);
    background: rgba(255,255,255,.10);
    border: 1px solid var(--f-border);
    color: #fff;
    font-size: 13px;
    font-family: var(--lz-font);
}
#lz-footer .lz-news__form input::placeholder { color: var(--f-mute); }
#lz-footer .lz-news__form input:focus { outline: none; border-color: var(--lz-accent); background: rgba(255,255,255,.14); }
#lz-footer .lz-news__form button {
    position: absolute;
    inset-inline-end: 5px;
    top: 5px;
    height: 38px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--lz-pill);
    background: var(--lz-grad-brand);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    font-family: var(--lz-font);
    cursor: pointer;
    box-shadow: var(--lz-sh-accent);
    transition: transform var(--lz-fast) var(--lz-ease), filter var(--lz-fast) var(--lz-ease);
}
#lz-footer .lz-news__form button:hover { transform: scale(1.03); filter: saturate(1.08); }
#lz-footer .lz-foot__seals { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
#lz-footer .lz-seal {
    background: #fff;
    border-radius: 14px;
    padding: 8px;
    line-height: 0;
    box-shadow: 0 8px 20px -10px rgba(0,0,0,.5);
}
#lz-footer .lz-seal img, #lz-footer .lz-seal a { max-width: 88px; height: auto; border-radius: 8px; }

/* =======================================================================
   bottom bar
   ======================================================================= */
#lz-footer .lz-foot__bottom { border-top: 1px solid var(--f-border); background: rgba(0,0,0,.18); }
#lz-footer .lz-foot__bottominner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    flex-wrap: wrap;
}
#lz-footer .lz-foot__copy { color: var(--f-mute); font-size: 12.5px; line-height: 1.9; margin: 0; }
#lz-footer .lz-foot__copy a { color: var(--lz-mint); }
#lz-footer .back-to-top.lz-foot__top { position: static; margin: 0; }
#lz-footer .lz-foot__top a {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--f-glass);
    border: 1px solid var(--f-border);
    color: #fff;
    transition: transform var(--lz-fast) var(--lz-ease), background var(--lz-mid) var(--lz-ease);
}
#lz-footer .lz-foot__top a:hover { transform: translateY(-3px); background: var(--lz-grad-brand); box-shadow: var(--lz-sh-accent); }
#lz-footer .lz-foot__top a svg { width: 20px; height: 20px; }

/* =======================================================================
   responsive
   ======================================================================= */
@media (max-width: 992px) {
    #lz-footer .lz-foot__services { grid-template-columns: repeat(2, 1fr); }
    #lz-footer .lz-foot { border-radius: 28px 28px 0 0; }
}
@media (max-width: 560px) {
    #lz-footer .lz-foot__services { grid-template-columns: 1fr; }
    #lz-footer .lz-foot__grid { gap: 30px; }
    #lz-footer .lz-foot__bottominner { justify-content: center; text-align: center; }
}

/* a11y */
@media (prefers-reduced-motion: reduce) {
    #lz-footer *, #lz-footer *::before, #lz-footer *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #lz-footer .lz-svc, #lz-footer .lz-news { background: rgba(255,255,255,.08); }
}


/* =======================================================================
   =============================  BLOG  ==================================
   Light Liquid-Glass blog (index / category / single) · isolated #lz-blog
   ======================================================================= */
#lz-blog {
    position: relative;
    display: block;
    padding: 10px 0 56px;
    font-family: var(--lz-font);
    color: var(--lz-ink);
    -webkit-font-smoothing: antialiased;
}
#lz-blog, #lz-blog *, #lz-blog *::before, #lz-blog *::after { box-sizing: border-box; }
#lz-blog a { text-decoration: none; color: inherit; }

/* soft ambient backdrop so the glass reads as glass */
#lz-blog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 420px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(40% 60% at 88% 0%, rgba(232,74,138,.10), transparent 70%),
        radial-gradient(40% 60% at 10% 6%, rgba(47,201,189,.10), transparent 72%);
}
#lz-blog > .container { position: relative; z-index: 1; }

/* low-specificity reset for the components we build (NOT article prose / comments) */
#lz-blog :where(.lz-blog__head, .lz-blog__head *, .lz-pcard, .lz-pcard *,
                .lz-side, .lz-side *, .lz-art__meta, .lz-art__meta *,
                .lz-art__share, .lz-art__share *, .lz-blog__pager, .lz-blog__pager *,
                .lz-blog__empty, .lz-blog__empty *) {
    margin: 0; padding: 0; border: 0;
    background: none; box-shadow: none; list-style: none; float: none;
    text-decoration: none; color: inherit;
    font-family: var(--lz-font); line-height: inherit;
}

/* ---- page head ---- */
#lz-blog .lz-blog__head {
    position: relative;
    overflow: hidden;
    padding: 34px 32px;
    margin-bottom: 30px;
    border-radius: var(--lz-r-lg);
    background: linear-gradient(120deg, rgba(232,74,138,.10), rgba(47,201,189,.09)), var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    box-shadow: var(--lz-sh-sm);
}
#lz-blog .lz-blog__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12.5px; color: var(--lz-ink-mute); margin-bottom: 14px; }
#lz-blog .lz-blog__crumb a { color: var(--lz-ink-soft); }
#lz-blog .lz-blog__crumb a:hover { color: var(--lz-accent-strong); }
#lz-blog .lz-blog__crumb span { opacity: .5; }
#lz-blog .lz-blog__title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--lz-ink); margin-bottom: 8px; line-height: 1.4; }
#lz-blog .lz-blog__title b { color: var(--lz-accent-strong); font-weight: 800; }
#lz-blog .lz-blog__lead { color: var(--lz-ink-soft); font-size: 14px; line-height: 1.9; max-width: 680px; }

/* ---- layout ---- */
#lz-blog .lz-blog__layout { display: flex; align-items: flex-start; gap: 28px; }
#lz-blog .lz-blog__main { flex: 1 1 auto; min-width: 0; }
#lz-blog .lz-blog__side { flex: 0 0 312px; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }

/* ---- post card ---- */
#lz-blog .lz-blog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
:is(#lz-blog, #lz-postw) .lz-pcard {
    display: flex;
    flex-direction: column;
    border-radius: var(--lz-r-lg);
    overflow: hidden;
    background: var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    box-shadow: var(--lz-sh-sm);
    transition: transform var(--lz-mid) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease);
}
:is(#lz-blog, #lz-postw) .lz-pcard:hover { transform: translateY(-6px); box-shadow: var(--lz-sh); }
:is(#lz-blog, #lz-postw) .lz-pcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef1f8; }
:is(#lz-blog, #lz-postw) .lz-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lz-mid) var(--lz-ease); }
:is(#lz-blog, #lz-postw) .lz-pcard:hover .lz-pcard__media img { transform: scale(1.06); }
:is(#lz-blog, #lz-postw) .lz-pcard__tag {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    padding: 5px 12px;
    border-radius: var(--lz-pill);
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--lz-accent-strong);
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: var(--lz-sh-sm);
}
:is(#lz-blog, #lz-postw) .lz-pcard__body { display: flex; flex-direction: column; gap: 10px; padding: 18px; flex: 1 1 auto; }
:is(#lz-blog, #lz-postw) .lz-pcard__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--lz-ink-mute); }
:is(#lz-blog, #lz-postw) .lz-pcard__meta span { display: inline-flex; align-items: center; gap: 5px; }
:is(#lz-blog, #lz-postw) .lz-pcard__meta svg { width: 14px; height: 14px; opacity: .8; }
:is(#lz-blog, #lz-postw) .lz-pcard__title { font-size: 15.5px; font-weight: 700; line-height: 1.75; }
:is(#lz-blog, #lz-postw) .lz-pcard__title a { color: var(--lz-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--lz-fast) var(--lz-ease); }
:is(#lz-blog, #lz-postw) .lz-pcard__title a:hover { color: var(--lz-accent-strong); }
:is(#lz-blog, #lz-postw) .lz-pcard__excerpt { font-size: 13px; line-height: 1.95; color: var(--lz-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(#lz-blog, #lz-postw) .lz-pcard__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; color: var(--lz-accent-strong); font-weight: 700; font-size: 13px; }
:is(#lz-blog, #lz-postw) .lz-pcard__more svg { width: 16px; height: 16px; transition: transform var(--lz-fast) var(--lz-ease); }
:is(#lz-blog, #lz-postw) .lz-pcard__more:hover svg { transform: translateX(-4px); }

/* ---- empty state ---- */
#lz-blog .lz-blog__empty { padding: 60px 20px; text-align: center; border-radius: var(--lz-r-lg); background: var(--lz-glass-strong); border: 1px solid var(--lz-glass-edge); color: var(--lz-ink-soft); }
#lz-blog .lz-blog__empty svg { width: 54px; height: 54px; color: var(--lz-ink-mute); margin-bottom: 12px; }

/* ---- pagination ---- */
#lz-blog .lz-blog__pager .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; padding: 0; }
#lz-blog .lz-blog__pager .pagination a {
    min-width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px;
    border-radius: var(--lz-r-sm);
    background: var(--lz-glass-strong);
    border: 1px solid var(--lz-glass-edge);
    color: var(--lz-ink);
    font-weight: 700; font-size: 13.5px;
    box-shadow: var(--lz-sh-sm);
    transition: transform var(--lz-fast) var(--lz-ease), background var(--lz-mid) var(--lz-ease), color var(--lz-mid) var(--lz-ease);
}
#lz-blog .lz-blog__pager .pagination a:hover { transform: translateY(-2px); color: var(--lz-accent-strong); }
#lz-blog .lz-blog__pager .pagination a.active-page { background: var(--lz-grad-brand); color: #fff; border-color: transparent; box-shadow: var(--lz-sh-accent); }
#lz-blog .lz-blog__pager .pagination a i { font-size: 18px; }

/* ---- sidebar cards ---- */
#lz-blog .lz-side {
    padding: 20px;
    border-radius: var(--lz-r-lg);
    background: var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    box-shadow: var(--lz-sh-sm);
}
#lz-blog .lz-side__title { position: relative; font-size: 15px; font-weight: 700; color: var(--lz-ink); margin-bottom: 18px; padding-bottom: 12px; }
#lz-blog .lz-side__title::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 30px; height: 3px; border-radius: 3px; background: var(--lz-grad-brand); }
#lz-blog .lz-side__list { display: flex; flex-direction: column; gap: 6px; }
#lz-blog .lz-side__item { display: flex; gap: 12px; padding: 10px; border-radius: var(--lz-r); transition: background var(--lz-fast) var(--lz-ease); }
#lz-blog .lz-side__item:hover { background: rgba(232,74,138,.07); }
#lz-blog .lz-side__thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: #eef1f8; }
#lz-blog .lz-side__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#lz-blog .lz-side__ptitle { font-size: 13px; font-weight: 600; color: var(--lz-ink); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#lz-blog .lz-side__item:hover .lz-side__ptitle { color: var(--lz-accent-strong); }
#lz-blog .lz-side__excerpt { font-size: 11.5px; color: var(--lz-ink-mute); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* sidebar CTA */
#lz-blog .lz-side--cta { background: var(--lz-grad-brand); border: 0; color: #fff; box-shadow: var(--lz-sh-accent); }
#lz-blog .lz-side--cta .lz-side__cta-t { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
#lz-blog .lz-side--cta .lz-side__cta-s { font-size: 12.5px; opacity: .92; line-height: 1.8; margin-bottom: 14px; }
#lz-blog .lz-side--cta a { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: var(--lz-pill); background: #fff; color: var(--lz-accent-strong); font-weight: 700; font-size: 13px; }
#lz-blog .lz-side--cta a svg { width: 16px; height: 16px; }

/* =======================================================================
   single article
   ======================================================================= */
#lz-blog .lz-art {
    border-radius: var(--lz-r-lg);
    overflow: hidden;
    background: var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    box-shadow: var(--lz-sh-sm);
}
#lz-blog .lz-art__cover { display: block; aspect-ratio: 16 / 8; overflow: hidden; background: #eef1f8; }
#lz-blog .lz-art__cover img { width: 100%; height: 100%; object-fit: cover; }
#lz-blog .lz-art__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
#lz-blog .lz-art__meta a, #lz-blog .lz-art__meta span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: var(--lz-pill);
    background: var(--lz-glass-strong);
    border: 1px solid var(--lz-glass-edge);
    color: var(--lz-ink-soft);
    font-size: 12.5px; font-weight: 600;
}
#lz-blog .lz-art__meta a:hover { color: var(--lz-accent-strong); }
#lz-blog .lz-art__meta svg { width: 15px; height: 15px; color: var(--lz-accent); }

/* article prose */
#lz-blog .lz-art__content { padding: 28px clamp(20px, 3vw, 36px) 34px; color: var(--lz-ink-soft); font-size: 15px; line-height: 2.1; }
#lz-blog .lz-art__content > *:first-child { margin-top: 0; }
#lz-blog .lz-art__content h1, #lz-blog .lz-art__content h2, #lz-blog .lz-art__content h3, #lz-blog .lz-art__content h4 { color: var(--lz-ink); font-weight: 800; line-height: 1.5; margin: 30px 0 14px; }
#lz-blog .lz-art__content h2 { font-size: 21px; }
#lz-blog .lz-art__content h3 { font-size: 18px; }
#lz-blog .lz-art__content h4 { font-size: 16px; }
#lz-blog .lz-art__content p { margin: 0 0 16px; }
#lz-blog .lz-art__content a { color: var(--lz-accent-strong); font-weight: 600; }
#lz-blog .lz-art__content a:hover { text-decoration: underline; }
#lz-blog .lz-art__content ul, #lz-blog .lz-art__content ol { margin: 0 0 18px; padding-inline-start: 22px; }
#lz-blog .lz-art__content ul li { list-style: none; position: relative; padding-inline-start: 20px; margin-bottom: 9px; }
#lz-blog .lz-art__content ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--lz-mint); }
#lz-blog .lz-art__content ol { list-style: decimal; }
#lz-blog .lz-art__content ol li { margin-bottom: 9px; }
#lz-blog .lz-art__content img { max-width: 100%; height: auto; border-radius: 16px; margin: 20px 0; display: block; }
#lz-blog .lz-art__content blockquote { margin: 20px 0; padding: 16px 20px; border-radius: var(--lz-r); background: rgba(232,74,138,.06); border-inline-start: 4px solid var(--lz-accent); color: var(--lz-ink); }
#lz-blog .lz-art__content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13.5px; }
#lz-blog .lz-art__content th, #lz-blog .lz-art__content td { border: 1px solid var(--lz-hair); padding: 10px 12px; text-align: start; }
#lz-blog .lz-art__content th { background: rgba(20,24,43,.04); color: var(--lz-ink); font-weight: 700; }
#lz-blog .lz-art__content iframe, #lz-blog .lz-art__content video { max-width: 100%; border-radius: 16px; margin: 18px 0; }

/* share */
#lz-blog .lz-art__share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 16px 20px; border-radius: var(--lz-r); background: var(--lz-glass-strong); border: 1px solid var(--lz-glass-edge); }
#lz-blog .lz-art__share strong { color: var(--lz-ink); font-size: 13.5px; margin-inline-end: 4px; }
#lz-blog .lz-art__share a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.6); border: 1px solid var(--lz-hair); color: var(--lz-ink); font-size: 19px; transition: transform var(--lz-fast) var(--lz-ease), background var(--lz-mid) var(--lz-ease), color var(--lz-mid) var(--lz-ease); }
#lz-blog .lz-art__share a:hover { transform: translateY(-3px); background: var(--lz-grad-brand); color: #fff; }
#lz-blog .lz-art__comments { margin-top: 26px; }

/* =======================================================================
   responsive
   ======================================================================= */
@media (max-width: 992px) {
    #lz-blog .lz-blog__layout { flex-direction: column; }
    #lz-blog .lz-blog__side { position: static; width: 100%; flex-basis: auto; flex-direction: row; flex-wrap: wrap; }
    #lz-blog .lz-blog__side > * { flex: 1 1 280px; }
}
@media (max-width: 600px) {
    #lz-blog .lz-blog__grid { grid-template-columns: 1fr; }
    #lz-blog .lz-blog__head { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    #lz-blog *, #lz-blog *::before, #lz-blog *::after { transition-duration: .01ms !important; }
}


/* =======================================================================
   ===================  HOME BLOG + FAQ WIDGET  ==========================
   widgets/posts.blade.php · isolated under #lz-postw (reuses .lz-pcard)
   ======================================================================= */
#lz-postw {
    position: relative;
    display: block;
    padding: 26px 0 16px;
    font-family: var(--lz-font);
    color: var(--lz-ink);
    -webkit-font-smoothing: antialiased;
}
#lz-postw, #lz-postw *, #lz-postw *::before, #lz-postw *::after { box-sizing: border-box; }
#lz-postw a { text-decoration: none; color: inherit; }

/* reset (low specificity; covers reused .lz-pcard internals too) */
#lz-postw :where(.lz-faq, .lz-faq *, .lz-postw__head, .lz-postw__head *,
                 .lz-pcard, .lz-pcard *, .lz-postw__more, .lz-postw__more *) {
    margin: 0; padding: 0; border: 0;
    background: none; box-shadow: none; list-style: none; float: none;
    text-decoration: none; color: inherit;
    font-family: var(--lz-font); line-height: inherit;
}

/* ---- FAQ ---- */
#lz-postw .lz-faq {
    position: relative;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 26px;
    align-items: stretch;
    margin-bottom: 60px;
    padding: 30px;
    border-radius: 30px;
    background:
        radial-gradient(135% 130% at 100% 0%, rgba(255, 92, 158, .10), transparent 55%),
        radial-gradient(125% 130% at 0% 100%, rgba(47, 201, 189, .10), transparent 55%),
        var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    box-shadow: var(--lz-sh);
    overflow: hidden;
}
#lz-postw .lz-faq__decor {
    position: absolute; z-index: 0; pointer-events: none;
    inset-block-end: -120px; inset-inline-start: -90px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(177, 75, 208, .20), transparent 70%);
}

/* intro / brand rail */
#lz-postw .lz-faq__intro {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 30px 26px 26px;
    border-radius: 24px;
    background:
        radial-gradient(135% 95% at 50% 0%, rgba(255, 92, 158, .16), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .28));
    border: 1px solid var(--lz-glass-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--lz-sh-sm);
    overflow: hidden;
}
#lz-postw .lz-faq__badge {
    width: 62px; height: 62px; margin-bottom: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 19px; color: #fff;
    background: var(--lz-grad-brand);
    box-shadow: var(--lz-sh-accent);
}
#lz-postw .lz-faq__badge svg { width: 30px; height: 30px; }
#lz-postw .lz-faq__title { font-size: 25px; font-weight: 800; color: var(--lz-ink); margin-bottom: 8px; }
#lz-postw .lz-faq__title b { color: var(--lz-accent-strong); }
#lz-postw .lz-faq__sub { font-size: 14px; color: var(--lz-ink-soft); line-height: 1.95; max-width: 320px; }
#lz-postw .lz-faq__media { position: relative; width: 100%; margin-top: auto; padding-top: 22px; display: flex; justify-content: center; }
#lz-postw .lz-faq__media::before {
    content: ""; position: absolute; z-index: 0;
    inset-block: 14% -4%; inset-inline: 14%;
    background: radial-gradient(circle at 50% 50%, rgba(232, 74, 138, .30), transparent 70%);
    filter: blur(10px);
}
#lz-postw .lz-faq__img {
    position: relative; z-index: 1;
    max-width: 232px; width: 100%; height: auto; display: block;
    border-radius: var(--lz-r-lg);
}
#lz-postw .lz-faq__cta {
    position: relative; z-index: 1;
    margin-top: 22px;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px; border-radius: var(--lz-pill);
    background: var(--lz-grad-brand); color: #fff;
    font-size: 13.5px; font-weight: 700;
    box-shadow: var(--lz-sh-accent);
    transition: transform var(--lz-fast) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease), filter var(--lz-fast) var(--lz-ease);
}
#lz-postw .lz-faq__cta svg { width: 17px; height: 17px; }
#lz-postw .lz-faq__cta:hover { transform: translateY(-2px); filter: saturate(1.06); box-shadow: 0 16px 30px -8px rgba(232, 74, 138, .55); }

/* accordion list */
#lz-postw .lz-faq__list { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
#lz-postw .lz-faq__item {
    position: relative;
    border-radius: var(--lz-r);
    background: rgba(255, 255, 255, .64);
    border: 1px solid var(--lz-glass-edge);
    box-shadow: var(--lz-sh-sm);
    overflow: hidden;
    transition: border-color var(--lz-mid) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease), background var(--lz-mid) var(--lz-ease), transform var(--lz-fast) var(--lz-ease);
}
#lz-postw .lz-faq__item::before {
    content: ""; position: absolute; z-index: 2;
    inset-inline-start: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 0; border-radius: var(--lz-pill);
    background: var(--lz-grad-brand);
    transition: height var(--lz-mid) var(--lz-ease);
}
#lz-postw .lz-faq__item:hover { transform: translateY(-1px); box-shadow: var(--lz-sh); }
#lz-postw .lz-faq__item.is-open {
    border-color: rgba(232, 74, 138, .28);
    box-shadow: 0 18px 38px -18px rgba(214, 47, 115, .35);
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(255, 92, 158, .10), transparent 60%),
        rgba(255, 255, 255, .85);
}
#lz-postw .lz-faq__item.is-open::before { height: 54%; }
#lz-postw .lz-faq__q {
    width: 100%;
    display: flex; align-items: center; gap: 14px;
    padding: 17px 20px;
    font-family: var(--lz-font);
    font-size: 15px; font-weight: 700; color: var(--lz-ink);
    text-align: start;
    cursor: pointer;
    transition: color var(--lz-fast) var(--lz-ease);
}
#lz-postw .lz-faq__num {
    flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    color: var(--lz-accent-strong);
    background: var(--lz-accent-soft);
    border: 1px solid rgba(232, 74, 138, .18);
    transition: background var(--lz-mid) var(--lz-ease), color var(--lz-mid) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease), border-color var(--lz-mid) var(--lz-ease);
}
#lz-postw .lz-faq__item.is-open .lz-faq__num { background: var(--lz-grad-brand); color: #fff; border-color: transparent; box-shadow: var(--lz-sh-accent); }
#lz-postw .lz-faq__qt { flex: 1 1 auto; min-width: 0; }
#lz-postw .lz-faq__item:hover .lz-faq__q { color: var(--lz-accent-strong); }
#lz-postw .lz-faq__chev {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--lz-accent); background: rgba(232, 74, 138, .09);
    transition: transform var(--lz-mid) var(--lz-ease), background var(--lz-mid) var(--lz-ease), color var(--lz-mid) var(--lz-ease);
}
#lz-postw .lz-faq__chev svg { width: 16px; height: 16px; }
#lz-postw .lz-faq__item.is-open .lz-faq__chev { transform: rotate(180deg); background: var(--lz-grad-brand); color: #fff; }
#lz-postw .lz-faq__a {
    max-height: 0; overflow: hidden; opacity: 0;
    color: var(--lz-ink-soft); font-size: 14px; line-height: 2.05;
    padding-block: 0; padding-inline: 66px 20px;
    transition: max-height var(--lz-mid) var(--lz-ease), padding-block var(--lz-mid) var(--lz-ease), opacity var(--lz-mid) var(--lz-ease);
}
#lz-postw .lz-faq__item.is-open .lz-faq__a { max-height: 360px; padding-block: 0 18px; opacity: 1; }
#lz-postw .lz-faq__a p { padding-top: 13px; border-top: 1px dashed var(--lz-hair); }

/* ---- section head (single space-between row) ---- */
#lz-postw .lz-postw__head {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    margin-bottom: 22px;
}
#lz-postw .lz-postw__heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
#lz-postw .lz-postw__icon {
    flex: 0 0 auto;
    width: 50px; height: 50px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 16px; color: var(--lz-mint-deep);
    background: rgba(47,201,189,.12); border: 1px solid rgba(47,201,189,.25);
}
#lz-postw .lz-postw__icon svg { width: 26px; height: 26px; }
#lz-postw .lz-postw__htext { min-width: 0; }
#lz-postw .lz-postw__htext h2 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; color: var(--lz-ink); line-height: 1.3; }
#lz-postw .lz-postw__htext h2 b { color: var(--lz-accent-strong); }
#lz-postw .lz-postw__htext p {
    font-size: 13px; color: var(--lz-ink-soft); line-height: 1.6; margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- nav arrows (live in the head; RTL inline-end = left) ---- */
#lz-postw .lz-postw__nav { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
#lz-postw .lz-postw__nav[hidden] { display: none; }
#lz-postw .lz-postw__arrow {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(12px) saturate(var(--lz-saturate));
    backdrop-filter: blur(12px) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    box-shadow: var(--lz-sh-sm);
    color: var(--lz-ink);
    cursor: pointer;
    transition: transform var(--lz-fast) var(--lz-ease), background var(--lz-mid) var(--lz-ease),
                color var(--lz-mid) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease), border-color var(--lz-mid) var(--lz-ease);
}
#lz-postw .lz-postw__arrow svg { width: 20px; height: 20px; }
#lz-postw .lz-postw__arrow:hover:not(:disabled) { background: var(--lz-grad-brand); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: var(--lz-sh-accent); }
#lz-postw .lz-postw__arrow:active:not(:disabled) { transform: scale(.95); }
#lz-postw .lz-postw__arrow:disabled { opacity: .32; cursor: default; box-shadow: none; }

/* ---- slider track (reuses .lz-pcard) — full-bleed to the LEFT only ---- */
#lz-postw .lz-postw__track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 0 18px;
    /* right edge stays on the container, left edge runs to the screen edge (RTL: inline-end = left) */
    margin-inline-end: calc(50% - 50vw);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#lz-postw .lz-postw__track::-webkit-scrollbar { display: none; }
#lz-postw .lz-postw__track > .lz-pcard { flex: 0 0 300px; scroll-snap-align: start; }

/* ---- CTA ---- */
#lz-postw .lz-postw__more { display: flex; justify-content: center; margin-top: 26px; }
#lz-postw .lz-postw__more a {
    display: inline-flex; align-items: center; gap: 9px;
    height: 50px; padding: 0 28px;
    border-radius: var(--lz-pill);
    background: var(--lz-grad-brand); color: #fff;
    font-weight: 700; font-size: 14.5px;
    box-shadow: var(--lz-sh-accent);
    transition: transform var(--lz-fast) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease), filter var(--lz-fast) var(--lz-ease);
}
#lz-postw .lz-postw__more a svg { width: 20px; height: 20px; transition: transform var(--lz-fast) var(--lz-ease); }
#lz-postw .lz-postw__more a:hover { transform: translateY(-3px); filter: saturate(1.06); box-shadow: 0 18px 34px -10px rgba(232,74,138,.55); }
#lz-postw .lz-postw__more a:hover svg { transform: translateX(-4px); }

/* keep the track's left bleed from creating page-level horizontal scroll */
.wrapper.lz-home { overflow-x: clip; }

/* ---- responsive ---- */
@media (max-width: 860px) {
    #lz-postw .lz-faq { grid-template-columns: 1fr; gap: 20px; padding: 22px; margin-bottom: 44px; border-radius: 24px; }
    #lz-postw .lz-faq__intro { padding: 26px 20px 22px; }
    #lz-postw .lz-faq__sub { max-width: 420px; }
}
@media (max-width: 600px) {
    #lz-postw .lz-postw__head { margin-bottom: 16px; gap: 12px; }
    #lz-postw .lz-postw__icon { width: 44px; height: 44px; border-radius: 14px; }
    #lz-postw .lz-postw__icon svg { width: 22px; height: 22px; }
    #lz-postw .lz-postw__htext p { display: none; }
    #lz-postw .lz-postw__nav { display: none; }
    #lz-postw .lz-postw__track > .lz-pcard { flex-basis: 82%; }
    #lz-postw .lz-faq { padding: 16px; }
    #lz-postw .lz-faq__img { max-width: 180px; }
    #lz-postw .lz-faq__q { padding: 14px; font-size: 14px; gap: 11px; }
    #lz-postw .lz-faq__num { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }
    #lz-postw .lz-faq__a { padding-inline: 53px 16px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    #lz-postw *, #lz-postw *::before, #lz-postw *::after { transition-duration: .01ms !important; }
}


/* =======================================================================
   ====================  PRODUCT CARD (.lz-prod)  ========================
   Isolated, unique-class card used by all listings + home carousels.
   Keeps only the functional hooks (.cart / .add-to-cart-single[data-action]).
   ======================================================================= */
.lz-prod {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--lz-r-lg);
    overflow: hidden;
    background: var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    backdrop-filter: blur(var(--lz-blur)) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    box-shadow: var(--lz-sh-sm);
    font-family: var(--lz-font);
    -webkit-font-smoothing: antialiased;
    transition: transform var(--lz-mid) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease);
}
.lz-prod, .lz-prod *, .lz-prod *::before, .lz-prod *::after { box-sizing: border-box; }
/* base reset for reused/native elements inside the card */

/* =======================================================================
   لبخند زیبا · Liquid Glass · Floating Contact (FAB + messenger modal)
   FULLY ISOLATED under #lz-contact (rendered OUTSIDE #lz-footer so the dark
   footer styles can never bleed in). Phone-icon FAB → glass popover /
   bottom-sheet of dynamic contact channels (config('front.socials') + options).
   NOTE: every component rule is #lz-contact-scoped (id, specificity >= 1,1,0)
   so it always beats the reset below (1,0,0) AND any theme class (0,1,0).
   Physical right/bottom (not logical inset-inline) -> stays bottom-RIGHT on RTL.
   ======================================================================= */
#lz-contact, #lz-contact * { box-sizing: border-box; }
#lz-contact :where(a, button) {
    margin: 0; border: 0; outline: 0;
    font-family: var(--lz-font); text-decoration: none; color: inherit;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}

/* ---- Floating action button ---- */
#lz-contact .lz-fab {
    position: fixed; right: 22px; bottom: 24px;
    width: 62px; height: 62px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--lz-pill);
    background: var(--lz-grad-brand);
    color: #fff; cursor: pointer;
    box-shadow: var(--lz-sh-accent), 0 10px 28px -10px rgba(20,24,43,.5);
    z-index: 99998;
    transition: transform var(--lz-mid) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease);
}
#lz-contact .lz-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 40px -10px rgba(232,74,138,.6); }
#lz-contact .lz-fab:active { transform: scale(.96); }
#lz-contact .lz-fab:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 3px; }

#lz-contact .lz-fab__pulse {
    position: absolute; inset: 0; border-radius: inherit;
    background: var(--lz-accent); z-index: -1; opacity: .5;
    animation: lz-fab-pulse 2.2s var(--lz-ease) infinite;
}
@keyframes lz-fab-pulse { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }

#lz-contact .lz-fab__ic {
    position: absolute; display: flex; align-items: center; justify-content: center;
    transition: opacity var(--lz-mid) var(--lz-ease), transform var(--lz-mid) var(--lz-ease);
}
#lz-contact .lz-fab__ic svg { width: 30px; height: 30px; }
#lz-contact .lz-fab__ic--close { opacity: 0; transform: rotate(-45deg) scale(.5); }
#lz-contact .lz-fab__ic--close svg { width: 26px; height: 26px; }
#lz-contact.is-open .lz-fab__ic--phone { opacity: 0; transform: rotate(45deg) scale(.5); }
#lz-contact.is-open .lz-fab__ic--close { opacity: 1; transform: none; }
#lz-contact.is-open .lz-fab__pulse { animation: none; opacity: 0; }

#lz-contact .lz-fab__tip {
    position: absolute; right: calc(100% + 12px); top: 50%;
    transform: translateY(-50%) translateX(8px);
    white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--lz-ink);
    background: var(--lz-glass-solid); padding: 7px 13px; border-radius: var(--lz-pill);
    box-shadow: var(--lz-sh); opacity: 0; pointer-events: none;
    transition: opacity var(--lz-fast) var(--lz-ease), transform var(--lz-fast) var(--lz-ease);
}
#lz-contact .lz-fab:hover .lz-fab__tip { opacity: 1; transform: translateY(-50%) translateX(0); }
#lz-contact.is-open .lz-fab__tip { opacity: 0 !important; }

/* ---- Overlay (dimmed + blurred, click to close) ---- */
#lz-contact .lz-contact__overlay {
    position: fixed; inset: 0; z-index: 99990;
    background: radial-gradient(120% 90% at 85% 90%, rgba(232,74,138,.16), transparent 55%), rgba(13,16,35,.52);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--lz-mid) var(--lz-ease), visibility 0s var(--lz-mid);
}
#lz-contact.is-open .lz-contact__overlay {
    opacity: 1; visibility: visible;
    transition: opacity var(--lz-mid) var(--lz-ease), visibility 0s 0s;
}

/* ---- Panel: centered, strongly-elevated glass MODAL ---- */
#lz-contact .lz-contact__panel {
    position: fixed; z-index: 99995;
    top: 50%; left: 50%;
    width: 392px; max-width: calc(100vw - 32px); max-height: min(86vh, 640px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(var(--lz-blur-strong)) saturate(var(--lz-saturate));
    backdrop-filter: blur(var(--lz-blur-strong)) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    border-radius: 26px;
    box-shadow: var(--lz-sh-pop),
                inset 0 0 0 1px rgba(255,255,255,.35),
                inset 0 1.5px 0 rgba(255,255,255,.85),
                0 30px 80px -28px rgba(177,75,208,.42);
    opacity: 0; visibility: hidden;
    transform: translate(-50%,-50%) translateY(22px) scale(.92);
    transform-origin: bottom right;
    transition: opacity var(--lz-mid) var(--lz-ease), transform var(--lz-mid) var(--lz-ease), visibility 0s var(--lz-mid);
}
#lz-contact .lz-contact__panel:focus,
#lz-contact .lz-contact__panel:focus-visible { outline: none; }
#lz-contact.is-open .lz-contact__panel {
    opacity: 1; visibility: visible; transform: translate(-50%,-50%);
    transition: opacity var(--lz-mid) var(--lz-ease),
                transform 360ms cubic-bezier(.34,1.46,.5,1),
                visibility 0s 0s;
}
/* solid fallback so it never looks washed out without backdrop-filter (covers panel, overlay AND aurora) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #lz-contact .lz-contact__panel { background: rgba(255,255,255,.97); }
    #lz-contact .lz-contact__overlay { background: rgba(13,16,35,.62); }
    #lz-contact .lz-aurora { opacity: .5; }
}

/* ---- Living aurora bloom drifting BEHIND the frosted glass (on-brand: pink + soft-purple + mint) ---- */
#lz-contact .lz-aurora {
    position: absolute; inset: -40%; z-index: 0; pointer-events: none;
    filter: blur(34px) saturate(130%); opacity: .9;
    background:
        radial-gradient(38% 42% at 22% 26%, #FF5C9E 0%, transparent 62%),
        radial-gradient(40% 44% at 80% 22%, #B14BD0 0%, transparent 60%),
        radial-gradient(46% 50% at 74% 82%, #2FC9BD 0%, transparent 62%),
        radial-gradient(40% 46% at 18% 84%, #E84A8A 0%, transparent 60%),
        radial-gradient(60% 60% at 50% 50%, #B14BD0 0%, transparent 70%);
    background-size: 180% 180%;
    animation: lz-aurora-drift 16s ease-in-out infinite alternate;
}
#lz-contact .lz-aurora::after {
    content: ""; position: absolute; inset: 0;
    background: conic-gradient(from 120deg at 60% 40%,
        rgba(255,92,158,.45), rgba(177,75,208,.45), rgba(47,201,189,.45), rgba(232,74,138,.45), rgba(255,92,158,.45));
    mix-blend-mode: screen; opacity: .3;
    animation: lz-aurora-spin 24s linear infinite;
}
@keyframes lz-aurora-drift {
    0%   { background-position: 0% 50%;   transform: scale(1.05) translate(0,0); }
    50%  { background-position: 100% 30%; transform: scale(1.18) translate(2%,-3%); }
    100% { background-position: 30% 100%; transform: scale(1.08) translate(-2%,2%); }
}
@keyframes lz-aurora-spin { to { transform: rotate(360deg); } }

/* soft scrim over the aurora keeps the frost milky & text AA-legible */
#lz-contact .lz-contact__panel::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.38) 40%, rgba(255,255,255,.56));
}
/* thin iridescent specular light running along the TOP edge */
#lz-contact .lz-contact__panel::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2) 10%, #FFB6D5 28%, #E2B6F0 46%, #A8F0E8 64%, rgba(255,255,255,.2) 90%, transparent);
    background-size: 220% 100%;
    animation: lz-specular 6s linear infinite;
    box-shadow: 0 0 12px rgba(255,255,255,.55);
}
@keyframes lz-specular { to { background-position: -220% 0; } }

/* pause the heavy aurora/specular compositing while the (hidden) modal is closed */
#lz-contact .lz-aurora,
#lz-contact .lz-aurora::after,
#lz-contact .lz-contact__panel::after { animation-play-state: paused; }
#lz-contact.is-open .lz-aurora,
#lz-contact.is-open .lz-aurora::after,
#lz-contact.is-open .lz-contact__panel::after { animation-play-state: running; }

/* keep real content above the aurora + scrim */
#lz-contact .lz-contact__head,
#lz-contact .lz-contact__grid,
#lz-contact .lz-contact__foot { position: relative; z-index: 2; }

/* ---- Head ---- */
#lz-contact .lz-contact__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--lz-hair);
}
#lz-contact .lz-contact__heading { min-width: 0; }
#lz-contact .lz-contact__eyebrow {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 7px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
    color: var(--lz-accent-strong);
    background: rgba(255,255,255,.6); padding: 4px 11px 4px 9px; border-radius: var(--lz-pill);
    border: 1px solid rgba(232,74,138,.18);
}
#lz-contact .lz-contact__eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--lz-mint); box-shadow: 0 0 0 0 rgba(47,201,189,.5);
    animation: lz-live 2s var(--lz-ease) infinite;
}
@keyframes lz-live { 0% { box-shadow: 0 0 0 0 rgba(47,201,189,.5); } 70% { box-shadow: 0 0 0 7px rgba(47,201,189,0); } 100% { box-shadow: 0 0 0 0 rgba(47,201,189,0); } }
#lz-contact .lz-contact__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--lz-ink); letter-spacing: -.01em; }
#lz-contact .lz-contact__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--lz-ink-soft); line-height: 1.7; max-width: 26ch; }
#lz-contact .lz-contact__close {
    position: relative; flex: 0 0 auto; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--lz-ink-soft); cursor: pointer;
    background: rgba(255,255,255,.62); border: 1px solid var(--lz-hair);
    transition: background var(--lz-fast), color var(--lz-fast), transform var(--lz-fast);
}
#lz-contact .lz-contact__close::after { content: ""; position: absolute; inset: -2px; } /* extends hit area to >=44px */
#lz-contact .lz-contact__close:hover { background: var(--lz-accent-soft); color: var(--lz-accent-strong); transform: rotate(90deg); }
#lz-contact .lz-contact__close:focus-visible { outline: 2px solid var(--lz-accent); outline-offset: 2px; }
#lz-contact .lz-contact__close svg { width: 18px; height: 18px; }

/* ---- Channel grid ---- */
#lz-contact .lz-contact__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px;
    padding: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

#lz-contact .lz-ch {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; text-align: right; min-height: 44px;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(255,255,255,.75);
    border-radius: var(--lz-r); cursor: pointer;
    box-shadow: var(--lz-sh-sm), inset 0 1px 0 rgba(255,255,255,.7);
    transition: transform var(--lz-fast) var(--lz-ease), box-shadow var(--lz-fast) var(--lz-ease),
                border-color var(--lz-fast), background var(--lz-fast);
}
/* holographic sheen sweep on hover (RTL: travels right -> left) */
#lz-contact .lz-ch::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: -60%; width: 55%; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.85), rgba(232,182,240,.5), transparent);
    transform: skewX(-18deg); opacity: 0;
    transition: opacity var(--lz-fast) ease;
}
#lz-contact .lz-ch:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.84);
    box-shadow: var(--lz-sh), inset 0 1px 0 rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.95);
}
#lz-contact .lz-ch:hover::before { opacity: 1; animation: lz-sheen .8s var(--lz-ease); }
@keyframes lz-sheen { 0% { right: -60%; } 100% { right: 115%; } }
#lz-contact .lz-ch:focus-visible { outline: 2px solid var(--lz-accent); outline-offset: 2px; }

#lz-contact .lz-ch__ic {
    position: relative; flex: 0 0 auto;
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: var(--ch, var(--lz-grad-brand));
    box-shadow: 0 8px 18px -7px rgba(20,24,43,.5);
}
#lz-contact .lz-ch__ic::after { /* glossy top highlight on the chip */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.42), transparent 55%);
}
#lz-contact .lz-ch__ic svg { width: 24px; height: 24px; position: relative; z-index: 1; }
#lz-contact .lz-ch__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#lz-contact .lz-ch__name { font-size: 13.5px; font-weight: 700; color: var(--lz-ink); }
#lz-contact .lz-ch__hint { font-size: 12px; font-weight: 500; color: var(--lz-ink-soft); }

/* staggered tile entrance (reduced-motion safe — see media query) */
#lz-contact.is-open .lz-ch { animation: lz-tile-in 420ms var(--lz-ease) both; }
#lz-contact.is-open .lz-ch:nth-child(1) { animation-delay: 90ms; }
#lz-contact.is-open .lz-ch:nth-child(2) { animation-delay: 130ms; }
#lz-contact.is-open .lz-ch:nth-child(3) { animation-delay: 170ms; }
#lz-contact.is-open .lz-ch:nth-child(4) { animation-delay: 210ms; }
#lz-contact.is-open .lz-ch:nth-child(5) { animation-delay: 250ms; }
#lz-contact.is-open .lz-ch:nth-child(6) { animation-delay: 290ms; }
#lz-contact.is-open .lz-ch:nth-child(n+7) { animation-delay: 330ms; }
@keyframes lz-tile-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---- Foot (reassurance line) ---- */
#lz-contact .lz-contact__foot {
    padding: 12px 18px 16px; border-top: 1px solid var(--lz-hair);
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 12px; font-weight: 600; color: var(--lz-ink-soft);
}
#lz-contact .lz-contact__foot svg { width: 14px; height: 14px; color: var(--lz-mint-deep); flex: 0 0 auto; }

body.lz-contact-lock { overflow: hidden; }

/* ---- responsive ---- */
@media (max-width: 991px) {
    #lz-contact .lz-fab { width: 56px; height: 56px; right: 14px; bottom: 86px; }
    #lz-contact .lz-fab__ic svg { width: 27px; height: 27px; }
}
@media (max-width: 560px) {
    #lz-contact .lz-contact__panel {
        top: auto; left: 0; right: 0; bottom: 0;
        width: auto; max-width: none; max-height: 88vh;
        border-radius: 26px 26px 0 0;
        transform: translateY(100%); transform-origin: bottom center;
    }
    #lz-contact.is-open .lz-contact__panel { transform: translateY(0); }
    #lz-contact .lz-contact__panel::after { border-radius: 26px 26px 0 0; animation: none; }
    #lz-contact .lz-contact__grid { grid-template-columns: 1fr; }
    /* tame the aurora on mobile (GPU + Safari blend cost) */
    #lz-contact .lz-aurora { filter: blur(28px) saturate(122%); animation-duration: 26s; }
    #lz-contact .lz-aurora::after { display: none; }
}

/* ---- reduced motion: freeze aurora + kill transitions/animations ---- */
@media (prefers-reduced-motion: reduce) {
    #lz-contact .lz-fab, #lz-contact .lz-fab__ic, #lz-contact .lz-fab__tip,
    #lz-contact .lz-contact__overlay, #lz-contact .lz-contact__panel,
    #lz-contact .lz-ch, #lz-contact .lz-contact__close {
        transition-duration: .01ms !important;
    }
    #lz-contact .lz-fab__pulse,
    #lz-contact .lz-aurora, #lz-contact .lz-aurora::after,
    #lz-contact .lz-contact__panel::after,
    #lz-contact .lz-contact__eyebrow .dot,
    #lz-contact.is-open .lz-ch { animation: none !important; }
    #lz-contact.is-open .lz-ch { opacity: 1; transform: none; }
}

/* =======================================================================
   Floaters — scroll-progress bar (top) + back-to-top FAB (bottom-left).
   The FAB mirrors the #lz-contact FAB (same size / gradient / lift), placed
   on the OPPOSITE physical side so the two corners feel like a pair.
   ======================================================================= */
/* ---- scroll progress bar ---- */
.lz-scrollbar {
    position: fixed; top: 0; inset-inline: 0; height: 4px;
    z-index: 100000; pointer-events: none; background: transparent;
}
.lz-scrollbar__fill {
    display: block; height: 100%; width: 0;
    background: var(--lz-grad-brand);
    box-shadow: 0 0 12px rgba(232, 74, 138, .55);
    border-start-end-radius: 3px; border-end-end-radius: 3px;
    will-change: width;
    transition: width .08s linear;
}

/* ---- back-to-top FAB (physical left → stays bottom-LEFT on RTL) ---- */
#lz-totop {
    position: fixed; left: 22px; bottom: 24px;
    width: 62px; height: 62px;
    display: flex; align-items: center; justify-content: center;
    border: 0; padding: 0; border-radius: var(--lz-pill);
    background: var(--lz-grad-brand);
    color: #fff; cursor: pointer;
    box-shadow: var(--lz-sh-accent), 0 10px 28px -10px rgba(20, 24, 43, .5);
    font-family: var(--lz-font);
    z-index: 99998;
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9);
    transition: opacity var(--lz-mid) var(--lz-ease), transform var(--lz-mid) var(--lz-ease),
                box-shadow var(--lz-mid) var(--lz-ease), visibility var(--lz-mid);
}
#lz-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
#lz-totop:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 40px -10px rgba(232, 74, 138, .6); }
#lz-totop.is-visible:active { transform: scale(.96); }
#lz-totop:focus-visible { outline: 3px solid rgba(255, 255, 255, .9); outline-offset: 3px; }
#lz-totop svg { width: 26px; height: 26px; display: block; }
/* hover label — sits to the inline-end (right) of the left-anchored button */
#lz-totop .lz-totop__tip {
    position: absolute; left: calc(100% + 12px); top: 50%;
    transform: translateY(-50%) translateX(-8px);
    white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--lz-ink);
    background: var(--lz-glass-solid); padding: 7px 13px; border-radius: var(--lz-pill);
    box-shadow: var(--lz-sh); opacity: 0; pointer-events: none;
    transition: opacity var(--lz-fast) var(--lz-ease), transform var(--lz-fast) var(--lz-ease);
}
#lz-totop:hover .lz-totop__tip { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (prefers-reduced-motion: reduce) {
    .lz-scrollbar__fill, #lz-totop { transition: none; }
}

/* =======================================================================
   widgets/categories.blade.php · isolated under #lz-cats · BENTO GRID
   Glass tiles + full-bleed product image + slim liquid-glass caption.
   3-col grid (one .is-feat 2x2 + uniform .is-cell ~2:1) so the landscape
   product photos stay visible with minimal crop. auto-flow:dense keeps it
   gap-free for any count.
   ======================================================================= */
#lz-cats {
    position: relative;
    display: block;
    padding: 26px 0 16px;
    font-family: var(--lz-font);
    color: var(--lz-ink);
    -webkit-font-smoothing: antialiased;
}
#lz-cats, #lz-cats *, #lz-cats *::before, #lz-cats *::after { box-sizing: border-box; }
#lz-cats a { text-decoration: none; color: inherit; }

/* reset (low specificity = just #lz-cats, sits below our styling, above theme) */
#lz-cats :where(.lz-cats__head, .lz-cats__head *, .lz-cat, .lz-cat *) {
    margin: 0; padding: 0; border: 0;
    background: none; box-shadow: none; list-style: none; float: none;
    text-decoration: none; color: inherit;
    font-family: var(--lz-font); line-height: inherit;
}

/* ---- section head ---- */
#lz-cats .lz-cats__head { text-align: center; margin-bottom: 30px; }
#lz-cats .lz-cats__head .lz-cats__icon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 18px; color: var(--lz-accent-strong);
    background: rgba(232, 74, 138, .10);
    border: 1px solid rgba(232, 74, 138, .22);
}
#lz-cats .lz-cats__head .lz-cats__icon svg { width: 28px; height: 28px; }
#lz-cats .lz-cats__head h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--lz-ink); margin-bottom: 8px; }
#lz-cats .lz-cats__head h2 b { color: var(--lz-accent-strong); }
#lz-cats .lz-cats__head p { font-size: 14px; color: var(--lz-ink-soft); line-height: 1.9; max-width: 460px; margin: 0 auto; }

/* ---- bento grid (3-col: feature 2x2 + uniform landscape cells) ---- */
#lz-cats .lz-cats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 188px;
    grid-auto-flow: dense;
    gap: 18px;
}
#lz-cats .lz-cat.is-feat { grid-column: span 2; grid-row: span 2; }
#lz-cats .lz-cat.is-cell { grid-column: span 1; grid-row: span 1; }

/* ---- tile ---- */
#lz-cats .lz-cat {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 11px;
    overflow: hidden;
    border-radius: var(--lz-r-lg);
    isolation: isolate;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(255, 92, 158, .14), transparent 58%),
        radial-gradient(120% 120% at 0% 100%, rgba(47, 201, 189, .12), transparent 58%),
        var(--lz-glass-strong);
    border: 1px solid var(--lz-glass-edge);
    box-shadow: var(--lz-sh-sm);
    transition: transform var(--lz-mid) var(--lz-ease),
                box-shadow var(--lz-mid) var(--lz-ease),
                border-color var(--lz-mid) var(--lz-ease);
}
#lz-cats .lz-cat__img {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform var(--lz-mid) var(--lz-ease);
}
/* soft scrim only at the very bottom so the product stays visible */
#lz-cats .lz-cat__shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(20, 24, 43, .26) 0%, rgba(20, 24, 43, .02) 30%, transparent 52%);
}

/* ---- slim liquid-glass caption ---- */
#lz-cats .lz-cat__cap {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 7px 7px 9px;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .50), rgba(255, 255, 255, .34));
    -webkit-backdrop-filter: blur(26px) saturate(190%);
    backdrop-filter: blur(26px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 22px -10px rgba(20, 24, 43, .30), inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: transform var(--lz-mid) var(--lz-ease);
}
#lz-cats .lz-cat__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-inline-start: 6px; }
#lz-cats .lz-cat__title {
    font-size: 14px; font-weight: 800; color: var(--lz-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#lz-cats .lz-cat__count { font-size: 11px; font-weight: 700; color: var(--lz-accent-strong); }
#lz-cats .lz-cat.is-feat .lz-cat__title { font-size: 18px; }
#lz-cats .lz-cat.is-feat .lz-cat__count { font-size: 12.5px; }
#lz-cats .lz-cat.is-feat .lz-cat__cap { padding: 9px 9px 9px 12px; border-radius: 17px; }

#lz-cats .lz-cat__cta {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px;
    border-radius: var(--lz-pill);
    font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
    background: var(--lz-grad-brand);
    box-shadow: var(--lz-sh-accent);
    transition: transform var(--lz-fast) var(--lz-ease);
}
#lz-cats .lz-cat__cta svg { width: 14px; height: 14px; transition: transform var(--lz-fast) var(--lz-ease); }

/* ---- hover ---- */
#lz-cats .lz-cat:hover { transform: translateY(-5px); box-shadow: var(--lz-sh); border-color: rgba(232, 74, 138, .30); }
#lz-cats .lz-cat:hover .lz-cat__img { transform: scale(1.07); }
#lz-cats .lz-cat:hover .lz-cat__cta { transform: translateY(-1px); }
#lz-cats .lz-cat:hover .lz-cat__cta svg { transform: translateX(-3px); }
#lz-cats .lz-cat:focus-visible { outline: 2px solid var(--lz-accent); outline-offset: 3px; }

/* ---- responsive ---- */
@media (max-width: 991.98px) {
    #lz-cats .lz-cats__grid { grid-auto-rows: 168px; gap: 14px; }
}
@media (max-width: 767.98px) {
    #lz-cats .lz-cats__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 156px; }
    #lz-cats .lz-cat.is-feat { grid-column: span 2; grid-row: span 1; }
    #lz-cats .lz-cat.is-cell { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 479.98px) {
    #lz-cats .lz-cats__grid { grid-template-columns: 1fr; grid-auto-rows: 184px; gap: 12px; }
    #lz-cats .lz-cat.is-feat, #lz-cats .lz-cat.is-cell { grid-column: span 1; grid-row: span 1; }
}

/* ---- no backdrop-filter fallback ---- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #lz-cats .lz-cat__cap { background: rgba(255, 255, 255, .92); }
}
@media (prefers-reduced-motion: reduce) {
    #lz-cats .lz-cat, #lz-cats .lz-cat__img, #lz-cats .lz-cat__cta, #lz-cats .lz-cat__cta svg { transition-duration: .01ms; }
    #lz-cats .lz-cat:hover { transform: none; }
    #lz-cats .lz-cat:hover .lz-cat__img { transform: none; }
}


/* =======================================================================
   ====================  PRODUCTS WIDGET (.lz-prodw)  ====================
   Home product carousels (products-default-block). Isolated wrapper with a
   blog-style single-row head + a full-bleed-LEFT scroll-snap track that
   reuses the shared .lz-prod card. Mirrors #lz-postw. The page-scroll guard
   is the shared `.wrapper.lz-home { overflow-x: clip }` rule defined above.
   ======================================================================= */
.lz-prodw { font-family: var(--lz-font); -webkit-font-smoothing: antialiased; color: var(--lz-ink); margin-bottom: 10px; }
.lz-prodw, .lz-prodw *, .lz-prodw *::before, .lz-prodw *::after { box-sizing: border-box; }
.lz-prodw a { text-decoration: none; color: inherit; }

/* reset (low specificity; explicit rules below follow in source order and win) */
.lz-prodw :where(.lz-prodw__head, .lz-prodw__head *) {
    margin: 0; padding: 0; border: 0;
    background: none; box-shadow: none; list-style: none; float: none;
    text-decoration: none; color: inherit;
    font-family: var(--lz-font); line-height: inherit;
}

/* head: single space-between row */
.lz-prodw__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.lz-prodw__heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lz-prodw__icon {
    flex: 0 0 auto; width: 50px; height: 50px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 16px; color: var(--lz-accent-strong);
    background: var(--lz-accent-soft); border: 1px solid rgba(232, 74, 138, .22);
}
.lz-prodw__icon svg { width: 26px; height: 26px; }
.lz-prodw__title { min-width: 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; color: var(--lz-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* tools: arrows + see-all grouped on the RTL end (left) */
.lz-prodw__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.lz-prodw__all { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--lz-accent-strong); white-space: nowrap; transition: gap var(--lz-fast) var(--lz-ease); }
.lz-prodw__all svg { width: 18px; height: 18px; }
.lz-prodw__all:hover { gap: 11px; }

.lz-prodw__nav { display: flex; align-items: center; gap: 10px; }
.lz-prodw__nav[hidden] { display: none; }
.lz-prodw__arrow {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--lz-glass-strong);
    -webkit-backdrop-filter: blur(12px) saturate(var(--lz-saturate));
    backdrop-filter: blur(12px) saturate(var(--lz-saturate));
    border: 1px solid var(--lz-glass-edge);
    box-shadow: var(--lz-sh-sm);
    color: var(--lz-ink);
    cursor: pointer;
    transition: transform var(--lz-fast) var(--lz-ease), background var(--lz-mid) var(--lz-ease),
                color var(--lz-mid) var(--lz-ease), box-shadow var(--lz-mid) var(--lz-ease), border-color var(--lz-mid) var(--lz-ease);
}
.lz-prodw__arrow svg { width: 20px; height: 20px; }
.lz-prodw__arrow:hover:not(:disabled) { background: var(--lz-grad-brand); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: var(--lz-sh-accent); }
.lz-prodw__arrow:active:not(:disabled) { transform: scale(.95); }
.lz-prodw__arrow:disabled { opacity: .32; cursor: default; box-shadow: none; }

/* track: full-bleed to the LEFT only (RTL: inline-end = left) */
.lz-prodw__track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 4px 0 10px;
    margin-inline-end: calc(50% - 50vw);
    -ms-overflow-style: none; scrollbar-width: none;
}
.lz-prodw__track::-webkit-scrollbar { display: none; }
.lz-prodw__track > .item, .lz-prodw__track > .lz-prod { flex: 0 0 220px; min-width: 0; margin: 0; padding: 0; scroll-snap-align: start; }

/* responsive */
@media (max-width: 600px) {
    .lz-prodw__head { margin-bottom: 14px; gap: 12px; }
    .lz-prodw__icon { width: 44px; height: 44px; border-radius: 14px; }
    .lz-prodw__icon svg { width: 22px; height: 22px; }
    .lz-prodw__nav { display: none; }
    .lz-prodw__track > .item, .lz-prodw__track > .lz-prod { flex-basis: 46%; }
}
@media (prefers-reduced-motion: reduce) {
    .lz-prodw *, .lz-prodw *::before, .lz-prodw *::after { transition-duration: .01ms !important; }
}

/* ── Main slider: full-bleed (edge-to-edge, no side gap) ─────────── */
.main-slider-full { width: 100%; max-width: 100%; padding-right: 0; padding-left: 0; }
.main-slider-full .index-main-slider { width: 100%; margin-right: 0; margin-left: 0; }
/* The slide column is .col-lg-12.col-md-12 — neither breakpoint sets a width
   below 768px, so the flex row would shrink-wrap to its content. With img-fluid
   (max-width:100%) the content measures 0 → the whole mobile slider collapsed
   to zero width and disappeared. Pin the row/col to full width on every viewport. */
.main-slider-full .index-main-slider > [class*="col-"] { flex: 0 0 100%; max-width: 100%; width: 100%; padding-right: 0; padding-left: 0; }
/* drop the card frame so the slide sits flush against the viewport edges */
.main-slider-full .main-slider.card { border: 0; border-radius: 0; margin: 0; box-shadow: none; }
.main-slider-full .main-slider .carousel-item img,
.main-slider-full .main-slider .carousel-inner img { border-radius: 0; }
/* Video slides are locked to the uploaded image's height.
   The poster <img> renders in normal flow and sets the slide's height (from the
   image's own aspect ratio); the <video> is then absolutely stretched to fill
   that exact box with object-fit: cover — so a tall (e.g. 800px) source video is
   cropped to the image's height instead of blowing the slide up. */
.main-slider .main-slider-slide { position: relative; display: block; }
.main-slider .main-slider-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.main-slider-full .main-slider .carousel-item .main-slider-video { border-radius: 0; }

/* ── Mobile: restore the content gutter (make mobile read like desktop) ──
   The theme zeroes EVERY `.container` side padding at ≤768px
   (main.css → @media (max-width:768px){.container{padding-inline:0}}).
   That suited the old edge-to-edge mobile theme, but it leaves the
   redesigned liquid-glass sections (#lz-cats, .lz-prodw, #lz-postw,
   #lz-brands, the product/category grids …) flush against BOTH screen
   edges — the "sections stuck to the sides" bug. Restore the same gutter
   the desktop container already has so mobile matches desktop.
   Scoped to the OUTER content wrapper via `>` so nested
   .container / .container-fluid blocks are never double-padded.
   Full-bleed sliders self-correct: `margin-inline-end: calc(50% - 50vw)`
   is measured against the now-padded container, so they keep bleeding to
   the left edge and simply gain the matching right gutter. */
@media (max-width: 768px) {
    .main-content > .container.main-container { padding-right: 14px; padding-left: 14px; }

    /* Category-landing tiles (products index) reuse `.product-card` inside
       `.search-card-res`, which the theme flips into a horizontal
       image(30%) + title(60%) bar on mobile. That layout is meant for
       product SEARCH results and mangles the category tiles into broken
       bars. Restore the vertical image-card the desktop grid shows so the
       tiles read the same on mobile as on desktop. Scoped to
       `.category-index` so real search results keep their mobile list. */
    .search-card-res .product-card.category-index .product-thumb { display: block; width: auto; }
    .search-card-res .product-card.category-index .product-card-body { display: block; width: auto; padding: 0 1.25rem; }
    .search-card-res .product-card.category-index .product-thumb > img { max-width: 80%; height: auto; }
}

/* ── Toman currency symbol — replaces the "تومان" suffix text ───────
   Compact inline SVG currency mark (the official Toman symbol). Inherits
   the price color via currentColor (shown at 50% via the path fill-opacity)
   and scales with the surrounding text.
   Markup: @include('front::partials.toman')  →  <svg class="toman">…    */
.toman{
    display:inline-block;
    width:auto;
    height:1.18em;              /* near-square mark, ~digit height        */
    vertical-align:-.2em;       /* centre on the text                     */
    margin-inline-start:.34em;  /* gap between the number and the mark    */
    flex:0 0 auto;              /* never shrink inside a flex price row    */
    fill:currentColor;
    pointer-events:none;
}
/* struck-through old prices: keep the mark a touch lighter, like the text */
del .toman,.lz-prod__old .toman,.old-cart-product-price .toman{opacity:.9}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE HEADER — the liquid-glass #lz-header is now the header on EVERY
   device (the old UA-gated .rb_mobile_header + offcanvas drawer were
   deleted). ≤992px the desktop nav collapses to the .btn-menu hamburger;
   the theme main.js toggles .side-menu.open + .overlay-side-menu.show and
   drives the sub-menu accordion (li.sub-menu>a → li.open + slide child ul).
   A tiny inline script in master.blade lifts .side-menu + .overlay-side-menu
   OUT of the frosted .lz-bar — its backdrop-filter is a containing block for
   fixed children, which otherwise pins the drawer to the 64px pill — up to
   #lz-header (still under header.main-header, so the theme JS keeps binding)
   where they position against the viewport.
   ═══════════════════════════════════════════════════════════════════════ */

/* hidden on desktop; the drawer only exists ≤992 (below) */
#lz-header .side-menu, #lz-header .overlay-side-menu { display: none; }

/* inner pages clear the fixed pill on mobile too (was desktop-only) */
.wrapper.lz-ua-mobile.lz-inner { padding-top: calc(var(--lz-bar-h) + 30px); }

@media (max-width: 992px) {
    /* ── pill polish ─────────────────────────────────────────────── */
    #lz-header .lz-barwrap { padding-inline: 12px; }
    #lz-header .lz-acct { padding: 0; width: 42px; height: 42px; justify-content: center; gap: 0; }
    #lz-header .lz-acct span { display: none; }
    #lz-header .lz-logo { margin-inline-end: auto; }
    #lz-header .lz-bar { gap: 6px 10px; padding-inline: 14px 12px; }
    #lz-header:has(.side-menu.open) { z-index: 100050; }

    /* ── dim scrim ───────────────────────────────────────────────── */
    #lz-header .overlay-side-menu {
        position: fixed; inset: 0; display: none;
        background: rgba(9, 12, 28, .55);
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
        z-index: 40; pointer-events: auto; cursor: pointer;
    }

    /* ═══ DRAWER — frosted liquid-glass panel ═══════════════════════ */
    #lz-header .side-menu {
        display: flex; flex-direction: column;
        position: fixed; top: 0; right: 0; bottom: 0;
        width: min(87vw, 340px);
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,249,253,.93));
        -webkit-backdrop-filter: blur(26px) saturate(180%);
        backdrop-filter: blur(26px) saturate(180%);
        border-inline-start: 1px solid rgba(255,255,255,.6);
        box-shadow: -26px 0 70px rgba(14, 18, 38, .32);
        transform: translateX(100%); visibility: hidden;
        transition: transform .36s cubic-bezier(.33, 1, .68, 1), visibility .36s;
        z-index: 50; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; font-family: var(--lz-font); direction: rtl;
        /* CRITICAL: #lz-header is pointer-events:none (so the fixed pill doesn't
           block the page); the drawer is now its child and would INHERIT none —
           making every menu tap pass through to the scrim (which closes it).
           Re-enable interaction on the drawer + its contents. */
        pointer-events: auto;
    }
    #lz-header .side-menu.open { transform: translateX(0); visibility: visible; }
    /* soft brand aura across the top */
    #lz-header .side-menu::before {
        content: ""; position: absolute; inset: 0 0 auto 0; height: 200px; pointer-events: none;
        background:
            radial-gradient(130% 90% at 100% 0, rgba(232,74,138,.15), transparent 62%),
            radial-gradient(130% 90% at 0 0, rgba(47,201,189,.13), transparent 62%);
    }
    #lz-header .side-menu > * { position: relative; z-index: 1; }

    /* ── head: logo + close ──────────────────────────────────────── */
    #lz-header .side-menu .lz-mdrawer__head {
        display: flex; align-items: center; justify-content: center; padding: 20px 16px 12px;
    }
    #lz-header .side-menu .lz-mdrawer__logo,
    #lz-header .side-menu .lz-mdrawer__logo a { display: inline-flex; }
    #lz-header .side-menu .lz-mdrawer__logo img { height: 42px; width: auto; max-width: 168px; object-fit: contain; }
    #lz-header .side-menu .lz-drawer-close {
        position: absolute; top: 14px; left: 14px;
        width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--lz-hair); border-radius: 50%;
        background: rgba(255,255,255,.72); color: var(--lz-ink-soft); cursor: pointer;
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        transition: background .2s ease, color .2s ease, transform .25s ease;
    }
    #lz-header .side-menu .lz-drawer-close svg { width: 18px; height: 18px; }
    #lz-header .side-menu .lz-drawer-close:hover,
    #lz-header .side-menu .lz-drawer-close:active { background: var(--lz-accent); color: #fff; transform: rotate(90deg); }

    /* ── search ──────────────────────────────────────────────────── */
    #lz-header .side-menu .lz-mdrawer__search { padding: 4px 16px 14px; }
    #lz-header .side-menu .lz-mdrawer__search form { position: relative; margin: 0; }
    #lz-header .side-menu .lz-mdrawer__search input {
        width: 100%; max-width: none; height: 46px; border: 1px solid var(--lz-hair); border-radius: 14px;
        background: rgba(255,255,255,.72); padding: 0 16px 0 50px; font: inherit; font-size: 14px;
        color: var(--lz-ink); outline: none;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    #lz-header .side-menu .lz-mdrawer__search input::placeholder { color: var(--lz-ink-mute); }
    #lz-header .side-menu .lz-mdrawer__search input:focus {
        background: #fff; border-color: var(--lz-accent); box-shadow: 0 0 0 4px rgba(232,74,138,.13);
    }
    #lz-header .side-menu .lz-mdrawer__searchbtn {
        position: absolute; top: 50%; left: 6px; transform: translateY(-50%);
        width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: 11px; background: var(--lz-grad-brand); color: #fff; cursor: pointer;
        box-shadow: var(--lz-sh-accent);
    }
    #lz-header .side-menu .lz-mdrawer__searchbtn svg { width: 17px; height: 17px; }

    /* ── nav list ────────────────────────────────────────────────── */
    #lz-header .side-menu .navbar-nav { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 2px 12px 6px; list-style: none; gap: 2px; }
    #lz-header .side-menu .navbar-nav li { position: relative; width: 100%; list-style: none; }
    #lz-header .side-menu .navbar-nav a {
        display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px;
        color: var(--lz-ink); font-weight: 600; font-size: 14.5px; line-height: 1.5; text-decoration: none;
        transition: background .16s ease, color .16s ease;
    }
    #lz-header .side-menu .navbar-nav > li > a { font-weight: 700; }
    #lz-header .side-menu .navbar-nav li.open > a,
    #lz-header .side-menu .navbar-nav a:hover,
    #lz-header .side-menu .navbar-nav a:active { color: var(--lz-accent-strong); background: rgba(232,74,138,.07); }

    /* icon chips */
    #lz-header .side-menu .navbar-nav .lz-mnav__ic {
        flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px;
        display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, rgba(232,74,138,.16), rgba(214,47,115,.10));
        color: var(--lz-accent-strong);
    }
    #lz-header .side-menu .navbar-nav .lz-mnav__ic svg { width: 20px; height: 20px; display: block; }
    #lz-header .side-menu .navbar-nav .lz-mnav__ic--cat {
        background: linear-gradient(135deg, rgba(47,201,189,.20), rgba(18,154,143,.12));
        color: var(--lz-mint-deep);
    }
    #lz-header .side-menu .navbar-nav .lz-mnav__tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* chevron on expandable rows */
    #lz-header .side-menu .navbar-nav .lz-mnav__chev {
        flex: 0 0 auto; width: 9px; height: 9px; margin-inline-start: 4px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg); opacity: .4; color: var(--lz-ink-soft);
        transition: transform .28s ease, opacity .2s ease, color .2s ease;
    }
    #lz-header .side-menu .navbar-nav li.sub-menu.open > a .lz-mnav__chev { transform: rotate(-135deg); opacity: .95; color: var(--lz-accent); }
    /* kill the theme's OWN MDI ::after chevron (all.css: .side-menu ul>li.sub-menu>a::after)
       — otherwise every expandable row shows TWO chevrons (theme's + our .lz-mnav__chev). */
    #lz-header .side-menu .navbar-nav li.sub-menu > a::after { content: none !important; display: none !important; }

    /* ── sub-menus (accordion) ───────────────────────────────────── */
    #lz-header .side-menu .navbar-nav ul { display: none; margin: 3px 0 6px; padding-inline-start: 12px; list-style: none; }
    #lz-header .side-menu .navbar-nav li.open > ul { display: block; animation: lzDrawerSub .28s cubic-bezier(.33,1,.68,1); }
    @keyframes lzDrawerSub { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
    #lz-header .side-menu .navbar-nav ul .lz-mnav__ic { width: 32px; height: 32px; border-radius: 10px; }
    #lz-header .side-menu .navbar-nav ul .lz-mnav__ic svg { width: 18px; height: 18px; }
    /* first-level category rows keep the mint chip */
    #lz-header .side-menu .navbar-nav ul li.lz-mnav__cat > a { font-size: 14px; font-weight: 600; color: var(--lz-ink); }
    /* deeper rows: a mint dot bullet, lighter */
    #lz-header .side-menu .navbar-nav ul li:not(.lz-mnav__cat) > a { padding: 9px 12px; font-size: 13px; font-weight: 500; color: var(--lz-ink-soft); }
    #lz-header .side-menu .navbar-nav ul li:not(.lz-mnav__cat) > a::before {
        content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--lz-mint); opacity: .55;
    }
    /* "all items of this category" link */
    #lz-header .side-menu .navbar-nav .lz-mnav__all > a { color: var(--lz-accent); font-weight: 600; }
    #lz-header .side-menu .navbar-nav .lz-mnav__all > a::before { background: var(--lz-accent); opacity: 1; }
    #lz-header .side-menu .navbar-nav ul i { display: none; }

    /* ── footer CTAs ─────────────────────────────────────────────── */
    #lz-header .side-menu .lz-mdrawer__foot {
        margin-top: auto; display: flex; gap: 10px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--lz-hair);
    }
    #lz-header .side-menu .lz-mdrawer__cta {
        flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        height: 46px; border-radius: 14px; font-weight: 700; font-size: 13.5px; text-decoration: none;
        transition: transform .16s ease, filter .16s ease;
    }
    #lz-header .side-menu .lz-mdrawer__cta svg { width: 18px; height: 18px; }
    #lz-header .side-menu .lz-mdrawer__cta--solid { background: var(--lz-grad-brand); color: #fff; box-shadow: var(--lz-sh-accent); }
    #lz-header .side-menu .lz-mdrawer__cta--ghost { background: rgba(255,255,255,.72); color: var(--lz-ink); border: 1px solid var(--lz-hair); }
    #lz-header .side-menu .lz-mdrawer__cta:active { transform: translateY(1px); }
}


aside.lz-faq__intro {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
a.nav-link{
    position: relative;
}