/* ==========================================================================
   Made With Love in India — components
   Each block here is written to map cleanly onto a Shopify section later:
   one visual idea per class prefix, no cross-section dependencies.
   ========================================================================== */

/* The rotating announcement bar was removed — see renderHeader() in site.js.
   Its styles went with it rather than being left behind as dead CSS. */

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.site-header.stuck { box-shadow: 0 10px 30px -22px rgba(36,26,23,.5); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 64px;
}
@media (max-width: 980px) { .header-inner { min-height: 56px; } }

/* logo lockup — mark + wordmark, rendered from markup so it inherits the webfont */
.logo { display: inline-flex; align-items: center; gap: 0.65rem; flex: none; }
.logo svg { color: var(--madder); width: 46px; height: 42px; flex: none; transition: transform .5s var(--ease); }
.logo:hover svg { transform: rotate(-6deg) scale(1.05); }
.logo-wm {
  font-family: var(--display); font-weight: 600; font-size: 1.24rem; line-height: .95;
  letter-spacing: -.02em; font-variation-settings: 'opsz' 120, 'WONK' 1; color: var(--ink);
}
/* "in India" is the half of the name people forget, so it is set as a real line
   of type rather than a whisper: was .5rem of brass at .34em tracking, which was
   illegible at any size. Now ~half the wordmark's height, in ink. */
.logo-wm small {
  display: block; font-family: var(--body); font-weight: 500; font-size: 0.567em;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--ink-soft); margin-top: .4em;
}
@media (max-width: 420px) { .logo-wm { font-size: 1.05rem; } .logo svg { width: 39px; height: 35px; } }



/* LOGO-ANIM:start — generated by _scrape/buildmark.mjs */
/* The map rises out of the heart. It is clipped to the heart silhouette, so on
   the way up it is never visible outside it — it reads as emerging from within
   rather than sliding in over the top. 78px is the exact distance that
   parks it below the heart's lowest point. */
@keyframes mwl-rise{from{transform:translateY(78px)}to{transform:translateY(0)}}
.logo svg .mwl-rise,
.mwl-mark .mwl-rise { animation: mwl-rise 1.15s cubic-bezier(.22, .9, .24, 1) .3s both; }
.logo:hover svg .mwl-rise { animation: mwl-rise .9s cubic-bezier(.22, .9, .24, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .logo svg .mwl-rise, .mwl-mark .mwl-rise, .logo:hover svg .mwl-rise { animation: none; }
}
/* LOGO-ANIM:end */

/* primary nav */
/* margin/padding reset matters here: the UA's default 1em <ul> margin was
   silently adding 32px to the header's height. */
.nav { display: flex; align-items: center; gap: clamp(.7rem, .2rem + 1.1vw, 1.9rem); margin: 0; padding: 0; list-style: none; }
@media (max-width: 980px) { .nav { display: none; } }
.nav > li { list-style: none; }
/* The nav links' vertical padding — not min-height — is what actually sets the
   header's height, since they are the tallest thing in the bar. The line box is
   ~24px, so 1.25rem each side lands the bar at 64px. Change these together. */
.nav-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .01em;
  padding: 1.25rem 0; position: relative; color: var(--ink);
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .86rem; height: 1px;
  background: var(--madder); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-item:hover .nav-link::after, .nav-link[aria-current]::after { transform: scaleX(1); }
.nav-link .caret { font-size: .55em; opacity: .5; transition: transform .3s var(--ease); }
.nav-item:hover .caret { transform: rotate(180deg); }
.nav-link.hot { color: var(--madder); }

/* mega menu */
.nav-item { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -30px rgba(36,26,23,.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 99;
  pointer-events: none;              /* a hidden panel must not swallow clicks */
}
/* Opened by JS (see openMega in site.js), not by :hover. Every panel is a
   full-width absolute box stacked on the same spot, so with pure :hover the
   outgoing panel spends its whole fade sitting on top of the incoming one —
   which is what made moving between items feel broken. One `open` at a time,
   plus a small close delay, fixes both that and the diagonal-travel problem. */
/* `:focus-visible`, not `:focus-within`: clicking a nav link focuses it, and
   :focus-within then pinned the panel open until you clicked somewhere else —
   moving the mouse away did nothing. :focus-visible only matches keyboard
   focus, so tab-navigation still opens the menu but a mouse click doesn't
   trap it open. */
.nav-item.open > .mega, .nav-item:has(:focus-visible) > .mega {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.mega-inner { display: grid; grid-template-columns: repeat(4, 1fr) 1.1fr; gap: 2.5rem; padding-block: 2.4rem 2.8rem; }
.mega h4 {
  font-family: var(--body); font-size: var(--t-eyebrow); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem;
}
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.mega a { font-size: var(--t-sm); color: var(--ink-soft); transition: color .2s var(--ease), padding-left .2s var(--ease); }
.mega a:hover { color: var(--madder); padding-left: .3rem; }
.mega-feature { border-left: 1px solid var(--line); padding-left: 2.5rem; }
.mega-feature img { border-radius: var(--r-md); aspect-ratio: 4/3; object-fit: cover; margin-bottom: .9rem; }
.mega-feature .h-md { font-size: 1.15rem; margin-bottom: .4rem; }

/* header actions */
.actions { display: flex; align-items: center; gap: .35rem; flex: none; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  color: var(--ink); transition: background .2s var(--ease), color .2s var(--ease);
  position: relative;
}
.icon-btn:hover { background: var(--paper-deep); color: var(--madder); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--madder); color: #fff;
  font-size: .62rem; font-weight: 600; display: grid; place-items: center; line-height: 1;
}
.burger { display: none; }
@media (max-width: 980px) { .burger { display: grid; } }

/* At 390px the logo plus four 42px buttons measured 14px wider than the viewport
   and pushed every page into horizontal scroll. Below 480px the account link
   drops (it is reachable from the drawer), the buttons shrink and the gaps
   tighten — which buys back ~70px. */
@media (max-width: 480px) {
  .header-inner { gap: .75rem; }
  .actions { gap: .1rem; }
  .actions .icon-btn { width: 36px; height: 36px; }
  .actions .icon-btn svg { width: 18px; height: 18px; }
  .actions .acct { display: none; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); z-index: 200;
  background: var(--paper); transform: translateX(100%);
  transition: transform .4s var(--ease); overflow-y: auto;
  box-shadow: -20px 0 60px -30px rgba(36,26,23,.6);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); }
.drawer-body { padding: 1.2rem 1.4rem 2.5rem; }
.drawer-body details { border-bottom: 1px solid var(--line); }
.drawer-body summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; font-family: var(--display); font-size: 1.28rem; font-weight: 500;
  cursor: pointer; list-style: none;
}
.drawer-body summary::-webkit-details-marker { display: none; }
.drawer-body summary::after { content: '+'; font-family: var(--body); font-size: 1.2rem; color: var(--brass); }
.drawer-body details[open] summary::after { content: '–'; }
.drawer-body details ul { list-style: none; margin: 0; padding: 0 0 1.1rem; display: grid; gap: .75rem; }
.drawer-body details a { color: var(--ink-soft); font-size: var(--t-sm); }
.drawer-flat { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.28rem; }
.scrim {
  position: fixed; inset: 0; z-index: 150; background: rgba(36,26,23,.45);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
  backdrop-filter: blur(2px);
}
.scrim.on { opacity: 1; visibility: visible; }
body.locked { overflow: hidden; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--paper-deep); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr 1fr; align-items: stretch;
  min-height: min(82vh, 780px);
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; min-height: 0; } }
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 1rem + 6vw, 6rem) clamp(1.15rem, .2rem + 4vw, 5rem);
  position: relative; z-index: 2;
}
.hero-copy .h-hero { margin-bottom: 1.3rem; }
.hero-copy .lede { margin-bottom: 2.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero-media { position: relative; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
@media (max-width: 900px) { .hero-media img { aspect-ratio: 4/3; min-height: 0; } }
.hero-note {
  position: absolute; bottom: clamp(1rem, 3vw, 2.2rem); left: clamp(1rem, 3vw, 2.2rem);
  background: rgba(251,246,238,.94); backdrop-filter: blur(6px);
  padding: .95rem 1.3rem; border-radius: var(--r-md); max-width: 300px;
  font-size: var(--t-xs); line-height: 1.5; color: var(--ink-soft);
  box-shadow: var(--shadow-card);
}
.hero-note b { display: block; font-family: var(--display); font-size: 1rem; color: var(--ink); margin-bottom: .2rem; letter-spacing: -.01em; }

/* faint block-print motif behind the hero copy */
.hero-copy::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(circle at 50% 50%, rgba(176,141,79,.28) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 15% 20%, #000 5%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 15% 20%, #000 5%, transparent 70%);
}

/* ---------- trust strip ---------- */
.trust { border-block: 1px solid var(--line); background: var(--paper); }
/* auto-fit rather than a fixed 4, so the strip takes 4 or 5 promises without
   leaving an orphan in the last row */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
@media (max-width: 820px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-item {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.5rem clamp(.8rem, 1.6vw, 1.7rem);
  border-right: 1px solid var(--line);
}
.trust-item:last-child { border-right: 0; }
@media (max-width: 820px) {
  .trust-item:nth-child(2n) { border-right: 0; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.trust-item svg { width: 22px; height: 22px; color: var(--madder); flex: none; margin-top: 2px; }
.trust-item b { display: block; font-size: var(--t-sm); font-weight: 600; letter-spacing: -.005em; }
.trust-item span { font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.45; }

/* ---------- section heading ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.8rem, 1rem + 2vw, 3.2rem); }
.sec-head.center { flex-direction: column; align-items: center; text-align: center; }
.sec-head .h-xl { max-width: 22ch; }
.sec-head.center .h-xl { max-width: 26ch; }
@media (max-width: 700px) { .sec-head { flex-direction: column; align-items: flex-start; gap: 1rem; } }

/* ---------- ritual / category cards ---------- */
.ritual-card {
  position: relative; display: block; overflow: hidden; border-radius: var(--r-md);
  background: var(--ink); isolation: isolate;
}
.ritual-card img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  transition: transform 1.1s var(--ease), opacity .5s var(--ease);
  opacity: .88;
}
.ritual-card:hover img { transform: scale(1.06); opacity: .72; }
/* Product photography here is bright and busy — marigold, brass, printed cloth —
   so the scrim has to work much harder than a typical lifestyle-shot overlay. */
.ritual-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,11,9,.93) 0%, rgba(18,11,9,.72) 26%, rgba(18,11,9,.34) 52%, rgba(18,11,9,.06) 78%, transparent 100%);
}
.ritual-body { position: absolute; inset: auto 0 0 0; padding: clamp(1.2rem, 2vw, 2rem); z-index: 2; color: var(--paper); }
.ritual-body .kicker {
  font-size: var(--t-eyebrow); letter-spacing: .24em; text-transform: uppercase;
  color: var(--marigold); margin-bottom: .55rem; display: block;
}
.ritual-body h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); color: var(--paper); margin-bottom: .45rem; text-shadow: 0 1px 12px rgba(18,11,9,.5); }
.ritual-body p { font-size: var(--t-sm); color: #E0D2C4; margin: 0 0 .9rem; max-width: 34ch; text-shadow: 0 1px 10px rgba(18,11,9,.45); }
.ritual-body .link { color: var(--paper); }
.ritual-card.wide img { aspect-ratio: 16/10; }
@media (max-width: 560px) { .ritual-card img { aspect-ratio: 4/3; } }

/* ---------- product card ---------- */
.pcard { position: relative; display: flex; flex-direction: column; }
.pcard-media {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background: var(--paper-warm); aspect-ratio: 1; margin-bottom: .9rem;
}
.pcard-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .5s var(--ease), transform 1s var(--ease);
}
.pcard-media img.alt { opacity: 0; }
.pcard:hover .pcard-media img.main { opacity: 0; }
.pcard:hover .pcard-media img.alt { opacity: 1; }
.pcard:hover .pcard-media img { transform: scale(1.04); }
.pcard-media.sold img { filter: grayscale(.55) opacity(.75); }
.pcard-cat { font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; }
.pcard h3 { font-family: var(--body); font-size: var(--t-sm); font-weight: 500; line-height: 1.42; letter-spacing: 0; margin-bottom: .35rem; }
.pcard h3 a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s var(--ease); padding-bottom: 1px; }
.pcard:hover h3 a { background-size: 100% 1px; }
.pcard-price { font-size: var(--t-sm); font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: .5rem; }
.pcard-price del { color: var(--ink-faint); font-weight: 400; font-size: var(--t-xs); }
.pcard-price .from { font-weight: 400; color: var(--ink-faint); font-size: var(--t-xs); }
.pcard-quick {
  position: absolute; left: .7rem; right: .7rem; bottom: .7rem; z-index: 3;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.pcard:hover .pcard-quick { opacity: 1; transform: none; }
.pcard-quick .btn { width: 100%; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }
.pcard-quick .btn:hover { background: var(--ink); color: var(--paper); }
@media (hover: none) { .pcard-quick { display: none; } }
.stars { display: inline-flex; gap: 1px; color: var(--marigold); font-size: .78rem; letter-spacing: .06em; }
.stars + .rcount { font-size: var(--t-xs); color: var(--ink-faint); margin-left: .35rem; }

/* ---------- rail (horizontal scroll) ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(74vw, 290px), 1fr); gap: clamp(1rem, 2vw, 1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
@media (min-width: 1100px) { .rail { grid-auto-columns: minmax(0, 1fr); overflow: visible; grid-auto-flow: unset; grid-template-columns: repeat(4, 1fr); } }

/* ---------- editorial split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.split.flip .split-media { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip .split-media { order: 0; } }
.split-media { position: relative; }
.split-media img { border-radius: var(--r-md); width: 100%; object-fit: cover; aspect-ratio: 4/5; }
.split-media.tall img { aspect-ratio: 3/4; }
.split-copy .h-xl { margin-bottom: 1.1rem; }
.split-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.split-stack img { aspect-ratio: 1; }
.split-stack img:first-child { grid-column: span 2; aspect-ratio: 16/10; }

/* ---------- numbered steps (onboarding) ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  padding: 1.6rem 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-size: 1.1rem; color: var(--madder);
  font-variation-settings: 'opsz' 12; letter-spacing: .02em; padding-top: .1rem;
}
.step h3 { font-size: var(--t-md); margin-bottom: .35rem; }
.step p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; max-width: 52ch; }

/* ---------- "anatomy" annotated product ---------- */
.anatomy { position: relative; }
.anatomy img { border-radius: var(--r-md); width: 100%; aspect-ratio: 1; object-fit: cover; }
.hotspot {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line); color: var(--madder);
  display: grid; place-items: center; font-size: .7rem; font-weight: 600;
  box-shadow: var(--shadow-card); cursor: pointer; z-index: 3;
}
.hotspot::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--madder); opacity: .5; animation: pulse 2.4s infinite;
}
@keyframes pulse { 0% { transform: scale(.85); opacity: .6; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
.hotspot-label {
  position: absolute; left: 50%; bottom: calc(100% + 12px); translate: -50% 0;
  background: var(--ink); color: var(--paper); font-size: var(--t-xs); line-height: 1.4;
  padding: .6rem .85rem; border-radius: var(--r-sm); width: max-content; max-width: 210px;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; text-align: left; font-weight: 400;
}
.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label { opacity: 1; visibility: visible; }

/* ---------- occasion / gifting tiles ---------- */
.occasion {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--paper); min-height: 160px;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.occasion:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-3px); }
.occasion:hover h3, .occasion:hover p { color: var(--paper); }
.occasion .glyph { font-size: 1.6rem; margin-bottom: auto; color: var(--madder); }
.occasion h3 { font-size: var(--t-md); margin-bottom: .25rem; transition: color .3s var(--ease); }
.occasion p { font-size: var(--t-xs); color: var(--ink-faint); margin: 0; transition: color .3s var(--ease); }

/* price ladder buttons */
.ladder { display: flex; flex-wrap: wrap; gap: .7rem; }
.ladder a {
  flex: 1 1 160px; text-align: center; padding: 1.1rem .8rem; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--paper);
  transition: all .25s var(--ease);
}
.ladder a:hover { border-color: var(--madder); background: var(--madder-wash); }
.ladder b { display: block; font-family: var(--display); font-size: 1.5rem; letter-spacing: -.02em; }
.ladder span { font-size: var(--t-xs); color: var(--ink-faint); }

/* ---------- quote / review ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2vw, 2rem); }
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } }
.quote {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(1.4rem, 2vw, 2rem); display: flex; flex-direction: column; gap: .85rem;
}
.quote blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.05rem, 1rem + .35vw, 1.24rem); line-height: 1.45; letter-spacing: -.01em; }
.quote footer { font-size: var(--t-xs); color: var(--ink-faint); margin-top: auto; }
.quote footer b { color: var(--ink); font-weight: 600; display: block; font-size: var(--t-sm); }

/* ---------- maker card ---------- */
.maker { display: grid; gap: .9rem; }
.maker img { border-radius: var(--r-md); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.maker .place { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.maker h3 { font-size: var(--t-md); }
.maker p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; }

/* ---------- newsletter ---------- */
.signup { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 480px; }
.signup input {
  flex: 1 1 220px; padding: .95rem 1.1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper); font-size: var(--t-sm);
}
.signup input:focus { border-color: var(--madder); outline: none; }
.band-ink .signup input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: var(--paper); }
.band-ink .signup input::placeholder { color: rgba(255,255,255,.45); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #CBBBAC; padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.8rem, 3vw, 3.5rem); padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } }
/* On the dark band the mark goes paper-white with an ink cut-out, rather than
   picking up a second brand colour the palette no longer has. */
.site-footer .logo svg { color: var(--paper); --mark-inlay: var(--ink); }
.site-footer .logo-wm { color: var(--paper); }
.site-footer .logo-wm small { color: #C9B9A8; }
.site-footer h4 { font-family: var(--body); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--marigold); margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { font-size: var(--t-sm); transition: color .2s var(--ease); }
.site-footer a:hover { color: var(--paper); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding-top: 1.8rem; font-size: var(--t-xs); color: #8D7C6E; }
.socials { display: flex; gap: .6rem; }
.socials a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; display: grid; place-items: center; transition: all .25s var(--ease); }
.socials a:hover { background: var(--marigold); border-color: var(--marigold); color: var(--ink); }
.socials svg { width: 16px; height: 16px; }

/* ---------- mockup ribbon (removed before the Shopify port) ---------- */
.mock-flag {
  position: fixed; right: 0; bottom: 0; z-index: 300;
  background: var(--indigo); color: #fff; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: .45rem .8rem; border-radius: var(--r-sm) 0 0 0; opacity: .8;
}
.mock-flag:hover { opacity: 1; }