/* ============ VIVIMODA — early autumn storefront ============
   Structure follows the Cider playbook (dense grid, mood-led shopping,
   promo strips, aggressive badging). Tone is quiet: paper grounds, serif
   display, no shouting. The card ground matches the product-image ground
   (#f3f1ec) so cutouts sit seamlessly in the grid.
   ============================================================ */
:root {
  --ink: #16181c;
  --ink-soft: #6a6a68;
  --ink-faint: #97968f;
  --bg: #ffffff;
  --paper: #f3f1ec;         /* == product image ground */
  --paper-deep: #e9e6df;
  --line: #e2ded6;
  --sale: #a8412a;
  --ok: #4a6b4f;
  --gutter: 40px;
  --header-h: 62px;
  --radius: 2px;
  --maxw: 1520px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* German compounds (Versandkostenfrei, Zwölf-Stunden-Tage) must break rather
     than force a column wider than the screen. */
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }  /* height:auto or the HTML height attr beats aspect-ratio */
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, .serif {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  transition: background .18s, color .18s, border-color .18s, opacity .18s, transform .12s;
  border: 1px solid transparent; cursor: pointer; text-align: center;
}
.btn-dark  { background: var(--ink); color: #fff; }
.btn-dark:hover  { background: #333; }
.btn-light { background: #fff; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .btn-light:hover { background: var(--ink); color: #fff; } }
.btn-ghost { border-color: rgba(255,255,255,.8); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:not(:disabled):active { transform: scale(.97); }

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--ink); color: #fff; min-height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12.5px; letter-spacing: .04em; padding: 7px 10px;
}
.announce :focus-visible { outline-color: #fff; }
.announce-track { position: relative; flex: 0 1 620px; text-align: center; }
/* The showing message is in flow so the bar grows to fit it (two lines on a
   narrow phone); the others cross-fade on top of it. */
.announce-msg {
  /* Block, not grid — grid would make every <strong> its own row. */
  position: absolute; left: 0; right: 0; top: 0; display: block;
  line-height: 1.3; text-wrap: balance;
  opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .4s;
  pointer-events: none;
}
.announce-msg.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.announce-msg strong { font-weight: 700; }
.announce-arrow { color: #fff; font-size: 17px; line-height: 1; opacity: .6; padding: 0 6px; }
.announce-arrow:hover { opacity: 1; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60; background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.header.is-scrolled { border-color: var(--line); box-shadow: 0 1px 14px rgba(0,0,0,.05); }
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h); display: flex; align-items: center; gap: 22px;
}
/* ---------- wordmark ----------
   Outlined SVG, not live text. Three things follow from that: no webfont to
   wait for and no reflow when it lands, identical letterfit everywhere, and
   the fit itself is optically spaced (equal white area between every pair)
   rather than whatever the font's metric kerning happens to give.

   The letters are Bodoni Moda's 6pt optical cut. That is not a stylistic
   pick: the family's hairline is set entirely by the optical-size axis, and
   only the smallest cuts keep it above one device pixel at header sizes —
   the 96pt cut measures 0.11px at 25px and simply disappears. The
   same-colour stroke lifts the hairline the last fraction it needs. */
.logo { display: inline-flex; align-items: center; color: var(--ink); }
.logo .mark { display: block; height: 19px; width: auto; }
.nav { display: flex; gap: 2px; flex: 1; }
.nav-item > a {
  display: block; padding: 20px 13px; font-size: 13.5px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; position: relative;
}
.nav-item > a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 14px;
  height: 1px; background: var(--ink); transform: scaleX(0); transition: transform .22s;
}
.nav-item:hover > a::after { transform: scaleX(1); }
.nav-sale { color: var(--sale) !important; }
.header-icons { display: flex; align-items: center; gap: 4px; }
.icon-btn { position: relative; padding: 8px; border-radius: 50%; display: grid; place-items: center; transition: background .16s, transform .12s; }
.icon-btn:hover { background: var(--paper); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 21px; height: 21px; }
/* The visible glyph stays small on a phone so the row fits, but the real
   button box shrinks with it — well under the ~44px a thumb needs. This
   invisible pseudo-element pads the actual hit area without touching
   layout: the header has slack above/below the icon, so it costs nothing
   there; sideways it only reaches into the (now non-zero) gap, never a
   neighbour's own box, so two icons can't fight over the same tap. */
.icon-btn::before { content: ""; position: absolute; inset: -11px -3px; }
.cart-count {
  position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--ink); color: #fff;
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
}
.nav-toggle { display: none; }

/* Mega menu */
.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--bg);
  border-top: 1px solid var(--line); box-shadow: 0 18px 34px rgba(0,0,0,.07);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.has-mega:hover .mega { opacity: 1; visibility: visible; transform: none; }
.mega-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 34px var(--gutter) 40px;
  display: grid; grid-template-columns: repeat(3, minmax(150px, 220px)) 1fr; gap: 34px;
}
.mega-col h4 { font-family: inherit; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 13px; font-weight: 600; }
.mega-col a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink-soft); }
.mega-col a:hover { color: var(--ink); }
.mega-cards { display: flex; gap: 16px; justify-content: flex-end; }
.mega-card { position: relative; width: 190px; }
.mega-card img { aspect-ratio: 3/4; object-fit: cover; background: var(--paper); }
.mega-card span { display: block; margin-top: 9px; font-size: 13px; font-weight: 500; }

/* ---------- Mobile drawer ---------- */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90;
  opacity: 0; visibility: hidden; transition: .25s;
}
body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(84vw, 340px); z-index: 95;
  background: var(--bg); transform: translateX(-100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s .28s;
  display: flex; flex-direction: column;
}
/* visibility:hidden takes off-canvas nav links out of tab order while closed;
   the transition-delay lets the slide-out animation finish before it kicks in. */
body.drawer-open .drawer { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.4,0,.2,1); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.drawer-nav a {
  display: block; padding: 14px 20px; font-size: 15px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--paper);
}
.drawer-foot { border-top: 1px solid var(--line); padding: 16px 20px; display: grid; gap: 10px; font-size: 14px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero-track { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.hero-slide { position: relative; flex: 0 0 100%; }
.hero-slide img { width: 100%; aspect-ratio: 9/5; object-fit: cover; object-position: 70% center; }
.hero-copy {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  /* The model sits at ~70% across, so the scrim only has to protect the left. */
  background: linear-gradient(to right,
    rgba(243,241,236,.95) 0%, rgba(243,241,236,.82) 34%, rgba(243,241,236,.35) 56%, rgba(243,241,236,0) 74%);
}
.hero-dark.hero-copy {
  background: linear-gradient(to right,
    rgba(16,18,22,.88) 0%, rgba(16,18,22,.7) 34%, rgba(16,18,22,.28) 56%, rgba(16,18,22,0) 74%);
}
.hero-copy > * { max-width: 460px; }
.hero-kicker { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 16px; font-weight: 500; }
.hero-title { font-size: clamp(38px, 5.2vw, 74px); }
.hero-sub { margin: 18px 0 30px; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.5; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-dark { color: #fff; }
.hero-dark .hero-kicker { color: rgba(255,255,255,.8); }
.hero-dark :focus-visible { outline-color: #fff; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.85); font-size: 19px; transition: background .2s;
}
.hero-arrow:hover { background: #fff; }
.hero-arrow.prev { left: 16px; } .hero-arrow.next { right: 16px; }
.hero-dots { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.hero-dots button { width: 26px; height: 3px; background: rgba(0,0,0,.24); }
.hero-dots button.is-active { background: var(--ink); }

/* ---------- Marquee strip ---------- */
.strip {
  background: var(--ink); color: #fff; overflow: hidden; padding: 11px 0;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.strip-track { display: inline-flex; gap: 46px; animation: slide 26s linear infinite; padding-right: 46px; }
.strip span::before { content: "◆"; margin-right: 46px; font-size: 8px; vertical-align: middle; opacity: .6; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 62px var(--gutter) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.section-head > * { min-width: 0; }
.section-title { font-size: clamp(26px, 3vw, 40px); }
.section-note { margin-top: 8px; color: var(--ink-soft); font-size: 14.5px; max-width: 54ch; }
.see-all { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* ---------- Mood picker (Cider's "choose a mood") ---------- */
.moods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mood {
  position: relative; overflow: hidden; border-radius: var(--radius);
  display: block; text-align: left; background: var(--paper);
}
.mood img { aspect-ratio: 1/1; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.3,1); }
.mood:hover img { transform: scale(1.045); }
.mood-body { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); }
.mood-name { display: block; font-family: "Instrument Serif", Georgia, serif; font-size: 25px; line-height: 1.1; }
.mood-tag { display: block; font-size: 12.5px; opacity: .88; margin-top: 4px; line-height: 1.35; }
.mood.is-active { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Filter chips ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.chip {
  padding: 9px 17px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 13px; font-weight: 500; white-space: nowrap; transition: .16s;
}
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }
.chip:active { transform: scale(.96); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Product grid (the Cider workhorse) ---------- */
.grid {
  display: grid; gap: 26px 18px;
  grid-template-columns: repeat(4, 1fr);
}
.grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--ink-soft); }

/* Horizontal scroller variant */
.scroll-row {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > .product-card { flex: 0 0 calc((100% - 3 * 18px) / 4); scroll-snap-align: start; }
.carousel { position: relative; }
.car-arrow {
  position: absolute; top: 34%; z-index: 4; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.14); display: grid; place-items: center; font-size: 17px;
}
.car-arrow.prev { left: -14px; } .car-arrow.next { right: -14px; }

/* ---------- Product card ---------- */
.product-card { position: relative; }
.product-media {
  display: block; position: relative; overflow: hidden; background: var(--paper);
  aspect-ratio: 3/4; border-radius: var(--radius);
}
.media-link { display: block; width: 100%; height: 100%; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s; }
.product-media .img-alt { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .img-alt { opacity: 1; }
.badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--ink); color: #fff; padding: 5px 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  /* Badges are free text from the admin panel now — stop before the wishlist
     heart at top right rather than sliding under it. */
  max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge.is-sale { background: var(--sale); }
.wish {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9);
  opacity: 0; transition: opacity .2s, background .2s, transform .12s;
}
.product-card:hover .wish, .wish.is-on { opacity: 1; }
.wish:active { transform: scale(.88); }
/* Hover is the only affordance a mouse needs, but a touch screen never fires
   it — without this the heart is simply unreachable on a phone. */
@media (hover: none) { .wish { opacity: .82; } }
.wish svg { width: 18px; height: 18px; }
.wish.is-on svg { fill: var(--sale); stroke: var(--sale); }
.quick-add {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(255,255,255,.96); padding: 11px; text-align: center;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(120%); transition: transform .28s cubic-bezier(.3,.7,.3,1);
}
.quick-add:active { opacity: .8; }
/* Quick add always assumes size M — a fair shortcut for a mouse hovering a
   card, a silent wrong-size add for a phone. Keep it strictly hover-only so
   iOS/Android's post-tap "sticky hover" can never surface it on touch. */
@media (hover: hover) {
  .product-card:hover .quick-add { transform: none; }
  .quick-add:hover { background: var(--ink); color: #fff; }
}
.product-info { padding: 12px 2px 0; }
.swatches { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.swatch {
  width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.16);
  cursor: pointer; transition: box-shadow .15s;
}
.swatch.is-active { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--ink); }
.swatch-more { font-size: 11.5px; color: var(--ink-faint); }
.product-name { font-size: 14px; font-weight: 500; line-height: 1.35; margin-bottom: 3px; }
.product-meta { font-size: 12px; color: var(--ink-faint); margin-bottom: 5px; }
.product-price { font-size: 15px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.price-was { color: var(--ink-faint); font-weight: 400; text-decoration: line-through; font-size: 13px; }
.price-now.is-sale { color: var(--sale); }

/* ---------- Editorial split banner ---------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  max-width: var(--maxw); margin: 72px auto 0; padding: 0 var(--gutter); gap: 0;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; background: var(--paper); }
.split-body { background: var(--paper); padding: clamp(28px, 5vw, 68px); display: flex; flex-direction: column; justify-content: center; }
.split-body h2 { font-size: clamp(28px, 3.4vw, 46px); }
.split-body p { margin: 16px 0 26px; color: var(--ink-soft); max-width: 46ch; }
.split-list { display: grid; gap: 10px; margin-bottom: 28px; }
.split-list li { list-style: none; font-size: 14px; padding-left: 20px; position: relative; }
.split-list li::before { content: "—"; position: absolute; left: 0; color: var(--ink-faint); }

/* ---------- Perks ---------- */
.perks {
  border-top: 1px solid var(--line); margin-top: 72px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.perk { padding: 34px 22px; text-align: center; border-right: 1px solid var(--line); }
.perk:last-child { border-right: 0; }
.perk h4 { font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 6px; }
.perk p { font-size: 13px; color: var(--ink-soft); }

/* ---------- Reviews ---------- */
.stars { color: var(--ink); letter-spacing: 2px; font-size: 14px; }
.review-card { background: var(--paper); padding: 24px; border-radius: var(--radius); }
.review-card p { margin: 10px 0 14px; font-size: 14.5px; }
.review-who { font-size: 12.5px; color: var(--ink-soft); }
.verified { color: var(--ok); font-size: 12px; }

/* ---------- Footer ---------- */
.footer { background: var(--paper); margin-top: 72px; border-top: 1px solid var(--line); }
.footer-news { max-width: var(--maxw); margin: 0 auto; padding: 52px var(--gutter); text-align: center; border-bottom: 1px solid var(--line); }
.footer-news h3 { font-size: clamp(24px, 2.6vw, 34px); }
.footer-news p { color: var(--ink-soft); margin: 10px auto 22px; max-width: 50ch; }
.news-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 430px; margin: 0 auto; }
.news-form input { min-width: 0; }
.news-form input { flex: 1; padding: 13px 15px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); }
.news-form input:focus { outline: none; border-color: var(--ink); }
.footer-cols {
  max-width: var(--maxw); margin: 0 auto; padding: 46px var(--gutter);
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px;
}
.footer-cols h4 { font-family: inherit; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; font-weight: 600; }
.footer-cols a, .footer-cols li { display: block; padding: 5px 0; font-size: 13.5px; color: var(--ink-soft); list-style: none; }
.footer-cols a:hover { color: var(--ink); }
.footer-blurb { font-size: 13.5px; color: var(--ink-soft); max-width: 40ch; margin-top: 12px; }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 18px var(--gutter);
  max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-faint);
}

/* ---------- Cart drawer ---------- */
.cart-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw, 420px); z-index: 95;
  background: #fff; transform: translateX(100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s .28s;
  display: flex; flex-direction: column;
}
body.cart-open .cart-panel { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.4,0,.2,1); }
body.cart-open .drawer-overlay { opacity: 1; visibility: visible; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.cart-head h3 { font-size: 21px; }
.cart-lines { flex: 1; overflow-y: auto; padding: 6px 22px; }
.cart-line { display: grid; grid-template-columns: 78px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--paper-deep); }
.cart-line img { aspect-ratio: 3/4; object-fit: cover; background: var(--paper); }
.cart-line-name { font-size: 14px; font-weight: 500; }
.cart-line-var { font-size: 12.5px; color: var(--ink-faint); margin: 3px 0 8px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button { width: 28px; height: 28px; display: grid; place-items: center; font-size: 15px; }
.qty span { min-width: 30px; text-align: center; font-size: 13.5px; }
.cart-line-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.link-x { font-size: 12px; color: var(--ink-faint); text-decoration: underline; }
.cart-foot { border-top: 1px solid var(--line); padding: 18px 22px; display: grid; gap: 12px; }
.cart-row { display: flex; justify-content: space-between; font-size: 14px; }
.cart-row.total { font-size: 17px; font-weight: 600; }
.ship-bar { height: 4px; background: var(--paper-deep); border-radius: 2px; overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: var(--ok); transition: width .3s; }
.cart-empty { padding: 60px 22px; text-align: center; color: var(--ink-soft); }

/* ---------- Page shells (collection / product / static) ---------- */
.page { max-width: var(--maxw); margin: 0 auto; padding: 32px var(--gutter) 0; }
.crumbs { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 18px; }
.crumbs a:hover { color: var(--ink); }
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: clamp(30px, 4vw, 52px); }
.page-head p { color: var(--ink-soft); margin-top: 10px; max-width: 60ch; }

.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 26px; flex-wrap: wrap;
}
.toolbar-left { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; }
/* German and Spanish labels run long — the controls wrap rather than widen the page. */
.toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
.toolbar-right .select { min-width: 0; max-width: 100%; }
.count { font-size: 13px; color: var(--ink-faint); }
.select {
  border: 1px solid var(--line); padding: 9px 13px; border-radius: 100px;
  font-size: 13px; background: #fff; cursor: pointer;
}
.select:focus { outline: none; border-color: var(--ink); }

/* filter panel */
.filters { display: grid; gap: 22px; }
.filter-group h4 { font-family: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }
.filter-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opt {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 100px; font-size: 12.5px; transition: .16s;
}
.opt:hover { border-color: var(--ink); }
.opt:active { transform: scale(.96); }
.opt.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.opt-color { width: 26px; height: 26px; border-radius: 50%; padding: 0; border: 1px solid rgba(0,0,0,.18); transition: border-color .16s, box-shadow .16s, transform .12s; }
.opt-color:active { transform: scale(.9); }
.opt-color.is-active { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--ink); }

/* ---------- Product detail ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 54px; align-items: start; }
.pdp-gallery { display: grid; grid-template-columns: 76px 1fr; gap: 12px; position: sticky; top: calc(var(--header-h) + 16px); }
.pdp-thumbs { display: grid; gap: 10px; align-content: start; }
.pdp-thumbs img { aspect-ratio: 3/4; object-fit: cover; background: var(--paper); cursor: pointer; opacity: .55; transition: opacity .18s; }
.pdp-thumbs img.is-active, .pdp-thumbs img:hover { opacity: 1; }
.pdp-main img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--paper); }
.pdp-title { font-size: clamp(28px, 3vw, 40px); }
.pdp-price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 4px; font-size: 22px; font-weight: 600; }
.pdp-rating { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.pdp-block { margin-bottom: 22px; }
.pdp-block .label { font-size: 12px; letter-spacing: .11em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.pdp-block .label em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.size-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.size {
  min-width: 50px; padding: 11px 14px; border: 1px solid var(--line); text-align: center;
  font-size: 13.5px; transition: .16s;
}
.size:hover { border-color: var(--ink); }
.size:not(.is-out):active { transform: scale(.94); }
.size.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.size.is-out { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.link-under { font-size: 12.5px; text-decoration: underline; color: var(--ink-soft); }
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.acc-body { padding: 0 0 18px; font-size: 14px; color: var(--ink-soft); }
.acc-body ul { padding-left: 18px; }
.acc-body li { margin: 5px 0; }
.acc-head i { font-style: normal; font-size: 17px; transition: transform .2s; }
.acc-item.is-open .acc-head i { transform: rotate(45deg); }

/* modal */
@keyframes modalIn { from { opacity: 0; } }
@keyframes modalPanelIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; display: grid; place-items: center; padding: 20px; animation: modalIn .18s ease-out; }
.modal { background: #fff; max-width: 560px; width: 100%; max-height: 84vh; overflow-y: auto; padding: 30px; animation: modalPanelIn .22s cubic-bezier(.2,.6,.3,1); }
.modal h3 { font-size: 24px; margin-bottom: 14px; }
.modal table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 12px; }
.modal th, .modal td { border: 1px solid var(--line); padding: 9px 10px; text-align: center; }
.modal th { background: var(--paper); font-weight: 600; }
.modal-x { position: absolute; top: 14px; right: 16px; font-size: 22px; }

/* ---------- Forms / checkout ---------- */
.form-grid { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field .err { color: var(--sale); font-size: 12px; margin-top: 5px; }
.checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.summary { background: var(--paper); padding: 26px; position: sticky; top: calc(var(--header-h) + 16px); }
.note { font-size: 12.5px; color: var(--ink-soft); background: var(--paper); padding: 12px 14px; border-left: 2px solid var(--ink-faint); }

/* ---------- Language switcher ---------- */
.lang-host { display: inline-flex; align-items: center; }
.lang-select {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 20px 8px 8px; border-radius: var(--radius); color: inherit;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 9px center, right 5px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.lang-select:hover { background-color: var(--paper); }
.lang-select:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }
.lang-host-foot .lang-select { padding-left: 0; font-size: 12.5px; color: var(--ink-faint); }
.lang-host-drawer { display: none; }
.lang-host-drawer .lang-select { padding-left: 0; font-size: 14px; letter-spacing: .04em; }

/* ---------- Help / info page ---------- */
.info-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.info-layout > * { min-width: 0; }
.info-nav { position: sticky; top: calc(var(--header-h) + 16px); display: grid; }
.info-nav a { padding: 8px 0; font-size: 14px; color: var(--ink-soft); }
.info-nav a:hover { color: var(--ink); }
.info-section { padding-bottom: 38px; margin-bottom: 38px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.info-section h2 { font-size: 28px; margin-bottom: 12px; }
.info-body { color: var(--ink-soft); font-size: 14.5px; }
.info-body p + p, .info-body ul { margin-top: 12px; }
.info-body ul { padding-left: 18px; }
.info-body li { margin: 6px 0; }
.info-body .info-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; }
.info-body .info-table th, .info-body .info-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.info-body .info-table th { color: var(--ink); font-weight: 600; }
.info-body .info-table .num { text-align: right; }
.info-body #sizeTbl th, .info-body #sizeTbl td { border: 1px solid var(--line); text-align: center; }
.info-body #sizeTbl th { background: var(--paper); }
/* Tables scroll inside their own box rather than widening the page. */
.info-body .info-table { display: block; overflow-x: auto; white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  :root { --gutter: 28px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .scroll-row > .product-card { flex: 0 0 calc((100% - 2 * 18px) / 3); }
  .moods { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  /* The header has no room for a select on a phone — the drawer carries it. */
  .header-icons .lang-host { display: none; }
  .lang-host-drawer { display: block; }
  .header-inner { gap: 12px; }
  .logo { flex: 1; justify-content: center; }
  .logo .mark { height: 17px; }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pdp-gallery { position: static; grid-template-columns: 1fr; }
  .pdp-thumbs { grid-template-columns: repeat(5, 1fr); }
  .checkout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .summary { position: static; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .perks { grid-template-columns: repeat(2, 1fr); }
  .perk:nth-child(2) { border-right: 0; }
  .perk:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero-slide img { aspect-ratio: 4/3; object-position: 68% center; }
  .hero-copy > * { max-width: 340px; }
}
@media (max-width: 1100px) and (min-width: 961px) {
  /* Tablet keeps the two-column editorial split and the four-up grid. */
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .perks { grid-template-columns: repeat(4, 1fr); }
  .footer-cols { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .pdp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .checkout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hero-slide img { aspect-ratio: 9/5; }
}
@media (max-width: 880px) {
  .info-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .info-nav {
    position: static; grid-auto-flow: column; grid-auto-columns: max-content;
    gap: 16px; overflow-x: auto; padding-bottom: 10px;
    border-bottom: 1px solid var(--line); scrollbar-width: none;
  }
  .info-nav::-webkit-scrollbar { display: none; }
  .info-nav a { white-space: nowrap; font-size: 13px; }
}
@media (max-width: 640px) {
  :root { --gutter: 14px; --header-h: 56px; }
  body { font-size: 14px; }
  /* Cider's signature: dense two-up grid on mobile */
  .grid, .grid.grid-3 { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .scroll-row > .product-card { flex: 0 0 62%; }
  .moods { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mood-name { font-size: 20px; }
  .mood-tag { font-size: 11.5px; }
  .car-arrow { display: none; }
  .section { padding-top: 44px; }
  .product-name { font-size: 13px; }
  .product-price { font-size: 14px; }
  /* On a phone the full-width bar hides the hem — shrink it to a corner pill. */
  .quick-add {
    transform: none; left: auto; right: 7px; bottom: 7px;
    width: auto; padding: 8px 13px; border-radius: 100px; font-size: 10.5px;
    letter-spacing: .08em; box-shadow: 0 1px 6px rgba(0,0,0,.12);
  }
  .wish { opacity: 1; }
  .hero-slide img { aspect-ratio: 4/5; object-position: 72% center; }
  .hero-copy {
    justify-content: flex-end; padding: 0 18px 34px;
    background: linear-gradient(to top,
      rgba(243,241,236,.97) 0%, rgba(243,241,236,.9) 26%, rgba(243,241,236,.45) 48%, rgba(243,241,236,0) 70%);
  }
  .hero-dark.hero-copy {
    background: linear-gradient(to top,
      rgba(16,18,22,.94) 0%, rgba(16,18,22,.82) 26%, rgba(16,18,22,.38) 48%, rgba(16,18,22,0) 70%);
  }
  .hero-copy > * { max-width: none; }
  .hero-sub { margin: 12px 0 20px; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .hero-dots { bottom: 8px; }
  .hero-arrow { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .news-form { flex-direction: column; }
  .news-form .btn { width: 100%; }
  .btn { padding: 13px 20px; }
  .footer-cols { grid-template-columns: 1fr; }
  .perks { grid-template-columns: 1fr; }
  .perk { border-right: 0; border-bottom: 1px solid var(--line); }
  .pdp-thumbs { grid-template-columns: repeat(4, 1fr); }
}
/* Small phones: the header is the tightest row on the site. */
/* ---------- wordmark placement ----------
   One button on the left, four on the right: centring the mark in the space
   left over puts it 46px left of the middle of a phone screen, which is what
   shipped until now. Below, the icons go compact across every phone width so
   the mark can be centred on the screen itself rather than on the gap — and
   the absolute centring only switches on where the mark still clears the
   icons. Under 380px there isn't room, so it goes back in flow. */
@media (max-width: 640px) {
  .icon-btn { padding: 6px; }
  .icon-btn svg { width: 19px; height: 19px; }
  .header-icons { gap: 3px; }
  .logo .mark { height: 15px; }
  .logo .mark path { stroke-width: 14; }
}
@media (min-width: 376px) and (max-width: 1100px) {
  .header-inner { position: relative; }
  .header-inner > .logo { position: absolute; left: 50%; transform: translateX(-50%); }
  /* the mark is out of flow now, so nothing is left to push the icons over */
  .header-icons { margin-left: auto; }
}
@media (max-width: 400px) {
  :root { --gutter: 10px; }
  /* Two review cards do not fit a 320px screen in German. */
  .grid.grid-3 { grid-template-columns: minmax(0, 1fr); }
  .header-inner { gap: 4px; }
  .lang-select { padding: 6px 16px 6px 4px; font-size: 11px; background-position: right 6px center, right 2px center; }
  .logo .mark { height: 13px; }
  /* A smaller mark is a thinner hairline. Give the stroke back what the
     size took, or the thins grey out on a 1x screen. */
  .logo .mark path { stroke-width: 17; }
  /* The narrowest phones only clear the icons if the icons give ground too. */
  .icon-btn { padding: 5px; }
  .icon-btn svg { width: 18px; height: 18px; }

  .announce { font-size: 11.5px; }
  .grid, .grid.grid-3 { gap: 16px 8px; }
}

/* ---------- account: one column, email first ---------- */
.auth-card {
  max-width: 400px;
  margin: 0 auto;
  padding: 26px 0 56px;
}
@media (max-width: 640px) { .auth-card { padding-top: 8px; } }
.auth-h {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 8px;
}
.auth-blurb {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 22px;
}
.auth-who {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding: 11px 13px;
  margin-bottom: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.auth-who > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.auth-who button { flex: none; font-size: 13px; }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-google svg { flex: none; }
.btn-google:disabled { opacity: .45; cursor: not-allowed; }

.auth-note {
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.5;
  margin-top: 9px;
  text-align: center;
}

/* rule with the word sitting in the gap */
.auth-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
}
.auth-or::before,
.auth-or::after {
  content: "";
  height: 1px;
  background: var(--line);
}
.auth-or span {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field-hint {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 5px;
}
.auth-card .err {
  color: var(--sale);
  font-size: 13px;
  line-height: 1.45;
}