/*!
 * Rapidreelz storefront design system — docs/ARCHITECTURE.md §14.
 *
 * Tokens: every colour, font, radius and ratio is a custom property. /theme.css (route `theme`) sets
 * them from the admin's design settings; the defaults below sit in :where(:root) (zero specificity) so
 * theme.css always wins, whichever file loads first. theme.css is linked after this file so the admin's
 * design.custom_css can override components at equal specificity.
 *
 * Breakpoints (mobile-first): 480 / 768 / 1024 / 1280. Motion: 150–250 ms ease-out, reduced-motion aware.
 *
 * Contents
 *   1. Tokens                     10. Navigation: breadcrumbs, pagination, tabs, accordion, dropdown
 *   2. Reset & base               11. Overlays: modal, drawer, toasts
 *   3. Typography                 12. Site chrome: skip link, announcement bar, header, nav
 *   4. Layout primitives          13. Site chrome: mobile menu, search overlay, mobile nav
 *   5. Utilities                  14. Site chrome: footer, newsletter, trust badges, WhatsApp
 *   6. Icons                      15. Pages: home fallback
 *   7. Buttons                    16. Pages: CMS, legal, contact, errors
 *   8. Forms                      17. Styleguide
 *   9. Feedback & commerce bits   18. Motion helpers, reduced motion, print
 */

/* =============================================================================================
   1. Tokens (defaults; /theme.css overrides)
   ============================================================================================= */
:where(:root) {
  /* Brand — design.color_* */
  --color-primary: #24141E;
  --color-primary-hover: #3B2132;
  --color-primary-contrast: #FFFFFF;
  --color-secondary: #F9F3EE;
  --color-secondary-hover: #EFE4DC;
  --color-secondary-contrast: #24141E;
  --color-accent: #D84268;
  --color-accent-hover: #B73254;
  --color-accent-contrast: #FFFFFF;
  --color-accent-text: #A82245;
  --color-accent-soft: #FDE8EE;
  --color-bg: #FCFAF8;
  --color-surface: #FFFFFF;
  --color-surface-2: #F7EFE9;
  --color-text: #1E161C;
  --color-text-muted: #6B5B65;
  --color-border: #E8DDD7;
  --color-border-strong: #9C8C94;
  --color-focus: #D84268;
  --color-dark: #24141E;
  --color-dark-contrast: #FCFAF8;
  --color-dark-muted: #B3A4AD;
  --color-overlay: rgba(36, 20, 30, .56);
  --color-star: #F2A516;

  /* Status — fixed, AA on white and on their soft backgrounds */
  --color-success: #1E7A4C;
  --color-success-soft: #E4F3EA;
  --color-warning: #8C5100;
  --color-warning-soft: #FCEFD8;
  --color-danger: #C2311B;
  --color-danger-soft: #FCE9E5;
  --color-info: #7C3AED;
  --color-info-soft: #F3E8FF;
  --color-digital: #7C3AED;
  --color-digital-soft: #F3E8FF;
  --color-dropship: #B45309;
  --color-dropship-soft: #FEF3C7;
  --color-whatsapp: #128C7E;

  /* Type — design.font_heading / design.font_body (config/fonts.php) */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-weight: 750;
  --heading-stretch: 100%;
  --heading-tracking: -0.015em;
  --display-weight: 800;
  --display-stretch: 100%;
  --display-tracking: -0.025em;

  /* Fluid type scale (≈ major third on phones → perfect fourth on desktop) */
  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.08rem + 0.22vw, 1.3rem);
  --step-2: clamp(1.32rem, 1.22rem + 0.5vw, 1.65rem);
  --step-3: clamp(1.58rem, 1.38rem + 0.95vw, 2.2rem);
  --step-4: clamp(1.9rem, 1.55rem + 1.75vw, 3rem);
  --step-5: clamp(2.25rem, 1.65rem + 3vw, 4.1rem);
  --step-6: clamp(2.55rem, 1.6rem + 4.75vw, 5.75rem);

  /* Shape — design.radius / design.button_shape / design.button_uppercase */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-btn: 999px;
  --radius-group: 999px;
  --radius-pill: 999px;
  --btn-transform: none;
  --btn-tracking: 0;
  --btn-font-size: 0.9375rem;

  /* Product imagery — design.image_ratio */
  --card-ratio: 4 / 5;

  /* Space, layout, depth, motion */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --section-space: clamp(3.5rem, 2.6rem + 4.2vw, 7rem);
  --gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
  --container: 1280px;
  --container-narrow: 760px;
  --container-wide: 1520px;
  --header-h: 64px;
  --header-h-compact: 56px;
  --mobile-nav-h: 0px;
  --shadow-sm: 0 1px 2px rgba(20, 21, 26, .06), 0 1px 1px rgba(20, 21, 26, .04);
  --shadow-md: 0 6px 16px -4px rgba(20, 21, 26, .12), 0 2px 4px rgba(20, 21, 26, .05);
  --shadow-lg: 0 18px 40px -12px rgba(20, 21, 26, .22), 0 4px 10px rgba(20, 21, 26, .06);
  --ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --dur-1: 150ms;
  --dur-2: 200ms;
  --dur-3: 250ms;
  --z-sticky: 30;
  --z-header: 40;
  --z-float: 45;
  --z-dropdown: 50;
  --z-toast: 90;
}

@media (min-width: 1024px) {
  :where(:root) {
    --header-h: 76px;
    --header-h-compact: 62px;
  }
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h-compact) + 1rem);
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
  margin: 0;
}

:where(ul, ol)[role="list"],
:where(ul, ol)[class] {
  list-style: none;
  padding: 0;
}

:where(img, picture, svg, video, canvas, iframe) {
  display: block;
  max-width: 100%;
}

:where(img, video) {
  height: auto;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

:where(button) {
  cursor: pointer;
}

:where(a) {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:where(hr) {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-l) 0;
}

:where(table) {
  border-collapse: collapse;
  width: 100%;
}

:where([hidden]) {
  display: none !important;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

:focus {
  outline: none;
}

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

/* Forced colours (Windows high contrast) remove box-shadows, and with them the --ring that buttons, fields
   and header actions draw instead of an outline: give every keyboard focus a system-coloured outline. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight !important;
  }
}

/* Lock page scroll while a drawer, modal or the search overlay is open (set by app.js). The scrollbar goes
   away, so the backdrop covers the whole window and a right drawer meets the screen edge. app.js measures
   the scrollbar first (--rr-scrollbar-w; 0 with overlay scrollbars) and the page is padded by that width,
   so nothing moves. Full-width sticky and fixed chrome keeps its full width and its content in place. */
html.rr-scroll-lock {
  overflow: hidden;
}

html.rr-scroll-lock body {
  padding-right: var(--rr-scrollbar-w, 0px);
}

html.rr-scroll-lock .announcement-bar,
html.rr-scroll-lock .site-header,
html.rr-scroll-lock .site-footer {
  margin-right: calc(-1 * var(--rr-scrollbar-w, 0px));
  padding-right: var(--rr-scrollbar-w, 0px);
}

html.rr-scroll-lock .mobile-nav {
  padding-right: var(--rr-scrollbar-w, 0px);
}

html.rr-scroll-lock .whatsapp-button,
html.rr-scroll-lock .toast-region {
  margin-right: var(--rr-scrollbar-w, 0px);
}

/* =============================================================================================
   3. Typography
   ============================================================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-stretch: var(--heading-stretch);
  letter-spacing: var(--heading-tracking);
  line-height: 1.12;
  color: inherit;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--step-5);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  line-height: 1.02;
}

h2, .h2 {
  font-size: var(--step-4);
  line-height: 1.06;
}

h3, .h3 {
  font-size: var(--step-3);
}

h4, .h4 {
  font-size: var(--step-2);
  line-height: 1.2;
}

h5, .h5 {
  font-size: var(--step-1);
  line-height: 1.3;
}

h6, .h6 {
  font-size: var(--step-0);
  line-height: 1.35;
  letter-spacing: 0;
}

/* Sentence-case kicker above a heading; carries the accent as text, never as a tracked caps label. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 650;
  line-height: 1.3;
  color: var(--color-accent-text);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.muted {
  color: var(--color-text-muted);
}

.small {
  font-size: var(--step--1);
  line-height: 1.5;
}

p {
  text-wrap: pretty;
}

/* Rich text from the CMS/product editor (sanitized with the §7.8 profiles before it gets here). */
.prose {
  max-width: 68ch;
  font-size: var(--step-0);
  line-height: 1.7;
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose :where(h2, h3, h4) {
  margin-top: 2em;
  margin-bottom: -0.35em;
  scroll-margin-top: calc(var(--header-h-compact) + 1.5rem);
}

.prose h2 {
  font-size: var(--step-3);
}

.prose h3 {
  font-size: var(--step-2);
}

.prose h4 {
  font-size: var(--step-1);
}

.prose a {
  color: var(--color-accent-text);
  font-weight: 550;
  text-decoration: underline;
}

.prose a:hover {
  color: var(--color-text);
}

.prose :where(ul, ol) {
  padding-left: 1.35em;
}

.prose li + li {
  margin-top: 0.45em;
}

.prose li::marker {
  color: var(--color-text-muted);
}

.prose strong {
  font-weight: 650;
}

.prose blockquote {
  margin-inline: 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: var(--step-1);
  line-height: 1.55;
}

.prose blockquote > * + * {
  margin-top: 0.75em;
}

.prose :where(img, figure) {
  border-radius: var(--radius-lg);
}

.prose figcaption {
  margin-top: 0.6rem;
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.prose hr {
  margin-block: 2.5em;
}

/* Separate borders so the outer radius shows; phones scroll wide tables sideways instead of squashing. */
.prose table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-md);
  font-size: var(--step--1);
}

.prose :where(th, td) {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.prose tr:last-child > td {
  border-bottom: 0;
}

.prose th {
  background: var(--color-surface-2);
  font-weight: 650;
}

.prose thead th:first-child {
  border-top-left-radius: calc(var(--radius-md) - 1px);
}

.prose thead th:last-child {
  border-top-right-radius: calc(var(--radius-md) - 1px);
}

@media (max-width: 767.98px) {
  .prose table {
    display: block;
    overflow-x: auto;
  }
}

.prose :where(code) {
  padding: 0.12em 0.36em;
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  font-size: 0.9em;
}

.prose pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-dark);
  color: var(--color-dark-contrast);
  font-size: var(--step--1);
  line-height: 1.6;
}

.prose pre code {
  padding: 0;
  background: none;
}

/* =============================================================================================
   4. Layout primitives
   ============================================================================================= */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

.container--wide {
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
}

.section {
  padding-block: var(--section-space);
}

.section--muted {
  background: var(--color-surface-2);
}

.section--dark {
  background: var(--color-dark);
  color: var(--color-dark-contrast);
}

.section--dark .muted,
.section--dark .lead {
  color: var(--color-dark-muted);
}

.section__header {
  display: grid;
  gap: 0.75rem;
  margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  max-width: 46rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-s));
}

.stack--xs {
  --stack-gap: var(--space-2xs);
}

.stack--lg {
  --stack-gap: var(--space-l);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-xs));
}

.grid {
  display: grid;
  gap: var(--grid-gap, clamp(1rem, 0.6rem + 1.6vw, 1.75rem));
  grid-template-columns: minmax(0, 1fr);
}

.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  --grid-gap: clamp(0.75rem, 0.4rem + 1.6vw, 1.75rem);
}

@media (min-width: 768px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.split {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 4.5rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, var(--split-a, 1fr)) minmax(0, var(--split-b, 1fr));
  }

  .split--center {
    align-items: center;
  }
}

/* =============================================================================================
   5. Utilities
   ============================================================================================= */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.nowrap {
  white-space: nowrap;
}

.full-width {
  width: 100%;
}

.mx-auto {
  margin-inline: auto;
}

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }

@media (max-width: 767.98px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

.tabular,
[data-countdown] {
  font-variant-numeric: tabular-nums;
}

/* Fixed-width digits keep a ticking countdown from nudging the layout around it every second. */
[data-countdown] {
  white-space: nowrap;
}

/* The small flame "recording" dot used as the active/live marker across the UI. */
.rec-dot {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

/* =============================================================================================
   6. Icons (sprite symbols from assets/images/icons.svg via icon())
   ============================================================================================= */
.icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  overflow: visible;
}

.icon--sm {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}

.icon--lg {
  width: 1.5em;
  height: 1.5em;
}

/* =============================================================================================
   7. Buttons
   ============================================================================================= */
.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  --btn-border: transparent;
  --btn-bg-hover: var(--btn-bg);
  --btn-fg-hover: var(--btn-fg);
  --btn-border-hover: var(--btn-border);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.6em 1.4em;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: var(--btn-tracking);
  text-transform: var(--btn-transform);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--btn-border-hover);
}

.btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-btn);
}

.btn .icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: 0;
}

.btn--primary {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-primary-contrast);
  --btn-bg-hover: var(--color-primary-hover);
}

.btn--secondary {
  --btn-bg: var(--color-secondary);
  --btn-fg: var(--color-secondary-contrast);
  --btn-bg-hover: var(--color-secondary-hover);
}

.btn--accent {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-accent-contrast);
  --btn-bg-hover: var(--color-accent-hover);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-border: var(--color-border-strong);
  --btn-border-hover: var(--color-text);
  --btn-bg-hover: var(--color-surface);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-surface-2);
}

.btn--link {
  --btn-bg: transparent;
  --btn-fg: var(--color-accent-text);
  --btn-fg-hover: var(--color-text);
  min-height: 0;
  padding: 0.15em 0;
  border-radius: 2px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.btn--link:active {
  transform: none;
}

.btn--danger {
  --btn-bg: var(--color-danger);
  --btn-fg: #FFFFFF;
  --btn-bg-hover: #A82814;
}

/* Inverted variants for dark surfaces (footer, dark sections). */
.section--dark .btn--outline,
.site-footer .btn--outline {
  --btn-fg: var(--color-dark-contrast);
  --btn-border: rgba(255, 255, 255, .34);
  --btn-border-hover: var(--color-dark-contrast);
  --btn-bg-hover: rgba(255, 255, 255, .06);
}

.btn--sm {
  min-height: 38px;
  padding: 0.45em 1em;
  font-size: 0.875rem;
}

.btn--lg {
  min-height: 56px;
  padding: 0.75em 1.75em;
  font-size: 1.0625rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--icon {
  width: 48px;
  min-width: 48px;
  padding: 0;
  border-radius: var(--radius-pill);
}

.btn--icon.btn--sm {
  width: 38px;
  min-width: 38px;
}

.btn--icon.btn--lg {
  width: 56px;
  min-width: 56px;
}

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading .icon {
  visibility: hidden;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 1.15em;
  height: 1.15em;
  margin: auto;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: rr-spin 0.7s linear infinite;
}

/* =============================================================================================
   8. Forms
   ============================================================================================= */
.field {
  display: grid;
  /* When a row stretches the field (a neighbour has a hint or an error), the label and the control keep
     their natural height and the spare space stays below them. */
  align-content: start;
  gap: 0.4rem;
  min-width: 0;
}

.field + .field {
  margin-top: 1.1rem;
}

.field__label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.field__label .req {
  color: var(--color-accent-text);
  margin-left: 0.15em;
}

.field__hint {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: 550;
  line-height: 1.45;
  color: var(--color-danger);
}

.field__error .icon {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.12em;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.95rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: max(16px, 1rem);
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--color-text);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* Keyboard focus (and every focused text field) gets the system ring used by buttons and links: a page-
   coloured gap and a 2 px focus-colour line, at least 3:1 against the page. The soft halo above stays for
   a mouse-opened select. */
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  box-shadow: var(--ring);
}

.input:disabled,
.select:disabled,
.textarea:disabled,
.input[readonly] {
  background-color: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.input[readonly] {
  cursor: text;
}

.has-error .input,
.has-error .select,
.has-error .textarea,
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.has-error .input:focus,
.has-error .select:focus,
.has-error .textarea:focus,
.input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.has-error .input:focus-visible,
.has-error .select:focus-visible,
.has-error .textarea:focus-visible,
.input[aria-invalid="true"]:focus-visible {
  box-shadow: var(--ring);
}

.textarea {
  min-height: 7.5rem;
  resize: vertical;
}

/* Chevron drawn with two gradients so it follows currentColor (no data-URI colour to keep in sync). */
.select {
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) 52%,
    calc(100% - 0.9rem) 52%;
  background-size: 0.36rem 0.36rem, 0.36rem 0.36rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.checkbox,
.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.65rem;
  line-height: 1.45;
  cursor: pointer;
}

.checkbox input,
.radio input {
  flex: none;
  display: grid;
  place-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.checkbox input {
  border-radius: calc(var(--radius-xs) + 1px);
}

.radio input {
  border-radius: 50%;
}

.checkbox input::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  background: var(--color-primary-contrast);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform var(--dur-1) var(--ease-out);
}

.radio input::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary-contrast);
  transform: scale(0);
  transition: transform var(--dur-1) var(--ease-out);
}

.checkbox input:checked,
.radio input:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.checkbox input:checked::before,
.radio input:checked::before {
  transform: scale(1);
}

.checkbox input:hover,
.radio input:hover {
  border-color: var(--color-text);
}

.checkbox input:focus-visible,
.radio input:focus-visible,
.switch input:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.checkbox input:disabled,
.radio input:disabled,
.switch input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.4;
  cursor: pointer;
}

.switch input {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out);
}

.switch input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.5rem - 6px);
  height: calc(1.5rem - 6px);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(20, 21, 26, .25);
  transition: transform var(--dur-2) var(--ease-out);
}

.switch input:checked {
  background: var(--color-primary);
}

.switch input:checked::before {
  transform: translateX(1.25rem);
}

/* Field + button joined in one pill (newsletter, coupon, search). */
.input-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 52px;
  padding: 4px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-group);
  background: var(--color-surface);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.input-group:hover {
  border-color: var(--color-text);
}

.input-group:focus-within {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* The group shows the system focus ring for its field (the field itself draws none inside the pill). */
.input-group:has(> .input:focus-visible) {
  box-shadow: var(--ring);
}

.input-group > .input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.input-group > .input:focus {
  box-shadow: none;
}

.input-group > .btn {
  flex: none;
  min-height: 42px;
  border-radius: calc(var(--radius-group) - 4px);
}

.has-error .input-group,
.input-group.has-error {
  border-color: var(--color-danger);
}

/* Quantity stepper — behaviour in app.js ([data-qty]). */
.qty {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  width: max-content;
  height: 48px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-group);
  background: var(--color-surface);
  overflow: hidden;
}

.qty__btn {
  display: grid;
  place-items: center;
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  transition: background-color var(--dur-1) var(--ease-out);
}

.qty__btn:hover {
  background: var(--color-surface-2);
}

.qty__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.qty__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}

.qty__input {
  width: 3.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: max(16px, 1rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

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

.qty__input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.qty--sm {
  height: 38px;
}

.qty--sm .qty__btn {
  width: 36px;
}

.qty--sm .qty__input {
  width: 2.5rem;
}
/* Buy-button stepper (cart.js): Add to cart / Buy now turn into "- n +" in the same slot once the item is in
   the cart; Buy now also gets a Checkout button. Same height as the button it replaces. */
.buy-stepper {
  display: grid;
  flex: 1 1 11rem;
  gap: 0.4rem;
  min-width: 0;
  animation: buy-stepper-in var(--dur-2, 220ms) var(--ease-out, ease-out);
}

.buy-stepper[hidden] {
  display: none;
}

/* Both slots of a buy box line up on the stepper row; the note sits under the stepper only. */
.buy-stepper {
  align-self: start;
}

.buy-stepper--go .buy-stepper__checkout {
  flex: 1 1 auto;
  width: 100%;
}

.buy-stepper__row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.buy-stepper__qty {
  flex: 1 1 auto;
  align-self: stretch;
  width: auto;
  justify-content: space-between;
}

.buy-stepper--checkout .buy-stepper__qty {
  flex: 0 0 auto;
}

.buy-stepper--lg .buy-stepper__qty {
  height: 56px;
}

.buy-stepper--lg .qty__btn {
  width: 48px;
}

.buy-stepper__count {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  flex: 1 1 auto;
  font-size: max(16px, 1rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.buy-stepper__checkout {
  flex: 1 1 auto;
  min-height: 48px;
  white-space: nowrap;
}

.buy-stepper--lg .buy-stepper__checkout {
  min-height: 56px;
}

.buy-stepper__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.btn.is-in-cart {
  display: none;
}

.sticky-buy .buy-stepper {
  flex: 0 1 auto;
}

@keyframes buy-stepper-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buy-stepper {
    animation: none;
  }
}


/* Fields side by side share a top edge: a hint or an error under one never pushes its neighbour down. */
.form-row {
  display: grid;
  align-items: start;
  gap: 1.1rem;
}

/* The row gap already spaces its fields, stacked or side by side. */
.form-row > .field + .field {
  margin-top: 0;
}

@media (min-width: 768px) {
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =============================================================================================
   9. Feedback & commerce bits: alerts, badges, pills, stock, spinner, skeleton, empty state,
      price, rating
   ============================================================================================= */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.alert > .icon {
  margin-top: 0.08em;
}

.alert__body > * + * {
  margin-top: 0.25rem;
}

.alert__title {
  font-weight: 650;
}

.alert--success {
  background: var(--color-success-soft);
  border-color: rgba(30, 122, 76, .18);
}

.alert--success > .icon {
  color: var(--color-success);
}

.alert--error {
  background: var(--color-danger-soft);
  border-color: rgba(194, 49, 27, .18);
}

.alert--error > .icon {
  color: var(--color-danger);
}

.alert--warning {
  background: var(--color-warning-soft);
  border-color: rgba(140, 81, 0, .18);
}

.alert--warning > .icon {
  color: var(--color-warning);
}

.alert--info {
  background: var(--color-info-soft);
  border-color: rgba(36, 83, 196, .16);
}

.alert--info > .icon {
  color: var(--color-info);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.34em 0.62em;
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge .icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: 0;
}

.badge--sale {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.badge--new {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.badge--digital {
  background: var(--color-digital-soft);
  color: var(--color-digital);
}

.badge--physical {
  background: var(--color-secondary);
  color: var(--color-secondary-contrast);
}

.badge--dropship {
  background: var(--color-dropship-soft);
  color: var(--color-dropship);
}

.badge--soldout {
  background: #E7E5E1;
  color: #46474D;
}

.badge--neutral {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.badge--accent {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

/* Filter chips / tags. aria-pressed or .is-active marks the selected state. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.4rem 0.95rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

a.pill:hover,
button.pill:hover {
  border-color: var(--color-text);
}

.pill.is-active,
.pill[aria-pressed="true"],
.pill[aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.pill:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.stock {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
}

.stock::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.stock--in {
  color: var(--color-success);
}

.stock--low {
  color: var(--color-warning);
}

.stock--out {
  color: var(--color-text-muted);
}

.stock--out::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.spinner {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.22em;
  animation: rr-spin 0.7s linear infinite;
}

.spinner--lg {
  width: 2.25rem;
  height: 2.25rem;
  border-width: 3px;
}

.skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: rr-shimmer 1.4s ease-in-out infinite;
}

.skeleton--text {
  height: 0.9em;
  margin-block: 0.35em;
}

.skeleton--title {
  width: 72%;
  height: 1.35em;
}

.skeleton--media {
  aspect-ratio: var(--card-ratio);
  border-radius: var(--radius-lg);
}

.skeleton--circle {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.25rem;
  text-align: center;
}

.empty-state__icon {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 0.35rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text);
}

.empty-state__icon .icon {
  width: 1.85rem;
  height: 1.85rem;
}

.empty-state__title {
  font-size: var(--step-2);
}

.empty-state__text {
  color: var(--color-text-muted);
  max-width: 42ch;
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

/* Price — partials/price.php */
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.price__current {
  color: var(--color-text);
  font-size: var(--price-size, 1.0625rem);
  font-weight: 700;
}

.price__from {
  margin-right: 0.2em;
  color: var(--color-text-muted);
  font-size: 0.82em;
  font-weight: 500;
}

.price__compare {
  color: var(--color-text-muted);
  font-size: calc(var(--price-size, 1.0625rem) * 0.84);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.price__discount {
  color: var(--color-accent-text);
  font-size: calc(var(--price-size, 1.0625rem) * 0.84);
  font-weight: 650;
}

.price--sm {
  --price-size: 0.9375rem;
}

.price--md {
  --price-size: 1.0625rem;
}

.price--lg {
  --price-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.price--lg .price__current {
  font-family: var(--font-heading);
  font-stretch: var(--heading-stretch);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
}

/* Rating — partials/rating.php. Five masked stars filled to --rating (0–100 %). */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-muted);
  font-size: var(--step--1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rating__stars {
  --star: 1rem;
  flex: none;
  width: calc(var(--star) * 5);
  height: var(--star);
  background: linear-gradient(90deg, var(--color-star) var(--rating, 0%), var(--color-border) var(--rating, 0%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.78 4.65 1.13 6.57L12 17.47l-5.9 3.1 1.13-6.57-4.78-4.65 6.6-.96z'/%3E%3C/svg%3E") left center / var(--star) var(--star) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.78 4.65 1.13 6.57L12 17.47l-5.9 3.1 1.13-6.57-4.78-4.65 6.6-.96z'/%3E%3C/svg%3E") left center / var(--star) var(--star) repeat-x;
}

.rating__value {
  color: var(--color-text);
  font-weight: 650;
}

.rating--sm .rating__stars {
  --star: 0.875rem;
}

.rating--lg {
  font-size: var(--step-0);
}

.rating--lg .rating__stars {
  --star: 1.3rem;
}

/* =============================================================================================
   Product card — partials/product-card.php
   The title link stretches over the whole card; wishlist and quick actions sit above it.
   ============================================================================================= */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
  color: var(--color-text);
}

.product-card__media {
  position: relative;
  aspect-ratio: var(--card-ratio);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  isolation: isolate;
  /* Above the stretched title link (::after z-index 1), but click-through except for the buttons. */
  z-index: 2;
  pointer-events: none;
}

.product-card__media :where(button, a) {
  pointer-events: auto;
}

.product-card__image {
  position: absolute;
  inset: 0;
  display: block;
  transition: opacity var(--dur-3) var(--ease-out);
}

.product-card__image :where(picture, img) {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card__image img {
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

.product-card__image--hover {
  opacity: 0;
}

.product-card__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.product-card__placeholder img {
  width: 46%;
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card__image--hover {
    opacity: 1;
  }

  .product-card:hover .has-hover-image .product-card__image--main {
    opacity: 0;
  }

  .product-card:hover .product-card__media:not(.has-hover-image) .product-card__image img {
    transform: scale(1.035);
  }
}

.product-card.is-soldout .product-card__image img {
  opacity: 0.72;
  filter: grayscale(0.35);
}

.product-card__badges {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: calc(100% - 3.75rem);
  pointer-events: none;
}

.product-card__wishlist {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #14151A;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.product-card__wishlist:hover {
  transform: scale(1.06);
}

.product-card__wishlist:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.product-card__wishlist .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.product-card__wishlist[aria-pressed="true"] {
  color: var(--color-accent);
}

/* The sprite's heart is an outline; the saved state swaps in the filled symbol. */
.product-card__wishlist .icon-on,
.product-card__wishlist[aria-pressed="true"] .icon-off {
  display: none;
}

.product-card__wishlist[aria-pressed="true"] .icon-on {
  display: inline-block;
}

.product-card__wishlist.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.product-card__actions {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  z-index: 3;
}

/* Touch-first: a round light chip (readable on any product photo, like the heart); desktop with hover:
   a full-width labelled bar revealed on hover/focus. */
.product-card__quick {
  --btn-bg: rgba(255, 255, 255, .94);
  --btn-fg: #14151A;
  --btn-bg-hover: #FFFFFF;
  --btn-fg-hover: #14151A;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  box-shadow: var(--shadow-md);
}

.product-card__quick-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .product-card__actions {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  }

  .product-card:hover .product-card__actions,
  .product-card:focus-within .product-card__actions {
    opacity: 1;
    transform: none;
  }

  .product-card__quick {
    width: 100%;
    min-height: 44px;
    padding: 0.55em 1em;
  }

  .product-card__quick.btn--primary {
    --btn-bg: var(--color-primary);
    --btn-fg: var(--color-primary-contrast);
    --btn-bg-hover: var(--color-primary-hover);
    --btn-fg-hover: var(--color-primary-contrast);
    /* A faint light edge keeps the bar's shape visible over dark product photos. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .24), var(--shadow-md);
  }

  .product-card__quick.btn--secondary {
    --btn-bg: var(--color-secondary);
    --btn-fg: var(--color-secondary-contrast);
    --btn-bg-hover: var(--color-secondary-hover);
    --btn-fg-hover: var(--color-secondary-contrast);
  }

  .product-card__quick-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
  }
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.product-card__meta {
  color: var(--color-text-muted);
  font-size: var(--step--1);
  line-height: 1.3;
}

.product-card__title {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  line-height: 1.35;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.product-card__title a {
  color: inherit;
  text-decoration: none;
}

.product-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-lg);
}

.product-card__title a:focus-visible {
  outline: none;
}

.product-card__title a:focus-visible::after {
  box-shadow: var(--ring);
}

@media (hover: hover) {
  .product-card__title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
}

.product-card__rating {
  margin-top: 0.1rem;
}

/* Marketplace: "Sold by {seller}". Sits above the card's whole-card title link so it stays clickable. */
.product-card__seller {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step--1);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.product-card__seller a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.product-card__seller a:hover {
  color: var(--color-text);
}

.product-card__price {
  margin-top: 0.15rem;
}

.product-card__stock {
  margin-top: 0.1rem;
}

.product-card--minimal .product-card__meta,
.product-card--minimal .product-card__stock {
  display: none;
}

.product-card--minimal .product-card__media {
  border-radius: var(--radius-md);
}

.product-card--bordered {
  padding: 0.55rem 0.55rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.product-card--bordered .product-card__media {
  border-radius: var(--radius-md);
}

.product-card--bordered .product-card__body {
  padding-inline: 0.35rem;
}

/* =============================================================================================
   10. Navigation components: breadcrumbs, pagination, tabs, accordion, dropdown
   ============================================================================================= */
.breadcrumbs {
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.breadcrumbs li + li::before {
  content: "/";
  content: "/" / "";
  color: var(--color-border-strong);
}

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

.breadcrumbs a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: 550;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-xl);
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 44px;
  height: 44px;
  padding: 0 0.8rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

a.pagination__link:hover {
  border-color: var(--color-text);
}

.pagination__link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.pagination__link[aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.pagination__link.is-disabled {
  opacity: 0.4;
}

.pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 44px;
  color: var(--color-text-muted);
}

.pagination__status {
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

@media (max-width: 479.98px) {
  .pagination__item--page:not(.is-current),
  .pagination__item--gap {
    display: none;
  }
}

.tabs__list {
  display: flex;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar {
  display: none;
}

.tabs__tab {
  position: relative;
  flex: none;
  padding: 0.85rem 0 0.9rem;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-weight: 650;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}

/* The "playhead": the active tab's flame bar scrubs in from the left. */
.tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}

.tabs__tab:hover {
  color: var(--color-text);
}

.tabs__tab[aria-selected="true"] {
  color: var(--color-text);
}

.tabs__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.tabs__tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.tabs__panel {
  padding-top: 1.35rem;
}

.tabs__panel:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.accordion {
  border-top: 1px solid var(--color-border);
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 650;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.accordion__trigger::-webkit-details-marker {
  display: none;
}

.accordion__trigger::marker {
  content: "";
}

.accordion__trigger:hover {
  color: var(--color-accent-text);
}

.accordion__trigger:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.accordion__trigger .icon {
  transition: transform var(--dur-2) var(--ease-out);
}

.accordion__item[open] > .accordion__trigger .icon {
  transform: rotate(180deg);
}

.accordion__panel {
  padding: 0 0 1.25rem;
  color: var(--color-text-muted);
}

.accordion__panel > * + * {
  margin-top: 0.75rem;
}

.dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 240px;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), visibility 0s linear var(--dur-2);
}

.dropdown.is-open,
.has-dropdown.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.dropdown__list {
  display: grid;
  gap: 2px;
}

.dropdown__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown__link:hover,
.dropdown__link:focus-visible {
  background: var(--color-surface-2);
}

.dropdown__link.is-highlight {
  color: var(--color-accent-text);
}

/* Mega menu: columns of grouped links spanning the header container. */
/* Sized by its column count (--mega-cols, set by the header) so two groups don't float in a wide panel. */
.dropdown--mega {
  left: 50%;
  width: min(calc(var(--mega-cols, 4) * 13.5rem + 3rem), calc(100vw - 2 * var(--gutter)));
  padding: 1.5rem;
  transform: translate(-50%, 6px);
}

.has-dropdown.is-open > .dropdown--mega {
  transform: translate(-50%, 0);
}

.dropdown--mega .dropdown__columns {
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr));
  gap: 1.25rem 2rem;
}

.dropdown__heading {
  display: block;
  margin-bottom: 0.35rem;
  padding: 0.25rem 0.75rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

a.dropdown__heading:hover {
  color: var(--color-accent-text);
}

/* =============================================================================================
   11. Overlays: modal, drawer, toasts (native <dialog>; app.js adds .is-closing for exit motion)
   ============================================================================================= */
.modal,
.drawer,
.search-overlay {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none;
  background: var(--color-surface);
  color: var(--color-text);
}

.modal::backdrop,
.drawer::backdrop,
.search-overlay::backdrop {
  background: var(--color-overlay);
}

.modal[open]::backdrop,
.drawer[open]::backdrop,
.search-overlay[open]::backdrop {
  animation: rr-fade-in var(--dur-2) var(--ease-out);
}

.modal.is-closing::backdrop,
.drawer.is-closing::backdrop,
.search-overlay.is-closing::backdrop {
  animation: rr-fade-out var(--dur-2) var(--ease-out) forwards;
}

.modal {
  width: min(560px, calc(100% - 2rem));
  max-height: min(88vh, 900px);
  max-height: min(88dvh, 900px);
  margin: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal[open] {
  display: flex;
  flex-direction: column;
  animation: rr-pop-in var(--dur-3) var(--ease-out);
}

.modal.is-closing {
  animation: rr-pop-out var(--dur-2) var(--ease-out) forwards;
}

.modal--sm {
  width: min(420px, calc(100% - 2rem));
}

.modal--lg {
  width: min(840px, calc(100% - 2rem));
}

.modal--xl {
  width: min(1120px, calc(100% - 2rem));
}

.modal__header,
.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 0.75rem 0.75rem 0.75rem 1.35rem;
  border-bottom: 1px solid var(--color-border);
}

.modal__title,
.drawer__title {
  font-size: var(--step-1);
  line-height: 1.25;
}

.modal__body,
.drawer__body {
  flex: 1;
  min-height: 0;
  padding: 1.35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__footer,
.drawer__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.35rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
}

/* Phones: modals become bottom sheets. */
@media (max-width: 767.98px) {
  .modal,
  .modal--sm,
  .modal--lg,
  .modal--xl {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .modal[open] {
    animation-name: rr-sheet-in;
  }

  .modal.is-closing {
    animation-name: rr-sheet-out;
  }
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, calc(100% - 2.5rem));
  height: 100%;
  height: 100dvh;
  box-shadow: var(--shadow-lg);
}

.drawer[open] {
  display: flex;
  flex-direction: column;
  animation: rr-drawer-right-in var(--dur-3) var(--ease-out);
}

.drawer.is-closing {
  animation: rr-drawer-right-out var(--dur-2) var(--ease-out) forwards;
}

.drawer--left {
  inset: 0 auto 0 0;
}

.drawer--left[open] {
  animation-name: rr-drawer-left-in;
}

.drawer--left.is-closing {
  animation-name: rr-drawer-left-out;
}

.drawer--bottom {
  inset: auto 0 0 0;
  width: 100%;
  height: auto;
  max-height: 88vh;
  max-height: 88dvh;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.drawer--bottom[open] {
  animation-name: rr-sheet-in;
}

.drawer--bottom.is-closing {
  animation-name: rr-sheet-out;
}

.toast-region {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(0.75rem + var(--mobile-nav-h) + var(--toast-offset, 0px) + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

/* Keep toasts clear of the floating WhatsApp button. */
body.has-whatsapp {
  --toast-offset: 64px;
}

@media (min-width: 768px) {
  .toast-region {
    left: auto;
    right: 1.5rem;
    bottom: calc(1.5rem + var(--mobile-nav-h) + var(--toast-offset, 0px));
    width: 400px;
    align-items: stretch;
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 440px;
  padding: 0.85rem 0.6rem 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-dark);
  color: var(--color-dark-contrast);
  box-shadow: var(--shadow-lg);
  font-size: 0.9375rem;
  line-height: 1.45;
  pointer-events: auto;
  animation: rr-toast-in var(--dur-3) var(--ease-out);
}

.toast.is-leaving {
  animation: rr-toast-out var(--dur-2) var(--ease-out) forwards;
}

.toast__icon {
  flex: none;
  margin-top: 0.1em;
  color: #3DD68C;
}

.toast--error .toast__icon {
  color: #FF7A5F;
}

.toast--warning .toast__icon {
  color: #F5B43C;
}

.toast--info .toast__icon {
  color: #8DB0FF;
}

.toast__message {
  flex: 1;
  min-width: 0;
  padding-top: 0.05em;
}

.toast__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -0.3rem 0 -0.3rem 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-dark-muted);
}

.toast__close:hover {
  color: var(--color-dark-contrast);
  background: rgba(255, 255, 255, .08);
}

/* =============================================================================================
   12. Site chrome: skip link, announcement bar, header, desktop nav
   ============================================================================================= */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: none;
  box-shadow: var(--ring);
}

/* Announcement bar: rotating messages with story-style progress segments. */
.announcement-bar {
  --ab-bg: var(--color-dark);
  --ab-fg: var(--color-dark-contrast);
  position: relative;
  background: var(--ab-bg);
  color: var(--ab-fg);
  font-size: var(--step--1);
  line-height: 1.35;
}

.announcement-bar__inner {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  min-height: 42px;
  padding-block: 0.55rem 0.5rem;
}

.announcement-bar__segments {
  position: absolute;
  top: 5px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  gap: 4px;
}

.announcement-bar__segment {
  position: relative;
  flex: 1;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Bigger hit area without changing the drawn bar. */
.announcement-bar__segment::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}

/* The track. */
.announcement-bar__segment::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.3;
}

.announcement-bar__segment:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.announcement-bar__segment-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}

.announcement-bar__segment.is-done .announcement-bar__segment-fill {
  transform: scaleX(1);
}

.announcement-bar__segment.is-active .announcement-bar__segment-fill {
  animation: rr-segment var(--ab-duration, 5s) linear forwards;
}

.announcement-bar.is-paused .announcement-bar__segment.is-active .announcement-bar__segment-fill {
  animation-play-state: paused;
}

.announcement-bar__items {
  grid-column: 2;
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.announcement-bar__item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
  padding-top: 0.3rem;
}

.announcement-bar__item:not(.is-active) {
  visibility: hidden;
}

.announcement-bar.is-ready .announcement-bar__item {
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}

.announcement-bar.is-ready .announcement-bar__item:not(.is-active) {
  opacity: 0;
  transform: translateY(-0.4rem);
}

.announcement-bar.is-ready .announcement-bar__item.is-active {
  transition-delay: 0s;
}

.announcement-bar__item a,
.announcement-bar__item span {
  color: inherit;
  font-weight: 550;
  text-decoration: none;
}

.announcement-bar__item a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.announcement-bar__item a:hover {
  text-decoration-thickness: 2px;
}

.announcement-bar__toggle {
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 0.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.75;
}

.announcement-bar__toggle:hover {
  opacity: 1;
}

.announcement-bar__toggle .icon {
  width: 0.95rem;
  height: 0.95rem;
}

.announcement-bar__toggle .icon-play,
.announcement-bar.is-paused .announcement-bar__toggle .icon-pause {
  display: none;
}

.announcement-bar.is-paused .announcement-bar__toggle .icon-play {
  display: inline-block;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 6px 20px -16px rgba(20, 21, 26, .45);
}

.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-height: var(--header-h);
  transition: min-height var(--dur-3) var(--ease-out);
}

.site-header.is-scrolled .site-header__inner {
  min-height: var(--header-h-compact);
}

.site-header__start {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.site-header__logo svg,
.site-header__logo img {
  width: auto;
  height: 30px;
  transition: height var(--dur-3) var(--ease-out);
}

.site-header.is-scrolled .site-header__logo svg,
.site-header.is-scrolled .site-header__logo img {
  height: 27px;
}

.site-header__logo .logo-dark {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
}

.header-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 44px;
  height: 44px;
  padding: 0 0.6rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out);
}

.header-action:hover {
  background: var(--color-surface-2);
}

.header-action:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.header-action .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.header-action__label {
  display: none;
}

.count-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  display: grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 0.6875rem;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--color-bg);
}

.count-badge.is-bumped {
  animation: rr-bump 0.4s var(--ease-out);
}

/* Desktop navigation, from 1280 px. Below that the menu button opens the drawer: the logo, the default
   menu and all four header actions need about 1130 px on one row, more than tablets and small laptops
   (1024–1279 px) have. */
.site-nav {
  display: none;
}

/* A menu longer than its column wraps onto a second row instead of running under the header actions. */
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.site-nav__item--mega {
  position: static;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* The playhead underline scrubs in on hover, focus and for the current page. */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after,
.site-nav__item.is-open > .site-nav__link::after {
  transform: scaleX(1);
}

.site-nav__link.is-highlight {
  color: var(--color-accent-text);
}

button.site-nav__link {
  gap: 0.25rem;
  border: 0;
  background: none;
  cursor: pointer;
}

.logo--text {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  line-height: 1;
  white-space: nowrap;
}

/* Phones and tablets: the bottom bar already offers search, wishlist and account. */
@media (max-width: 1023.98px) {
  .has-mobile-nav .header-action--search,
  .has-mobile-nav .header-action--account,
  .has-mobile-nav .header-action--wishlist {
    display: none;
  }
}

.site-nav__toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}

.site-nav__toggle .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-2) var(--ease-out);
}

.site-nav__item.is-open > .site-nav__toggle .icon {
  transform: rotate(180deg);
}

@media (min-width: 1024px) {
  .site-header__logo svg,
  .site-header__logo img {
    height: 34px;
  }

  .site-header.is-scrolled .site-header__logo svg,
  .site-header.is-scrolled .site-header__logo img {
    height: 30px;
  }

  .header-action--account .header-action__label {
    display: inline;
  }
}

@media (min-width: 1280px) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.5rem;
  }

  .site-header__start {
    display: contents;
  }

  .site-header__menu-btn {
    display: none;
  }

  .site-header__logo {
    justify-self: start;
    grid-column: 1;
  }

  .site-nav {
    display: block;
    grid-column: 2;
    grid-row: 1;
  }

  .site-header__actions {
    grid-column: 3;
  }

  /* Hover opens menus for mouse users; the chevron button and Esc handle keyboard and touch. */
  .site-nav__item.has-dropdown:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .site-nav__item.has-dropdown:hover > .dropdown--mega {
    transform: translate(-50%, 0);
  }

  /* Centered: logo in the middle of the top row, the menu centred on a row below. */
  .site-header--centered .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: var(--header-h) auto;
    row-gap: 0;
  }

  .site-header--centered .site-header__logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .site-header--centered .site-header__actions {
    grid-column: 3;
    grid-row: 1;
  }

  .site-header--centered .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    padding-bottom: 0.35rem;
  }

  .site-header--centered .site-nav__list {
    justify-content: center;
  }

  .site-header--centered.is-scrolled .site-header__inner {
    grid-template-rows: var(--header-h-compact) auto;
  }
}

/* Transparent header over a full-bleed hero; turns solid once the page scrolls. */
.site-header--overlay:not(.is-scrolled) {
  margin-bottom: calc(-1 * var(--header-h));
  background: transparent;
  color: #FFFFFF;
}

.site-header--overlay:not(.is-scrolled) .header-action:hover {
  background: rgba(255, 255, 255, .14);
}

.site-header--overlay:not(.is-scrolled) .count-badge {
  box-shadow: none;
}

.site-header--overlay:not(.is-scrolled) .site-header__logo .logo-light {
  display: none;
}

.site-header--overlay:not(.is-scrolled) .site-header__logo .logo-dark {
  display: inline-flex;
}

/* =============================================================================================
   13. Site chrome: mobile menu drawer, search overlay, mobile bottom nav
   ============================================================================================= */
.menu-drawer .drawer__header {
  padding-left: 1.1rem;
}

.menu-drawer__body {
  padding: 0;
}

.menu-drawer__logo svg,
.menu-drawer__logo img {
  width: auto;
  height: 28px;
}

.menu-drawer__nav {
  padding: 0.5rem 0 1rem;
}

.menu-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-drawer__list .menu-drawer__list {
  padding: 0 0 0.6rem 0.9rem;
}

.menu-drawer__link,
.menu-drawer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.6rem 1.35rem;
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-stretch: var(--heading-stretch);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}

.menu-drawer__summary::-webkit-details-marker {
  display: none;
}

.menu-drawer__list .menu-drawer__list .menu-drawer__link {
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-stretch: 100%;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.menu-drawer__link:hover,
.menu-drawer__summary:hover {
  color: var(--color-accent-text);
}

.menu-drawer__link.is-highlight {
  color: var(--color-accent-text);
}

.menu-drawer__link[aria-current="page"]::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.menu-drawer__summary .icon {
  transition: transform var(--dur-2) var(--ease-out);
}

details[open] > .menu-drawer__summary .icon {
  transform: rotate(180deg);
}

.menu-drawer__secondary {
  display: grid;
  gap: 0.25rem;
  margin: 0 1.35rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
}

.menu-drawer__secondary a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: inherit;
  font-weight: 550;
  text-decoration: none;
}

.menu-drawer__secondary a:hover {
  color: var(--color-accent-text);
}

.menu-drawer .social-links {
  margin: 0.5rem 1.35rem 1.5rem;
}

.search-overlay {
  inset: 0 0 auto 0;
  width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.search-overlay[open] {
  display: block;
  animation: rr-search-in var(--dur-3) var(--ease-out);
}

.search-overlay.is-closing {
  animation: rr-search-out var(--dur-2) var(--ease-out) forwards;
}

.search-overlay__inner {
  padding-block: 1rem 1.75rem;
}

.search-overlay__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-text);
}

.search-overlay__form > .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-text-muted);
}

.search-overlay__input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0.4rem 0.25rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-stretch: var(--heading-stretch);
  font-weight: 650;
  letter-spacing: var(--heading-tracking);
  appearance: none;
}

.search-overlay__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.search-overlay__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-overlay__input:focus {
  outline: none;
}

.search-overlay__form:focus-within {
  border-bottom-color: var(--color-accent);
}

.search-overlay__results {
  max-height: min(62vh, 560px);
  max-height: min(62dvh, 560px);
  margin-top: 0.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-overlay__results:empty {
  display: none;
}

.search-overlay__hint {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.search-overlay__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Suggestion rows rendered by search.js into [data-search-results]. */
.search-suggestion {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

.search-suggestion:hover,
.search-suggestion[aria-selected="true"],
.search-suggestion:focus-visible {
  background: var(--color-surface-2);
  outline: none;
}

.search-suggestion__media {
  flex: none;
  width: 3.25rem;
  aspect-ratio: var(--card-ratio);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}

.search-suggestion__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-suggestion__name {
  font-weight: 600;
  line-height: 1.35;
}

/* Mobile bottom navigation (cart stays in the header). */
.mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: repeat(var(--mobile-nav-items, 5), minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 -8px 24px -18px rgba(20, 21, 26, .35);
}

.mobile-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 58px;
  padding: 0.45rem 0.25rem 0.4rem;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
}

.mobile-nav__item .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.mobile-nav__item:hover,
.mobile-nav__item[aria-current="page"],
.mobile-nav__item[aria-expanded="true"] {
  color: var(--color-text);
}

.mobile-nav__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 5px;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.mobile-nav__item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -4px;
  border-radius: var(--radius-md);
}

.mobile-nav__count {
  position: absolute;
  top: 0.35rem;
  left: calc(50% + 0.35rem);
}

@media (max-width: 1023.98px) {
  body.has-mobile-nav {
    --mobile-nav-h: 58px;
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}

/* =============================================================================================
   14. Site chrome: footer, newsletter, social, payment marks, trust badges, WhatsApp button
   ============================================================================================= */
.site-footer {
  padding-block: clamp(3rem, 2.4rem + 3vw, 5rem) 1.5rem;
  background: var(--color-dark);
  color: var(--color-dark-contrast);
  font-size: 0.9375rem;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.site-footer :focus-visible {
  outline-color: var(--color-accent);
}

/* Room for the floating WhatsApp button so it never covers the last footer row. */
body.has-whatsapp .site-footer {
  padding-bottom: calc(1.5rem + 72px);
}

.site-footer__top {
  display: grid;
  gap: 2.75rem;
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1.25fr);
    gap: 3.5rem;
  }
}

.site-footer__brand {
  display: grid;
  align-content: start;
  gap: 1.1rem;
}

.site-footer__logo svg,
.site-footer__logo img {
  width: auto;
  height: 34px;
}

.site-footer__tagline {
  max-width: 34ch;
  color: var(--color-dark-muted);
}

.site-footer__menus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}

@media (min-width: 640px) {
  .site-footer__menus {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.site-footer__heading {
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-stretch: 100%;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--color-dark-contrast);
}

.site-footer__links {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--color-dark-muted);
}

.site-footer__links a:hover {
  color: var(--color-dark-contrast);
}

.site-footer__links a.is-highlight {
  color: var(--color-accent);
}

.site-footer__newsletter {
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

.site-footer__newsletter .muted {
  color: var(--color-dark-muted);
}

.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: var(--color-dark-muted);
}

.site-footer__contact-item {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 36px;
  max-width: 44ch;
}

.site-footer__contact-item .icon {
  margin-top: 0.15em;
  color: var(--color-dark-contrast);
}

.site-footer__contact-item a {
  color: var(--color-dark-contrast);
}

address.site-footer__contact {
  font-style: normal;
}

.site-footer__address > span {
  white-space: pre-line;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: var(--color-dark-muted);
  font-size: var(--step--1);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: inherit;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.social-links a:hover {
  border-color: currentColor;
  text-decoration: none;
}

.social-links .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.site-footer .social-links a {
  border-color: rgba(255, 255, 255, .2);
}

.site-footer .social-links a:hover {
  border-color: var(--color-dark-contrast);
  background: rgba(255, 255, 255, .06);
}

.pay-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pay-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: var(--color-dark-contrast);
}

.pay-mark .icon {
  width: 30px;
  height: 22px;
}

.pay-marks--light .pay-mark {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Newsletter form (partials/newsletter-form.php); works on the dark footer and on light sections. */
.newsletter-form {
  display: grid;
  gap: 0.6rem;
}

.newsletter-form__status {
  min-height: 1.4em;
  font-size: var(--step--1);
  font-weight: 550;
}

.newsletter-form__status.is-error {
  color: var(--color-danger);
}

.newsletter-form__status.is-success {
  color: var(--color-success);
}

.newsletter-form__consent {
  font-size: var(--step--2);
  color: var(--color-text-muted);
}

.site-footer .newsletter-form .input-group,
.section--dark .newsletter-form .input-group {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .06);
}

.site-footer .newsletter-form .input-group:hover,
.site-footer .newsletter-form .input-group:focus-within,
.section--dark .newsletter-form .input-group:focus-within {
  border-color: var(--color-dark-contrast);
  box-shadow: none;
}

/* On dark: the same ring shape, its gap in the dark colour and the accent line the footer uses for focus. */
.site-footer .newsletter-form .input-group:has(> .input:focus-visible),
.section--dark .newsletter-form .input-group:has(> .input:focus-visible) {
  box-shadow: 0 0 0 2px var(--color-dark), 0 0 0 4px var(--color-accent);
}

.site-footer .newsletter-form .input,
.section--dark .newsletter-form .input {
  color: var(--color-dark-contrast);
}

.site-footer .newsletter-form .input::placeholder,
.section--dark .newsletter-form .input::placeholder {
  color: var(--color-dark-muted);
}

.site-footer .newsletter-form__consent,
.section--dark .newsletter-form__consent {
  color: var(--color-dark-muted);
}

.site-footer .newsletter-form__status.is-error,
.section--dark .newsletter-form__status.is-error {
  color: #FF9A85;
}

.site-footer .newsletter-form__status.is-success,
.section--dark .newsletter-form__status.is-success {
  color: #5FE0A0;
}

.trust-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .trust-badges {
    grid-template-columns: repeat(var(--trust-columns, 4), minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.trust-badge {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.trust-badge__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.trust-badge__title {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-stretch: 100%;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.3;
}

.trust-badge__text {
  margin-top: 0.2rem;
  color: var(--color-text-muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

.whatsapp-button {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + var(--mobile-nav-h) + env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: #FFFFFF;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-2) var(--ease-out);
}

.whatsapp-button:hover {
  transform: scale(1.06);
}

.whatsapp-button:focus-visible {
  outline: none;
  box-shadow: var(--ring), var(--shadow-lg);
}

.whatsapp-button .icon {
  width: 1.6rem;
  height: 1.6rem;
}

@media (min-width: 1024px) {
  .whatsapp-button {
    right: 1.5rem;
    bottom: 1.5rem;
  }
}

/* Minimal layout (checkout, error pages): logo + reassurance only; the footer stays at the bottom. */
body.layout-minimal {
  display: flex;
  flex-direction: column;
}

body.layout-minimal > main {
  flex: 1 0 auto;
}

.minimal-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.minimal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
}

.minimal-header__logo svg,
.minimal-header__logo img {
  width: auto;
  height: 28px;
}

.minimal-header__secure {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text-muted);
  font-size: var(--step--1);
  font-weight: 600;
}

.minimal-header__secure .icon {
  color: var(--color-success);
}

.minimal-footer {
  padding-block: 1.75rem 2.5rem;
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.minimal-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.minimal-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.minimal-footer__links a {
  color: inherit;
}

/* =============================================================================================
   15. Pages: home fallback (shown until homepage sections exist)
   ============================================================================================= */
.hero {
  padding-block: clamp(2.25rem, 1.2rem + 5vw, 6rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.hero__title {
  max-width: 17ch;
  font-size: var(--step-6);
  line-height: 0.98;
}

.hero__lead {
  max-width: 48ch;
  margin-top: clamp(1rem, 0.8rem + 1vw, 1.6rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
}

/* Shop-by-type "timeline": product types laid out as clips on an editing track. */
.timeline {
  --playhead: 0%;
  position: relative;
  margin-top: clamp(2.5rem, 1.75rem + 3.5vw, 4.75rem);
  padding-top: 1.6rem;
}

.timeline__ruler {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.1rem;
  background:
    repeating-linear-gradient(90deg, var(--color-border-strong) 0 1px, transparent 1px 12.5%) left bottom / 100% 0.85rem no-repeat,
    repeating-linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px 2.5%) left bottom / 100% 0.4rem no-repeat;
}

.timeline__ruler::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border);
}

.timeline__track {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__clip {
  min-width: 0;
}

.timeline__clip > a,
.timeline__clip > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  height: 100%;
  min-height: 7.5rem;
  padding: 1rem 1.1rem 1.1rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: box-shadow var(--dur-2) var(--ease-out);
}

.timeline__clip > a:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.timeline__clip--a > :is(a, div) {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.timeline__clip--b > :is(a, div) {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.timeline__clip--c > :is(a, div) {
  background: var(--color-secondary);
  color: var(--color-secondary-contrast);
}

/* Thumbnail-strip texture along the bottom of each clip. */
.timeline__clip > *::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3.25rem);
  opacity: 0.12;
  pointer-events: none;
}

/* Clip text sits above the playhead (z 2) so the line passes behind letters, not through them. */
.timeline__head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.timeline__title {
  font-size: var(--step-2);
  line-height: 1.05;
}

.timeline__head .icon {
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.85;
}

.timeline__meta {
  position: relative;
  z-index: 3;
  max-width: 30ch;
  font-size: var(--step--1);
  font-weight: 550;
  line-height: 1.4;
  opacity: 0.9;
}

.timeline__audio {
  display: none;
}

.timeline__playhead {
  display: none;
}

/* A shadow, not a transform: a transform would make each clip its own stacking context and put the
   playhead back on top of the text. */
@media (hover: hover) {
  .timeline__clip > a:hover {
    box-shadow: 0 16px 30px -20px rgba(20, 21, 26, .6), inset 0 0 0 2px rgba(255, 255, 255, .14);
  }
}

@media (min-width: 768px) {
  .timeline__track {
    grid-template-columns: 5fr 4fr 3fr;
  }

  .timeline__clip > a,
  .timeline__clip > div {
    min-height: 10.5rem;
  }

  .timeline__audio {
    display: block;
    height: 2.75rem;
    margin-top: 6px;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-border-strong);
  }

  .timeline__audio svg {
    width: 100%;
    height: 100%;
  }

  .timeline__playhead {
    position: absolute;
    top: 0.35rem;
    bottom: -0.35rem;
    left: var(--playhead);
    z-index: 2;
    display: block;
    width: 2px;
    margin-left: -1px;
    background: var(--color-accent);
    /* Dark edges keep the line visible where it crosses the accent-coloured clip. */
    box-shadow: -1px 0 0 rgba(20, 21, 26, .5), 1px 0 0 rgba(20, 21, 26, .5);
    pointer-events: none;
    transition: left 450ms var(--ease-out);
  }

  .timeline__playhead::before {
    content: "";
    position: absolute;
    top: -0.35rem;
    left: 50%;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px 3px 50% 50%;
    background: var(--color-accent);
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .timeline.is-ready .timeline__playhead {
    animation: rr-playhead 1.6s var(--ease-out) both;
  }
}

.feature-list {
  display: grid;
  gap: 1.75rem 2.5rem;
  margin: 0;
}

@media (min-width: 768px) {
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature-list__item dt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.3;
}

.feature-list__item dt .icon {
  color: var(--color-accent-text);
}

.feature-list__item dd {
  max-width: 44ch;
  margin: 0.45rem 0 0;
  color: var(--color-text-muted);
}

.feature-list__item dd a {
  color: var(--color-accent-text);
  font-weight: 550;
}

.section--tight-top {
  padding-top: 0;
}

.steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.steps__item {
  position: relative;
  padding: 1.35rem 1.35rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  counter-increment: step;
}

.steps__item::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-heading);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.steps__item h3 {
  font-size: var(--step-1);
}

.steps__item p {
  margin-top: 0.45rem;
  color: var(--color-text-muted);
}

.category-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .category-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.category-tile {
  position: relative;
  display: grid;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}

.category-tile__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}

.category-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

.category-tile:hover .category-tile__media img {
  transform: scale(1.035);
}

.category-tile__name {
  font-weight: 650;
}

.category-tile__count {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

/* =============================================================================================
   16. Pages: CMS, legal (table of contents), contact, errors
   ============================================================================================= */
.page-header {
  padding-block: clamp(1.75rem, 1.25rem + 2.5vw, 3.75rem) clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
}

.page-header .breadcrumbs {
  margin-bottom: 1.25rem;
}

.page-header__title {
  max-width: 22ch;
}

.page-header__meta {
  margin-top: 0.9rem;
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.page-body {
  padding-bottom: var(--section-space);
}

.legal-layout {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 1024px) {
  .legal-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 4rem;
  }
}

.toc {
  font-size: var(--step--1);
}

.toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.toc__summary::-webkit-details-marker {
  display: none;
}

.toc__summary .icon {
  transition: transform var(--dur-2) var(--ease-out);
}

.toc[open] .toc__summary .icon {
  transform: rotate(180deg);
}

.toc__title {
  margin-bottom: 0.75rem;
  font-weight: 650;
}

.toc__list {
  margin: 0;
  padding: 0.75rem 0 0;
  list-style: none;
}

.toc__list a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
  line-height: 1.4;
}

.toc__list a:hover,
.toc__list a.is-active {
  border-left-color: var(--color-accent);
  color: var(--color-text);
}

.toc--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .toc-wrap {
    position: sticky;
    top: calc(var(--header-h-compact) + 2rem);
    align-self: start;
  }

  .toc--desktop {
    display: block;
  }

  .toc--collapsible {
    display: none;
  }

  .toc--desktop .toc__list {
    padding-top: 0;
  }
}

.contact-card__address {
  white-space: pre-line;
  font-weight: 550;
}

/* Legal pages open with a highlighted review note (a blockquote in the stored content). */
.page--legal .prose > blockquote:first-child {
  background: var(--color-accent-soft);
  font-size: var(--step-0);
}

.contact-cards {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  height: 100%;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.contact-card .icon {
  margin-top: 0.15rem;
  color: var(--color-accent-text);
}

.contact-card__label {
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.contact-card__value {
  font-weight: 650;
  word-break: break-word;
}

.contact-card__value a {
  text-decoration: none;
}

.contact-card__value a:hover {
  text-decoration: underline;
}

.about-strip {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.error-page {
  padding-block: clamp(3.5rem, 2.5rem + 6vw, 8.5rem);
  text-align: center;
}

.error-page__code {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  font-size: var(--step--1);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.error-page__title {
  max-width: 20ch;
  margin: 1.25rem auto 0;
}

.error-page__message {
  max-width: 48ch;
  margin: 1rem auto 0;
  color: var(--color-text-muted);
  font-size: var(--step-1);
}

.error-page__hint {
  max-width: 48ch;
  margin: 0.75rem auto 0;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.error-page__search {
  max-width: 30rem;
  margin: 2rem auto 0;
}

.error-page__ref {
  margin-top: 2.25rem;
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.error-page__ref code {
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.95em;
  user-select: all;
}

/* =============================================================================================
   17. Styleguide (/styleguide)
   ============================================================================================= */
.sg {
  padding-block: 1.5rem var(--section-space);
}

.sg-intro {
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) 1rem;
}

.sg-nav {
  position: sticky;
  top: var(--header-h-compact);
  z-index: var(--z-sticky);
  margin-bottom: 1rem;
  padding-block: 0.6rem;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.sg-nav__list {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  margin: 0;
  padding: 0 0 0.2rem;
  list-style: none;
  scrollbar-width: thin;
}

.sg-section {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--color-border);
}

.sg-section > h2 {
  margin-bottom: 1.5rem;
  font-size: var(--step-3);
}

/* Direct children only: product cards and other components inside a section keep their own h3 styles. */
.sg-section > h3,
.sg-panel > h3 {
  margin: 1.75rem 0 0.85rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-stretch: 100%;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.sg-panel > h3 {
  margin-top: 0;
}

.sg-panel--dark > h3 {
  color: var(--color-dark-muted);
}

.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem;
}

.sg-panel {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.sg-panel--dark {
  background: var(--color-dark);
  color: var(--color-dark-contrast);
  box-shadow: none;
}

.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 0.75rem;
}

.sg-swatch {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-size: var(--step--1);
}

.sg-swatch__chip {
  display: flex;
  align-items: flex-end;
  height: 4.5rem;
  padding: 0.5rem 0.65rem;
  font-weight: 650;
}

.sg-swatch__body {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.65rem 0.7rem;
}

.sg-swatch__body code {
  font-size: 0.85em;
}

.sg-type > * + * {
  margin-top: 1rem;
}

.sg-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sg-icons li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0.4rem 0.7rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  text-align: center;
  word-break: break-all;
}

.sg-icons .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-text);
}

.sg-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.4rem + 1.6vw, 1.75rem);
}

@media (min-width: 768px) {
  .sg-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =============================================================================================
   18. Motion helpers, keyframes, reduced motion, print
   ============================================================================================= */

/* Opt-in scroll reveal. Content is visible by default; app.js marks only elements that start below the
   fold as .reveal-pending, so nothing above the fold flashes while the deferred script loads. */
[data-reveal].reveal-pending {
  opacity: 0;
  transform: translateY(14px);
}

[data-reveal].is-revealed {
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
}

.timeline.is-settled .timeline__playhead {
  animation: none;
}

@keyframes rr-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rr-shimmer {
  from {
    background-position: 150% 0;
  }

  to {
    background-position: -50% 0;
  }
}

@keyframes rr-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes rr-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes rr-pop-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@keyframes rr-pop-out {
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

@keyframes rr-sheet-in {
  from {
    transform: translateY(100%);
  }
}

@keyframes rr-sheet-out {
  to {
    transform: translateY(100%);
  }
}

@keyframes rr-drawer-right-in {
  from {
    transform: translateX(100%);
  }
}

@keyframes rr-drawer-right-out {
  to {
    transform: translateX(100%);
  }
}

@keyframes rr-drawer-left-in {
  from {
    transform: translateX(-100%);
  }
}

@keyframes rr-drawer-left-out {
  to {
    transform: translateX(-100%);
  }
}

@keyframes rr-search-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes rr-search-out {
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes rr-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@keyframes rr-toast-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@keyframes rr-bump {
  40% {
    transform: scale(1.3);
  }
}

@keyframes rr-segment {
  to {
    transform: scaleX(1);
  }
}

@keyframes rr-playhead {
  from {
    left: 0;
  }

  to {
    left: var(--playhead);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* Loading indicators are essential motion: keep them turning, slowly. */
  .spinner,
  .btn.is-loading::after {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }

  [data-reveal].reveal-pending {
    opacity: 1;
    transform: none;
  }

  .announcement-bar__segment.is-active .announcement-bar__segment-fill {
    animation: none;
    transform: scaleX(1);
  }
}

@media print {
  :where(:root) {
    --color-bg: #FFFFFF;
    --color-text: #000000;
  }

  body {
    background: #FFFFFF;
    color: #000000;
    padding: 0 !important;
  }

  .skip-link,
  .announcement-bar,
  .site-header,
  .site-footer,
  .mobile-nav,
  .whatsapp-button,
  .toast-region,
  .search-overlay,
  .drawer,
  .modal,
  .product-card__actions,
  .product-card__wishlist,
  .btn,
  .pagination,
  .toc,
  .sg-nav {
    display: none !important;
  }

  .container {
    max-width: none;
    padding-inline: 0;
  }

  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444444;
  }

  .product-card,
  .prose :where(table, figure, blockquote) {
    break-inside: avoid;
  }

  h2,
  h3 {
    break-after: avoid;
  }
}

/* Sticky offer bar (views/partials/sticky-offer.php; Settings > Promotions). */
.sticky-offer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--mobile-nav-h, 0px) + env(safe-area-inset-bottom));
  z-index: var(--z-float);
  padding: 0.5rem 1rem;
  background: var(--color-dark);
  color: var(--color-dark-contrast);
  font-size: var(--step--1);
  text-align: center;
}

.sticky-offer__text {
  margin: 0;
}

.sticky-offer a {
  color: inherit;
  text-decoration: underline;
}

.sticky-offer__code {
  margin-left: 0.5rem;
  white-space: nowrap;
}

body:has(.sticky-offer) {
  padding-bottom: calc(2.5rem + var(--mobile-nav-h, 0px) + env(safe-area-inset-bottom));
}

body:has(.sticky-offer) .whatsapp-button {
  bottom: calc(3.5rem + var(--mobile-nav-h, 0px) + env(safe-area-inset-bottom));
}