/* ═══════════════════════════════════════════════════════════════
   MEMES OF THE FLOATING WORLD — SHOP STYLESHEET
   Design language: modern Japanese minimalism (Muji-inspired).
   Warm paper tones, ink text, hairline rules, generous whitespace.
   :root tokens + HEADING/TYPE STYLES blocks are managed by the
   CMS Token Manager — edit those only via the editor.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper: #f6f4ef;
  --ink: #22211e;
  --warm-gray: #eae7e0;
  --line: #dcd8cf;
  --muted: #8f8b82;
  --nav-link: #6f6b64;   /* darker grey for nav/filter links — meets WCAG AA (4.8:1 on paper) */
  --accent: #9a3b2e;
  --accent-light: #f0e5e1;
  --announcement-bg: #9a3b2e;
  --sans: 'Zen Kaku Gothic New', 'Helvetica Neue', Helvetica, sans-serif;
  --serif: 'Shippori Mincho', Georgia, serif;
  --nav-h: 60px;
  --announcement-h: 36px;
  --content-w: 680px;
  --wide-w: 1120px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-3: 16px;
  --review-bg: #464646;
  --review-text: #e6e6e6;
  --review-accent: #e05b33;
  --footer-bg: #3a3a3a;   /* darker grey — footer body, below the newsletter blade */
}

/* ── RESET / BASE ─────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

button { font-family: inherit; }

::selection { background: var(--accent-light); }

/* ── ANNOUNCEMENT BAR ─────────────────────────────────────────── */

.announcement-bar {
  height: var(--announcement-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--announcement-bg);
  color: var(--paper);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 0 var(--space-4);
}
.announcement-bar a { color: inherit; text-decoration: none; }
.announcement-bar a:hover { text-decoration: underline; }
.announcement-bar strong { font-weight: 700; }

/* ── NAV ──────────────────────────────────────────────────────── */

#main-nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: relative;   /* not sticky — scrolls away with the page; still anchors the lozenge */
  z-index: 100;
}

.nav-logo {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--nav-link);
  transition: color 0.2s ease;
  padding-bottom: 4px;
}

.nav-links a:hover { color: var(--ink); }

.nav-links a.active {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

.nav-cart { position: relative; }

.cart-count[hidden] { display: none; }

.cart-count {
  display: inline-block;
  margin-left: 6px;
  background: var(--accent);
  color: var(--paper);
  font-size: 10px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  vertical-align: 2px;
}

.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: var(--space-2); }
.nav-burger span { display: block; width: 20px; height: 1px; background: var(--ink); margin: 5px 0; transition: 0.2s; }

/* Shop category dropdown (desktop: hover/focus; mobile: indented, see below) */
.nav-links { height: var(--nav-h); align-items: center; }
.nav-has-dropdown { position: relative; align-self: stretch; display: flex; align-items: center; }
/* The dropdown makes this anchor a flex item (display:block), so its
   padding-bottom now counts toward the box and centering pulls the text up.
   A little padding-top drops it back onto the same baseline as the inline
   links (tuned so the text baselines match to within a sub-pixel). */
.nav-has-dropdown > a { padding-top: 6px; }
.nav-dropdown {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 175px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: none;
  flex-direction: column;
  gap: 0;
  z-index: 200;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown { display: flex; }
.nav-dropdown li { padding: 0; }
.nav-dropdown a {
  display: block;
  padding: 7px var(--space-4);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--nav-link);
  white-space: nowrap;
}
.nav-dropdown a:hover { color: var(--ink); background: var(--warm-gray); }

/* Floating logo lozenge — two stamps on a white card with a drop shadow.
   Desktop/tablet: vertical (round over square), floats out of the nav's left,
   overflowing downward over the hero. Mobile: horizontal, inline in the nav. */
#main-nav { padding-left: 150px; }
.nav-lozenge {
  position: absolute;
  left: 30px;
  /* Drop from the window top by half the announcement bar so the lozenge
     overlaps its lower half. Nav sits directly below the bar, so relative to
     the nav that's minus half the bar height. */
  top: calc(var(--announcement-h) / -2);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 95px;
  padding: 10px 10px 8px;
  background: #fff;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.lozenge-stamp { display: block; width: 64px; height: 63px; object-fit: contain; }
.lozenge-divider { width: 63px; height: 1px; background: #000; flex-shrink: 0; }

/* ── LAYOUT PRIMITIVES ────────────────────────────────────────── */

main { min-height: 60vh; }

.section-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-5);
}

.btn {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 32px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  border-radius: 1px;
}

.btn:hover { background: var(--ink); color: var(--paper); }

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: none; }

/* ── HOMEPAGE ─────────────────────────────────────────────────── */

/* Hero — text left, product image right; stacks (image on top) on mobile */
.hero {
  max-width: 1360px;
  margin: 0 auto;
  /* Left padding aligns the text with the wordmark and clears the lozenge;
     right padding aligns the carousel with the body content edge. */
  padding: var(--space-7) var(--space-9) 38px 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.hero-text { flex: 0 1 400px; }

.hero-title {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}

.hero-tagline {
  font-size: 15px;
  color: #464646;
  line-height: 1.5;
  margin: 0 0 var(--space-5);
  max-width: 380px;
}

.hero-image { flex: 0 0 auto; width: min(600px, 50vw); }
.hero-image > img { display: block; width: 100%; height: auto; }

/* Hero product carousel — a fixed square stage; each product image sits
   centered inside (contain) so mixed aspect ratios never shift the layout.
   Slides stack in one grid cell and crossfade via opacity. */
.hero-carousel { position: relative; }
.hero-slides { display: grid; }
.hero-slide {
  grid-area: 1 / 1;
  display: block;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 600 / 444;
  overflow: hidden;
}
.hero-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.hero-caption {
  display: block;
  margin-top: var(--space-3);
  text-align: right;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  transition: color 0.2s ease;
}
.hero-slide:hover .hero-caption { color: var(--accent); }

/* Prev/next chevrons — on the row below the stage, bottom-left (caption sits
   bottom-right on the same row). Always visible. */
.hero-nav {
  position: absolute;
  bottom: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(246, 244, 239, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 3;
}
.hero-prev { left: 0; }
.hero-next { left: 40px; }
.hero-nav:hover { color: var(--accent); }
.hero-nav svg { display: block; width: 18px; height: 18px; }

.home-section {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-9);
}

.series-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--warm-gray);
}

.series-strip-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.series-strip-inner p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

/* Space between stacked paragraphs in the homepage blurb (this section only) */
.series-strip-inner p + p { margin-top: 1.4em; }

/* ── PRODUCT GRID ─────────────────────────────────────────────── */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-5);
}

.product-card { text-decoration: none; }

.product-card-image {
  aspect-ratio: 1 / 1;
  background: var(--warm-gray);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-card-image img { transform: scale(1.03); }

.product-card-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 2px;
}

.product-card-price {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.product-card-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: var(--space-1);
}

/* ── SHOP PAGE ────────────────────────────────────────────────── */

.shop-page {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
}

.shop-header { margin-bottom: var(--space-7); }

.shop-header h1 {
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 var(--space-4);
}

.shop-filters {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-3);
}

.shop-filters button {
  background: none;
  border: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--nav-link);
  cursor: pointer;
  padding: 0 0 4px;
}

.shop-filters button.active { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* Count of in-stock specials beside the Specials filter — matches the nav cart badge */
.filter-count[hidden] { display: none; }
.filter-count {
  display: inline-block;
  margin-left: 6px;
  background: var(--accent);
  color: var(--paper);
  font-size: 10px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  vertical-align: 2px;
  letter-spacing: 0;
}

/* ── PRODUCT PAGE ─────────────────────────────────────────────── */

.product-page {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
}

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.product-main-image {
  background: var(--warm-gray);
  overflow: hidden;
}

/* Per-product image ratio, set via imageRatio frontmatter (CMS: Images card) */
.product-main-image.ratio-portrait { aspect-ratio: 2 / 3; }   /* 12×18 in */
.product-main-image.ratio-landscape { aspect-ratio: 3 / 2; }  /* 18×12 in */
.product-main-image.ratio-square { aspect-ratio: 1 / 1; }
.product-main-image.ratio-pair { aspect-ratio: 1588 / 1183; }  /* two prints side by side */

.product-main-image img { width: 100%; height: 100%; object-fit: cover; }

.product-main-image[data-zoom] { cursor: zoom-in; position: relative; }
.product-main-image[data-zoom]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Small zoom affordance, bottom-right of the main image */
.zoom-hint {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(246, 244, 239, 0.9);
  color: var(--ink);
  font-size: 15px;
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.product-main-image[data-zoom]:hover .zoom-hint,
.product-main-image[data-zoom]:focus-visible .zoom-hint { opacity: 1; }

/* ── PRODUCT IMAGE LIGHTBOX ───────────────────────────────────── */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(34, 33, 30, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.lightbox-overlay[hidden] { display: none; }

.lightbox-img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
}

.lightbox-close {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border: 1px solid rgba(246, 244, 239, 0.4);
  background: transparent;
  color: var(--paper);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lightbox-close:hover { background: var(--paper); color: var(--ink); }

/* ── CONTACT MODAL ────────────────────────────────────────────── */
.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(34, 33, 30, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  overflow-y: auto;
}
.contact-overlay[hidden] { display: none; }

.contact-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-7) var(--space-6) var(--space-6);
  border-radius: var(--radius-2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.contact-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
.contact-close:hover { color: var(--ink); }

.contact-title { font-size: 22px; font-weight: 500; margin: 0 0 6px; }
.contact-intro { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 var(--space-5); }

.contact-field { margin-bottom: var(--space-4); }
.contact-field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: 11px 12px;
  transition: border-color 0.2s ease;
}
.contact-field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.contact-field input:focus,
.contact-field textarea:focus { outline: none; border-color: var(--ink); }

/* Error state */
.contact-field.has-error input,
.contact-field.has-error textarea { border-color: var(--accent); background: #fbf2f0; }
.contact-field-error {
  display: none;
  font-size: 12px;
  color: var(--accent);
  margin-top: 5px;
}
.contact-field.has-error .contact-field-error { display: block; }

.contact-form-error {
  font-size: 13px;
  color: var(--accent);
  margin: 0 0 var(--space-4);
}

.contact-send { width: 100%; margin-top: var(--space-2); }

/* Honeypot — visually hidden, kept in the a11y/keyboard flow off-screen */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-success { text-align: center; padding: var(--space-4) 0; }
.contact-success .contact-intro { margin-bottom: var(--space-6); }
.contact-close-success { min-width: 160px; }

.product-thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.product-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--warm-gray);
  cursor: pointer;
  overflow: hidden;
}

.product-thumb.active { border-color: var(--ink); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-category {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}

.product-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}

.product-price {
  font-size: 17px;
  margin: 0 0 var(--space-5);
}

.variant-picker {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}

.variant-picker legend {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: var(--space-2);
}

.variant-option { display: inline-block; margin: 0 var(--space-2) var(--space-2) 0; }
.variant-option input { position: absolute; opacity: 0; }

.variant-chip {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease;
  border-radius: 1px;
}

.variant-chip em {
  font-style: normal;
  color: var(--muted);
  margin-left: 8px;
  font-size: 12px;
}

.variant-option input:checked + .variant-chip { border-color: var(--ink); background: #fff; }
.variant-option input:focus-visible + .variant-chip { outline: 2px solid var(--accent); outline-offset: 2px; }

.stock-note {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-3);
}

.product-actions {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
  margin-bottom: var(--space-3);
}

.qty-stepper {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 1px;
}

.qty-stepper button {
  width: 36px;
  border: none;
  background: none;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
}

.qty-stepper button:hover { color: var(--ink); }

/* Last-unit trash button — clicking it removes the line item. */
.qty-stepper .qty-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.qty-stepper .qty-remove:hover { color: var(--accent); }
.qty-trash { display: block; }

/* Tooltip — fades in only after 750ms of continuous hover (delay applies on
   hover-in; on hover-out the delay resets to 0 so it disappears immediately). */
.qty-remove::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease 0s;
  z-index: 2;
}
.qty-remove:hover::after,
.qty-remove:focus-visible::after {
  opacity: 1;
  transition-delay: 750ms;
}

.qty-stepper input {
  width: 40px;
  border: none;
  background: none;
  text-align: center;
  font-size: 14px;
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.add-confirm { font-size: 13px; color: var(--accent); margin: 0 0 var(--space-3); }
.add-confirm a { color: inherit; }

.shipping-note {
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  margin: var(--space-5) 0 0;
}

.product-description { margin-top: var(--space-5); }

.related { border-top: 1px solid var(--line); padding-top: var(--space-7); }

/* Enlarge the random emoji after the related-products heading (75% bigger)
   so it's easier to recognize. Inline-block + slight nudge keeps the baseline. */
[data-related-emoji] {
  display: inline-block;
  font-size: 1.75em;
  line-height: 1;
  vertical-align: -0.15em;
}

/* Related-products auto-advancing carousel — see src/js/related-carousel.js.
   The track holds every pooled card; JS sizes each card to the visible count
   and slides the strip one card left every 10s (conveyor). Card width is set
   by JS; the gap here is read back by JS so the two stay in sync. */
.related-carousel { overflow: hidden; }
.related-track {
  display: flex;
  gap: var(--space-5);
  will-change: transform;
}
.related-track .related-card { flex: 0 0 auto; }

/* Manual prev/next chevrons flanking the carousel (added by JS) */
.related-carousel-wrap { display: flex; align-items: center; gap: var(--space-3); }
.related-carousel-wrap .related-carousel { flex: 1 1 auto; min-width: 0; }
.related-nav {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.related-nav svg { display: block; }
.related-nav:hover { color: var(--accent); border-color: var(--accent); }
.related-back { text-align: center; margin-top: var(--space-7); }

/* ── CART PAGE ────────────────────────────────────────────────── */

.cart-page {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
}

.cart-page h1 { font-size: 26px; font-weight: 500; margin: 0 0 var(--space-6); }

.cart-empty { color: var(--muted); padding: var(--space-8) 0; text-align: center; }

.cart-items { border-top: 1px solid var(--line); }

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.cart-item-image { width: 80px; height: 80px; background: var(--warm-gray); overflow: hidden; }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }

.cart-item-title { font-size: 14px; font-weight: 500; margin: 0; }
.cart-item-variant { font-size: 12px; color: var(--muted); margin: 2px 0 0; }

.cart-item-remove {
  background: none;
  border: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: var(--space-2);
}

.cart-item-price { font-size: 14px; text-align: right; min-width: 64px; }

.cart-summary {
  margin-top: var(--space-6);
  margin-left: auto;
  max-width: 380px;
}

.cart-destination { margin-bottom: var(--space-5); }

.cart-destination p {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}

.cart-coupon { margin-bottom: var(--space-4); }

.coupon-row { display: flex; gap: var(--space-2); }

.coupon-input {
  flex: 1;
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.04em;
  border-radius: 1px;
  text-transform: uppercase;
}

.coupon-input:focus { outline: none; border-color: var(--ink); }

.coupon-row .btn { padding: 10px 20px; }

.cart-country {
  text-transform: none;
  letter-spacing: normal;
  width: 100%;
  cursor: pointer;
}

.coupon-applied { font-size: 13px; margin: 0; }
.coupon-msg { margin-top: var(--space-2); }

.cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: var(--space-2) 0;
}

.cart-row.discount span:last-child { color: var(--accent); }

.cart-row.total {
  border-top: 1px solid var(--ink);
  font-weight: 500;
  font-size: 16px;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}

.cart-checkout { width: 100%; margin-top: var(--space-4); }

.cart-error { font-size: 13px; color: var(--accent); margin-top: var(--space-3); }

.cart-fineprint { font-size: 11px; color: var(--muted); margin-top: var(--space-3); margin-bottom: 64px; }

/* ── CONTENT PAGES / BLOG ─────────────────────────────────────── */

.content-page {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
}

.page-header { margin-bottom: var(--space-6); }
.page-header h1 { margin: 0; }
.page-subtitle { color: var(--muted); margin: var(--space-2) 0 0; }

/* ── BLOG FEED (Pinterest-style masonry) ──────────────────────── */

.blog-feed-page {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
}

.blog-masonry {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.masonry-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.blog-card {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

/* Uncropped: natural aspect, container snaps to image height */
.blog-card img,
.blog-card-canvas {
  width: 100%;
  height: auto;
  display: block;
  background: var(--warm-gray);
  /* Hidden until the image is decoded; JS then adds .is-loaded to the CARD,
     which reveals the image AND its title together (below) via a plain
     declaration (so nothing gets stuck mid-transition) plus a one-shot fade. */
  opacity: 0;
}
.blog-card.is-loaded img,
.blog-card.is-loaded .blog-card-canvas,
.blog-card.is-loaded .blog-card-title {
  opacity: 1;
  animation: blog-thumb-fade 0.5s ease;
}
@keyframes blog-thumb-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .blog-card.is-loaded img,
  .blog-card.is-loaded .blog-card-canvas,
  .blog-card.is-loaded .blog-card-title { animation: none; }
}

/* Animated-GIF thumbnail: frozen first frame + corner "GIF" badge (Pinterest-style) */
.blog-card-media {
  position: relative;
  display: block;
}
.blog-gif-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(34, 33, 30, 0.82);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 2px 6px;
  border-radius: var(--radius-2);
  pointer-events: none;
}

.blog-card-noimg {
  background: var(--warm-gray);
  padding: var(--space-7) var(--space-4);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}

.blog-card-title {
  font-size: 13.5px;
  font-weight: 500;
  margin: var(--space-2) 0 0;
  transition: color 0.2s ease;
  opacity: 0; /* hidden until the card's image loads (JS adds .is-loaded to the card) */
}

.blog-card:hover img, .blog-card:hover .blog-card-canvas, .blog-card:hover .blog-card-noimg { opacity: 0.92; }
.blog-card:hover .blog-card-title { color: var(--accent); }

.blog-noscript { list-style: none; padding: 0; }
.blog-noscript li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }

/* ── POST MODAL ───────────────────────────────────────────────── */

.post-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(34, 33, 30, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.post-modal-overlay[hidden] { display: none; }

.post-modal {
  position: relative;
  background: var(--paper);
  width: min(1080px, 100%);
  height: min(720px, 88vh);
  display: grid;
  grid-template-columns: 1.6fr 1fr;   /* image-dominant, golden-ish ratio */
  overflow: hidden;
}

.post-modal.no-media {
  grid-template-columns: 1fr;
  width: min(640px, 100%);
  height: auto;
  max-height: 88vh;
}

.post-modal.no-media .post-modal-media { display: none; }

.post-modal-media {
  position: relative;
  background: var(--warm-gray);
  min-width: 0;
}

.post-modal-text {
  padding: var(--space-7) var(--space-6);
  overflow-y: auto;
  min-width: 0;
}

.post-modal-text h2 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
  padding-right: var(--space-7); /* clear the X button */
}

.post-modal-date {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-5);
}

.post-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 6;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.post-modal-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── CAROUSEL (Instagram-style) ───────────────────────────────── */

.carousel { position: absolute; inset: 0; overflow: hidden; }

.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s ease;
}

.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.carousel-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(246, 244, 239, 0.92);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
}

.carousel-nav:hover { background: var(--paper); }
.carousel-prev { left: var(--space-3); }
.carousel-next { right: var(--space-3); }

.carousel-dots {
  position: absolute;
  bottom: var(--space-3);
  left: 0;
  right: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  z-index: 4;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(34, 33, 30, 0.25);
  cursor: pointer;
}

.carousel-dot.active { background: var(--accent); }

.thanks-page {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.thanks-page h1 { font-size: 26px; font-weight: 500; }
.thanks-jp { font-family: var(--serif); letter-spacing: 0.4em; color: var(--muted); }

/* ── BLOCK TEXT (markdown content) ────────────────────────────── */

.block-text { font-size: 15px; }
.block-text p { margin: 0 0 var(--space-4); }
.block-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.block-text ul, .block-text ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.block-text blockquote {
  border-left: 2px solid var(--accent);
  margin: var(--space-5) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  font-family: var(--serif);
  font-size: 17px;
}
.block-text hr { border: none; border-top: 1px solid var(--line); margin: var(--space-6) 0; }
.block-text img { margin: var(--space-5) 0; }

/* Content-page (About) images break out 20% wider than the text column,
   staying centered via symmetric negative margins. */
.content-page .block-text img {
  width: 120%;
  max-width: 120%;
  margin-left: -10%;
  margin-right: -10%;
}

/* ── HEADING STYLES ── BEGIN
   Managed by the CMS Token Manager — do not edit by hand. */
.block-text h1, .page-header h1 {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-4);
}
.block-text h2 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: var(--space-6) 0 var(--space-3);
}
.block-text h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: var(--space-6) 0 var(--space-3);
}
.block-text h4 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  margin: var(--space-5) 0 var(--space-2);
}
.block-text h5 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: var(--space-5) 0 var(--space-2);
}
/* ── HEADING STYLES ── END */

/* ── TYPE STYLES ── BEGIN
   Managed by the CMS Token Manager — do not edit by hand. */
.ts-lead {
  font-size: 18px;
  line-height: 1.8;
  color: var(--ink);
}
.ts-caption {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
/* ── TYPE STYLES ── END */

/* ── FOOTER ───────────────────────────────────────────────────── */

footer {
  border-top: 1px solid #dcd8cf;
  background: var(--footer-bg);
  font-family: var(--sans);
}

/* Newsletter signup strip (top of footer) — stays a shade lighter than the
   footer body below it. */
.footer-signup { background: #464646; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-signup-inner {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 30px var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.fs-copy { max-width: 44ch; }
.fs-title { font-family: var(--serif); font-size: 22px; color: #f6f4ef; margin: 0 0 4px; }
.fs-sub { font-size: 14px; color: #cfccc4; margin: 0; line-height: 1.5; }
.fs-sub strong { color: #e05b33; font-weight: 700; }
.fs-form { flex: 0 0 auto; min-width: 320px; }
.fs-field { display: flex; gap: 8px; }
.fs-field input {
  flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 15px;
  color: #22211e; background: #f6f4ef; border: 1px solid transparent;
  border-radius: 2px; padding: 11px 14px;
}
.fs-field input:focus { outline: none; border-color: #e05b33; }
.fs-field button {
  flex: 0 0 auto; font-family: inherit; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; color: #f6f4ef; background: #9a3b2e;
  border: 0; border-radius: 2px; padding: 0 22px; cursor: pointer; transition: background 0.2s ease;
}
.fs-field button:hover { background: #e05b33; }
.fs-field button[disabled] { opacity: 0.55; cursor: default; }
.fs-msg { font-size: 13px; margin: 10px 0 0; }
.fs-msg-ok { color: #bfe3c8; }
.fs-msg-err { color: #f0a89b; }
.fs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) {
  .footer-signup-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .fs-form { width: 100%; min-width: 0; }
}

.footer-inner {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 36px var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
}

/* Left — logo + brand text */
.footer-brand { display: flex; align-items: center; gap: 11px; }
.footer-logo { width: 83px; height: auto; flex-shrink: 0; }
.footer-brand-text { display: flex; flex-direction: column; gap: 8px; }

.footer-name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: #f6f4ef;
  line-height: 1.2;
  margin: 0;
}
.footer-copy {
  font-size: 12px;
  color: #dcd8cf;
  line-height: 1.7;
  margin: 0;
  max-width: 400px;
}

/* Right — socials, copyright, legal links */
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-end;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}
.footer-socials a {
  font-size: 14px;
  font-weight: 700;
  color: #e05b33;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-socials a:hover { color: #f6f4ef; }
/* "Contact Us" is a button but reads as a social link */
.footer-contact-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #e05b33;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1.2;
  transition: color 0.2s ease;
}
.footer-contact-btn:hover { color: #f6f4ef; }
.footer-copyright { font-size: 12px; color: #dcd8cf; line-height: 1.2; margin: 0; }
.footer-legal a {
  font-size: 12px;
  color: #dcd8cf;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal a:hover { color: #f6f4ef; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */

/* Where the lozenge floats (desktop + tablet, >640px), inner-page content
   needs extra top clearance so it starts below the lozenge's overhang.
   (The homepage hero clears it on the left instead; mobile lozenge is inline.) */
@media (min-width: 641px) {
  .shop-page, .product-page, .cart-page, .content-page, .blog-feed-page { padding-top: 84px; }
}
@media (min-width: 901px) {
  .shop-page, .product-page, .cart-page, .content-page, .blog-feed-page { padding-top: 108px; }
}

@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }

  /* Nav collapses to a burger; wordmark centers in the bar (below the centered
     announcement text), between the floating lozenge and the burger. */
  #main-nav { padding-left: 120px; }
  .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    margin: 0;
  }
  .nav-burger { display: block; margin-left: auto; }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    height: auto;
    align-items: stretch;
    padding: var(--space-3) var(--space-4);
  }
  .nav-links li { padding: var(--space-2) 0; }
  #main-nav.open .nav-links { display: flex; }

  /* Shop categories become indented sub-links in the open menu */
  .nav-has-dropdown { display: block; align-self: auto; }
  .nav-has-dropdown > a { padding-top: 0; }   /* desktop baseline fix not needed here */
  .nav-dropdown {
    position: static;
    display: flex;
    border: none;
    min-width: 0;
    padding: var(--space-1) 0 0;
  }
  .nav-dropdown a { padding: var(--space-2) 0 var(--space-2) var(--space-4); }

  /* Lozenge: smaller vertical card */
  .nav-lozenge { left: 29px; width: 77px; gap: 8px; padding: 10px 9px 8px; }
  .lozenge-stamp { width: 51px; height: 50px; }
  .lozenge-divider { width: 51px; }

  /* Hero: tighter two-column (still clears the smaller lozenge on the left) */
  .hero { padding: var(--space-7) var(--space-6) var(--space-7) 120px; gap: var(--space-6); }
  .hero-title { font-size: 36px; }
}

@media (max-width: 640px) {
  /* On phones the text column is already near full width — keep the About
     image inside it rather than overflowing the viewport. */
  .content-page .block-text img { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }

  /* Announcement bar: reserve the floating lozenge's left zone so long text
     never slides under it. Text stays centered and wraps (up to ~2 lines). */
  .announcement-bar {
    height: auto;
    min-height: var(--announcement-h);
    padding: 6px 74px;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0.04em;
  }

  /* Mobile nav: compact vertical floating lozenge (left), burger on the right */
  #main-nav { padding: 0 20px; }
  .nav-logo { font-size: 11px; letter-spacing: 0.06em; }   /* fit the centered wordmark */
  .nav-lozenge { left: 16px; width: 52px; gap: 6px; padding: 7px 7px 6px; }
  .lozenge-stamp { width: 38px; height: 38px; }
  .lozenge-divider { width: 38px; height: 1px; }

  /* Hero: product image on top (full-bleed), centered text below */
  .hero {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 40px 0 var(--space-8);   /* top gap so the image clears the lozenge */
    text-align: center;
  }
  .hero-image { order: -1; width: 100%; margin-bottom: var(--space-6); }
  /* Image stays full-bleed; only the caption + prev/next row gets 12px of edge padding */
  .hero-caption { padding-left: 12px; padding-right: 12px; }
  .hero-prev { left: 12px; }
  .hero-next { left: 52px; }
  .hero-text { flex: none; max-width: none; padding: 0 var(--space-4); }
  .hero-title { font-size: 24px; }
  .hero-tagline { max-width: none; margin: 0 auto var(--space-5); }

  .home-section, .shop-page, .product-page, .cart-page, .content-page { padding-left: var(--space-4); padding-right: var(--space-4); }

  .cart-item { grid-template-columns: 64px 1fr auto; }
  .cart-item-image { width: 64px; height: 64px; }
  .cart-item .qty-stepper { grid-column: 2; justify-self: start; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { align-items: flex-start; }
  .footer-links { justify-content: flex-start; }

  /* Post modal takes over the whole screen on mobile */
  .post-modal-overlay { padding: 0; }

  .post-modal,
  .post-modal.no-media {
    width: 100%;
    height: 100%;
    max-height: none;
    display: block;
    overflow-y: auto;
  }

  .post-modal-media { height: 58vh; }

  .post-modal-text {
    overflow-y: visible;
    padding: var(--space-6) var(--space-4) var(--space-9);
  }

  .post-modal-text h2 { padding-right: 0; }

  /* X stays pinned top-right while the post scrolls */
  .post-modal-close {
    position: fixed;
    top: var(--space-3);
    right: var(--space-3);
  }
}

/* ── CUSTOMER REVIEWS STRIP ─────────────────────────────────────
   Full-bleed dark bar with a color-burn paper texture (matches the
   Penpot "reviews" boards). Content is capped to the featured-grid
   width so it never exceeds the image grid above. Cycling + typing
   handled by src/js/reviews.js. */
.reviews-strip {
  position: relative;
  overflow: hidden;
  background: var(--review-bg);
  margin: var(--space-9) 0;
  padding: var(--space-6) 24px;
}
/* Halve the gap above the reviews strip when it breaks the featured grid:
   drop its top margin so only the grid section's bottom padding remains. */
.home-section + .reviews-strip { margin-top: 0; }
.reviews-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/images/misc/reviews_paper_texture_bg.jpg) center / cover no-repeat;
  mix-blend-mode: color-burn;
  opacity: 0.52;
  pointer-events: none;
}
/* Shop page: full-bleed placement as a grid item spanning all product columns */
.reviews-strip--shop {
  grid-column: 1 / -1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-block: var(--space-6);
}
.reviews-inner {
  position: relative; /* above the texture */
  z-index: 1;
  max-width: var(--wide-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  transition: opacity 1000ms ease;
}
.reviews-strip.is-fading .reviews-inner { opacity: 0; }

.reviews-avatar {
  flex: 0 0 auto;
  width: 188px;
  min-height: 188px;
  align-self: stretch; /* scale up with the text column */
  display: flex;
  align-items: center;
  justify-content: center;
}
.reviews-avatar-img {
  width: 100%;
  height: 100%;
  max-height: 275px;
  object-fit: contain;
}

.reviews-body { flex: 1 1 auto; min-width: 0; max-width: 630px; }
.reviews-text {
  margin: 0;
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.4;
  color: var(--review-text);
  white-space: pre-line;
}
.reviews-meta { margin: var(--space-3) 0 0; min-height: 1em; }
.reviews-name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--review-accent);
  opacity: 0;
  transition: opacity 400ms ease;
}
.reviews-name.is-in { opacity: 1; }

.reviews-thumb {
  flex: 0 0 auto;
  width: 176px;
  height: 176px;
  align-self: center;
  display: block;
}
.reviews-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tablet */
@media (max-width: 900px) {
  .reviews-inner { gap: var(--space-5); }
  .reviews-text { font-size: 20px; }
  .reviews-avatar { width: 150px; min-height: 150px; }
  .reviews-thumb { width: 140px; height: 140px; }
}

/* Mobile — review text on top (full width), avatar + thumbnail beneath */
@media (max-width: 620px) {
  .reviews-strip { padding: var(--space-6) 20px; }
  .reviews-inner { flex-wrap: wrap; align-items: flex-start; }
  .reviews-body { flex: 1 1 100%; order: -1; }
  .reviews-text { font-size: 18px; }
  .reviews-avatar { width: 130px; min-height: 130px; }
  .reviews-thumb { width: 120px; height: 120px; margin-left: auto; }
}

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