/* ==========================================================================
   Theme Name: Nunito Motion
   Description: Keeps the default Northwood palette untouched and re-voices only the buttons and navigation chrome in Nunito Sans: uppercase letterspaced labels, an animated amber underline on hover and gold-edged dropdown rows. Reference motion, default colours.
   Tone: Default palette / Modern / Athletic UI
   Fonts: Cormorant Garamond + Inter (defaults) + Nunito Sans (UI chrome)
   Base: Northwood Archery storefront (assets/css/styles.css)
   --------------------------------------------------------------------------
   Drop-in replacement stylesheet. Upload it in admin -> Site -> Theme
   stylesheet, then pick "Nunito Motion" from the list. The Google Fonts import must stay
   at the very top of this file.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ==========================================================================
   Northwood Archery — Storefront stylesheet
   A premium European outdoor aesthetic: deep forest greens, warm wood amber,
   cream paper tones, serif display type and frosted-glass navigation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --forest-900: #161b16;
  --forest-800: #1f261f;
  --forest-700: #2c352c;
  --forest-600: #3a463a;
  --pine:       #4d5c4a;
  --moss:       #77846b;
  --sage:       #aeb9a2;

  --amber:      #c98a3d;
  --amber-600:  #a96f2a;
  --amber-100:  #f3e3cb;

  --cream:      #f6f3ec;
  --paper:      #fdfbf6;
  --sand:       #ece7dc;

  --ink:        #211f1a;
  --ink-soft:   #4c493f;
  --muted:      #7a7669;

  --line:       #e3ddd0;
  --line-dark:  rgba(255, 255, 255, 0.12);

  --danger:     #b5402f;
  --success:    #3f7a4a;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius:     3px;
  --radius-sm:  3px;
  --shadow-sm:  0 1px 2px rgba(22, 27, 22, 0.06);
  --shadow-md:  0 10px 30px rgba(22, 27, 22, 0.10);
  --shadow-lg:  0 24px 60px rgba(22, 27, 22, 0.18);

  --container:  1400px;
  --header-h:   72px;
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: var(--forest-900);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

input, select, textarea { font-family: inherit; font-size: 1rem; }

::selection { background: var(--amber); color: #fff; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--forest-900);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. Announcement bar
   -------------------------------------------------------------------------- */
.announcement {
  background: var(--forest-900);
  color: var(--sage);
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.5rem 1rem;
}
.announcement p { margin: 0; }

/* --------------------------------------------------------------------------
   3b. Cookie notice (R46)
   A slim bar pinned to the bottom of the viewport until the visitor clicks
   "Agree". The markup is only rendered while no choice has been stored
   (app/footer.php), so someone who already agreed never sees it. It follows
   the announcement bar's colours; every generated theme re-paints the pair
   with a contrast-checked foreground (see gen_themes.py).
   -------------------------------------------------------------------------- */
.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 250;
  background: var(--forest-900);
  color: var(--sage);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
  padding: 0.85rem 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cookie-notice.is-hidden { opacity: 0; transform: translateY(100%); pointer-events: none; }
.cookie-notice-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.cookie-notice-text { margin: 0; font-size: 0.92rem; line-height: 1.6; }

/* R47 — the two actions are now proper buttons. The privacy-policy link
   ("ghost") and the Agree button ("agree") are sized like the storefront's
   pill buttons so the bar reads as a deliberate, elegant prompt instead of
   an afterthought. Text colours are contrast-audited per theme in
   gen_themes.py. */
.cookie-notice-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}
.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.66rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.cookie-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cookie-btn-agree {
  background: var(--amber);
  color: var(--forest-900);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
.cookie-btn-agree:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
  transform: translateY(-1px);
}
.cookie-btn-ghost {
  color: inherit;
  border-color: rgba(255, 255, 255, 0.38);
  background: transparent;
}
.cookie-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* The toasts also live at the bottom centre — lift them clear of the bar. */
body.has-cookie-notice .toast { bottom: 6.5rem; }

@media (max-width: 640px) {
  .cookie-notice { padding: 1rem 0; }
  .cookie-notice-inner { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .cookie-notice-text { font-size: 0.88rem; }
  /* Both buttons share one full-width row, evenly split — keeps the bar
     compact (two stacked buttons would crowd small screens). */
  .cookie-notice-actions { width: 100%; gap: 0.55rem; }
  .cookie-btn { flex: 1 1 0; padding: 0.78rem 0.9rem; }
  body.has-cookie-notice .toast { bottom: 11rem; }
}

/* --------------------------------------------------------------------------
   4. Header — frosted glass, sticky
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* R40 — the merchant can add navigation buttons, so the bar may need a
     second row on medium screens: grow instead of clipping the buttons. */
  min-height: var(--header-h);
  height: auto;
  display: flex;
  align-items: center;
  background: rgba(22, 27, 22, 0.68);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line-dark);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(22, 27, 22, 0.86);
  box-shadow: 0 8px 30px rgba(10, 14, 10, 0.25);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.logo img {
  display: block;
  /* R40 — the logo area now accepts a long wordmark: up to 390px wide, capped
     at 52px tall so it always fits the 72px sticky header. Narrower screens
     step it back down again (see the bottom of this file). */
  max-height: 52px;
  max-width: 390px;
  width: auto;
  height: auto;
  border-radius: 3px;
}

/* --- Navigation --- */
.main-nav { flex: 1 1 auto; min-width: 0; }
.logo, .header-actions { flex: 0 0 auto; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.35rem 0;
}

.nav-list > li { position: relative; }

.nav-list > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.85rem;
  color: var(--sage);
  font-size: 0.92rem;
  font-weight: 500;
  /* R40 — page titles become nav buttons too; a wrapped two-line button reads
     as broken, so labels stay on one line and the compact step below buys
     extra room on medium screens. */
  white-space: nowrap;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.nav-list > li > a:hover,
.nav-list > li > a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.chevron {
  font-size: 0.7em;
  transition: transform 0.2s var(--ease);
}

.has-dropdown:hover .chevron,
.has-dropdown:focus-within .chevron { transform: rotate(180deg); }

/* Dropdown menu — appears on hover */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  padding: 0.5rem;
  background: rgba(255, 253, 248, 0.9);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-link {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.92rem;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), padding-left 0.15s var(--ease);
}

.dropdown-link:hover {
  background: var(--sand);
  color: var(--forest-900);
  padding-left: 1.05rem;
}

/* R33 — invisible hover bridge over the 8px gap between the nav link and
   its dropdown, so moving the mouse down doesn't close the menu. */
.dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

/* R33 — third level: a flyout panel that opens to the right of its parent
   item on hover, same frosted-glass styling as the main dropdown. */
.dropdown-item { position: relative; }

.dropdown-item.has-sub > .dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dropdown-item.has-sub > .dropdown-link::after {
  content: '▸';
  font-size: 0.72em;
  color: var(--muted);
  transition: transform 0.2s var(--ease), color 0.15s var(--ease);
}

.dropdown-item.has-sub:hover > .dropdown-link::after,
.dropdown-item.has-sub:focus-within > .dropdown-link::after {
  transform: translateX(2px);
  color: var(--forest-900);
}

.sub-dropdown {
  position: absolute;
  top: 0;
  left: calc(100% + 4px);
  min-width: 200px;
  padding: 0.5rem;
  background: rgba(255, 253, 248, 0.9);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 5;
}

/* Horizontal hover bridge across the 4px gap to the flyout. */
.sub-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 100%;
}

.dropdown-item.has-sub:hover > .sub-dropdown,
.dropdown-item.has-sub:focus-within > .sub-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* --- Header actions --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-search input {
  width: 150px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.88rem;
  transition: width 0.25s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.header-search input::placeholder { color: var(--sage); }
.header-search input:focus {
  width: 190px;
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--amber);
  outline: none;
}

.btn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  transition: background 0.2s var(--ease);
}
.btn-icon:hover { background: rgba(255, 255, 255, 0.12); }

.cart-toggle::after {
  content: attr(data-cart-count);
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid var(--forest-800);
}
.cart-toggle[data-cart-count="0"]::after { display: none; }

/* Hamburger */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
}
.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

/* --- Mobile menu --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  padding: 1.5rem;
  background: rgba(22, 27, 22, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.menu-close {
  width: 42px;
  height: 42px;
  font-size: 1.8rem;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
}
.menu-close:hover { background: rgba(255,255,255,0.1); }

.mobile-menu nav > ul > li > a,
.mobile-menu .mobile-cat > a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid var(--line-dark);
}

.mobile-sub {
  padding: 0.35rem 0 0.6rem 1rem;
}
.mobile-sub a {
  display: block;
  padding: 0.45rem 0;
  color: var(--sage);
  font-size: 1.05rem;
}
.mobile-sub a:hover { color: #fff; }

/* R33 — third level in the mobile drawer: deeper indent, smaller type,
   subtle left rule so the hierarchy stays readable on small screens. */
.mobile-sub--deep {
  padding: 0.1rem 0 0.3rem 1rem;
  margin-top: 0.1rem;
  border-left: 2px solid var(--line-dark);
}
.mobile-sub--deep a {
  font-size: 0.98rem;
  color: var(--sage);
  opacity: 0.92;
}

.mobile-menu .btn { margin-top: 1.5rem; }

body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--amber);
  color: #fff;
  box-shadow: 0 6px 18px rgba(201, 138, 61, 0.32);
}
.btn-primary:hover {
  background: var(--amber-600);
  box-shadow: 0 10px 26px rgba(201, 138, 61, 0.4);
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--forest-800);
  border-color: var(--forest-600);
}
.btn-outline:hover {
  background: var(--forest-800);
  color: #fff;
  transform: translateY(-2px);
}

.btn-text {
  background: none;
  border: none;
  padding: 0.4rem 0;
  color: var(--amber-600);
  font-weight: 600;
}
.btn-text:hover { text-decoration: underline; }

.btn-large { padding: 0.95rem 2.1rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: rgba(181, 64, 47, 0.4);
}
.btn-danger:hover { background: var(--danger); color: #fff; }

.btn-paypal {
  background: #ffc439;
  color: #003087;
  box-shadow: 0 6px 18px rgba(255, 196, 57, 0.32);
}
.btn-paypal:hover {
  background: #f2ba36;
  box-shadow: 0 10px 26px rgba(255, 196, 57, 0.4);
  transform: translateY(-2px);
}
.btn-paypal:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.btn-add {
  background: var(--forest-800);
  color: #fff;
  padding: 0.6rem 1.1rem;
  font-size: 0.88rem;
}
.btn-add:hover { background: var(--amber); transform: translateY(-2px); }

.btn-quick-add {
  background: var(--amber);
  color: #fff;
  width: 42px;
  height: 42px;
}
.btn-quick-add:hover { background: var(--amber-600); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.hero-media, .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Background video or iframe (added in the admin Site settings). Sized to
   cover the hero area the same way as the image fallback. */
.hero-media .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media .hero-bg-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.77vh;          /* 16:9 cover at viewport height */
  height: 56.25vw;          /* 16:9 cover at viewport width  */
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.hero.has-video .hero-overlay {
  /* When a background video is active the overlay needs to be slightly heavier
     so the text remains readable regardless of the footage. */
  background:
    linear-gradient(180deg, rgba(22, 27, 22, 0.55) 0%, rgba(22, 27, 22, 0.25) 40%, rgba(22, 27, 22, 0.9) 100%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 27, 22, 0.15) 0%, rgba(22, 27, 22, 0.05) 40%, rgba(22, 27, 22, 0.85) 100%),
    linear-gradient(90deg, rgba(22, 27, 22, 0.55) 0%, transparent 60%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-block: clamp(2rem, 6vh, 4rem);
}

/* The text block sits at the content column's left edge (aligned with the rest
   of the page), never flush against the viewport edge, and never exceeds
   900px in width. */
.hero-text {
  max-width: 900px;
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 1rem;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.hero-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  max-width: 34em;
  margin-bottom: 2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* --------------------------------------------------------------------------
   7. Trust bar
   -------------------------------------------------------------------------- */
.trust-bar {
  background: var(--forest-800);
  color: var(--sage);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-block: 1.6rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.92rem;
  font-weight: 500;
}
.trust-item svg { flex: none; color: var(--amber); }

/* --------------------------------------------------------------------------
   8. Section scaffolding
   -------------------------------------------------------------------------- */
.section-header { text-align: center; margin-bottom: 2.75rem; }
.section-header h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 0; }

.categories, .featured, .craft, .testimonials, .listing {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.categories { background: var(--paper); }

/* Editable content pages (Support, Shipping & Returns, Privacy Policy, etc.)
   R47 — magazine-grade typography: ruled section headings, generous leading,
   amber list markers and framed images, so an HTML page composed in the rich
   editor lands looking deliberate and well organised. */
.content-page {
  max-width: 54em;
  margin-inline: auto;
  font-size: 1.02rem;
}
.content-page > :first-child { margin-top: 0; }
.content-page h2 {
  color: var(--forest-900);
  font-size: 1.7rem;
  line-height: 1.25;
  margin: 2.4rem 0 0.8rem;
}
.content-page h3 {
  color: var(--forest-800);
  font-size: 1.24rem;
  line-height: 1.3;
  margin: 2.2rem 0 0.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.content-page h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.content-page p { color: var(--ink-soft); line-height: 1.85; margin: 0 0 1.05rem; }
.content-page .lead { color: var(--ink); font-size: 1.1rem; }
.content-page ul, .content-page ol {
  margin: 0 0 1.25rem 1.5rem;
  padding: 0;
  color: var(--ink-soft);
  line-height: 1.8;
}
.content-page ul { list-style: disc; }
.content-page ol { list-style: decimal; }
.content-page li { margin-bottom: 0.45rem; padding-left: 0.2rem; }
.content-page li::marker { color: var(--amber-600); font-weight: 700; }
.content-page strong { color: var(--forest-800); font-weight: 600; }
.content-page a {
  color: var(--amber-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.content-page a:hover { color: var(--forest-800); }
.content-page img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.4rem 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.content-page blockquote {
  margin: 1.4rem 0;
  padding: 0.85rem 1.3rem;
  border-left: 3px solid var(--amber);
  background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft);
  font-style: italic;
}
.content-page blockquote p:last-child { margin-bottom: 0; }
.content-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.95rem;
}
.content-page th, .content-page td {
  border: 1px solid var(--line);
  padding: 0.55rem 0.8rem;
  text-align: left;
  color: var(--ink-soft);
}
.content-page th { background: var(--sand); color: var(--forest-800); font-weight: 600; }
.content-page hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }

/* R48 — policy-page presentation: a "last updated" line in the hero, numbered
   sections (pure CSS counters, so admin-authored HTML needs no markup) and a
   sticky "On this page" index that main.js builds from the article's own
   headings. It only opens on wide screens once JS confirms enough sections,
   so narrow viewports keep the plain article they had before. Everything is
   variable-driven, so the bundled themes inherit it unchanged. */
.hero-meta {
  color: var(--sage);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  margin: 0.85rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hero-meta::before {
  content: "";
  flex: none;
  width: 1.7rem;
  height: 1px;
  background: var(--amber);
}

.content-page h2, .content-page h3 { scroll-margin-top: calc(var(--header-h) + 1.75rem); }

.content-page-numbered { counter-reset: nw-section; }
.content-page-numbered h3 { counter-increment: nw-section; }
.content-page-numbered h3::before {
  content: counter(nw-section, decimal-leading-zero);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--amber-600);
  margin-bottom: 0.3rem;
}

.page-toc { display: none; }
.page-toc-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.85rem;
}
.page-toc-nav a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.95rem;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.page-toc-nav a:hover { color: var(--forest-800); }
.page-toc-nav a.is-active {
  color: var(--amber-600);
  border-left-color: var(--amber);
  font-weight: 600;
}
.page-toc-num {
  margin-right: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.page-toc-nav a.is-active .page-toc-num { color: var(--amber-600); }

@media (min-width: 1024px) {
  .content-wrap.has-toc.toc-ready {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15.5rem;
    gap: 4rem;
    align-items: start;
  }
  .content-wrap.has-toc.toc-ready .page-toc {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
    max-height: calc(100vh - var(--header-h) - 4.5rem);
    overflow: auto;
    padding-top: 0.4rem;
  }
}

.section-actions { text-align: center; margin-top: 2.75rem; }

/* --------------------------------------------------------------------------
   9. Shop by Category — uniform image tiles
   -------------------------------------------------------------------------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.category-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  isolation: isolate;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Uniform size: every category image is a fixed 1:1 square, cropped to fill. */
.category-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.category-card:hover img { transform: scale(1.06); }

.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(16, 20, 16, 0.85) 100%);
}

.category-title {
  position: absolute;
  left: 1.25rem;
  bottom: 2.1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  transition: bottom 0.3s var(--ease);
}

.category-count {
  position: absolute;
  left: 1.25rem;
  bottom: 1.1rem;
  z-index: 2;
  color: var(--sage);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.category-card:hover .category-count { opacity: 1; transform: translateY(0); }
.category-card:hover .category-title { bottom: 2.6rem; }

/* --------------------------------------------------------------------------
   10. Product grid & cards
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

/* Homepage featured products: fewer columns = larger, more prominent cards. */
.product-grid--featured {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
}
.product-grid--featured .product-info { padding: 1.5rem; }
.product-grid--featured .product-info h3 { font-size: 1.5rem; }
.product-grid--featured .product-price { font-size: 1.35rem; }
.product-grid--featured .btn-add { padding: 0.72rem 1.3rem; font-size: 0.92rem; }

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.product-image {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sand);
}
.product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.product-card:hover .product-image img { transform: scale(1.05); }

.badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.25rem 0.7rem;
  background: var(--amber);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}
.badge-soldout { background: var(--ink-soft); }

.product-info { display: flex; flex-direction: column; flex: 1; padding: 1.15rem; }

.product-cat {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.3rem;
}

.product-info h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.product-info h3 a:hover { color: var(--amber-600); }

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.product-price { font-size: 1.2rem; font-weight: 700; color: var(--forest-800); }
.product-compare { font-size: 0.95rem; color: var(--muted); text-decoration: line-through; }

/* Inline "Save $X" pill on the product detail page. Unlike the absolutely
   positioned `.badge` (used on product-card images), this stays in normal
   flow inside the price row so it never overlaps the title. */
.save-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  background: var(--amber);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   11. Craft section
   -------------------------------------------------------------------------- */
.craft { background: var(--sand); }

.craft-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.craft-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.craft-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.craft-content h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }

.checklist { margin: 1.4rem 0 1.8rem; }
.checklist li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.55rem;
  color: var(--ink-soft);
}
.checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--amber-600);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.testimonial-grid blockquote {
  margin: 0;
  padding: 1.9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.testimonial-grid blockquote:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.testimonial-grid blockquote p {
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 1.4rem;
}

.testimonial-grid cite { display: block; font-style: normal; font-weight: 700; color: var(--forest-800); }
.testimonial-grid .role { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }

/* --------------------------------------------------------------------------
   13. Page hero & breadcrumb (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background-color: var(--forest-800);
  background-image:
    linear-gradient(180deg, rgba(22, 27, 22, 0.84) 0%, rgba(22, 27, 22, 0.68) 100%),
    url('../images/hero.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-block: clamp(3.4rem, 6.5vw, 5.2rem) clamp(2.4rem, 4.5vw, 4rem);
}
.page-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin-bottom: 0.2rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.page-hero .breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.page-hero .breadcrumb a:hover { color: var(--amber); }
.page-lead { color: var(--sage); max-width: 46em; margin: 0.6rem 0 0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--sage);
  margin-bottom: 1.4rem;
}
.breadcrumb a { color: var(--sage); transition: color 0.2s var(--ease); }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb .current { color: #fff; font-weight: 500; }

.breadcrumb-top {
  padding-top: 2.2rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.breadcrumb-top a, .breadcrumb-top .current { color: var(--muted); }
.breadcrumb-top a:hover { color: var(--amber-600); }
.breadcrumb-top .current { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Subcategory chips
   -------------------------------------------------------------------------- */
.subcat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.25rem;
}

.subcat-chip {
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.subcat-chip:hover, .subcat-chip.active {
  background: var(--forest-800);
  color: #fff;
  border-color: var(--forest-800);
}

/* --------------------------------------------------------------------------
   15. Product detail
   -------------------------------------------------------------------------- */
.product-detail { padding-top: 2rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); }

.product-detail-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.product-gallery {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sand);
}

.gallery-main {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}
.gallery-main img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.gallery-main img.is-switching { opacity: 0.35; }

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(22, 27, 22, 0.55);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.product-gallery:hover .gallery-nav,
.gallery-nav:focus-visible { opacity: 1; }
.gallery-nav:hover { background: var(--amber); }
.gallery-nav.prev { left: 0.85rem; }
.gallery-nav.next { right: 0.85rem; }

.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.85rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.gallery-thumbs button {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.gallery-thumbs button.is-active { border-color: var(--amber); }
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Product image lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 13, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-out;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.2s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lightbox-close:hover { background: var(--amber); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lightbox-nav:hover { background: var(--amber); }
.lightbox-nav.lb-prev { left: 1rem; }
.lightbox-nav.lb-next { right: 1rem; }

.lightbox-bar {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  color: #fff;
}
.lightbox-counter { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.lightbox-zoom { display: flex; gap: 0.4rem; }
.lightbox-zoom button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox-zoom button:hover { background: var(--amber); border-color: var(--amber); }

body.lightbox-open { overflow: hidden; }

.product-detail-info h1 { font-size: clamp(2rem, 3.6vw, 2.7rem); margin-bottom: 0.4rem; }

.product-price-row.detail .product-price { font-size: 1.7rem; }

.product-stock { font-size: 0.92rem; margin-bottom: 1.3rem; }
.product-stock.in { color: var(--success); font-weight: 600; }
.product-stock.out { color: var(--danger); font-weight: 600; }

.product-description {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.7;
  letter-spacing: 0.005em;
  max-width: none;
  width: 100%;
  text-align: justify;
  hyphens: auto;
  font-weight: 400;
}
.product-description p { margin: 0 0 0.85rem; }
.product-description p:last-child { margin-bottom: 0; }
/* R47 — the description now accepts admin-authored HTML from the rich text
   editor, so headings, lists and inline images need real styles here too. */
.product-description h3 {
  color: var(--forest-800);
  font-size: 1.2rem;
  margin: 1.5rem 0 0.55rem;
}
.product-description ul, .product-description ol {
  margin: 0 0 1rem 1.4rem;
  padding: 0;
  color: var(--ink-soft);
}
.product-description ul { list-style: disc; }
.product-description ol { list-style: decimal; }
.product-description li { margin-bottom: 0.35rem; }
.product-description li::marker { color: var(--amber-600); font-weight: 700; }
.product-description img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.product-description a { color: var(--amber-600); text-decoration: underline; text-underline-offset: 3px; }
.product-description a:hover { color: var(--forest-800); }
.product-description strong { color: var(--forest-800); }

/* Product details box — a full-width panel below the gallery + buy columns */
.product-info-section {
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.product-info-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 3rem);
}
.product-info-box > .eyebrow {
  margin-bottom: 0.55rem;
}
.product-info-box > h2 {
  font-size: clamp(1.7rem, 2.9vw, 2.2rem);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

/* Warranty / shipping / returns — modern, readable feature cards */
.product-meta {
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.product-meta li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.product-meta-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-600);
}
.product-meta-value {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

.product-video {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.product-video h3 {
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}
.product-video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--radius);
  background: var(--sand);
}

.variant-selectors { display: grid; gap: 1rem; margin-bottom: 1.4rem; }
.variant-group label {
  display: block;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
  font-size: 0.92rem;
}
.variant-group select {
  width: 100%;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--paper);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: var(--font-body);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.variant-group select:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(77, 92, 74, 0.14);
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.qty-row label { font-weight: 600; color: var(--ink-soft); }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.qty-stepper button {
  width: 42px;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  color: var(--ink-soft);
  transition: background 0.15s var(--ease);
}
.qty-stepper button:hover { background: var(--sand); }
.qty-stepper input {
  width: 52px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--ink);
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper.small button { width: 34px; height: 34px; }
.qty-stepper.small input { width: 44px; height: 34px; }

.buy-actions { display: flex; gap: 0.8rem; margin-bottom: 1.5rem; }
.btn-add-to-cart { flex: 1; }

.paypal-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.paypal-divider::before, .paypal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.paypal-buttons { min-height: 45px; }
.paypal-powered { font-size: 0.78rem; color: var(--muted); text-align: center; margin-top: 0.5rem; }

.soldout-note {
  padding: 1rem 1.2rem;
  background: var(--sand);
  border-left: 3px solid var(--amber);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
}

.related { background: var(--paper); }

/* --------------------------------------------------------------------------
   16. Cart & checkout
   -------------------------------------------------------------------------- */
.cart-layout, .checkout-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 2rem;
  align-items: start;
}

.cart-line-items { display: flex; flex-direction: column; gap: 1rem; }

.cart-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  padding: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  align-items: center;
}

.cart-line-img img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.cart-line-info h3 { font-size: 1.2rem; margin-bottom: 0.2rem; }
.cart-line-variant { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.25rem; }
.cart-line-price { color: var(--muted); font-size: 0.92rem; }

.cart-line-form { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }

.cart-line-right { text-align: right; }
.cart-line-total { display: block; font-size: 1.2rem; font-weight: 700; color: var(--forest-800); margin-bottom: 0.5rem; }

.cart-remove {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 0.85rem;
  padding: 0;
}
.cart-remove:hover { text-decoration: underline; }

.cart-summary {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  padding: 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.cart-summary h2 { font-size: 1.4rem; margin-bottom: 1.2rem; }

.summary-row, .summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.summary-row.total {
  border-bottom: none;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  padding-top: 0.9rem;
  margin-top: 0.4rem;
}
.cart-summary .btn { margin-top: 0.9rem; }

/* Checkout form */
.checkout-form { padding: 0; }
.checkout-form > h2 { font-size: 1.4rem; margin-bottom: 1.2rem; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.2rem;
}
.form-grid .full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(201, 138, 61, 0.15);
  outline: none;
}

.form-note { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.2rem; }

/* Contact page */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.contact-info { display: grid; gap: 1.2rem; }
.contact-card,
.contact-form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.contact-card h2,
.contact-form-card h2 { font-size: 1.35rem; margin-bottom: 1.1rem; }
.contact-card p { color: var(--muted); margin: 0; }

.contact-list { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--amber-100);
  color: var(--amber-600);
  font-size: 1.15rem;
}
.contact-list strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.1rem; }
.contact-list a { color: var(--amber-600); }
.contact-list a:hover { text-decoration: underline; }
.contact-list address { font-style: normal; color: var(--ink-soft); line-height: 1.5; }

.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-form .btn { align-self: flex-start; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* R49 — contact form: general / after-sales tabs + photo upload. */
.contact-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.25rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.contact-tab {
  flex: 1 1 auto;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.contact-tab:hover { color: var(--ink); background: var(--paper); }
.contact-tab.is-active {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.contact-tab--after.is-active { color: var(--amber-600); border-color: var(--amber); }
.contact-after-sales-jump { margin-top: 1rem; }
.msg-upload-preview { margin-top: 0.6rem; }
.msg-upload-preview img {
  max-width: 180px;
  max-height: 180px;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.4rem;
}
/* R49 — after-sales tag + attachment preview in message threads. */
.message-tag.is-after-sales { background: rgba(201, 138, 61, 0.16); color: var(--amber-600); }
.msg-order-ref { font-weight: 700; }
.msg-attachment { margin: 0 0 1rem; }
.msg-attachment img {
  max-width: 220px;
  max-height: 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: block;
}
.msg-attachment-label { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 0.3rem; }
@media (max-width: 560px) {
  .contact-tab { flex: 1 1 100%; }
  .msg-attachment img, .msg-upload-preview img { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   17. Status pages (success / cancel)
   -------------------------------------------------------------------------- */
.status-page {
  display: flex;
  align-items: center;
  min-height: 62vh;
  padding-block: 3rem;
}
.status-inner { text-align: center; max-width: 560px; }

.status-icon {
  display: inline-flex;
  width: 96px;
  height: 96px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(63, 122, 74, 0.14);
  color: var(--success);
  margin-bottom: 1.5rem;
}
.status-icon.warn { background: rgba(201, 138, 61, 0.14); color: var(--amber-600); }

.status-inner h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
.order-number { font-size: 1.05rem; }
.order-number strong { color: var(--amber-600); }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 1.8rem; }

/* --------------------------------------------------------------------------
   18. Empty state
   -------------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 2.6rem 1.8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 1.5rem;
}
.empty-state h1, .empty-state h2 { font-size: 1.8rem; }
.empty-state p { color: var(--muted); margin: 0.4rem 0; }
.empty-state .btn { margin-top: 0.8rem; }
.empty-state-hint { font-size: 0.88rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   19. Toast notification
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, 20px);
  z-index: 300;
  padding: 0.85rem 1.4rem;
  background: var(--forest-900);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: var(--danger); }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--forest-900);
  color: var(--sage);
  padding-top: 3.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 3rem;
  padding-bottom: 3rem;
}

.footer-brand .logo { color: #fff; }
.footer-brand p { max-width: 26em; margin: 0.9rem 0 1.2rem; color: var(--sage); }
.footer-brand address { font-style: normal; line-height: 1.7; color: var(--moss); }

.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2rem;
}
.footer-links h3 { color: #fff; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-links h3 a { color: #fff; transition: color 0.2s var(--ease); }
.footer-links h3 a:hover { color: var(--amber); }
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a { color: var(--sage); font-size: 0.95rem; transition: color 0.2s var(--ease); }
.footer-links a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.85rem;
}
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a { color: var(--sage); }
.footer-legal a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   21. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   22. Account, auth & order tracking
   -------------------------------------------------------------------------- */
.account-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  align-items: start;
}

.account-sidebar { position: sticky; top: calc(var(--header-h) + 1.5rem); }

.account-card {
  padding: 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.account-card h2 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.account-card .eyebrow { margin-bottom: 0.4rem; }
.account-email { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.1rem; }

.account-menu { border-top: 1px solid var(--line); padding-top: 0.8rem; }
.account-menu li { margin-bottom: 0.2rem; }
.account-menu a {
  display: block;
  padding: 0.45rem 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  transition: color 0.15s var(--ease);
}
.account-menu a:hover { color: var(--amber-600); }

.cta-card p { color: var(--muted); margin-bottom: 1.2rem; }
.cta-card .btn { margin-bottom: 0.6rem; }

.account-main { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }

.section-title {
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.order-list { display: flex; flex-direction: column; gap: 1rem; }

.order-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.order-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.3rem;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.order-card-head h3 { font-size: 1.2rem; margin-bottom: 0.1rem; }
.order-date { font-size: 0.82rem; color: var(--muted); }
.order-card-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.order-total { font-size: 1.15rem; font-weight: 700; color: var(--forest-800); }

.order-card-body { padding: 1rem 1.3rem 1.2rem; }
.order-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0 1.3rem 1.2rem;
}

.order-items { display: flex; flex-direction: column; }
.order-item-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--line);
}
.order-item-line:last-child { border-bottom: none; }
.order-item-name { color: var(--ink-soft); }
.order-item-price { font-weight: 600; color: var(--ink); white-space: nowrap; }
/* R51 — an ordered product that has since been deleted stays as text, with a
   short explainer instead of a (dead) product link. */
.order-item-gone { color: var(--muted); }
.order-item-note { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.5; margin-top: 0.15rem; }
.order-items .cart-unavailable-badge { margin-left: 0.4rem; }

.order-note { color: var(--muted); font-size: 0.9rem; margin: 0.8rem 0 0; }

.order-tracking {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.order-tracking span {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.order-tracking strong {
  font-size: 1rem;
  color: var(--forest-800);
  font-variant-numeric: tabular-nums;
}

/* Status pills (storefront) */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.status-pending { background: rgba(122, 118, 105, 0.16); color: var(--muted); }
.status-paid, .status-shipped, .status-delivered, .status-completed { background: rgba(63, 122, 74, 0.14); color: var(--success); }
.status-processing { background: rgba(201, 138, 61, 0.16); color: var(--amber-600); }
.status-cancelled, .status-refunded { background: rgba(181, 64, 47, 0.12); color: var(--danger); }

/* Shipping progress timeline */
.shipping-steps {
  display: flex;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
}
.step::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.step:first-child::before { display: none; }
.step-dot {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  border: 2px solid var(--line);
}
.step.is-done .step-dot { background: var(--success); border-color: var(--success); color: #fff; }
.step.is-current .step-dot { background: var(--amber); border-color: var(--amber); color: #fff; }
.step.is-done::before { background: var(--success); }
.step-label { font-size: 0.78rem; color: var(--muted); }
.step.is-done .step-label, .step.is-current .step-label { color: var(--ink); font-weight: 600; }

/* Auth pages */
.auth-wrap { display: flex; justify-content: center; }
.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.auth-lead { color: var(--muted); margin-bottom: 1.5rem; }
.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }
.auth-form .btn-block { margin-top: 0.5rem; }
.auth-switch { text-align: center; color: var(--muted); margin-top: 1.4rem; font-size: 0.92rem; }
.auth-switch a { color: var(--amber-600); font-weight: 600; }
/* R31: "resend verification" row on the sign-in card. */
.auth-resend-row { margin-top: 0.9rem; }
/* R49 — deliverability hints beside the verification flows. */
.resend-hint {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0.5rem 0 0.75rem;
}
.auth-resend-row .resend-hint { margin-bottom: 0.6rem; }
.verify-tip { display: inline-block; margin-top: 0.45rem; opacity: 0.92; }
/* R51 — the two confirmation stories ("Almost there…" on the register card
   and the unconfirmed-address notice on the sign-in card) get a calmer
   reading rhythm: one idea per line, real paragraph spacing and the theme's
   own success/danger colours carried through links. */
.alert-verify { line-height: 1.65; font-size: 0.95rem; padding: 1.05rem 1.2rem; }
.alert-verify p { margin: 0; }
.alert-verify p + p { margin-top: 0.5rem; }
.alert-verify .verify-lead { font-size: 1rem; }
.alert-verify .verify-tip {
  display: block;
  opacity: 0.85;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-top: 0.65rem;
}
.alert-verify .verify-resend { margin-top: 0.65rem; }
.alert-verify a { color: inherit; font-weight: 600; text-underline-offset: 2px; }
.field-hint { color: var(--muted); font-weight: 400; }
.account-note a { color: var(--amber-600); font-weight: 600; }

.alert {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}
.alert-error { background: rgba(181, 64, 47, 0.1); color: var(--danger); border: 1px solid rgba(181, 64, 47, 0.25); }
.alert-success { background: rgba(63, 122, 74, 0.12); color: var(--success); border: 1px solid rgba(63, 122, 74, 0.25); }

.empty-state.compact { padding: 2rem 1.5rem; }
.empty-state.compact h3 { font-size: 1.4rem; }

/* --------------------------------------------------------------------------
   22b. Address book, order messages, checkout extras
   -------------------------------------------------------------------------- */
.check-field { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); margin: 0.5rem 0 0.2rem; }
.check-field input { width: 17px; height: 17px; accent-color: var(--amber); }
.save-address-field { margin: 1rem 0 0; }

.inline-form { display: inline; }
.danger-link { color: var(--danger); }
.danger-link:hover { text-decoration: underline; }

.address-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.address-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.address-card.is-default {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(201, 138, 61, 0.12);
  background: linear-gradient(180deg, rgba(201, 138, 61, 0.04) 0%, var(--paper) 35%);
}
.address-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.address-card-title { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.address-card-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--forest-900);
  word-break: break-word;
}
.default-tag {
  display: inline-block;
  width: fit-content;
  background: rgba(201, 138, 61, 0.16);
  color: var(--amber-700);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 138, 61, 0.3);
}
.default-tag.is-muted {
  background: var(--cream);
  color: var(--muted);
  border-color: var(--line);
}

.address-card-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.address-card-actions .btn-sm { font-size: 0.78rem; padding: 0.3rem 0.7rem; }

.address-card-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.55rem 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.address-card-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.address-card-row dt {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.address-card-row dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
  word-break: break-word;
  line-height: 1.4;
}
.address-card-row dd strong { color: var(--forest-800); font-weight: 700; }

.address-form-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 1.4rem; margin-top: 1.5rem; }
.address-form-wrap summary { cursor: pointer; padding: 1.1rem 0; font-weight: 600; color: var(--forest-800); }
.address-form-wrap summary:hover { color: var(--amber-600); }
.address-form-wrap[open] { padding-bottom: 1.4rem; }
.address-form-wrap[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.address-form-wrap .auth-form { margin-top: 0.4rem; }
.address-form { padding-bottom: 1.4rem; }
.address-form .btn { align-self: flex-start; }

/* Order message thread */
.order-messages { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.order-messages-title { font-size: 1rem; margin-bottom: 0.75rem; }
.msg-thread { display: flex; flex-direction: column; gap: 0.6rem; max-height: 360px; overflow-y: auto; padding-right: 0.25rem; }
.msg { max-width: 78%; padding: 0.65rem 0.9rem; border-radius: var(--radius); }
.msg-customer { align-self: flex-end; background: var(--amber-100); }
.msg-admin { align-self: flex-start; background: var(--sand); }
.msg-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; }
.msg-sender { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); }
.msg-time { font-size: 0.72rem; color: var(--muted); }
.msg-text { margin: 0; font-size: 0.92rem; color: var(--ink); word-break: break-word; }
.msg-empty { color: var(--muted); font-size: 0.9rem; }
.msg-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.msg-form textarea {
  min-height: 76px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  font-family: inherit;
  resize: vertical;
}
.msg-form textarea:focus { border-color: var(--amber); outline: none; }
.msg-form .btn { align-self: flex-end; }

.msg-badge {
  display: inline-flex;
  align-items: center;
  background: var(--danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

/* Contact-page messages shown in My Account (with admin replies) */
.account-messages { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.account-message {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.account-message-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.account-message-head strong { color: var(--forest-800); font-size: 1.05rem; }
.account-message-time { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.account-message-meta { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.account-message-meta .inline-form { display: inline-flex; }
.account-message-meta .btn-sm { font-size: 0.76rem; padding: 0.25rem 0.6rem; }

/* Thread bubbles (R14) — each entry sits in its own card with a comfortable
   gap so a long conversation stays readable. */
.account-message-thread { display: flex; flex-direction: column; gap: 1rem; }
.account-message-bubble {
  padding: 0.95rem 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--sand);
  border: 1px solid var(--line);
}
.account-message-bubble.is-customer { background: rgba(201, 138, 61, 0.10); border-color: rgba(201, 138, 61, 0.25); }
.account-message-bubble.is-team { background: var(--paper); border-color: var(--line); border-left: 3px solid var(--amber); }
.account-bubble-head {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin-bottom: 0.5rem; color: var(--ink-soft); font-size: 0.85rem;
}
.account-bubble-head strong { color: var(--forest-800); }
.account-message-bubble p { margin: 0; color: var(--ink); line-height: 1.65; white-space: pre-wrap; }

.account-message-reply {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.account-message-reply summary {
  font-weight: 600; color: var(--forest-800); cursor: pointer;
  padding: 0.3rem 0; font-size: 0.92rem;
}
.account-message-reply summary:hover { color: var(--amber-600); }
.account-message-reply .auth-form { margin-top: 0.9rem; }
.account-message-reply textarea {
  font: inherit; width: 100%; resize: vertical;
  min-height: 90px; padding: 0.7rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff;
}
.account-message-reply textarea:focus { border-color: var(--amber); outline: none; }
.account-message-pending { margin: 0; color: var(--muted); font-size: 0.9rem; }

.account-thread-reply {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.account-thread-reply .btn { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Mail-pattern message list — shared between admin (admin.css) and user
   (account-messages.php). R25 promoted the previously `.account-mail-list`
   scoped variants to root-level so both sides render identical cards.
   -------------------------------------------------------------------------- */
.mail-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.mail-row { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.mail-summary { padding: 1.1rem 1.3rem; display: block; color: inherit; text-decoration: none; transition: background 0.15s ease; }
.mail-summary:hover { background: var(--sand); }
.mail-row.is-unread { border-left: 3px solid var(--amber); }
.mail-row.is-expanded { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(201, 138, 61, 0.08); }
.mail-summary-line1 { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.mail-subject { font-weight: 700; color: var(--forest-900); font-size: 1rem; word-break: break-word; }
.mail-row.is-unread .mail-subject { color: var(--forest-900); }
.mail-time { margin-left: auto; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.mail-unread { font-size: 0.7rem; padding: 0.1rem 0.5rem; }
.mail-summary-line2 { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.4rem; color: var(--ink-soft); font-size: 0.88rem; }
.mail-sender { font-weight: 600; color: var(--forest-800); }
.mail-sender-email { color: var(--muted); font-size: 0.82rem; }
.mail-preview { margin: 0.3rem 0 0.5rem; font-size: 0.86rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-summary-line3 { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mail-status { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.28rem 0.75rem; border-radius: 999px; letter-spacing: 0.01em; line-height: 1.3; }
.mail-status.is-replied { background: rgba(70, 121, 90, 0.12); color: #2f5a3c; }
.mail-status.is-pending { background: rgba(201, 138, 61, 0.16); color: var(--amber-700); }
.mail-status.is-member { background: rgba(63, 122, 74, 0.12); color: var(--success); }
.mail-card-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; flex-wrap: wrap; }
.mail-card-actions .btn { padding: 0.34rem 0.85rem; font-size: 0.84rem; }
.mail-card-actions .inline-form { display: inline-flex; margin: 0; }

/* R25: unread chip on a mail-row summary card (mirror of admin.css). */
.unread-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--amber);
  color: #fff;
}

.msg-detail-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.7rem; padding: 0.6rem 0 0.8rem; border-bottom: 1px dashed var(--line); margin-bottom: 0.9rem; }
.msg-detail-actions .inline-form { display: inline-flex; margin: 0; }
.msg-detail-actions .btn { padding: 0.3rem 0.8rem; font-size: 0.82rem; }

.mail-detail { border-top: 1px solid var(--line); padding: 1.1rem 1.2rem 1.25rem; background: var(--cream); display: flex; flex-direction: column; gap: 1rem; }
.mail-detail-head h3 { margin: 0 0 0.35rem; color: var(--forest-900); font-size: 1.1rem; word-break: break-word; }
.mail-detail-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.84rem; color: var(--ink-soft); }
.mail-detail-meta strong { color: var(--forest-800); font-weight: 700; }
.mail-detail-body { display: flex; flex-direction: column; gap: 0.65rem; }

/* R25: chat bubbles in the expanded thread — identical to admin/messages.php
   so the user side renders the same `msg` / `msg-admin` / `msg-customer`
   blocks. */
.msg { max-width: 78%; padding: 0.65rem 0.9rem; border-radius: var(--radius-sm); }
.msg-customer { align-self: flex-end; background: rgba(201, 138, 61, 0.14); }
.msg-admin { align-self: flex-start; background: var(--sand); }
.msg-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; }
.msg-sender { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); }
.msg-time { font-size: 0.72rem; color: var(--muted); }
.msg-text { margin: 0; font-size: 0.92rem; color: var(--ink); word-break: break-word; white-space: pre-wrap; }

.message-reply-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); }
.message-reply-form textarea {
  min-height: 60px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: inherit;
  resize: vertical;
}
.message-reply-form textarea:focus { border-color: var(--amber); outline: none; }
.message-reply-form .btn { align-self: flex-end; }
.message-reply-form .panel-note { font-size: 0.85rem; color: var(--muted); margin: 0; }
.panel-note { font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 0; }
.mail-row .message-reply-form { margin-top: 0.6rem; padding-top: 0.9rem; }

.message-reply-sent {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  background: var(--sand);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.message-reply-sent p { margin: 0.4rem 0 0; white-space: pre-wrap; }

.message-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(63, 122, 74, 0.12);
  color: var(--success);
}
.message-tag.is-guest { background: var(--sand); color: var(--muted); }
.message-tag.is-muted { background: rgba(122, 118, 105, 0.16); color: var(--muted); }

/* R17 — Hotmail-style My Messages inbox + account dashboard */
.account-menu a.is-active {
  color: var(--amber-700);
  font-weight: 700;
}
.account-menu a:hover.is-active { color: var(--amber-700); }

.account-welcome { margin-bottom: 0.6rem; }
.account-welcome .section-title { border: none; padding: 0; }

.account-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  margin: 0.5rem 0 1.4rem;
}
.account-stat {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.account-stat:hover { border-color: var(--amber); box-shadow: 0 4px 14px rgba(0,0,0,0.05); transform: translateY(-1px); }
.account-stat.is-highlighted { border-color: var(--amber); background: rgba(201, 138, 61, 0.06); }
.account-stat-num { font-size: 1.7rem; font-weight: 700; color: var(--forest-800); font-variant-numeric: tabular-nums; line-height: 1.1; }
.account-stat-label { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.account-stat-badge {
  font-size: 0.7rem; font-weight: 700; padding: 0.12rem 0.55rem;
  background: var(--amber); color: #fff; border-radius: 999px;
}

.account-quicklinks { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* Toolbar above the inbox list */
.mail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.mail-search { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.mail-search input[type=search] { padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; min-width: 220px; background: var(--paper); }
.mail-search input[type=search]:focus { border-color: var(--amber); outline: none; }
.mail-list-note { font-size: 0.85rem; margin: 0 0 0.8rem; }

/* R26 — compact rows: the whole card is clickable (View button stays as the
   no-JS fallback), plus the dedicated "+ New message" compose panel. */
.mail-summary[data-href] { cursor: pointer; }
.mail-summary:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.compose-card {
  background: var(--paper);
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.25rem 1.3rem;
  box-shadow: 0 0 0 2px rgba(201, 138, 61, 0.08);
}
.compose-card h2 { margin: 0 0 0.25rem; font-size: 1.2rem; color: var(--forest-900); }
.compose-hint { margin: 0 0 1.1rem; font-size: 0.9rem; color: var(--muted); }
.compose-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.field-optional { font-weight: 400; font-size: 0.85em; color: var(--muted); }

/* R13 — compact Order History table + unified My Messages */
.order-history-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.order-history-table th,
.order-history-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  vertical-align: middle;
}
.order-history-table thead th {
  background: var(--sand);
  color: var(--forest-800);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.order-history-table tbody tr:last-child td { border-bottom: none; }
.order-history-table tbody tr:hover { background: var(--cream); }
.order-history-actions { text-align: right; white-space: nowrap; }

.back-to-history { margin-top: 1rem; }
.back-to-history a { color: var(--amber-600); font-weight: 600; }

.message-compose-form { margin-bottom: 0.6rem; }
.message-compose-form .field { margin-bottom: 0.95rem; }
.message-compose-form textarea {
  font: inherit;
  width: 100%;
  resize: vertical;
  min-height: 110px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--amber);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 0.35rem;
}

.account-message.is-unread { border-left: 3px solid var(--amber); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.order-item-name a { color: var(--forest-800); }
.order-item-name a:hover { color: var(--amber-600); }
.checkout-summary .summary-line a { color: var(--forest-800); }
.checkout-summary .summary-line a:hover { color: var(--amber-600); }

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .category-grid, .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid--featured { grid-template-columns: repeat(2, 1fr); }
  /* Nav labels are single-line now; the tighter metrics buy room for a few
     more buttons between 900px and 1080px, before the hamburger takes over. */
  .nav-list > li > a { padding: 0.55rem 0.55rem; font-size: 0.86rem; }
  .header-search input { width: 150px; }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-search { display: none; }

  .category-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .craft-grid { grid-template-columns: 1fr; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  /* R49 — the sidebar card used to stack a tall vertical menu above the page
     content, pushing the real content below the fold. On phones it collapses
     into a compact strip: identity line only, menu as wrap-around pills. */
  .account-card { padding: 1rem 1rem 0.95rem; }
  .account-card .eyebrow { display: none; }
  .account-card h2 { font-size: 1.05rem; margin-bottom: 0.1rem; }
  .account-email { margin-bottom: 0.75rem; font-size: 0.82rem; }
  .account-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.75rem;
  }
  .account-menu li { margin-bottom: 0; }
  .account-menu a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.36rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--sand);
    font-size: 0.86rem;
    line-height: 1.25;
  }
  .account-menu a.is-active {
    background: var(--amber-600);
    border-color: var(--amber-600);
    color: #fff;
  }
  .account-menu a:hover.is-active { color: #fff; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .category-grid, .product-grid { grid-template-columns: 1fr; }
  .product-grid--featured { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: auto 1fr; }
  .cart-line-right { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .buy-actions { flex-direction: column; }
  .auth-form .btn-block { margin-top: 1.75rem; }
  .variant-selectors { gap: 1.25rem; }
  .variant-group label {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }
  .variant-group select {
    min-height: 56px;
    padding: 0.95rem 3rem 0.95rem 1.15rem;
    font-size: 1.05rem;
    line-height: 1.4;
    border-radius: var(--radius);
    background-size: 14px;
    background-position: right 1.1rem center;
  }
  .gallery-thumbs button { flex-basis: 58px; width: 58px; height: 58px; }
  .lightbox-img { max-width: 100vw; max-height: 84vh; }
  .lightbox-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox-nav.lb-prev { left: 0.5rem; }
  .lightbox-nav.lb-next { right: 0.5rem; }
  .lightbox-close { top: 0.6rem; right: 0.6rem; width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox-bar { bottom: 0.8rem; gap: 0.7rem; }
  .shipping-steps { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .step { flex-direction: row; align-items: center; gap: 0.75rem; text-align: left; }
  .step::before { display: none; }
  .order-card-head { flex-direction: column; }
  .order-card-meta { justify-content: space-between; width: 100%; }

  /* R18 — order history table (account dashboard + My Orders) on mobile.
     Collapse into stacked label/value cards so the table never overflows. */
  .responsive-table thead { display: none; }
  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td { display: block; width: 100%; }
  .responsive-table tr {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 0.85rem;
    padding: 0.4rem 0.8rem;
  }
  .responsive-table tr:last-child { margin-bottom: 0; }
  .responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--line);
    text-align: right;
    font-size: 0.92rem;
  }
  .responsive-table td:last-child { border-bottom: none; padding-bottom: 0.3rem; }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    flex-shrink: 0;
  }
  /* Hide low-priority columns on small screens to keep the card clean. */
  .responsive-hide-sm { display: none !important; }
  .responsive-table .order-history-actions,
  .responsive-table .actions-cell {
    text-align: right;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .responsive-table .order-history-actions::before,
  .responsive-table .actions-cell::before { content: ''; }

  /* R26 — My Messages on mobile: tighter mail cards, wider chat bubbles,
     full-width send button, comfortable touch targets. */
  .mail-toolbar { flex-direction: column; align-items: stretch; }
  .mail-search input[type=search] { min-width: 0; width: 100%; flex: 1 1 auto; }
  .mail-summary { padding: 0.85rem 0.9rem; }
  .mail-summary-line1 { gap: 0.45rem; margin-bottom: 0.25rem; }
  .mail-subject { font-size: 0.95rem; }
  .mail-summary-line2 { margin-bottom: 0.2rem; font-size: 0.84rem; }
  .mail-preview { font-size: 0.82rem; margin: 0.2rem 0 0.35rem; }
  .mail-summary-line3 { margin-top: 0.45rem; padding-top: 0.5rem; gap: 0.5rem; }
  .mail-status { font-size: 0.72rem; padding: 0.22rem 0.6rem; }
  .mail-card-actions { gap: 0.45rem; }
  .mail-card-actions .btn { padding: 0.42rem 0.9rem; font-size: 0.84rem; }
  .mail-detail { padding: 0.9rem 0.9rem 1rem; gap: 0.85rem; }
  .msg { max-width: 88%; }
  .message-reply-form .btn { width: 100%; padding: 0.6rem 1rem; }
  .msg-detail-actions { flex-wrap: wrap; gap: 0.45rem; }
  .compose-card { padding: 0.95rem 0.95rem 1.05rem; }
}

/* --------------------------------------------------------------------------
   R40 — logo image sizing, guest-checkout prompt, public order page
   -------------------------------------------------------------------------- */

/* A wordmark may run up to 390px wide on a desktop header (52px tall); the
   smaller the screen, the less room it gets, so the cap steps down. */
@media (max-width: 1080px) {
  .logo img { max-width: 250px; max-height: 46px; }
}
@media (max-width: 560px) {
  .logo img { max-width: 168px; max-height: 40px; }
}
.footer-brand .logo img { max-width: 300px; max-height: 48px; }

/* Shown to guests while they fill in their shipping details (and again on the
   public order page) — registering is optional, this is the gentle nudge. */
.checkout-account-note {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  margin: 0 0 1.4rem;
  background: var(--amber-100);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
}
.checkout-account-note > svg { flex: 0 0 auto; margin-top: 0.15rem; color: var(--amber-600); }
.checkout-account-note strong { display: block; color: var(--forest-900); font-size: 0.95rem; }
.checkout-account-note p { margin: 0.35rem 0 0; font-size: 0.86rem; line-height: 1.65; color: var(--ink-soft); }
.checkout-account-note p + p { margin-top: 0.45rem; }
.checkout-account-note a { color: var(--amber-600); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.checkout-account-note a:hover { color: var(--forest-900); }

/* Public order page (the target of the "view order" / "continue payment"
   links in the order emails). */
.order-public { max-width: 820px; margin: 0 auto; }
.order-public .order-card { margin-bottom: 1.5rem; }
.order-public-note { margin-top: 1.5rem; }
.order-public-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.25rem; }
.order-public-status {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem 0.9rem;
  margin: 0 0 1.25rem; padding: 0.95rem 1.15rem;
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: var(--radius);
}
.order-public-status .order-total { font-size: 1.15rem; font-weight: 700; color: var(--forest-900); }
.order-public-status p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

/* R44 — linking a guest order to an account.
   My Orders: the panel is a <details> so it stays tucked away until needed.
   Public order page: one-click "Add to my account" under the order card. */
.guest-order-claim { margin-top: 1.5rem; }
.guest-order-claim .form-note { margin-bottom: 1.1rem; }
.guest-order-claim .form-note:last-child { margin-bottom: 0; }
.order-claim-form { margin-top: 0.85rem; }
.order-claim-form .btn { margin: 0; }

@media (max-width: 560px) {
  .checkout-account-note { padding: 0.9rem 1rem; }
  .order-public-actions .btn { width: 100%; }
}

/* R42 — inline notice shown by the Buy Now form (e.g. missing options). */
.buy-notice {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(201, 138, 61, 0.35);
  border-radius: 8px;
  background: rgba(201, 138, 61, 0.08);
  color: var(--ink, #2b2b26);
  font-size: 0.9rem;
}

/* R42 — `display:flex` on form rows used to override the [hidden] attribute,
   so JS-toggled fields stayed visible. Make [hidden] win. */
[hidden] { display: none !important; }

/* ==========================================================================
   THEME OVERRIDES — Nunito Motion
   Default palette / Modern / Athletic UI
   Every value below wins over the baseline by source order only, so this
   file behaves identically in any standards-compliant browser.
   ========================================================================== */

/* --- 1. Design tokens ------------------------------------------------- */
:root {
  --forest-900: #161b16;
  --forest-800: #1f261f;
  --forest-700: #2c352c;
  --forest-600: #3a463a;
  --pine: #4d5c4a;
  --moss: #77846b;
  --sage: #aeb9a2;
  --amber: #c98a3d;
  --amber-600: #a96f2a;
  --amber-100: #f3e3cb;
  --cream: #f6f3ec;
  --paper: #fdfbf6;
  --sand: #ece7dc;
  --ink: #211f1a;
  --ink-soft: #4c493f;
  --muted: #7a7669;
  --line: #e3ddd0;
  --line-dark: rgba(255, 255, 255, 0.12);
  --danger: #b5402f;
  --success: #3f7a4a;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 3px;
  --radius-sm: 3px;
  --shadow-sm: 0 1px 2px rgba(22, 27, 22, 0.06);
  --shadow-md: 0 10px 30px rgba(22, 27, 22, 0.10);
  --shadow-lg: 0 24px 60px rgba(22, 27, 22, 0.18);
}

/* --- 2. Chrome (header bar, drawers, dropdown panels) ----------------- */
.site-header {
  background: rgba(22, 27, 22, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.site-header.is-scrolled {
  background: rgba(22, 27, 22, 0.94);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
}
.mobile-menu { background: rgba(22, 27, 22, 0.985); }
.dropdown, .sub-dropdown {
  background: rgba(253, 251, 246, 0.97);
  border-color: #e3ddd0;
  box-shadow: var(--shadow-md);
}
.dropdown-link:hover, .dropdown-link:focus-visible {
  background: rgba(201, 138, 61, 0.12);
  color: var(--forest-900);
}
.header-search input { background: rgba(255, 255, 255, 0.09); }
.header-search input:focus { background: rgba(255, 255, 255, 0.15); }

/* --- 3. Buttons ------------------------------------------------------- */
.btn { border-radius: 999px; }
.btn-primary {
  background: var(--amber);
  color: #14120E;
  box-shadow: 0 6px 18px rgba(201, 138, 61, 0.30);
}
.btn-primary:hover {
  background: var(--amber-600);
  color: #14120E;
  box-shadow: 0 10px 26px rgba(201, 138, 61, 0.38);
}
.btn-outline { color: var(--forest-800); border-color: var(--forest-600); }
.btn-outline:hover { background: var(--forest-800); color: #FFFFFF; }
.btn-add { background: var(--forest-800); color: #FFFFFF; }
.btn-add:hover { background: var(--amber); color: #14120E; }
.btn-quick-add { background: var(--amber); color: #14120E; }
.btn-quick-add:hover { background: var(--amber-600); color: #14120E; }
.btn-danger:hover { background: var(--danger); color: #FFFFFF; }
.badge { background: var(--amber); color: #14120E; }
.badge-soldout { background: var(--ink-soft); color: #FFFFFF; }
.cart-toggle::after { background: var(--amber); color: #14120E; }
.btn-paypal { box-shadow: 0 6px 18px rgba(255, 196, 57, 0.28); }

/* --- 4. Accent tints used across account & messaging ------------------ */
.account-message-bubble.is-customer {
  background: rgba(201, 138, 61, 0.12);
  border-color: rgba(201, 138, 61, 0.30);
}
.msg-customer { background: rgba(201, 138, 61, 0.14); }
.compose-card { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(201, 138, 61, 0.09); }
.mail-status.is-replied { background: rgba(63, 122, 74, 0.14); color: var(--success); }
.order-status.is-completed, .order-status.is-paid { background: rgba(63, 122, 74, 0.14); }

/* --- 5. Surfaces & type rhythm ---------------------------------------- */
.product-card { background: var(--paper); border-color: var(--line); }
.subcat-chip { background: var(--paper); color: var(--ink-soft); border-color: var(--line); }
.subcat-chip:hover, .subcat-chip.is-active {
  background: var(--forest-800); color: #FFFFFF; border-color: var(--forest-800);
}
::selection { background: rgba(201, 138, 61, 0.28); color: #161b16; }
.skip-link { background: var(--forest-900); color: #FFFFFF; }
/* R46/R47 cookie bar: same pairing as the skip link so a dark theme cannot
   leave light text on its near-white --forest-900. The two pill buttons
   (Agree / Privacy Policy) are repainted with audited foregrounds. */
.cookie-notice { background: var(--forest-900); color: #FFFFFF; border-top-color: #e3ddd0; }
.cookie-btn-agree { background: var(--amber); color: #14120E; }
.cookie-btn-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); }
.cookie-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); }
input, select, textarea {
  background: var(--paper); color: var(--ink); border-color: var(--line);
}
input::placeholder, textarea::placeholder { color: var(--muted); }

/* --- 6. Theme-specific styling ---------------------------------------- */
/* Nunito Motion — buttons & navigation chrome only. Every colour stays on
   the default tokens; the audited "button label on accent" pairing is pinned
   back to the stylesheet default (#fff on amber) on purpose. */

/* --- pin the chrome alphas to the exact stylesheet defaults -------------- */
.site-header { background: rgba(22, 27, 22, 0.68); }
.site-header.is-scrolled {
  background: rgba(22, 27, 22, 0.86);
  box-shadow: 0 8px 30px rgba(10, 14, 10, 0.25);
}
.mobile-menu { background: rgba(22, 27, 22, 0.97); }
.dropdown, .sub-dropdown { background: rgba(255, 253, 248, 0.9); }
.header-search input { background: rgba(255, 255, 255, 0.08); }
.header-search input:focus { background: rgba(255, 255, 255, 0.14); }

/* keep white labels on the amber surfaces (best_on() would flip to black) */
.btn-primary, .btn-primary:hover, .btn-add:hover,
.btn-quick-add, .btn-quick-add:hover, .badge, .cart-toggle::after,
.cookie-btn-agree { color: #FFFFFF; }

/* --- one UI face for buttons + navigation -------------------------------- */
.btn, .nav-list > li > a, .dropdown-link, .mobile-menu nav > ul > li > a,
.mobile-menu .mobile-cat > a, .mobile-sub a, .announcement {
  font-family: 'Nunito Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- buttons: athletic uppercase Nunito ---------------------------------- */
.btn {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.btn-large { font-size: 0.86rem; }

/* --- top navigation: uppercase, letterspaced, animated amber underline --- */
.nav-list > li > a {
  position: relative;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0;
  background: transparent;
}
.nav-list > li > a::after {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.2rem;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease);
}
.nav-list > li > a:hover,
.nav-list > li > a:focus-visible {
  color: #FFFFFF;
  background: transparent;
}
.nav-list > li > a:hover::after,
.nav-list > li > a:focus-visible::after { transform: scaleX(1); }

/* --- dropdown rows: gold left edge slides in on hover -------------------- */
.dropdown-link {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.dropdown-link:hover,
.dropdown-link:focus-visible {
  box-shadow: inset 2px 0 0 var(--amber);
}

/* --- announcement bar: a Deerseeker-style top strip voice ---------------- */
.announcement {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* --- mobile drawer: Nunito uppercase top level, quieter sub links -------- */
.mobile-menu nav > ul > li > a,
.mobile-menu .mobile-cat > a {
  font-size: 1.02rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.mobile-sub a { font-size: 0.92rem; }

/* --- 7. Responsive safeguards ---------------------------------------- */
/* A letterspaced or heavy wordmark can outgrow a 390px header and push
   the action icons off-screen, so the logo is reined in below 560px
   no matter what the theme does further up this file. */
@media (max-width: 560px) {
  .logo { font-size: 1.05rem; letter-spacing: 0.015em; }
  .header-inner { gap: 0.75rem; }
}