/* Generated by `php artisan assets:bundle` — edit the source files, not this one. */
/* ==== css/mobile.css ==== */
/* ==========================================================================
   Mobile / small-screen presentation layer.

   Driven by the admin's «إعدادات الجوال» page. All rules live behind the
   860px breakpoint so the desktop layout is untouched.

   Guidance applied:
   - Bottom bar sits in the thumb zone (bottom ~40% of the screen).
   - Touch targets are at least 48px (Android) / 44pt (iOS).
   - Icons are always paired with labels unless the admin turns labels off.
   - iPhone home-indicator handled with env(safe-area-inset-bottom).
   ========================================================================== */

/* Utility: an element the admin has hidden on mobile. */
@media (max-width: 860px) {
  .m-off { display: none !important; }
}

/* The footer-accordion toggle is a real <button> for accessibility. On desktop
   (accordion inactive) it must read as plain heading text, not a button. */
footer .foot-col > h4 > .facc-btn {
  all: unset;
  font: inherit;
  color: inherit;
}

@media (max-width: 860px) {

  /* ---------- global scale knobs ---------- */
  /* A plain number, not a percentage: iOS Safari before 18.2 cannot divide % by % in calc(). */
  html { font-size: calc(16px * var(--m-font-num, 1)); }

  /* hero height is owned by hero.css / HeroUI */

  .card, .prod-grid .card, .col-card { border-radius: var(--m-card-radius, 14px); }

  .prod-grid { grid-template-columns: repeat(var(--m-grid-cols, 2), minmax(0, 1fr)); gap: 12px; }
  .prod-grid .card .name { font-size: .9375rem; }

  /* ---------- header behaviour ---------- */
  body.m-sticky header { position: sticky; top: 0; z-index: 90; }

  /* Auto-hide gives the content back its vertical space while scrolling down. */
  body.m-autohide header {
    transition: transform .28s ease;
    will-change: transform;
  }
  body.m-autohide.m-scrolled-down header { transform: translateY(-100%); }

  /* ---------- bottom tab bar ----------
     --mbar-h is the bar's REAL height, safe area included. Everything that
     stacks above the bar (sticky buy bar, FAB, toasts) offsets by it. The
     icon + label make each item ~55px, so the bar is 72px, not the 64px these
     offsets used to assume (which tucked the buy bar 8px under it). The
     partial re-measures it, so a larger font scale stays correct. */
  :root { --mbar-h: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* The room the floating bar needs at the very end of the page is part of the
     FOOTER (its own plum background), not padding on the body: padding on the
     body showed up as a pale band under the footer, especially once the bar
     slides away at the bottom. */
  body.has-mbar[data-mfoot] footer { padding-bottom: calc(var(--mbar-h) + 24px); }

  /* The bar floats: a glass capsule inset from the screen edges with the page
     scrolling and showing through beneath it (iOS tab-bar guidance), instead of
     a full-width strip bolted to the bottom. The container is invisible and
     click-through; its height (capsule + the gap under it + the safe area) is
     what --mbar-h publishes, so everything stacked above still clears it. */
  .mbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 10px;
    /* 8px above the capsule is part of the bar's height, so a sticky buy bar
       or a toast stacked on it sits clear of the glass rather than touching it. */
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }
  /* Scroll edge: content slips under the bar through a soft, progressive blur
     (strongest at the bottom edge, gone by the top of the band) rather than a
     white wash — it keeps the labels readable without painting over the page.
     Where masks or backdrop blur are unsupported the band is simply absent. */
  .mbar::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    top: -14px;
    background: linear-gradient(to top, rgba(46, 26, 36, .07), rgba(46, 26, 36, 0));
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to top, #000 35%, transparent);
    mask-image: linear-gradient(to top, #000 35%, transparent);
    pointer-events: none;
    z-index: -1;
    transition: opacity .3s ease;
  }

  .mbar-pill,
  .mbar-wa {
    pointer-events: auto;
    background: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow:
      0 12px 32px -12px rgba(46, 26, 36, .38),
      0 2px 8px rgba(46, 26, 36, .08),
      inset 0 1px 0 rgba(255, 255, 255, .95);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mbar-pill, .mbar-wa { background: rgba(255, 255, 255, .97); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .mbar-pill, .mbar-wa { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  .mbar-pill {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    border-radius: 999px;
  }

  /* The lens: a tinted capsule that sits behind the current tab and glides to
     the next one (positioned by the partial's script). */
  .mbar-lens {
    position: absolute;
    inset-block: 6px;
    left: 0;           /* physical: the script positions by offsetLeft */
    width: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(201, 162, 75, .30), rgba(201, 162, 75, .16));
    box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .42), inset 0 1px 0 rgba(255, 255, 255, .55);
    opacity: 0;
    pointer-events: none;
    will-change: transform, width;
  }
  .mbar-lens.is-moving {
    transition: transform .5s cubic-bezier(.34, 1.32, .5, 1), width .5s cubic-bezier(.34, 1.32, .5, 1), opacity .2s ease;
  }

  .mbar-item {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;             /* Android 48dp / iOS 44pt floor */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: #7a6a72;
    font-family: inherit;
    font-size: .6875rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease, transform .18s cubic-bezier(.3, 1.4, .5, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .mbar-item svg {
    width: 23px; height: 23px; flex: 0 0 23px;
    transition: fill-opacity .2s ease, transform .3s cubic-bezier(.34, 1.4, .5, 1);
  }

  .mbar-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mbar-item:active { transform: scale(.93); }

  .mbar-item.on {
    color: var(--plum, #2e1a24);
    font-weight: 700;
  }
  /* The current tab's symbol fills in (filled symbols mark the selection). */
  .mbar-item.on svg { fill: currentColor; fill-opacity: .16; stroke-width: 2; transform: translateY(-1px); }

  .mbar-item:focus-visible {
    outline: 2px solid var(--gold, #c9a24b);
    outline-offset: -3px;
  }

  /* WhatsApp is an action, not a place — so it stands apart from the tabs as
     its own round button, as the system search tab does. */
  .mbar-wa {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #128c4a;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
  }
  .mbar-wa svg { width: 26px; height: 26px; }
  .mbar-wa:active { transform: scale(.92); }
  .mbar-wa:focus-visible { outline: 2px solid #128c4a; outline-offset: 2px; }

  /* At the very end of the page the bar slides down out of the way (and comes
     back as soon as the reader scrolls up), so the last lines of the page are
     never covered. The script in partials/mobile-bar toggles .is-away. */
  .mbar-pill,
  .mbar-wa {
    transition: transform .38s cubic-bezier(.3, .9, .3, 1), opacity .25s ease;
  }
  .mbar.is-away .mbar-pill,
  .mbar.is-away .mbar-wa {
    transform: translateY(calc(100% + 32px));
    opacity: 0;
    pointer-events: none;
  }
  .mbar.is-away::before { opacity: 0; }
  .mbar[data-bar-style="classic"] { transition: transform .38s cubic-bezier(.3, .9, .3, 1); }
  .mbar[data-bar-style="classic"].is-away { transform: translateY(100%); pointer-events: none; }
  .mbar[data-bar-style="classic"].is-away .mbar-pill,
  .mbar[data-bar-style="classic"].is-away .mbar-wa { transform: none; opacity: 1; }

  /* ---------- bar styles (admin: Mobile settings -> Navigation) ----------
     "glass" is the base look above. The others override only what differs,
     keyed on [data-bar-style] so switching is one attribute. */

  /* solid: the same floating capsule, opaque — lighter to paint, and the
     safest look on older phones. */
  .mbar[data-bar-style="solid"]::before { display: none; }
  .mbar[data-bar-style="solid"] .mbar-pill,
  .mbar[data-bar-style="solid"] .mbar-wa {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--line, #e7ded9);
    box-shadow: 0 10px 28px -12px rgba(46, 26, 36, .35), 0 2px 6px rgba(46, 26, 36, .08);
  }

  /* dark: a plum capsule with gold — the house colours. */
  .mbar[data-bar-style="dark"] .mbar-pill,
  .mbar[data-bar-style="dark"] .mbar-wa {
    background: linear-gradient(180deg, #3d2230, #2e1a24);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 14px 32px -12px rgba(26, 12, 20, .65), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  .mbar[data-bar-style="dark"] .mbar-item { color: rgba(255, 255, 255, .62); }
  .mbar[data-bar-style="dark"] .mbar-item.on { color: var(--gold-soft, #e3c98a); }
  .mbar[data-bar-style="dark"] .mbar-item:focus-visible { outline-color: var(--gold-soft, #e3c98a); }
  .mbar[data-bar-style="dark"] .mbar-lens {
    background: linear-gradient(180deg, rgba(201, 162, 75, .30), rgba(201, 162, 75, .16));
    box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .5), inset 0 1px 0 rgba(255, 255, 255, .14);
  }
  .mbar[data-bar-style="dark"] .mbar-wa { color: #3ddc84; }

  /* expand: icons only; the current tab opens up to show its name inside the
     highlight. Cleaner, and the labels cost no width on a five-tab bar. */
  .mbar[data-bar-style="expand"] .mbar-item span { display: none; }
  .mbar[data-bar-style="expand"] .mbar-item.on span { display: inline; }
  .mbar[data-bar-style="expand"] .mbar-item.on { flex: 2.4 1 0; flex-direction: row; gap: 8px; }
  .mbar[data-bar-style="expand"] .mbar-item { min-height: 52px; }
  .mbar[data-bar-style="expand"] .mbar-item.on svg { transform: none; }

  /* classic: the full-width strip, edge to edge (the look before the floating
     bar). The capsule's glass is stripped back to a flat surface. */
  .mbar[data-bar-style="classic"] {
    padding: 0;
    gap: 0;
    align-items: stretch;
    pointer-events: auto;
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line, #e7ded9);
    box-shadow: 0 -6px 24px -16px rgba(46, 26, 36, .55);
  }
  .mbar[data-bar-style="classic"]::before,
  .mbar[data-bar-style="classic"] .mbar-lens { display: none; }
  .mbar[data-bar-style="classic"] .mbar-pill,
  .mbar[data-bar-style="classic"] .mbar-wa {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .mbar[data-bar-style="classic"] .mbar-pill { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .mbar[data-bar-style="classic"] .mbar-item { border-radius: 12px; min-height: 48px; }
  .mbar[data-bar-style="classic"] .mbar-item:active { background: var(--blush, #faf6f2); transform: none; }
  .mbar[data-bar-style="classic"] .mbar-item.on svg { fill: none; stroke-width: 1.8; transform: none; }
  /* A small pill above the active item reads faster than colour alone. */
  .mbar[data-bar-style="classic"] .mbar-item.on::before {
    content: "";
    position: absolute;
    inset-block-start: -8px;
    width: 26px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--gold, #c9a24b);
  }
  .mbar[data-bar-style="classic"] .mbar-wa {
    width: 64px;
    height: auto;
    align-self: stretch;
    margin-bottom: env(safe-area-inset-bottom, 0px);
    color: #128c4a;
  }

  /* ---------- drawer side ---------- */
  body[data-drawer-side="start"] .mobile-menu { inset-inline-start: 0; inset-inline-end: auto; }
  body[data-drawer-side="end"]   .mobile-menu { inset-inline-end: 0; inset-inline-start: auto; }

  /* Drawer links also deserve a comfortable target. */
  .mobile-menu a { min-height: 48px; display: flex; align-items: center; }

  /* A long list (many pages + extras) scrolls instead of running off the screen;
     "safe center" keeps a short one centred. The close button stays put. */
  .mobile-menu { overflow-y: auto; justify-content: safe center; padding-top: 72px; -webkit-overflow-scrolling: touch; }
  .mobile-menu .mclose { position: fixed; z-index: 2; }

  /* Extras picked in the admin (WhatsApp, call, language, social icons). */
  .mm-extras { display: grid; gap: 10px; width: min(320px, 86%); margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); }
  .mobile-menu .mm-btn { justify-content: center; min-height: 52px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 14px; color: #fff; font-size: 1rem; text-align: center; }
  .mobile-menu .mm-wa { background: #25d366; border-color: #25d366; color: #0b3d1d; font-weight: 700; }
  .mm-soc { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
  .mobile-menu .mm-soc a { width: 48px; height: 48px; min-height: 48px; justify-content: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff; }
  .mm-soc svg { width: 21px; height: 21px; fill: currentColor; }

  /* Leave room for the bar so the last drawer link isn't covered. */
  body.has-mbar .mobile-menu { padding-bottom: calc(var(--mbar-h) + 12px); }
}

/* The bar is a mobile affordance only. */
@media (min-width: 861px) {
  .mbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.m-autohide header { transition: none; }
  .mbar-item, .mbar-item svg, .mbar-wa, .mbar-pill, .mbar::before { transition: none; }
  .mbar-lens.is-moving { transition: none; }
}

/* Home sections the admin has switched off for small screens. */
@media (max-width: 860px) {
  [data-msec].m-hidden { display: none !important; }
}

/* ==========================================================================
   Floating WhatsApp button + collapsible footer
   ========================================================================== */
/* The floating button is a mobile affordance only. Declared hidden OUTSIDE
   any media query so it can never render unstyled on desktop — which is what
   made the raw SVG stretch to full width above the footer. */
.mfab { display: none; }

@media (max-width: 860px) {
  .mfab {
    display: grid;
    position: fixed;
    inset-inline-end: 16px;
    inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
    border-radius: 50%;
    place-items: center;
    /* WhatsApp's darker green: the white glyph on #25d366 is 1.98:1, under
       the 3:1 floor for graphics; #128c4a gives 4.31:1. */
    background: #128c4a;
    color: #fff;
    box-shadow: 0 8px 24px rgba(18, 140, 74, .38);
    z-index: 80;
    transition: transform .18s ease;
  }
  .mfab svg { width: 28px; height: 28px; flex: 0 0 28px; }
  .mfab:active { transform: scale(.94); }

  /* Lift it clear of the bottom bar when both are on. */
  body.has-mbar .mfab {
    inset-block-end: calc(var(--mbar-h) + 16px);
  }

  /* --- collapsible footer columns ---
     Scoped to .foot-col so the brand column (logo / about / socials) is never
     turned into an accordion panel. */
  body.m-facc footer .foot-col > h4 {
    margin-bottom: 0;
  }
  /* The real interactive control lives inside the heading — reset its button
     chrome and stretch it to fill the header row. */
  body.m-facc footer .foot-col > h4 > .facc-btn {
    all: unset;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    padding-inline-end: 30px;
    min-height: 48px;                 /* 44px+ tap target */
    display: flex;
    align-items: center;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: start;
    user-select: none;
  }
  body.m-facc footer .foot-col > h4 > .facc-btn:focus-visible {
    outline: 2px solid var(--gold, #c9a24b);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* chevron (default) */
  body.m-facc footer .foot-col > h4 > .facc-btn::after {
    content: "";
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .22s ease;
    opacity: .55;
  }
  body.m-facc footer .foot-col.open > h4 > .facc-btn::after {
    transform: translateY(-25%) rotate(225deg);
  }

  /* plus / minus */
  body.m-facc[data-mfacc-icon="plusminus"] footer .foot-col > h4 > .facc-btn::after {
    content: "+";
    border: 0;
    transform: none;
    font-size: 1.25rem;
    line-height: 1;
    top: 50%;
    margin-top: -.55em;
    opacity: .6;
  }
  body.m-facc[data-mfacc-icon="plusminus"] footer .foot-col.open > h4 > .facc-btn::after {
    content: "\2212";                  /* proper minus sign */
  }

  body.m-facc footer .foot-col > ul {
    display: none;
    padding-block-start: 6px;
  }
  body.m-facc footer .foot-col.open > ul { display: block; }

  /* Footer links get real tap targets once they are a mobile menu. */
  footer .foot-col > ul > li { margin-bottom: 2px; }
  footer .foot-col > ul > li > a {
    display: block;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* --- footer density modes (data-mfoot) --- */
  /* compact: brand block + copyright, link columns hidden via .m-off in Blade */
  body[data-mfoot="compact"] footer { padding-block: 32px 24px; }
  body[data-mfoot="minimal"] footer { padding-block: 24px 16px; }
  body[data-mfoot="minimal"] footer .foot-grid { gap: 12px; }

  /* --- alignment --- */
  body[data-mfoot-align="center"] footer .foot-grid,
  body[data-mfoot-align="center"] footer .foot-brand-col { text-align: center; }
  body[data-mfoot-align="center"] footer .foot-brand-col .brand { justify-content: center; }
  body[data-mfoot-align="center"] footer .socials { justify-content: center; }
  /* Column headings stay start-aligned: a centred accordion header with an
     edge affordance reads as broken. */
  body[data-mfoot-align="center"].m-facc footer .foot-col > h4 { text-align: start; }

  /* --- socials position --- */
  body[data-mfoot-social="bottom"] footer .foot-brand-col .socials {
    order: 99;
    margin-top: 16px;
  }
  body[data-mfoot-social="bottom"] footer .foot-brand-col {
    display: flex;
    flex-direction: column;
  }
  body[data-mfoot-social="bottom"] footer .socials { margin-bottom: 0; }

  footer .socials a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mfab { transition: none; }
}

/* ==========================================================================
   Mobile header layout — a three-zone app bar.

   Rule (NN/g + Material + iOS): a centred logo costs brand recall and makes
   returning home markedly harder, so it is only used when nothing competes
   with it. As soon as one trailing action renders, the logo moves to the
   start and the bar becomes leading | logo | actions.
   ========================================================================== */
@media (max-width: 860px) {

  header .nav {
    display: grid;
    align-items: center;
    column-gap: 12px;
    /* Admin-controlled; 56px is the Material top-app-bar default. */
    min-height: var(--m-header-h, 56px);
  }
  /* Keep the logo proportionate to a taller/shorter bar. */
  header .brand .mono { font-size: clamp(1.4rem, calc(var(--m-header-h, 56px) * 0.34), 2.2rem); }

  /* Hidden pieces must not keep reserving a grid column. */
  header .nav .menu { display: none; }

  /* --- with trailing actions: leading | logo (start) | actions (end) --- */
  header .nav { grid-template-columns: auto minmax(0, 1fr) auto; }
  header .nav .brand { justify-self: start; }
  header .nav .actions { justify-self: end; }

  /* --- no leading button: logo simply starts the bar --- */
  body[data-mlead="0"] header .nav { grid-template-columns: minmax(0, 1fr) auto; }
  body[data-mlead="0"] header .nav .burger { display: none; }

  /* --- nothing competing: centre the logo, balanced by an equal spacer --- */
  body[data-macts="0"] header .nav { grid-template-columns: 1fr auto 1fr; }
  body[data-macts="0"] header .nav .brand { justify-self: center; }
  body[data-macts="0"] header .nav .actions { display: none; }

  /* no leading button *and* no actions → truly centred, no spacers needed */
  body[data-macts="0"][data-mlead="0"] header .nav { grid-template-columns: 1fr; }
  body[data-macts="0"][data-mlead="0"] header .nav .brand { justify-self: center; }

  /* --- trailing actions: 48px targets, tightened as they add up --- */
  header .nav .actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  header .nav .actions > * {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body[data-macts="3"] header .nav .actions { gap: 2px; }
  body[data-macts="3"] header .nav .actions > * { min-width: 40px; }
  body[data-macts="3"] header .nav .cur-switch { padding: 6px 8px; font-size: .75rem; }

  /* The logo shrinks before it ever pushes an action off the bar. */
  header .nav .brand { min-width: 0; overflow: hidden; }
  body[data-macts="3"] header .nav .brand .sub { display: none; }

  /* Leading button keeps a full touch target. */
  header .nav .burger {
    min-width: 44px;
    min-height: 44px;
    justify-self: start;
  }
}

/* ==========================================================================
   Logo composition on mobile (data-mlogo)
   mono = the OC monogram only · word = the wordmark only · both = default
   ========================================================================== */
@media (max-width: 860px) {
  body[data-mlogo="mono"] header .nav .brand .word { display: none; }
  body[data-mlogo="word"] header .nav .brand .mono { display: none; }

  /* The monogram alone is small — give it presence and a real touch target. */
  body[data-mlogo="mono"] header .nav .brand {
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
  }
  body[data-mlogo="mono"] header .nav .brand .mono { font-size: 1.35rem; }

  /* The wordmark alone can breathe: keep "Couture" even at three actions. */
  body[data-mlogo="word"][data-macts="3"] header .nav .brand .sub { display: block; }
}

/* One floating layer at a time: hide the WhatsApp button while a bottom sheet
   (cookie notice / language or country suggestion) is open, and keep it 16px
   clear of the tab bar. */
@media (max-width: 860px) {
  body.has-mbar .mfab { inset-block-end: calc(var(--mbar-h) + 16px); }
  .mfab { transition: transform .18s ease, opacity .2s ease; }
  body.sheet-open .mfab { opacity: 0; pointer-events: none; }
  body.has-mbar .lang-toast,
  body.has-mbar .geo-toast { inset-block-end: calc(var(--mbar-h) + 12px); }
}

/* ==== css/desktop.css ==== */
/* ==========================================================================
   Desktop / large-screen presentation layer.

   Driven by the admin's «إعدادات الديسكتوب» page. Mirror of mobile.css:
   every rule lives behind min-width:861px so the mobile layer is untouched.

   Guidance applied:
   - Content is CAPPED (max-width), never fixed, so ultrawide monitors don't
     stretch the design out of proportion.
   - Body copy stays inside a ~700–800px measure even in full-bleed sections.
   - A header that hides on scroll-down and returns on scroll-up is the
     current standard; mega menus are the dominant pattern for large catalogues.
   - Mega panels: 3–5 groups, 7–9 links each, generous white space.
   ========================================================================== */

/* Desktop-only elements are hidden by DEFAULT, outside any media query, so
   they can never render unstyled on small screens. */
.topbar-strip { display: none; }
.mega { display: none; }

@media (min-width: 861px) {

  /* ---------- container ----------
     The width setting governs PAGE CONTENT only. The header, the footer and
     the announcement strip are chrome: they run edge to edge so the bar always
     spans the viewport, and narrowing the content never squeezes the nav or
     the footer columns into an awkward shape. */
  .wrap {
    max-width: var(--d-max-w, 1280px);
    padding-inline: var(--d-gutter, 28px);
  }

  header .wrap,
  footer .wrap {
    max-width: 100%;
    padding-inline: clamp(24px, 3vw, 64px);
  }

  /* Long-form copy keeps a readable measure even inside a wide container. */
  .hero p,
  .sec-head p,
  .atelier .txt p,
  .news p,
  .page-body p,
  .pdp-info .desc {
    max-width: var(--d-measure, 760px);
  }

  /* ---------- rhythm ---------- */
  section { padding-block: var(--d-sec-space, 96px); }
  /* hero height is owned by hero.css / HeroUI */

  /* ---------- grids ---------- */
  .prod-grid {
    grid-template-columns: repeat(var(--d-grid-cols, 4), minmax(0, 1fr));
    gap: var(--d-grid-gap, 24px);
  }
  .col-grid {
    grid-template-columns: repeat(var(--d-col-cols, 2), minmax(0, 1fr));
    gap: var(--d-grid-gap, 24px);
  }

  /* ---------- announcement strip ---------- */
  .topbar-strip {
    display: block;
    background: var(--plum);
    color: var(--gold-soft);
    text-align: center;
    font-size: .8125rem;
    letter-spacing: .06em;
    padding: 8px 20px;
  }

  /* ---------- header behaviour ----------
     orchide.css makes the header sticky unconditionally, so turning the
     setting off has to actively undo it — otherwise the switch does nothing. */
  body:not(.d-sticky) header {
    position: relative;
    top: auto;
  }
  body.d-sticky header {
    position: sticky;
    top: 0;
    z-index: 90;
  }

  body.d-autohide header {
    transition: transform .3s var(--ease-in-out, cubic-bezier(.65,0,.35,1));
    will-change: transform;
  }
  body.d-autohide.d-scrolled-down header { transform: translateY(-100%); }

  /* Shrink the bar once the page has moved — keeps focus on the content. */
  body.d-shrink header .nav {
    transition: height .25s ease;
  }
  /* Only the single-row layouts have a height to shrink; the centred layout
     is two rows and sizes itself, so shrinking it would squash it. */
  body.d-shrink.d-scrolled[data-dhead="classic"] header .nav,
  body.d-shrink.d-scrolled[data-dhead="split"] header .nav { height: 64px; }
  body.d-shrink.d-scrolled[data-dhead="centered"] header .nav { padding-block: 8px 4px; }
  body.d-shrink.d-scrolled header .brand .mono { font-size: 1.55rem; }

  /* ---------- header layouts ----------
     The bar has three children on desktop (.brand, .menu, .actions) — the
     burger is display:none above the breakpoint, so it is NOT a grid item.
     Every child is placed explicitly: relying on auto-placement put them in
     DOM order (brand, menu, actions) instead of the intended arrangement,
     which is why "split" came out wrong. In RTL the columns flow
     right-to-left on their own, so no direction-specific rules are needed. */

  /* classic — logo, menu, actions in one row (the default flex bar) */
  body[data-dhead="classic"] header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* centered — logo alone on top, menu centred beneath it */
  body[data-dhead="centered"] header .nav {
    display: grid;
    /* Same reasoning as "split": a 0 minimum is what keeps the two flanks
       equal, and therefore the logo genuinely centred. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    height: auto;
    row-gap: 4px;
    padding-block: 16px 8px;
  }
  body[data-dhead="centered"] header .brand {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
  }
  body[data-dhead="centered"] header .actions {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
  }
  body[data-dhead="centered"] header .menu {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: center;
    margin: 0;
  }

  /* split — menu at the start, logo centred, actions at the end.

     grid-row:1 on ALL THREE is load-bearing, not decoration. Auto-placement
     is "sparse": the cursor only moves forward. .brand comes first in the DOM
     and claims row 1 / column 2, so .menu — which asks for column 1, i.e.
     *behind* the cursor — gets pushed onto a new row, dragging .actions with
     it. That is what stacked the logo above the nav. Pinning the row keeps
     all three on one line regardless of DOM order. */
  body[data-dhead="split"] header .nav {
    display: grid;
    /* minmax(0,1fr) — NOT plain 1fr. `1fr` is shorthand for minmax(auto,1fr),
       so a column can never shrink below its content: the six-item nav forced
       column 1 to ~450px while the icons only needed ~150px, the two sides
       stopped being equal, and the logo drifted off centre. A 0 minimum makes
       both flanks mathematically identical, which is what actually centres
       the middle column. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    height: 92px;
    column-gap: 16px;
  }

  /* The flanks STRETCH across their whole column (the default justify-self)
     and align their contents from the inside.

     Do NOT put justify-self:start/end on these: that shrink-wraps the grid
     item to fit-content, whose minimum for a flex row is the widest single
     link — so the six-item nav collapsed and wrapped onto a second line.
     Stretching keeps the item as wide as the column, and justify-content
     (which is flow-relative, so it mirrors between Arabic and English) does
     the aligning instead. */
  body[data-dhead="split"] header .menu {
    grid-row: 1;
    grid-column: 1;
    justify-content: start;   /* right edge in Arabic, left edge in English */
    flex-wrap: nowrap;
    min-width: 0;
    margin: 0;
    gap: clamp(12px, 1.5vw, 30px);
  }
  /* A centred logo leaves each flank only ~40% of the bar, so the split
     layout gets its own compact nav type — the tighter, smaller lettering
     luxury houses use for exactly this header. Without it a six-item nav
     cannot share the row with the logo. */
  body[data-dhead="split"] header .menu a {
    white-space: nowrap;
    font-size: clamp(.8125rem, .55vw + .4rem, .9375rem);
    letter-spacing: .03em;
  }

  body[data-dhead="split"] header .brand {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
  }

  /* ---------- stacked monogram (centred and split only) ----------
     The base sheet sets .brand to a column, then `header .brand` in
     orchide.css overrides it back to a row for every header. That is right for
     the classic layout, where the brand sits at one edge and stacking it would
     double the header height for no gain.

     But when the brand is centred it is the focal point, and the monogram
     reads as a crest above the wordmark rather than a bullet beside it. So the
     column is restored for these two layouts only. */
  body[data-dhead="centered"] header .brand,
  body[data-dhead="split"] header .brand {
    flex-direction: column;
    gap: 0;
  }

  /* The tuck that the base sheet applies and `header .brand .mono` removes.
     Cinzel carries noticeable descender space; without pulling the monogram
     down it floats away from the word it belongs to. */
  body[data-dhead="centered"] header .brand .mono,
  body[data-dhead="split"] header .brand .mono {
    margin-bottom: -2px;
  }

  /* Stacking adds roughly 45px. A fixed 92px bar would clip the wordmark, so
     the height becomes a floor rather than a ceiling. */
  body[data-dhead="split"] header .nav {
    height: auto;
    min-height: 92px;
    padding-block: 8px;
  }
  body.d-shrink.d-scrolled[data-dhead="split"] header .nav {
    height: auto;
    min-height: 74px;
    padding-block: 6px;
  }
  body[data-dhead="split"] header .actions {
    grid-row: 1;
    grid-column: 3;
    justify-content: end;     /* left edge in Arabic, right edge in English */
  }

  /* ---------- simple menu presentation (MenuUI) ---------- */
  .menu { gap: var(--nav-gap, 40px); }
  .menu a {
    font-size: calc(.9rem * var(--nav-size, 90%) / 90%);
    letter-spacing: var(--nav-track, .06em);
  }
  body[data-navcase="upper"] .menu a { text-transform: uppercase; }

  /* hover affordance */
  body[data-navhover="none"] .menu a::after { display: none; }
  body[data-navhover="fade"] .menu a::after { display: none; }
  body[data-navhover="fade"] .menu a { opacity: .72; }
  body[data-navhover="fade"] .menu a:hover,
  body[data-navhover="fade"] .menu a[aria-expanded="true"] { opacity: 1; }

  /* ---------- mega menu ----------
     The panel belongs to its nav item, not to the header. The <li> is the
     positioning context for an item-aligned panel; for a full-bleed panel we
     fall back to the header, which orchide.css already makes sticky. */
  .menu .has-mega-item { position: relative; }
  body[data-megafull="1"] .menu .has-mega-item { position: static; }

  .mega {
    position: absolute;
    top: 100%;
    background: #fff;
    border-top: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 80;
  }
  body[data-megashadow="1"] .mega,
  .mega { box-shadow: 0 24px 48px -28px rgba(46, 26, 36, .5); }

  /* full-bleed panel spans the bar; otherwise it hangs under its own item */
  body[data-megafull="1"] .mega { inset-inline: 0; }
  body[data-megafull="0"] .mega {
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 520px;
    border-radius: 0 0 14px 14px;
  }
  html[dir="rtl"] body[data-megafull="0"] .mega { transform: translateX(50%) translateY(-6px); }

  body[data-dmenu="mega"] .mega { display: block; }

  /* Opened by JS (which also handles the close delay and the keyboard), so a
     single .is-open class drives both the hover and the click mode. */
  .mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  html[dir="rtl"] body[data-megafull="0"] .mega.is-open { transform: translateX(50%); }
  body[data-megafull="0"] .mega.is-open { transform: translateX(-50%); }

  .mega-inner {
    max-width: 100%;
    margin-inline: auto;
    padding: 32px clamp(24px, 3vw, 64px) 40px;
    display: grid;
    grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }
  body[data-megafull="0"] .mega-inner { padding: 24px 32px 32px; gap: 24px; }

  .mega-card { display: block; }
  .mega-card .thumb {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--wine), var(--plum));
    margin-bottom: 12px;
  }
  .mega-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s var(--ease-out);
  }
  .mega-card:hover .thumb img { transform: scale(1.04); }
  .mega-card .name {
    font-family: var(--serif);
    color: var(--plum);
    font-size: 1.0625rem;
  }
  html[dir="rtl"] .mega-card .name { font-family: var(--ar); font-weight: 600; }

  .mega-col ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
  .mega-col a {
    display: block;
    padding: 8px 0;
    color: var(--ink);
    font-size: .9375rem;
    transition: color .18s;
  }
  .mega-col a:hover { color: var(--wine); }

  /* featured card — the "next step" tile that closes the panel */
  .mega-feature {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    align-self: stretch;
    min-height: 100%;
  }
  .mega-feature img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mega-feature .cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 24px 16px 16px;
    background: linear-gradient(transparent, rgba(26, 18, 22, .82));
    color: #fff;
    font-size: .9375rem;
    text-align: center;
  }

  /* Keyboard users get a visible focus ring inside the panel (WCAG 2.4.7). */
  .mega a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* ---------- footer ---------- */
  .foot-grid {
    grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr));
  }
  body[data-dfoot="2"] .foot-grid { grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr)); }
  body[data-dfoot="3"] .foot-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
  body[data-dfoot="4"] .foot-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
  body[data-dfoot="5"] .foot-grid { grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); }

  /* An element the admin hid on desktop. */
  .d-off { display: none !important; }
}

/* --------------------------------------------------------------------------
   Split layout, narrow desktops.

   A centred logo forces the two flanks to be equal, which caps the nav at
   roughly 40% of the bar — and since the bar is now full-bleed, that flank is
   a fraction of the VIEWPORT, not of the content cap. Measured against the real labels, a six-item Arabic
   nav stops fitting below ~1440px however tight the type gets — and a header
   that clips its own links is worse than one that rearranges. So below that
   width the split layout falls back to the classic arrangement, which has no
   symmetry constraint. Above it, split renders as designed.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1439px) {
  body[data-dhead="split"] header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* The brand is still stacked in this range, so a fixed height would clip
       the wordmark. Same floor-not-ceiling reasoning as the wide layout. */
    height: auto;
    min-height: 92px;
    padding-block: 8px;
  }
  body[data-dhead="split"] header .menu,
  body[data-dhead="split"] header .brand,
  body[data-dhead="split"] header .actions {
    grid-row: auto;
    grid-column: auto;
    justify-self: auto;
  }
  body[data-dhead="split"] header .menu { justify-content: center; }
}

/* Very large displays: hold the cap, just add breathing room. */
@media (min-width: 1800px) {
  .wrap { padding-inline: calc(var(--d-gutter, 28px) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  body.d-autohide header,
  body.d-shrink header .nav,
  .mega,
  .mega-card .thumb img { transition: none; }
}

/* ==== css/hero.css ==== */
/* ==========================================================================
   Hero slider — height and presentation, driven by HeroUI.

   THE HEIGHT FIX
   --------------
   The old rule was `min-height: 88vh`. On mobile, `vh` measures the viewport
   as though the browser toolbars were hidden, so the bottom of the hero sits
   underneath the address bar — the well-known "100vh lies" problem.

   `svh` measures the SMALL viewport (toolbars visible), so nothing is ever
   cut off. Every height below therefore writes two lines:

       min-height: 88vh;    <- older browsers stop here
       min-height: 88svh;   <- everyone else uses this

   The vh line MUST come first: a browser that does not understand svh simply
   discards that declaration and keeps the previous one.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--plum, #2e1a24);

  /* fallback first, then the modern unit — see the note above */
  min-height: var(--hero-h-fb, 88vh);
  min-height: var(--hero-h, 88svh);
}

/* A floor in px so a short laptop window never crushes the hero. */
.hero[data-hero-min] { min-height: max(var(--hero-h, 88svh), var(--hero-min, 460px)); }

/* --- aspect mode: the image ratio decides the height --- */
.hero[data-hero-mode="aspect"] {
  min-height: 0;
  aspect-ratio: var(--hero-aspect, 16 / 9);
  height: auto;
}

/* --- fixed mode: an exact pixel height --- */
.hero[data-hero-mode="fixed"] {
  min-height: var(--hero-fixed, 640px);
}

/* --- auto mode: the content decides --- */
.hero[data-hero-mode="auto"] {
  min-height: 0;
  padding-block: clamp(60px, 8vw, 130px);
}

/* ---------------- content placement ---------------- */
.hero[data-hero-valign="top"]    { align-items: flex-start; }
.hero[data-hero-valign="center"] { align-items: center; }
.hero[data-hero-valign="bottom"] { align-items: flex-end; }

.hero .hero-inner {
  max-width: var(--hero-text-w, 640px);
  padding-block: var(--hero-pad, 60px);
}

/* Flow-relative so it mirrors between Arabic and English on its own. */
.hero[data-hero-align="center"] .wrap { display: flex; justify-content: center; }
.hero[data-hero-align="center"] .hero-inner,
.hero[data-hero-align="center"] .hero-slides { text-align: center; }
.hero[data-hero-align="center"] .hero-cta { justify-content: center; }

.hero[data-hero-align="end"] .wrap { display: flex; justify-content: flex-end; }
.hero[data-hero-align="end"] .hero-inner { text-align: start; }
/* End-aligned text sits on the far side, so the dark end of the scrim has to
   follow it — otherwise the copy lands on the .35 end (2.8:1 worst case). */
.hero[data-hero-align="end"] .hero-bg::after {
  background: linear-gradient(120deg, rgba(46,26,36,.9) 0%, rgba(46,26,36,.75) 55%, rgba(46,26,36,.35) 100%);
}
html[dir="ltr"] .hero[data-hero-align="end"] .hero-bg::after {
  background: linear-gradient(240deg, rgba(46,26,36,.9) 0%, rgba(46,26,36,.75) 55%, rgba(46,26,36,.35) 100%);
}

/* ---------------- imagery ---------------- */
.hero-bg::after {
  /* The scrim strength is a setting; the direction still follows the language. */
  /* Floor of .85: below it the headline drops under 3:1 on bright photos. */
  opacity: max(var(--hero-overlay, .85), .85);
}

.hero-bg .slide {
  transition: opacity min(var(--hero-speed, 1000ms), 1000ms) ease;
}

/* Ken Burns is opt-in — it is motion, and motion has a cost. */
.hero[data-hero-kb="0"] .hero-bg .slide.active { animation: none; transform: none; }

/* --- slide transition styles --- */
.hero[data-hero-trans="none"] .hero-bg .slide { transition: none; }
.hero[data-hero-trans="slide"] .hero-bg .slide {
  transition: opacity min(var(--hero-speed, 1000ms), 1000ms) ease,
              transform min(var(--hero-speed, 1000ms), 1000ms) cubic-bezier(.2, .8, .2, 1);
  transform: translateX(6%) scale(1.04);
}
html[dir="rtl"] .hero[data-hero-trans="slide"] .hero-bg .slide { transform: translateX(-6%) scale(1.04); }
.hero[data-hero-trans="slide"] .hero-bg .slide.active { transform: translateX(0) scale(1.05); }

/* ---------------- scroll cue ---------------- */
.hero[data-hero-cue="0"] .hero-scroll { display: none; }

/* The cue ("اكتشفي" / "Discover") is absolutely positioned in the hero's bottom
   edge, so nothing in the flow knew it was there: a tall slide, a short
   screen or "content at the bottom" put the buttons right on top of it.
   Reserve its band (24px offset + label + 40px line ≈ 90px, plus a gap) as
   bottom padding, so the slide content can never reach it in any height mode.
   With the cue switched off in the admin the room is not reserved. */
.hero { --cue-room: 104px; padding: 0; }
.hero:not([data-hero-cue="0"]) { padding-bottom: var(--cue-room); }
.hero[data-hero-mode="auto"]:not([data-hero-cue="0"]) {
  padding-bottom: max(clamp(60px, 8vw, 130px), var(--cue-room));
}
/* The reserved band replaces the text block's own bottom padding rather than
   adding to it — otherwise a content-tall hero grew by the whole band and the
   cue slid down behind the phone's bottom bar. Phones also get a tighter cue
   (shorter line, smaller band) and less top padding for the same reason. */
.hero:not([data-hero-cue="0"]) .hero-inner { padding-block-end: 0; }
@media (max-width: 860px) {
  .hero { --cue-room: 76px; }
  .hero .hero-scroll { bottom: 12px; gap: 6px; }
  .hero .hero-scroll .line { height: 28px; }
  .hero:not([data-hero-cue="0"]) .hero-inner { padding-block-start: min(var(--hero-pad, 60px), 40px); }
}
/* No room to spare on a very short window — the cue yields rather than the copy. */
@media (max-height: 480px) {
  .hero { --cue-room: 0px; }
  .hero .hero-scroll { display: none; }
}

/* ---------------- mobile ---------------- */
@media (max-width: 860px) {
  .hero {
    min-height: var(--hero-h-m-fb, 78vh);
    min-height: var(--hero-h-m, 78svh);
  }
  .hero[data-hero-min] {
    min-height: max(var(--hero-h-m, 78svh), var(--hero-min-m, 380px));
  }
  /* A fixed pixel height rarely survives a phone — cap it at the viewport. */
  .hero[data-hero-mode="fixed"] {
    min-height: min(var(--hero-fixed, 640px), 88vh);
    min-height: min(var(--hero-fixed, 640px), 88svh);
  }
  .hero[data-hero-align="end"] .wrap { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg .slide,
  .hero-bg .slide.active { animation: none !important; transition: opacity .2s linear; transform: none; }
}

/* ==== css/collections.css ==== */
/* ==========================================================================
   Collections section — five card layouts, driven by CollectionsUI.

   Everything keys off [data-col-layout] on the section, and off the CSS
   variables the layout emits. Loaded on every page but scoped to
   .collections-sec, so nothing else is affected.

   Guidance applied:
   - One aspect ratio per layout so the grid reads as a set.
   - Hover zoom is transform:scale inside overflow:hidden — compositor only,
     never reflows the grid.
   - Hover is not an input method on touch, so overlay copy is revealed
     unconditionally there instead of being hidden behind an interaction.
   ========================================================================== */

.collections-sec {
  --c-gap: 24px;
  --c-radius: 6px;
  --c-ratio: 3 / 4;
  --c-cols: 2;
  --c-scrim: .55;
}

/* ---------------- shared card ---------------- */
.c-card {
  position: relative;
  display: block;
  border-radius: var(--c-radius);
  overflow: hidden;
  background: var(--blush, #faf6f2);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.collections-sec[data-col-shadow="1"] .c-card { box-shadow: var(--shadow, 0 18px 40px -30px rgba(46,26,36,.6)); }

.c-media {
  position: relative;
  display: block;
  aspect-ratio: var(--c-ratio);
  overflow: hidden;
  background: linear-gradient(160deg, var(--wine, #6d2b4a), var(--plum, #2e1a24));
}
.c-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s var(--ease-out, cubic-bezier(.2, .8, .2, 1));
  will-change: transform;
}

/* ---------------- hover behaviours ---------------- */
.collections-sec[data-col-hover="zoom"] .c-card:hover .c-media img { transform: scale(1.04); }
.collections-sec[data-col-hover="lift"] .c-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(46,26,36,.75); }
.collections-sec[data-col-hover="reveal"] .c-card:hover .c-media img { transform: scale(1.04); }

/* ---------------- caption: overlay ---------------- */
.collections-sec[data-col-caption="overlay"] .c-media::after,
.collections-sec[data-col-caption="hover"] .c-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Floor of .8: below it the 12px eyebrow / "go" link drop under 4.5:1 on a
     bright photo (.55 measured 2.32:1 for the gold eyebrow). */
  background: linear-gradient(transparent 38%, rgba(46, 26, 36, max(var(--c-scrim), .8)));
  transition: opacity .25s ease;
}
.collections-sec[data-col-caption="overlay"] .c-cap,
.collections-sec[data-col-caption="hover"] .c-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 24px;
  color: #fff;
  z-index: 2;
}
.collections-sec[data-col-caption="overlay"] .c-cap h3,
.collections-sec[data-col-caption="hover"] .c-cap h3 { color: #fff; }

/* caption revealed on hover only */
.collections-sec[data-col-caption="hover"] .c-cap {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.collections-sec[data-col-caption="hover"] .c-card:hover .c-cap,
.collections-sec[data-col-caption="hover"] .c-card:focus-within .c-cap {
  opacity: 1;
  transform: none;
}

/* Touch devices cannot hover — never hide the label behind an interaction
   the device does not support. */
@media (hover: none) {
  .collections-sec[data-col-caption="hover"] .c-cap {
    opacity: 1;
    transform: none;
  }
}

/* ---------------- caption: below the image ---------------- */
.collections-sec[data-col-caption="below"] .c-cap {
  padding: 16px 4px 4px;
  color: var(--ink, #2e1a24);
}
.collections-sec[data-col-caption="below"] .c-cap h3 { color: var(--plum, #2e1a24); }
.collections-sec[data-col-caption="below"] .c-card { background: transparent; box-shadow: none; }
.collections-sec[data-col-caption="below"][data-col-shadow="1"] .c-media { box-shadow: var(--shadow, 0 18px 40px -30px rgba(46,26,36,.6)); }

/* ---------------- caption typography ---------------- */
.c-cap .eyebrow { color: var(--gold-soft, #e6d3a3); display: block; }
.collections-sec[data-col-caption="below"] .c-cap .eyebrow { color: var(--muted, #6a5b62); }
.c-cap h3 { font-size: clamp(1.15rem, 1.1vw + .7rem, 1.7rem); margin-top: 8px; }
.c-cap .go {
  margin-top: 12px;
  font-family: var(--serif2, serif);
  letter-spacing: .14em;
  font-size: .75rem;
  text-transform: uppercase;
  opacity: .85;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .25s var(--ease-out), color .25s var(--ease-out);
}
html[dir="rtl"] .c-cap .go { font-family: var(--ar, sans-serif); letter-spacing: 0; text-transform: none; }
.c-card:hover .c-cap .go { gap: 12px; color: var(--gold-soft, #e6d3a3); }
.c-cap .count { display: block; font-size: .75rem; opacity: .72; margin-top: 6px; }

.collections-sec[data-col-align="center"] .c-cap { text-align: center; }
.collections-sec[data-col-align="center"] .c-cap .go { justify-content: center; }

/* ==========================================================================
   Layouts
   ========================================================================== */

/* --- grid: the dependable default --- */
.c-wrap[data-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(var(--c-cols), minmax(0, 1fr));
  gap: var(--c-gap);
}

/* --- masonry: staggered heights, still one column set --- */
.c-wrap[data-layout="masonry"] {
  columns: var(--c-cols);
  column-gap: var(--c-gap);
}
.c-wrap[data-layout="masonry"] .c-card {
  break-inside: avoid;
  margin-bottom: var(--c-gap);
  display: inline-block;
  width: 100%;
}
/* Masonry only reads as masonry if the cards differ — vary the ratio in a
   repeating cycle rather than leaving every tile identical. */
.c-wrap[data-layout="masonry"] .c-card:nth-child(3n+1) .c-media { aspect-ratio: 3 / 4; }
.c-wrap[data-layout="masonry"] .c-card:nth-child(3n+2) .c-media { aspect-ratio: 1 / 1; }
.c-wrap[data-layout="masonry"] .c-card:nth-child(3n+3) .c-media { aspect-ratio: 4 / 5; }

/* --- carousel: horizontal scroll with snap --- */
.c-wrap[data-layout="carousel"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--c-cols) - 1) * var(--c-gap)) / var(--c-cols));
  gap: var(--c-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.c-wrap[data-layout="carousel"] .c-card { scroll-snap-align: start; }
.c-wrap[data-layout="carousel"]::-webkit-scrollbar { height: 5px; }
.c-wrap[data-layout="carousel"]::-webkit-scrollbar-thumb { background: var(--line, #e7ded9); border-radius: 5px; }

/* --- split: one hero card beside a stack of smaller ones --- */
.c-wrap[data-layout="split"] {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--c-gap);
}
.c-wrap[data-layout="split"] .c-card:first-child { grid-row: span 2; }
.c-wrap[data-layout="split"] .c-card:first-child .c-media { aspect-ratio: 3 / 4; height: 100%; }
.c-wrap[data-layout="split"] .c-card:not(:first-child) .c-media { aspect-ratio: 16 / 9; }

/* --- list: wide rows, image beside copy --- */
.c-wrap[data-layout="list"] { display: flex; flex-direction: column; gap: var(--c-gap); }
.c-wrap[data-layout="list"] .c-card {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  background: #fff;
}
.c-wrap[data-layout="list"] .c-media { aspect-ratio: 4 / 3; }
.c-wrap[data-layout="list"] .c-media::after { display: none; }
.c-wrap[data-layout="list"] .c-cap {
  position: static;
  padding: 24px;
  color: var(--ink, #2e1a24);
}
.c-wrap[data-layout="list"] .c-cap h3 { color: var(--plum, #2e1a24); }
.c-wrap[data-layout="list"] .c-cap .eyebrow { color: var(--muted, #6a5b62); }

/* ---------------- section header alignment ---------------- */
.collections-sec[data-col-head="start"] .sec-head { text-align: start; margin-inline: 0; }
.collections-sec[data-col-head="start"] .sec-head .divider { margin-inline: 0; }

/* ---------------- responsive ---------------- */
@media (max-width: 1024px) {
  .c-wrap[data-layout="grid"],
  .c-wrap[data-layout="carousel"] { --c-cols: var(--c-cols-tablet, 2); }
  .c-wrap[data-layout="masonry"] { columns: var(--c-cols-tablet, 2); }
  .c-wrap[data-layout="split"] { grid-template-columns: 1fr; }
  .c-wrap[data-layout="split"] .c-card:first-child { grid-row: auto; }
}

@media (max-width: 860px) {
  .c-wrap[data-layout="grid"] { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .c-wrap[data-layout="masonry"] { columns: 1; }
  .c-wrap[data-layout="carousel"] { grid-auto-columns: 82%; }
  .c-wrap[data-layout="list"] .c-card { grid-template-columns: 1fr; }
  .c-wrap[data-layout="list"] .c-media { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .c-card, .c-media img, .c-cap, .c-cap .go { transition: none !important; }
  .c-card:hover .c-media img { transform: none; }
}

/* ==== css/arrivals.css ==== */
/* ==========================================================================
   "New arrivals" section — driven by ArrivalsUI.

   Scoped to .arrivals-sec so the product grid elsewhere is untouched.

   Guidance applied:
   - The card surfaces the decision facts without a tap: name, collection,
     price, and the old price struck through.
   - Badges are triggers, not decoration — one per card, and never allowed to
     sit on top of the image edge where it collides with the corner radius.
   - Badges overlapping content on small screens is a known conversion killer,
     so the badge shrinks and re-anchors on mobile instead of staying put.
   ========================================================================== */

.arrivals-sec,
.a-scope {
  --a-cols: 4;
  --a-gap: 24px;
  --a-radius: 6px;
  --a-ratio: 3 / 4;
}

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

/* ---------------- card ---------------- */
.a-card {
  display: block;
  cursor: pointer;
  background: transparent;
  color: inherit;
  text-decoration: none;
}
/* The card is a link now — keyboard users need to see where they are. */
.a-card:focus-visible {
  outline: 2px solid var(--gold, #c9a24b);
  outline-offset: 4px;
  border-radius: var(--a-radius);
}

.a-media {
  position: relative;
  display: block;
  aspect-ratio: var(--a-ratio);
  border-radius: var(--a-radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--wine, #6d2b4a), var(--plum, #2e1a24));
}
.a-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s var(--ease-out, cubic-bezier(.2, .8, .2, 1));
  will-change: transform;
}

/* ── shimmer placeholder ───────────────────────────────────────────────────
   A Flutter-style skeleton sweeps behind every card image until the photo has
   actually loaded, so a slow connection never shows an empty coloured box. The
   ::before is the moving highlight; JS adds .is-loaded the moment the <img>
   fires load (or immediately for a cached image / a card with no photo). */
.a-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, #ece4e0 25%, #f7f1ec 45%, #ece4e0 65%);
  background-size: 200% 100%;
  animation: a-shimmer 1.25s linear infinite;
}
.a-media.is-loaded::before {
  opacity: 0;
  animation: none;
  transition: opacity .3s ease;
  pointer-events: none;
}
/* Only the MAIN photo fades in; the hover second image keeps its own timing. */
.a-media img.a-img-main { position: relative; z-index: 1; opacity: 0; transition: opacity .3s ease; }
.a-media.is-loaded img.a-img-main { opacity: 1; }
@keyframes a-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .a-media::before { animation: none; }
  .a-media img.a-img-main { transition: none; }
}

[data-a-hover="zoom"] .a-card:hover .a-media img { transform: scale(1.04); }
[data-a-hover="lift"] .a-card { transition: transform .3s ease; }
[data-a-hover="lift"] .a-card:hover { transform: translateY(-4px); }

/* ---------------- badge ---------------- */
.a-badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  background: var(--gold, #c9a24b);
  color: var(--plum, #2e1a24);
  box-shadow: 0 4px 12px rgba(46, 26, 36, .22);
}
.a-badge.sale { background: var(--wine, #6d2b4a); color: #fff; }
.a-badge.soldout { background: #4b4b4b; color: #fff; }
.a-media.is-soldout .a-img-main { filter: grayscale(.5) brightness(.92); }

/* ---------------- quick view ---------------- */
.a-quick {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 16px;
  text-align: center;
  background: linear-gradient(transparent, rgba(46, 26, 36, .85));
  color: #fff;
  font-size: .8125rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 2;
}
.a-card:hover .a-quick,
.a-card:focus-within .a-quick { opacity: 1; transform: none; }

/* ---------------- body ---------------- */
.a-body { padding: 12px 0 0; }
.a-name {
  font-family: var(--serif, serif);
  color: var(--plum, #2e1a24);
  font-size: 1.0625rem;
  line-height: 1.4;
}
html[dir="rtl"] .a-name { font-family: var(--ar, sans-serif); font-weight: 600; }
.a-cat { font-size: .75rem; color: var(--muted, #6a5b62); margin-top: 4px; }
.a-price { margin-top: 8px; color: var(--wine, #6d2b4a); font-weight: 600; }
.a-price .old {
  color: var(--muted, #6a5b62);
  text-decoration: line-through;
  font-weight: 400;
  margin-inline-start: 8px;
  font-size: .8125rem;
}

/* ---------------- filters ---------------- */
.a-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
}
.a-chip {
  border: 1px solid var(--line, #e7ded9);
  background: transparent;
  color: var(--plum, #2e1a24);
  font-family: inherit;
  font-size: .8125rem;
  padding: 8px 20px;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
  min-height: 40px;
}
.a-chip:hover { border-color: var(--gold, #c9a24b); }
.a-chip.active { background: var(--plum, #2e1a24); color: var(--gold-soft, #e3c98a); border-color: var(--plum, #2e1a24); }
.a-card[hidden] { display: none; }

/* ---------------- footer CTA ---------------- */
.a-more { text-align: center; margin-top: 48px; }
.a-more p { color: var(--muted, #6a5b62); margin-bottom: 16px; font-size: .9375rem; }
.a-more .as-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wine, #6d2b4a);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap .25s ease;
}
.a-more .as-link:hover { gap: 16px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1024px) {
  .a-grid { grid-template-columns: repeat(var(--a-cols-t, 3), minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .a-grid {
    grid-template-columns: repeat(var(--a-cols-m, 2), minmax(0, 1fr));
    gap: max(12px, calc(var(--a-gap) * .5));
  }

  /* A badge that overlaps the image edge or the price is a known conversion
     killer on small screens — shrink it and pull it in. */
  .a-badge {
    inset-block-start: 8px;
    inset-inline-start: 8px;
    padding: 4px 8px;
    font-size: .6875rem;
  }

  /* No hover on touch, so the quick-view overlay would never appear. */
  .a-quick { display: none; }

  .a-name { font-size: .9375rem; }
  .a-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .a-chip { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .a-media img, .a-quick, .a-card { transition: none !important; }
  .a-card:hover .a-media img { transform: none; }
}

/* --------------------------------------------------------------------------
   The filter row scrolls sideways on phones. A native scrollbar under a row
   of pills looks like a defect, and it is redundant: the pills are visibly
   cut off at the edge, which already signals "there is more".
   -------------------------------------------------------------------------- */
.a-filters {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}
.a-filters::-webkit-scrollbar { width: 0; height: 0; display: none; }

@media (max-width: 860px) {
  /* Bleed to the screen edge so the cut-off pill reads as intentional, and
     keep a little end padding so the last chip is never flush. */
  .a-filters {
    /* Must match the phone .wrap padding (--m-gutter), not the desktop
       gutter — a larger bleed pushed the first chip off-screen. */
    margin-inline: calc(var(--m-gutter, 16px) * -1);
    padding-inline: var(--m-gutter, 16px);
    scroll-padding-inline: var(--m-gutter, 16px);
  }
  .a-filters::after { content: ""; flex: 0 0 4px; }
}

/* ==========================================================================
   CARD DESIGNS  [data-a-card]

   Fashion cards let the photograph do the selling — imagery usually owns
   70–80% of the tile. The variants below differ in where the type sits and
   how loud it is; there is no universal winner, so the choice is the admin's.

   Every variant keeps the same facts available (name, collection, price):
   changing the design must never quietly remove information.
   ========================================================================== */

/* ---------- 1. classic — type in a strip under the image (default) ---------- */
/* nothing extra: this is the base card above */

/* ---------- 2. overlay — type laid over the photograph ---------- */
[data-a-card="overlay"] .a-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 42%, rgba(46, 26, 36, .88));
  z-index: 1;
}
[data-a-card="overlay"] .a-card { position: relative; }
[data-a-card="overlay"] .a-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 16px;
  color: #fff;
}
[data-a-card="overlay"] .a-name { color: #fff; }
[data-a-card="overlay"] .a-cat { color: rgba(255, 255, 255, .72); }
[data-a-card="overlay"] .a-price { color: var(--gold-soft, #e3c98a); }
[data-a-card="overlay"] .a-price .old { color: rgba(255, 255, 255, .55); }
/* the quick-view strip would sit on top of the caption — drop it here */
[data-a-card="overlay"] .a-quick { display: none; }

/* ---------- 3. minimal — photo, name, price. nothing else ---------- */
[data-a-card="minimal"] .a-cat { display: none; }
[data-a-card="minimal"] .a-body { padding-top: 12px; }
[data-a-card="minimal"] .a-name {
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: .01em;
}
html[dir="rtl"] [data-a-card="minimal"] .a-name { font-weight: 500; }
[data-a-card="minimal"] .a-price {
  margin-top: 4px;
  font-weight: 400;
  color: var(--muted, #6a5b62);
  font-size: .9375rem;
}
[data-a-card="minimal"] .a-media { border-radius: 0; }

/* ---------- 4. editorial — serif, collection as an eyebrow above ---------- */
/* Serif type reads as considered and timeless — the reason fashion houses
   keep returning to it. */
[data-a-card="editorial"] .a-body {
  padding-top: 16px;
  text-align: center;
}
[data-a-card="editorial"] .a-cat {
  order: -1;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink, #8a6a22);
  margin: 0 0 8px;
}
html[dir="rtl"] [data-a-card="editorial"] .a-cat {
  letter-spacing: .1em;
  text-transform: none;
}
[data-a-card="editorial"] .a-body { display: flex; flex-direction: column; }
[data-a-card="editorial"] .a-name {
  font-size: 1.25rem;
  line-height: 1.35;
}
[data-a-card="editorial"] .a-price {
  margin-top: 12px;
  font-weight: 400;
  letter-spacing: .04em;
}
[data-a-card="editorial"] .a-media { border-radius: 0; }

/* ---------- 5. compact — image beside the type ---------- */
[data-a-card="compact"] .a-card {
  display: grid;
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
[data-a-card="compact"] .a-media { aspect-ratio: 1 / 1; }
[data-a-card="compact"] .a-body { padding: 0; }
[data-a-card="compact"] .a-name { font-size: .9375rem; }
[data-a-card="compact"] .a-quick { display: none; }
[data-a-card="compact"] .a-badge {
  inset-block-start: 6px;
  inset-inline-start: 6px;
  padding: 4px 8px;
  font-size: .6875rem;
}
/* A row-shaped card in a 4-up grid becomes unreadable — cap the columns. */
[data-a-card="compact"] .a-grid {
  grid-template-columns: repeat(min(var(--a-cols), 3), minmax(0, 1fr));
}

/* ---------- text alignment (all variants) ---------- */
[data-a-align="center"] .a-body { text-align: center; }
[data-a-align="end"] .a-body { text-align: end; }

@media (max-width: 860px) {
  [data-a-card="compact"] .a-grid { grid-template-columns: 1fr; }
  [data-a-card="compact"] .a-card { grid-template-columns: minmax(0, 84px) minmax(0, 1fr); }
  [data-a-card="overlay"] .a-body { padding: 16px 12px; }
  [data-a-card="editorial"] .a-name { font-size: 1.0625rem; }
}

/* ==========================================================================
   HOVER: swap to the second photograph.

   A proven apparel pattern — the back of the dress, or the gown on a body —
   revealed on hover. The second image is stacked over the first and cross-
   fades in; badges and the quick-view strip keep their higher z-index so they
   are never hidden behind it.
   ========================================================================== */
.a-media .a-img-2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  transition: opacity .3s ease;
}
[data-a-hover="second"] .a-card:hover .a-img-2 { opacity: 1; }
[data-a-hover="second"] .a-card:hover .a-img-main { transform: scale(1.03); }

/* No hover on touch — never leave a phone visitor stuck on the second frame. */
@media (hover: none) {
  .a-media .a-img-2 { display: none; }
}

/* ==========================================================================
   CARD SHADOW  [data-a-shadow]
   Lifts the image tile off the page. "soft" is a quiet depth cue; "bold" is a
   pronounced float for a more boutique, product-forward feel.
   ========================================================================== */
[data-a-shadow="soft"] .a-media { box-shadow: 0 10px 26px -14px rgba(46, 26, 36, .40); }
[data-a-shadow="bold"] .a-media { box-shadow: 0 18px 42px -18px rgba(46, 26, 36, .55); }

@media (prefers-reduced-motion: reduce) {
  .a-media .a-img-2 { transition: none; }
  [data-a-hover="second"] .a-card:hover .a-img-main { transform: none; }
}