/* TL_HEADER_IPHONE_V1
   Desktop header in the iPhone theme (light + dark):
   row 1  logo | wide search | "تاریک/روشن" text, account button, cart icon with red badge
   row 2  categories, amazing offers, home, all products, best sellers, wishlist |
          earliest delivery for the customer's city (header-iphone-v1.js) + support phone.
   Inside layer tl-storefront-iphone (declared first) so older header rules cannot override it.
   Phones are not touched (everything is inside min-width: 841px). */
@layer tl-storefront-iphone {
@media (min-width: 841px) {
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] {
        --hdr-bar: rgba(255,255,255,.88);
        --hdr-fill: #f2f2f7;
        --hdr-ink: #1c1c1e;
        --hdr-muted: #6c6c70;
        --hdr-line: rgba(60,60,67,.14);
        --hdr-blue: #007aff;
        --hdr-red: #ff3b30;
        --hdr-chip: #fff;
        background: var(--hdr-bar) !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--hdr-line) !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        backdrop-filter: saturate(180%) blur(20px) !important;
        color: var(--hdr-ink) !important;
    }
    html[data-theme="dark"] body #tl-storefront-header.site-header.unified-site-header[data-site-header] {
        --hdr-bar: rgba(22,22,24,.88);
        --hdr-fill: #1c1c1e;
        --hdr-ink: #fff;
        --hdr-muted: #98989d;
        --hdr-line: rgba(84,84,88,.55);
        --hdr-blue: #0a84ff;
        --hdr-red: #ff453a;
        --hdr-chip: #2c2c2e;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] :is(.header-glass, .main-nav-wrap) {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* ---------- row 1 ---------- */
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-row {
        max-width: none !important;
        margin-inline: auto !important;
        min-height: 72px !important;
        height: 72px !important;
        padding: 0 32px !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto auto !important;
        align-items: center !important;
        gap: 24px !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-row:not(:has(> .header-theme-toggle)) {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .site-logo .logo-mark,
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .site-logo .logo-mark :is(picture, img) {
        width: auto !important;
        height: 42px !important;
        max-width: 200px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .site-logo .logo-mark img {
        object-fit: contain !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .site-logo .logo-mark.has-image + .logo-copy {
        display: none !important;
    }

    /* search: iOS search field */
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-search {
        position: relative !important;
        justify-self: center !important;
        width: 100% !important;
        max-width: 760px !important;
        height: 46px !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 0 16px !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;
        background: var(--hdr-fill) !important;
        background-image: none !important;
        box-shadow: none !important;
        transition: border-color .2s ease, background .2s ease !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-search:focus-within {
        border-color: var(--hdr-blue) !important;
        background: var(--hdr-chip) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-search > svg {
        display: block !important;
        flex: 0 0 19px !important;
        width: 19px !important;
        height: 19px !important;
        fill: none !important;
        stroke: var(--hdr-muted) !important;
        stroke-width: 2 !important;
        position: static !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-search input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        color: var(--hdr-ink) !important;
        font-size: 15px !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-search input::placeholder {
        color: var(--hdr-muted) !important;
        opacity: 1 !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-search > button {
        display: none !important;
    }

    /* "تاریک / روشن" as text only */
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-theme-toggle {
        width: auto !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        color: var(--hdr-ink) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-theme-toggle:hover {
        background: var(--hdr-fill) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-theme-toggle :is(.theme-toggle__icon, [data-theme-label]) {
        display: none !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-theme-toggle::after {
        content: "تاریک";
    }
    html[data-theme="dark"] body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-theme-toggle::after {
        content: "روشن";
    }

    /* account + cart */
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .header-action {
        order: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 16px !important;
        border: 1px solid var(--hdr-line) !important;
        border-radius: 12px !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        color: var(--hdr-ink) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .header-action:hover {
        background: var(--hdr-fill) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .header-action .action-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .header-action svg {
        width: 20px !important;
        height: 20px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .header-action small {
        display: none !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .header-action {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: max-content !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .header-action > span:not(.action-icon) {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-width: max-content !important;
        overflow: visible !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .header-action strong {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        color: inherit !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .cart-link {
        order: 2 !important;
        position: relative !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        margin-inline-start: 4px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        color: var(--hdr-ink) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .cart-link::before {
        content: "";
        position: absolute;
        inset-inline-end: calc(100% + 6px);
        top: 9px;
        width: 1px;
        height: 26px;
        background: var(--hdr-line);
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .cart-link:hover {
        background: var(--hdr-fill) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .cart-link .cart-label {
        display: none !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .cart-link .action-icon {
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .cart-link svg {
        width: 24px !important;
        height: 24px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .cart-link .cart-count {
        position: absolute !important;
        top: 2px !important;
        left: 0 !important;
        right: auto !important;
        min-width: 20px !important;
        height: 20px !important;
        padding: 0 5px !important;
        display: grid !important;
        place-items: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--hdr-red) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 20px !important;
        box-shadow: 0 0 0 2px var(--hdr-chip) !important;
    }

    /* ---------- row 2 ---------- */
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav-wrap > .main-nav {
        max-width: none !important;
        width: 100% !important;
        margin-inline: auto !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-header-nav__item {
        position: relative !important;
        height: 46px !important;
        min-height: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--hdr-muted) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-header-nav__item svg {
        width: 18px !important;
        height: 18px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.9 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-header-nav__item:hover {
        color: var(--hdr-ink) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-header-nav__item.is-active {
        color: var(--hdr-ink) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-header-nav__item.is-active::after {
        content: "" !important;
        position: absolute !important;
        inset: auto 12px 0 12px !important;
        height: 2px !important;
        border-radius: 2px !important;
        background: var(--hdr-blue) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-header-nav__item.tl-hdr-cat {
        color: var(--hdr-ink) !important;
        font-weight: 800 !important;
        padding-inline: 4px 12px !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-header-nav__item.tl-hdr-cat::after {
        display: none !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-header-nav__item.tl-hdr-hot {
        color: var(--hdr-red) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-hdr-vsep {
        width: 1px;
        height: 18px;
        margin: 0 8px;
        background: var(--hdr-line);
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-hdr-info {
        margin-inline-start: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
        color: var(--hdr-muted) !important;
        font-size: 13px !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-hdr-ship {
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--hdr-fill) !important;
        color: var(--hdr-muted) !important;
        font: inherit !important;
        font-size: 13px !important;
        cursor: pointer !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-hdr-ship:hover {
        color: var(--hdr-ink) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-hdr-ship svg {
        width: 17px !important;
        height: 17px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-hdr-ship b {
        color: var(--hdr-ink) !important;
        font-weight: 700 !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-hdr-ship b.is-city {
        color: var(--hdr-blue) !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-hdr-ship > i {
        width: 7px;
        height: 7px;
        margin: -3px 2px 0 0;
        border: solid currentColor;
        border-width: 0 0 1.6px 1.6px;
        transform: rotate(-45deg);
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-hdr-support {
        color: var(--hdr-muted) !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-hdr-support b {
        color: var(--hdr-ink) !important;
        font-weight: 700 !important;
    }
}

/* ---------- city picker popup ---------- */
.tl-hdr-pop {
    --pop-bg: #fff;
    --pop-fill: #f2f2f7;
    --pop-ink: #1c1c1e;
    --pop-muted: #6c6c70;
    --pop-line: rgba(60,60,67,.14);
    --pop-blue: #007aff;
    position: fixed;
    z-index: 4200;
    width: 340px;
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: var(--pop-bg);
    color: var(--pop-ink);
    box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px var(--pop-line);
    direction: rtl;
}
html[data-theme="dark"] .tl-hdr-pop {
    --pop-bg: #1c1c1e;
    --pop-fill: #2c2c2e;
    --pop-ink: #fff;
    --pop-muted: #98989d;
    --pop-line: rgba(84,84,88,.6);
    --pop-blue: #0a84ff;
    box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px var(--pop-line);
}
.tl-hdr-pop[hidden] { display: none; }
.tl-hdr-pop h4 { margin: 0; font-size: 15px; font-weight: 800; }
.tl-hdr-pop p { margin: 0; color: var(--pop-muted); font-size: 12px; line-height: 1.8; }
.tl-hdr-pop, .tl-hdr-pop :is(button, input, li) { font-family: inherit !important; }
.tl-hdr-pick { position: relative; display: grid; gap: 4px; }
.tl-hdr-pick__title { font-size: 12px; color: var(--pop-muted); }
.tl-hdr-pick__btn {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--pop-fill);
    color: var(--pop-ink);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    cursor: pointer;
}
.tl-hdr-pick__btn b { font-weight: 600; }
.tl-hdr-pick__btn.is-empty b { color: var(--pop-muted); font-weight: 500; }
.tl-hdr-pick__btn i {
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border: solid var(--pop-muted);
    border-width: 0 0 1.6px 1.6px;
    transform: rotate(-45deg);
    transition: transform .2s ease;
}
.tl-hdr-pick__btn[aria-expanded="true"] i { transform: rotate(135deg); margin-top: 4px; }
.tl-hdr-pick__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pop-blue); }
.tl-hdr-pick__panel {
    display: grid;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
    background: var(--pop-bg);
    box-shadow: 0 0 0 1px var(--pop-line);
}
.tl-hdr-pick__panel[hidden] { display: none; }
.tl-hdr-pick__panel input {
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: var(--pop-fill);
    color: var(--pop-ink);
    font-size: 14px;
    outline: none;
}
.tl-hdr-pick__panel input::placeholder { color: var(--pop-muted); }
.tl-hdr-pick__panel ul {
    max-height: 216px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
}
.tl-hdr-pick__panel li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--pop-ink);
    font-size: 14px;
    cursor: pointer;
}
.tl-hdr-pick__panel li + li { box-shadow: inset 0 1px 0 var(--pop-line); }
.tl-hdr-pick__panel li:hover { background: var(--pop-fill); box-shadow: none; }
.tl-hdr-pick__panel li.is-selected { color: var(--pop-blue); font-weight: 700; }
.tl-hdr-pick__panel li.is-selected::after { content: "\2713"; font-weight: 800; }
.tl-hdr-pick__panel li.is-empty { color: var(--pop-muted); cursor: default; }
.tl-hdr-pop .tl-hdr-pop__result {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pop-blue) 10%, transparent);
    color: var(--pop-blue);
    font-size: 13px;
    font-weight: 700;
}
.tl-hdr-pop .tl-hdr-pop__result:empty { display: none; }
html[data-theme="dark"] .tl-hdr-pop .tl-hdr-pop__result {
    background: rgba(10, 132, 255, .22);
    color: #cfe5ff;
}
.tl-hdr-pop .tl-hdr-pop__save {
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--pop-blue);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}
.tl-hdr-pop .tl-hdr-pop__save:disabled { opacity: .5; cursor: default; }
@media (min-width: 841px) {
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .cart-link .cart-count[data-count-zero] {
        display: none !important;
    }
}
@media (min-width: 841px) {
    /* TL_HEADER_NAV_V2: heart icon (wishlist) beside the cart */
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .tl-hdr-wishlist {
        order: 1 !important;
        width: 44px;
        height: 44px;
        display: grid !important;
        place-items: center;
        border-radius: 50%;
        color: var(--hdr-ink) !important;
        text-decoration: none;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .tl-hdr-wishlist:hover {
        background: var(--hdr-fill);
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .header-actions > .tl-hdr-wishlist svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linejoin: round;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header] .main-nav .tl-header-nav__item.tl-hdr-cat.is-active {
        color: var(--hdr-blue) !important;
    }
}
@media (max-width: 840px) {
    .tl-hdr-wishlist { display: none !important; }
}
/* TL_FOOTER_STAYS_DOWN_V1: short pages (few products, brands…) still fill the screen, so the footer
   never floats up into the middle of the window. */
html:root body.storefront-body > main#main-content {
    min-height: calc(100dvh - var(--tl-header-h, 120px) - var(--tl-after-main-h, 0px)) !important;
}
/* TL_HEADER_NO_COLLAPSE_V1: the desktop header keeps the same height while scrolling. Collapsing the
   menu row changed the page height under the finger, so the page, the sidebar and the buttons jumped. */
@media (min-width: 841px) {
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header].is-scrolled .main-nav-wrap {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        visibility: visible !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header].is-scrolled,
    html:root body #tl-storefront-header.site-header.unified-site-header[data-site-header].is-scrolled .header-glass {
        height: auto !important;
    }
}

/* ---------- TL_MOBILE_HEADER_IPHONE_V2: phone header, the same on every storefront page (two rows) ----------
   [logo]  [🚚 ارسال به شهر … (2 lines)]  [تاریک]
   [ search                                  ]
   After scrolling, the first row slides up so only the search stays (transform only, nothing below jumps).
   Every selector carries the header id + classes so page-specific header rules cannot move the items. */
@media (max-width: 840px) {
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header {
        --mh-bar: rgba(255,255,255,.94);
        --mh-fill: #f2f2f7;
        --mh-ink: #1c1c1e;
        --mh-muted: #6c6c70;
        --mh-line: rgba(60,60,67,.14);
        --mh-blue: #007aff;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--mh-bar) !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--mh-line) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        backdrop-filter: saturate(180%) blur(20px) !important;
        transition: transform .25s ease !important;
    }
    html[data-theme="dark"] body.storefront-body > #tl-storefront-header.site-header.unified-site-header {
        --mh-bar: rgba(22,22,24,.94);
        --mh-fill: #1c1c1e;
        --mh-ink: #fff;
        --mh-muted: #98989d;
        --mh-line: rgba(84,84,88,.6);
        --mh-blue: #0a84ff;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header.is-scrolled {
        transform: translateY(-52px) !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-glass {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) 44px !important;
        grid-template-rows: 44px 44px !important;
        grid-template-areas: "logo ship ship" "search search theme" !important;
        align-items: center !important;
        gap: 8px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 8px 16px 10px !important;
        direction: rtl !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header :is(.mobile-menu-button, .header-actions) {
        display: none !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-row > .site-logo {
        grid-area: logo !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        justify-self: start !important;
        width: max-content !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .site-logo .logo-mark {
        width: auto !important;
        max-width: 116px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .site-logo .logo-mark::before,
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .site-logo .logo-mark::after {
        display: none !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .site-logo .logo-mark picture {
        display: block !important;
        width: auto !important;
        height: 32px !important;
        margin: 0 !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .site-logo :is(.logo-copy) {
        display: none !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .site-logo .logo-mark img {
        width: auto !important;
        max-width: 116px !important;
        height: 32px !important;
        object-fit: contain !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-row > .header-theme-toggle {
        grid-area: theme !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        width: 44px !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 11px !important;
        background: var(--mh-fill) !important;
        box-shadow: none !important;
        color: var(--mh-ink) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }
    /* icon only (moon = switch to dark, sun = switch to light), next to the search */
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-theme-toggle [data-theme-label] {
        display: none !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-theme-toggle::before,
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-theme-toggle::after {
        content: none !important;
        display: none !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-theme-toggle .theme-toggle__icon {
        display: grid !important;
        place-items: center !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-theme-toggle .theme-toggle__icon svg {
        grid-area: 1 / 1 !important;
        width: 21px !important;
        height: 21px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        opacity: 1 !important;
        transform: none !important;
        color: var(--mh-ink) !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-theme-toggle .theme-icon-moon { display: block !important; }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-theme-toggle .theme-icon-sun { display: none !important; }
    html[data-theme="dark"] body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-theme-toggle .theme-icon-moon { display: none !important; }
    html[data-theme="dark"] body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-theme-toggle .theme-icon-sun { display: block !important; }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-row > .tl-hdr-ship--m {
        grid-area: ship !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--mh-muted) !important;
        font: inherit !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow: hidden !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .tl-hdr-ship--m svg {
        flex: none;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .tl-hdr-ship--m > span {
        display: -webkit-box;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .tl-hdr-ship--m b { color: var(--mh-ink); font-weight: 700; }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .tl-hdr-ship--m b.is-city { color: var(--mh-blue); }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .tl-hdr-ship--m > i {
        flex: none;
        width: 7px;
        height: 7px;
        margin: -3px 2px 0 0;
        border: solid currentColor;
        border-width: 0 0 1.6px 1.6px;
        transform: rotate(-45deg);
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-row > .header-search {
        grid-area: search !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 11px !important;
        background: var(--mh-fill) !important;
        box-shadow: none !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-search > svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        fill: none !important;
        stroke: var(--mh-muted) !important;
        stroke-width: 2 !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-search input {
        background: transparent !important;
        color: var(--mh-ink) !important;
        font-size: 16px !important;
    }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-search input::placeholder { color: var(--mh-muted) !important; }
    html:root body.storefront-body > #tl-storefront-header.site-header.unified-site-header .header-search > button { display: none !important; }
}
@media (min-width: 841px) {
    .tl-hdr-ship--m { display: none !important; }
}

/* TL_MOBILE_HEADER_PRODUCTS_V1: the products / category / brand pages on phones use the same header as the
   home page (one header for the whole store). The catalogue's own search box is hidden (one search only; the
   header search opens the search screen); its دسته‌ها / برندها / فیلترها row sticks right under the search. */
@media (max-width: 840px) {
    html:root body.storefront-body.products-route > #tl-storefront-header.site-header.unified-site-header {
        display: block !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 4400 !important;
    }
    html:root body.storefront-body.products-route .catalog-floating-glass[data-catalog-floating-tools] {
        position: sticky !important;
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        top: var(--tl-mobile-search-bottom, 62px) !important;
        z-index: 4300 !important;
    }
    html:root body.storefront-body.products-route .catalog-floating-glass[data-catalog-floating-tools] .catalog-floating-search {
        display: none !important;
    }
    /* the row of دسته‌ها / برندها / فیلترها stays visible while scrolling (search now lives in the header) */
    html:root body.storefront-body.products-route .catalog-floating-glass[data-catalog-floating-tools] {
        grid-template-rows: auto !important;
        gap: 0 !important;
    }
    html:root body.storefront-body.products-route .catalog-floating-glass[data-catalog-floating-tools] .catalog-mobile-tools {
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        opacity: 1 !important;
        overflow: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    html:root body.storefront-body.products-route > #tl-storefront-header .header-row > .site-logo {
        display: flex !important;
    }
}
/* TL_MOBILE_NAV_IPHONE_V1 moved to mobile-tabbar-iphone-v1.css (also used by the account pages). */
@media (max-width: 840px) {
    /* city picker as an iOS bottom sheet */
    .tl-hdr-pop {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-height: 88dvh;
        overflow-y: auto;
        border-radius: 18px 18px 0 0 !important;
        padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 12510 !important;
    }
    .tl-hdr-pop::before {
        content: "";
        justify-self: center;
        width: 36px;
        height: 5px;
        border-radius: 3px;
        background: rgba(120,120,128,.4);
    }
    .tl-hdr-pop h4 { text-align: center; font-size: 16px; }
    /* no typing box on phones: the keyboard pushed the sheet around; the list is short enough to scroll */
    .tl-hdr-pick__panel input { display: none !important; }
    .tl-hdr-pick__panel ul { max-height: 46dvh !important; }
    .tl-hdr-pop p { text-align: center; }
}
/* TL_HEADER_CITY_PICKER_FOCUS_V1: while the province/city picker is open (phone sheet or desktop panel) the
   rest of the page is dimmed and blurred; a click on it closes the picker. */
.tl-hdr-pop-dim {
    position: fixed;
    inset: 0;
    z-index: 12500;
    background: rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(14px) saturate(110%);
    backdrop-filter: blur(14px) saturate(110%);
    animation: tl-pop-dim-in .18s ease;
}
html[data-theme="dark"] .tl-hdr-pop-dim { background: rgba(0,0,0,.7); }
.tl-hdr-pop-dim[hidden] { display: none; }
@keyframes tl-pop-dim-in { from { opacity: 0; } }
@media (min-width: 841px) {
    .tl-hdr-pop { z-index: 12510 !important; }
}

}

/* ---------- TL_HEADER_SEARCH_SUGGEST_V3: full-screen search page (outside the layer so plain site rules for a/img/h6 do not win) ----------
   Phone and desktop: the whole screen turns white (light) or dark; the content keeps the standard 960px width. */
.tl-sx {
    --sx-page: #fff;
    --sx-ink: #1c1c1e;
    --sx-muted: #6c6c70;
    --sx-fill: #f2f2f7;
    --sx-line: rgba(60,60,67,.12);
    --sx-blue: #007aff;
    --sx-blue-soft: rgba(0,122,255,.1);
    --sx-pad: max(16px, calc((100% - 960px) / 2));
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    background: var(--sx-page);
    color: var(--sx-ink);
    direction: rtl;
    font-family: inherit;
    text-align: right;
    animation: tl-sx-fade .16s ease;
}
html[data-theme="dark"] .tl-sx {
    --sx-page: #000;
    --sx-ink: #fff;
    --sx-muted: #98989d;
    --sx-fill: #1c1c1e;
    --sx-line: rgba(84,84,88,.6);
    --sx-blue: #0a84ff;
    --sx-blue-soft: rgba(10,132,255,.2);
}
.tl-sx[hidden] { display: none !important; }
@keyframes tl-sx-fade { from { opacity: 0; } }
html.tl-sx-open, html.tl-sx-open body { overflow: hidden !important; }
html.tl-sx-open :is(.tl-desktop-search-shade, .tl-mobile-search-shade) { display: none !important; }
html.tl-sx-open nav.mobile-bottom-nav { visibility: hidden !important; }

.tl-sx form.tl-sx__bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: calc(14px + env(safe-area-inset-top, 0px)) var(--sx-pad) 14px;
    border-bottom: 1px solid var(--sx-line);
    background: var(--sx-page);
}
.tl-sx .tl-sx__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 50px;
    margin: 0;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--sx-fill);
    color: var(--sx-muted);
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow .15s ease;
}
.tl-sx .tl-sx__field:focus-within { box-shadow: inset 0 0 0 2px var(--sx-blue); }
.tl-sx .tl-sx__field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--sx-ink);
    font: inherit;
    font-size: 17px;
    -webkit-appearance: none;
    appearance: none;
}
.tl-sx .tl-sx__field input::-webkit-search-cancel-button { display: none; }
.tl-sx .tl-sx__field input::placeholder { color: var(--sx-muted); }
.tl-sx button.tl-sx__clear {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sx-muted);
    box-shadow: none;
    color: var(--sx-page);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.tl-sx button.tl-sx__clear[hidden] { display: none; }
.tl-sx button.tl-sx__cancel {
    flex: none;
    padding: 8px 4px;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--sx-blue);
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
}
.tl-sx svg {
    flex: none;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tl-sx__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 0 24px;
}
.tl-sx__sec { padding: 8px var(--sx-pad); }
.tl-sx__sec + .tl-sx__sec { border-top: 1px solid var(--sx-line); }
.tl-sx__sec > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.tl-sx h6 { margin: 0; color: var(--sx-muted); font-size: 13px; font-weight: 700; }
.tl-sx button.tl-sx__link {
    padding: 4px 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--sx-blue);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.tl-sx__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 8px; }
.tl-sx__chips--row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tl-sx__chips--row::-webkit-scrollbar { display: none; }
.tl-sx a.tl-sx__chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 300px;
    min-height: 42px;
    padding: 6px 14px;
    border-radius: 12px;
    background: var(--sx-fill);
    color: var(--sx-ink);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}
.tl-sx a.tl-sx__chip > span { overflow: hidden; text-overflow: ellipsis; }
.tl-sx a.tl-sx__chip small { margin-inline-start: 6px; color: var(--sx-muted); font-size: 12px; }
.tl-sx a.tl-sx__chip--cat { background: var(--sx-blue-soft); }
.tl-sx a.tl-sx__chip--cat svg { color: var(--sx-blue); }
.tl-sx a.tl-sx__chip img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; background: #fff; }
.tl-sx a.tl-sx__chip:is(:hover, .is-active) { box-shadow: inset 0 0 0 2px var(--sx-blue); }
.tl-sx__list { display: grid; }
.tl-sx__products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
.tl-sx a.tl-sx__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin-inline: -10px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--sx-ink);
    text-decoration: none;
}
.tl-sx a.tl-sx__row:is(:hover, .is-active) { background: var(--sx-fill); }
.tl-sx__ic { display: grid; place-items: center; width: 28px; color: var(--sx-muted); }
.tl-sx__thumb { flex: none; width: 60px; height: 60px; border-radius: 12px; background: var(--sx-fill); overflow: hidden; }
.tl-sx__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; filter: url("#tl-sx-knockout-white"); }
.tl-sx a.tl-sx__chip img { filter: url("#tl-sx-knockout-white"); background: transparent !important; }
.tl-sx__txt { display: grid; gap: 3px; min-width: 0; }
.tl-sx__txt strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.tl-sx b { font-weight: 800; }
.tl-sx__txt small { color: var(--sx-muted); font-size: 12.5px; }
.tl-sx__txt small em { color: var(--sx-ink); font-style: normal; font-weight: 700; }
.tl-sx__txt small del { margin-inline-end: 4px; }
.tl-sx__hint { margin: 18px var(--sx-pad); color: var(--sx-muted); font-size: 14px; line-height: 1.9; }
.tl-sx__foot {
    flex: none;
    padding: 12px var(--sx-pad) calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--sx-line);
    background: var(--sx-page);
}
.tl-sx__foot[hidden] { display: none; }
.tl-sx a.tl-sx__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border-radius: 14px;
    background: var(--sx-blue);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.tl-sx a.tl-sx__all:is(:hover, .is-active) { filter: brightness(1.08); box-shadow: 0 0 0 4px var(--sx-blue-soft); }
@media (max-width: 1100px) {
    .tl-sx__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
    .tl-sx form.tl-sx__bar { gap: 10px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
    .tl-sx .tl-sx__field { height: 44px; padding: 0 12px; border-radius: 11px; }
    .tl-sx .tl-sx__field input { font-size: 16px; }
    .tl-sx__products { grid-template-columns: 1fr; gap: 0; }
    .tl-sx__thumb { width: 56px; height: 56px; }
}