/* =========================================================
   ANTIQUE HOME — VASE & DECOR
   Hero section · mobile-first
   ========================================================= */

:root{
  /* warm neutral palette */
  --cream:      #F6F1E8;
  --champagne:  #E3D5BC;
  --gold:       #C9B48A;
  --sand:       #BFAE93;
  --warm-brown: #4A3B2E;
  --ink:        #1C1611;

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* horizontal rhythm — one gutter for header, copy and footer */
  --gutter: 26px;

  /* header sits a little lower than the very top (per brief) */
  --header-top: 26px;

  /* true optical width of the cropped logo mark */
  --logo-w: clamp(124px, 35vw, 158px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   ARABIC / RTL MODE
   Swaps the two font tokens everything else in the site already
   reads from (--serif for headings, --sans for body text), so
   the whole visual language re-themes without touching every
   component's own CSS. El Messiri is a slim, elegant display face
   for headings (its 400/500 weights read as "thin" for an Arabic
   face); Tajawal's 300 weight carries the same thin, refined feel
   for body copy — deliberately light, to match the brief's "رفيعة
   جدًا وفخمة" (very thin, luxurious) request.
   ========================================================= */
html[dir="rtl"]{
  --serif: "El Messiri", "Times New Roman", serif;
  --sans:  "Tajawal", "Helvetica Neue", Arial, sans-serif;
}
html[dir="rtl"] body{
  font-weight: 300;
  letter-spacing: 0;
}
html[dir="rtl"] .headline,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3{
  font-weight: 500;
  letter-spacing: 0;
}
/* uppercase tracking (kickers, nav labels) reads as awkward gaps
   between Arabic letters — drop it in RTL, keep the rest of the look */
html[dir="rtl"] .kicker,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .cta__label,
html[dir="rtl"] .menu-btn__label{
  letter-spacing: 0 !important;
  text-transform: none;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* =========================================================
   HERO SHELL
   ========================================================= */

.hero{
  position:relative;
  width:100%;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}

@supports not (min-height:100svh){
  .hero{ min-height:100vh; }
}

/* ---------- video ---------- */

.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}

/* ---------- brand intro (index.html) ---------- */
.intro-on, .intro-on body{ overflow:hidden; }
.intro{
  position:fixed;
  inset:0;
  z-index:10000;
  background:#130F0B; /* the intro film's own backdrop, so letterboxing is invisible */
  display:flex;
  align-items:center;
  justify-content:center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.intro.is-leaving{ opacity:0; visibility:hidden; }
/* portrait phones: fill the screen edge to edge (the logo sits centred,
   so cropping the film's top/bottom margins never touches it) */
@media (orientation: portrait){
  .intro__video{ object-fit:cover !important; }
}
.intro__video{
  width:100%;
  height:100%;
  object-fit:contain; /* portrait film: full-bleed on phones, centred on desktop */
}
.intro__btn{
  position:absolute;
  bottom: max(28px, env(safe-area-inset-bottom));
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border:1px solid rgba(201,180,138,.45);
  border-radius:999px;
  background: rgba(19,15,11,.55);
  color: var(--champagne);
  font-family: var(--sans);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
}
.intro__btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.intro__sound{ left:50%; transform:translateX(-50%); bottom: max(78px, calc(env(safe-area-inset-bottom) + 50px)); }
.intro__skip{ right:22px; }
.intro__btn[hidden]{ display:none; }

.hero__video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  /* gently warm the footage without washing it out */
  filter: saturate(1.02) contrast(1.02);
  transform: scale(1.04);
  animation: kenburns 26s var(--ease) infinite alternate;
}

@keyframes kenburns{
  from{ transform: scale(1.04); }
  to  { transform: scale(1.12); }
}

/* ---------- warm readability veil ---------- */

.hero__tint{
  position:absolute;
  inset:0;
  /* warm scrim behind the copy column only — keeps the type legible
     wherever the footage runs bright */
  background:
    linear-gradient(
      100deg,
      rgba(26,18,12,.44) 0%,
      rgba(26,18,12,.20) 46%,
      rgba(26,18,12,0)   82%
    );
}

/* ---------- soft black shadow: top, bottom & sides ---------- */

.hero__vignette{
  position:absolute;
  inset:0;
  /* a single soft shadow across the crown of the frame — nothing on the
     sides or the base, so the footage stays open */
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,.30) 9%,
      rgba(0,0,0,.13) 17%,
      rgba(0,0,0,0)   26%
    );
  pointer-events:none;
}

/* =========================================================
   HEADER
   ========================================================= */

/* One row at every size: menu · mark · utilities.
   Fixed side tracks so the centred mark stays optically centred and
   can never inflate the columns and shunt the icons off-screen. */
.header{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas: "menu brand actions";
  align-items:center;
  column-gap:16px;
  padding:
    calc(var(--header-top) + env(safe-area-inset-top, 0px))
    var(--gutter) 0;
}

/* ---------- logo ---------- */

/* The supplied artwork is a 500×500 canvas whose ink only occupies
   77–420 × 119–381. The frame below crops that dead transparency away
   so --logo-w is the mark's TRUE optical width — it reads large without
   the empty padding stealing vertical room from the hero. */
.brand{
  grid-area:brand;
  justify-self:center;
  position:relative;
  display:block;
  width: var(--logo-w);
  max-width:100%;
  aspect-ratio: 343 / 262;
  overflow:hidden;
  opacity:0;
  animation: logoIn 1.5s var(--ease) .1s forwards;
}

.brand__logo,
.brand__shine{
  position:absolute;
  width:145.77%;          /* 500 / 343 */
  max-width:none;
  left:-22.45%;           /* -77 / 343 */
  top:-45.42%;            /* -119 / 262 of the box height */
}

.brand__logo{
  height:auto;            /* square source → 145.77% of the box WIDTH */
  /* dark ink artwork → champagne gold ≈ #E4C792. Deliberately kept
     below white so the sweep below has room to read as a glint. */
  filter:
    brightness(0) saturate(100%) invert(84%) sepia(22%)
    saturate(520%) hue-rotate(358deg) brightness(94%) contrast(90%)
    drop-shadow(0 2px 14px rgba(0,0,0,.45));
}

/* ---------- gold light sweeping the letterforms ----------
   The logo art masks a moving gold band, so the glint rides the
   strokes of each letter instead of washing over a rectangle. */
.brand__shine{
  /* height % resolves against the box HEIGHT, so it needs its own
     figure to land the mask exactly on the artwork: 145.77 / 76.38 */
  height:190.84%;
  pointer-events:none;
  background:
    linear-gradient(
      100deg,
      rgba(255,236,190,0)   36%,
      rgba(255,240,203,.45) 45%,
      rgba(255,252,238,1)   50%,
      rgba(255,240,203,.45) 55%,
      rgba(255,236,190,0)   64%
    );
  background-size: 260% 100%;
  background-repeat:no-repeat;
  mix-blend-mode: screen;

  -webkit-mask-image: url("/logo hero.png");
          mask-image: url("/logo hero.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;

  animation: goldSweep 6.5s var(--ease) 1.6s infinite;
}

@keyframes goldSweep{
  0%       { background-position: 170% 0; }
  38%, 100%{ background-position: -70% 0; }
}

@keyframes logoIn{
  from{ opacity:0; transform: translateY(-8px); }
  to  { opacity:1; transform:none; }
}

/* ---------- icons ---------- */

.header__actions{
  grid-area:actions;
  justify-self:end;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:0;                /* the three utility icons sit close together */
  margin-right:-7px;    /* optical: pull icon padding back to the gutter */
}

/* On narrow phones the lang pill (with its text label) is too wide to
   sit inline with search/cart without crowding the logo — so on mobile
   only, it wraps onto its own row sitting just above them, shrunk down
   to a small icon-only pill. From the tablet breakpoint up there's
   enough width for all three to share one row normally. */
.lang-btn{ order:-1; flex-basis:100%; justify-content:flex-end; margin:0 0 4px; }

.menu-btn{
  grid-area:menu;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-left:-8px;
}

.menu-btn__label{
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:inherit;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* the icon row now sits on the logo's own line, optically centred */
.header__actions,
.menu-btn{
  margin-top: 0;
}

.icon-btn{
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:0;
  padding:7px;
  margin:0;
  cursor:pointer;
  color: var(--cream);
  line-height:0;
  border-radius:2px;
  opacity:0;
  animation: fadeIn 1.1s var(--ease) .35s forwards;
  transition: color .4s var(--ease), transform .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* a faint, ever-so-slow gold breath — reads as quiet ambient light,
   not a distraction */
.icon-btn svg{
  width:20px;
  height:20px;
  fill:none;
  stroke: currentColor;
  stroke-width:1.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation: iconGlowSvg 4.8s ease-in-out infinite;
}

.header__actions .icon-btn:nth-child(1) svg{ animation-delay: 0s;    }
.header__actions .icon-btn:nth-child(2) svg{ animation-delay: .5s;   }
.header__actions .icon-btn:nth-child(3) svg{ animation-delay: 1s;    }

@keyframes iconGlowSvg{
  0%,100%{ filter: drop-shadow(0 1px 6px rgba(0,0,0,.45)); }
  50%    { filter: drop-shadow(0 0 7px rgba(201,180,138,.5)) drop-shadow(0 1px 6px rgba(0,0,0,.4)); }
}

@media (hover:hover){
  .icon-btn:hover{ color: var(--gold); transform: translateY(-2px) scale(1.12); }
  .icon-btn:hover svg{ animation-play-state:paused; filter: drop-shadow(0 0 9px rgba(201,180,138,.65)); }
}
.icon-btn:active{ color: var(--gold); transform: scale(.88); }
.icon-btn:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }

/* hamburger */
.menu-btn__lines{
  display:block;
  width:19px;
}
.menu-btn__lines span{
  display:block;
  height:1.1px;
  background: currentColor;
  border-radius:2px;
  transition: width .4s var(--ease);
  animation: iconGlowLine 4.8s ease-in-out infinite;
}
.menu-btn__lines span:nth-child(2){ animation-delay:.16s; }
.menu-btn__lines span:nth-child(3){ animation-delay:.32s; }

@keyframes iconGlowLine{
  0%,100%{ box-shadow: 0 1px 6px rgba(0,0,0,.45); }
  50%    { box-shadow: 0 0 7px rgba(201,180,138,.55); }
}

.menu-btn__lines span + span{ margin-top:6px; }
.menu-btn__lines span:nth-child(1){ width:100%; }
.menu-btn__lines span:nth-child(2){ width:100%; }
.menu-btn__lines span:nth-child(3){ width:100%; }

@media (hover:hover){
  .menu-btn:hover{ transform: scale(1.08); }
  .menu-btn:hover .menu-btn__lines span{ animation-play-state:paused; box-shadow: 0 0 8px rgba(201,180,138,.6); }
  .menu-btn:hover .menu-btn__lines span:nth-child(2){ width:64%; }
  .menu-btn:hover .menu-btn__lines span:nth-child(3){ width:80%; }
  .menu-btn:hover .menu-btn__label{ color: var(--gold); }
}
.menu-btn:active{ transform: scale(.9); }

/* cart badge */
.cart-btn{ position:relative; }
.cart-btn__count{
  position:absolute;
  top:1px;
  right:1px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size:10px;
  font-weight:400;
  line-height:16px;
  text-align:center;
  letter-spacing:0;
}

/* language switch — a clearly-labeled pill (not just an icon) so it
   reads unambiguously as a language toggle, per the brief. On mobile
   it sits on its own row (see .header__actions above) as a small,
   compact badge; from the tablet breakpoint up it returns to its
   normal size inline with search/cart. */
.lang-btn{
  display:inline-flex !important;
  align-items:center;
  gap:4px;
  width:auto !important;
  padding:4px 9px !important;
  border:1px solid rgba(246,241,232,.35);
  border-radius:20px;
}
.lang-btn svg{ width:12px; height:12px; }
.lang-btn__label{
  font-family: var(--sans);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.04em;
  white-space:nowrap;
}
html[dir="rtl"] .lang-btn__label{ font-family: "Tajawal", sans-serif; letter-spacing:0; }

@keyframes fadeIn{ to{ opacity:1; } }

/* =========================================================
   HERO COPY
   ========================================================= */

.hero__inner{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  /* reserve room at the base so the CTA never collides with the
     scroll cue sitting fixed to the bottom of the hero */
  padding: 0 var(--gutter) 58px;
}

.hero__copy{
  max-width: 30ch;
  /* pulled slightly above true centre, as in the reference */
  margin-bottom: 4vh;
}

/* ---------- eyebrow ---------- */

.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 20px;
  font-family: var(--sans);
  font-size:11px;
  font-weight:300;
  letter-spacing:.34em;
  text-transform:uppercase;
  color: var(--champagne);
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.5);
}

/* a rule on either side of the word, fading out from the text */
.eyebrow__rule{
  width:26px;
  height:1px;
  background: rgba(227,213,188,.85);
  flex:none;
}
.eyebrow__rule:first-child{
  background: linear-gradient(to right, rgba(227,213,188,0), rgba(227,213,188,.85));
}
.eyebrow__rule:last-child{
  background: linear-gradient(to left, rgba(227,213,188,0), rgba(227,213,188,.85));
}

/* ---------- headline ---------- */

/* Sentence case set in small caps, with a taller capital leading each
   line — the editorial "drop-cap" treatment from the reference. */
.headline{
  margin:0 0 22px;
  font-family: var(--serif);
  font-weight:300;
  font-size: clamp(32px, 9.2vw, 44px);
  line-height:1.1;
  letter-spacing:.01em;
  font-variant-caps: small-caps;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(0,0,0,.3), 0 3px 28px rgba(0,0,0,.42);
}

.headline span{ display:block; white-space:nowrap; }

.headline span::first-letter{
  font-size:1.16em;
}

.headline__accent{
  font-style:italic;
  font-weight:300;
  color: var(--champagne);
  text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 3px 26px rgba(0,0,0,.4);
}

/* ---------- description ---------- */

.hero__text{
  margin:0 0 34px;
  max-width: 34ch;
  font-family: var(--sans);
  font-size:12.5px;
  font-weight:300;
  line-height:1.75;
  letter-spacing:.055em;
  color: rgba(246,241,232,.9);
  text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.45);
  text-wrap: pretty;
}

/* ---------- CTA ---------- */

.cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:172px;
  padding:11px 15px;
  color: var(--champagne);
  font-family: var(--sans);
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;

  /* a clean hairline of gold — no glass fill, matching the reference's
     plain outlined mark */
  border:1px solid rgba(201,180,138,.75);
  background: transparent;
  box-shadow: 0 0 20px rgba(201,180,138,.08);

  transition:
    color .55s var(--ease),
    border-color .55s var(--ease),
    box-shadow .55s var(--ease),
    background-color .55s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* gold wash that rises on hover */
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(
      100deg,
      rgba(201,180,138,.92) 0%,
      rgba(227,213,188,.98) 48%,
      rgba(201,180,138,.92) 100%
    );
  opacity:0;
  transform: translateY(38%);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

/* the travelling gold sheen — always alive, very faint */
.cta__sheen{
  position:absolute;
  top:0;
  left:0;
  width:60%;
  height:100%;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(
      100deg,
      rgba(255,240,205,0)   0%,
      rgba(255,240,205,.16) 42%,
      rgba(255,248,228,.34) 50%,
      rgba(255,240,205,.16) 58%,
      rgba(255,240,205,0)   100%
    );
  animation: ctaSheen 5.5s var(--ease) 2s infinite;
}

@keyframes ctaSheen{
  0%       { transform: translateX(-105%); }
  45%, 100%{ transform: translateX(275%); }
}

.cta__label,
.cta__arrow{ position:relative; }

.cta__arrow{ line-height:0; }
.cta__arrow svg{
  width:18px;
  height:8px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition: transform .45s var(--ease);
}

@media (hover:hover){
  .cta:hover{
    color: var(--ink);
    border-color: rgba(227,213,188,.95);
    background-color: transparent;
    box-shadow:
      inset 0 0 0 rgba(201,180,138,0),
      0 0 34px rgba(201,180,138,.28);
  }
  .cta:hover::before{ opacity:1; transform:none; }
  .cta:hover .cta__sheen{ animation-play-state:paused; opacity:0; }
  .cta:hover .cta__arrow svg{ transform: translateX(5px); }
}
.cta:active{ transform: scale(.985); }
.cta:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }

/* =========================================================
   SCROLL CUE
   ========================================================= */

.hero__scroll{
  position:absolute;
  /* centred via inline margins, not transform: translateX — the
     .reveal fade-in already animates `transform` (its slide-up),
     and an animated shorthand would silently replace this centring */
  left:0;
  right:0;
  margin-inline:auto;
  width:max-content;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color: rgba(246,241,232,.82);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  transition: color .35s var(--ease);
}

.hero__scroll-label{
  font-family: var(--sans);
  font-size:8.5px;
  font-weight:300;
  letter-spacing:.24em;
  text-transform:uppercase;
  /* letter-spacing pads a trailing gap after the last glyph too —
     pull it back so the label sits truly centred, not shifted right */
  margin-right:-.24em;
}

@media (hover:hover){
  .hero__scroll:hover{ color: var(--gold); }
}

.hero__scroll-arrow{
  width:13px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation: scrollBounce 2.2s var(--ease) infinite;
}

@keyframes scrollBounce{
  0%,100%{ transform: translateY(0);   opacity:.55; }
  50%    { transform: translateY(6px); opacity:1;   }
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.reveal{
  opacity:0;
  transform: translateY(14px);
  animation: revealUp 1.15s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}

/* The hero headline is the page's largest text (what Google times as
   "largest contentful paint"), and an element at opacity 0 doesn't count
   as painted — so it keeps the rise-in motion but is never invisible. */
.headline .reveal{
  opacity:1;
  animation-name: revealRise;
}
@keyframes revealRise{
  to{ transform:none; }
}

/* Phones: the decorative shimmer/glow loops (logo sweep, icon glow,
   promo-number glow, footer sheens) repaint the page every frame
   forever, which is what kept a mid-range phone's main thread busy.
   They're switched off below tablet width (named one by one — a blanket
   rule also killed the menu/drawer entrance animations); transform-only motion
   (hero zoom, promo scroll, reveals) is cheap and stays. */
@media (max-width: 899px){
  .brand__shine,
  .icon-btn svg,
  .menu-btn__lines span,
  .promo-bar__num,
  .fmark__shine,
  .fsign__name,
  .dw__title,
  .dw__spark,
  .dw-help__spark{
    animation: none !important;
  }
}

@keyframes revealUp{
  to{ opacity:1; transform:none; }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px){
  :root{ --gutter:18px; --header-top:18px; --logo-w: clamp(110px, 31vw, 130px); }
  /* trim the utilities so the mark keeps real air beside them */
  .header{ column-gap:14px; }
  .icon-btn{ padding:6px; }
  .icon-btn svg{ width:18px; height:18px; }
  .menu-btn__lines{ width:17px; }
  .menu-btn__label{ font-size:9.5px; }
  .menu-btn{ gap:6px; }
  .headline{ font-size: clamp(30px, 9.4vw, 39px); }
  .hero__text{ font-size:11.8px; line-height:1.7; margin-bottom:26px; }
  .cta{ min-width:156px; padding:9px 13px; gap:11px; font-size:8px; }
}

/* short phones — keep everything on one screen */
@media (max-height: 720px) and (max-width: 900px){
  :root{ --header-top:14px; --logo-w: clamp(110px, 31vw, 138px); }
  .hero__copy{ margin-bottom:2vh; }
  .headline{ font-size: clamp(28px, 8.4vw, 37px); margin-bottom:16px; }
  .eyebrow{ margin-bottom:16px; }
  .hero__text{ margin-bottom:26px; line-height:1.7; }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 700px){
  :root{ --gutter:48px; --header-top:30px; --logo-w: clamp(180px, 23vw, 236px); }

  /* enough width now for the reference's single line:
     menu · large mark · utilities */


  .header__actions{ flex-wrap:nowrap; gap:4px; margin-right:-9px; }
  .icon-btn{ padding:9px; }
  .icon-btn svg{ width:23px; height:23px; }
  .menu-btn__lines{ width:24px; }
  .menu-btn__label{ font-size:11px; }
  .menu-btn{ gap:9px; }

  /* room for the lang pill inline again at full size */
  .lang-btn{ order:0; flex-basis:auto; margin:0; gap:5px; padding:6px 10px !important; }
  .lang-btn svg{ width:15px; height:15px; }
  .lang-btn__label{ font-size:10.5px; }

  .hero__copy{ max-width:none; margin-bottom:3vh; }
  .headline{ font-size: clamp(48px, 6.6vw, 66px); }
  .hero__text{ font-size:13.5px; max-width:52ch; line-height:1.8; }
  .eyebrow{ font-size:12px; margin-bottom:26px; }
  .cta{ min-width:198px; padding:13px 18px; font-size:9.5px; gap:18px; letter-spacing:.18em; }

}

/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */

@media (min-width: 1024px){
  :root{ --gutter:64px; --header-top:32px; --logo-w: clamp(212px, 16vw, 262px); }



  .header__actions{ gap:6px; }
  .menu-btn{ gap:10px; }
  .menu-btn__label{ font-size:11.5px; }

  .hero__inner{ align-items:center; min-height:0; }
  .hero__copy{ margin-bottom:2vh; }

  .headline{ font-size: clamp(56px, 4.6vw, 80px); line-height:1.02; margin-bottom:24px; }
  .hero__text{
    font-size:13.5px;
    line-height:1.8;
    max-width:50ch;
    margin-bottom:36px;
  }
  .cta{ min-width:180px; padding:12px 17px; font-size:9px; gap:16px; letter-spacing:.18em; }



  /* side shadow gets softer on wide screens so the footage breathes */
  .hero__vignette{
    background:
      linear-gradient(to right,  rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 16%),
      linear-gradient(to left,   rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 16%),
      linear-gradient(to bottom, rgba(0,0,0,.36) 0%, rgba(0,0,0,0) 20%),
      linear-gradient(to top,    rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 18%);
    box-shadow: inset 0 0 220px 70px rgba(0,0,0,.20);
  }

  .hero__tint{
    background:
      linear-gradient(
        to right,
        rgba(28,20,13,.48) 0%,
        rgba(28,20,13,.22) 46%,
        rgba(28,20,13,.10) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(28,20,13,.34) 0%,
        rgba(28,20,13,.06) 34%,
        rgba(26,18,12,.30) 100%
      );
  }
}

@media (min-width: 1600px){
  :root{ --gutter:88px; --logo-w: clamp(250px, 14vw, 292px); }
  .headline{ font-size: clamp(76px, 4.4vw, 96px); }
}

/* =========================================================
   PAGE TRANSITIONS
   Native cross-document View Transitions: when navigating between
   two pages of this site, the browser keeps the old page on screen
   until the new one is ready, then crossfades (with a slight upward
   settle) instead of flashing to white. Pure CSS, zero JS; browsers
   without support (older Safari/Firefox) simply navigate as before.
   ========================================================= */

@view-transition { navigation: auto; }

::view-transition-old(root){
  animation: ah-page-out .26s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root){
  animation: ah-page-in .46s cubic-bezier(.16,.84,.26,1) both;
}
@keyframes ah-page-out{ to{ opacity:0; } }
@keyframes ah-page-in{ from{ opacity:0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none; }
}

/* =========================================================
   SCROLL REVEAL
   Shared by every page (including checkout/order-confirmation,
   which don't load sections.css) — an element marked data-rv
   fades/slides into view the first time it scrolls into the
   viewport; direction comes from the rv--* modifier class, timing
   from js/site-chrome.js's AH_REVEAL (an IntersectionObserver that
   adds .in once and then stops watching that element). Stagger a
   group via each element's own --rd custom property.
   ========================================================= */

.rv{
  opacity:0;
  transition:
    opacity 1.05s cubic-bezier(.16,.84,.26,1) var(--rd, 0s),
    transform 1.05s cubic-bezier(.16,.84,.26,1) var(--rd, 0s),
    filter 1.05s cubic-bezier(.16,.84,.26,1) var(--rd, 0s);
  will-change: opacity, transform;
}
.rv--up   { transform: translateY(28px); }
.rv--left { transform: translateX(-38px); }
.rv--right{ transform: translateX(38px); }
.rv--zoom { transform: scale(1.06); filter: blur(2px); }

.rv.in{
  opacity:1;
  transform:none;
  filter:none;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .reveal,
  .brand,
  .brand__shine,
  .icon-btn,
  .icon-btn svg,
  .menu-btn__lines span,
  .hero__scroll-arrow{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .hero__video{ animation:none; transform:none; }
  .rv{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  *{ transition-duration:.01ms !important; }
}
/* =========================================================
   ANTIQUE HOME — PROMO BANNER
   Self-contained. Sits above the header, inside the hero.
   Uses the site's own warm neutrals — no gold fill.
   ========================================================= */

.promo-bar{
  position:relative;
  z-index:4;
  overflow:hidden;
  background: linear-gradient(180deg, #23190F, #1C1611 90%);
  border-bottom:1px solid rgba(227,213,188,.16);
}

.promo-bar__text{
  display:flex;
  width:max-content;
  margin:0;
  padding: 10px 0;
  white-space:nowrap;
  font-family: var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:13px;
  letter-spacing:.05em;
  color: rgba(246,241,232,.88);
  animation: promoScroll 34s linear infinite;
}
.promo-bar__text span{
  display:flex;
  align-items:center;
  padding-right:56px;
}
.promo-bar__text span::before{
  content:"";
  width:5px; height:5px;
  margin-right:20px;
  border:1px solid rgba(201,180,138,.7);
  transform: rotate(45deg);
  flex:none;
}

.promo-bar__dot{
  width:4px; height:4px;
  margin:0 22px;
  border:1px solid rgba(201,180,138,.7);
  transform: rotate(45deg);
  flex:none;
}

.promo-bar__num{
  position:relative;
  display:inline-flex;
  margin:0 .22em;
  font-style:normal;
  font-weight:600;
  color: var(--champagne, #E3D5BC);
  animation: promoGlow 3.2s ease-in-out infinite;
}

@keyframes promoScroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

@keyframes promoGlow{
  0%, 100%{ text-shadow: 0 0 0 rgba(227,213,188,0); }
  50%     { text-shadow: 0 0 10px rgba(227,213,188,.55); }
}

@media (min-width: 700px){
  .promo-bar__text{ font-size:13.5px; letter-spacing:.06em; padding:11px 0; }
  .promo-bar__text span{ padding-right:80px; }
  .promo-bar__text span::before{ margin-right:26px; }
}

@media (prefers-reduced-motion: reduce){
  .promo-bar__text,
  .promo-bar__num{ animation:none !important; }
  .promo-bar__text{ width:auto; justify-content:center; }
  .promo-bar__text span:last-child{ display:none; }
}
/* =========================================================
   ANTIQUE HOME — SECTIONS 02 – 05
   Loaded after styles.css. The hero lives entirely in
   styles.css and is never touched from this file.
   ========================================================= */

:root{
  /* light "paper" surfaces used by sections 02 and 04 */
  --paper:      #F4EFE6;
  --paper-2:    #EFE8DC;
  --paper-card: #FBF8F3;

  /* dark surfaces used by sections 03 and 05 */
  --night:      #17120E;
  --night-2:    #1E1813;

  /* ink scale for type on paper */
  --ink-900:    #2B241C;
  --ink-600:    #5B5145;
  --ink-400:    #857A6C;

  /* the working gold — deeper than the hero's, so it holds on cream */
  --gold-deep:  #A98A5C;
  --gold-mid:   #BD9E6A;
  --gold-pale:  #DCC9A6;

  --radius:     14px;
  --shell:      1280px;
}

/* Scroll-reveal (.rv / .rv--up / .rv--left / .rv--right / .rv--zoom)
   now lives in styles.css, since styles.css loads on every page
   (including checkout/order-confirmation, which never loaded this
   file) while this file's own effects elsewhere were homepage-only. */

/* ---------------------------------------------------------
   primitives
   --------------------------------------------------------- */

.kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  font-family: var(--sans);
  font-size:10px;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color: var(--gold-deep);
}
.kicker__rule{
  flex:1 1 auto;
  max-width:64px;
  height:1px;
  background: linear-gradient(to right, currentColor, transparent);
  opacity:.7;
}
.kicker--center{ justify-content:center; }
.kicker--gold{ color: var(--gold-mid); }

/* line · diamond · line */
.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color: var(--gold-deep);
}
.ornament i{
  width:34px;
  height:1px;
  background: currentColor;
  opacity:.5;
}
.ornament b{
  width:6px;
  height:6px;
  border:1px solid currentColor;
  transform: rotate(45deg);
}
.ornament--dark{ color: var(--gold-mid); }
.ornament--dark i{ width:56px; }

.rule-sm{
  display:block;
  width:44px;
  height:1px;
  margin:12px auto 0;
  background: var(--gold-deep);
  opacity:.55;
}

/* text link with a trailing arrow and an underline that retracts */
.link-arrow{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding-bottom:11px;
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--ink-900);
}
.link-arrow::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:1px;
  background: currentColor;
  opacity:.45;
  transform-origin:left center;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.link-arrow svg{
  width:22px; height:10px;
  fill:none; stroke:currentColor;
  stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .45s var(--ease);
}
.link-arrow--gold{ color: var(--gold-mid); }

@media (hover:hover){
  .link-arrow:hover::after{ transform: scaleX(.45); opacity:1; }
  .link-arrow:hover svg{ transform: translateX(6px); }
}

/* filled gold button */
.btn-gold{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:13px 20px;
  border-radius:3px;
  background: linear-gradient(100deg, #B6975F, #C6AC78 52%, #B6975F);
  background-size:200% 100%;
  color:#221B12;
  font-family: var(--sans);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  transition: background-position .6s var(--ease), transform .3s var(--ease), box-shadow .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@media (hover:hover){
  .btn-gold:hover{
    background-position:100% 0;
    box-shadow: 0 6px 20px rgba(169,138,92,.32);
    transform: translateY(-1px);
  }
}
.btn-gold:active{ transform: scale(.97); }

/* outlined gold pill (dark surfaces) */
.btn-outline{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:16px;
  padding:14px 26px;
  border:1px solid rgba(189,158,106,.6);
  border-radius:999px;
  color: var(--gold-pale);
  font-family: var(--sans);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn-outline::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(100deg, #B6975F, #D3BC8E 52%, #B6975F);
  transform: translateY(102%);
  transition: transform .55s var(--ease);
}
.btn-outline svg{
  width:20px; height:9px;
  fill:none; stroke:currentColor;
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .45s var(--ease);
}
@media (hover:hover){
  .btn-outline:hover{ color:#221B12; border-color:#D3BC8E; }
  .btn-outline:hover::before{ transform:none; }
  .btn-outline:hover svg{ transform: translateX(5px); }
}

/* solid brown button (section 04) */
.btn-solid{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:15px 30px;
  background: #8A6E48;
  color: #FBF6EC;
  font-family: var(--sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  transition: transform .35s var(--ease), box-shadow .45s var(--ease);
}
.btn-solid::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:#6F5735;
  transform: translateY(102%);
  transition: transform .5s var(--ease);
}
.btn-solid svg{
  width:20px; height:9px;
  fill:none; stroke:currentColor;
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .45s var(--ease);
}
@media (hover:hover){
  .btn-solid:hover{ box-shadow: 0 10px 26px rgba(58,42,24,.26); }
  .btn-solid:hover::before{ transform:none; }
  .btn-solid:hover svg{ transform: translateX(5px); }
}
.btn-solid:active{ transform: scale(.98); }

/* heart / save */
.fav{
  appearance:none;
  border:0;
  cursor:pointer;
  flex:none;
  display:grid;
  place-items:center;
  width:40px; height:40px;
  border-radius:50%;
  background: var(--paper-card);
  box-shadow: 0 2px 10px rgba(43,36,28,.10);
  color: var(--ink-400);
  transition: color .35s var(--ease), transform .35s var(--ease), background-color .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fav svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linejoin:round;
  transition: fill .35s var(--ease);
}
.fav--sm{ width:28px; height:28px; }
.fav--sm svg{ width:13px; height:13px; }

@media (hover:hover){
  .fav:hover{ color:#B4744F; transform: scale(1.1); }
}
.fav:active{ transform: scale(.9); }
.fav[aria-pressed="true"]{ color:#B4744F; }
.fav[aria-pressed="true"] svg{ fill: currentColor; }
.fav.pop{ animation: favPop .45s var(--ease); }
@keyframes favPop{
  0%  { transform: scale(1); }
  45% { transform: scale(1.28); }
  100%{ transform: scale(1); }
}


/* =========================================================
   02 · THE EDIT
   ========================================================= */

.edit{
  background: var(--paper);
  color: var(--ink-900);
  overflow:hidden;
}

.edit__inner{
  max-width: var(--shell);
  margin-inline:auto;
  display:grid;
  /* the laptop composition, held at every width: copy left, photo right */
  grid-template-columns: 1.08fr 1fr;
  align-items:stretch;
}

.edit__copy{
  padding: 34px 12px 34px var(--gutter);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.edit__title{
  margin:0 0 20px;
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(38px, 11vw, 52px);
  line-height:1.06;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--ink-900);
}
.edit__title span{ display:block; }
.edit__title-accent{ color: var(--gold-deep); }

.edit__text{
  margin:0 0 26px;
  font-family: var(--sans);
  font-size:13px;
  font-weight:300;
  line-height:1.85;
  letter-spacing:.02em;
  color: var(--ink-600);
}

.edit__media{
  margin:0;
  position:relative;
  overflow:hidden;
}
.edit__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
  transition: transform 1.4s var(--ease);
}
@media (hover:hover){
  .edit__media:hover img{ transform: scale(1.05); }
}


/* =========================================================
   02a · SITE-WIDE SALE BANNER
   ========================================================= */

.sale-banner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:22px var(--gutter) 26px;
  background: linear-gradient(100deg, #5C1810 0%, #7A2318 50%, #5C1810 100%);
  color:#F3E9DD;
  text-align:center;
  overflow:hidden;
}
.sale-banner__eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(243,233,221,.75);
}
.sale-banner__rule{
  width:34px; height:1px;
  background: rgba(243,233,221,.4);
}
.sale-banner__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.sale-banner__diamond{
  width:7px; height:7px;
  border: 1px solid rgba(217,174,99,.65);
  transform: rotate(45deg);
  flex:none;
}
.sale-banner__line{
  width:44px; height:1px;
  background: rgba(217,174,99,.4);
}
.sale-banner__pct{
  font-family: var(--serif);
  font-weight:600;
  font-size: clamp(15px, 4.6vw, 26px);
  letter-spacing:.01em;
  white-space:nowrap;
}
.sale-banner__pct b{
  color:#D9AE63;
  font-weight:700;
}
.sale-banner__btn{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 26px;
  border:1px solid rgba(217,174,99,.65);
  color:#F3E9DD;
  font-family: var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.sale-banner__btn svg{
  width:16px; height:8px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition: transform .3s var(--ease);
}
@media (hover:hover){
  .sale-banner__btn:hover{
    background: rgba(217,174,99,.14);
    border-color:#D9AE63;
  }
  .sale-banner__btn:hover svg{ transform: translateX(4px); }
}

@media (min-width: 700px){
  .sale-banner{ padding:28px var(--gutter) 32px; gap:14px; }
  .sale-banner__pct{ font-size: clamp(20px, 2.8vw, 34px); }
  .sale-banner__row{ gap:22px; }
  .sale-banner__line{ width:64px; }
}

@media (min-width: 900px){
  .sale-banner__inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:32px;
  }
  .sale-banner__btn{ margin-top:0; }
}

/* =========================================================
   02b · NEW ARRIVALS
   ========================================================= */

.arrivals{
  background: var(--paper-2);
  color: var(--ink-900);
  padding: 44px 0 54px;
  overflow:hidden;
}

.arrivals__head{
  padding-inline: var(--gutter);
  max-width: var(--shell);
  margin-inline:auto;
}
.arrivals__head .kicker{
  color: var(--gold-deep);
  margin-bottom:12px;
  letter-spacing:.4em;
}

.arrivals__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:14px;
}

/* title centred, pager pinned right — as on the laptop */
.arrivals__bar{ position:relative; justify-content:center; }
.arrivals__bar .rail-nav{
  position:absolute;
  right:0; top:50%;
  transform: translateY(-50%);
}

.arrivals__title{
  margin:0;
  white-space:nowrap;
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(22px, 6.8vw, 38px);
  line-height:1.1;
  letter-spacing:.012em;
  color: var(--ink-900);
}

.rail-nav{ display:flex; gap:10px; flex:none; }

.rail-btn{
  appearance:none;
  cursor:pointer;
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(169,138,92,.5);
  background:transparent;
  color: var(--gold-deep);
  transition: background-color .4s var(--ease), color .4s var(--ease),
              transform .3s var(--ease), opacity .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.rail-btn svg{
  width:17px; height:12px;
  fill:none; stroke:currentColor;
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
}
@media (hover:hover){
  .rail-btn:hover{ background: var(--gold-deep); color: var(--paper); }
}
.rail-btn:active{ transform: scale(.9); }
.rail-btn[disabled]{ opacity:.28; pointer-events:none; }
/* nothing to page through once every card fits — drop the control */
.rail-nav.idle{ display:none; }

/* ---------- featured product ---------- */

.feat{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  align-items:center;
  margin: 22px var(--gutter) 18px;
  border-radius: var(--radius);
  cursor:pointer;
  background: var(--paper-card);
  overflow:hidden;
  box-shadow: 0 10px 34px rgba(43,36,28,.07);
}

.feat__body{
  padding: 16px 10px 16px 14px;
  order:1;
}

.feat__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.feat__no{
  display:flex;
  align-items:center;
  gap:12px;
  font-family: var(--serif);
  font-size:19px;
  font-weight:400;
  letter-spacing:.06em;
  color: var(--ink-600);
}
.feat__no i{
  display:block;
  width:52px; height:1px;
  background: rgba(169,138,92,.55);
}

.pill{
  padding:6px 14px;
  border:1px solid rgba(169,138,92,.55);
  border-radius:999px;
  font-family: var(--sans);
  font-size:8.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--gold-deep);
}

.feat__name{
  margin:0 0 10px;
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(22px, 6.4vw, 30px);
  line-height:1.16;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--ink-900);
}

.feat__desc{
  margin:0 0 14px;
  max-width:26ch;
  font-family: var(--sans);
  font-size:12px;
  font-weight:300;
  line-height:1.7;
  color: var(--ink-600);
}

.feat__price{
  margin:0 0 18px;
  font-family: var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  color: var(--ink-900);
}

.feat__actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.feat__media{
  margin:0;
  order:2;
  align-self:stretch;
  min-height:186px;
  overflow:hidden;
  /* the arc that carves the photo away from the card */
  border-radius: 34% 0 0 34% / 50% 0 0 50%;
}
.feat__media img{
  width:100%; height:100%;
  object-fit:contain;
  --zoom: 1;
  transform: scale(var(--zoom));
  transition: transform 1.4s var(--ease);
}
@media (hover:hover){
  .feat:hover .feat__media img{ transform: scale(calc(var(--zoom) * 1.06)); }
}

/* ---------- product rail ----------
   Two rows that scroll sideways, so the reference's stacked card
   grid survives on a phone without shrinking the type to nothing. */

.rail{
  display:grid;
  /* column flow fills the two rows so the cards read 02 03 04 / 05 06 07 */
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-auto-columns: minmax(0,1fr);
  gap:8px;
  padding: 4px var(--gutter) 8px;
  max-width: var(--shell);
  margin-inline:auto;
}

.card{
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  border-radius: var(--radius);
  background: var(--paper-card);
  overflow:hidden;
  cursor:pointer;
  box-shadow: 0 6px 20px rgba(43,36,28,.06);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
@media (hover:hover){
  .card:hover{ transform: translateY(-4px); box-shadow: 0 14px 32px rgba(43,36,28,.12); }
}

.card__media{
  position:relative;
  margin:0;
  aspect-ratio: 1 / 1;
  overflow:hidden;
}
.card__media img{
  width:100%; height:100%;
  object-fit:contain;
  --zoom: 1;
  transform: scale(var(--zoom));
  transition: transform 1.2s var(--ease);
}
@media (hover:hover){
  .card:hover .card__media img{ transform: scale(calc(var(--zoom) * 1.07)); }
}

.card__no{
  position:absolute;
  top:9px; left:11px;
  font-family: var(--serif);
  font-size:15px;
  letter-spacing:.06em;
  color: var(--ink-600);
  text-shadow: 0 1px 6px rgba(255,255,255,.55);
}

.card__media .fav{
  position:absolute;
  top:8px; right:8px;
}

.card__body{
  position:relative;
  padding: 12px 12px 14px;
}

.card__name{
  margin:0 0 6px;
  font-family: var(--serif);
  font-weight:400;
  font-size:14.5px;
  line-height:1.25;
  letter-spacing:.01em;
  color: var(--ink-900);
}

.card__cat{
  margin:0 0 6px;
  font-family: var(--sans);
  font-size:8px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--ink-400);
}

.card__price{
  margin:0;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.04em;
  color: var(--ink-900);
}

/* Add to Cart bar — same treatment as .pcard__add on the shop grid:
   sits over the image, full width, reveals on hover on desktop,
   always visible on touch. */
.add{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px 8px 11px;
  display:flex; align-items:center; justify-content:center;
  appearance:none;
  border:0;
  border-top:1px solid rgba(201,180,138,.5);
  cursor:pointer;
  background: linear-gradient(180deg, rgba(20,15,9,.86), rgba(12,9,5,.94));
  color: var(--gold, #C9B48A);
  font-family: var(--serif, var(--sans));
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:0;
  transform: translateY(100%);
  transition: background .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
  overflow:hidden;
}
.add::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(201,180,138,.28) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (hover:hover){
  .add:hover::after{ transform: translateX(120%); transition: transform .9s var(--ease); }
  .add:hover{ color:#fff; }
}
/* touch devices: tapping the card once reveals the bar instead of
   navigating straight to the product; a second tap adds to cart. */
.card.is-touched .add{ opacity:1; transform: translateY(0); }
@media (hover:hover){
  .card:hover .add{ opacity:1; transform: translateY(0); }
  .add:hover{ background: rgba(20,15,9,.92); }
}
.add.pop{ animation: favPop .4s var(--ease); }


/* =========================================================
   03 · EXPLORE BY CATEGORY
   ========================================================= */

.cats{
  position:relative;
  background: var(--night);
  color: var(--cream);
  padding-bottom: 46px;
  overflow:hidden;
}

.cats__head{
  position:relative;
  padding: 58px var(--gutter) 46px;
  text-align:center;
  isolation:isolate;
}

.cats__bg{
  position:absolute;
  inset:0;
  z-index:-1;
}
.cats__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.cats__bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(23,18,14,.72) 0%,
      rgba(23,18,14,.60) 45%,
      rgba(23,18,14,.88) 88%,
      var(--night) 100%);
}

.cats__headInner{
  max-width: 640px;
  margin-inline:auto;
}
.cats__head .kicker{ letter-spacing:.4em; margin-bottom:16px; }

.cats__title{
  margin:18px 0 16px;
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(30px, 8.6vw, 44px);
  line-height:1.14;
  letter-spacing:.045em;
  text-transform:uppercase;
  color: var(--cream);
}
.cats__title span{ display:block; }
.cats__title-accent{ color: var(--gold-pale); }

.cats__text{
  margin:0 0 22px;
  font-family: var(--sans);
  font-size:12px;
  font-weight:300;
  line-height:1.8;
  letter-spacing:.03em;
  color: rgba(246,241,232,.72);
}

/* ---------- the strips ---------- */

.cats__rows{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-inline: var(--gutter);
  max-width: var(--shell);
  margin-inline:auto;
}

.cats__row{
  display:grid;
  border:1px solid rgba(189,158,106,.22);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--night-2);
}
.cats__row--5{ grid-template-columns: repeat(5, 1fr); }
.cats__row--4{ grid-template-columns: repeat(4, 1fr); }

.cat{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding: 14px 3px;
  text-align:center;
  border-right:1px solid rgba(189,158,106,.16);
  overflow:hidden;
  isolation:isolate;
  transition: background-color .5s var(--ease);
}
.cat:last-child{ border-right:0; }

.cat__no{
  font-family: var(--serif);
  font-size: clamp(10px, 2.6vw, 15px);
  letter-spacing:.1em;
  color: var(--gold-pale);
  opacity:.85;
}

.cat__name{
  display:block;
  font-family: var(--serif);
  font-size: clamp(8.5px, 2.5vw, 14px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--cream);
}
.cat__name small{
  display:block;
  font-size:.82em;
  letter-spacing:.03em;
  opacity:.9;
}
/* two lines' worth, so a long name never shortens its neighbour's photo */
.cat__name{ min-height: 2.44em; }

.cat__media{
  display:block;
  width:100%;
  flex:1 1 auto;
  min-height: clamp(92px, 30vw, 190px);
  margin-top:6px;
  overflow:hidden;
}
.cat__media img{
  width:100%; height:100%;
  object-fit:cover;
  --cat-zoom: 1;
  transform: scale(var(--cat-zoom));
  transition: transform 1.1s var(--ease);
}

.cat__go{
  display:grid;
  place-items:center;
  width: clamp(22px, 6.4vw, 34px);
  height: clamp(22px, 6.4vw, 34px);
  margin-top:10px;
  border:1px solid rgba(220,201,166,.55);
  border-radius:50%;
  color: var(--gold-pale);
  transition: background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.cat__go svg{
  width:52%; height:auto;
  fill:none; stroke:currentColor;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}

@media (hover:hover){
  .cat:hover{ background: rgba(189,158,106,.08); }
  .cat:hover .cat__media img{ transform: scale(calc(var(--cat-zoom) * 1.09)); }
  .cat:hover .cat__go{ background: var(--gold-pale); color: var(--night); transform: translateX(3px); }
}

/* ---------- category tiles: 3 x 3 square gallery, photo fills the tile ---------- */
.cats__rows{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.8vw, 22px);
}
.cats__row{ display:contents; }
.cats__rows .cat{
  aspect-ratio: 1 / 1;
  justify-content:flex-end;
  align-items:flex-start;
  gap:0;
  padding: clamp(8px, 2.2vw, 26px);
  text-align:left;
  border:0;
  border-radius: var(--radius);
  background: var(--night-2);
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.55);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.cats__rows .cat__media{
  position:absolute; inset:0;
  z-index:-3;
  min-height:0;
  margin:0;
}
.cats__rows .cat__media img{ transition: transform 1.6s var(--ease), filter 1s var(--ease); filter: saturate(.92) contrast(1.03); }
/* deep gradient so the name always reads, whatever the photo */
.cats__rows .cat::after{
  content:"";
  position:absolute; inset:0;
  z-index:-2;
  background:
    linear-gradient(to top, rgba(12,10,8,.86) 0%, rgba(12,10,8,.38) 34%, rgba(12,10,8,0) 62%),
    linear-gradient(to bottom, rgba(12,10,8,.35) 0%, rgba(12,10,8,0) 22%);
  pointer-events:none;
}
/* thin gold frame inset from the edge, brightens on hover */
.cats__rows .cat::before{
  content:"";
  position:absolute;
  inset: clamp(5px, 1.2vw, 12px);
  z-index:-1;
  border:1px solid rgba(220,201,166,.38);
  border-radius: calc(var(--radius) * .6);
  pointer-events:none;
  transition: inset .7s var(--ease), border-color .7s var(--ease);
}
.cats__rows .cat__no{
  position:absolute;
  top: clamp(12px, 2.8vw, 30px);
  left: clamp(12px, 2.8vw, 30px);
  font-size: clamp(10px, 1.6vw, 17px);
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.cats__rows .cat__name{
  min-height:0;
  font-size: clamp(11px, 2.7vw, 26px);
  line-height:1.15;
  letter-spacing:.07em;
  margin: 0 0 clamp(4px, 1vw, 10px);
  padding-inline: clamp(4px, 1vw, 10px);
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}
.cats__rows .cat__name small{ font-size:.72em; opacity:.85; }
.cats__rows .cat__go{
  position:absolute;
  right: clamp(12px, 2.8vw, 30px);
  bottom: clamp(12px, 2.8vw, 30px);
  margin:0;
  width: clamp(20px, 3.6vw, 40px);
  height: clamp(20px, 3.6vw, 40px);
  background: rgba(12,10,8,.35);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
@media (max-width: 560px){
  .cats__rows .cat__go{ display:none; }
  .cats__rows .cat__no{ display:none; }
  .cats__rows .cat::before{ border-color: rgba(220,201,166,.3); }
}
@media (hover:hover){
  .cats__rows .cat:hover{ transform: translateY(-6px); box-shadow: 0 24px 44px -18px rgba(0,0,0,.7); background: var(--night-2); }
  .cats__rows .cat:hover .cat__media img{ filter: saturate(1.08) contrast(1.05); }
  .cats__rows .cat:hover::before{ inset: clamp(8px, 1.6vw, 16px); border-color: rgba(232,195,116,.85); }
}
@media (prefers-reduced-motion: reduce){
  .cats__rows .cat, .cats__rows .cat::before, .cats__rows .cat__media img{ transition:none; }
}

/* ---------- can't find ---------- */

.help{
  position:relative;
  margin: 22px auto 0;
  max-width: var(--shell);
  margin-inline: var(--gutter);
  padding: 30px 24px 32px;
  border:1px solid rgba(189,158,106,.28);
  border-radius: var(--radius);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.help__bg{ position:absolute; inset:0; z-index:-1; }
.help__bg img{ width:100%; height:100%; object-fit:cover; }
.help__bg::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(14,11,8,.52);
}

.monogram{
  position:relative;
  display:grid;
  place-items:center;
  width:74px; height:74px;
  flex:none;
  color: var(--gold-pale);
}
.monogram svg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.1;
  opacity:.75;
}
.monogram svg path + path{ opacity:.5; }
.monogram em{
  font-family: var(--serif);
  font-style:normal;
  font-size:20px;
  letter-spacing:.04em;
  color: var(--gold-pale);
}

.help__title{
  margin:0 0 10px;
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(19px, 5.4vw, 27px);
  line-height:1.3;
  letter-spacing:.045em;
  text-transform:uppercase;
  color: var(--cream);
}
.help__text{
  margin:0;
  font-family: var(--sans);
  font-size:12px;
  font-weight:300;
  line-height:1.75;
  color: rgba(246,241,232,.72);
}


/* =========================================================
   04 · OUR STORY
   ========================================================= */

.story{
  position:relative;
  isolation:isolate;
  background: var(--paper);
  overflow:hidden;
  /* the copy only fills the top half — the rest is the photograph */
  min-height: clamp(620px, 196vw, 900px);
}

.story__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  display:block;
}
.story__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}

.story__panel{
  position:relative;
  padding: 56px var(--gutter) 62px;
  text-align:center;
  /* a soft cream veil so the type reads over the photograph */
  background:
    linear-gradient(to bottom,
      rgba(246,241,232,.95) 0%,
      rgba(246,241,232,.91) 46%,
      rgba(246,241,232,.72) 76%,
      rgba(246,241,232,0) 100%);
}

.story__mark{
  display:grid;
  place-items:center;
  margin: 0 auto 16px;
  width:38px; height:38px;
  color: var(--gold-deep);
}
.story__mark svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.2; stroke-linejoin:round;
}

.story__panel .kicker{
  justify-content:center;
  margin-bottom:0;
  letter-spacing:.36em;
  color: var(--gold-deep);
}

.story__title{
  margin:22px 0 0;
  font-family: var(--serif);
  font-weight:400;
  line-height:1.02;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--ink-900);
}
.story__title span{ display:block; }
.story__title > span:first-child{ font-size: clamp(26px, 7.4vw, 38px); }
.story__title-xl{ font-size: clamp(40px, 12.4vw, 62px); letter-spacing:.03em; }
.story__title-accent{
  font-size: clamp(30px, 9.2vw, 48px);
  color: var(--gold-deep);
}

.story__panel .ornament{ margin: 20px 0 18px; }

.story__text{
  margin:0 auto 26px;
  max-width:34ch;
  font-family: var(--serif);
  font-size: clamp(14px, 3.9vw, 17px);
  font-weight:400;
  line-height:1.65;
  color: var(--ink-600);
}


/* =========================================================
   05 · FOLLOW OUR JOURNEY
   ========================================================= */

.journey{
  background: var(--night);
  color: var(--cream);
  padding-bottom: 46px;
  overflow:hidden;
}

.journey__top{
  position:relative;
  display:grid;
  grid-template-columns: 1fr;
  gap:26px;
  padding: 52px var(--gutter) 40px;
  max-width: var(--shell);
  margin-inline:auto;
}

.journey__copy .kicker{ color: var(--gold-mid); letter-spacing:.32em; }

.journey__title{
  margin:0 0 20px;
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(34px, 10.4vw, 50px);
  line-height:1.08;
  letter-spacing:.035em;
  text-transform:uppercase;
  color: var(--cream);
}
.journey__title span{ display:block; }
.journey__title-accent{ color: var(--gold-pale); }

.journey__text{
  margin:0 0 26px;
  font-family: var(--sans);
  font-size:12.5px;
  font-weight:300;
  line-height:1.85;
  letter-spacing:.02em;
  color: rgba(246,241,232,.76);
}

.ig-handle{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 16px 8px 8px;
  border:1px solid rgba(189,158,106,.34);
  border-radius:999px;
  transition: border-color .45s var(--ease), background-color .45s var(--ease), transform .35s var(--ease);
}
.ig-handle__badge{
  display:grid; place-items:center;
  width:30px; height:30px;
  flex:none;
}
.ig-handle__badge svg{ width:100%; height:100%; }
.ig-handle__name{
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.08em;
  color: var(--cream);
}
.ig-handle__arrow{
  width:19px; height:9px;
  fill:none; stroke: var(--gold-pale);
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .45s var(--ease);
}
@media (hover:hover){
  .ig-handle:hover{ border-color: rgba(220,201,166,.7); background: rgba(189,158,106,.1); }
  .ig-handle:hover .ig-handle__arrow{ transform: translateX(5px); }
}
.ig-handle:active{ transform: scale(.97); }

/* ---------- video ---------- */

.journey__video{
  margin:0;
  position:relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.4);
}
.journey__video video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.journey__video::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 60px rgba(0,0,0,.32);
}

/* ---------- instagram grid ---------- */

.ig{
  padding: 6px var(--gutter) 34px;
  max-width: var(--shell);
  margin-inline:auto;
}

.ig__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:22px;
  border-top:1px solid rgba(189,158,106,.18);
  margin-bottom:18px;
}
.ig__head .kicker{ margin:0; flex:1 1 auto; }
.ig__head .link-arrow{ padding-bottom:0; font-size:9.5px; }
.ig__head .link-arrow::after{ display:none; }

.ig__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.ig__tile{
  display:block;
  aspect-ratio: 1 / 1;
  border-radius:4px;
  overflow:hidden;
  position:relative;
}
.ig__tile img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform 1s var(--ease);
}
.ig__tile::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(23,18,14,.18);
  transition: opacity .5s var(--ease);
}
@media (hover:hover){
  .ig__tile:hover img{ transform: scale(1.09); }
  .ig__tile:hover::after{ opacity:0; }
}

/* ---------- trust row ---------- */

.trust{
  list-style:none;
  margin:0 auto;
  padding: 30px var(--gutter) 34px;
  max-width: var(--shell);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top:1px solid rgba(189,158,106,.18);
}

.trust__item{
  position:relative;
  padding: 0 8px;
  text-align:center;
  border-right:1px solid rgba(189,158,106,.16);
}
.trust__item:last-child{ border-right:0; }

.trust__icon{
  display:grid; place-items:center;
  width: clamp(26px, 7vw, 34px);
  height: clamp(26px, 7vw, 34px);
  margin: 0 auto 12px;
  color: var(--gold-mid);
}
.trust__icon svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
}

.trust__title{
  margin:0 0 12px;
  font-family: var(--sans);
  font-size: clamp(8px, 2.3vw, 10px);
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.5;
  text-transform:uppercase;
  color: var(--cream);
}

.trust__text{
  margin:0;
  font-family: var(--sans);
  font-size: clamp(8px, 2.2vw, 10px);
  font-weight:300;
  line-height:1.7;
  color: rgba(246,241,232,.6);
}

/* ---------- stay inspired ---------- */

.inspire{
  position:relative;
  margin-inline: var(--gutter);
  max-width: var(--shell);
  border:1px solid rgba(189,158,106,.24);
  border-radius: var(--radius);
  overflow:hidden;
  isolation:isolate;
}
.inspire__bg{ position:absolute; inset:0; z-index:-1; }
.inspire__bg img{ width:100%; height:100%; object-fit:cover; object-position:left center; }
.inspire__bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(15,11,8,.60) 0%, rgba(15,11,8,.78) 46%, rgba(15,11,8,.86) 100%);
}

.inspire__copy{
  padding: 30px 20px 32px;
  margin-left: 30%;
}

.inspire__title{
  margin:0 0 10px;
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(20px, 5.6vw, 28px);
  letter-spacing:.05em;
  text-transform:uppercase;
  color: var(--cream);
}
.inspire__text{
  margin:0 0 18px;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:300;
  line-height:1.7;
  color: rgba(246,241,232,.72);
}

.inspire__form{
  display:flex;
  align-items:stretch;
  max-width:400px;
}
/* below ~560px the field and the button each take a full row, otherwise
   the placeholder is squeezed down to a couple of characters */
@media (max-width: 559px){
  .inspire__form{ flex-direction:column; gap:10px; }
  .inspire__field{ border-right:1px solid rgba(189,158,106,.36); }
  .inspire__submit{ padding:12px; }
}
.inspire__field{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  background: rgba(246,241,232,.06);
  border:1px solid rgba(189,158,106,.36);
  border-right:0;
}
.inspire__icon{
  width:15px; height:15px;
  flex:none;
  margin-left:12px;
  fill:none; stroke: var(--gold-mid);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.inspire__form input{
  flex:1 1 auto;
  min-width:0;
  appearance:none;
  border:0;
  background:transparent;
  padding: 12px;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:300;
  letter-spacing:.04em;
  color: var(--cream);
}
.inspire__form input::placeholder{ color: rgba(246,241,232,.42); }
.inspire__form input:focus{ outline:none; }
.inspire__field:focus-within{ border-color: rgba(220,201,166,.75); }

.inspire__submit{
  appearance:none;
  border:0;
  cursor:pointer;
  flex:none;
  padding: 12px 18px;
  background: linear-gradient(100deg, #B6975F, #C9AF7C 52%, #B6975F);
  background-size:200% 100%;
  color:#221B12;
  font-family: var(--sans);
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  transition: background-position .6s var(--ease), transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@media (hover:hover){
  .inspire__submit:hover{ background-position:100% 0; }
}
.inspire__submit:active{ transform: scale(.97); }

.inspire__note{
  margin:10px 0 0;
  min-height:14px;
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:300;
  letter-spacing:.04em;
  color: var(--gold-pale);
}
.inspire__note.err{ color:#D9906F; }


/* =========================================================
   02 · PHONE SCALE
   The laptop composition is kept intact on a phone, so every
   column is narrow — the type is stepped down to match.
   ========================================================= */

@media (max-width: 699px){

  /* ---- the edit ---- */
  .edit__title{ font-size: clamp(19px, 6.1vw, 26px); letter-spacing:.03em; }
  .edit__text{
    font-size:9.5px;
    line-height:1.7;
    letter-spacing:.01em;
    margin-bottom:16px;
  }
  .edit__text br{ display:none; }           /* let it wrap to the column */
  .edit .kicker{ font-size:7.5px; letter-spacing:.24em; gap:8px; margin-bottom:10px; }
  .edit .kicker__rule{ max-width:26px; }
  .edit .link-arrow{ font-size:7.5px; letter-spacing:.14em; gap:7px; padding-bottom:8px; }
  .edit .link-arrow svg{ width:15px; height:7px; }

  /* ---- arrivals head ---- */
  .arrivals__head .kicker{ font-size:8px; letter-spacing:.3em; }
  .arrivals__title{ font-size: clamp(20px, 6.4vw, 28px); }

  /* ---- featured card ---- */
  .feat__top{ margin-bottom:10px; gap:6px; }
  .feat__no{ font-size:13px; gap:6px; }
  .feat__no i{ width:18px; }
  .pill{ font-size:6px; padding:3px 7px; letter-spacing:.12em; }
  .feat__name{ font-size: clamp(14px, 4.4vw, 19px); margin-bottom:6px; letter-spacing:.02em; }
  .feat__desc{ font-size:8.5px; line-height:1.5; margin-bottom:8px; }
  .feat__price{ font-size:10.5px; margin-bottom:11px; }
  .feat__actions{ gap:7px; }
  .feat .btn-gold{ font-size:6.8px; padding:8px 9px; letter-spacing:.1em; }
  .feat .fav{ width:26px; height:26px; }
  .feat .fav svg{ width:12px; height:12px; }

  /* ---- product cards ----
     2 columns instead of the base 3 so cards read bigger on phones.
     grid-auto-flow must switch to row here: the base rail uses
     column-flow + grid-auto-columns to lay 6 cards into 2 explicit rows,
     which auto-generates a 3rd (implicit) equal-width column regardless
     of grid-template-columns — so column-flow can't be shrunk to 2 wide
     without also fixing the flow direction. */
  .rail{
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-auto-rows: auto;
    gap:12px;
  }
  .card__body{ padding: 9px 9px 10px; }
  .card__name{ font-size:11px; line-height:1.25; margin-bottom:4px; }
  .card__cat{ font-size:7px; letter-spacing:.12em; margin-bottom:4px; }
  .card__price{ font-size:10px; }
  .card__no{ font-size:11px; top:4px; left:6px; }
  .card__media .fav{ top:4px; right:4px; }
  .fav--sm{ width:22px; height:22px; }
  .fav--sm svg{ width:10.5px; height:10.5px; }
  .add{ padding:9px 7px 8px; font-size:9.5px; letter-spacing:.16em; }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 700px){

  .edit__inner{
    grid-template-columns: 1fr 1fr;
  }
  .edit__copy{ padding: 70px 0 70px var(--gutter); }
  .edit__media{ aspect-ratio: 4 / 5; }

  .arrivals{ padding: 62px 0 70px; }

  .feat{
    grid-template-columns: 1fr 1.05fr;
    margin: 34px var(--gutter) 26px;
    align-items:center;
  }
  .feat__body{ order:1; padding: 34px 30px; }
  .feat__media{
    order:2;
    aspect-ratio: auto;
    align-self:stretch;
    min-height:330px;
    /* the arc that carves the photo away from the card, as in the reference */
    border-radius: 34% 0 0 34% / 50% 0 0 50%;
  }
  .feat__desc{ font-size:12.5px; }

  .rail{
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: repeat(3, minmax(0,1fr));
    overflow:visible;
    gap:18px;
  }
  .card__body{ padding: 14px; }
  .card__name{ font-size:15.5px; }

  .cats__head{ padding: 84px var(--gutter) 60px; }
  .cat{ padding: 20px 8px; gap:7px; }

  .help{
    flex-direction:row;
    text-align:left;
    gap:26px;
    padding: 34px 34px;
    align-items:center;
  }
  .help__copy{ flex:1 1 auto; }

  .story__panel{ padding: 84px var(--gutter) 96px; }

  .journey__top{
    grid-template-columns: 1fr 1fr;
    align-items:center;
    gap:34px;
    padding: 78px var(--gutter) 54px;
  }
  .journey__video{ aspect-ratio: 4 / 3; }

  .ig__grid{ gap:14px; }

  .trust__item{ padding: 0 16px; }

  .inspire__copy{ padding: 44px 34px; margin-left: 40%; }
  .inspire__form{ max-width:440px; }
}


/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */

@media (min-width: 1024px){

  .edit__copy{ padding: 96px 70px 96px var(--gutter); }
  .edit__title{ font-size: clamp(52px, 4.6vw, 66px); }
  .edit__text{ font-size:14px; max-width:34ch; }
  .edit__media{ aspect-ratio: 1 / 1; }

  .arrivals{ padding: 84px 0 92px; }
  .arrivals__title{ font-size: clamp(38px, 3.4vw, 48px); }
  .rail-btn{ width:44px; height:44px; }

  .feat{
    margin: 42px auto 32px;
    max-width: var(--shell);
    width: calc(100% - var(--gutter) * 2);
  }
  .feat__body{ padding: 52px 48px; }
  .feat__media{ min-height:420px; }
  .feat__name{ font-size: clamp(30px, 2.5vw, 36px); }
  .feat__desc{ font-size:13px; max-width:30ch; }
  .feat__price{ font-size:15px; }

  .rail{
    gap:20px;
    padding-inline: var(--gutter);
    max-width: var(--shell);
    margin-inline:auto;
  }
  .card__body{ padding: 16px 16px 18px; }
  .card__name{ font-size:16px; }
  .card__cat{ font-size:8.5px; }
  .card__price{ font-size:12.5px; }
  .fav--sm{ width:32px; height:32px; }
  .fav--sm svg{ width:15px; height:15px; }
  .card__no{ font-size:17px; top:11px; left:14px; }

  .cats{ padding-bottom:70px; }
  .cats__head{ padding: 110px var(--gutter) 74px; }
  .cats__title{ font-size: clamp(44px, 3.8vw, 58px); }
  .cats__text{ font-size:13.5px; }
  .cat{ padding: 26px 12px; }
  .cat__media{ min-height: 240px; }
  .help{ padding: 44px 48px; gap:34px; }
  .help__text{ font-size:13px; }

  .story{ display:flex; }
  .story__panel{
    /* the reference's desktop composition: a cream column held to the
       right of the photograph rather than a veil across the whole frame */
    width: min(46%, 620px);
    margin-left:auto;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding: 90px 68px;
    background:
      linear-gradient(to right,
        rgba(246,241,232,0) 0%,
        rgba(246,241,232,.86) 12%,
        rgba(246,241,232,.96) 30%,
        rgba(246,241,232,.98) 100%);
  }
  .story__mark{ width:44px; height:44px; }
  .story__title > span:first-child{ font-size: clamp(38px, 2.9vw, 46px); }
  .story__title-xl{ font-size: clamp(62px, 5vw, 82px); }
  .story__title-accent{ font-size: clamp(46px, 3.6vw, 60px); }
  .story__text{ font-size:17px; max-width:36ch; }

  .journey{ padding-bottom:70px; }
  .journey__top{ padding: 104px var(--gutter) 64px; gap:56px; }
  .journey__title{ font-size: clamp(50px, 4.2vw, 64px); }
  .journey__text{ font-size:13.5px; }
  .journey__video{ aspect-ratio: 16 / 11; }
  .ig-handle__name{ font-size:12.5px; }

  .ig{ padding-bottom: 46px; }
  .ig__grid{ gap:18px; }

  .trust{ padding: 44px var(--gutter) 52px; }
  .trust__item{ padding: 0 26px; }

  .inspire{ margin-inline:auto; width: calc(100% - var(--gutter) * 2); }
  .inspire__copy{ padding: 62px 54px; margin-left: 46%; }
  .inspire__title{ font-size: clamp(28px, 2.3vw, 34px); }
  .inspire__text{ font-size:12.5px; }
  .inspire__form{ max-width:470px; }
  .inspire__form input{ font-size:12.5px; padding:14px; }
  .inspire__submit{ padding:14px 24px; font-size:9.5px; }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .fav.pop,
  .add.pop{ animation:none !important; }
}
/* =========================================================
   ANTIQUE HOME — 06 · FOOTER
   Self-contained. Loaded after sections.css; nothing above
   the footer is touched from this file.
   ========================================================= */

.foot{
  position:relative;
  isolation:isolate;
  background: var(--paper);
  color: var(--ink-900);
  overflow:hidden;
}

.foot__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  display:block;
}
.foot__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: center bottom;
}
/* a cream veil: light over the wall at the top so the shadows still read,
   firmer lower down where the carving and the books would otherwise fight
   the type */
.foot__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,
      rgba(245,240,231,.26) 0%,
      rgba(245,240,231,.32) 40%,
      rgba(245,240,231,.68) 62%,
      rgba(245,240,231,.78) 84%,
      rgba(245,240,231,.60) 100%);
}

.foot__inner{
  position:relative;
  max-width: var(--shell);
  margin-inline:auto;
  padding: 42px var(--gutter) clamp(120px, 34vw, 170px);
}

/* ---------------------------------------------------------
   brand mark, held between two hairlines
   --------------------------------------------------------- */

.fmark{
  position:relative;
  display:flex;
  justify-content:center;
  --fmark-w: clamp(190px, 54vw, 236px);
  /* the ornament occupies the middle 65.2% of the artwork and its optical
     centre sits 28.2% down — the hairlines are placed off those figures */
  --orn-half: calc(var(--fmark-w) * 0.326);
  --orn-gap: 12px;
}

.fmark__rule{
  position:absolute;
  top: 28.2%;
  height:1px;
  background: rgba(150,116,72,.62);
}
.fmark__rule:first-child{
  left:0;
  right: calc(50% + var(--orn-half) + var(--orn-gap));
  background: linear-gradient(to right, rgba(150,116,72,0), rgba(150,116,72,.62) 34%);
}
.fmark__rule:last-child{
  right:0;
  left: calc(50% + var(--orn-half) + var(--orn-gap));
  background: linear-gradient(to left, rgba(150,116,72,0), rgba(150,116,72,.62) 34%);
}

/* The supplied artwork is a 531×423 canvas whose ink occupies
   87–466 × 104–315; the frame below crops that margin away so the
   mark's true width is what --fmark-w sets. */
.fmark__logo{
  position:relative;
  display:block;
  flex:none;
  width: var(--fmark-w);
  aspect-ratio: 379 / 211;
  overflow:hidden;
}
.fmark__logo img{
  position:absolute;
  width:140.11%;          /* 531 / 379 */
  max-width:none;
  height:auto;
  left:-22.96%;           /* -87 / 379 */
  top:-49.29%;            /* -104 / 211 of the box height */
}

/* a slow gold glint riding the letterforms */
.fmark__shine{
  position:absolute;
  width:140.11%;
  height:176.7%;          /* 140.11 / (211/379) ... matched to the image box */
  left:-22.96%;
  top:-49.29%;
  pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(255,236,190,0)   38%,
      rgba(255,246,214,.65) 47%,
      rgba(255,252,238,.95) 50%,
      rgba(255,246,214,.65) 53%,
      rgba(255,236,190,0)   62%);
  background-size: 260% 100%;
  background-repeat:no-repeat;
  mix-blend-mode: overlay;
  -webkit-mask-image: url("/footer/logo-footer.png");
          mask-image: url("/footer/logo-footer.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: fShine 7s var(--ease) 1.2s infinite;
}
@keyframes fShine{
  0%       { background-position: 170% 0; }
  36%, 100%{ background-position: -70% 0; }
}

@media (hover:hover){
  .fmark__logo{ transition: transform .6s var(--ease); }
  .fmark__logo:hover{ transform: scale(1.035); }
}

/* the small lozenge under the wordmark */
.fmark__gem{
  display:block;
  width:6px; height:6px;
  margin: 10px auto 0;
  border:1px solid rgba(150,116,72,.7);
  transform: rotate(45deg);
}
.fmark__gem.in{ transform: rotate(45deg); }

/* ---------------------------------------------------------
   columns
   --------------------------------------------------------- */

.foot__cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 18px;
  margin-top: 34px;
}

.fcol__title{
  margin:0 0 10px;
  font-family: var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color: var(--ink-900);
}
.fcol__title::after{
  content:"";
  display:block;
  width:26px; height:1px;
  margin-top:9px;
  background: rgba(150,116,72,.75);
  transition: width .55s var(--ease);
}
.fcol:hover .fcol__title::after{ width:44px; }

.fcol__list{
  list-style:none;
  margin:0;
  padding:0;
}
.fcol__list li + li{ margin-top:9px; }

.fcol__list a{
  display:flex;
  align-items:center;
  gap:9px;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:300;
  letter-spacing:.02em;
  color: var(--ink-600);
  transition: color .35s var(--ease), transform .35s var(--ease);
}

.fcol__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:16px; height:16px;
  color: rgba(150,116,72,.85);
  transition: transform .4s var(--ease), color .4s var(--ease);
}
.fcol__ico svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
}

@media (hover:hover){
  .fcol__list a:hover{ color: var(--gold-deep); transform: translateX(4px); }
  .fcol__list a:hover .fcol__ico{ transform: scale(1.18); color: var(--gold-deep); }
}

/* ---------- newsletter ---------- */

.fcol--news{ grid-column: 1 / -1; }

.fnews__text{
  margin:0 0 14px;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:300;
  line-height:1.75;
  color: var(--ink-600);
}

.fnews{
  display:flex;
  align-items:stretch;
  max-width:340px;
  border:1px solid rgba(150,116,72,.45);
  background: rgba(255,252,246,.55);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.fnews:focus-within{
  border-color: rgba(150,116,72,.9);
  box-shadow: 0 0 0 3px rgba(169,138,92,.12);
}

.fnews input{
  flex:1 1 auto;
  min-width:0;
  appearance:none;
  border:0;
  background:transparent;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:300;
  letter-spacing:.03em;
  color: var(--ink-900);
}
.fnews input::placeholder{ color: rgba(93,82,70,.6); }
.fnews input:focus{ outline:none; }

.fnews button{
  appearance:none;
  border:0;
  cursor:pointer;
  flex:none;
  display:grid;
  place-items:center;
  width:54px;
  background: linear-gradient(100deg, #9C7A4C, #B69463 52%, #9C7A4C);
  background-size:200% 100%;
  color:#FBF6EC;
  transition: background-position .6s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fnews button svg{
  width:22px; height:10px;
  fill:none; stroke:currentColor;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .4s var(--ease);
}
@media (hover:hover){
  .fnews button:hover{ background-position:100% 0; }
  .fnews button:hover svg{ transform: translateX(4px); }
}
.fnews button:active{ transform: scale(.96); }

.fnews__note{
  margin:9px 0 0;
  min-height:14px;
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:300;
  letter-spacing:.03em;
  color: var(--gold-deep);
}
.fnews__note.err{ color:#A9573A; }

/* ---------------------------------------------------------
   visit us / showroom address
   --------------------------------------------------------- */

.fvisit{ margin-top: 30px; }
.fvisit__inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border:1px solid rgba(150,116,72,.32);
  border-radius:2px;
  background: linear-gradient(135deg, rgba(255,253,248,.55), rgba(255,253,248,.28));
  text-decoration:none;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
@media (hover:hover){
  .fvisit__inner:hover{
    border-color: rgba(150,116,72,.7);
    background: linear-gradient(135deg, rgba(255,253,248,.72), rgba(255,253,248,.4));
    transform: translateY(-1px);
  }
  .fvisit__inner:hover .fvisit__cta{ color: var(--gold-deep); }
  .fvisit__inner:hover .fvisit__cta svg{ transform: translateX(3px); }
}
.fvisit__ico{
  flex:none;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: rgba(150,116,72,.14);
  color: var(--gold-deep);
}
.fvisit__ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.fvisit__copy{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.fvisit__label{
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: rgba(150,116,72,.95);
}
.fvisit__addr{
  font-family: var(--serif, var(--sans));
  font-size:15px;
  font-weight:500;
  color: var(--ink-900);
  letter-spacing:.01em;
}
.fvisit__cta{
  flex:none;
  display:flex;
  align-items:center;
  gap:7px;
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--ink-600);
  transition: color .3s var(--ease);
}
.fvisit__cta svg{ width:16px; height:8px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition: transform .3s var(--ease); }

@media (max-width: 559px){
  .fvisit__inner{ flex-wrap:wrap; padding:16px; }
  .fvisit__cta{ width:100%; justify-content:flex-start; padding-left:60px; }
  .fvisit__addr{ font-size:13.5px; }
}

/* ---------------------------------------------------------
   assurances + social
   --------------------------------------------------------- */

.fbar{
  margin-top: 30px;
  padding-top: 26px;
  position:relative;
  border-top:1px solid rgba(150,116,72,.3);
}
/* a small lozenge sitting on the rule */
.fbar::before{
  content:"";
  position:absolute;
  top:-4px; left:50%;
  width:7px; height:7px;
  margin-left:-3.5px;
  background: var(--paper);
  border:1px solid rgba(150,116,72,.7);
  transform: rotate(45deg);
}

.fbar__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
}

.fbar__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:9px;
  padding: 0 6px;
  border-right:1px solid rgba(150,116,72,.24);
}
.fbar__item:nth-child(3){ border-right:0; }

.fbar__ico{
  display:grid; place-items:center;
  width: clamp(24px, 6.6vw, 30px);
  height: clamp(24px, 6.6vw, 30px);
  color: var(--gold-deep);
  transition: transform .45s var(--ease);
}
.fbar__ico svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
}
@media (hover:hover){
  .fbar__item:hover .fbar__ico{ transform: translateY(-3px) scale(1.1); }
}

.fbar__copy h3{
  margin:0 0 6px;
  font-family: var(--sans);
  font-size: clamp(8.5px, 2.4vw, 10px);
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.5;
  text-transform:uppercase;
  color: var(--ink-900);
}
.fbar__copy p{
  margin:0;
  font-family: var(--sans);
  font-size: clamp(8.5px, 2.4vw, 10.5px);
  font-weight:300;
  line-height:1.65;
  color: var(--ink-600);
}

/* on a phone the social row drops to its own line under the three */
.fbar__item--social{
  order: 9;                 /* after the three assurances on a phone */
  grid-column: 1 / -1;
  border-right:0;
  margin-top: 22px;
  padding-top: 20px;
  border-top:1px solid rgba(150,116,72,.24);
}

.fsocial{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 26px;
}
.fsocial a{
  display:grid;
  place-items:center;
  width:30px; height:30px;
  transition: transform .4s var(--ease), filter .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fsocial svg{ width:100%; height:100%; }
@media (hover:hover){
  .fsocial a:hover{ transform: translateY(-3px) scale(1.14); filter: drop-shadow(0 5px 12px rgba(60,44,26,.28)); }
}
.fsocial a:active{ transform: scale(.9); }

/* ---------------------------------------------------------
   signature + copyright
   --------------------------------------------------------- */

.fsign{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top: 30px;
  padding-top: 22px;
  border-top:1px solid rgba(150,116,72,.28);
}
.fsign__rule{
  flex:1 1 auto;
  max-width:150px;
  height:1px;
  background: linear-gradient(to right, transparent, rgba(150,116,72,.5));
}
.fsign__rule:last-child{
  background: linear-gradient(to left, transparent, rgba(150,116,72,.5));
}

/* the credit line — a small caption label plus the linked name,
   set a touch heavier than a hairline script so it stays legible,
   with a gold sheen travelling across the name */
.fsign__label{
  flex:none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(92,68,35,.75);
}

.fsign__name{
  position:relative;
  flex:none;
  display:inline-block;
  text-decoration:none;
  font-family: "Dancing Script", "Segoe Script", cursive;
  font-size: clamp(23px, 6.4vw, 28px);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.25;
  padding: 0 2px 3px;
  /* brighter, higher-contrast stops so the name reads clearly
     against the cream footer, not just a faint gold hairline */
  background-image: linear-gradient(
    100deg,
    #4A3418 0%,
    #6E5229 26%,
    #B98A3F 42%,
    #E8C374 50%,
    #B98A3F 58%,
    #6E5229 74%,
    #4A3418 100%);
  /* The sweep must stay inside 0%–100%. Pushed past those bounds the
     gradient leaves the text box and, with no-repeat, the glyphs it no
     longer covers get no paint at all and vanish. */
  background-size: 300% 100%;
  background-repeat:no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fSignSheen 6.5s ease-in-out 1.4s infinite;
  transition: transform .5s var(--ease);
}
@keyframes fSignSheen{
  0%,   10%{ background-position: 100% 0; }
  55%, 100%{ background-position: 0% 0; }
}
@media (hover:hover){
  .fsign__name:hover{ transform: scale(1.07); }
}

.fcopy{
  margin: 12px 0 0;
  text-align:center;
  font-family: var(--sans);
  font-size: clamp(8.5px, 2.5vw, 10px);
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--ink-600);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 700px){
  .foot__inner{ padding: 56px var(--gutter) clamp(90px, 12vw, 130px); }
  .fmark{ --fmark-w: clamp(240px, 30vw, 300px); }

  .foot__cols{ grid-template-columns: 1.1fr 1fr 1fr; gap: 34px 26px; margin-top: 42px; }
  .fcol--news{ grid-column: auto; }

  .fbar__list{ grid-template-columns: repeat(3, 1fr) auto; }
  .fbar__item{ flex-direction:row; text-align:left; gap:14px; padding: 0 20px; }
  .fbar__item--social{
    order:0;
    grid-column:auto;
    margin-top:0;
    padding-top:0;
    border-top:0;
    justify-content:center;
  }
  .fsocial{ gap:18px; }
}


/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */

@media (min-width: 1024px){
  .foot__inner{ padding: 74px var(--gutter) clamp(70px, 7vw, 104px); }

  /* the landscape plate is wider than the footer, so anchor the crop to the
     right and keep the vase and books in frame as the reference does */
  .foot__bg img{ object-position: right bottom; }

  .fmark{ --fmark-w: clamp(300px, 24vw, 360px); --orn-gap: 20px; }

  .foot__cols{
    grid-template-columns: 1.05fr 1fr 1fr;
    gap: 0 60px;
    margin-top: 52px;
    /* the reference indents the columns in from the frame edge */
    padding-inline: clamp(0px, 4vw, 74px);
  }
  .fcol__title{ font-size:12px; letter-spacing:.28em; }
  .fcol__list li + li{ margin-top:11px; }
  .fcol__list a{ font-size:12.5px; }

  /* the laptop reference lists the shop links as plain type */
  .fcol__ico{ display:none; }

  .fnews__text{ font-size:12.5px; }
  .fnews{ max-width:300px; }

  .fbar{ margin-top:44px; padding-top:30px; }
  .fbar__list{ grid-template-columns: 1fr 1fr auto 1fr; }
  .fbar__item{ padding: 0 28px; }
  .fbar__copy h3{ font-size:10px; }
  .fbar__copy p{ font-size:11px; }
  .fsocial{ gap:22px; }
  .fsocial a{ width:34px; height:34px; }

  .fsign{ margin-top:40px; padding-top:26px; }
  .fsign__rule{ max-width:none; }
  .fsign__label{ font-size:12px; }
  .fsign__name{ font-size:29px; }
  .fcopy{ font-size:10.5px; margin-top:14px; }
}

@media (min-width: 1600px){
  .foot__cols{ padding-inline: 90px; }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .fmark__shine,
  .fsign__name{ animation:none !important; }
  .fsign__name{
    -webkit-text-fill-color: #7A5A32;
    color:#7A5A32;
  }
}
/* =========================================================
   ANTIQUE HOME — SIDE MENU
   Self-contained. Loaded after footer.css; nothing before
   it in the cascade is touched from this file.
   ========================================================= */

.sidemenu{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
}

/* ---------- scrim ---------- */

.sidemenu__scrim{
  position:absolute;
  inset:0;
  border:0;
  margin:0;
  padding:0;
  cursor:pointer;
  background: rgba(10,7,4,.72);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity:0;
  transition: opacity .5s var(--ease);
}

/* ---------- panel ---------- */

/* The artwork only downloads once a visitor heads for the menu button
   (js/site-chrome.js adds .sm-bg) — most never open it, so it no longer
   costs every page view ~65KB. */
.sm-bg .sidemenu__panel{
  background:
    linear-gradient(180deg, rgba(250,246,238,.55), rgba(250,246,238,.72)),
    url("/خلفيه منيو.webp") center / cover no-repeat;
}

.sidemenu__panel{
  position:absolute;
  top:0; left:0; bottom:0;
  width: min(87vw, 352px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  /* the client's own menu-background artwork, with just enough of a
     cream wash over it to keep the nav text readable — lowered from a
     near-opaque .94/.97 wash (where the photo was barely visible) to
     a lighter one so the artwork actually reads. */
  background:
    linear-gradient(180deg, rgba(250,246,238,.55), rgba(250,246,238,.72)),
    #F3ECDF;
  box-shadow:
    30px 0 70px rgba(0,0,0,.35),
    inset -1px 0 0 rgba(120,96,58,.18);
  transform: translateX(-100%);
  transition: transform .6s var(--ease);
  padding: 24px 22px 32px;
  display:flex;
  flex-direction:column;

  scrollbar-width: thin;
  scrollbar-color: rgba(120,96,58,.35) transparent;
}
.sidemenu__panel::-webkit-scrollbar{ width:5px; }
.sidemenu__panel::-webkit-scrollbar-thumb{
  background: rgba(201,180,138,.38);
  border-radius:999px;
}

/* a hairline of gold foil tracing the panel's outer edge */
.sidemenu__panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(120,96,58,.16);
}

.sidemenu.is-open .sidemenu__scrim{ opacity:1; }
.sidemenu.is-open{ pointer-events:auto; }
.sidemenu.is-open .sidemenu__panel{ transform:none; }

/* ---------- header: close + logo ---------- */

.sm__head{
  position:relative;
  display:flex;
  justify-content:center;
  padding-top:6px;
}

/* a soft gold bloom sitting behind the mark, purely decorative */
.sm__head::before{
  content:"";
  position:absolute;
  left:50%; top:-18px;
  width:220px; height:150px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(120,96,58,.14), rgba(120,96,58,0) 72%);
  pointer-events:none;
  z-index:-1;
}

.sm__close{
  position:absolute;
  top:-6px; left:-6px;
  appearance:none;
  border:0;
  outline:none;
  cursor:pointer;
  width:38px; height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: rgba(120,96,58,.08);
  color: var(--ink-900, #2B2318);
  line-height:0;
  transition: transform .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sm__close:focus-visible{
  outline: 1px solid var(--gold-deep);
  outline-offset: 2px;
}
.sm__close svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round;
}
@media (hover:hover){
  .sm__close:hover{
    color: var(--gold);
    background: rgba(201,180,138,.2);
    transform: rotate(90deg) scale(1.06);
  }
}
.sm__close:active{ transform: scale(.88); }

/* logo — the artwork is a 531×423 canvas whose ink occupies 87–466 × 104–315,
   the same crop numbers used for the footer mark, so both read identically.
   Recolored to champagne gold so it reads on the dark panel. */
.sm__brand{
  display:block;
  width: 178px;
  aspect-ratio: 379 / 211;
  overflow:hidden;
  position:relative;
  margin: 2px auto 0;
  transition: transform .5s var(--ease);
}
.sm__brand img{
  position:absolute;
  width:140.11%;
  max-width:none;
  height:auto;
  left:-22.96%;
  top:-49.29%;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.12));
}
@media (hover:hover){
  .sm__brand:hover{ transform: scale(1.035); }
}

.sm__gem{
  display:block;
  width:6px; height:6px;
  margin: 6px auto 18px;
  border:1px solid rgba(120,96,58,.55);
  background: rgba(120,96,58,.14);
  transform: rotate(45deg);
}

/* ---------- nav ---------- */

.sm__nav{
  list-style:none;
  margin:0 0 8px;
  padding:0;
}

.sm__item + .sm__item{
  border-top: 1px solid rgba(120,96,58,.16);
}

.sm__item a,
.sm__row{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  padding: 15px 10px 15px 4px;
  border-radius: 3px;
  font-family: var(--serif);
  font-size:14.5px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--ink-900, #2B2318);
  transition: background-color .4s var(--ease), color .4s var(--ease);
  -webkit-tap-highlight-color: transparent;

  /* staggered entrance, played once when the panel opens */
  opacity:0;
  transform: translateX(-14px);
}
.sidemenu.is-open .sm__item a,
.sidemenu.is-open .sm__row{
  animation: smIn .5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 120ms);
}
@keyframes smIn{ to{ opacity:1; transform:none; } }

.sm__item--active a{
  color: #7A2318;
}
.sm__item--active .sm__label{ color:#7A2318; }

/* numbered index instead of an icon chip, per the reference design */
.sm__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:26px;
  font-family: var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.04em;
  color: rgba(43,35,24,.42);
  transition: color .4s var(--ease);
}
.sm__ico svg{ display:none; }
.sm__item--active .sm__ico{ color:#7A2318; }

.sm__label{ flex:1 1 auto; line-height:1.35; }

.sm__chev{
  flex:none;
  width:8px; height:13px;
  fill:none; stroke: rgba(43,35,24,.35);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .4s var(--ease), stroke .4s var(--ease);
}

@media (hover:hover){
  .sm__item:not(.sm__item--active) a:hover,
  .sm__row:hover{
    background: rgba(120,96,58,.08);
    color:#7A2318;
  }
  .sm__item a:hover .sm__ico,
  .sm__row:hover .sm__ico{
    color:#7A2318;
  }
  .sm__item a:hover .sm__chev{ stroke:#7A2318; transform: translateX(3px); }
}
.sm__item a:active{ transform: scale(.985); }

/* ---------- expandable sub-category (Accessories) ---------- */

.sm__item--expand{
  display:block;
}

.sm__row{
  padding-right:8px;
}

.sm__row .sm__link{
  display:flex;
  align-items:center;
  gap:13px;
  flex:1 1 auto;
  min-width:0;
  color:inherit;
}

.sm__plus{
  appearance:none;
  border:0;
  outline:none;
  cursor:pointer;
  flex:none;
  width:26px; height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: rgba(120,96,58,.10);
  color: rgba(43,35,24,.6);
  transition: transform .45s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sm__plus svg{
  width:11px; height:11px;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round;
  transition: transform .45s var(--ease);
}
.sm__plus:focus-visible{ outline:1px solid #7A2318; outline-offset:2px; }

@media (hover:hover){
  .sm__plus:hover{ background: rgba(120,96,58,.18); color: #7A2318; }
}
.sm__plus:active{ transform: scale(.88); }

/* the plus becomes a cross once open — one glyph, just rotated */
.sm__item--expand.is-open .sm__plus{ background: rgba(120,96,58,.18); color: #7A2318; }
.sm__item--expand.is-open .sm__plus svg{ transform: rotate(45deg); }

/* height driven from script.js (measured via scrollHeight) rather than a
   pure-CSS grid-fr trick — simpler to reason about and unaffected by
   whatever else happens to be animating elsewhere on the page */
.sm__sub-wrap{
  max-height:0;
  overflow:hidden;
  transition: max-height .5s var(--ease);
}

.sm__sub{
  list-style:none;
  margin:0;
  padding:0;
}

.sm__sub li + li{ border-top:1px solid rgba(201,180,138,.1); }

.sm__sub a{
  display:flex;
  align-items:center;
  gap:11px;
  margin-left:14px;
  padding: 10.5px 10px 10.5px 24px;
  border-left:1px solid rgba(120,96,58,.28);
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.09em;
  text-transform:uppercase;
  color: rgba(43,35,24,.55);
  transition: color .35s var(--ease), padding-left .35s var(--ease), border-color .35s var(--ease);
}
.sm__sub a::before{
  content:"";
  flex:none;
  width:4px; height:4px;
  border-radius:50%;
  background: currentColor;
  opacity:.55;
}
@media (hover:hover){
  .sm__sub a:hover{
    color: #7A2318;
    padding-left:29px;
    border-color: #7A2318;
  }
}
.sm__sub a:active{ opacity:.7; }

/* ---------- dividers: hairline · diamond · hairline ---------- */

.sm__rule{
  position:relative;
  display:flex;
  align-items:center;
  height:1px;
  margin: 18px 2px 18px;
  background: linear-gradient(to right, rgba(120,96,58,0), rgba(201,180,138,.4) 50%, rgba(120,96,58,0));
}
.sm__rule::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px;
  background: #FAF6EE;
  border:1px solid rgba(120,96,58,.45);
  transform: rotate(45deg);
}

/* ---------- language / currency ---------- */

.sm__toggle{
  display:flex;
  align-items:center;
  gap:11px;
  padding: 9px 4px;
}
.sm__toggle + .sm__toggle{ margin-top:2px; }

.sm__toggle-ico{
  flex:none;
  display:grid;
  place-items:center;
  width:26px; height:26px;
  border-radius:50%;
  background: rgba(201,180,138,.1);
  color: rgba(43,35,24,.6);
}
.sm__toggle-ico svg{
  width:14px; height:14px;
  fill:none; stroke:currentColor;
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
}

.sm__toggle-label{
  flex:1 1 auto;
  font-family: var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(43,35,24,.55);
}

.sm__switch{
  flex:none;
  position:relative;
  display:flex;
  padding:3px;
  gap:3px;
  background: rgba(120,96,58,.10);
  border-radius:999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
.sm__opt{
  appearance:none;
  border:0;
  cursor:pointer;
  padding: 6.5px 13px;
  border-radius:999px;
  background:transparent;
  font-family: var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  color: rgba(43,35,24,.55);
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .25s var(--ease), box-shadow .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sm__opt.is-active{
  background: linear-gradient(150deg, #7A2318 0%, var(--gold-deep, #A98A5C) 100%);
  color: #1C1611;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
@media (hover:hover){
  .sm__opt:not(.is-active):hover{ color: #7A2318; }
}
.sm__opt:active{ transform: scale(.93); }

/* ---------- social ---------- */

.sm__social{
  list-style:none;
  margin: 4px 0 0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}

.sm__credit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin: 18px 0 0;
  padding-top:16px;
  border-top:1px solid rgba(150,116,72,.28);
  font-family: var(--sans);
}
.sm__credit-rule{
  flex:1 1 auto;
  max-width:60px;
  height:1px;
  background: linear-gradient(to right, transparent, rgba(150,116,72,.5));
}
.sm__credit-rule:last-child{
  background: linear-gradient(to left, transparent, rgba(150,116,72,.5));
}
.sm__credit-label{
  flex:none;
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(92,68,35,.75);
}
.sm__credit-name{
  flex:none;
  display:inline-block;
  font-family: "Dancing Script", "Segoe Script", cursive;
  font-size:25px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.25;
  padding: 0 2px 3px;
  text-decoration:none;
  background-image: linear-gradient(100deg,#4A3418 0%,#6E5229 26%,#B98A3F 42%,#E8C374 50%,#B98A3F 58%,#6E5229 74%,#4A3418 100%);
  background-size:300% 100%;
  background-repeat:no-repeat;
  background-position:100% 0;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation: fSignSheen 6.5s ease-in-out 1.4s infinite;
  transition: transform .3s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  .sm__credit-name{ animation:none; background-position:50% 0; }
}
@media (hover:hover){
  .sm__credit-name:hover{ transform: scale(1.06); }
}
@keyframes fSignSheen{
  0%,   10%{ background-position: 100% 0; }
  55%, 100%{ background-position: 0% 0; }
}
.sm__social a{
  display:grid;
  place-items:center;
  width:28px; height:28px;
  border-radius:50%;
  transition: transform .4s var(--ease), filter .4s var(--ease), background-color .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sm__social svg{ width:100%; height:100%; }
@media (hover:hover){
  .sm__social a:hover{
    transform: translateY(-3px) scale(1.16);
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
    background: rgba(120,96,58,.10);
  }
}
.sm__social a:active{ transform: scale(.9); }

/* item stagger index */
.sm__item:nth-child(1){ --i:1; }
.sm__item:nth-child(2){ --i:2; }
.sm__item:nth-child(3){ --i:3; }
.sm__item:nth-child(4){ --i:4; }
.sm__item:nth-child(5){ --i:5; }
.sm__item:nth-child(6){ --i:6; }
.sm__item:nth-child(7){ --i:7; }
.sm__item:nth-child(8){ --i:8; }
.sm__item:nth-child(9){ --i:9; }
.sm__item:nth-child(10){ --i:10; }


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 700px){
  .sidemenu__panel{ width: min(60vw, 396px); padding: 32px 32px 38px; }
  .sm__brand{ width:200px; }
  .sm__item a,
  .sm__row{ font-size:12.5px; padding: 13.5px 10px 13.5px 16px; }
  .sm__sub a{ font-size:11px; }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .sidemenu__scrim,
  .sidemenu__panel,
  .sm__item a,
  .sm__row,
  .sm__sub-wrap,
  .sm__plus,
  .sm__plus svg{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  .sm__item a,
  .sm__row{ opacity:1 !important; transform:none !important; }
}
/* =========================================================
   ANTIQUE HOME — CART & SEARCH DRAWERS
   Self-contained. Loaded after sidemenu.css; nothing before
   it in the cascade is touched from this file.
   ========================================================= */

.drawer{
  position:fixed;
  inset:0;
  z-index:210;               /* above the side menu (200) */
  pointer-events:none;
}

.drawer__scrim{
  position:absolute;
  inset:0;
  border:0;
  margin:0;
  padding:0;
  cursor:pointer;
  background: rgba(16,12,8,.5);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity:0;
  transition: opacity .5s var(--ease);
}

.drawer__panel{
  position:absolute;
  top:0; right:0; bottom:0;
  width: min(92vw, 440px);
  background: linear-gradient(175deg, #FDFBF7 0%, var(--paper-card) 22%, #F6F1E7 100%);
  box-shadow:
    -26px 0 60px rgba(20,15,10,.22),
    inset 1px 0 0 rgba(150,116,72,.16);
  transform: translateX(100%);
  transition: transform .6s var(--ease);
  display:flex;
  flex-direction:column;
}
.drawer__panel--search{ width: min(92vw, 480px); }

.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer.is-open{ pointer-events:auto; }
.drawer.is-open .drawer__panel{ transform:none; }

.drawer__scroll{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding: 24px 20px 34px;
  scrollbar-width: thin;
  scrollbar-color: rgba(150,116,72,.35) transparent;
}
.drawer__scroll::-webkit-scrollbar{ width:5px; }
.drawer__scroll::-webkit-scrollbar-thumb{
  background: rgba(150,116,72,.32);
  border-radius:999px;
}

/* ---------------------------------------------------------
   header
   --------------------------------------------------------- */

.dw__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.dw__title{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:6px 0 0;
  font-family: var(--serif);
  font-weight:600;
  font-size: clamp(26px, 7.4vw, 32px);
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1;

  /* a slow, bounded gold sheen through the letterforms — the sweep
     never leaves 0%–100%, so no glyph is ever left unpainted */
  background-image: linear-gradient(100deg,
    var(--ink-900) 0%, var(--ink-900) 42%,
    var(--gold-mid) 50%,
    var(--ink-900) 58%, var(--ink-900) 100%);
  background-size: 240% 100%;
  background-repeat:no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: dwSheen 5.5s ease-in-out 1s infinite;
}
@keyframes dwSheen{
  0%,   14%{ background-position: 100% 0; }
  62%, 100%{ background-position: 0% 0; }
}

.dw__spark{
  display:inline-flex;
  width: clamp(14px, 3.6vw, 16px);
  height: clamp(14px, 3.6vw, 16px);
  color: var(--gold-deep);
  animation: dwSparkle 2.6s ease-in-out infinite;
}
.dw__spark svg{ width:100%; height:100%; fill:currentColor; }
@keyframes dwSparkle{
  0%,100%{ opacity:.55; transform: scale(.85) rotate(0deg); }
  50%    { opacity:1;   transform: scale(1.08) rotate(14deg); }
}

.dw__close{
  flex:none;
  appearance:none;
  cursor:pointer;
  width:38px; height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(150,116,72,.4);
  background:transparent;
  color: var(--ink-900);
  transition: transform .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.dw__close svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round;
}
.dw__close:focus-visible{ outline:1px solid var(--gold-deep); outline-offset:2px; }
@media (hover:hover){
  .dw__close:hover{
    color: var(--gold-deep);
    border-color: var(--gold-deep);
    background: rgba(150,116,72,.08);
    transform: rotate(90deg) scale(1.06);
  }
}
.dw__close:active{ transform: scale(.88); }

.dw__ornament{ margin: 14px 0 16px; }

.dw__sub{
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size:12.5px;
  font-weight:300;
  color: var(--ink-600);
}

.dw__label{
  margin:0 0 12px;
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--ink-900);
}

.dw__labelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.dw__labelRow .dw__label{ margin:0; }
.dw__labelRow .link-arrow{ font-size:9.5px; padding-bottom:0; }
.dw__labelRow .link-arrow::after{ display:none; }


/* ===========================================================
   shared drawer buttons
   =========================================================== */

.dw-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:15px 18px;
  margin-top:10px;
  border-radius:3px;
  font-family: var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  overflow:hidden;
  isolation:isolate;
  transition: transform .3s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.dw-btn svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .4s var(--ease);
}
.dw-btn:active{ transform: scale(.98); }

.dw-btn--dark{
  border:1px solid var(--ink-900);
  background: var(--ink-900);
  color: #FBF6EC;
}
@media (hover:hover){
  .dw-btn--dark:hover{
    box-shadow: 0 10px 28px rgba(43,36,28,.3);
    transform: translateY(-1px);
  }
  .dw-btn--dark:hover svg{ transform: scale(1.1) rotate(-6deg); }
}

.dw-btn--outline{
  border:1px solid rgba(43,36,28,.32);
  background:transparent;
  color: var(--ink-900);
}
@media (hover:hover){
  .dw-btn--outline:hover{
    border-color: var(--gold-deep);
    color: var(--gold-deep);
    background: rgba(169,138,92,.06);
  }
  .dw-btn--outline:hover svg{ transform: scale(1.1); }
}

.dw-btn--gold{
  flex:none;
  width:auto;
  margin-top:0;
  padding:13px 22px;
  gap:10px;
  background: linear-gradient(100deg, #B6975F, #C9AF7C 52%, #B6975F);
  background-size:200% 100%;
  border:1px solid transparent;
  color:#221B12;
}
@media (hover:hover){
  .dw-btn--gold:hover{
    background-position:100% 0;
    box-shadow: 0 8px 22px rgba(169,138,92,.32);
    transform: translateY(-1px);
  }
  .dw-btn--gold:hover svg{ transform: translateX(4px); }
}


/* ===========================================================
   CART
   =========================================================== */

/* ---------- free shipping ---------- */

.ship{
  padding:16px 16px 14px;
  margin-bottom:22px;
  border-radius:10px;
  background: rgba(169,138,92,.09);
  border:1px solid rgba(169,138,92,.2);
}
.ship__row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.ship__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:26px; height:26px;
  color: var(--gold-deep);
}
.ship__ico svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
}
.ship__text{
  flex:1 1 auto;
  margin:0;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:300;
  line-height:1.5;
  color: var(--ink-600);
}
.ship__text strong{ color: var(--ink-900); font-weight:600; }
.ship__goal{
  flex:none;
  text-align:right;
  font-family: var(--sans);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.6;
  color: var(--ink-400);
}
.ship__goal strong{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  color: var(--ink-900);
}

.ship__bar{
  position:relative;
  height:5px;
  border-radius:999px;
  background: rgba(150,116,72,.16);
  overflow:hidden;
}
.ship__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, #B6975F, #DCC9A6);
  transition: width 1s var(--ease) .15s;
}
.ship.is-full .ship__fill{
  background: linear-gradient(90deg, #7C9A6E, #A9C39B);
}

/* ---------- items ---------- */

.citems{
  list-style:none;
  margin:0 0 4px;
  padding:0;
}

.citem{
  display:flex;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid rgba(150,116,72,.14);

  opacity:0;
  transform: translateY(12px);
}
.drawer.is-open .citem{
  animation: dwItemIn .5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 140ms);
}
@keyframes dwItemIn{ to{ opacity:1; transform:none; } }

.citem:nth-child(1){ --i:1; }
.citem:nth-child(2){ --i:2; }
.citem:nth-child(3){ --i:3; }
.citem:nth-child(4){ --i:4; }
.citem:nth-child(5){ --i:5; }

.citem__media{
  flex:none;
  width:74px; height:74px;
  margin:0;
  border-radius:8px;
  overflow:hidden;
}
.citem__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .6s var(--ease);
}
@media (hover:hover){
  .citem:hover .citem__media img{ transform: scale(1.08); }
}

.citem__body{ flex:1 1 auto; min-width:0; }

.citem__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.citem__name{
  margin:0;
  font-family: var(--serif);
  font-weight:600;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color: var(--ink-900);
}

.citem__remove{
  flex:none;
  appearance:none;
  cursor:pointer;
  border:1px solid rgba(93,82,70,.28);
  background:transparent;
  width:22px; height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color: var(--ink-400);
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), background-color .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.citem__remove svg{ width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
@media (hover:hover){
  .citem__remove:hover{ color:#A9573A; border-color:#A9573A; background: rgba(169,87,58,.08); transform: rotate(90deg); }
}
.citem__remove:active{ transform: scale(.85); }

.citem__variant{
  margin:4px 0 10px;
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:300;
  letter-spacing:.03em;
  color: var(--ink-400);
}

.citem__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.citem__price{
  margin:0;
  font-family: var(--sans);
  font-size:12.5px;
  font-weight:700;
  color: var(--ink-900);
}

.qty{
  display:flex;
  align-items:center;
  gap:2px;
  border:1px solid rgba(150,116,72,.4);
  border-radius:999px;
  padding:2px;
}
.qty__btn{
  appearance:none;
  cursor:pointer;
  border:0;
  background:transparent;
  width:24px; height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color: var(--ink-700, var(--ink-900));
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.qty__btn svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
@media (hover:hover){
  .qty__btn:hover{ background: rgba(169,138,92,.18); color: var(--gold-deep); }
}
.qty__btn:active{ transform: scale(.85); }
.qty__num{
  min-width:20px;
  text-align:center;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:600;
  color: var(--ink-900);
}

.citems__empty{
  margin: 18px 0 24px;
  padding: 26px 18px;
  text-align:center;
  border:1px dashed rgba(150,116,72,.35);
  border-radius:10px;
  font-family: var(--sans);
  font-size:12px;
  font-weight:300;
  color: var(--ink-600);
}

/* ---------- promo ---------- */

.promo{
  margin: 8px 0 20px;
  border-top:1px solid rgba(150,116,72,.16);
  border-bottom:1px solid rgba(150,116,72,.16);
}
.promo__row{
  appearance:none;
  cursor:pointer;
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 2px;
  border:0;
  background:transparent;
  text-align:left;
  transition: color .3s var(--ease);
}
.promo__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:20px; height:20px;
  color: var(--gold-deep);
}
.promo__ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.promo__label{
  flex:1 1 auto;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--ink-900);
}
.promo__chev{
  flex:none;
  width:11px; height:8px;
  fill:none; stroke: var(--ink-400);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .4s var(--ease);
}
#promoToggle[aria-expanded="true"] .promo__chev{ transform: rotate(180deg); }
@media (hover:hover){
  .promo__row:hover .promo__label{ color: var(--gold-deep); }
}

.promo__wrap{
  max-height:0;
  overflow:hidden;
  transition: max-height .45s var(--ease);
}
.promo__wrap.is-open{ max-height:120px; }
.promo__row.is-applied .promo__label{ color: var(--gold-deep); }
.promo__form{
  display:flex;
  gap:0;
  padding: 0 2px 16px;
}
.promo__form input{
  flex:1 1 auto;
  min-width:0;
  appearance:none;
  border:1px solid rgba(150,116,72,.38);
  border-right:0;
  background: rgba(255,252,246,.6);
  padding:12px 14px;
  font-family: var(--sans);
  font-size:11.5px;
  color: var(--ink-900);
}
.promo__form input::placeholder{ color: rgba(93,82,70,.5); }
.promo__form input:focus{ outline:none; border-color: var(--gold-deep); }
.promo__form button{
  appearance:none;
  cursor:pointer;
  flex:none;
  border:0;
  padding:12px 22px;
  background: var(--ink-900);
  color:#FBF6EC;
  font-family: var(--sans);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition: background-color .35s var(--ease), transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@media (hover:hover){
  .promo__form button:hover{ background: var(--gold-deep); color:#221B12; }
}
.promo__form button:active{ transform: scale(.96); }
.promo__note{
  margin:0 0 14px 2px;
  min-height:14px;
  font-family: var(--sans);
  font-size:10.5px;
  color: var(--gold-deep);
}
.promo__note.err{ color:#A9573A; }

/* ---------- summary ---------- */

.summary{ margin-bottom:18px; }
.summary__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 2px;
  font-family: var(--sans);
  font-size:12px;
  font-weight:300;
  color: var(--ink-600);
}
.summary__total{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:14px 2px 4px;
  margin-top:6px;
  border-top:1px solid rgba(150,116,72,.24);
  font-family: var(--sans);
}
.summary__total > span{
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color: var(--ink-900);
}
.summary__total small{
  display:block;
  margin-top:3px;
  font-size:9.5px;
  font-weight:300;
  letter-spacing:.04em;
  text-transform:none;
  color: var(--ink-400);
}
.summary__total strong{
  font-size:16px;
  font-weight:700;
  color: var(--ink-900);
}

/* ---------- trust row ---------- */

.dw-trust{
  list-style:none;
  margin:22px 0 0;
  padding:18px 0 0;
  border-top:1px solid rgba(150,116,72,.16);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
}
.dw-trust li{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}
.dw-trust__ico{
  display:grid;
  place-items:center;
  width:28px; height:28px;
  color: var(--gold-deep);
}
.dw-trust__ico svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
}
.dw-trust li span:last-child{
  font-family: var(--sans);
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.4;
  text-transform:uppercase;
  color: var(--ink-600);
}


/* ===========================================================
   SEARCH
   =========================================================== */

.sfield{
  position:relative;
  display:flex;
  align-items:stretch;
  margin-bottom:22px;
  border:1px solid rgba(150,116,72,.4);
  border-radius:4px;
  background: rgba(255,252,246,.6);
  overflow:hidden;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.sfield:focus-within{
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(169,138,92,.12);
}
.sfield__ico{
  flex:none;
  width:18px; height:18px;
  align-self:center;
  margin-left:14px;
  fill:none; stroke: var(--ink-400);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.sfield input{
  flex:1 1 auto;
  min-width:0;
  appearance:none;
  border:0;
  background:transparent;
  padding:14px 12px;
  font-family: var(--sans);
  font-size:12.5px;
  color: var(--ink-900);
}
.sfield input::placeholder{ color: rgba(93,82,70,.48); }
.sfield input:focus{ outline:none; }
.sfield button{
  flex:none;
  appearance:none;
  cursor:pointer;
  border:0;
  width:52px;
  display:grid;
  place-items:center;
  background: linear-gradient(140deg, #C6AC78, #A9895C);
  color:#2A2013;
  transition: filter .35s var(--ease), transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sfield button svg{ width:17px; height:17px; fill:currentColor; }
@media (hover:hover){
  .sfield button:hover{ filter:brightness(1.12); }
}
.sfield button:active{ transform: scale(.92); }

/* ---------- popular pills ---------- */

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}
.pill-btn{
  appearance:none;
  cursor:pointer;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(150,116,72,.32);
  background: rgba(169,138,92,.06);
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.03em;
  color: var(--ink-600);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@media (hover:hover){
  .pill-btn:hover{
    background: var(--gold-deep);
    border-color: var(--gold-deep);
    color:#FBF6EC;
    transform: translateY(-2px);
  }
}
.pill-btn:active{ transform: scale(.95); }

/* ---------- browse categories ---------- */

.cats-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px 8px;
  margin-bottom:22px;
}
.cats-row__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.cats-row__ico{
  display:grid;
  place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  background: rgba(169,138,92,.09);
  border:1px solid rgba(169,138,92,.22);
  color: var(--gold-deep);
  transition: background-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cats-row__ico svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.cats-row__item span{
  font-family: var(--sans);
  font-size:9px;
  font-weight:500;
  letter-spacing:.03em;
  line-height:1.3;
  color: var(--ink-600);
}
.cats-row__item--all .cats-row__ico{
  background: linear-gradient(140deg, #C6AC78, #A9895C);
  border-color:transparent;
  color:#2A2013;
}
@media (hover:hover){
  .cats-row__item:hover .cats-row__ico{
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 8px 18px rgba(169,138,92,.28);
  }
  .cats-row__item:hover span{ color: var(--gold-deep); }
}
.cats-row__item:active .cats-row__ico{ transform: scale(.92); }

/* ---------- featured results ---------- */

.sresults{
  list-style:none;
  margin:0 0 26px;
  padding:0;
}
.sresult{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(150,116,72,.14);

  opacity:0;
  transform: translateY(12px);
}
.drawer.is-open .sresult{
  animation: dwItemIn .5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 260ms);
}
.sresult:nth-child(1){ --i:1; }
.sresult:nth-child(2){ --i:2; }
.sresult:nth-child(3){ --i:3; }
.sresult:nth-child(4){ --i:4; }
.sresult.is-hidden{ display:none; }

.sresult__media{
  flex:none;
  width:64px; height:64px;
  margin:0;
  border-radius:8px;
  overflow:hidden;
}
.sresult__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .6s var(--ease);
}
@media (hover:hover){
  .sresult:hover .sresult__media img{ transform: scale(1.08); }
}

.sresult__body{ flex:1 1 auto; min-width:0; }
.sresult__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.sresult__name{
  margin:0;
  font-family: var(--serif);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color: var(--ink-900);
}
.sresult__price{
  flex:none;
  font-family: var(--sans);
  font-size:12px;
  font-weight:700;
  color: var(--ink-900);
}
.sresult__variant{
  margin:4px 0 8px;
  font-family: var(--sans);
  font-size:10px;
  font-weight:300;
  color: var(--ink-400);
}
.sresult__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.stars{
  display:inline-flex;
  align-items:center;
  gap:2px;
  color: var(--gold-deep);
}
.stars svg{ width:10px; height:10px; }
.stars em{
  margin-left:5px;
  font-style:normal;
  font-family: var(--sans);
  font-size:9.5px;
  font-weight:400;
  color: var(--ink-400);
}

/* ---------- recently viewed ---------- */

.recent{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
}
.recent__rail{
  display:flex;
  gap:9px;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-behavior:smooth;
  padding-bottom:2px;
}
.recent__rail::-webkit-scrollbar{ display:none; }
.recent__tile{
  flex:none;
  width:56px; height:56px;
  border-radius:8px;
  overflow:hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.recent__tile img{ width:100%; height:100%; object-fit:cover; }
@media (hover:hover){
  .recent__tile:hover{ transform: translateY(-3px); box-shadow: 0 8px 16px rgba(43,36,28,.22); }
}
.recent__next{
  flex:none;
  appearance:none;
  cursor:pointer;
  width:34px; height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(169,138,92,.4);
  background:transparent;
  color: var(--gold-deep);
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.recent__next svg{ width:15px; height:11px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover){
  .recent__next:hover{ background: var(--gold-deep); color:#FBF6EC; }
}
.recent__next:active{ transform: scale(.9); }

/* ---------- can't find ---------- */

.dw-help{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:22px 20px;
  border-radius:10px;
  background: rgba(169,138,92,.08);
  border:1px solid rgba(169,138,92,.22);
}
.dw-help__spark{
  display:grid;
  place-items:center;
  width:26px; height:26px;
  color: var(--gold-deep);
  animation: dwSparkle 2.6s ease-in-out infinite;
}
.dw-help__spark svg{ width:100%; height:100%; fill:currentColor; }
.dw-help__copy h3{
  margin:0 0 6px;
  font-family: var(--serif);
  font-weight:600;
  font-size:15.5px;
  letter-spacing:.01em;
  line-height:1.35;
  color: var(--ink-900);
}
.dw-help__copy p{
  margin:0;
  font-family: var(--sans);
  font-size:11.5px;
  font-weight:300;
  line-height:1.6;
  color: var(--ink-600);
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 700px){
  .drawer__panel{ width: min(56vw, 440px); }
  .drawer__panel--search{ width: min(60vw, 500px); }
  .drawer__scroll{ padding: 32px 30px 40px; }
  .cats-row{ grid-template-columns: repeat(6, 1fr); }
  .dw-help{ flex-direction:row; align-items:center; }
}

@media (min-width: 1024px){
  .drawer__panel{ width: min(38vw, 460px); }
  .drawer__panel--search{ width: min(42vw, 540px); }
  .drawer__scroll{ padding: 40px 36px 44px; }
  .dw__title{ font-size:34px; }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .drawer__scrim,
  .drawer__panel,
  .citem, .sresult,
  .dw__title, .dw__spark, .dw-help__spark,
  .ship__fill, .promo__wrap{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  .citem, .sresult{ opacity:1 !important; transform:none !important; }
  .dw__title{
    -webkit-text-fill-color: var(--ink-900);
    color: var(--ink-900);
  }
}
/* =========================================================
   AMBIENT MUSIC TOGGLE
   Fixed floating control — visitor opts in, no autoplay-with-sound
   ========================================================= */

.music-toggle{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;

  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(227, 213, 188, .35);
  background: rgba(28, 22, 17, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--champagne, #E3D5BC);

  transition: border-color .25s var(--ease, ease), transform .25s var(--ease, ease), background .25s var(--ease, ease);
}

.music-toggle:hover{
  border-color: var(--gold, #C9B48A);
  transform: translateY(-2px);
}

.music-toggle:active{ transform: translateY(0); }

.music-toggle svg{
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* icon swap: show one glyph depending on state */
.music-toggle .music-toggle__on{ display: none; }
.music-toggle[aria-pressed="true"] .music-toggle__off{ display: none; }
.music-toggle[aria-pressed="true"] .music-toggle__on{ display: block; }

/* gentle "now playing" pulse ring while music is on */
.music-toggle[aria-pressed="true"]::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--gold, #C9B48A);
  opacity: .55;
  animation: musicPulse 2.2s ease-out infinite;
}

@keyframes musicPulse{
  0%   { transform: scale(.85); opacity: .55; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 560px){
  .music-toggle{
    right: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
  }
  .music-toggle svg{ width: 14px; height: 14px; }
}

/* =========================================================
   WHATSAPP FLOATING BUTTON
   Stacks above the music toggle, bottom-right
   ========================================================= */

.whatsapp-float{
  position: fixed;
  right: 16px;
  bottom: 66px;
  z-index: 60;

  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
}

.whatsapp-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.32);
}

.whatsapp-float:active{ transform: translateY(0); }

.whatsapp-float svg{
  width: 20px;
  height: 20px;
}

@media (max-width: 560px){
  .whatsapp-float{
    right: 12px;
    bottom: 56px;
    width: 34px;
    height: 34px;
  }
  .whatsapp-float svg{ width: 17px; height: 17px; }
}