/* Generated by scripts/build-rtl.js (rtlcss). Do not edit; edit the LTR source and rebuild. */
/* ============================================================
   RIVISTA · Collage editorial — shared design system
   ============================================================ */
:root {
  --paper:   #ffffff;
  --paper-2: #f7f5f0;
  --paper-3: #efebe1;
  --ink:     #14130f;
  --ink-2:   #4a4842;
  --ink-3:   #5e5c56;
  --line:    #e9e6dc;

  --sky:     #cfe6f0;
  --butter:  #f5ecc0;
  --rose:    #f0d8d2;
  --terra:   #c4452a;
  /* --accent is the high-contrast brand colour used for TEXT (links,
     prices, eyebrows, dots). It falls back to --terra for palettes
     whose brand colour already meets WCAG AA on paper; palettes whose
     --terra is too light override --accent with a darker shade. */
  --accent:  #c4452a;

  --leaf-1:  #4a7c4d;
  --leaf-2:  #5e9362;
  --leaf-3:  #2f5a32;

  --display: "Space Grotesk", -apple-system, sans-serif;
  --serif:   "Instrument Serif", Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --shell: 1320px;
  --pad-x: clamp(24px, 4vw, 56px);
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur: 360ms;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
input { font: inherit; }
::selection { background: var(--ink); color: var(--paper); }
.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--pad-x); position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Skip to content */
.skip-link {
  position: absolute;
  top: -100%;
  right: 16px;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* ============================================================
   ANNOUNCEMENT TICKER
   ============================================================ */
.ticker {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerScroll 40s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  display: inline-flex; align-items: center;
  padding: 9px 0; margin: 0 26px;
  font-family: var(--display);
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.ticker-track span::before {
  content: "✶"; color: var(--accent);
  font-size: 11px; margin-left: 26px;
}
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  padding: 24px 0;
  position: relative;
  z-index: 10000;
  border-bottom: 1px solid transparent;
  transition: padding var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header.sticky {
  position: sticky; top: 0;
  background: color-mix(in oklab, var(--paper) 95%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.header.sticky.is-scrolled {
  padding: 14px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  transition: gap var(--dur) var(--ease);
}

/* Header Style Variants */

/* Centered Style */
@media (min-width: 981px) {
  .header.sh-style-centered .header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    padding-top: 10px;
  }
  .header.sh-style-centered .brand {
    margin-bottom: 4px;
    justify-content: center;
    transition: transform var(--dur) var(--ease);
  }
  .header.sh-style-centered .nav {
    justify-self: center;
    padding-left: 0;
    margin: 0 auto;
    transition: margin var(--dur) var(--ease);
  }
  .header.sh-style-centered .header-actions {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: position 0s, transform var(--dur) var(--ease);
  }
  .header.sh-style-centered.is-scrolled .header-inner {
    flex-direction: row;
    justify-content: space-between;
    padding-top: 0;
    gap: 32px;
  }
  .header.sh-style-centered.is-scrolled .brand {
    transform: scale(0.9);
  }
  .header.sh-style-centered.is-scrolled .header-actions {
    position: static;
    transform: none;
  }
}

/* Minimal Overlay Style */
.header.sh-style-minimal {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  z-index: 10000;
}
body.admin-bar .header.sh-style-minimal {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .header.sh-style-minimal {
    top: 46px;
  }
}

/* Premium Inverted/White look when transparent over dark hero */
.header.sh-style-minimal:not(.is-scrolled) .brand,
.header.sh-style-minimal:not(.is-scrolled) .nav a,
.header.sh-style-minimal:not(.is-scrolled) .icon-btn,
.header.sh-style-minimal:not(.is-scrolled) .hamburger {
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}
.header.sh-style-minimal:not(.is-scrolled) .icon-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}
.header.sh-style-minimal:not(.is-scrolled) .cart-badge {
  border-color: #111111 !important;
}

.header.sh-style-minimal.is-scrolled {
  position: sticky;
  background: color-mix(in oklab, var(--paper) 95%, transparent);
  border-bottom-color: var(--line);
}

/* Block Style */
.header.sh-style-block {
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.header.sh-style-block.is-scrolled {
  border-bottom-color: var(--ink);
}

.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.025em;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.brand .dot { color: var(--accent); }
.nav { display: flex; gap: 28px; justify-self: end; align-items: center; padding-left: 28px; }
.nav .primary-menu {
  display: flex;
  gap: 28px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav .menu-item { margin: 0; }
.nav a {
  font-family: var(--display);
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: 4px 0;
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  right: 0; left: 0; bottom: -1px;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover::after {
  transform: scaleX(1);
  transform-origin: right;
}
.nav a:hover, .nav a.is-current { color: var(--ink); }
.nav a.is-current { font-weight: 700; }
.nav a.is-current::after {
  transform: scaleX(1) !important;
  height: 1.5px;
  background: var(--ink);
}
.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  position: relative;
}
.icon-btn:hover { 
  background: var(--paper-2);
  transform: scale(1.05);
}
.icon-btn svg { 
  width: 16px; height: 16px; 
  transition: transform var(--dur) var(--ease);
}
.icon-btn:hover svg {
  transform: scale(1.08);
}
.cart-badge {
  position: absolute; top: 2px; left: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--terra);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--paper);
  transition: transform var(--dur) var(--ease);
}
.icon-btn:hover .cart-badge {
  transform: scale(1.1) translateY(-1px);
}
.cart-badge[hidden] { display: none; }
.product-card-link { display: block; color: inherit; }
.pcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.05); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.kicker {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.kicker.no-line::before { display: none; }

.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .92;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.btn.btn-solid {
  background: var(--ink); color: var(--paper);
}
.btn.btn-solid::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--terra);
  transform: translateX(101%);
  transition: transform 400ms var(--ease);
}
.btn.btn-solid:hover::before { transform: translateX(0); }
.btn.btn-solid > * { position: relative; z-index: 1; }
.btn.btn-solid svg { width: 10px; height: 10px; transition: transform var(--dur) var(--ease); }
.btn.btn-solid:hover svg { transform: translateX(-3px); }

.btn.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--paper-2);
  padding: 88px 0 26px;
  margin-top: 96px;
  position: relative;
  overflow: hidden;
}

/* ---- top band: CTA + newsletter ---- */
.footer-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: end;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--line);
}
.footer-eyebrow {
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.footer-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--terra); }
.footer-mega {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: .9;
  letter-spacing: -.04em;
  margin: 0;
  text-align: right;
  color: var(--ink);
}
.footer-mega i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); }
.footer-mega .dot { color: var(--accent); }
.footer-cta p {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.5;
  color: var(--ink-2);
  max-width: 40ch; margin: 18px 0 0;
}
.footer-sub { width: 100%; }
.footer-sub .lbl {
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 12px;
}

/* ---- newsletter form (enhanced) ---- */
.news-form {
  display: flex; align-items: center;
  border: 1px solid var(--ink);
  padding: 4px 18px 4px 4px;
  background: var(--paper);
  margin-top: 0;
  transition: box-shadow var(--dur) var(--ease);
}
.news-form:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.news-form input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  padding: 14px 0; font-size: 14px;
  font-family: var(--sans); color: var(--ink);
}
.news-form button {
  padding: 14px 22px;
  background: var(--ink); color: var(--paper);
  border: 0; cursor: pointer;
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.news-form button:hover { background: var(--terra); }
.footer-perks {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 16px;
}
.footer-perks span {
  font-family: var(--display);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 7px;
}
.footer-perks svg { width: 13px; height: 13px; color: var(--accent); }

/* ---- link columns ---- */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 52px 0;
  border-bottom: 1px solid var(--line);
}
.foot-col h6 {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 18px;
}
.foot-col ul { display: flex; flex-direction: column; gap: 12px; }
.foot-col a {
  font-size: 14px;
  color: var(--ink-2);
  transition: color var(--dur) var(--ease), padding-right var(--dur) var(--ease);
}
.foot-col a:hover { color: var(--accent); padding-right: 6px; }

/* ---- meta row: social + switchers + pay ---- */
.footer-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.footer-social svg { width: 17px; height: 17px; }
.footer-switch { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-switch .sel {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  padding: 10px 14px;
  font-family: var(--display);
  font-size: 12px; font-weight: 600;
  letter-spacing: .06em; color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.footer-switch .sel:hover { border-color: var(--ink); }
.footer-switch .sel svg { width: 12px; height: 12px; opacity: .55; }
.footer-switch select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; outline: 0;
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; color: var(--ink); cursor: pointer;
  padding-left: 4px;
}
.footer-pay { display: flex; gap: 8px; align-items: center; }
.footer-pay .chip {
  font-family: var(--display);
  font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  padding: 6px 9px;
  background: var(--paper);
}

/* ---- giant wordmark signature ---- */
.footer-wordmark {
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  /* 130vw / 7 characters ≈ the original 18.5vw; longer site names shrink to fit. */
  font-size: clamp(40px, calc(130vw / var(--wm-chars, 7)), 290px);
  line-height: .82;
  letter-spacing: -.045em;
  display: block;
  width: 100%;
  text-align: center;
  color: var(--ink);
  margin: 48px 0 32px;
  user-select: none;
  white-space: nowrap;
}
.footer-wordmark .word {
  position: relative;
  display: inline-block;
}
.footer-wordmark .dot {
  position: absolute;
  color: var(--accent);
  transform: translateX(-0.04em);
}

/* ---- bottom bar ---- */
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-3);
  flex-wrap: wrap; gap: 18px;
}
.footer-bottom .legal { display: flex; gap: 22px; }
.footer-bottom .legal a:hover { color: var(--accent); }
.footer-totop {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
  transition: gap var(--dur) var(--ease);
}
.footer-totop:hover { gap: 12px; }
.footer-totop svg { width: 13px; height: 13px; }

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-meta { gap: 20px; }
}

@keyframes float-a { 0%,100% { rotate: -22deg; translate: 0 0; } 50% { rotate: -19deg; translate: 0 -6px; } }
@keyframes float-b { 0%,100% { rotate: 18deg; translate: 0 0; } 50% { rotate: 21deg; translate: 0 -8px; } }
@keyframes float-c { 0%,100% { rotate: -10deg; translate: 0 0; } 50% { rotate: -13deg; translate: 0 -5px; } }
@keyframes float-d { 0%,100% { rotate: 28deg; translate: 0 0; } 50% { rotate: 31deg; translate: 0 -4px; } }

/* ============================================================
   SCRIM / PAGE NAV
   ============================================================ */
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tag-pill.terra { background: var(--terra); color: var(--paper); }
.tag-pill.butter { background: var(--butter); color: var(--ink); }
.tag-pill.sky { background: var(--sky); color: var(--ink); }

/* ============================================================
   RESPONSIVE BASE
   ============================================================ */
/* ============================================================
   MOBILE MENU
   ============================================================ */
.hamburger {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--dur) var(--ease);
  position: relative;
  z-index: 102;
}
.hamburger:hover { background: var(--paper-2); }
.hamburger svg { width: 20px; height: 20px; }
.hamburger .icon-close { display: none; }
.hamburger.is-open .icon-open { display: none; }
.hamburger.is-open .icon-close { display: block; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 100px var(--pad-x) 40px;
  transform: translateX(-100%);
  transition: transform 480ms var(--ease);
  overflow-y: auto;
}
.mobile-menu.is-open {
  transform: translateX(0);
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 40px;
}
.mobile-menu-nav .mobile-primary-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-menu-nav a {
  font-family: var(--display);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.3;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease), padding-right var(--dur) var(--ease);
}
.mobile-menu-nav a:hover {
  color: var(--accent);
  padding-right: 12px;
}
.mobile-menu-nav a.is-current {
  color: var(--accent);
}
.mobile-menu-secondary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}
.mobile-menu-secondary a {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.mobile-menu-secondary a:hover { color: var(--accent); }
.mobile-menu-bottom {
  margin-top: auto;
  display: flex;
  gap: 18px;
}
.mobile-menu-bottom a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-menu-bottom a:hover {
  background: var(--terra);
  color: var(--paper);
  border-color: var(--terra);
}
.mobile-menu-bottom svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .nav { display: none; }
  .hamburger { display: inline-flex; }
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  /* A store name too long for one line wraps as a tight, balanced block
     with the accent dot after the last word (not stranded beside it). */
  .brand:not(.brand-logo) {
    display: inline-block;
    min-width: 0;
    line-height: 1.05;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .brand:not(.brand-logo) { font-size: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   OVERLAYS — Search · Mini Cart · Quick View
   ============================================================ */

/* Backdrop */
.ov-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,19,15,0);
  z-index: 100050;
  pointer-events: none;
  transition: background 320ms var(--ease);
}
.ov-backdrop.is-open { background: rgba(20,19,15,.55); pointer-events: auto; }

/* ============================================================
   SEARCH OVERLAY — full-screen from top
   ============================================================ */
.search-overlay {
  position: fixed; top: 0; right: 0; left: 0;
  background: var(--paper);
  z-index: 100100;
  transform: translateY(-101%);
  transition: transform 480ms var(--ease);
  max-height: 100vh; overflow-y: auto;
  box-shadow: 0 30px 60px -30px rgba(20,19,15,.25);
}
.search-overlay.is-open { transform: translateY(0); }
.search-overlay .so-inner { padding: 36px var(--pad-x) 56px; max-width: 1320px; margin: 0 auto; }
.search-overlay .so-top { display: flex; align-items: center; gap: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.search-overlay .so-input-wrap { flex: 1; position: relative; }
.search-overlay .so-input-wrap svg.so-ic { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--ink); pointer-events: none; }
.search-overlay .so-input {
  width: 100%; padding: 22px 40px 22px 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -.025em;
  color: var(--ink);
}
.search-overlay .so-input::placeholder { color: var(--ink-4); font-weight: 500; }
.search-overlay .so-close {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.search-overlay .so-close:hover { background: var(--ink); color: var(--paper); }
.search-overlay .so-close svg { width: 14px; height: 14px; }

.so-body { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 32px; }
.so-col h5 { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.so-recent { display: flex; flex-direction: column; }
.so-recent-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 15px; font-weight: 500;
  cursor: pointer; transition: padding-right var(--dur) var(--ease);
}
.so-recent-item:hover { padding-right: 8px; color: var(--accent); }
.so-recent-item .ago { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.so-recent-item .x { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-4); }
.so-recent-item .x:hover { color: var(--accent); }
.so-recent-item .x svg { width: 10px; height: 10px; }

.so-popular { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.so-pop-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  background: var(--paper-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.so-pop-tile:hover { background: var(--ink); color: var(--paper); }
.so-pop-tile .thumb { width: 48px; height: 56px; flex-shrink: 0; overflow: hidden; }
.so-pop-tile .thumb img { width: 100%; height: 100%; object-fit: cover; }
.so-pop-tile .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.so-pop-tile .cat { font-family: var(--display); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.so-pop-tile:hover .cat { color: rgba(255,255,255,.5); }
.so-pop-tile .name { font-family: var(--display); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-pop-tile .price { font-family: var(--display); font-size: 12px; color: var(--ink-3); }
.so-pop-tile:hover .price { color: rgba(255,255,255,.7); }

.so-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.so-quick a {
  padding: 8px 14px; border: 1px solid var(--line);
  font-family: var(--display); font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.so-quick a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (max-width: 720px) {
  .so-body { grid-template-columns: 1fr; gap: 32px; }
  .so-popular { grid-template-columns: 1fr; }
}

/* ============================================================
   MINI CART — right-side drawer
   ============================================================ */
.mini-cart {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(440px, 100vw);
  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
  font-size: 16px;
  background: var(--paper);
  z-index: 200;
  transform: translateX(-101%);
  transition: transform 480ms var(--ease);
  display: flex; flex-direction: column;
  box-shadow: 20px 0 60px -20px rgba(20,19,15,.25);
}
.mini-cart.is-open { transform: translateX(0); }

.off-canvas-cart {
  position: fixed;
  inset: 0;
  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
  font-size: 16px;
  z-index: 100100;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0s linear 360ms, opacity 260ms var(--ease);
}

.off-canvas-cart[aria-hidden="false"],
body.cart-open .off-canvas-cart {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.off-canvas-cart[aria-hidden="true"] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.off-canvas-cart .cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 19, 15, 0);
  transition: background 320ms var(--ease);
}

.off-canvas-cart[aria-hidden="false"] .cart-overlay,
body.cart-open .off-canvas-cart .cart-overlay {
  background: rgba(20, 19, 15, .55);
}

.off-canvas-cart[aria-hidden="true"] .cart-overlay {
  background: rgba(20, 19, 15, 0) !important;
}

.off-canvas-cart .cart-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(440px, 100vw);
  max-width: 100vw;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transform: translateX(calc(-1*(100% + 24px)));
  transition: transform 480ms var(--ease);
  box-shadow: 20px 0 60px -20px rgba(20, 19, 15, .25);
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}

.off-canvas-cart[aria-hidden="true"] .cart-panel {
  transform: translateX(calc(-1*(100% + 24px))) !important;
}

.off-canvas-cart[aria-hidden="false"] .cart-panel,
body.cart-open .off-canvas-cart .cart-panel {
  transform: translateX(0);
}

.off-canvas-cart .cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
}

.off-canvas-cart .cart-header h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
}

.off-canvas-cart .close-cart {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.off-canvas-cart .close-cart:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.off-canvas-cart .cart-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 28px 28px;
  min-height: 0;
}

.off-canvas-cart .widget_shopping_cart_content {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.off-canvas-cart .woocommerce-mini-cart,
.off-canvas-cart .cart_list,
.off-canvas-cart .product_list_widget {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0 0 18px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

/* Hairline-separated rows — no card chrome, matching the theme's
   sharp editorial system. */
.off-canvas-cart .woocommerce-mini-cart-item,
.off-canvas-cart .mini_cart_item {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 32px;
  gap: 10px 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.off-canvas-cart .woocommerce-mini-cart-item > a:not(.remove),
.off-canvas-cart .mini_cart_item > a:not(.remove) {
  grid-column: 1 / 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  color: inherit;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}

.off-canvas-cart .woocommerce-mini-cart-item img,
.off-canvas-cart .mini_cart_item img {
  width: 82px;
  height: 104px;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  background: var(--paper-2);
}

/* WooCommerce core shrinks widget-list thumbs to 32px on shop pages
   (.woocommerce ul.cart_list li img) — restate the drawer size above it. */
.woocommerce .off-canvas-cart ul.cart_list li img,
.woocommerce .off-canvas-cart ul.product_list_widget li img,
.woocommerce-page .off-canvas-cart ul.cart_list li img,
.woocommerce-page .off-canvas-cart ul.product_list_widget li img,
.off-canvas-cart ul.cart_list li img,
.off-canvas-cart ul.product_list_widget li img {
  width: 82px;
  height: 104px;
}

.off-canvas-cart .woocommerce-mini-cart-item .quantity,
.off-canvas-cart .mini_cart_item .quantity {
  grid-column: 2 / 3;
  grid-row: 1;
  align-self: start;
  margin-top: 40px;
  color: var(--ink-3);
  font-family: var(--display);
  font-size: 12px;
  line-height: 1.4;
}

.off-canvas-cart .woocommerce-mini-cart-item .remove,
.off-canvas-cart .mini_cart_item .remove {
  grid-column: 3;
  grid-row: 1;
  position: static;
  justify-self: end;
  width: 34px;
  height: 34px;
  margin-top: -8px;
  border: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3) !important;
  background: transparent !important;
  font-size: 21px;
  line-height: 1;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.off-canvas-cart .woocommerce-mini-cart-item .remove:hover,
.off-canvas-cart .mini_cart_item .remove:hover {
  color: var(--terra) !important;
  background: transparent !important;
}

.off-canvas-cart .woocommerce-mini-cart__total,
.off-canvas-cart .total {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: auto 0 0;
  padding: 20px 0 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
}

.off-canvas-cart .woocommerce-mini-cart__total strong,
.off-canvas-cart .total strong {
  font-weight: 700;
}

.off-canvas-cart .woocommerce-mini-cart__buttons,
.off-canvas-cart .buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0;
}

.off-canvas-cart .woocommerce-mini-cart__buttons .button,
.off-canvas-cart .buttons .button {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}

.off-canvas-cart .woocommerce-mini-cart__buttons .button:not(.checkout),
.off-canvas-cart .buttons .button:not(.checkout) {
  background: var(--paper);
  color: var(--ink);
}

.off-canvas-cart .woocommerce-mini-cart__buttons .button:hover,
.off-canvas-cart .buttons .button:hover {
  background: var(--terra);
  color: var(--paper);
  border-color: var(--terra);
}

.off-canvas-cart .woocommerce-mini-cart__buttons .checkout,
.off-canvas-cart .buttons .checkout {
  background: var(--ink);
  color: var(--paper);
}

.off-canvas-cart .woocommerce-mini-cart__empty-message {
  margin: auto 0;
  padding: 54px 18px;
  border: 1px dashed var(--line);
  background: var(--paper-2);
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

body.cart-open {
  overflow: hidden;
}

@media (max-width: 520px) {
  .off-canvas-cart .cart-header {
    padding: 22px 18px;
  }

  .off-canvas-cart .cart-body {
    padding: 20px 16px 22px;
  }

  .off-canvas-cart .woocommerce-mini-cart,
  .off-canvas-cart .cart_list,
  .off-canvas-cart .product_list_widget {
    padding-inline: 0;
    gap: 12px;
  }

  .off-canvas-cart .woocommerce-mini-cart-item,
  .off-canvas-cart .mini_cart_item {
    grid-template-columns: 74px minmax(0, 1fr) 30px;
    padding: 14px 0;
    gap: 10px 12px;
  }

  .off-canvas-cart .woocommerce-mini-cart-item > a:not(.remove),
  .off-canvas-cart .mini_cart_item > a:not(.remove) {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
  }

  .off-canvas-cart .woocommerce-mini-cart-item img,
  .off-canvas-cart .mini_cart_item img,
  .woocommerce .off-canvas-cart ul.cart_list li img,
  .woocommerce .off-canvas-cart ul.product_list_widget li img,
  .woocommerce-page .off-canvas-cart ul.cart_list li img,
  .woocommerce-page .off-canvas-cart ul.product_list_widget li img,
  .off-canvas-cart ul.cart_list li img,
  .off-canvas-cart ul.product_list_widget li img {
    width: 74px;
    height: 96px;
  }

  .off-canvas-cart .woocommerce-mini-cart-item .quantity,
  .off-canvas-cart .mini_cart_item .quantity {
    margin-top: 42px;
  }
}

/* Hand-written RTL rules: already mirrored, so rtlcss must leave them alone. */
[dir="rtl"] .off-canvas-cart .cart-panel {
  right: auto;
  left: 0;
  transform: translateX(calc(-100% - 24px));
}

[dir="rtl"] .off-canvas-cart[aria-hidden="true"] .cart-panel {
  transform: translateX(calc(-100% - 24px)) !important;
}

[dir="rtl"] .off-canvas-cart[aria-hidden="false"] .cart-panel,
[dir="rtl"] body.cart-open .off-canvas-cart .cart-panel {
  transform: translateX(0);
}

.mc-head {
  padding: 24px 28px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
}
.mc-head h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; letter-spacing: -.02em;
  margin: 0;
}
.mc-head h3 .dot { color: var(--accent); }
.mc-head .ct {
  font-family: var(--display); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 8px;
}
.mc-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mc-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mc-close svg { width: 12px; height: 12px; }

/* Free shipping progress */
.mc-progress {
  padding: 16px 28px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.mc-progress .row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--display); font-size: 12px;
  letter-spacing: .04em; color: var(--ink-2);
  margin-bottom: 10px;
}
.mc-progress .row b { color: var(--accent); }
.mc-progress .row .done { color: var(--leaf-2); font-weight: 700; }
.mc-progress .bar {
  height: 4px; background: var(--paper-3);
  position: relative; overflow: hidden;
}
.mc-progress .bar .fill {
  position: absolute; right: 0; top: 0; bottom: 0;
  background: var(--terra);
  width: 0;
  transition: width 480ms var(--ease);
}
.mc-progress .bar .fill.full { background: var(--leaf-2); }

.mc-items {
  flex: 1; overflow-y: auto;
  padding: 8px 28px;
}
.mc-item {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 16px; align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.mc-item.is-removing { opacity: 0; transform: translateX(-20px); }
.mc-item .img {
  aspect-ratio: 4/5; overflow: hidden;
  background: var(--paper-2);
}
.mc-item .img img { width: 100%; height: 100%; object-fit: cover; }
.mc-item .info { min-width: 0; }
.mc-item .name {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: -.005em;
  margin: 0 0 4px;
}
.mc-item .variant {
  font-family: var(--display); font-size: 11px;
  letter-spacing: .08em; color: var(--ink-3);
  margin-bottom: 8px;
}
.mc-item .qty-row {
  display: flex; align-items: center; gap: 10px;
}
.mc-item .qty-sm {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line);
  font-family: var(--display); font-size: 12px; font-weight: 600;
}
.mc-item .qty-sm button { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.mc-item .qty-sm button:hover { background: var(--paper-2); }
.mc-item .qty-sm .val { width: 24px; text-align: center; border-right: 1px solid var(--line); border-left: 1px solid var(--line); padding: 4px 0; }
.mc-item .remove {
  font-family: var(--display); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mc-item .remove:hover { color: var(--accent); border-bottom-color: var(--terra); }
.mc-item .right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.mc-item .price {
  font-family: var(--display); font-size: 15px; font-weight: 700;
}

/* Empty cart */
.mc-empty { padding: 40px 28px; text-align: center; }
.mc-empty h4 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; margin: 0 0 8px; }
.mc-empty h4 i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); }
.mc-empty p { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-3); margin: 0 0 20px; }

/* Foot */
.mc-foot {
  padding: 20px 28px 24px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.mc-foot .row {
  display: flex; justify-content: space-between;
  font-family: var(--display);
  padding: 4px 0;
  font-size: 13px; color: var(--ink-2);
}
.mc-foot .row.total {
  font-size: 18px; font-weight: 700;
  color: var(--ink);
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.mc-foot .actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px;
}
.mc-foot .btn { width: 100%; padding: 14px 22px; }
.mc-foot .btn.btn-outline { padding: 13px 22px; }

/* ============================================================
   QUICK VIEW MODAL
   ============================================================ */
.quick-view {
  position: fixed;
  top: 50%; right: 50%;
  transform: translate(50%, -50%) scale(.96);
  width: min(1100px, calc(100vw - 48px));
  max-height: calc(100vh - 32px);
  background: var(--paper);
  z-index: 100100;
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(0, 1fr);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease-spring);
  box-shadow: 0 40px 80px -20px rgba(20,19,15,.3);
  overflow: hidden;
}
.quick-view.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(50%, -50%) scale(1);
}

.qv-photo {
  background: var(--sky);
  aspect-ratio: 4/5;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-view .qv-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}
.quick-view .qv-photo.img-curtain img {
  opacity: 1;
  transform: none;
}
.quick-view .qv-photo.img-curtain::after {
  display: none;
}
.qv-photo .badge {
  position: absolute; top: 16px; right: 16px;
  padding: 6px 10px;
  background: var(--terra); color: var(--paper);
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}

.qv-body {
  min-width: 0;
  padding: 42px 40px 28px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.qv-close {
  position: absolute; top: 16px; left: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  z-index: 2;
}
.qv-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qv-close svg { width: 12px; height: 12px; }

.qv-cat {
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}
.qv-body h2 {
  font-family: var(--display); font-weight: 700;
  max-width: 100%;
  padding-left: 42px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.06; letter-spacing: -.025em;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
  word-break: normal;
}
.qv-body h2 .dot { color: var(--accent); }
.qv-price {
  font-family: var(--display); font-size: 24px; font-weight: 700;
  margin-bottom: 16px;
}
.qv-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.qv-rating .stars { color: var(--accent); display: inline-flex; gap: 1px; }
.qv-rating .stars svg { width: 12px; height: 12px; fill: currentColor; }
.qv-rating small { font-family: var(--display); font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }

.qv-desc {
  font-size: 14px; color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: 20px;
}

.qv-variant { margin-bottom: 16px; }
.qv-variant .lab {
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 8px;
  display: flex; justify-content: space-between;
}
.qv-variant .lab small { color: var(--ink-3); }
.qv-options { display: flex; gap: 6px; flex-wrap: wrap; }
.qv-options button {
  padding: 8px 14px; border: 1.5px solid var(--line);
  font-family: var(--display); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.qv-options button:hover { border-color: var(--ink); }
.qv-options button.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qv-options.colors button {
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line);
}
.qv-options.colors button.is-active { box-shadow: 0 0 0 2px var(--ink); }

.qv-actions {
  display: flex; gap: 8px;
  min-width: 0;
  margin-top: 18px; margin-bottom: 14px;
}
.qv-actions .qty-control {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
  border: 1.5px solid var(--ink);
  font-family: var(--display); font-size: 13px; font-weight: 600;
}
.qv-actions .qty-control button {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.qv-actions .qty-control button:hover { background: var(--paper-2); }
.qv-actions .qty-control .val {
  width: 36px; text-align: center;
  border-right: 1px solid var(--line); border-left: 1px solid var(--line);
  padding: 7px 0;
}
.qv-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 18px;
  white-space: nowrap;
}
.qv-fav {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border: 1.5px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.qv-fav:hover, .qv-fav.is-fav { color: var(--accent); border-color: var(--terra); }
.qv-fav.is-fav svg { fill: currentColor; }
.qv-fav svg { width: 14px; height: 14px; }

.qv-meta {
  display: flex; gap: 20px; flex-wrap: wrap;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--display); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: auto;
}
.qv-meta b { color: var(--ink); font-weight: 700; }
.qv-meta a { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.qv-meta a:hover { color: var(--accent); border-bottom-color: var(--terra); }

@media (max-width: 760px) {
  .quick-view { grid-template-columns: 1fr; max-height: calc(100vh - 24px); width: calc(100vw - 24px); overflow-y: auto; overflow-x: hidden; }
  .qv-photo { aspect-ratio: 16/10; }
  .qv-body { padding: 26px 20px 24px; }
  .qv-body h2 { padding-left: 42px; }
  .qv-actions { flex-wrap: wrap; }
  .qv-actions .qty-control { flex: 0 0 auto; }
  .qv-actions .btn { flex-basis: calc(100% - 96px); }
}

/* GLOBAL FIX: Reset .cat styles for text labels to prevent them from rendering as Category Card boxes */
div.cat,
span.cat,
main .cat:not(a),
.ev .info .cat,
.jo-story .cat,
.so-pop-tile .cat {
  position: static !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  display: inline-block !important;
  overflow: visible !important;
  cursor: inherit !important;
  transition: none !important;
  isolation: auto !important;
  width: auto !important;
  height: auto !important;
}

div.cat {
  display: block !important;
}

/* Remove the dark overlay pseudo-element generated by .cat::after in main.css */
div.cat::after,
span.cat::after,
main .cat:not(a)::after,
.ev .info .cat::after,
.jo-story .cat::after,
.so-pop-tile .cat::after {
  display: none !important;
  content: none !important;
}
/* Current WordPress header controls. */
.search-overlay[hidden],
.mobile-menu[hidden] {
	display: none !important;
}

.header-actions {
	align-items: center;
	display: flex;
	gap: 4px;
	justify-content: flex-end;
}

.brand-logo img {
	height: auto;
	max-height: 54px;
	width: auto;
}

body.rivista-overlay-open {
	overflow: hidden;
}

.search-overlay {
	align-items: start;
	background: rgba(20, 19, 15, .68);
	display: grid;
	inset: 0;
	max-height: none;
	overflow-y: auto;
	padding: clamp(24px, 8vh, 88px) var(--pad-x);
	position: fixed;
	transform: none;
	z-index: 10020;
}

.search-overlay-panel {
	background: var(--paper);
	box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
	margin: 0 auto;
	max-width: 840px;
	padding: clamp(24px, 4vw, 52px);
	width: 100%;
}

.search-overlay-header {
	align-items: center;
	border-bottom: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	margin-bottom: 28px;
	padding-bottom: 18px;
}

.search-overlay-header h2 {
	font-family: var(--display);
	font-size: clamp(28px, 5vw, 52px);
	margin: 0;
}

.search-overlay-header button {
	align-items: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	display: inline-flex;
	font-size: 25px;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.search-overlay form {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1fr) auto;
}

.search-overlay form label {
	font-size: 12px;
	font-weight: 700;
	grid-column: 1 / -1;
	text-transform: uppercase;
}

.search-overlay form input {
	background: var(--paper);
	border: 1px solid var(--ink);
	color: var(--ink);
	min-width: 0;
	padding: 15px 16px;
}

.search-overlay form button[type="submit"] {
	background: var(--ink);
	color: var(--paper);
	font-size: 12px;
	font-weight: 700;
	padding: 15px 24px;
	text-transform: uppercase;
}

.footer-menu-title {
	font-family: var(--display);
	font-size: 11px;
	letter-spacing: .16em;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.footer-social ul,
.footer-bottom .legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
}

/* Keep the native pointer available when the optional custom cursor is absent. */
@media (hover: hover) and (pointer: fine) {
	body {
		cursor: default;
	}

	a,
	button,
	label,
	select,
	[role="button"],
	input[type="button"],
	input[type="checkbox"],
	input[type="radio"],
	input[type="range"],
	input[type="reset"],
	input[type="submit"] {
		cursor: pointer;
	}

	input:not([type]),
	input[type="email"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="url"],
	textarea {
		cursor: text;
	}
}

@media (max-width: 600px) {
	.search-overlay form {
		grid-template-columns: 1fr;
	}

	.search-overlay form label {
		grid-column: auto;
	}
}

/* Preloader must sit above the sticky header (z-index:10000) so the header
   does not show through the loading splash. */
.preloader {
	z-index: 100000;
}

/* ============================================================
   NAV DROPDOWN SUBMENUS (standard WP submenu support)
   ============================================================ */
.primary-menu li { position: relative; }
/* Simple dropdowns share the mega menu's language: a paper band framed by
   hairlines top & bottom (no boxy side borders), the same soft drop shadow,
   easing and entrance offset — just narrower. */
.primary-menu .sub-menu {
	position: absolute;
	/* Drop flush from the bottom of the header — same line the Shop mega opens on,
	   not the middle of the header. 31px = gap from the menu item to the header edge. */
	top: calc(100% + 31px);
	inset-inline-start: -14px;
	min-width: 232px;
	list-style: none;
	margin: 0;
	padding: 22px 0 16px;
	background: var(--paper);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 20px 60px -20px rgba(20, 19, 15, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity 320ms cubic-bezier(.16, 1, .3, 1), transform 320ms cubic-bezier(.16, 1, .3, 1), visibility 320ms;
	z-index: 60;
}
/* Invisible bridge across the gap so hover isn't lost between item and panel. */
.primary-menu .sub-menu::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -34px;
	height: 34px;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu,
.primary-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.primary-menu .sub-menu li { position: relative; }
.primary-menu .sub-menu a {
	display: block;
	padding: 8px 26px;
	font-family: var(--display);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
	transition: color var(--dur) var(--ease), padding-inline-start var(--dur) var(--ease);
}
/* Kill the top-level nav underline (.nav a::before/::after) that leaks onto
   dropdown links — the Shop mega links don't have it, so neither should these. */
.primary-menu .sub-menu a::before,
.primary-menu .sub-menu a::after { content: none; display: none; }
/* Same hover as the Shop mega links: colour shift + a small slide, no line/border. */
.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu .current-menu-item > a { color: var(--terra); padding-inline-start: 34px; }
/* nested (third level) opens to the side */
.primary-menu .sub-menu .sub-menu { top: -17px; inset-inline-start: 100%; transform: translateX(-6px); }
.primary-menu .sub-menu li:hover > .sub-menu { transform: translateX(0); }

/* ---- Mobile menu accordion (submenus) ---- */
.mobile-primary-menu .menu-item-has-children { position: relative; }
.mobile-primary-menu .mm-toggle {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	width: 52px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-3);
	transition: transform .28s var(--ease), color .2s var(--ease);
}
.mobile-primary-menu .menu-item-has-children.is-open > .mm-toggle { transform: rotate(-180deg); color: var(--terra); }
.mobile-primary-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height .38s var(--ease);
}
.mobile-primary-menu .menu-item-has-children.is-open > .sub-menu { max-height: 600px; }
.mobile-primary-menu .sub-menu a {
	padding-inline-start: 24px;
	opacity: .82;
	font-size: .92em;
}

/* ============================================================
   NEWSLETTER POPUP (centre-screen, once per visitor)
   ============================================================ */
.nl-pop { position: fixed; inset: 0; z-index: 100050; display: none; }
.nl-pop.is-open { display: block; }
.nl-pop-overlay { position: absolute; inset: 0; background: rgba(20, 19, 15, .5); backdrop-filter: blur(3px); animation: nlFade .3s ease; }
.nl-pop-card {
	position: absolute;
	top: 50%; inset-inline-start: 50%;
	transform: translate(50%, -50%);
	width: min(700px, calc(100% - 36px));
	display: flex;
	overflow: hidden;
	background: var(--paper);
	border: 1px solid var(--line);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5);
	animation: nlPop .45s var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}
.nl-pop-img {
	flex: 0 0 44%;
	align-self: stretch;
	min-height: 380px;
	background-image: url(../../demo-content/media/2026/06/overshirt-clay.jpg);
	background-size: cover;
	background-position: center top;
}
.nl-pop-body {
	flex: 1;
	min-width: 0;
	padding: 44px 40px 38px;
	text-align: start;
}
.nl-pop-close {
	position: absolute; top: 14px; inset-inline-end: 14px;
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; color: var(--ink-3);
	background: color-mix(in oklab, var(--paper) 65%, transparent);
	transition: background .2s, color .2s;
	z-index: 2;
}
.nl-pop-close:hover { background: var(--paper-2); color: var(--ink); }
.nl-pop-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The card takes programmatic focus on open (so phones do not raise the keyboard); it is not a control. */
.nl-pop-card:focus { outline: none; }
.nl-pop-body .nl-eyebrow { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.nl-pop-body h3 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.03; letter-spacing: -.025em; margin: 14px 0 12px; }
.nl-pop-body h3 i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); }
.nl-pop-body > p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin: 0 0 24px; }
@media (max-width: 560px) {
	.nl-pop-card { flex-direction: column; width: min(400px, calc(100% - 32px)); }
	.nl-pop-img { flex: 0 0 170px; min-height: 170px; }
	.nl-pop-body { padding: 30px 26px 28px; text-align: center; }
	.nl-pop-body > p { max-width: 34ch; margin-inline: auto; }
}
.nl-form { display: flex; gap: 8px; }
.nl-form input { flex: 1; min-width: 0; padding: 14px 16px; border: 1px solid var(--ink); background: var(--paper); font-family: var(--sans); font-size: 14px; outline: none; }
.nl-form input:focus { background: var(--paper-2); }
.nl-form button { flex: none; padding: 14px 22px; background: var(--ink); color: var(--paper); font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: background .2s var(--ease); }
.nl-form button:hover { background: var(--terra); }
.nl-fine { font-size: 11.5px; color: var(--ink-3); margin: 14px 0 0; }
.nl-success { padding: 26px 0 8px; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--ink); }
@keyframes nlFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nlPop { from { opacity: 0; transform: translate(50%, -46%) scale(.96); } to { opacity: 1; transform: translate(50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .nl-pop-overlay, .nl-pop-card { animation: none; } }

/* ============================================================
   COMMENTS (posts & pages)
   The theme shipped comments.php with no styles, so the reply
   form fell back to raw browser widgets. These rules dress the
   standard WordPress comment markup in the editorial system.
   ============================================================ */
.comments-area {
	margin-block: 96px 0;
	padding-block: 56px 96px;
	border-top: 1px solid var(--line);
}

.comments-title,
.comments-area .comment-reply-title {
	font-family: var(--display);
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--ink);
	margin: 0 0 32px;
}

.comments-title span { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); }

.comments-area .comment-reply-title small {
	display: inline-block;
	margin-inline-start: 12px;
	font-family: var(--display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.comments-area .comment-reply-title small a { color: var(--terra); }
.comments-area .comment-reply-title small a:hover { text-decoration: underline; }

/* ---- Comment list ---- */
.comment-list {
	list-style: none;
	margin: 0 0 64px;
	padding: 0;
}

.comment-list ol.children {
	list-style: none;
	margin: 0;
	padding-inline-start: clamp(20px, 4vw, 56px);
}

.comment-list .comment-body {
	padding: 28px 0;
	border-bottom: 1px solid var(--line);
}

.comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--display);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.comment-list .comment-author img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.comment-list .comment-author .says { display: none; }

.comment-list .comment-metadata {
	margin: 6px 0 14px;
	font-family: var(--display);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.comment-list .comment-metadata a { color: inherit; }
.comment-list .comment-metadata a:hover { color: var(--terra); }

.comment-list .comment-content {
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.7;
}

.comment-list .comment-content p { margin: 0 0 12px; }
.comment-list .comment-content p:last-child { margin-bottom: 0; }

.comment-list .reply {
	margin-top: 14px;
}

.comment-list .reply a,
.comments-area .comment-navigation a {
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.comment-list .reply a:hover,
.comments-area .comment-navigation a:hover { color: var(--terra); border-color: var(--terra); }

.comment-list .pingback .comment-body,
.comment-list .trackback .comment-body { font-size: 14px; color: var(--ink-3); }

.comments-area .no-comments {
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	color: var(--ink-3);
}

/* ---- Reply form ---- */
.comments-area .comment-form {
	display: grid;
	gap: 20px;
	max-width: 720px;
}

.comments-area .comment-form .comment-notes,
.comments-area .comment-form .logged-in-as {
	margin: 0;
	font-size: 14px;
	color: var(--ink-3);
}

.comments-area .comment-form .logged-in-as a { color: var(--terra); }

.comments-area .comment-form p { margin: 0; }

.comments-area .comment-form label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form input[type="url"],
.comments-area .comment-form textarea {
	width: 100%;
	padding: 14px 16px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	transition: border-color var(--dur) var(--ease);
}

.comments-area .comment-form textarea {
	min-height: 160px;
	resize: vertical;
}

.comments-area .comment-form input:focus,
.comments-area .comment-form textarea:focus {
	outline: none;
	border-color: var(--ink);
}

.comments-area .comment-form input::placeholder,
.comments-area .comment-form textarea::placeholder { color: var(--ink-4); }

/* Author + email share a row on wider screens. The form is a grid, so the
   pairing has to be expressed in grid columns, not inline-block. */
@media (min-width: 720px) {
	.comments-area .comment-form { grid-template-columns: 1fr 1fr; }
	.comments-area .comment-form > * { grid-column: 1 / -1; }
	.comments-area .comment-form .comment-form-author { grid-column: 1 / 2; }
	.comments-area .comment-form .comment-form-email { grid-column: 2 / 3; }
}

.comments-area .comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--ink-3);
}

.comments-area .comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-3);
}

.comments-area .comment-form .comment-form-cookies-consent input { margin-top: 3px; }

.comments-area .comment-form .form-submit { margin: 4px 0 0; }

.comments-area .comment-form input[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
	padding: 16px 34px;
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 0;
	color: var(--paper);
	cursor: pointer;
	font-family: var(--display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.comments-area .comment-form input[type="submit"]:hover {
	background: var(--terra);
	border-color: var(--terra);
}

/* ============================================================
   CRAFT LAYER — the details that read as "designed by hand":
   paper grain, editorial scroll reveals, typographic balance,
   a tuned scrollbar and focus ring. All motion respects
   prefers-reduced-motion.
   ============================================================ */

/* ---- Paper grain: a whisper of print texture over everything ---- */
body::after {
	content: "";
	position: fixed;
	inset: -50%;
	width: 200%;
	height: 200%;
	pointer-events: none;
	z-index: 2000;
	opacity: .3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Editorial reveal: rise-and-settle as sections enter ---- */
.rv {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 850ms cubic-bezier(.22, 1, .36, 1),
		transform 850ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--rv-delay, 0ms);
	will-change: opacity, transform;
}

.rv.rv-on {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ---- Typographic craft ---- */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---- Tuned scrollbar (ink on paper) ---- */
html { scrollbar-width: thin; scrollbar-color: var(--ink-3) var(--paper-2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 5px; border: 2px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

/* ---- Focus ring in the house accent ---- */
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 1px; }

/* ---- Home hero: slow Ken Burns + staged content entrance ---- */
.hm-hero-bg img {
	animation: rivistaKenBurns 16s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes rivistaKenBurns {
	from { transform: scale(1.07); }
	to   { transform: scale(1); }
}

/* Front-page stage: the two hero columns rise in sequence on load. */
.stage-grid > * {
	opacity: 0;
	transform: translateY(26px);
	animation: rivistaRise 950ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.stage-grid > :nth-child(1) { animation-delay: 120ms; }
.stage-grid > :nth-child(2) { animation-delay: 300ms; }

.hm-hero-content > * {
	opacity: 0;
	transform: translateY(26px);
	animation: rivistaRise 900ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.hm-hero-content > :nth-child(1) { animation-delay: 120ms; }
.hm-hero-content > :nth-child(2) { animation-delay: 240ms; }
.hm-hero-content > :nth-child(3) { animation-delay: 360ms; }
.hm-hero-content > :nth-child(4) { animation-delay: 480ms; }
.hm-hero-content > :nth-child(n+5) { animation-delay: 600ms; }

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

/* ---- Reduced motion: everything lands instantly ---- */
@media (prefers-reduced-motion: reduce) {
	.rv { opacity: 1; transform: none; transition: none; }
	.hm-hero-bg img { animation: none; }
	.hm-hero-content > *,
	.stage-grid > * { opacity: 1; transform: none; animation: none; }
}

@media print {
	.rv { opacity: 1 !important; transform: none !important; }
	body::after { display: none; }
}

/* ---- Craft signature: arrow nudge on every "→" CTA ---- */
.arr {
	display: inline-block;
	transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1);
}

.arr-host:hover .arr,
.arr-host:focus-visible .arr { transform: translateX(-6px); }
[dir="rtl"] .arr-host:hover .arr,
[dir="rtl"] .arr-host:focus-visible .arr { transform: translateX(-6px); }

@media (prefers-reduced-motion: reduce) {
	.arr { transition: none; }
	.arr-host:hover .arr,
	.arr-host:focus-visible .arr { transform: none; }
}

/* ============================================================
   CRAFT LAYER II — hover signatures.
   The theme's own .btn-solid already had a terracotta wipe that
   slides in from the left; these rules make that the house
   gesture for EVERY solid CTA, add a shared card lift, and fix
   three buttons whose hover was dead or defeated.
   ============================================================ */

/* ---- Terracotta wipe on every solid-ink CTA ----
   Product-card add-to-bag controls (ul.products li.product .button) are
   left out: they are a quiet ink bar / round button (custom-cards.css). */
.cf-qv-buy .button, .cf-sticky-btn,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.cgc-add-btn, .cgc-hover-btn,
.news-form button, .newsletter-form button,
.sticky-atb-add, .cookie-actions .accept, .lp-btn, .pcard-quick,
.od-track-btn, .ord-btn.solid, .st-save .primary,
.ca-cta a, .cs-notify button, .cmp-product .add,
.map-card a.directions, .btn-pill.solid, .ff-result .primary,
.gc-submit, .bq-btn, .cg-btn, .rw-foot a, .st-btn, .ty-btn,
.ly-btn, .ly-tier.feat button, .trk-form button, .pe-buy .add-quick,
.s-submit, .search-page-form .so-submit, .sl-row .add,
.stl-sum button, .sto-flagship .cta,
.sq-result .cta-row .primary, .sq-empty button, .wl-quick,
.single-product form.cart .single_add_to_cart_button,
.woocommerce-cart .wc-block-components-button,
.woocommerce-checkout .wc-block-components-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.cf-qv-buy .button::before, .cf-sticky-btn::before,
.wc-block-grid__product-add-to-cart .wp-block-button__link::before,
.cgc-add-btn::before, .cgc-hover-btn::before,
.news-form button::before, .newsletter-form button::before,
.sticky-atb-add::before, .cookie-actions .accept::before, .lp-btn::before, .pcard-quick::before,
.od-track-btn::before, .ord-btn.solid::before, .st-save .primary::before,
.ca-cta a::before, .cs-notify button::before, .cmp-product .add::before,
.map-card a.directions::before, .btn-pill.solid::before, .ff-result .primary::before,
.gc-submit::before, .bq-btn::before, .cg-btn::before, .rw-foot a::before, .st-btn::before, .ty-btn::before,
.ly-btn::before, .ly-tier.feat button::before, .trk-form button::before, .pe-buy .add-quick::before,
.s-submit::before, .search-page-form .so-submit::before, .sl-row .add::before,
.stl-sum button::before, .sto-flagship .cta::before,
.sq-result .cta-row .primary::before, .sq-empty button::before, .wl-quick::before,
.single-product form.cart .single_add_to_cart_button::before,
.woocommerce-cart .wc-block-components-button::before,
.woocommerce-checkout .wc-block-components-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--terra);
	transform: translateX(101%);
	transition: transform 480ms cubic-bezier(.22, 1, .36, 1);
	z-index: -1;
	pointer-events: none;
}

.cf-qv-buy .button:hover::before, .cf-sticky-btn:hover::before,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover::before,
.cgc-add-btn:hover::before, .cgc-hover-btn:hover::before,
.news-form button:hover::before, .newsletter-form button:hover::before,
.sticky-atb-add:hover::before, .cookie-actions .accept:hover::before, .lp-btn:hover::before, .pcard-quick:hover::before,
.od-track-btn:hover::before, .ord-btn.solid:hover::before, .st-save .primary:hover::before,
.ca-cta a:hover::before, .cs-notify button:hover::before, .cmp-product .add:hover::before,
.map-card a.directions:hover::before, .btn-pill.solid:hover::before, .ff-result .primary:hover::before,
.gc-submit:hover::before, .bq-btn:hover::before, .cg-btn:hover::before, .rw-foot a:hover::before, .st-btn:hover::before, .ty-btn:hover::before,
.ly-btn:hover::before, .ly-tier.feat button:hover::before, .trk-form button:hover::before, .pe-buy .add-quick:hover::before,
.s-submit:hover::before, .search-page-form .so-submit:hover::before, .sl-row .add:hover::before,
.stl-sum button:hover::before, .sto-flagship .cta:hover::before,
.sq-result .cta-row .primary:hover::before, .sq-empty button:hover::before, .wl-quick:hover::before,
.single-product form.cart .single_add_to_cart_button:hover::before,
.woocommerce-cart .wc-block-components-button:hover::before,
.woocommerce-checkout .wc-block-components-button:hover::before,
.cf-qv-buy .button:focus-visible::before, .cgc-add-btn:focus-visible::before,
.single-product form.cart .single_add_to_cart_button:focus-visible::before {
	transform: translateX(0);
}
[dir="rtl"] .cgc-add-btn::before,
[dir="rtl"] .single-product form.cart .single_add_to_cart_button::before {
	transform: translateX(101%);
}

/* WooCommerce core (.woocommerce a.button) forces overflow:visible with
   higher specificity on three wipe hosts — re-clip them so the terracotta
   layer never shows outside the button. */
.cf-qv-buy .button.button,
.wl-quick.button.add_to_cart_button,
.cmp-product .add.button {
	overflow: hidden;
}

/* ---- Shared card lift for floating editorial cards ----
   Lift only, no drop shadow: on this paper ground a blur reads generic,
   so the hairline border and the rise carry the hover instead. ---- */
.article-card, .feat-card, .story-card,
.jo-feat, .jo-story, .dr-card, .wl-item, .mk, .maker {
	transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1);
}

.article-card:hover, .feat-card:hover, .story-card:hover,
.jo-feat:hover, .jo-story:hover, .dr-card:hover, .wl-item:hover, .mk:hover, .maker:hover {
	transform: translateY(-6px);
}

/* ---- Hover repairs found in the audit ---- */
.ly-tier.feat button:hover { background: var(--terra); }
.sq-empty button:hover { background: var(--terra); }
.search-overlay form button[type="submit"]:hover { background: var(--terra); }

@media (prefers-reduced-motion: reduce) {
	.cf-qv-buy .button::before, .cf-sticky-btn::before,
	.wc-block-grid__product-add-to-cart .wp-block-button__link::before,
	.cgc-add-btn::before, .cgc-hover-btn::before,
	.news-form button::before, .newsletter-form button::before,
	.sticky-atb-add::before, .cookie-actions .accept::before, .lp-btn::before, .pcard-quick::before,
	.od-track-btn::before, .ord-btn.solid::before, .st-save .primary::before,
	.ca-cta a::before, .cs-notify button::before, .cmp-product .add::before,
	.map-card a.directions::before, .btn-pill.solid::before, .ff-result .primary::before,
	.gc-submit::before, .bq-btn::before, .cg-btn::before, .rw-foot a::before, .st-btn::before, .ty-btn::before,
	.ly-btn::before, .ly-tier.feat button::before, .trk-form button::before, .pe-buy .add-quick::before,
	.s-submit::before, .search-page-form .so-submit::before, .sl-row .add::before,
	.stl-sum button::before, .sto-flagship .cta::before,
	.sq-result .cta-row .primary::before, .sq-empty button::before, .wl-quick::before,
	.single-product form.cart .single_add_to_cart_button::before,
	.woocommerce-cart .wc-block-components-button::before,
	.woocommerce-checkout .wc-block-components-button::before { transition: none; }
	.article-card, .feat-card, .story-card, .jo-feat, .jo-story, .dr-card, .wl-item, .mk, .maker { transition: none; }
	.article-card:hover, .feat-card:hover, .story-card:hover, .jo-feat:hover, .jo-story:hover, .dr-card:hover, .wl-item:hover, .mk:hover, .maker:hover { transform: none; }
}

/* ============================================================
   Mini-cart drawer refinements — editorial voice at rest.
   ============================================================ */

/* Drawer heading: sans title + serif italic terracotta count. */
.off-canvas-cart .cart-header {
	align-items: center;
}

.off-canvas-cart .cart-title-wrap h2 {
	margin: 0;
	font-family: var(--display);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.off-canvas-cart .cart-count-pill {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: .62em;
	letter-spacing: 0;
	color: var(--terra);
	background: transparent;
	padding: 0;
	margin-right: 4px;
}

.off-canvas-cart .cart-count-pill::before {
	content: "\2014\00a0";
}

/* Free-shipping meter. */
.minicart-shipbar {
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.minicart-shipbar .shipbar-note {
	margin: 0 0 10px;
	font-family: var(--display);
	font-size: 13px;
	color: var(--ink-2);
}

.minicart-shipbar .shipbar-note em {
	font-family: var(--serif);
	font-style: italic;
	color: var(--terra);
}

.minicart-shipbar .shipbar-note .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--ink);
}

.minicart-shipbar .shipbar-track {
	display: block;
	height: 3px;
	background: var(--line);
	overflow: hidden;
}

.minicart-shipbar .shipbar-fill {
	display: block;
	height: 100%;
	background: var(--terra);
	transition: width 600ms cubic-bezier(.22, 1, .36, 1);
}

.minicart-shipbar.is-unlocked .shipbar-fill {
	background: var(--ink);
}

/* Quantity stepper inside each row. */
.off-canvas-cart .minicart-qty {
	display: flex;
	align-items: center;
	gap: 10px;
}

.off-canvas-cart .minicart-qty.is-busy {
	opacity: .45;
	pointer-events: none;
}

.minicart-qty .mq-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line);
}

.minicart-qty .mq-btn {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

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

.minicart-qty .mq-count {
	min-width: 24px;
	text-align: center;
	font-family: var(--display);
	font-size: 12px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.minicart-qty .mq-price {
	font-family: var(--display);
	font-size: 12px;
	color: var(--ink-3);
	white-space: nowrap;
}

/* Subtotal: value over label. */
.off-canvas-cart .minicart-total-label {
	font-family: var(--display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.off-canvas-cart .minicart-total-value {
	font-family: var(--display);
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* Expectation microcopy above the CTA pair. */
.off-canvas-cart .minicart-microcopy {
	margin: 0 0 12px;
	font-family: var(--display);
	font-size: 12px;
	color: var(--ink-3);
}

/* Floating corner buttons. "Back to top" owns the corner and the optional
   style-switcher launcher stacks above it, both centred on one axis and
   lifted clear of the single-product sticky add-to-bag bar. Phones keep a
   higher base so WooCommerce's pinned checkout button stays uncovered.
   Both directions are written out, so RTL conversion skips this block. */
.back-to-top {
	right: 24px;
	left: auto;
	bottom: 24px;
}

.style-switch-launch {
	right: 30px;
	left: auto;
	bottom: 88px;
}

body.has-sticky-atc .back-to-top {
	bottom: calc(24px + var(--cf-cbar-lift, 84px));
}

body.has-sticky-atc .style-switch-launch {
	bottom: calc(88px + var(--cf-cbar-lift, 84px));
}

[dir="rtl"] .back-to-top {
	right: auto;
	left: 24px;
}

[dir="rtl"] .style-switch-launch {
	right: auto;
	left: 30px;
}

@media (max-width: 720px) {
	.back-to-top {
		right: 14px;
	}

	.style-switch-launch {
		right: 20px;
	}

	.back-to-top,
	body.has-sticky-atc .back-to-top {
		bottom: 80px;
	}

	.style-switch-launch,
	body.has-sticky-atc .style-switch-launch {
		bottom: 144px;
	}

	[dir="rtl"] .back-to-top {
		right: auto;
		left: 14px;
	}

	[dir="rtl"] .style-switch-launch {
		right: auto;
		left: 20px;
	}
}

/* Style-switcher launcher: quieter, and never in captures. */
.style-switch-launch {
	width: 40px;
	height: 40px;
	opacity: .5;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.style-switch-launch:hover,
.style-switch-launch:focus-visible {
	opacity: 1;
}

.rivista-preview-shot .style-switch-launch {
	display: none;
}

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

/* Landing palette strips share the ".strip" class name with the generic
   chip-strip section in main.css, whose 56px padding collapses the 64px
   swatch row to zero content height — neutralise the section styles here. */
.lp-pal .strip {
	gap: 0;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
	border-top: 0;
	border-bottom: 0;
}

/* ============================================================
   Shared editorial sections — [rivista_products] [rivista_values]
   [rivista_journal] [rivista_newsletter]. Light by default; the
   .rs-dark modifier (or a dark demo body) remaps the palette.
   ============================================================ */
.rs {
	padding: clamp(64px, 8vw, 104px) 0;
	background: var(--paper);
	color: var(--ink);
}

.rs-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 36px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--line);
}

.rs-eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--terra);
}

.rs-head h2,
.rs-news h2 {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(32px, 4vw, 56px);
	line-height: .95;
	letter-spacing: -.035em;
	color: var(--ink);
}

.rs-head h2 i,
.rs-news h2 i {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--ink-3);
}

.rs-link {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ink);
	font-family: var(--display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.rs-link:hover { color: var(--terra); border-color: var(--terra); }

/* ---- products ---- */
.rs-products ul.products.rs-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 56px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-products ul.products.rs-grid::before,
.rs-products ul.products.rs-grid::after { content: none; display: none; }

.rs-products ul.products.rs-grid li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Same column steps as the shop archive grid (woocommerce-archive.css). */
@media (max-width: 1199px) {
	.rs-products ul.products.rs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 20px; }
}

@media (max-width: 899px) {
	.rs-products ul.products.rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
}

@media (max-width: 640px) {
	.rs-products ul.products.rs-grid { gap: 32px 12px; }
}

/* ---- values marquee ---- */
.rs-values { padding: 0; }

/* ---- journal ---- */
.rs-journal-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 28px;
}

.rs-post-media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--paper-2);
}

.rs-post-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease);
}

.rs-post:hover .rs-post-media img { transform: scale(1.04); }

.rs-post-body { padding-top: 18px; }

.rs-post-cat {
	display: block;
	margin-bottom: 8px;
	font-family: var(--display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--terra);
}

.rs-post h3 {
	margin: 0 0 10px;
	font-family: var(--display);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.25;
}

.rs-post h3 a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(var(--terra), var(--terra)) no-repeat 0 96% / 0% 2px;
	transition: background-size 380ms var(--ease);
}

.rs-post:hover h3 a { background-size: 100% 2px; }

.rs-post p {
	margin: 0 0 12px;
	font-family: var(--serif);
	font-style: italic;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink-2);
}

.rs-post-meta {
	display: block;
	font-family: var(--display);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* ---- newsletter ---- */
.rs-news { background: var(--paper-2); }

.rs-news-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 48px;
	align-items: center;
}

.rs-news h2 {
	margin: 0 0 16px;
	font-size: clamp(30px, 3.6vw, 48px);
}

.rs-news p {
	margin: 0;
	max-width: 44ch;
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink-2);
}

.rs-news-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
}

.rs-news-form input {
	min-height: 56px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-inline-end: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	outline: none;
	transition: border-color var(--dur) var(--ease);
}

.rs-news-form input:focus { border-color: var(--ink); }

.rs-news-form button {
	min-height: 56px;
	padding: 0 26px;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	font-family: var(--display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.rs-news-form button:hover { background: var(--terra); border-color: var(--terra); }

.rs-news-fine {
	grid-column: 1 / -1;
	margin: 10px 0 0 !important;
	font-family: var(--display) !important;
	font-style: normal !important;
	font-size: 12px !important;
	color: var(--ink-3) !important;
}

.rs-news-success {
	padding: 18px 20px;
	border: 1px solid var(--line);
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	color: var(--ink);
}

/* ---- dark tone ---- */
.rs-dark,
.dl-demo .rs {
	--paper: #14130f;
	--paper-2: #1b1a16;
	--paper-3: #24221d;
	--ink: #f2f0ea;
	--ink-2: #cfcbc2;
	--ink-3: #8f8a80;
	--line: rgba(242, 240, 234, .14);
	--cgc-bg: #14130f;
	--cgc-text-dark: #f2f0ea;
	--cgc-text-light: #8f8a80;
	--cgc-border: rgba(242, 240, 234, .14);
	--cgc-btn-bg: #f2f0ea;
	--cgc-btn-text: #14130f;
	background: var(--paper);
	color: var(--ink);
}

.rs-dark.rs-news { background: var(--paper-2); }

/* Inside the Dark demo, blend with its own blacks instead of reading as
   lighter panels, and let the newsletter sit on the page ground so the
   footer's top margin doesn't show as a stripe. */
.dl-demo .rs {
	--paper: #0e0c08;
	--paper-2: #16140e;
	--cgc-bg: #0e0c08;
}

.dl-demo .rs-news {
	background: transparent;
	border-top: 1px solid var(--line);
}

@media (max-width: 1080px) {
	.rs-journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.rs-journal-grid { grid-template-columns: 1fr; }
	.rs-news-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.rs-post-media img,
	.rs-post h3 a { transition: none; }
}

/* Style switcher panel: while closed it sits just off-canvas, but its wide
   shadow still bled ~40px into the right edge of every page. Hide it (and
   take it out of the tab order) until it opens; visibility flips only after
   the slide-out finishes so the closing animation stays visible. */
.style-panel {
  visibility: hidden;
  box-shadow: none;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .55s, box-shadow .3s ease;
}

.style-panel.is-open {
  visibility: visible;
  box-shadow: 40px 0 80px -40px rgba(0, 0, 0, .4);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s, box-shadow .3s ease;
}