/* ==========================================================================
   redesign.css: visual refresh layer. Loaded LAST, so it overrides the rest.
   Palette stays (paper / teal / gold / ink); shape, depth, header, hero and
   motion are new. Delete this file and the site returns to the old look.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* One bundled font everywhere: same rendering on PC and phone */
    --font-body:    'Noto Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
    --font-display: var(--font-body);

    --teal-50:  #EEF8F8;
    --glass:    rgba(251, 248, 242, 0.78);

    /* Softer shape language (was 2px / 6px) */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;

    /* Layered, warm-tinted shadows */
    --shadow-1: 0 1px 2px rgba(27, 26, 23, 0.05), 0 2px 8px -2px rgba(27, 26, 23, 0.06);
    --shadow-2: 0 10px 24px -8px rgba(27, 26, 23, 0.14), 0 2px 6px rgba(27, 26, 23, 0.05);
    --shadow-3: 0 30px 60px -18px rgba(27, 26, 23, 0.28), 0 8px 16px -8px rgba(27, 26, 23, 0.1);
    --ring:     0 0 0 4px rgba(63, 186, 194, 0.22);
}

/* Stops sideways scroll caused by 100vw (includes the scrollbar on Windows).
   "clip" (not "hidden") keeps the sticky header working. */
body { overflow-x: clip; }
img, video { max-width: 100%; height: auto; }

/* ---------- 2. Typography ---------- */
h1, h2, h3, h4, .display-heading { letter-spacing: 0; }   /* never space Persian letters */
.hsec__title { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 800; }


/* ---------- 3. Buttons ---------- */
.btn {
    min-height: 54px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
    transition: background-size var(--dur-base) var(--ease-out), color var(--dur-micro),
                border-color var(--dur-micro), box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-micro) var(--ease-out);
}
.btn:hover  { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-1); }
.btn--ghost { background-color: rgba(251, 248, 242, 0.6); box-shadow: none; }

/* ---------- 4. Header (desktop / tablet: a floating, frosted bar) ---------- */
@media (min-width: 769px) {
    .site-header {
        top: 12px;
        margin-top: 12px;
        padding-block: 10px;
        gap: var(--space-5);
    }
    /* The old rule painted a rectangular full-width background on the header itself */
    .site-header,
    .site-header.is-stuck {
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* The bar: inset from the screen edges, rounded, frosted */
    .site-header::before {
        left:  calc(var(--page-margin) - 20px);
        right: calc(var(--page-margin) - 20px);
        border: 1px solid rgba(226, 219, 205, 0.7);
        border-radius: var(--radius-lg);
        background: rgba(251, 248, 242, 0.6);
        -webkit-backdrop-filter: saturate(1.4) blur(14px);
        backdrop-filter: saturate(1.4) blur(14px);
        box-shadow: none;
        transition: background var(--dur-base), box-shadow var(--dur-base) var(--ease-out),
                    border-color var(--dur-base);
    }
    /* Transparent-ish at the top, more solid with a shadow once scrolled */
    .site-header.is-stuck::before {
        background: var(--glass);
        border-color: var(--line);
        box-shadow: var(--shadow-2);
    }

    .site-logo { height: 68px; }

    /* Nav: soft pill on hover/active instead of an underline */
    .nav-links { gap: var(--space-1); }
    .nav-link {
        padding: 8px 14px;
        border-radius: var(--radius-sm);
        transition: background var(--dur-micro), color var(--dur-micro);
    }
    .nav-link::after { display: none; }
    .nav-link:hover,
    .category-menu[open] .nav-link { background: var(--teal-50); color: var(--teal-800); }
    .nav-link.is-active { background: var(--teal-100); color: var(--teal-800); }

    /* Search */
    .search-wrap { max-width: 520px; }
    .search-bar {
        height: 44px;
        border-radius: var(--radius-sm);
        border-color: var(--line);
        background: rgba(255, 255, 255, 0.55);
    }
    .search-bar:focus { background: #fff; border-color: var(--teal-700); box-shadow: var(--ring); }

    /* Icon buttons and login */
    .header-icons { gap: var(--space-1); }
    .header-icons .icon-btn { border-radius: var(--radius-sm); }
    .header-icons .icon-btn--primary { box-shadow: var(--shadow-1); }
    .login-btn {
        padding-inline: var(--space-4);
        border: 0;
        border-radius: var(--radius-sm);
        background: var(--ink);
        color: var(--paper);
        transition: background var(--dur-micro), transform var(--dur-micro);
    }
    .login-btn:hover { background: var(--teal-700); color: #fff; }
    .login-btn:active { transform: scale(0.97); }

    /* Dropdowns */
    .category-dropdown,
    .account-dropdown { border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: var(--space-2); }
    .dropdown-link,
    .catmenu__link { border-radius: 8px; }
}

/* ---------- 5. Hero ---------- */
.hero {
    padding-block: var(--space-7) var(--space-9);
    background:
        radial-gradient(50% 60% at 82% 25%, rgba(63, 186, 194, 0.2), transparent 70%),
        radial-gradient(40% 45% at 8% 65%, rgba(185, 139, 42, 0.12), transparent 70%);   /* was 8% 95% */
}
.hero__kicker {
    width: fit-content;
    padding: 4px 14px 4px 16px;
    
    border-radius: var(--radius-full);
    
}
.hero__title { font-weight: 800; line-height: 1.3; }

@keyframes underline-in { from { transform: scaleX(0); } }

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
}
.hero__facts li { display: flex; align-items: center; gap: var(--space-2); }

.hero__text > :nth-child(5) { animation-delay: 420ms; }   /* the actions row moved from 4th to 5th */

.hero__fig { border-radius: var(--radius-md); border: 4px solid rgba(255, 255, 255, 0.85); }


/* ---------- 6. Product cards ---------- */
.pcard__media { border-radius: var(--radius-md); }
@media (hover: hover) {
    .pcard:hover .pcard__media { box-shadow: var(--shadow-3); transform: translateY(-4px); }
}
.pcard__media { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pcard__title { font-weight: 600; }
.pcard__price strong { font-weight: 800; }
.pcard__badge {                              /* pill instead of the hexagon */
    clip-path: none;
    padding: 2px 12px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-1);
}
.pcard__wish { border-radius: var(--radius-full); box-shadow: var(--shadow-1); }

/* ---------- 7. Sections, categories, banners ---------- */
.hsec__nav button { border-radius: var(--radius-full); }
.promo, .hsec--sale { border-radius: var(--radius-md); }
.hsec--sale { border-radius: 0; }                         /* full-bleed band stays square */
.cats__link { border-radius: 0; }
.visit { border-radius: 0; }

/* ---------- 8. Phones ---------- */
@media (max-width: 768px) {
    body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

    .mtop { background: var(--glass); border-bottom-color: var(--line); }

    /* Bottom tab bar becomes a floating rounded dock */
    .mnav {
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding-bottom: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--glass);
        -webkit-backdrop-filter: saturate(1.4) blur(14px);
        backdrop-filter: saturate(1.4) blur(14px);
        box-shadow: var(--shadow-3);
    }
    .mnav__item { transition: color var(--dur-micro), transform var(--dur-micro); }
    .mnav__item:active { transform: scale(0.94); }
    .mnav__item.is-active { color: var(--teal-800); }

    .site-header .search-bar { border-radius: var(--radius-md); height: 48px; }

    .hero { padding-block: var(--space-6) var(--space-8); }
                 /* full-width, thumb-friendly */
    .hero__fig { border-width: 3px; }
    .btn { min-height: 52px; }
}

/* ---------- 9. Scroll reveal (script adds .reveal, then .is-in) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
   
}

/* ==========================================================================
   Refinement pass
   ========================================================================== */

/* ---------- 1. Daily deals: readable product cards ----------
   Root cause: .pcard re-declares its colour variables, so the values set on
   .hsec--sale never reached the card. We set them on the card itself. */
.hsec--sale .pcard {
    --pcard-ink:   #FFFFFF;
    --pcard-muted: #B9B3A6;            /* ~7:1 on the night background */
    --pcard-sale:  var(--gold-500);    /* the red was ~2:1 on dark; gold is ~5.6:1 */
}
.hsec--sale .pcard__title,
.hsec--sale .pcard__title a {
    color: #FFFFFF;
    font-weight: 700;
}
.hsec--sale .pcard__title a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    transition: text-decoration-color var(--dur-base) var(--ease-out);
}
.hsec--sale .pcard__title a:hover,
.hsec--sale .pcard__title a:focus-visible,
.hsec--sale .pcard__title a:active { color: #FFFFFF; text-decoration-color: var(--gold-500); }
.hsec--sale .pcard__price strong { font-weight: 800; }
.hsec--sale :focus-visible { outline-color: var(--teal-500); }   /* the default focus ring is too dark here */

/* ---------- Brand mark: leaf star in the text colour ----------
   The PNG is only a mask; the colour is currentColor, so the star always
   matches the label beside it (gold in the hero kicker).
   Motion: springs in on load, turns slowly, breathes, and sends out a soft
   pulse ring. A faint larger copy turns the other way for depth. */
.brand-flourish {
    --size: 28px;
    position: relative;
    display: inline-block;
    flex: none;
    width: var(--size);
    height: var(--size);
    vertical-align: middle;
    border-radius: 50%;
    animation:
        flourish-enter 900ms var(--ease-spring) backwards,
        flourish-ping 3.6s ease-out 1s infinite,
        flourish-breathe 5s ease-in-out infinite;
}
.brand-flourish::before,
.brand-flourish::after {
    content: '';
    position: absolute;
    background-color: currentColor;
    -webkit-mask: url("../images/leaf-star-mask.987ace17fa85.png") center / contain no-repeat;
    mask: url("../images/leaf-star-mask.987ace17fa85.png") center / contain no-repeat;
}
.brand-flourish::before {                 /* the star */
    inset: 0;
    animation: flourish-spin 30s linear infinite;
}
.brand-flourish::after {                  /* faint ghost, larger, opposite direction */
    inset: -14%;
    opacity: 0.2;
    animation: flourish-spin-rev 45s linear infinite;
}

@keyframes flourish-spin     { to { rotate: 360deg; } }
@keyframes flourish-spin-rev { to { rotate: -360deg; } }
@keyframes flourish-breathe  { 0%, 100% { scale: 0.96; } 50% { scale: 1.07; } }
@keyframes flourish-ping {
    0%        { box-shadow: 0 0 0 0 rgba(185, 139, 42, 0.35); }
    70%, 100% { box-shadow: 0 0 0 11px rgba(185, 139, 42, 0); }
}
@keyframes flourish-enter {
    from { opacity: 0; transform: scale(0.3) rotate(-140deg); }
}


/* Slightly larger in the hero kicker, where it is the focal point */
.hero__kicker .brand-flourish { --size: 32px; }


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

/* ---------- 2b. Hero halo: replaces the big diamonds ----------
   Two thin arc rings turning slowly in opposite directions, a gold spark
   orbiting on the outer ring, and a soft turquoise orb floating. */
.hero__halo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ---------- Hero halo: the Persian mandala ----------
   The artwork is used as a mask, so it takes the brand colours.
   Layers: a main mandala turning slowly, a larger, fainter golden copy
   turning the other way (the two drift in and out of phase), and a gold
   spark orbiting the rim. The orb keeps floating as before. */
.halo__mandala {
    position: absolute;
    inset-block-start: -14%;
    inset-inline-end: -8%;
    width: 74%;
    aspect-ratio: 1;
}
.halo__mandala i,
.halo__mandala b { position: absolute; inset: 0; will-change: transform; }

.halo__mandala i {
    -webkit-mask: url("../images/mandala.aef4ddfa73a0.png") center / contain no-repeat;
    mask: url("../images/mandala.aef4ddfa73a0.png") center / contain no-repeat;
}
.halo__mandala i:nth-child(1) {                 /* main: teal → gold */
    background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-500) 55%, var(--gold-500) 100%);
    opacity: 0.3;
    animation: halo-spin 120s linear infinite;
}
.halo__mandala i:nth-child(2) {                 /* ghost: larger, golden, opposite direction */
    inset: -9%;
    background: linear-gradient(315deg, var(--gold-500), var(--teal-500));
    opacity: 0.1;
    animation: halo-spin-rev 80s linear infinite;
}
.halo__mandala b { animation: halo-spin 40s linear infinite; }
.halo__mandala b::after {                       /* gold spark on the rim */
    content: '';
    position: absolute;
    top: -3px;
    inset-inline-start: 50%;
    width: 7px;
    height: 7px;
    margin-inline-start: -3.5px;
    border-radius: 50%;
    background: var(--gold-500);
    box-shadow: 0 0 12px 3px rgba(185, 139, 42, 0.55);
}

@media (max-width: 640px) {
    .halo__mandala { width: 96%; inset-inline-end: -26%; inset-block-start: -8%; }
}

.halo__orb {
    position: absolute;
    inset-block-end: 4%;
    inset-inline-start: -1%;
    width: 18%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95) 0 6%, rgba(255, 255, 255, 0) 22%),
        radial-gradient(circle, rgba(63, 186, 194, 0.65) 0, rgba(63, 186, 194, 0.28) 48%, rgba(63, 186, 194, 0) 72%);
    animation: halo-float 9s ease-in-out infinite;
    will-change: transform;
}
@keyframes halo-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(0, -14px, 0) scale(1.07); }
}

/* Facts-row bullet: a soft dot now, not a rotated square */
.hero__facts li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal-500);
    box-shadow: 0 0 0 3px rgba(63, 186, 194, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .brand-flourish, .brand-flourish::before, .brand-flourish::after,
    .halo__mandala i, .halo__mandala b .halo__orb { animation: none; }
}

/* ---------- 3. Hero underline: real text-decoration + breathing room ---------- */
.hero__title { margin-bottom: var(--space-6); }          /* was 24px: more space below the last line */



/* ==========================================================================
   Shop: filter sidebar, toolbar, sort menu, active chips
   ========================================================================== */

/* ---------- Toolbar ---------- */
.shop-bar {
    padding-block: var(--space-3);
    background-color: var(--paper);
    background-image:
        linear-gradient(rgba(246, 242, 234, 0.8), rgba(246, 242, 234, 0.8)),
        url("../images/bg-texture.e329a9ad5ad2.jpg");     /* same layers as <body> in base.css */
    background-size: auto, 420px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.shop-bar__total { color: var(--muted); font-weight: 500; white-space: nowrap; }
.shop-bar__filters {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    transition: background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro);
}
.shop-bar__filters:hover { border-color: var(--ink); }

/* ---------- Sort menu ---------- */
.sort.is-enhanced .sort__select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.sort.is-enhanced .sort__arrow { display: none; }

.sort__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding-inline: 14px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: border-color var(--dur-micro), box-shadow var(--dur-base) var(--ease-out);
}
.sort__btn .icon { width: 1.125rem; height: 1.125rem; color: var(--teal-700); }
.sort__label { color: var(--muted); }
.sort__value { font-weight: 700; }
.sort__btn .sort__chev { width: 1rem; height: 1rem; color: var(--muted); transition: transform var(--dur-base) var(--ease-out); }
.sort.is-open .sort__chev { transform: rotate(180deg); }
.sort__btn:hover { border-color: var(--ink-soft); }
.sort__btn:focus-visible,
.sort.is-open .sort__btn { outline: none; border-color: var(--teal-700); box-shadow: var(--ring); }

.sort__menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;                 /* aligned to the button's far edge: never pushed off-screen */
    z-index: 5;
    min-width: max(100%, 13rem);
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
}
.sort.is-open .sort__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.sort__menu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 44px;
    padding-inline: 12px;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background var(--dur-micro), color var(--dur-micro);
}
.sort__menu li .icon {
    width: 1rem;
    height: 1rem;
    color: var(--teal-700);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.sort__menu li:hover { background: rgba(27, 26, 23, 0.05); color: var(--ink); }
.sort__menu li:focus-visible { outline: none; background: rgba(27, 26, 23, 0.05); box-shadow: inset 0 0 0 2px var(--teal-700); }
.sort__menu li[aria-selected="true"] { background: var(--teal-50); color: var(--teal-800); font-weight: 700; }
.sort__menu li[aria-selected="true"] .icon { opacity: 1; transform: none; }

@media (max-width: 639px) {
    .sort__label {                       /* phones: keep the value, hide the word (still read by screen readers) */
        position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .shop-bar { gap: var(--space-3); }
}

/* ---------- Filter sidebar: one calm card ---------- */
@media (min-width: 1024px) {
    .shop__rail {
        padding: var(--space-5);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface);
        box-shadow: var(--shadow-1);
    }
    .filters__head {                     /* desktop gets a title too (the close button stays hidden) */
        display: flex;
        align-items: center;
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--line);
    }
    .filters__title { margin: 0; font-size: var(--fs-md); font-weight: 800; }
}
@media (max-width: 1023px) {
    .shop__rail { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }   /* the sheet's rounded edge faces the page */
}

.filters .filter-accordion { border-top: 1px solid var(--line); padding-block: var(--space-3); }
.filters .filter-accordion summary {
    min-height: 40px;
    transition: color var(--dur-micro);
    cursor: pointer;
}
.filters .filter-accordion summary:hover { color: var(--teal-800); }
.filters .filter-accordion summary::after { margin-inline-start: auto; color: var(--muted); }

/* Gold dot beside a group's title when something inside it is active */
.filters .filter-accordion summary::before {
    content: '';
    order: 1;
    width: 7px;
    height: 7px;
    margin-inline-start: 8px;
    border-radius: 50%;
    background: var(--gold-500);
    transform: scale(0);
    transition: transform var(--dur-base) var(--ease-spring);
}
.filters .filter-accordion summary::after { order: 2; }
.filters .filter-accordion:has(input:checked:not([value=""])) summary::before,
.filters .filter-accordion:has(.price-inputs input:not(:placeholder-shown)) summary::before { transform: scale(1); }

/* Option rows: full-width, tinted when selected */
.filters .filter-options { gap: 2px; margin-top: var(--space-2); }
.filters .filter-option {
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    transition: background var(--dur-micro), color var(--dur-micro);
}
.filters .filter-option:hover { background: rgba(27, 26, 23, 0.04); color: var(--ink); }
.filters .filter-option:has(input:checked) { background: var(--teal-50); color: var(--ink); font-weight: 600; }

/* Radios and checkboxes use the brand teal */
.filters .filter-option input[type="radio"],
.filters .filter-option input[type="checkbox"] { width: 18px; height: 18px; border: 1.5px solid var(--muted); background: #fff; }
.filters .filter-option:hover input[type="radio"],
.filters .filter-option:hover input[type="checkbox"] { border-color: var(--teal-700); }
.filters .filter-option input[type="checkbox"]:checked { background: var(--teal-700); border-color: var(--teal-700); }
.filters .filter-option input[type="radio"]:checked { border-color: var(--teal-700); }
.filters .filter-option input[type="radio"]:checked::after { background: var(--teal-700); }

/* Colours: selectable chips instead of a plain list */
.filters .filter-options--colors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 2px; }
.filters .filter-options--colors .filter-option {
    position: relative;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.55);
    transition: background var(--dur-micro), border-color var(--dur-micro), box-shadow var(--dur-micro);
}
.filters .filter-options--colors .filter-option:hover { border-color: var(--ink-soft); }
.filters .filter-options--colors .filter-option:has(input:checked) {
    border-color: var(--teal-700);
    background: var(--teal-50);
    box-shadow: inset 0 0 0 1px var(--teal-700);
}
.filters .filter-options--colors .filter-option:has(input:focus-visible) { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.filters .filter-options--colors .filter-option input[type="checkbox"] {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;   /* still focusable and clickable */
}
.filters .filter-options--colors .filter-option:has(input:checked) .swatch-lg { outline: 2px solid var(--teal-700); outline-offset: 2px; }

/* Price */
.filters .price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.filters .price-inputs input { border-radius: var(--radius-sm); background: #fff; }
.filters .price-inputs input:focus { box-shadow: var(--ring); }

/* Sheet footer buttons (phones) keep the same radius language */
.filters__foot .btn { border-radius: var(--radius-sm); }

/* ---------- Active-filter chips ---------- */
.chip {
    min-height: 36px;
    border-color: rgba(30, 111, 118, 0.25);
    border-radius: var(--radius-full);
    background: var(--teal-50);
    color: var(--teal-800);
}
.chip .icon { padding: 2px; border-radius: 50%; background: rgba(30, 111, 118, 0.12); width: 1.125rem; height: 1.125rem; transition: background var(--dur-micro); }
.chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip:hover .icon { background: rgba(255, 255, 255, 0.2); }

/* ---------- Results transition ---------- */
.shop__results { transition: opacity var(--dur-base) var(--ease-out); }
.shop__results.is-loading { opacity: 0.45; pointer-events: none; }
@keyframes grid-in { from { opacity: 0; transform: translateY(10px); } }
.shop-grid { animation: grid-in 450ms var(--ease-out); }

/* ---------- Nastaliq headline (hero only) ---------- */
@font-face {
    font-family: 'Noto Nastaliq Urdu';
    src: url("../fonts/NotoNastaliqUrdu-Variable.87e123b80264.woff2") format('woff2');
    font-weight: 400 700;
    font-display: swap;
}
:root {
    --font-nastaliq: 'Noto Nastaliq Urdu', 'IranNastaliq', var(--font-display);
}

 /* the sweeping final «ی» sits lower than in a normal font */

@media (max-width: 640px) {
    .hero__title { font-size: clamp(2.5rem, 11vw, 3.25rem); line-height: 1.8; }
}

/* ---------- Hero headline: Nastaliq, composed as three stepped lines ---------- */

/* ---------- Hero headline: IranNastaliq, composed ---------- */
.hero__title {
    --step: 0.22em;                                   /* how far each line steps in from the right; 0 = flush */
    margin: var(--space-4) 0 var(--space-6);
    padding-top: 0.2em;                               /* keeps the top flourish clear of the kicker */
    font-family: var(--font-nastaliq);
    font-weight: 400;                                 /* single-weight font: never fake a bold */
    font-synthesis: none;
    font-size: clamp(3.75rem, 1.5rem + 6.5vw, 8.5rem);    /* much larger: Nastaliq letters are small for their size */
    line-height: 1.15;                                /* lines sit closer; raise to 1.3 if flourishes touch */
    word-spacing: 0.06em;                             /* the font's own word space is already wide */
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    -webkit-text-stroke: 0.012em currentColor;        /* slightly firmer hairlines next to the photos */
    paint-order: stroke fill;
}
.hero__text > .hero__title { animation: none; }       /* the lines animate individually */

.hero__line {
    display: block;
    white-space: nowrap;                              /* no surprise breaks inside a line */
    padding-inline-start: calc(var(--i, 0) * var(--step));
    animation: hero-write 1100ms var(--ease-out) backwards;
    animation-delay: calc(200ms + var(--i, 0) * 260ms);
}
.hero__line:nth-child(2) { --i: 1; }
.hero__line:nth-child(3) { --i: 2; }

/* The line is "written" from right to left, like a pen stroke */
@keyframes hero-write {
    from { opacity: 0; clip-path: inset(-60% -10% -60% 100%); }
    to   { opacity: 1; clip-path: inset(-60% -10% -60% -10%); }
}

.hero__title em {
    font-style: normal;
    color: var(--teal-700);
    text-decoration: none;
    -webkit-text-stroke-width: 0.014em;
}

/* Replaces the underline: a fine gold rule that fades out, ending in a small dot */
.hero__title::after {
    content: '';
    display: block;
    width: min(10rem, 55%);
    height: 8px;
    margin-top: var(--space-3);
    background:
        radial-gradient(circle at calc(100% - 4px) 50%, var(--gold-500) 0 3.5px, transparent 4.5px),
        linear-gradient(to left, var(--gold-500), rgba(185, 139, 42, 0)) center / 100% 2px no-repeat;
    transform-origin: right center;
    animation: hero-rule 900ms 750ms var(--ease-out) backwards;
}
.hero__title::after { margin-top: var(--space-4); }   /* a bit more air above the gold rule */
@keyframes hero-rule { from { transform: scaleX(0); opacity: 0; } }
@media (max-width: 640px) {
    .hero__title { --step: 0.16em; font-size: clamp(3.5rem, 17vw, 5rem); }
}

/* ==========================================================================
   Mobile pass (phones)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Touch hygiene --- */
    a, button, summary, label, input, select {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;                 /* removes the double-tap delay */
    }
    input, select, textarea { font-size: max(16px, 1em); }   /* stops iOS zooming into small inputs */
    [data-rail-track] { overscroll-behavior-x: contain; }    /* swiping a rail never drags the page sideways */

    /* --- Hero: calmer and more compact --- */
    .hero { gap: var(--space-6); padding-block: var(--space-5) var(--space-6); }
    .halo__orb,
    .halo__mandala b { display: none; }             /* desktop decoration: just noise on a small screen */
    .hero__lead { font-size: var(--fs-base); line-height: 1.9; margin-bottom: var(--space-5); }

    /* Buttons side by side: the primary one is wider */
    .hero__actions { flex-direction: row; flex-wrap: nowrap; gap: var(--space-3); }
    .hero__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--space-3); white-space: nowrap; }
    .hero__actions .btn:first-child { flex-grow: 1.5; }

    /* --- Product cards --- */
    .pcard__wish { width: 44px; height: 44px; }     /* comfortable touch target */
    .pcard:active .pcard__media { transform: scale(0.985); }   /* instant tap feedback */

    /* --- Bottom dock: slides away while scrolling down, back on scroll up --- */
    .mnav { transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out); }
    .mnav.is-hidden { transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; }
    .mnav__item { min-height: 52px; }
}