/*
 * Custom overlay CSS for theme 274797.
 * Loaded after built.css and NOT overwritten by theme updates.
 * Only contains rules that either:
 *   - depend on runtime state driven by Alpine (product-card tilt / glare), or
 *   - need CSS features that plain Tailwind utilities cannot express.
 * All merchant-facing colors come from --cl-accent / --cl-t-primary etc.,
 * so the Visual Editor stays in control of the palette.
 */

/* ================================================
   HEADER NAVIGATION
   Clean SaaS-style hover / active — no underline,
   no glow, no giant pill. Base padding, rounded-md,
   bg tint and text color are set by Tailwind classes
   on the <a> itself (see components/header.njk).
   This block only adds a subtle inset ring on the
   currently-active item so it reads as "current
   section" without any decoration.
================================================ */
.nav-link {
  position: relative;
}

.nav-link.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, rgb(var(--cl-accent)) 22%, transparent);
}

.announcement-bar {
  border-bottom-color: var(--theme-line);
  background: color-mix(in srgb, rgb(var(--cl-card)) var(--theme-surface-opacity), transparent);
}

.announcement-bar a:focus-visible { outline: 1px solid rgb(var(--cl-accent)); outline-offset: 0.25rem; }

/* ================================================
   PRODUCT CARD — 3D tilt + cursor glare
   The tilt transform and the glare radial-gradient
   are driven by inline :style bindings inside
   snippets/product-card.njk. This block adds depth,
   proper compositing, a hover lift, and a
   reduced-motion safeguard.
================================================ */
.product-card {
  position: relative;
  transform-style: preserve-3d;
  isolation: isolate;
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 300ms ease;
  background: radial-gradient(120% 80% at 50% 0%,
    color-mix(in srgb, rgb(var(--cl-accent)) 12%, transparent) 0%,
    transparent 60%);
}

.product-card:hover::before {
  opacity: 1;
}

.product-card > * {
  position: relative;
  z-index: 1;
}

.product-card .glare {
  mix-blend-mode: soft-light;
  z-index: 2;
}

.product-card:hover {
  box-shadow:
    0 20px 40px -24px rgba(0, 0, 0, 0.55),
    0 8px 16px -12px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card * {
    transform: none !important;
    transition: background-color 200ms ease,
                border-color 200ms ease,
                color 200ms ease !important;
  }
  .product-card .glare,
  .product-card::before {
    display: none !important;
  }
}

/* =================================================
   EDITORIAL PAGE SYSTEM
   Applies to every customer-facing route except the
   homepage, which is intentionally polished last.
   Every colour and density setting is derived from
   visual-editor tokens defined in master.njk.
================================================= */
body:not(.page--shop) .site-content {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
  padding-block: clamp(2rem, var(--theme-section-space), 5rem);
}

body:not(.page--shop) .site-content > .components,
body:not(.page--shop) .site-content > .container {
  width: 100%;
}

body:not(.page--shop) .site-content .component > .py-6,
body:not(.page--shop) .site-content .container > .relative {
  padding-block: 0;
}

.page-shell {
  padding-block: clamp(2rem, var(--theme-section-space), 5rem);
}

.page-shell__inner {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
}

.page-intro {
  max-width: 48rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.page-intro--center {
  margin-inline: auto;
  text-align: center;
}

.page-intro__eyebrow,
.section-heading__eyebrow {
  color: rgb(var(--cl-accent));
}

.page-intro__title {
  margin: 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

/* Shared elevated surface used by product, cart, account, content and modal
   pages. It stays deliberately quiet so background effects remain visible. */
body:not(.page--shop) .site-content .bg-card,
body:not(.page--shop) .site-content .products-empty {
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  box-shadow: 0 1rem 3rem -2.5rem color-mix(in srgb, rgb(var(--cl-background)) 95%, rgb(var(--cl-t-primary)));
}

body:not(.page--shop) .site-content :is(input, select, textarea) {
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background-color: color-mix(in srgb, rgb(var(--cl-card)) 54%, transparent);
  color: rgb(var(--cl-t-primary));
}

body:not(.page--shop) .site-content :is(input, select, textarea):focus {
  border-color: rgb(var(--cl-accent));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, rgb(var(--cl-accent)) 16%, transparent);
}

body:not(.page--shop) .site-content :is(.text-t-primary\/50, .text-t-primary\/60, .text-t-primary\/75, .text-t-primary\/80) {
  color: var(--theme-muted);
}

/* Product catalog and product detail */
.page--products .site-content > .components > .component:first-child h2,
.page--product .site-content h1,
.page--cart .site-content h1,
.page--feedback .site-content h2,
.page--blog .site-content h2 {
  border: 0;
  padding: 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  letter-spacing: -0.04em;
}

.page--products .site-content .sticky,
.page--products .site-content .grid > .hidden > div {
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
}

.page--product .site-content .splide,
.page--product .site-content .splide__track,
.page--product .site-content .splide__slide,
.page--product .site-content .splide__slide img {
  border-radius: var(--theme-radius);
}

.page--product .site-content .editor,
.page--blog-post .site-content .editor,
.page--terms .site-content .editor,
.page--privacy-policy .site-content .editor,
.page--refund-policy .site-content .editor {
  color: var(--theme-muted);
  line-height: 1.75;
}

.page--product .site-content .editor :is(h1, h2, h3, h4),
.page--blog-post .site-content .editor :is(h1, h2, h3, h4),
.page--terms .site-content .editor :is(h1, h2, h3, h4),
.page--privacy-policy .site-content .editor :is(h1, h2, h3, h4),
.page--refund-policy .site-content .editor :is(h1, h2, h3, h4) {
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
}

.product-card,
.page--blog .site-content a.block.h-full.bg-card,
.page--feedback .site-content .cursor-pointer > div {
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  transition-duration: var(--theme-motion-duration);
}

.product-card:hover,
.page--blog .site-content a.block.h-full.bg-card:hover,
.page--feedback .site-content .cursor-pointer > div:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 44%, var(--theme-line));
  background: var(--theme-surface-raised);
  transform: translateY(var(--theme-hover-lift-negative));
}

/* Status is now a concise availability board rather than a list of generic
   rows. Status colours still come directly from SellAuth product settings. */
.status-list {
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(0.35rem, 1vw, 0.75rem);
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, rgb(var(--cl-card)) 42%, transparent);
}

.status-list__items,
.status-group__items {
  display: grid;
  gap: 0.6rem;
}

.status-group + .status-group {
  margin-top: 1.75rem;
}

.status-group__title {
  margin: 0 0 0.65rem;
  padding-inline: 0.5rem;
  color: var(--theme-subtle);
  font-size: 0.7rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, rgb(var(--cl-card)) 58%, transparent);
  color: rgb(var(--cl-t-primary));
  text-decoration: none;
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease;
}

.status-card:hover,
.status-card:focus-visible {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 38%, var(--theme-line));
  background: var(--theme-surface-raised);
  outline: none;
  transform: translateX(var(--theme-hover-lift));
}

.status-card__identity,
.status-card__state {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.status-card__label {
  overflow: hidden;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--font-weight-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-card__state { gap: 0.6rem; }

.status-card__signal {
  position: relative;
  width: 0.62rem;
  height: 0.62rem;
  flex: 0 0 auto;
  border-radius: 50%;
}

.status-card__text {
  font-size: 0.78rem;
  font-weight: var(--font-weight-button);
  text-align: end;
}

/* Native details provides a keyboard-safe FAQ interaction with no component
   state to get out of sync inside the visual editor. */
.faq-list {
  display: grid;
  gap: 0.65rem;
}

.faq-item {
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  overflow: clip;
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease;
}

.faq-item[open] {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line));
  background: var(--theme-surface-raised);
}

.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.faq-item__summary::-webkit-details-marker { display: none; }

.faq-item__question {
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--font-weight-heading);
}

.faq-item__icon {
  display: inline-flex;
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: rgb(var(--cl-accent));
  transition: transform var(--theme-motion-duration) ease;
}

.faq-item[open] .faq-item__icon { transform: rotate(180deg); }
.faq-item__icon svg { width: 100%; height: 100%; }

.faq-item__answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--theme-muted);
  line-height: 1.7;
}

/* Policies, blog posts and customer areas share the same calm readable
   frame. Tables retain their data structure while gaining a usable overflow. */
.page--terms .site-content .max-w-3xl,
.page--privacy-policy .site-content .max-w-3xl,
.page--refund-policy .site-content .max-w-3xl,
.page--blog-post .site-content .max-w-3xl {
  max-width: 52rem;
}

.page--terms .site-content .max-w-3xl > .bg-card,
.page--privacy-policy .site-content .max-w-3xl > .bg-card,
.page--refund-policy .site-content .max-w-3xl > .bg-card,
.page--blog-post .site-content .max-w-3xl > .bg-card {
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.page--customer-dashboard .site-content .container,
.page--customer-invoices .site-content .container,
.page--customer-tickets .site-content .container,
.page--customer-ticket .site-content .container,
.page--customer-subscriptions .site-content .container,
.page--customer-balance .site-content .container,
.page--customer-affiliate .site-content .container,
.page--customer-reseller .site-content .container {
  max-width: var(--theme-content-width);
}

.page--customer-dashboard .site-content table,
.page--customer-invoices .site-content table,
.page--customer-tickets .site-content table,
.page--customer-subscriptions .site-content table,
.page--customer-reseller .site-content table {
  min-width: 42rem;
}

.page--customer-dashboard .site-content .overflow-y-hidden,
.page--customer-invoices .site-content .overflow-y-hidden,
.page--customer-tickets .site-content .overflow-y-hidden,
.page--customer-subscriptions .site-content .overflow-y-hidden,
.page--customer-reseller .site-content .overflow-y-hidden {
  overflow-x: auto;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
}

.page--customer-dashboard .site-content thead,
.page--customer-invoices .site-content thead,
.page--customer-tickets .site-content thead,
.page--customer-subscriptions .site-content thead,
.page--customer-reseller .site-content thead {
  background: color-mix(in srgb, rgb(var(--cl-card)) 65%, transparent);
}

.page--customer-dashboard .site-content .bg-card > ul {
  background: transparent;
}

.page--customer-dashboard .site-content .bg-card > ul a,
.page--customer-invoices .site-content a,
.page--customer-tickets .site-content a,
.page--customer-subscriptions .site-content a,
.page--customer-balance .site-content a,
.page--customer-affiliate .site-content a,
.page--customer-reseller .site-content a {
  transition: color var(--theme-motion-duration) ease;
}

.page--cart .site-content .bg-card,
.page--customer-dashboard .site-content .bg-card,
.page--customer-invoices .site-content .bg-card,
.page--customer-tickets .site-content .bg-card,
.page--customer-ticket .site-content .bg-card,
.page--customer-subscriptions .site-content .bg-card,
.page--customer-balance .site-content .bg-card,
.page--customer-affiliate .site-content .bg-card,
.page--customer-reseller .site-content .bg-card {
  overflow: clip;
}

@media (max-width: 640px) {
  body:not(.page--shop) .site-content {
    padding-block: 1.75rem;
  }

  .page-shell { padding-block: 1.75rem; }
  .page-intro { margin-bottom: 1.5rem; }
  .status-card { min-height: 4.5rem; padding: 0.9rem; }
  .status-card__label { font-size: 0.92rem; }
  .status-card__text { font-size: 0.7rem; }
  .faq-item__summary { padding: 1rem; }
  .faq-item__answer { padding: 0 1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .page--blog .site-content a.block.h-full.bg-card,
  .page--feedback .site-content .cursor-pointer > div,
  .status-card,
  .faq-item,
  .faq-item__icon {
    transition: none;
  }

  .product-card:hover,
  .page--blog .site-content a.block.h-full.bg-card:hover,
  .page--feedback .site-content .cursor-pointer > div:hover,
  .status-card:hover,
  .status-card:focus-visible {
    transform: none;
  }
}

/* ================================================
   SEARCH FIELD (components/products.njk)
   Presentational refinement only. Filtering logic
   (x-model="searchTerm") is untouched.
================================================ */
.search-field {
  position: relative;
}

.search-field:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in srgb, rgb(var(--cl-accent)) 45%, transparent),
    0 0 0 4px color-mix(in srgb, rgb(var(--cl-accent)) 12%, transparent);
}

/* ================================================
   PRODUCT SECTION — empty search state
================================================ */
.products-empty {
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.015);
}

/* ================================================
   HERO SECTION (components/hero.njk)
   Premium SaaS layout — glow, grid backdrop, rotating
   accent stack, metric cards (cards/pills/inline),
   optional image frame, subtle motion. All colors
   run through --cl-accent / --cl-card / --cl-t-primary
   so the Visual Editor stays in control of the palette.
================================================ */
.hero-section {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgb(var(--cl-background)) 94%, rgb(var(--cl-card))) 0%,
      color-mix(in srgb, rgb(var(--cl-background)) 100%, transparent) 100%
    );
}

/* Accent hairline along the top edge — the one piece of "chrome" left
   after flattening the section fill. Painted before the content, which
   is `relative`, so it can never sit on top of text. */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, rgb(var(--cl-accent)) 45%, transparent) 50%,
    transparent 100%
  );
}

.hero-section .hero-glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 80%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 55% at 18% 25%,
      color-mix(in srgb, rgb(var(--cl-accent)) 32%, transparent) 0%,
      transparent 65%),
    radial-gradient(45% 45% at 82% 15%,
      color-mix(in srgb, rgb(var(--cl-accent)) 16%, transparent) 0%,
      transparent 65%);
  filter: blur(64px);
  opacity: 0.6;
  animation: heroGlowFloat 14s ease-in-out infinite;
}

@keyframes heroGlowFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, 14px, 0); }
}

.hero-section .hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(to right, color-mix(in srgb, rgb(var(--cl-t-primary)) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, rgb(var(--cl-t-primary)) 3.5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
}

.hero-section .hero-title {
  letter-spacing: -0.025em;
  text-wrap: balance;
  background: linear-gradient(
    180deg,
    rgb(var(--cl-t-primary)) 0%,
    color-mix(in srgb, rgb(var(--cl-t-primary)) 62%, transparent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Staggered entrance ---- */
.hero-section .hero-content > *,
.hero-section .hero-media {
  animation: heroFadeUp 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-section .hero-content > *:nth-child(1) { animation-delay: 0ms; }
.hero-section .hero-content > *:nth-child(2) { animation-delay: 60ms; }
.hero-section .hero-content > *:nth-child(3) { animation-delay: 120ms; }
.hero-section .hero-content > *:nth-child(4) { animation-delay: 180ms; }
.hero-section .hero-content > *:nth-child(5) { animation-delay: 240ms; }
.hero-section .hero-content > *:nth-child(6) { animation-delay: 300ms; }
.hero-section .hero-content > *:nth-child(7) { animation-delay: 360ms; }
.hero-section .hero-media { animation-delay: 200ms; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Rotating accent line ---- */
.hero-section .hero-rotating-bar {
  display: inline-block;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-accent)) 65%, transparent);
}

.hero-section .hero-rotating {
  position: relative;
  display: inline-grid;
  grid-template-areas: "stack";
  vertical-align: baseline;
  line-height: 1.5;
}

.hero-section .hero-rotating > * {
  grid-area: stack;
}

.hero-section .hero-rotating__word {
  color: rgb(var(--cl-accent));
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}

.hero-section .hero-rotating__word.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Editorial rule above the stats row ---- */
.hero-section .hero-divider {
  height: 1px;
  width: 100%;
  max-width: 4.5rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, rgb(var(--cl-t-primary)) 20%, transparent) 0%,
    transparent 100%
  );
}

.hero-section .hero-divider--center {
  margin-left: auto;
  margin-right: auto;
  max-width: 7rem;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, rgb(var(--cl-t-primary)) 20%, transparent) 50%,
    transparent 100%
  );
}

/* ================================================
   SHARED BUTTONS (snippets/buttons.njk)
   Deliberately NOT scoped to .hero-section: the hero
   and the text / text-image / text-video blocks all
   render through the same snippet, so the hover lift
   and the primary accent shadow are defined once.
   Base geometry and colors come from Tailwind classes
   on the <a> itself.
================================================ */
.ui-btn {
  will-change: transform;
}

.ui-btn:hover {
  transform: translateY(-1px);
}

.ui-btn--primary {
  box-shadow:
    0 10px 30px -14px color-mix(in srgb, rgb(var(--cl-accent)) 60%, transparent),
    0 2px 4px -2px color-mix(in srgb, rgb(var(--cl-background)) 40%, transparent);
}

.ui-btn--primary:hover {
  box-shadow:
    0 16px 36px -12px color-mix(in srgb, rgb(var(--cl-accent)) 70%, transparent),
    0 4px 6px -3px color-mix(in srgb, rgb(var(--cl-background)) 52%, transparent);
}

/* ---- Stats: base "cards" variant ---- */
.hero-section .hero-stats {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.hero-section .hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.22rem;
  padding: 0.85rem 1rem;
  border-radius: calc(var(--theme-radius) * 1.05);
  border: 1px solid color-mix(in srgb, var(--theme-line) 82%, rgb(255 255 255 / 0.04));
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent 52%),
    color-mix(in srgb, rgb(var(--cl-card)) 58%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.035), 0 0.65rem 1.45rem -1.15rem rgb(0 0 0 / 0.55);
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    transform 200ms ease;
  min-width: 0;
}

.hero-section .hero-stat:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 28%, var(--theme-line));
  transform: translateY(var(--theme-hover-lift-negative));
}

.hero-section .hero-stat__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.1;
  font-weight: var(--font-weight-heading);
  color: rgb(var(--cl-t-primary));
  letter-spacing: -0.015em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hero-section .hero-stat__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 45%, transparent);
}

/* ---- Stats: "inline" variant (no chrome) ---- */
.hero-section .hero-stats--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 0;
  grid-template-columns: none;
}

.hero-section .hero-stats--inline .hero-stat {
  border: none;
  background: none;
  padding: 0 2rem;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.hero-section .hero-stats--inline .hero-stat:first-child { padding-left: 0; }
.hero-section .hero-stats--inline .hero-stat:last-child { padding-right: 0; }
.hero-section .hero-stats--inline .hero-stat + .hero-stat {
  border-left: 1px solid color-mix(in srgb, var(--theme-line) 90%, transparent);
}

.hero-section .hero-stats--inline .hero-stat:hover {
  transform: none;
  border-color: transparent;
  background: none;
}

/* ---- Right media (image) ---- */
.hero-section .hero-media {
  position: relative;
}

.hero-section .hero-media__frame {
  animation: heroFloat 8s ease-in-out infinite;
  animation-delay: 400ms;
}

.hero-section .hero-media__frame-glow {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, rgb(var(--cl-accent)) 28%, transparent) 0%,
    transparent 65%);
  filter: blur(52px);
  opacity: 0.7;
}

.hero-section .hero-media__img {
  position: relative;
  z-index: 1;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ================================================
   HERO CONTENT RHYTHM
   The content column intentionally has NO flex gap.
   Every optional element declares its own top margin
   through `* + *`, so disabling any single element
   (eyebrow, rotating line, buttons, stats, Discord
   card...) leaves zero residual space and the rest of
   the stack closes up on its own. It also lets the
   buttons breathe more than the text elements without
   hardcoding a margin per on/off combination.
================================================ */
.hero-section .hero-content > * + * {
  margin-top: 1.25rem;
}

/* Rotating line belongs to the title — keep it tight on both sides. */
.hero-section .hero-content > * + .hero-rotating-line,
.hero-section .hero-content > .hero-rotating-line + * {
  margin-top: 0.85rem;
}

.hero-section .hero-content > * + .hero-subtitle {
  margin-top: 1rem;
}

/* Buttons: the one element that needs real separation on both sides. */
.hero-section .hero-content > * + .hero-actions {
  margin-top: 1.85rem;
}

.hero-section .hero-content > .hero-actions + * {
  margin-top: 1.85rem;
}

.hero-section .hero-content > * + .hero-divider {
  margin-top: 2rem;
}

.hero-section .hero-content > * + .hero-stats {
  margin-top: 1.75rem;
}

/* Divider sits directly above the stats, so tighten that pair. */
.hero-section .hero-content > .hero-divider + .hero-stats {
  margin-top: 1.15rem;
}

.hero-section .hero-content > * + .hero-discord {
  margin-top: 1.75rem;
}

/* Whatever ends up first must never inherit a top margin. Declared
   last so it wins over the same-specificity rules above. */
.hero-section .hero-content > *:first-child {
  margin-top: 0;
}

/* ---- Centered alignment: children follow the column ---- */
.hero-section .hero-content--center .hero-stats--inline {
  justify-content: center;
}

.hero-section .hero-content--center .hero-stat {
  align-items: center;
  text-align: center;
}

/* ---- Image on the left (properties.image_position) ---- */
@media (min-width: 1024px) {
  .hero-section .hero-layout--media-left .hero-media {
    order: -1;
    justify-content: flex-start;
  }
}

/* ================================================
   DISCORD COMMUNITY CARD (snippets/discord-card.njk)
   Live name / icon / counts / avatars are fetched by
   the Alpine component inside the snippet; everything
   here is presentation only. Not scoped to
   .hero-section so the card can be reused elsewhere.
================================================ */
/* Required by Alpine so live-only regions never flash
   before init. `!important` is the documented form. */
[x-cloak] {
  display: none !important;
}

.hero-discord {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 26rem;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg,
      rgba(88, 101, 242, 0.16) 0%,
      rgba(88, 101, 242, 0) 58%),
    color-mix(in srgb, rgb(var(--cl-card)) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  text-align: left;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.hero-discord:hover {
  border-color: rgba(88, 101, 242, 0.45);
  box-shadow: 0 18px 40px -26px rgba(88, 101, 242, 0.8);
}

.hero-discord__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.hero-discord__icon {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: 0.875rem;
  border: 1px solid rgba(88, 101, 242, 0.35);
  background: rgba(88, 101, 242, 0.18);
  color: #c7cdff;
  font-size: 1.15rem;
}

.hero-discord__icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-discord__identity {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.hero-discord__name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--cl-t-primary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reserves the line height so the card does not jump when the live
   counts replace the fallback subtitle. */
.hero-discord__sub {
  min-height: 1.15rem;
}

.hero-discord__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 55%, transparent);
}

.hero-discord__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.hero-discord__meta strong {
  font-weight: 600;
  color: rgb(var(--cl-t-primary));
}

.hero-discord__meta-icon {
  font-size: 0.65rem;
  opacity: 0.7;
}

.hero-discord__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #23a55a;
  box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.18);
}

.hero-discord__fallback {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 45%, transparent);
}

.hero-discord__members {
  display: flex;
  align-items: center;
  min-width: 0;
}

.hero-discord__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  margin-left: -0.5rem;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid color-mix(in srgb, rgb(var(--cl-card)) 90%, #000);
  transition: transform 180ms ease;
}

.hero-discord__members img.hero-discord__avatar:first-of-type {
  margin-left: 0;
}

.hero-discord__avatar:hover {
  transform: translateY(-2px);
  z-index: 1;
}

.hero-discord__more {
  display: inline-flex;
  align-items: center;
  height: 1.85rem;
  margin-left: 0.45rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 65%, transparent);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-discord__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
  background: #5865f2;
  border: 1px solid #5865f2;
  box-shadow: 0 10px 26px -16px rgba(88, 101, 242, 0.9);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.hero-discord__cta:hover {
  background: #4752c4;
  border-color: #4752c4;
  transform: translateY(-1px);
}

.hero-discord__cta:focus-visible {
  outline: 2px solid rgb(var(--cl-t-primary));
  outline-offset: 2px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-section .hero-glow,
  .hero-section .hero-media__frame {
    animation: none !important;
  }
  .hero-section .hero-content > *,
  .hero-section .hero-media {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-section .hero-rotating__word {
    transition: none !important;
    transform: none !important;
  }
  .ui-btn:hover,
  .hero-section .hero-stat:hover,
  .hero-discord__cta:hover,
  .hero-discord__avatar:hover {
    transform: none !important;
  }
}

/* ---- Mobile refinements ---- */
@media (max-width: 640px) {
  .hero-section {
    border-radius: 1rem;
  }
  .hero-section .hero-stat__value {
    font-size: 1.125rem;
  }
  .hero-section .hero-stat {
    padding: 0.75rem 0.85rem;
  }
  .hero-section .hero-content > * + .hero-actions,
  .hero-section .hero-content > .hero-actions + * {
    margin-top: 1.5rem;
  }
  .hero-section .hero-actions .ui-btn {
    flex: 1 1 auto;
  }
  .hero-discord {
    max-width: 100%;
    padding: 0.9rem 1rem;
  }
  .hero-discord__icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    font-size: 1rem;
  }
  .hero-discord__avatar {
    width: 1.65rem;
    height: 1.65rem;
  }
  .hero-discord__more {
    height: 1.65rem;
  }
}

/* ================================================
   STATUS CARD (snippets/status-card.njk)
   Adds a subtle hover treatment and defines the
   `.pulsating` ripple used by the status indicator.
   The markup places `.pulsating` inside a
   `.relative size-4 rounded-full` dot, so we
   absolutely fill that dot and scale outward.
================================================ */
.status-card {
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    transform 200ms ease;
}

.status-card:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 28%, rgba(255, 255, 255, 0.06));
  background-color: color-mix(in srgb, rgb(var(--cl-card)) 88%, transparent);
}

.pulsating {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  transform-origin: center;
  animation: statusPulse 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}

@keyframes statusPulse {
  0% {
    transform: scale(1);
    opacity: 0.65;
  }
  80%,
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsating {
    animation: none;
    opacity: 0.4;
    transform: scale(1);
  }
}

/* ================================================
   GLOBAL TYPOGRAPHY
   ================================================ */
body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-base);
}

h1, h2, h3, h4, h5, h6,
.product-card h3,
.section-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
}

button,
.ui-btn,
.nav-link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-button);
}

.section-title {
  display: inline-block;
  margin: 0;
  border-inline-start: 3px solid rgb(var(--cl-accent));
  padding-inline-start: 0.625rem;
  color: rgb(var(--cl-t-primary));
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  line-height: 1.2;
}

/* ================================================
   HERO REFINEMENTS
   ================================================ */
.hero-section .hero-backdrop-overlay {
  background: linear-gradient(180deg, rgba(var(--cl-background), 0.35), rgba(var(--cl-background), 0.9) 82%, rgb(var(--cl-background)));
}

.hero-section .hero-title {
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

.hero-section .hero-subtitle {
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 68%, transparent);
  font-size: clamp(0.95rem, 1.5vw, 1.125rem);
  line-height: 1.7;
}

.hero-section .hero-layout--media-left .hero-media {
  order: -1;
}

/* ================================================
   INDEPENDENT DISCORD COMMUNITY COMPONENT
   ================================================ */
.discord-community {
  padding-block: 1.5rem 2.5rem;
}

.discord-community__inner {
  width: 100%;
}

.discord-community__inner--center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.discord-community__inner--center .section-title {
  align-self: center;
}

.discord-community .section-title {
  margin-block-end: 1rem;
}

.discord-community-card {
  display: flex;
  width: 100%;
  max-width: 30rem;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.16), transparent 58%), color-mix(in srgb, rgb(var(--cl-card)) 76%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: start;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.discord-community__inner--center .discord-community-card {
  margin-inline: auto;
}

.discord-community-card:hover {
  border-color: rgba(88, 101, 242, 0.45);
  box-shadow: 0 18px 40px -26px rgba(88, 101, 242, 0.8);
  transform: translateY(-1px);
}

.discord-community-card__head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.8rem;
}

.discord-community-card__icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(88, 101, 242, 0.35);
  border-radius: 0.875rem;
  background: rgba(88, 101, 242, 0.18);
  color: #c7cdff;
  font-size: 1.15rem;
}

.discord-community-card__icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discord-community-card__identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

.discord-community-card__name {
  overflow: hidden;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: var(--font-weight-heading);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-community-card__sub {
  min-height: 1.15rem;
}

.discord-community-card__meta,
.discord-community-card__meta-item {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 55%, transparent);
  font-size: 0.75rem;
  line-height: 1.35;
}

.discord-community-card__meta {
  gap: 0.3rem 0.9rem;
}

.discord-community-card__meta strong {
  color: rgb(var(--cl-t-primary));
  font-weight: 600;
}

.discord-community-card__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #23a55a;
  box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.18);
}

.discord-community-card__fallback,
.discord-community-card__loading,
.discord-community-card__offline {
  margin: 0;
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 48%, transparent);
  font-size: 0.75rem;
  line-height: 1.5;
}

.discord-community-card__members {
  display: flex;
  min-width: 0;
  align-items: center;
  min-height: 1.85rem;
}

.discord-community-card__avatar {
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  margin-inline-start: -0.5rem;
  border: 2px solid color-mix(in srgb, rgb(var(--cl-card)) 90%, #000);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  object-fit: cover;
  transition: transform 180ms ease;
}

.discord-community-card__avatar:first-child {
  margin-inline-start: 0;
}

.discord-community-card__avatar:hover {
  z-index: 1;
  transform: translateY(-2px);
}

.discord-community-card__more {
  display: inline-flex;
  height: 1.85rem;
  align-items: center;
  margin-inline-start: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0 0.55rem;
  background: rgba(255, 255, 255, 0.06);
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 65%, transparent);
  font-size: 0.6875rem;
  font-weight: 600;
}

.discord-community-card__cta {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid #5865f2;
  border-radius: 0.65rem;
  padding: 0.6rem 1rem;
  background: #5865f2;
  box-shadow: 0 10px 26px -16px rgba(88, 101, 242, 0.9);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.discord-community-card__cta:hover {
  border-color: #4752c4;
  background: #4752c4;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .hero-section .hero-layout {
    gap: 2rem;
  }

  .hero-section .hero-actions .ui-btn {
    flex: 1 1 10rem;
  }

  .discord-community-card {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discord-community-card,
  .discord-community-card__cta,
  .discord-community-card__avatar {
    transition: none;
  }

  .discord-community-card:hover,
  .discord-community-card__cta:hover,
  .discord-community-card__avatar:hover {
    transform: none;
  }
}

/* ================================================
   STOREFRONT SURFACE
   The page owns the background; individual sections
   stay visually open instead of reading as nested cards.
   ================================================ */
.site-container {
  position: relative;
  z-index: 1;
}

.site-background,
.site-background__image,
.site-background__grid,
.site-background__aurora,
.site-background__orbs,
.site-background__scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.site-background {
  z-index: 0;
  overflow: hidden;
  background: rgb(var(--cl-background));
}

.site-background__image {
  background-position: center;
  background-size: cover;
  opacity: 0.34;
  filter: saturate(0.82) contrast(0.96);
}

.site-background__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--cl-background), 0.42), rgba(var(--cl-background), 0.88) 72%, rgb(var(--cl-background)) 100%);
}

.site-background__grid {
  opacity: 0.22;
  background-image:
    linear-gradient(to right, rgba(var(--cl-t-primary), 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--cl-t-primary), 0.055) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.65) 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.65) 58%, transparent 100%);
}

.site-background__aurora {
  inset: -28%;
  opacity: 0.22;
  background:
    radial-gradient(35% 32% at 18% 18%, color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent), transparent 72%),
    radial-gradient(30% 36% at 82% 28%, color-mix(in srgb, rgb(var(--cl-accent)) 30%, transparent), transparent 72%),
    radial-gradient(28% 30% at 52% 86%, color-mix(in srgb, rgb(var(--cl-accent)) 22%, transparent), transparent 72%);
  filter: blur(72px);
  animation: siteAuroraDrift 22s ease-in-out infinite alternate;
}

@keyframes siteAuroraDrift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 4%, 0) scale(1.02); }
}

.site-background__orbs {
  opacity: 0.32;
}

.site-background__orbs span {
  position: absolute;
  display: block;
  width: clamp(12rem, 22vw, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, rgb(var(--cl-accent)) 35%, transparent), transparent 68%);
  filter: blur(20px);
  animation: siteOrbFloat 18s ease-in-out infinite;
}

.site-background__orbs span:nth-child(1) { top: 8%; left: -5%; animation-delay: -4s; }
.site-background__orbs span:nth-child(2) { top: 42%; right: -8%; width: clamp(10rem, 18vw, 20rem); animation-delay: -11s; }
.site-background__orbs span:nth-child(3) { bottom: -12%; left: 34%; width: clamp(9rem, 16vw, 18rem); animation-delay: -16s; }

@keyframes siteOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(3vw, 2rem, 0); }
}

.site-background__scanlines {
  opacity: 0.07;
  background: repeating-linear-gradient(180deg, transparent 0, transparent 5px, rgba(var(--cl-t-primary), 0.12) 6px, transparent 7px);
  background-size: 100% 14px;
  animation: siteScanlineMove 12s linear infinite;
}

@keyframes siteScanlineMove {
  from { background-position: 0 0; }
  to { background-position: 0 140px; }
}

/* ================================================
   HERO — open composition, no outer card or pills
   ================================================ */
.hero-section {
  width: 100vw;
  max-width: none;
  margin-top: 0;
  margin-bottom: clamp(3rem, 8vw, 7rem);
  margin-left: calc(50% - 50vw);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.hero-section::before {
  display: none;
}

.hero-section--has-backdrop {
  background: linear-gradient(180deg, rgba(var(--cl-background), 0.05), rgba(var(--cl-background), 0.42) 68%, rgb(var(--cl-background)) 100%) !important;
}

.hero-section .hero-backdrop {
  opacity: 0.48;
  filter: saturate(0.72) contrast(0.94);
}

.hero-section .hero-backdrop-overlay {
  background: linear-gradient(180deg, rgba(var(--cl-background), 0.2), rgba(var(--cl-background), 0.56) 58%, rgb(var(--cl-background)) 100%);
}

.hero-section .hero-layout {
  width: 100%;
  max-width: var(--theme-content-width);
  margin-inline: auto;
}

.hero-section .hero-grid-bg {
  display: none;
}

.hero-section .hero-eyebrow {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.hero-section .hero-eyebrow__mark {
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: rgb(var(--cl-accent));
  box-shadow: 0 0 16px color-mix(in srgb, rgb(var(--cl-accent)) 80%, transparent);
}

.hero-section .hero-stats--pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  grid-template-columns: none;
}

.hero-section .hero-stats--pills .hero-stat {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 58%),
    color-mix(in srgb, rgb(var(--cl-card)) 62%, transparent);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.hero-section .hero-stats--pills .hero-stat:hover {
  transform: translateY(-0.1rem);
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 34%, var(--theme-line));
}

.hero-section .hero-stats--pills .hero-stat__value { font-size: 1.02rem; }

.hero-section .hero-stats--pills .hero-stat__label {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ================================================
   SECTION HEADINGS — quiet editorial hierarchy
   ================================================ */
.section-heading {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.75rem;
}

.section-heading--center {
  align-items: center;
  text-align: center;
}

.section-heading__eyebrow {
  color: color-mix(in srgb, rgb(var(--cl-accent)) 82%, rgb(var(--cl-t-primary)));
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.section-heading__title {
  margin: 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

/* ================================================
   FOOTER — interactive, lightweight, responsive
   ================================================ */
.site-footer {
  margin-top: clamp(3rem, 8vw, 7rem);
  border-top: 1px solid color-mix(in srgb, rgb(var(--cl-t-primary)) 10%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--cl-card)) 22%, transparent), transparent);
}

.site-footer__inner {
  width: 100%;
  max-width: var(--theme-content-width);
  margin-inline: auto;
}

.site-footer__top,
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-footer__top {
  padding-block: 2rem;
}

.site-footer__brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  color: rgb(var(--cl-t-primary));
  text-decoration: none;
}

.site-footer__logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  object-fit: cover;
}

.site-footer__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--font-weight-heading);
  white-space: nowrap;
}

.site-footer__tagline {
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 44%, transparent);
  font-size: 0.75rem;
}

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

.site-social {
  --social-color: rgb(var(--cl-accent));
  display: inline-flex;
  width: 2.45rem;
  max-width: 2.45rem;
  height: 2.45rem;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-t-primary)) 10%, transparent);
  border-radius: 999px;
  padding-inline: 0.7rem;
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 62%, transparent);
  text-decoration: none;
  transition: max-width 260ms ease, border-color 200ms ease, background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.site-social:hover,
.site-social:focus-visible {
  max-width: 9rem;
  border-color: color-mix(in srgb, var(--social-color) 55%, transparent);
  background: color-mix(in srgb, var(--social-color) 12%, transparent);
  color: var(--social-color);
  outline: none;
  transform: translateY(-2px);
}

.site-social__icon {
  display: inline-flex;
  width: 1rem;
  flex: 0 0 1rem;
  justify-content: center;
  font-size: 0.95rem;
}

.site-social__label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-0.35rem);
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  transition: max-width 260ms ease, opacity 180ms ease, transform 260ms ease;
}

.site-social:hover .site-social__label,
.site-social:focus-visible .site-social__label {
  max-width: 6rem;
  opacity: 1;
  transform: translateX(0);
}

.site-footer__bottom {
  border-top: 1px solid color-mix(in srgb, rgb(var(--cl-t-primary)) 8%, transparent);
  padding-block: 1rem 1.5rem;
}

.site-footer__copyright,
.site-footer__link {
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 46%, transparent);
  font-size: 0.72rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.9rem 1.25rem;
}

.site-footer__link {
  transition: color 180ms ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: rgb(var(--cl-t-primary));
}

@media (max-width: 640px) {
  .hero-section {
    margin-bottom: 3.5rem;
  }

  .hero-section .hero-layout {
    padding-inline: 1.25rem;
  }

  .site-footer__top,
  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__tagline {
    display: none;
  }

  .site-footer__socials,
  .site-footer__links {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-background__aurora,
  .site-background__orbs span,
  .site-background__scanlines,
  .site-social,
  .site-social__label {
    animation: none;
    transition: none;
  }
}

/* Final token-only overrides for shared status, community and social surfaces.
   They replace any component-specific brand constants with editor-controlled
   palette values without changing the functionality of those components. */
.status-card {
  border-color: transparent;
  background: color-mix(in srgb, rgb(var(--cl-card)) 58%, transparent);
}

.status-card:hover,
.status-card:focus-visible {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 38%, var(--theme-line));
  background: var(--theme-surface-raised);
}

.hero-discord,
.discord-community-card {
  border-color: var(--theme-line);
  background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--cl-accent)) 16%, transparent), transparent 58%), var(--theme-surface);
}

.hero-discord:hover,
.discord-community-card:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 46%, var(--theme-line));
  box-shadow: 0 1.2rem 2.5rem -1.8rem color-mix(in srgb, rgb(var(--cl-accent)) 48%, transparent);
}

.hero-discord__icon,
.discord-community-card__icon {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 42%, var(--theme-line));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 16%, transparent);
  color: rgb(var(--cl-t-accent));
}

.hero-discord__dot,
.discord-community-card__dot {
  background: rgb(var(--cl-accent));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, rgb(var(--cl-accent)) 18%, transparent);
}

.hero-discord__avatar,
.discord-community-card__avatar {
  border-color: color-mix(in srgb, rgb(var(--cl-card)) 88%, rgb(var(--cl-background)));
  background: color-mix(in srgb, rgb(var(--cl-t-primary)) 7%, transparent);
}

.hero-discord__more,
.discord-community-card__more {
  border-color: var(--theme-line);
  background: color-mix(in srgb, rgb(var(--cl-t-primary)) 7%, transparent);
}

.discord-community-card__banner {
  margin: -1rem -1.1rem 0;
  aspect-ratio: var(--discord-banner-ratio, 21/9);
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
  background: color-mix(in srgb, var(--theme-surface-raised) 70%, transparent);
}
.discord-community-card__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-discord__cta,
.discord-community-card__cta {
  border-color: rgb(var(--cl-accent));
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-t-accent));
  box-shadow: 0 0.75rem 1.8rem -1.1rem color-mix(in srgb, rgb(var(--cl-accent)) 72%, transparent);
}

.hero-discord__cta:hover,
.discord-community-card__cta:hover {
  border-color: rgb(var(--cl-accent));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 78%, rgb(var(--cl-card)));
}

.site-social { --social-color: rgb(var(--cl-accent)); }
.site-social--discord,
.site-social--telegram,
.site-social--instagram,
.site-social--tiktok,
.site-social--youtube { --social-color: rgb(var(--cl-accent)); }

.document-surface,
.article-surface {
  border-color: var(--theme-line) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-surface) !important;
}

.article-surface__header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--theme-line);
}

.article-surface__title {
  margin: 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
}

.article-surface__image {
  border-radius: var(--theme-radius) !important;
  border: 1px solid var(--theme-line);
}

/* =================================================
   EDITOR-MANAGED CONTENT MODULES
================================================= */
.module-section {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
  padding-block: var(--theme-section-space);
}

.module-section__inner { width: 100%; }

.module-heading {
  max-width: 44rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.module-heading--center { margin-inline: auto; text-align: center; }

.module-heading__eyebrow {
  display: inline-block;
  color: rgb(var(--cl-accent));
  font-size: 0.7rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.module-heading__title {
  margin: 0.55rem 0 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
}

.module-heading__description {
  margin: 0.9rem 0 0;
  color: var(--theme-muted);
  line-height: 1.7;
  text-wrap: balance;
}

.feature-grid__items,
.stats-section__grid,
.testimonial-showcase__grid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

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

.feature-card,
.testimonial-card,
.cta-banner__surface,
.comparison-table,
.trust-badge {
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
}

.feature-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: clamp(1.1rem, 2vw, 1.55rem);
  transition: transform var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease;
}

.feature-card:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line));
  background: var(--theme-surface-raised);
  transform: translateY(var(--theme-hover-lift-negative));
}

.feature-card__icon,
.steps-section__icon {
  display: inline-grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 28%, var(--theme-line));
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 11%, transparent);
  color: rgb(var(--cl-accent));
}

.feature-card__title { margin: 1.15rem 0 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: 1.05rem; font-weight: var(--font-weight-heading); }
.feature-card__description { margin: 0.6rem 0 0; color: var(--theme-muted); font-size: 0.9rem; line-height: 1.65; }
.feature-card__link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: auto; padding-top: 1.15rem; color: rgb(var(--cl-accent)); font-size: 0.82rem; font-weight: var(--font-weight-button); text-decoration: none; }
.feature-card__link i { transition: transform var(--theme-motion-duration) ease; }
.feature-card__link:hover i { transform: translateX(var(--theme-hover-lift)); }

.stats-section__grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.stats-section__item { display: grid; gap: 0.3rem; padding: clamp(1.1rem, 2vw, 1.5rem); border-inline-start: 1px solid var(--theme-line); }
.stats-section__item:first-child { border-inline-start: 0; }
.stats-section__item > i { color: rgb(var(--cl-accent)); font-size: 0.9rem; }
.stats-section__item strong { color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: var(--font-weight-heading); letter-spacing: -0.05em; }
.stats-section__item span { color: var(--theme-subtle); font-size: 0.72rem; font-weight: var(--font-weight-button); letter-spacing: 0.1em; text-transform: uppercase; }

.steps-section__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.steps-section__item { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 1rem; padding: clamp(1rem, 2vw, 1.45rem); border-bottom: 1px solid var(--theme-line); }
.steps-section__number { color: rgb(var(--cl-accent)); font-family: var(--font-heading); font-size: 0.78rem; font-weight: var(--font-weight-heading); letter-spacing: 0.12em; }
.steps-section__item h3 { margin: 0.1rem 0 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: 1.05rem; font-weight: var(--font-weight-heading); }
.steps-section__item p { margin: 0.45rem 0 0; color: var(--theme-muted); font-size: 0.9rem; line-height: 1.6; }

.trust-badges__title { margin: 0 0 1rem; color: var(--theme-subtle); font-size: 0.72rem; font-weight: var(--font-weight-button); letter-spacing: 0.12em; text-transform: uppercase; }
.trust-badges__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.65rem; }
.trust-badge { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; }
.trust-badge > i { color: rgb(var(--cl-accent)); }
.trust-badge span { display: grid; gap: 0.1rem; }
.trust-badge strong { color: rgb(var(--cl-t-primary)); font-size: 0.84rem; }
.trust-badge small { color: var(--theme-subtle); font-size: 0.72rem; }

/* Payment Methods Rail — a continuously-scrolling (or static) row of the
   store's actually-enabled payment methods. Shop-owner-configured rather
   than auto-detected, since the platform doesn't expose live payment
   gateway state to themes; the enabled toggle per item is what keeps this
   honest about what the store really accepts. */
.payment-rail__marquee { position: relative; }
.payment-rail__viewport {
  overflow: hidden;
  padding-block: 0.5rem;
  margin-block: -0.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
.payment-rail__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: payment-rail-scroll var(--payment-rail-duration, 32s) linear infinite;
}
.payment-rail__group { display: flex; flex-shrink: 0; gap: clamp(0.75rem, 2vw, 1.25rem); padding-right: clamp(0.75rem, 2vw, 1.25rem); }
@keyframes payment-rail-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.payment-rail__marquee[data-pause-on-hover="true"]:hover .payment-rail__track,
.payment-rail__marquee[data-pause-on-hover="true"]:focus-within .payment-rail__track { animation-play-state: paused; }

.payment-rail__badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: var(--theme-surface);
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 85%, transparent);
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  white-space: nowrap;
  transition: border-color 200ms ease, transform 200ms ease, background-color 200ms ease;
}
.payment-rail__badge:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 6%, var(--theme-surface));
  transform: translateY(-0.1rem);
}
.payment-rail__icon { display: inline-flex; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; align-items: center; justify-content: center; color: rgb(var(--cl-accent)); font-size: 1.05rem; }
.payment-rail__icon img { width: 100%; height: 100%; object-fit: contain; }
.payment-rail__label { line-height: 1; }

.payment-rail__static { display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 1.6vw, 1rem); }
.payment-rail__static--center { justify-content: center; }

@media (max-width: 640px) {
  .payment-rail__badge { padding: 0.55rem 0.9rem; font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .payment-rail__track { animation: none; }
  .payment-rail__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.comparison-table { overflow: hidden; }
.comparison-table__head,
.comparison-table__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(7rem, 1fr) minmax(7rem, 1fr); gap: 1rem; align-items: center; padding: 1rem clamp(0.9rem, 2vw, 1.35rem); }
.comparison-table__head { border-bottom: 1px solid var(--theme-line); color: var(--theme-subtle); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.comparison-table__head strong { color: rgb(var(--cl-t-primary)); font-size: inherit; }
.comparison-table__row + .comparison-table__row { border-top: 1px solid var(--theme-line); }
.comparison-table__row > span:first-child { color: rgb(var(--cl-t-primary)); font-weight: var(--font-weight-button); }
.comparison-table__row strong { color: rgb(var(--cl-accent)); }
.comparison-table__row > span:last-child { color: var(--theme-muted); }

.testimonial-showcase__grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.testimonial-card { display: flex; min-height: 100%; flex-direction: column; margin: 0; padding: clamp(1.1rem, 2vw, 1.5rem); }
.testimonial-card__rating { display: inline-flex; gap: 0.2rem; color: rgb(var(--cl-accent)); font-size: 0.78rem; }
.testimonial-card blockquote { margin: 1rem 0 1.4rem; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: 1.05rem; font-weight: var(--font-weight-heading); line-height: 1.55; }
.testimonial-card figcaption { display: flex; align-items: center; gap: 0.65rem; margin-top: auto; }
.testimonial-card figcaption img { width: 2.25rem; height: 2.25rem; border: 1px solid var(--theme-line); border-radius: 50%; object-fit: cover; }
.testimonial-card figcaption span { display: grid; gap: 0.1rem; }
.testimonial-card figcaption strong { color: rgb(var(--cl-t-primary)); font-size: 0.8rem; }
.testimonial-card figcaption small { color: var(--theme-subtle); font-size: 0.72rem; }

.cta-banner__surface { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(1.35rem, 4vw, 3rem); background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--cl-accent)) 16%, transparent), var(--theme-surface)); }
.cta-banner__surface--center { flex-direction: column; text-align: center; }
.cta-banner__surface h2 { margin: 0.45rem 0 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: var(--font-weight-heading); letter-spacing: -0.045em; }
.cta-banner__surface p { max-width: 42rem; margin: 0.8rem 0 0; color: var(--theme-muted); line-height: 1.65; }
.cta-banner__button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.55rem; padding: 0.8rem 1rem; border: 1px solid rgb(var(--cl-accent)); border-radius: var(--theme-radius); background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent)); font-size: 0.84rem; font-weight: var(--font-weight-button); text-decoration: none; transition: transform var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease; }
.cta-banner__button:hover { background: color-mix(in srgb, rgb(var(--cl-accent)) 78%, rgb(var(--cl-card))); transform: translateY(var(--theme-hover-lift-negative)); }

/* Showcase Cards — polished image/description cards, or a before-after
   comparison slider variant reusing the same lag-free clip-path technique
   as the standalone Before/After Slider component (no transition on
   clip-path; will-change instead, so the drag tracks the cursor exactly). */
.showcase-cards__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.showcase-cards__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.showcase-cards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.showcase-cards__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .showcase-cards__grid--3, .showcase-cards__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .showcase-cards__grid { grid-template-columns: 1fr; }
}

.showcase-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 1.1);
  background: var(--theme-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease;
}
.showcase-card:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line));
  transform: translateY(var(--theme-hover-lift-negative));
  box-shadow: 0 1.2rem 2.4rem -1.8rem rgb(0 0 0 / 0.7);
}

.showcase-card__media { position: relative; aspect-ratio: var(--showcase-media-ratio, 4/3); overflow: hidden; background: color-mix(in srgb, var(--theme-surface-raised) 70%, transparent); }
.showcase-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--theme-motion-duration) ease; }
.showcase-card:hover .showcase-card__image { transform: scale(1.03); }

.showcase-card__body { display: grid; gap: 0.4rem; padding: 1.1rem 1.25rem 1.3rem; }
.showcase-card__title { margin: 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: 1rem; font-weight: var(--font-weight-heading); }
.showcase-card__description { margin: 0; color: var(--theme-muted); font-size: 0.82rem; line-height: 1.55; }

.showcase-card__media--compare { isolation: isolate; }
.showcase-card__compare-before { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-right: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 68%, white); will-change: clip-path; }
.showcase-card__compare-before .showcase-card__image { width: 100%; max-width: none; }
.showcase-card__compare-tag { position: absolute; top: 0.75rem; z-index: 3; padding: 0.32rem 0.55rem; border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 30%, transparent); border-radius: 999px; background: rgba(16, 16, 18, 0.78); color: rgb(var(--cl-t-primary)); font-size: 0.62rem; font-weight: var(--font-weight-button); letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(0.5rem); }
.showcase-card__compare-tag--before { left: 0.75rem; }
.showcase-card__compare-tag--after { right: 0.75rem; }
.showcase-card__compare-handle { position: absolute; z-index: 4; top: 0; bottom: 0; width: 2px; background: rgb(var(--cl-accent)); box-shadow: 0 0 1rem color-mix(in srgb, rgb(var(--cl-accent)) 70%, transparent); transform: translateX(-1px); pointer-events: none; }
.showcase-card__compare-handle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 2.4rem; height: 2.4rem; border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 76%, white); border-radius: 50%; background: color-mix(in srgb, rgb(var(--cl-accent)) 18%, #101012); box-shadow: 0 0.5rem 1.2rem -0.6rem rgb(0 0 0 / 0.9); transform: translate(-50%, -50%); }
.showcase-card__compare-handle span { position: absolute; top: 50%; width: 0.3rem; height: 0.3rem; border-top: 2px solid rgb(var(--cl-t-primary)); border-left: 2px solid rgb(var(--cl-t-primary)); }
.showcase-card__compare-handle span:first-child { left: calc(50% - 0.45rem); transform: translateY(-50%) rotate(-45deg); }
.showcase-card__compare-handle span:last-child { left: calc(50% + 0.15rem); transform: translateY(-50%) rotate(135deg); }
.showcase-card__compare-range { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; appearance: none; background: transparent; opacity: 0; }
.showcase-card__compare-range:focus-visible { opacity: 1; outline: 2px solid rgb(var(--cl-accent)); outline-offset: -3px; }

[data-reveal] { opacity: 0; transform: translateY(0.8rem); transition: opacity 520ms ease, transform 520ms ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .feature-card:hover, .cta-banner__button:hover { transform: none; } }
@media (max-width: 760px) { .feature-grid__items--2, .feature-grid__items--3, .feature-grid__items--4 { grid-template-columns: 1fr; } .stats-section__item { border-inline-start: 0; border-top: 1px solid var(--theme-line); } .stats-section__item:first-child { border-top: 0; } .steps-section__item { grid-template-columns: auto minmax(0, 1fr); } .steps-section__number { grid-column: 1; } .steps-section__icon { grid-column: 1; grid-row: 2; } .steps-section__item > div { grid-column: 2; grid-row: 1 / span 2; } .comparison-table__head { display: none; } .comparison-table__row { grid-template-columns: 1fr; gap: 0.35rem; } .comparison-table__row > span:first-child { margin-bottom: 0.4rem; } .comparison-table__row strong::before { content: '✓ '; } .cta-banner__surface { align-items: flex-start; flex-direction: column; } .cta-banner__surface--center { align-items: center; } }

/* =================================================
   REUSABLE EDITOR MEDIA + SUPPORT MODULES
================================================= */
.premium-text-media .module-section__inner,
.before-after-block .module-section__inner { width: 100%; }

.premium-text-media .text-media-block__surface {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--text-media-border);
  border-radius: var(--theme-radius);
  background: var(--text-media-surface);
  box-shadow: 0 1.5rem 3rem -2.5rem rgba(0, 0, 0, 0.8);
}

.premium-text-media .text-media-block__surface--plain { padding-inline: 0; border-color: transparent; background: transparent; box-shadow: none; }
.premium-text-media .text-media-block__content { display: flex; align-items: stretch; gap: clamp(1.5rem, 4vw, 4rem); }
.premium-text-media .text-media-block__copy { display: flex; min-width: 0; flex: 1 1 0%; flex-direction: column; justify-content: center; padding: clamp(0.5rem, 2vw, 1.5rem); }
.premium-text-media .text-media-block__copy--center { align-items: center; }
.text-media-block__badge,
.cta-banner__badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin-top: 0.8rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--text-media-accent, rgb(var(--cl-accent))) 30%, var(--theme-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-media-accent, rgb(var(--cl-accent))) 9%, transparent);
  color: var(--text-media-accent, rgb(var(--cl-accent)));
  font-size: 0.68rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.premium-text-media .text-media-block__title { margin: 0.75rem 0 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: clamp(1.65rem, 3.2vw, 3rem); font-weight: var(--font-weight-heading); letter-spacing: -0.045em; line-height: 1.05; text-wrap: balance; }
.premium-text-media .text-media-block__description { max-width: 38rem; margin: 1rem 0 0; color: var(--theme-muted); font-size: 1rem; line-height: 1.7; }
.premium-text-media .text-media-block__supporting { margin: 0.9rem 0 0; color: var(--theme-subtle); font-size: 0.82rem; line-height: 1.55; }
.premium-text-media .text-media-block__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 1.5rem; }
.premium-text-media .text-media-block__media { display: flex; min-width: 0; flex: 1 1 0%; align-items: stretch; justify-content: center; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--text-media-border); border-radius: max(0.6rem, var(--theme-radius)); background: color-mix(in srgb, var(--text-media-surface) 70%, #000); }
.premium-text-media .text-media-block__image,
.text-video-block__player { display: block; width: 100%; height: 100%; min-height: 100%; border: 0; object-position: center; }
.premium-text-media .text-media-block__media--empty { min-height: 15rem; align-items: center; color: var(--theme-subtle); font-size: 1.4rem; }
.text-video-block__media { background: #09090b; }
.text-video-block__player { aspect-ratio: 16 / 9; object-fit: cover; }

.before-after__frame { overflow: hidden; padding: clamp(0.45rem, 1vw, 0.75rem); border: 1px solid var(--before-after-border); border-radius: var(--theme-radius); background: var(--before-after-surface); box-shadow: 0 1.5rem 3rem -2.5rem rgba(0, 0, 0, 0.85); }
.before-after__viewport { position: relative; overflow: hidden; isolation: isolate; border-radius: max(0.55rem, calc(var(--theme-radius) - 0.2rem)); background: #09090b; }
.before-after__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.before-after__image--after { z-index: 0; }
.before-after__before { position: absolute; z-index: 1; inset: 0; overflow: hidden; border-right: 1px solid color-mix(in srgb, var(--before-after-accent) 68%, white); will-change: clip-path; }
.before-after__before .before-after__image { width: 100%; max-width: none; }
.before-after__label { position: absolute; z-index: 3; top: 1rem; padding: 0.4rem 0.6rem; border: 1px solid color-mix(in srgb, var(--before-after-accent) 30%, transparent); border-radius: 999px; background: var(--before-after-label-bg); color: var(--before-after-label-text); font-size: 0.68rem; font-weight: var(--font-weight-button); letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(0.6rem); }
.before-after__label--before { left: 1rem; }
.before-after__label--after { right: 1rem; }
.before-after__handle { position: absolute; z-index: 4; top: 0; bottom: 0; width: 2px; background: var(--before-after-accent); box-shadow: 0 0 1.25rem color-mix(in srgb, var(--before-after-accent) 70%, transparent); transform: translateX(-1px); pointer-events: none; }
.before-after__handle::before { position: absolute; top: 50%; left: 50%; width: 3.25rem; height: 3.25rem; border: 1px solid color-mix(in srgb, var(--before-after-accent) 76%, white); border-radius: 50%; background: color-mix(in srgb, var(--before-after-accent) 18%, #101012); box-shadow: 0 0.75rem 1.8rem -0.75rem rgba(0, 0, 0, 0.9); content: ''; transform: translate(-50%, -50%); }
.before-after__handle-icon { position: absolute; top: 50%; left: 50%; display: flex; gap: 0.28rem; width: 1.1rem; height: 0.7rem; align-items: center; justify-content: center; transform: translate(-50%, -50%); }
.before-after__handle-icon span { display: block; width: 0.34rem; height: 0.34rem; border-top: 2px solid var(--before-after-label-text); border-left: 2px solid var(--before-after-label-text); transform: rotate(-45deg); }
.before-after__handle-icon span + span { transform: rotate(135deg); }
.before-after__range { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; appearance: none; background: transparent; opacity: 0; }
.before-after__range:focus-visible { opacity: 1; outline: 2px solid var(--before-after-accent); outline-offset: -3px; }
.before-after__empty { display: flex; min-height: 15rem; align-items: center; justify-content: center; gap: 0.7rem; padding: 2rem; border: 1px dashed var(--before-after-border); border-radius: var(--theme-radius); color: var(--theme-muted); text-align: center; }
.before-after__empty i { color: var(--before-after-accent); }

.feature-card__image { width: 100%; height: 8rem; border-radius: max(0.55rem, calc(var(--theme-radius) - 0.2rem)); object-fit: cover; }
.feature-card__badge { width: fit-content; margin-top: 0.9rem; padding: 0.25rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, rgb(var(--cl-accent)) 11%, transparent); color: rgb(var(--cl-accent)); font-size: 0.65rem; font-weight: var(--font-weight-button); letter-spacing: 0.08em; text-transform: uppercase; }
.feature-grid .feature-card { background: var(--feature-card-background, var(--theme-surface)); border-color: var(--feature-card-border, var(--theme-line)); color: var(--feature-card-text, rgb(var(--cl-t-primary))); }
.trust-badges__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust-badges__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust-badges__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust-badge { background: var(--trust-card-background, var(--theme-surface)); border-color: var(--trust-card-border, var(--theme-line)); transition: transform var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease; }
.trust-badge:hover { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 42%, var(--theme-line)); background: var(--theme-surface-raised); transform: translateY(var(--theme-hover-lift-negative)); }
.trust-badge > img { width: 2rem; height: 2rem; border-radius: 0.55rem; object-fit: cover; }

.support-section__grid { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.support-section__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.support-section__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.support-section__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.support-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; min-height: 6rem; padding: 1rem 1.1rem; border: 1px solid var(--support-border); border-radius: var(--theme-radius); background: var(--support-surface); color: inherit; text-decoration: none; transition: transform var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease; }
.support-card:hover { border-color: color-mix(in srgb, var(--support-accent) 42%, var(--support-border)); background: var(--theme-surface-raised); transform: translateY(var(--theme-hover-lift-negative)); }
.support-card__icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid color-mix(in srgb, var(--support-accent) 28%, var(--support-border)); border-radius: 0.8rem; background: color-mix(in srgb, var(--support-accent) 10%, transparent); color: var(--support-accent); }
.support-card__body { display: grid; min-width: 0; gap: 0.25rem; }
.support-card__body strong { overflow: hidden; color: rgb(var(--cl-t-primary)); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.support-card__body span { color: var(--theme-muted); font-size: 0.77rem; line-height: 1.45; }
.support-card__arrow { color: var(--support-accent); transition: transform var(--theme-motion-duration) ease; }
.support-card:hover .support-card__arrow { transform: translateX(0.2rem); }

.faq-list__items { min-width: 0; }
.faq-list--split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 0.8fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; }
.faq-list__aside { display: grid; gap: 0.55rem; padding: 1.25rem; border: 1px solid var(--faq-border); border-radius: var(--theme-radius); background: color-mix(in srgb, var(--faq-accent) 8%, var(--faq-surface)); }
.faq-list__aside i { color: var(--faq-accent); font-size: 1.2rem; }
.faq-list__aside strong { color: var(--faq-question); font-family: var(--font-heading); }
.faq-list__aside span { color: var(--faq-answer); font-size: 0.82rem; line-height: 1.55; }
.premium-faq .faq-item { border-color: var(--faq-border); background: var(--faq-surface); }
.premium-faq .faq-item__question { color: var(--faq-question); }
.premium-faq .faq-item__answer { color: var(--faq-answer); }
.premium-faq .faq-item__icon { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid color-mix(in srgb, var(--faq-accent) 30%, var(--faq-border)); border-radius: 50%; color: var(--faq-accent); }
.premium-faq .faq-item__icon i { font-size: 0.7rem; transition: transform var(--theme-motion-duration) ease; }
.premium-faq .faq-item[open] .faq-item__icon i { transform: rotate(45deg); }

.cta-banner__surface { position: relative; overflow: hidden; background-image: linear-gradient(135deg, color-mix(in srgb, rgb(var(--cl-accent)) 16%, transparent), var(--theme-surface)), var(--cta-banner-bg-image); background-position: center; background-size: cover; }
.cta-banner__surface--has-media { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.cta-banner__media { width: clamp(4rem, 12vw, 8rem); height: clamp(4rem, 12vw, 8rem); overflow: hidden; border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 35%, var(--theme-line)); border-radius: max(0.7rem, var(--theme-radius)); }
.cta-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-banner__copy { min-width: 0; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
.cta-banner__button--secondary { border-color: var(--theme-line); background: color-mix(in srgb, var(--theme-surface) 70%, transparent); color: rgb(var(--cl-t-primary)); }

@media (max-width: 760px) {
  .premium-text-media .text-media-block__content { flex-direction: column !important; gap: 1rem; }
  .premium-text-media .text-media-block__copy { padding: 0.25rem; }
  .premium-text-media .text-media-block__media { flex-basis: auto; width: 100%; }
  .before-after__label { top: 0.65rem; font-size: 0.6rem; }
  .before-after__label--before { left: 0.65rem; }
  .before-after__label--after { right: 0.65rem; }
  .before-after__handle::before { width: 2.7rem; height: 2.7rem; }
  .support-section__grid--2, .support-section__grid--3, .support-section__grid--4, .trust-badges__grid--2, .trust-badges__grid--3, .trust-badges__grid--4 { grid-template-columns: 1fr; }
  .faq-list--split { grid-template-columns: 1fr; }
  .cta-banner__surface--has-media { grid-template-columns: 1fr; }
  .cta-banner__actions { width: 100%; }
  .cta-banner__actions .cta-banner__button { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .support-card, .support-card__arrow, .trust-badge, .premium-faq .faq-item__icon i { transition: none; }
  .support-card:hover, .trust-badge:hover { transform: none; }
}

/* =================================================
   HEADER & NAVIGATION
================================================= */
.storefront-header {
  position: relative;
  z-index: 30;
  margin-top: 0;
  border-block: 1px solid var(--theme-line);
  border-inline: 0;
  border-radius: 0;
  background: var(--theme-surface);
  box-shadow: none;
}

.storefront-header--sticky { position: sticky; top: 0.75rem; }
.storefront-header--solid { background: rgb(var(--cl-card)); }
.storefront-header--glass { -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); }
.storefront-header--transparent { background: color-mix(in srgb, rgb(var(--cl-card)) 34%, transparent); }
.storefront-header--borderless { border-color: transparent; }
.storefront-header__main { padding-block: 0.7rem !important; padding-inline: clamp(0.9rem, 2vw, 1.45rem); }
.storefront-header__logo--small { height: 1.75rem; }
.storefront-header__logo--medium { height: 2rem; }
.storefront-header__logo--large { height: 2.4rem; }

.storefront-header--centered .storefront-header__main { position: relative; }
.storefront-header--centered .storefront-header__main > :first-child { flex: 1; }
.storefront-header--centered .storefront-header__actions { flex: 1; justify-content: flex-end; }

.storefront-header__actions { gap: 0.45rem; }
.storefront-header__icon-action,
.storefront-header__menu-toggle {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, rgb(var(--cl-t-primary)) 4%, transparent);
  color: var(--theme-muted);
  text-decoration: none;
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease;
}

.storefront-header__icon-action:hover,
.storefront-header__menu-toggle:hover { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line)); color: rgb(var(--cl-t-primary)); }
.storefront-header__community,
.storefront-header__cta { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; padding-inline: 0.72rem; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); color: var(--theme-muted); font-size: 0.74rem; font-weight: var(--font-weight-button); text-decoration: none; }
.storefront-header__community:hover { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line)); color: rgb(var(--cl-t-primary)); }
.storefront-header__cta { border-color: rgb(var(--cl-accent)); background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent)); }
.storefront-header__cta:hover { background: color-mix(in srgb, rgb(var(--cl-accent)) 78%, rgb(var(--cl-card))); }

.storefront-header__nav { border-color: var(--theme-line); padding-inline: clamp(0.9rem, 2vw, 1.45rem); }
.storefront-header__nav > div { justify-content: center; }
.storefront-header__links { width: auto; justify-content: center; padding-block: 0.5rem !important; }
.storefront-header__actions :is(select, .choices__inner) { border-color: var(--theme-line); background: transparent; color: var(--theme-muted); }
.storefront-header .nav-link { border-radius: var(--theme-radius); }
.storefront-header .nav-link { padding: 0.42rem 0.68rem; font-size: 0.8rem; }
.storefront-header .nav-link.is-active { box-shadow: none; }

.storefront-header__mobile-panel { margin: 0.65rem; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: color-mix(in srgb, rgb(var(--cl-card)) 94%, transparent); box-shadow: 0 1.5rem 3rem -2rem color-mix(in srgb, rgb(var(--cl-background)) 92%, rgb(var(--cl-t-primary))); }
.storefront-header__mobile-links { display: grid; padding: 0.45rem; }
.storefront-header__mobile-links a,
.storefront-header__mobile-utility > :is(a, button) { display: flex; align-items: center; gap: 0.65rem; min-height: 2.8rem; padding-inline: 0.8rem; border-radius: var(--theme-radius); color: var(--theme-muted); font-size: 0.9rem; font-weight: var(--font-weight-button); text-align: start; text-decoration: none; }
.storefront-header__mobile-links a.is-active { background: color-mix(in srgb, rgb(var(--cl-accent)) 13%, transparent); color: rgb(var(--cl-accent)); }
.storefront-header__mobile-utility { display: grid; gap: 0.25rem; padding: 0.45rem; border-top: 1px solid var(--theme-line); }
.storefront-header__mobile-utility button { width: 100%; border: 0; background: transparent; cursor: pointer; }
.storefront-header__mobile-utility .storefront-header__mobile-cta { justify-content: space-between; background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent)); }
.storefront-header__mobile-selectors { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.7rem 0.9rem; border-top: 1px solid var(--theme-line); }

@media (max-width: 767px) {
  .storefront-header { margin-top: 0; border-inline: 1px solid var(--theme-line); border-radius: var(--theme-radius); }
  .storefront-header__nav { display: none; }
  .storefront-header > .flex.md\:hidden { display: none; }
}

@media (prefers-reduced-motion: reduce) { .storefront-header__icon-action, .storefront-header__menu-toggle { transition: none; } }

/* =================================================
   HOMEPAGE FINISH
   The hero stays content-first while its optional
   product wall is populated from real SellAuth items.
================================================= */
.page--shop .site-content > .components > .component:not(.hero-section) {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
}

.page--shop .site-content > .components > .component:not(.hero-section) > :is(.py-6, .py-8, .py-10, .py-12) {
  padding-block: var(--theme-section-space);
}

.page--shop .section-heading,
.page--shop .products-section-heading {
  margin-bottom: clamp(1.4rem, 3vw, 2.5rem);
}

.page--shop .section-heading__title,
.page--shop .products-section-heading h2,
.page--shop .feedbacks-heading {
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.04em;
}

.page--shop .feedbacks-heading,
.page--shop .products-section-heading h2 {
  border: 0;
  padding: 0;
}

.hero-section--with-wall .hero-layout {
  grid-template-columns: minmax(0, 0.86fr) minmax(20rem, 0.94fr);
  gap: clamp(2rem, 5vw, 5.5rem);
}

.hero-section--with-wall .hero-content {
  max-width: 40rem;
}

.hero-product-wall {
  position: relative;
  min-width: 0;
}

.hero-product-wall::before {
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, rgb(var(--cl-accent)) 26%, transparent), transparent 68%);
  content: '';
  filter: blur(2.25rem);
  opacity: var(--theme-motion);
}

.hero-product-wall__desktop {
  display: grid;
  height: clamp(25rem, 44vw, 35rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.55rem, 1vw, 0.9rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, currentColor 12%, currentColor 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, currentColor 12%, currentColor 88%, transparent);
  transform: perspective(70rem) rotateY(-10deg) rotateX(3deg) scale(1.02);
  transform-origin: center;
}

.hero-wall-column { overflow: hidden; }

.hero-wall-track {
  display: flex;
  gap: clamp(0.55rem, 1vw, 0.9rem);
  will-change: transform;
}

.hero-product-wall__desktop .hero-wall-track { flex-direction: column; }
.hero-wall-column--0 .hero-wall-track,
.hero-wall-column--2 .hero-wall-track { animation: heroWallDown var(--hero-wall-speed) linear infinite; }
.hero-wall-column--1 .hero-wall-track { animation: heroWallUp var(--hero-wall-speed) linear infinite; animation-delay: var(--hero-wall-delay); }

@keyframes heroWallUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes heroWallDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

.hero-wall-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, rgb(var(--cl-card)) 78%, transparent);
  color: rgb(var(--cl-t-primary));
  text-decoration: none;
  box-shadow: 0 1.1rem 2rem -1.7rem color-mix(in srgb, rgb(var(--cl-background)) 92%, rgb(var(--cl-t-primary)));
  transition: transform var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease;
}

.hero-wall-card:hover,
.hero-wall-card:focus-visible {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 50%, var(--theme-line));
  background: var(--theme-surface-raised);
  outline: none;
  transform: translateY(var(--theme-hover-lift-negative));
}

.hero-wall-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: color-mix(in srgb, rgb(var(--cl-t-primary)) 5%, transparent);
}

.hero-wall-card__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, rgb(var(--cl-background)) 40%, transparent), transparent 55%);
  content: '';
  pointer-events: none;
}

.hero-wall-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-wall-card__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: color-mix(in srgb, rgb(var(--cl-accent)) 72%, transparent);
}

.hero-wall-card__body {
  display: grid;
  gap: 0.18rem;
  padding: clamp(0.6rem, 1vw, 0.85rem);
}

.hero-wall-card__body strong,
.hero-wall-card__body > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-wall-card__body strong {
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: clamp(0.68rem, 1vw, 0.8rem);
  font-weight: var(--font-weight-heading);
}

.hero-wall-card__body > span {
  color: rgb(var(--cl-accent));
  font-size: clamp(0.62rem, 0.9vw, 0.72rem);
  font-weight: var(--font-weight-button);
}

.hero-product-wall:has(.hero-wall-card:hover, .hero-wall-card:focus-visible) .hero-wall-track {
  animation-play-state: paused;
}

.hero-product-wall__mobile { display: none; }

.page--shop .product-card,
.page--shop .categories-section a.block.h-full,
.page--shop .feedbacks-section .cursor-pointer > div {
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
}

.page--shop .product-card:hover,
.page--shop .categories-section a.block.h-full:hover,
.page--shop .feedbacks-section .cursor-pointer > div:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 42%, var(--theme-line));
  background: var(--theme-surface-raised);
}

@media (max-width: 1023px) {
  .hero-section--with-wall .hero-layout { grid-template-columns: 1fr; }
  .hero-section--with-wall .hero-content { max-width: 48rem; }
  .hero-product-wall__desktop { display: none; }
  .hero-product-wall__mobile {
    display: block;
    overflow: hidden;
    padding-block: 0.5rem;
    -webkit-mask-image: linear-gradient(to right, transparent, currentColor 7%, currentColor 93%, transparent);
            mask-image: linear-gradient(to right, transparent, currentColor 7%, currentColor 93%, transparent);
  }
  .hero-product-wall__mobile .hero-wall-track {
    width: max-content;
    animation: heroWallAcross var(--hero-wall-speed) linear infinite;
  }
  .hero-product-wall__mobile .hero-wall-card { width: clamp(9.5rem, 28vw, 13rem); }
}

@keyframes heroWallAcross {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-wall .hero-wall-track { animation: none !important; }
  .hero-wall-card { transition: none; }
  .hero-wall-card:hover,
  .hero-wall-card:focus-visible { transform: none; }
}

/* =================================================
   PRODUCT CATALOG
   Server-side filtering remains authoritative. Sorting
   enhances the currently displayed page without changing
   the platform's query contracts.
================================================= */
.catalog-page__inner {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
  padding-block: var(--theme-section-space);
}

.catalog-page__heading {
  display: grid;
  gap: 0.45rem;
  margin-bottom: clamp(1.5rem, 4vw, 3.25rem);
  text-align: center;
}

.catalog-page__eyebrow,
.catalog-page__result-count,
.catalog-page__sort-label > span {
  margin: 0;
  color: rgb(var(--cl-accent));
  font-size: 0.72rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.catalog-page__heading h1 {
  margin: 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.65rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.catalog-page__layout {
  display: grid;
  grid-template-columns: minmax(14rem, 17.5rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.catalog-filter-panel {
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  color: rgb(var(--cl-t-primary));
  box-shadow: 0 1rem 2.8rem -2.25rem color-mix(in srgb, rgb(var(--cl-background)) 88%, rgb(var(--cl-t-primary)));
}

.catalog-filter-panel__body {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--theme-line);
}

.catalog-filter-panel label {
  display: block;
  margin-bottom: 0.6rem;
  color: rgb(var(--cl-t-primary));
  font-size: 0.76rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.catalog-filter-panel__category {
  display: block;
  width: 100%;
  padding: 0.56rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--theme-radius);
  color: rgb(var(--cl-t-primary));
  font-size: 0.86rem;
  text-decoration: none;
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease;
}

.catalog-filter-panel__category:hover,
.catalog-filter-panel__category:focus-visible,
.catalog-filter-panel__category.is-active {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 34%, var(--theme-line));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent);
  color: rgb(var(--cl-t-primary));
  outline: none;
}

.catalog-filter-panel__input,
.catalog-page__sort {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, rgb(var(--cl-card)) var(--theme-surface-opacity), transparent);
  color: rgb(var(--cl-t-primary));
  font: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease;
}

.catalog-filter-panel__input {
  padding-inline: 0.8rem;
}

.catalog-filter-panel__input:focus,
.catalog-page__sort:focus {
  border-color: rgb(var(--cl-accent));
  background: var(--theme-surface-raised);
}

.catalog-filter-panel__actions {
  display: grid;
  gap: 0.65rem;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.catalog-filter-panel__apply,
.catalog-filter-panel__reset,
.catalog-page__filter-trigger {
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-radius: var(--theme-radius);
  font-size: 0.86rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  transition: transform var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease;
}

.catalog-filter-panel__apply,
.catalog-page__filter-trigger {
  border: 1px solid rgb(var(--cl-accent));
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-t-accent));
}

.catalog-filter-panel__reset {
  border: 1px solid var(--theme-line);
  background: transparent;
  color: rgb(var(--cl-t-primary));
}

.catalog-filter-panel__apply:hover,
.catalog-filter-panel__apply:focus-visible,
.catalog-page__filter-trigger:hover,
.catalog-page__filter-trigger:focus-visible,
.catalog-filter-panel__reset:hover,
.catalog-filter-panel__reset:focus-visible {
  border-color: rgb(var(--cl-accent));
  background: var(--theme-surface-raised);
  color: rgb(var(--cl-t-primary));
  outline: none;
  transform: translateY(var(--theme-hover-lift-negative));
}

.catalog-page__toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--theme-line);
}

.catalog-page__active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.catalog-page__active-filters span,
.catalog-page__active-filters a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding-inline: 0.55rem;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  color: rgb(var(--cl-t-primary));
  font-size: 0.75rem;
  text-decoration: none;
}

.catalog-page__active-filters a {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 45%, var(--theme-line));
  color: rgb(var(--cl-accent));
}

.catalog-page__sort-label {
  display: grid;
  width: min(100%, 14rem);
  gap: 0.4rem;
}

.catalog-page__sort { padding-inline: 0.75rem; }

/* Catalog keyword search — anchor target for the header search action
   (#products-search). scroll-margin keeps it clear of the sticky header. */
.catalog-page__search {
  display: grid;
  gap: 0.4rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  scroll-margin-top: clamp(5rem, 12vh, 9rem);
}

.catalog-page__search-label {
  margin: 0;
  color: rgb(var(--cl-accent));
  font-size: 0.72rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.catalog-page__search-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.catalog-page__search-row .catalog-filter-panel__input {
  min-width: 0;
  flex: 1 1 auto;
}

.catalog-page__search-submit {
  display: inline-flex;
  min-height: 2.8rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 1.1rem;
  border: 1px solid rgb(var(--cl-accent));
  border-radius: var(--theme-radius);
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-t-accent));
  font-size: 0.86rem;
  font-weight: var(--font-weight-button);
  transition: transform var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease;
}

.catalog-page__search-submit:hover,
.catalog-page__search-submit:focus-visible {
  background: var(--theme-surface-raised);
  color: rgb(var(--cl-t-primary));
  outline: none;
  transform: translateY(var(--theme-hover-lift-negative));
}

.catalog-page__search:target .catalog-filter-panel__input {
  border-color: rgb(var(--cl-accent));
  background: var(--theme-surface-raised);
}

@media (max-width: 479px) {
  .catalog-page__search-row { flex-direction: column; }
  .catalog-page__search-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-page__search-submit:hover,
  .catalog-page__search-submit:focus-visible {
    transform: none;
  }
}

.catalog-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.25rem);
}

.catalog-page__item { min-width: 0; }

.catalog-page__item .product-card {
  height: 100%;
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  box-shadow: none;
  transition: transform var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease;
}

.catalog-page__item .product-card:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 46%, var(--theme-line));
  background: var(--theme-surface-raised);
  box-shadow: 0 1.25rem 2.75rem -2.1rem color-mix(in srgb, rgb(var(--cl-background)) 82%, rgb(var(--cl-t-primary)));
  transform: translateY(var(--theme-hover-lift-negative));
}

@media (max-width: 1279px) {
  .catalog-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .catalog-page__layout { grid-template-columns: 1fr; }
  .catalog-page__mobile-tools { margin-bottom: 1rem; }
  .catalog-page__filter-trigger { width: 100%; }
}

@media (max-width: 639px) {
  .catalog-page__toolbar { align-items: stretch; flex-direction: column; }
  .catalog-page__sort-label { width: 100%; }
  .catalog-page__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-filter-panel__category,
  .catalog-filter-panel__input,
  .catalog-page__sort,
  .catalog-filter-panel__apply,
  .catalog-filter-panel__reset,
  .catalog-page__filter-trigger,
  .catalog-page__item .product-card { transition: none; }
  .catalog-filter-panel__apply:hover,
  .catalog-filter-panel__apply:focus-visible,
  .catalog-page__filter-trigger:hover,
  .catalog-page__filter-trigger:focus-visible,
  .catalog-filter-panel__reset:hover,
  .catalog-filter-panel__reset:focus-visible,
  .catalog-page__item .product-card:hover { transform: none; }
}

/* Reviews use a quiet editorial layout; expanding a card is deliberately
   keyboard-accessible and never changes the source review content. */
.review-showcase__inner {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
  padding-block: var(--theme-section-space);
}

.review-showcase__heading {
  display: grid;
  gap: 0.45rem;
  max-width: 40rem;
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

.review-showcase__eyebrow {
  margin: 0;
  color: rgb(var(--cl-accent));
  font-size: 0.72rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.review-showcase .feedbacks-heading {
  margin: 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.8rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.05em;
  line-height: 1;
}

.review-showcase__controls {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 1.25rem;
}

.review-showcase__controls .order-select,
.review-showcase__controls .choices__inner {
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  color: rgb(var(--cl-t-primary));
}

/* Button-group variant of the reviews sorting control
   (feedbacks -> "Sort Reviews By" = buttons). */
.review-showcase__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.8rem;
}

.review-showcase__sort-label {
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 80%, transparent);
  font-size: 0.875rem;
  line-height: 1.2;
}

.review-showcase__sort-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.review-showcase__sort-button {
  display: inline-flex;
  min-height: 2.3rem;
  align-items: center;
  justify-content: center;
  padding-inline: 0.9rem;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: var(--theme-surface);
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 85%, transparent);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  line-height: 1.1;
  cursor: pointer;
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease;
}

.review-showcase__sort-button:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 46%, var(--theme-line));
  background: var(--theme-surface-raised);
  color: rgb(var(--cl-t-primary));
}

.review-showcase__sort-button:focus-visible {
  outline: 2px solid rgb(var(--cl-accent));
  outline-offset: 2px;
}

.review-showcase__sort-button.is-active {
  border-color: rgb(var(--cl-accent));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 14%, var(--theme-surface));
  color: rgb(var(--cl-accent));
  cursor: default;
}

@media (max-width: 640px) {
  .review-showcase__controls--buttons {
    justify-content: flex-start;
  }

  .review-showcase__controls--buttons .review-showcase__sort,
  .review-showcase__controls--buttons .review-showcase__sort-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .review-showcase__sort-button {
    flex: 1 1 8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-showcase__sort-button {
    transition: none;
  }
}

.review-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.25rem);
}

.feedback-card { min-width: 0; outline: none; }

/* Neutral SaaS surface. The rating never colours the card — only the stars.
   One hairline border, one soft resting shadow, one calm hover lift. */
.feedback-card__surface {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 12rem;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  color: rgb(var(--cl-t-primary));
  box-shadow:
    0 1px 2px -1px color-mix(in srgb, rgb(var(--cl-background)) 55%, #000),
    0 10px 26px -22px color-mix(in srgb, rgb(var(--cl-background)) 70%, #000);
  transition: transform var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease;
}

.feedback-card:hover .feedback-card__surface,
.feedback-card:focus-visible .feedback-card__surface {
  border-color: color-mix(in srgb, rgb(var(--cl-t-primary)) 15%, var(--theme-line));
  background: var(--theme-surface-raised);
  box-shadow:
    0 2px 4px -2px color-mix(in srgb, rgb(var(--cl-background)) 60%, #000),
    0 18px 38px -26px color-mix(in srgb, rgb(var(--cl-background)) 78%, #000);
  transform: translateY(var(--theme-hover-lift-negative));
}

/* Keyboard focus stays on the editor accent — an a11y affordance, not a
   rating signal, so it is identical for every card. */
.feedback-card:focus-visible .feedback-card__surface {
  outline: 2px solid color-mix(in srgb, rgb(var(--cl-accent)) 62%, transparent);
  outline-offset: 2px;
}

.feedback-card__body {
  padding: clamp(1rem, 2.2vw, 1.35rem);
}

.feedback-card__message {
  margin: 0;
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 86%, transparent);
  font-size: 0.905rem;
  line-height: 1.62;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}


/* Collapsed cards clamp to three lines. Tailwind's `truncate` is a
   single-line ellipsis, so a multi-line review lost all but its first
   line; built.css only ships line-clamp-2, so the 3-line variant is
   defined here rather than requiring a Tailwind rebuild. */
.feedback-card__message--clamped,
.feedback-card__reply-copy--clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.feedback-card__image {
  width: 100%;
  max-height: 16rem;
  margin-top: 0.85rem;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  object-fit: cover;
}

.feedback-card__reply {
  margin-top: 1rem;
  padding: 0.85rem;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, rgb(var(--cl-card)) 48%, transparent);
}

.feedback-card__reply-copy {
  margin: 0;
  padding-left: 0.65rem;
  border-left: 2px solid rgb(var(--cl-accent));
  color: var(--theme-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.feedback-card__footer {
  padding: 0.72rem clamp(1rem, 2.2vw, 1.35rem);
  border-top: 1px solid var(--theme-line);
  background: color-mix(in srgb, rgb(var(--cl-t-primary)) 3%, transparent);
  color: var(--theme-muted);
  font-size: 0.735rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-showcase__footer-link {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

.review-showcase__view-all {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  padding-inline: 1rem;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  color: rgb(var(--cl-accent));
  font-size: 0.84rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease;
}

.review-showcase__view-all:hover,
.review-showcase__view-all:focus-visible {
  border-color: rgb(var(--cl-accent));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
  outline: none;
  transform: translateY(var(--theme-hover-lift-negative));
}

@media (max-width: 1279px) { .review-showcase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .review-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .review-showcase__grid { grid-template-columns: 1fr; } }

/* Mobile: cards shrink to content instead of holding a desktop min-height,
   and the resting shadow flattens so stacked cards do not muddy each other. */
@media (max-width: 599px) {
  .feedback-card__surface {
    min-height: 0;
    box-shadow: 0 1px 2px -1px color-mix(in srgb, rgb(var(--cl-background)) 55%, #000);
  }
  .feedback-card__body { padding: 0.95rem; }
  .feedback-card__footer { padding: 0.65rem 0.95rem; }
  .feedback-card__message { font-size: 0.875rem; }
}

/* Opt-in horizontal rail for shop pages. The track holds two identical card
   groups so the loop is seamless: one full period shifts by one group plus one
   gap, which is half the track width plus half the gap. The second group is
   inert + aria-hidden in markup, so it is never focusable or announced. */
.review-showcase__marquee {
  --marquee-duration: 40s;
  --marquee-gap: clamp(0.85rem, 2vw, 1.25rem);
  position: relative;
}

.review-showcase__marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
}

.review-showcase__marquee-viewport { display: grid; gap: var(--marquee-gap); }
.review-showcase__marquee-row { min-width: 0; overflow: hidden; }

.review-showcase__marquee-track {
  display: flex;
  width: max-content;
  gap: var(--marquee-gap);
  will-change: transform;
}

.review-showcase__marquee-track--right { animation: review-showcase-marquee-right var(--marquee-duration) linear infinite; }
.review-showcase__marquee-track--left { animation: review-showcase-marquee-left var(--marquee-duration) linear infinite; }

.review-showcase__marquee-group {
  display: flex;
  gap: var(--marquee-gap);
}

.review-showcase__marquee .feedback-card {
  flex: 0 0 clamp(15rem, 24vw, 20rem);
}

.review-showcase__marquee:hover .review-showcase__marquee-track,
.review-showcase__marquee:focus-within .review-showcase__marquee-track {
  animation-play-state: paused;
}

[dir="rtl"] .review-showcase__marquee-track--right { animation-name: review-showcase-marquee-left; }
[dir="rtl"] .review-showcase__marquee-track--left { animation-name: review-showcase-marquee-right; }

@keyframes review-showcase-marquee-left { from { transform: translateX(0); } to { transform: translateX(calc(-50% - (var(--marquee-gap) / 2))); } }
@keyframes review-showcase-marquee-right { from { transform: translateX(calc(-50% - (var(--marquee-gap) / 2))); } to { transform: translateX(0); } }

@media (max-width: 599px) {
  .review-showcase__marquee .feedback-card { flex-basis: min(78vw, 17rem); }
  .review-showcase__marquee-viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-card__surface,
  .review-showcase__view-all { transition: none; }
  .feedback-card:hover .feedback-card__surface,
  .feedback-card:focus-visible .feedback-card__surface,
  .review-showcase__view-all:hover,
  .review-showcase__view-all:focus-visible { transform: none; }
  .review-showcase__marquee-track { animation: none; }
  .review-showcase__marquee-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .review-showcase__marquee-group[data-marquee-clone] { display: none; }
}

/* CHECKOUT / DELIVERY TIMELINE */
.steps-section__timeline { position: relative; gap: 0; padding-block: 0.25rem; }
.steps-section__timeline::before { content: ''; position: absolute; top: 1.9rem; bottom: 1.9rem; left: 6.1rem; width: 1px; background: var(--theme-line); }
.steps-section__progress { position: absolute; top: 1.9rem; bottom: 1.9rem; left: 6.1rem; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; background: rgb(var(--cl-accent)); transition: transform var(--theme-motion-duration) ease; }
.steps-section__timeline .steps-section__item { position: relative; grid-template-columns: 2.2rem 3rem minmax(0, 1fr) auto; align-items: center; min-height: 6.4rem; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--theme-line); }
.steps-section__timeline .steps-section__item:last-child { border-bottom: 0; }
.steps-section__timeline .steps-section__number { align-self: start; padding-top: 0.55rem; color: var(--theme-subtle); font-size: 0.68rem; }
.steps-section__timeline .steps-section__icon { position: relative; z-index: 1; width: 3rem; height: 3rem; border-color: var(--theme-line); border-radius: 0.8rem; background: var(--theme-surface); color: var(--theme-muted); transition: color var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }
.steps-section__icon-glyph, .steps-section__check { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; }
.steps-section__check { opacity: 0; transform: scale(0.5); color: rgb(var(--cl-t-accent)); transition: opacity var(--theme-motion-duration) ease, transform var(--theme-motion-duration) cubic-bezier(0.34, 1.56, 0.64, 1); }
.steps-section__timeline .steps-section__item.is-active .steps-section__icon { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 68%, var(--theme-line)); background: color-mix(in srgb, rgb(var(--cl-accent)) 14%, var(--theme-surface)); color: rgb(var(--cl-accent)); box-shadow: 0 0 0 5px color-mix(in srgb, rgb(var(--cl-accent)) 7%, transparent); transform: translateY(-1px); }
.steps-section__timeline .steps-section__item.is-complete .steps-section__icon { border-color: rgb(var(--cl-accent)); background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent)); }
.steps-section__timeline .steps-section__item.is-complete .steps-section__icon-glyph { opacity: 0; transform: scale(0.5); }
.steps-section__timeline .steps-section__item.is-complete .steps-section__check { opacity: 1; transform: scale(1); }
.steps-section__timeline .steps-section__item h3 { margin: 0; font-size: 1rem; transition: color var(--theme-motion-duration) ease; }
.steps-section__timeline .steps-section__item.is-active h3 { color: rgb(var(--cl-accent)); }
.steps-section__state { color: var(--theme-subtle); font-size: 0.68rem; font-weight: var(--font-weight-button); opacity: 0; transition: opacity var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease; }
.steps-section__item.is-complete .steps-section__state { color: rgb(var(--cl-accent)); opacity: 1; }

@media (max-width: 760px) {
  .steps-section__timeline::before, .steps-section__progress { left: 4.7rem; }
  .steps-section__timeline .steps-section__item { grid-template-columns: 1.8rem 2.5rem minmax(0, 1fr); gap: 0.75rem; }
  .steps-section__timeline .steps-section__icon { width: 2.5rem; height: 2.5rem; }
  .steps-section__state { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .steps-section__progress, .steps-section__icon, .steps-section__check, .steps-section__item h3, .steps-section__state { transition: none; }
}

/* Cart keeps the native reactive checkout flow, but gives the item list and
   purchase summary a clear desktop hierarchy and a single-column mobile path. */
.cart-page__inner {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
  padding-block: var(--theme-section-space);
}

.cart-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.72fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}

.cart-page__items .bg-card,
.cart-page__summary-column .bg-card {
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
}

.cart-page__summary-column {
  position: sticky;
  top: clamp(0.75rem, 3vw, 2rem);
}

.cart-page .bg-accent-500\/10 {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 45%, var(--theme-line));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 12%, transparent);
}

@media (max-width: 1023px) {
  .cart-page__layout { grid-template-columns: 1fr; }
  .cart-page__summary-column { position: static; }
}

.journal-grid__inner {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
  padding-block: var(--theme-section-space);
}

.journal-grid__heading { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }

.journal-grid__heading h2 {
  margin: 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.8rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.05em;
  line-height: 1;
}

.journal-grid__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.25rem);
}

.journal-grid__item { min-width: 0; }
.journal-grid__item > a { height: 100%; }

.journal-grid__footer-link {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

.journal-grid__view-all {
  color: rgb(var(--cl-accent));
  font-size: 0.84rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
}

.journal-grid__view-all:hover,
.journal-grid__view-all:focus-visible { color: rgb(var(--cl-t-primary)); outline: none; }

@media (max-width: 1279px) { .journal-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .journal-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .journal-grid__items { grid-template-columns: 1fr; } }

/* Review sentiment → STARS ONLY, plus the staggered star reveal.
   `--sentiment` still maps the real rating to a hue (4-5 green, 3 amber,
   1-2 red, 0/missing falls back to the editor accent), but nothing except the
   star glyphs reads it. There is deliberately no edge bar, no rating-tinted
   border and no rating-tinted glow: the card surface is identical for a
   1-star and a 5-star review. The theme ships no semantic
   success/warning/danger tokens, so the three hues are fixed values picked to
   stay legible on both surface tones. */
.feedback-card[data-sentiment="positive"] { --sentiment: 52 211 153; }
.feedback-card[data-sentiment="neutral"] { --sentiment: 251 191 36; }
.feedback-card[data-sentiment="negative"] { --sentiment: 248 113 113; }
.feedback-card[data-sentiment="none"] { --sentiment: var(--cl-accent); }

.feedback-card__stars { align-items: center; gap: 0.15rem; }

/* inline-flex so the pop transform applies to the star wrapper. */
.feedback-card__star { display: inline-flex; }

/* Wins over the `text-accent-500` utility on the filled star markup, so the
   glyph colour tracks the rating while the utility stays as the no-CSS
   fallback. */
.feedback-card[data-sentiment] .feedback-card__star--filled { color: rgb(var(--sentiment)); }

.feedback-card[data-sentiment] .feedback-card__star:not(.feedback-card__star--filled) {
  color: color-mix(in srgb, rgb(var(--cl-t-primary)) 20%, transparent);
}

@keyframes feedback-card-star-pop {
  from { opacity: 0; transform: scale(0.45) rotate(-24deg); }
  60% { opacity: 1; transform: scale(1.16) rotate(5deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* `is-star-reveal` is added by script only when IntersectionObserver exists,
   so with JS off the stars render at full opacity and are never hidden. */
.review-showcase.is-star-reveal .feedback-card .feedback-card__star--filled { opacity: 0; }

.review-showcase.is-star-reveal .feedback-card.is-visible .feedback-card__star--filled {
  animation: feedback-card-star-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--star-index, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
  .review-showcase.is-star-reveal .feedback-card .feedback-card__star--filled,
  .review-showcase.is-star-reveal .feedback-card.is-visible .feedback-card__star--filled {
    opacity: 1;
    animation: none;
  }
  .feedback-card:hover .feedback-card__surface,
  .feedback-card:focus-visible .feedback-card__surface { transform: none; }
}

/* Horizontal checkout rail adapted from the reference theme's order journey. */
.steps-section__surface {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding: clamp(1.1rem, 2.6vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, var(--theme-surface) 88%, transparent);
  box-shadow: 0 1.5rem 3rem -2.25rem rgba(0, 0, 0, 0.8);
}

.steps-section__timeline-scroll { min-width: 0; }
.steps-section__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--steps-count, 4), minmax(0, 1fr));
  gap: 0;
  min-width: max(42rem, calc(var(--steps-count, 4) * 10rem));
  margin: 0;
  padding: 0.15rem 0.25rem 0.2rem;
  list-style: none;
}

.steps-section__timeline::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 3.15rem;
  right: calc(50% / var(--steps-count, 4));
  left: calc(50% / var(--steps-count, 4));
  height: 2px;
  background: var(--theme-line);
}

.steps-section__progress {
  position: absolute;
  z-index: 1;
  top: 3.15rem;
  right: calc(50% / var(--steps-count, 4));
  left: calc(50% / var(--steps-count, 4));
  display: block;
  width: auto;
  height: 2px;
  transform: scaleX(var(--steps-progress, 0));
  transform-origin: left;
  background: rgb(var(--cl-accent));
  transition: transform var(--theme-motion-duration) cubic-bezier(0.65, 0, 0.35, 1);
}

.steps-section__timeline .steps-section__item {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1.2rem 3.6rem auto auto;
  justify-items: center;
  align-items: start;
  min-width: 0;
  min-height: 10rem;
  gap: 0.65rem;
  padding: 0;
  border: 0;
  color: var(--theme-muted);
  text-align: center;
}

.steps-section__timeline .steps-section__number {
  padding: 0;
  color: var(--theme-subtle);
  font-size: 0.68rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.steps-section__timeline .steps-section__icon {
  position: relative;
  z-index: 2;
  display: grid;
  width: 3.6rem;
  height: 3.6rem;
  place-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 1rem;
  background: var(--theme-surface);
  color: var(--theme-muted);
  box-shadow: 0 0 0 0 color-mix(in srgb, rgb(var(--cl-accent)) 12%, transparent);
  transition: color var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease;
}

.steps-section__icon-glyph,
.steps-section__check {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.steps-section__icon-glyph { transition: opacity var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }
.steps-section__check { opacity: 0; transform: scale(0.45); color: rgb(var(--cl-t-accent)); transition: opacity var(--theme-motion-duration) ease, transform var(--theme-motion-duration) cubic-bezier(0.34, 1.56, 0.64, 1); }

.steps-section__timeline .steps-section__item.is-active .steps-section__icon {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 68%, var(--theme-line));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 14%, var(--theme-surface));
  color: rgb(var(--cl-accent));
  box-shadow: 0 0 0 0.4rem color-mix(in srgb, rgb(var(--cl-accent)) 8%, transparent);
  transform: translateY(-1px);
}

.steps-section__timeline .steps-section__item.is-complete .steps-section__icon {
  border-color: rgb(var(--cl-accent));
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-t-accent));
  box-shadow: 0 0 0 0.4rem color-mix(in srgb, rgb(var(--cl-accent)) 8%, transparent);
}

.steps-section__timeline .steps-section__item.is-complete .steps-section__icon-glyph { opacity: 0; transform: scale(0.45); }
.steps-section__timeline .steps-section__item.is-complete .steps-section__check { opacity: 1; transform: scale(1); }
.steps-section__copy { min-width: 0; max-width: 15rem; }
.steps-section__timeline .steps-section__item h3 { margin: 0; color: rgb(var(--cl-t-primary)); font-size: 0.96rem; line-height: 1.3; transition: color var(--theme-motion-duration) ease; }
.steps-section__timeline .steps-section__item.is-active h3 { color: rgb(var(--cl-accent)); }
.steps-section__timeline .steps-section__item p { display: -webkit-box; margin: 0.45rem 0 0; overflow: hidden; color: var(--theme-muted); font-size: 0.76rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.steps-section__state { margin-top: 0.1rem; color: var(--theme-subtle); font-size: 0.67rem; font-weight: var(--font-weight-button); opacity: 0; transition: opacity var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease; }
.steps-section__item.is-complete .steps-section__state { color: rgb(var(--cl-accent)); opacity: 1; }

@media (max-width: 760px) {
  /* Stacked vertical timeline: no horizontal scroll, natural page flow. */
  .steps-section__surface { margin-top: 1.5rem; padding: 1.15rem 1rem; }
  .steps-section__timeline-scroll { min-width: 0; overflow: visible; margin-inline: 0; padding: 0; }
  .steps-section__timeline {
    grid-template-columns: 1fr;
    min-width: 0;
    padding: 0;
    gap: 0;
  }
  .steps-section__timeline::before {
    top: 2rem;
    bottom: 2rem;
    right: auto;
    left: 1.7rem;
    width: 2px;
    height: auto;
  }
  .steps-section__progress {
    top: 2rem;
    bottom: 2rem;
    right: auto;
    left: 1.7rem;
    width: 2px;
    height: auto;
    transform: scaleY(var(--steps-progress, 0));
    transform-origin: top;
  }
  .steps-section__timeline .steps-section__item {
    grid-template-rows: auto;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    min-height: 0;
    gap: 0.9rem;
    padding: 0.75rem 0;
    text-align: left;
  }
  .steps-section__timeline .steps-section__number { display: none; }
  .steps-section__timeline .steps-section__icon { width: 3.4rem; height: 3.4rem; grid-column: 1; grid-row: 1; }
  .steps-section__copy { grid-column: 2; grid-row: 1; max-width: none; }
  .steps-section__timeline .steps-section__item h3 { font-size: 0.92rem; }
  .steps-section__timeline .steps-section__item p { font-size: 0.74rem; -webkit-line-clamp: 3; margin-top: 0.3rem; }
  .steps-section__state { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .steps-section__progress,
  .steps-section__icon,
  .steps-section__icon-glyph,
  .steps-section__check,
  .steps-section__item h3,
  .steps-section__state { transition: none; }
}

/* The rail is a compact handoff track: segmented at rest, luminous only for
   the completed portion, so the motion explains progress without becoming a
   decorative divider through the step copy. */
.steps-section__timeline::before {
  top: 3.8rem;
  height: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 78%, transparent);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--theme-muted) 52%, transparent) 0 0.55rem, transparent 0.55rem 0.9rem);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.steps-section__progress {
  top: 3.86rem;
  height: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, rgb(var(--cl-accent)) 74%, transparent), rgb(var(--cl-accent)) 68%, color-mix(in srgb, rgb(var(--cl-accent)) 72%, white));
  box-shadow: 0 0.35rem 1rem -0.35rem rgb(var(--cl-accent));
  overflow: hidden;
}

.steps-section__progress::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-120%);
  animation: steps-progress-sheen 2.4s ease-in-out infinite;
}

.steps-section__timeline .steps-section__item:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 3.67rem;
  right: -0.22rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--theme-surface);
  border-radius: 0.18rem;
  background: var(--theme-line);
  box-shadow: 0 0.2rem 0.55rem -0.3rem rgba(0, 0, 0, 0.9);
  transform: rotate(45deg);
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease;
}

.steps-section__timeline .steps-section__item.is-complete:not(:last-child)::after {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 72%, var(--theme-surface));
  background: rgb(var(--cl-accent));
  box-shadow: 0 0.35rem 0.8rem -0.3rem rgb(var(--cl-accent));
}

.steps-section__timeline .steps-section__item.is-active .steps-section__icon {
  outline: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 72%, transparent);
  outline-offset: 0.35rem;
  box-shadow: 0 0.7rem 1.4rem -0.8rem rgb(var(--cl-accent));
  animation: steps-checkpoint-pulse 2.2s ease-in-out infinite;
}

.steps-section__timeline .steps-section__item.is-complete .steps-section__icon {
  outline: 0;
  box-shadow: 0 0.7rem 1.2rem -0.75rem rgb(var(--cl-accent));
}

.steps-section__timeline .steps-section__item.is-complete .steps-section__check {
  animation: steps-check-pop var(--theme-motion-duration) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.steps-section__state--active,
.steps-section__state--complete { display: none; align-items: center; gap: 0.3rem; }
.steps-section__state--active i { animation: steps-state-spin 1.4s linear infinite; }
.steps-section__item.is-active .steps-section__state--active,
.steps-section__item.is-complete .steps-section__state--complete { display: inline-flex; }

@keyframes steps-progress-sheen {
  0%, 35% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(340%); }
}

@keyframes steps-checkpoint-pulse {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(-3px); }
}

.review-showcase__controls--buttons { justify-content: stretch; margin-bottom: 1.4rem; }
.review-showcase__controls--buttons .review-showcase__sort { width: 100%; justify-content: flex-start; gap: 0.8rem; padding: 0.55rem; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: color-mix(in srgb, var(--theme-surface) 86%, transparent); }
.review-showcase__controls--buttons .review-showcase__sort-label { padding-inline: 0.45rem; color: var(--theme-muted); font-size: 0.68rem; font-weight: var(--font-weight-button); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.review-showcase__controls--buttons .review-showcase__sort-buttons { flex: 1; justify-content: flex-start; gap: 0.35rem; }
.review-showcase__controls--buttons .review-showcase__sort-button { min-height: 2.15rem; border-color: transparent; background: transparent; color: var(--theme-muted); }
.review-showcase__controls--buttons .review-showcase__sort-button:hover { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 32%, var(--theme-line)); background: color-mix(in srgb, rgb(var(--cl-accent)) 8%, transparent); }
.review-showcase__controls--buttons .review-showcase__sort-button.is-active { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 56%, var(--theme-line)); background: color-mix(in srgb, rgb(var(--cl-accent)) 13%, transparent); color: rgb(var(--cl-accent)); }

.review-pagination { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 0.75rem; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: color-mix(in srgb, var(--theme-surface) 88%, transparent); }
.review-pagination__mobile, .review-pagination__desktop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-pagination__desktop { display: none; }
.review-pagination__arrow, .review-pagination__button { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.35rem; border: 1px solid var(--theme-line); border-radius: calc(var(--theme-radius) * 0.75); background: color-mix(in srgb, rgb(var(--cl-t-primary)) 3%, transparent); color: var(--theme-muted); font-size: 0.72rem; font-weight: var(--font-weight-button); text-decoration: none; transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }
.review-pagination__arrow { flex: 1; padding-inline: 0.8rem; }
.review-pagination__button { min-width: 2.35rem; padding-inline: 0.55rem; }
.review-pagination__button--icon { padding-inline: 0.7rem; }
.review-pagination__arrow:hover, .review-pagination__button:hover { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 42%, var(--theme-line)); background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent); color: rgb(var(--cl-t-primary)); transform: translateY(-1px); }
.review-pagination__button.is-active { border-color: rgb(var(--cl-accent)); background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent)); cursor: default; }
.review-pagination__arrow.is-disabled, .review-pagination__button.is-disabled { opacity: 0.38; pointer-events: none; }
.review-pagination__summary { margin: 0; color: var(--theme-muted); font-size: 0.74rem; }
.review-pagination__summary span { color: rgb(var(--cl-t-primary)); font-weight: var(--font-weight-button); }
.review-pagination__list { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.35rem; }
@media (min-width: 640px) {
  .review-pagination__mobile { display: none; }
  .review-pagination__desktop { display: flex; }
}
@media (max-width: 640px) {
  .review-showcase__controls--buttons .review-showcase__sort { display: block; overflow-x: auto; white-space: nowrap; }
  .review-showcase__controls--buttons .review-showcase__sort-label { display: block; margin: 0 0 0.45rem; }
  .review-showcase__controls--buttons .review-showcase__sort-buttons { display: inline-flex; flex-wrap: nowrap; width: max-content; }
}
@media (prefers-reduced-motion: reduce) {
  .review-pagination__arrow, .review-pagination__button, .review-showcase__controls--buttons .review-showcase__sort-button { transition: none; }
}

/* Review summary, product-aware cards, and shared header finish. Values stay
   on theme variables so Visual Editor colors remain the source of truth. */
.review-showcase__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
}
.review-showcase__stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, var(--theme-surface) 88%, transparent);
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease;
}
.review-showcase__stat:hover { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 42%, var(--theme-line)); background: var(--theme-surface-raised); transform: translateY(-2px); }
.review-showcase__stat-icon { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 2.15rem; place-items: center; border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 34%, var(--theme-line)); border-radius: 0.7rem; background: color-mix(in srgb, rgb(var(--cl-accent)) 11%, transparent); color: rgb(var(--cl-accent)); }
.review-showcase__stat-copy { display: grid; min-width: 0; gap: 0.18rem; }
.review-showcase__stat-copy strong { color: rgb(var(--cl-t-primary)); font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.review-showcase__stat-copy > span { overflow: hidden; color: var(--theme-muted); font-size: 0.68rem; font-weight: var(--font-weight-button); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

.feedback-card__surface { background: var(--feedback-card-background, var(--theme-surface)); border-color: var(--feedback-card-border, var(--theme-line)); }
.feedback-card__body { color: var(--feedback-card-text, rgb(var(--cl-t-primary))); }
.feedback-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.feedback-card__stars { display: flex; align-items: center; gap: 0.18rem; color: color-mix(in srgb, var(--feedback-card-star, rgb(var(--sentiment))) 76%, white); }
.feedback-card__star { display: inline-flex; font-size: 0.9rem; }
.feedback-card__star:not(.feedback-card__star--filled) { color: color-mix(in srgb, var(--feedback-card-muted, var(--theme-muted)) 36%, transparent); }
.feedback-card__date { color: var(--feedback-card-muted, var(--theme-muted)); font-size: 0.7rem; white-space: nowrap; }
.feedback-card__product { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); gap: 0.7rem; align-items: center; margin-bottom: 1rem; padding: 0.65rem; border: 1px solid color-mix(in srgb, var(--feedback-card-border, var(--theme-line)) 86%, transparent); border-radius: calc(var(--theme-radius) * 0.85); background: color-mix(in srgb, rgb(var(--cl-t-primary)) 3%, transparent); }
.feedback-card__product-media { position: relative; display: grid; width: 2.7rem; height: 2.7rem; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 30%, var(--theme-line)); border-radius: 0.65rem; background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent); color: rgb(var(--cl-accent)); }
.feedback-card__product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feedback-card__product-media:has(img) > i { display: none; }
.feedback-card__product-copy { display: grid; min-width: 0; gap: 0.16rem; }
.feedback-card__product-label { display: inline-flex; align-items: center; gap: 0.28rem; color: rgb(var(--cl-accent)); font-size: 0.62rem; font-weight: var(--font-weight-button); letter-spacing: 0.08em; text-transform: uppercase; }
.feedback-card__product-copy strong { overflow: hidden; color: var(--feedback-card-text, rgb(var(--cl-t-primary))); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.feedback-card__product-copy small { overflow: hidden; color: var(--feedback-card-muted, var(--theme-muted)); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.feedback-card__message { color: var(--feedback-card-text, color-mix(in srgb, rgb(var(--cl-t-primary)) 86%, transparent)); }
.feedback-card__reply { background: color-mix(in srgb, rgb(var(--cl-accent)) 6%, transparent); border-color: color-mix(in srgb, var(--feedback-card-border, var(--theme-line)) 80%, transparent); }
.feedback-card__reply-label { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.35rem; color: rgb(var(--cl-accent)); font-size: 0.65rem; font-weight: var(--font-weight-button); letter-spacing: 0.08em; text-transform: uppercase; }
.feedback-card__reply-meta { margin: 0.55rem 0 0; color: var(--feedback-card-muted, var(--theme-muted)); font-size: 0.66rem; }
.feedback-card__expand, .feedback-card__product-link { display: inline-flex; align-items: center; gap: 0.4rem; color: rgb(var(--cl-accent)); font-size: 0.7rem; font-weight: var(--font-weight-button); text-decoration: none; }
.feedback-card__expand { margin-top: 0.8rem; border: 0; background: transparent; cursor: pointer; }
.feedback-card__expand i, .feedback-card__product-link i { transition: transform var(--theme-motion-duration) ease; }
.feedback-card__expand:hover i, .feedback-card__product-link:hover i { transform: translateX(0.15rem); }
.feedback-card__product-link { justify-content: space-between; min-height: 2.4rem; padding: 0.7rem 1.15rem; border-top: 1px solid var(--feedback-card-border, var(--theme-line)); background: color-mix(in srgb, rgb(var(--cl-t-primary)) 3%, transparent); }
.feedback-card__product-link:hover { background: color-mix(in srgb, rgb(var(--cl-accent)) 8%, transparent); }
.feedback-card--expandable .feedback-card__surface { cursor: pointer; }

.storefront-header {
  width: min(calc(100% - 2rem), var(--theme-content-width));
  margin: 1rem auto 0;
  overflow: visible;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 1.25);
  background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
  box-shadow: 0 1.25rem 2.75rem -2.2rem color-mix(in srgb, rgb(var(--cl-background)) 80%, #000);
}
.storefront-header__main { padding: 0.85rem clamp(1rem, 2.5vw, 1.6rem) !important; }
.storefront-header__brand-link { min-height: 3.25rem; }
.storefront-header__brand-mark { display: grid; width: 3.25rem; height: 3.25rem; flex: 0 0 3.25rem; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 34%, var(--theme-line)); border-radius: calc(var(--theme-radius) * 0.9); background: color-mix(in srgb, rgb(var(--cl-background)) 78%, rgb(var(--cl-accent))); box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent); }
.storefront-header__logo, .storefront-header__logo--small, .storefront-header__logo--medium, .storefront-header__logo--large { width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover; }
.storefront-header__logo--small { transform: scale(0.78); }
.storefront-header__logo--medium { transform: scale(0.9); }
.storefront-header__logo--large { transform: scale(1); }
.storefront-header__brand-name { max-width: min(34vw, 15rem); }
.storefront-header__cart svg, .storefront-header__cart i { transition: transform var(--theme-motion-duration) cubic-bezier(0.2, 0.8, 0.2, 1), color var(--theme-motion-duration) ease; }
.storefront-header__cart:hover svg, .storefront-header__cart:hover i { transform: translateY(-1px) rotate(-5deg) scale(1.08); }
.storefront-header__cart:active svg, .storefront-header__cart:active i { transform: translateY(1px) scale(0.94); }
.storefront-header__cart:hover { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 48%, var(--theme-line)); background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent); color: rgb(var(--cl-t-primary)); }
.storefront-header__nav { padding-inline: clamp(0.7rem, 2vw, 1.6rem); border-top-color: var(--theme-line); }
.storefront-header__links { padding-block: 0.65rem !important; }
.storefront-header .nav-link { min-height: 2.25rem; padding-inline: 0.78rem; }

@media (max-width: 767px) {
  .review-showcase__stats { grid-template-columns: 1fr; }
  .storefront-header { width: calc(100% - 1rem); margin-top: 0.5rem; border-radius: var(--theme-radius); }
  .storefront-header__main { padding-inline: 0.7rem !important; }
  .storefront-header__brand-mark { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; }
  .storefront-header__brand-link { gap: 0.55rem; min-height: 2.75rem; }
  .storefront-header__brand-name { max-width: 45vw; font-size: 0.95rem; }
  .status-group, .status-group__items, .status-card { width: 100%; min-width: 0; max-width: 100%; }
  .status-card__identity { min-width: 0; max-width: 62%; }
  .status-card__label { white-space: normal; overflow-wrap: anywhere; }
  .status-card__state { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .review-showcase__stat, .storefront-header__cart svg, .storefront-header__cart i, .feedback-card__expand i, .feedback-card__product-link i { transition: none; }
}

@keyframes steps-check-pop {
  from { opacity: 0; transform: scale(0.45) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

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

/* =================================================
   HERO / HEADER / FAQ POLISH
   The hero owns layout and optional media only. Its canvas stays transparent
   so it inherits the storefront background instead of creating a second band.
================================================= */
.hero-section,
.hero-section--has-backdrop {
  background: transparent !important;
}

.hero-section .hero-glow,
.hero-section .hero-grid-bg {
  display: none;
}

.hero-section .hero-backdrop-overlay {
  background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--cl-background)) 8%, transparent), color-mix(in srgb, rgb(var(--cl-background)) 68%, transparent) 82%, rgb(var(--cl-background)) 100%);
}

.storefront-header {
  isolation: isolate;
  background: color-mix(in srgb, var(--theme-surface-raised) 92%, transparent);
  box-shadow: 0 1.25rem 2.75rem -2.2rem color-mix(in srgb, rgb(var(--cl-background)) 82%, #000);
}

.storefront-header--solid { background: rgb(var(--cl-card)); }
.storefront-header--glass { background: color-mix(in srgb, var(--theme-surface-raised) 82%, transparent); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); }
.storefront-header--transparent { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.storefront-header--borderless { border-color: transparent; }
.storefront-header__main { min-height: 4.8rem; }
.storefront-header__brand-link { transition: opacity var(--theme-motion-duration) ease; }
.storefront-header__brand-link:hover { opacity: 0.9; }
.storefront-header__brand-name { line-height: 1.1; }
.storefront-header__nav { background: color-mix(in srgb, var(--theme-surface) 76%, transparent); }

.premium-faq .faq-list { gap: 0.8rem; }
.premium-faq .faq-item {
  box-shadow: 0 1rem 2rem -1.8rem rgba(0, 0, 0, 0.9);
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease;
}
.premium-faq .faq-item:hover { border-color: color-mix(in srgb, var(--faq-accent) 34%, var(--faq-border)); transform: translateY(-1px); }
.premium-faq .faq-item[open] { box-shadow: 0 1.25rem 2.5rem -2rem color-mix(in srgb, var(--faq-accent) 34%, transparent); transform: none; }
.premium-faq .faq-item__summary { min-height: 4.5rem; padding: 1.15rem 1.25rem; }
.premium-faq .faq-item__question { font-size: 1.02rem; line-height: 1.4; }
.premium-faq .faq-item__icon,
.premium-faq .faq-item[open] .faq-item__icon { transform: none; transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease; }
.premium-faq .faq-item[open] .faq-item__icon { border-color: color-mix(in srgb, var(--faq-accent) 56%, var(--faq-border)); background: color-mix(in srgb, var(--faq-accent) 10%, transparent); }
.premium-faq .faq-item__answer { display: grid; grid-template-rows: 0fr; overflow: hidden; margin: 0; padding: 0 1.25rem; line-height: 1.7; transition: grid-template-rows var(--theme-motion-duration) ease, padding-bottom var(--theme-motion-duration) ease; }
.premium-faq .faq-item__answer > span { min-height: 0; overflow: hidden; }
.premium-faq .faq-item[open] .faq-item__answer { grid-template-rows: 1fr; padding-bottom: 1.25rem; }

@media (max-width: 767px) {
  .storefront-header__main { min-height: 4.25rem; }
  .premium-faq .faq-item__summary { min-height: 4.1rem; padding-inline: 1rem; }
  .premium-faq .faq-item__answer { padding-inline: 1rem; }
  .premium-faq .faq-item[open] .faq-item__answer { padding-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .storefront-header__brand-link,
  .premium-faq .faq-item,
  .premium-faq .faq-item__icon,
  .premium-faq .faq-item__answer { transition: none; }
  .premium-faq .faq-item:hover { transform: none; }
}

@media (max-width: 760px) {
  .steps-section__timeline::before { top: 3.48rem; }
  .steps-section__progress { top: 3.54rem; }
  .steps-section__timeline .steps-section__item:not(:last-child)::after { top: 3.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .steps-section__progress::after,
  .steps-section__timeline .steps-section__item.is-active .steps-section__icon,
  .steps-section__state--active i { animation: none; }
}

/* Keep the rail and checkpoints on one stable optical axis while the active
   state changes. The beam now ends at checkpoint centers, not grid gaps. */
.steps-section__timeline { align-items: center; }
.steps-section__timeline::before {
  top: 50%;
  transform: translateY(-50%);
}
.steps-section__progress {
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
}
.steps-section__timeline .steps-section__item {
  grid-template-columns: 2.2rem 3.6rem minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  min-height: 10rem;
  text-align: left;
}
.steps-section__timeline .steps-section__number { align-self: start; padding-top: 0.35rem; }
.steps-section__timeline .steps-section__copy { align-self: center; }
.steps-section__state { align-self: start; padding-top: 0.35rem; white-space: nowrap; }
.steps-section__timeline .steps-section__item:not(:last-child)::after {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

/* Timeline items are deliberately always present; only the checkpoint state
   changes, so scroll reveal cannot desynchronise content and progress. */
.steps-section__timeline .steps-section__item {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .steps-section__timeline .steps-section__item {
    grid-template-columns: 1.7rem 3.1rem minmax(0, 1fr) auto;
    min-width: 18rem;
    min-height: 9rem;
  }
  .steps-section__timeline .steps-section__item h3 { font-size: 0.84rem; }
  .steps-section__timeline .steps-section__item p { font-size: 0.68rem; }
  .steps-section__state { font-size: 0.62rem; }
}

/* Center each checkpoint stack in its grid cell so the connector terminates
   exactly beneath the icon at every progress state. */
.steps-section__timeline .steps-section__item {
  grid-template-columns: 1fr;
  grid-template-rows: 1.2rem 3.6rem auto auto;
  justify-items: center;
  align-items: start;
  min-width: 0;
  min-height: 10rem;
  text-align: center;
}
.steps-section__timeline .steps-section__number { align-self: start; padding-top: 0; }
.steps-section__timeline .steps-section__copy { align-self: start; max-width: 15rem; }
.steps-section__state { align-self: start; padding-top: 0; }
.steps-section__timeline .steps-section__item:not(:last-child)::after {
  top: 3.8rem;
  transform: translateY(-50%) rotate(45deg);
}
.steps-section__timeline::before { top: 3.8rem; transform: translateY(-50%); }
.steps-section__progress { top: 3.8rem; }

@media (max-width: 760px) {
  .steps-section__timeline .steps-section__item {
    min-width: 18rem;
    min-height: 10rem;
  }
  .steps-section__timeline .steps-section__item h3 { font-size: 0.88rem; }
  .steps-section__timeline .steps-section__item p { font-size: 0.7rem; }
}

/* Fixed rail height prevents shorter titles or descriptions from shifting an
   icon away from the shared connector axis. */
.steps-section__timeline .steps-section__item {
  height: 10rem;
  box-sizing: border-box;
}
.steps-section__timeline .steps-section__item.is-active .steps-section__icon {
  transform: none;
}
@keyframes steps-checkpoint-pulse {
  0%, 100% { box-shadow: 0 0.7rem 1.4rem -0.8rem rgb(var(--cl-accent)); }
  50% { box-shadow: 0 0.95rem 1.65rem -0.7rem rgb(var(--cl-accent)); }
}

/* =================================================
   STATUS PAGE DASHBOARD (components/status-page.njk)
   The product state itself is always rendered from
   SellAuth. These tokens only style the surrounding UI.
================================================= */
.status-page {
  --status-page-surface: transparent;
  color: var(--status-page-text, rgb(var(--cl-t-primary)));
}

.status-page__inner {
  display: grid;
  gap: 1rem;
  padding: clamp(0.5rem, 2vw, 1rem);
  border: 1px solid color-mix(in srgb, var(--theme-line) 72%, transparent);
  border-radius: calc(var(--theme-radius) * 1.25);
  background: var(--status-page-surface);
}

.status-page__intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, var(--theme-surface-raised) 64%, transparent);
}

.status-page__intro-copy { min-width: 0; }
.status-page__eyebrow,
.status-page__filter-label {
  margin: 0 0 0.55rem;
  color: rgb(var(--cl-accent));
  font-size: 0.68rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.status-page__intro .page-intro__title { color: var(--status-page-text, rgb(var(--cl-t-primary))); font-size: clamp(2rem, 5vw, 3.8rem); }
.status-page__description { max-width: 38rem; margin: 0.8rem 0 0; color: var(--status-page-muted, var(--theme-muted)); line-height: 1.6; }

.status-page__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.status-page__search { position: relative; display: flex; align-items: center; width: min(100%, 34rem); min-height: 3rem; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: color-mix(in srgb, var(--theme-surface) 86%, transparent); color: var(--theme-muted); transition: border-color var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease; }
.status-page__search:focus-within { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 58%, var(--theme-line)); background: var(--theme-surface-raised); box-shadow: 0 0 0 0.2rem color-mix(in srgb, rgb(var(--cl-accent)) 13%, transparent); }
.status-page__search > i { margin-inline: 1rem 0.7rem; color: rgb(var(--cl-accent)); }
.status-page__search input { width: 100%; min-width: 0; padding: 0.75rem 0; border: 0; outline: 0; background: transparent; color: var(--status-page-text, rgb(var(--cl-t-primary))); font: inherit; }
.status-page__search input::placeholder { color: var(--theme-subtle); }
.status-page__search button { display: grid; width: 2.3rem; height: 2.3rem; margin-inline-end: 0.35rem; place-items: center; border: 0; border-radius: calc(var(--theme-radius) * 0.7); background: transparent; color: var(--theme-muted); cursor: pointer; }
.status-page__search button:hover { background: color-mix(in srgb, rgb(var(--cl-t-primary)) 7%, transparent); color: var(--status-page-text, rgb(var(--cl-t-primary))); }
.status-page__reset { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.7rem; padding: 0.65rem 0.9rem; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: transparent; color: var(--theme-muted); font: inherit; font-size: 0.75rem; font-weight: var(--font-weight-button); cursor: pointer; transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }
.status-page__reset:hover { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 44%, var(--theme-line)); background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent); color: var(--status-page-text, rgb(var(--cl-t-primary))); transform: translateY(var(--theme-hover-lift-negative)); }

.status-page__nav,
.status-page__status-options { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; overflow-y: visible; padding-block: 0.4rem; margin-block: -0.4rem; scrollbar-width: none; }
.status-page__nav::-webkit-scrollbar, .status-page__status-options::-webkit-scrollbar { display: none; }
.status-filter { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; flex: 0 0 auto; padding: 0.5rem 0.7rem; border: 1px solid var(--theme-line); border-radius: calc(var(--theme-radius) * 0.8); background: color-mix(in srgb, var(--theme-surface) 72%, transparent); color: var(--theme-muted); font: inherit; font-size: 0.74rem; font-weight: var(--font-weight-button); cursor: pointer; transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }
.status-filter:hover, .status-filter:focus-visible { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line)); color: var(--status-page-text, rgb(var(--cl-t-primary))); outline: none; transform: translateY(var(--theme-hover-lift-negative)); }
.status-filter.is-active { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 60%, var(--theme-line)); background: color-mix(in srgb, rgb(var(--cl-accent)) 14%, transparent); color: rgb(var(--cl-accent)); }
.status-filter small { min-width: 1.2rem; color: var(--theme-subtle); font-size: 0.65rem; text-align: center; }
.status-filter__icon, .status-filter__image { display: grid; width: 1.55rem; height: 1.55rem; flex: 0 0 auto; place-items: center; border-radius: calc(var(--theme-radius) * 0.55); background: color-mix(in srgb, rgb(var(--cl-accent)) 12%, transparent); color: rgb(var(--cl-accent)); overflow: hidden; }
.status-filter__image img { width: 100%; height: 100%; object-fit: cover; }
.status-page__status-nav { display: flex; align-items: center; gap: 0.8rem; min-width: 0; padding-top: 0.2rem; }
.status-page__filter-label { margin: 0; flex: 0 0 auto; color: var(--theme-subtle); font-size: 0.64rem; }
.status-filter--status { min-height: 2.3rem; padding-block: 0.4rem; }
.status-filter__dot { width: 0.48rem; height: 0.48rem; flex: 0 0 auto; border-radius: 50%; background: var(--status-color, rgb(var(--cl-accent))); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--status-color, rgb(var(--cl-accent))) 11%, transparent); }

.status-page__results-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0.15rem 0; color: var(--status-page-text, rgb(var(--cl-t-primary))); font-size: 0.78rem; font-weight: var(--font-weight-button); }
.status-page__results-detail { color: var(--theme-subtle); font-size: 0.7rem; font-weight: var(--font-weight-body); }
.status-list--dashboard { display: grid; gap: 1.15rem; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.status-group { display: grid; gap: 0.65rem; min-width: 0; }
.status-group__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0.2rem; }
.status-group__identity { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.status-group__identity > img, .status-group__fallback { display: grid; width: 2.3rem; height: 2.3rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--theme-line); border-radius: calc(var(--theme-radius) * 0.72); background: color-mix(in srgb, var(--theme-surface) 82%, transparent); color: rgb(var(--cl-accent)); object-fit: cover; }
.status-group__title { margin: 0; color: var(--status-page-text, rgb(var(--cl-t-primary))); font-family: var(--font-heading); font-size: 0.92rem; font-weight: var(--font-weight-heading); }
.status-group__identity p { margin: 0.15rem 0 0; color: var(--theme-subtle); font-size: 0.68rem; }
.status-group__count { flex: 0 0 auto; color: var(--theme-subtle); font-size: 0.68rem; }
.status-group__items { display: grid; gap: 0.6rem; }
.status-card { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.9rem; min-width: 0; min-height: 5.3rem; padding: 0.8rem 0.9rem; border: 1px solid var(--status-card-border, var(--theme-line)); border-radius: var(--theme-radius); background: var(--status-card-surface, var(--theme-surface)); color: var(--status-page-text, rgb(var(--cl-t-primary))); text-decoration: none; transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease; }
.status-card:hover, .status-card:focus-visible { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 42%, var(--status-card-border, var(--theme-line))); background: var(--theme-surface-raised); outline: none; transform: translateY(var(--theme-hover-lift-negative)); box-shadow: 0 1rem 2rem -1.6rem color-mix(in srgb, rgb(var(--cl-background)) 92%, rgb(var(--cl-t-primary))); }
.status-card__media { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; overflow: hidden; border: 1px solid var(--theme-line); border-radius: calc(var(--theme-radius) * 0.72); background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent); color: rgb(var(--cl-accent)); }
.status-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--theme-motion-duration) ease; }
.status-card:hover .status-card__media img { transform: scale(1.04); }
.status-card__content { display: grid; min-width: 0; gap: 0.18rem; }
.status-card__eyebrow { overflow: hidden; color: var(--theme-subtle); font-size: 0.62rem; font-weight: var(--font-weight-button); letter-spacing: 0.1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.status-card__label { overflow-wrap: anywhere; color: var(--status-page-text, rgb(var(--cl-t-primary))); font-family: var(--font-heading); font-size: 0.98rem; font-weight: var(--font-weight-heading); line-height: 1.3; }
.status-card__description { overflow: hidden; color: var(--status-page-muted, var(--theme-muted)); font-size: 0.72rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.status-card__state { display: inline-flex; align-items: center; justify-content: end; gap: 0.5rem; min-width: 7rem; color: var(--theme-muted); }
.status-card__signal { width: 0.62rem; height: 0.62rem; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--status-color, rgb(var(--cl-accent))) 10%, transparent); }
.status-card__signal--neutral { background: var(--theme-subtle); box-shadow: none; }
.status-card__text { max-width: 12rem; overflow: hidden; color: var(--status-page-muted, var(--theme-muted)); font-size: 0.76rem; font-weight: var(--font-weight-button); text-overflow: ellipsis; white-space: nowrap; }
.status-card__action { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0.55rem 0.7rem; border: 1px solid color-mix(in srgb, var(--status-page-cta, rgb(var(--cl-accent))) 42%, var(--theme-line)); border-radius: calc(var(--theme-radius) * 0.7); background: color-mix(in srgb, var(--status-page-cta, rgb(var(--cl-accent))) 10%, transparent); color: var(--status-page-cta, rgb(var(--cl-accent))); font-size: 0.7rem; font-weight: var(--font-weight-button); white-space: nowrap; }
.status-card__action i { transition: transform var(--theme-motion-duration) ease; }
.status-card:hover .status-card__action i { transform: translate(0.12rem, -0.12rem); }
.status-card.is-filtered-out { opacity: 0; transform: translateY(0.25rem); }
.status-page__empty { display: grid; justify-items: center; gap: 0.55rem; padding: clamp(2.5rem, 8vw, 5rem) 1rem; border: 1px dashed var(--theme-line); border-radius: var(--theme-radius); text-align: center; }
.status-page__empty-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid var(--theme-line); border-radius: 50%; color: rgb(var(--cl-accent)); }
.status-page__empty h2 { margin: 0; color: var(--status-page-text, rgb(var(--cl-t-primary))); font-family: var(--font-heading); font-size: 1.1rem; }
.status-page__empty p { margin: 0; color: var(--theme-muted); font-size: 0.78rem; }
.status-page [hidden] { display: none !important; }

@media (max-width: 760px) {
  .status-page__inner { padding: 0.65rem; }
  .status-page__intro { align-items: start; flex-direction: column; gap: 1rem; }
  .status-page__summary { white-space: normal; }
  .status-page__toolbar { align-items: stretch; flex-direction: column; }
  .status-page__search { width: 100%; }
  .status-page__reset { align-self: flex-start; }
  .status-page__status-nav { align-items: start; flex-direction: column; gap: 0.45rem; }
  .status-page__status-options { width: 100%; }
  .status-card { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.7rem; min-height: 0; padding: 0.8rem; }
  .status-card__media { width: 2.75rem; height: 2.75rem; }
  .status-card__state { grid-column: 2; justify-content: start; min-width: 0; }
  .status-card__action { grid-column: 1 / -1; justify-content: center; width: 100%; }
  .status-group__header { align-items: start; }
  .status-group__count { padding-top: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .status-page__search, .status-page__reset, .status-filter, .status-card, .status-card__media img, .status-card__action i { transition: none; }
  .status-page [data-reveal], .status-card.is-filtered-out { opacity: 1; transform: none; }
}

/* Product detail: a compact product narrative with a native SellAuth checkout. */
.product-detail {
  --product-surface: color-mix(in srgb, var(--theme-surface) 93%, transparent);
  --product-raised: color-mix(in srgb, var(--theme-surface-raised) 86%, transparent);
  --product-border: color-mix(in srgb, var(--theme-line) 88%, transparent);
  --product-accent: rgb(var(--cl-accent));
}

.product-detail__inner {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.75rem) var(--theme-page-padding) clamp(3rem, 7vw, 6rem);
}

.product-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: clamp(0.9rem, 2vw, 1.4rem);
  color: var(--theme-muted);
  font-size: 0.76rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  transition: color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease;
}

.product-detail__back-link svg { width: 1rem; height: 1rem; }
.product-detail__back-link:hover, .product-detail__back-link:focus-visible { color: rgb(var(--cl-t-primary)); outline: 0; transform: translateX(-0.14rem); }

.product-detail__assurance { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.5rem; margin-bottom: clamp(1rem, 2.4vw, 1.6rem); padding: 0.65rem clamp(0.9rem, 2vw, 1.2rem); border: 1px solid var(--product-border); border-radius: calc(var(--theme-radius) * 0.85); background: linear-gradient(120deg, color-mix(in srgb, var(--product-accent) 9%, transparent), transparent 65%), var(--product-surface); }
.product-detail__assurance-item { display: inline-flex; align-items: center; gap: 0.45rem; padding-inline: clamp(0.75rem, 1.8vw, 1.25rem); border-left: 1px solid var(--product-border); color: var(--theme-muted); font-size: 0.72rem; font-weight: var(--font-weight-button); white-space: nowrap; }
.product-detail__assurance-item:first-child { padding-left: 0; border-left: 0; }
.product-detail__assurance-item i { color: var(--product-accent); font-size: 0.8rem; }
@media (max-width: 560px) {
  .product-detail__assurance-item { padding-inline: 0 1.1rem; border-left: 0; }
}

.product-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(21rem, 0.82fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}

.product-detail__content { min-width: 0; }
.product-detail__header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.product-detail__eyebrow-row, .product-detail__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.product-detail__category, .product-detail__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--product-border);
  border-radius: 999px;
  color: var(--theme-muted);
  font-size: 0.66rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.045em;
  text-decoration: none;
  text-transform: uppercase;
}

.product-detail__category:hover, .product-detail__category:focus-visible { border-color: color-mix(in srgb, var(--product-accent) 48%, var(--product-border)); color: var(--product-accent); outline: 0; }
.product-detail__status { display: inline-flex; align-items: center; gap: 0.42rem; color: var(--product-status, var(--theme-muted)); font-size: 0.72rem; font-weight: var(--font-weight-button); }
.product-detail__status-dot, .product-detail__availability-dot { width: 0.47rem; height: 0.47rem; flex: 0 0 auto; border-radius: 50%; background: var(--product-status, var(--product-accent)); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--product-status, var(--product-accent)) 12%, transparent); }
.product-detail__header h1 { max-width: 19ch; margin: 0.6rem 0 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: clamp(2rem, 4.2vw, 3.7rem); font-weight: var(--font-weight-heading); letter-spacing: 0; line-height: 1.04; overflow-wrap: anywhere; }
.product-detail__badges { justify-content: end; max-width: 48%; }
.product-detail__badge { border-color: color-mix(in srgb, var(--badge-color, var(--product-accent)) 42%, var(--product-border)); background: color-mix(in srgb, var(--badge-color, var(--product-accent)) 10%, transparent); color: var(--badge-color, var(--product-accent)); }

.product-detail__information { overflow: clip; border: 1px solid var(--product-border); border-radius: calc(var(--theme-radius) * 1.15); background: var(--product-surface); box-shadow: 0 1.5rem 3.5rem -3rem color-mix(in srgb, rgb(var(--cl-background)) 96%, rgb(var(--cl-t-primary))); }
.product-gallery { padding: clamp(0.55rem, 1vw, 0.8rem); background: color-mix(in srgb, var(--product-raised) 66%, transparent); }
.product-gallery__frame { position: relative; aspect-ratio: var(--product-page-image-aspect-ratio); overflow: hidden; border: 1px solid var(--product-border); border-radius: calc(var(--theme-radius) * 0.88); background: color-mix(in srgb, rgb(var(--cl-background)) 50%, var(--product-surface)); }
.product-gallery__main, .product-gallery__main .splide__track, .product-gallery__main .splide__list, .product-gallery__main .splide__slide { height: 100%; }
.product-gallery__image { width: 100%; height: 100%; object-fit: var(--product-image-fit); transition: transform 420ms cubic-bezier(.2,.65,.3,1); }
.product-gallery__frame:hover .product-gallery__image { transform: scale(1.018); }
.product-gallery__controls { position: absolute; right: 0.7rem; bottom: 0.7rem; display: inline-flex; align-items: center; gap: 0.35rem; z-index: 3; padding: 0.25rem; border: 1px solid color-mix(in srgb, var(--product-border) 85%, transparent); border-radius: calc(var(--theme-radius) * 0.72); background: color-mix(in srgb, rgb(var(--cl-background)) 74%, transparent); backdrop-filter: blur(10px); }
.product-gallery__control, .product-gallery__zoom, .product-gallery__lightbox-close, .product-gallery__lightbox-nav { display: grid; place-items: center; border: 0; color: rgb(var(--cl-t-primary)); cursor: pointer; }
.product-gallery__control { width: 1.9rem; height: 1.9rem; border-radius: calc(var(--theme-radius) * 0.5); background: transparent; transition: background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease; }
.product-gallery__control svg, .product-gallery__zoom svg, .product-gallery__lightbox-close svg, .product-gallery__lightbox-nav svg { width: 1rem; height: 1rem; }
.product-gallery__control:hover, .product-gallery__control:focus-visible { background: color-mix(in srgb, rgb(var(--cl-t-primary)) 10%, transparent); color: var(--product-accent); outline: 0; }
.product-gallery__count { min-width: 2.55rem; color: var(--theme-muted); font-size: 0.66rem; font-variant-numeric: tabular-nums; text-align: center; }
.product-gallery__zoom { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; padding: 0.38rem 0.55rem; border: 1px solid color-mix(in srgb, var(--product-border) 85%, transparent); border-radius: calc(var(--theme-radius) * 0.65); background: color-mix(in srgb, rgb(var(--cl-background)) 74%, transparent); font: inherit; font-size: 0.66rem; font-weight: var(--font-weight-button); backdrop-filter: blur(10px); transition: background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }
.product-gallery__zoom:hover, .product-gallery__zoom:focus-visible { background: var(--product-accent); color: rgb(var(--cl-t-accent)); outline: 0; transform: translateY(-0.08rem); }
.product-gallery__thumbnails { display: flex; gap: 0.5rem; padding-top: 0.65rem; overflow-x: auto; scrollbar-width: none; }
.product-gallery__thumbnails::-webkit-scrollbar { display: none; }
.product-gallery__thumbnail { width: 3.25rem; height: 2.3rem; flex: 0 0 auto; overflow: hidden; padding: 0; border: 1px solid var(--product-border); border-radius: calc(var(--theme-radius) * 0.58); background: transparent; cursor: pointer; opacity: 0.66; transition: border-color var(--theme-motion-duration) ease, opacity var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }
.product-gallery__thumbnail img { width: 100%; height: 100%; object-fit: var(--product-image-fit); }
.product-gallery__thumbnail:hover, .product-gallery__thumbnail:focus-visible, .product-gallery__thumbnail.is-active { border-color: var(--product-accent); opacity: 1; outline: 0; }
.product-gallery__thumbnail:hover { transform: translateY(-0.08rem); }
.product-gallery--empty { display: grid; min-height: clamp(17rem, 36vw, 29rem); place-content: center; justify-items: center; gap: 0.65rem; color: var(--theme-subtle); font-size: 0.75rem; text-align: center; }
.product-gallery__fallback-icon { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border: 1px solid var(--product-border); border-radius: 50%; color: var(--product-accent); font-size: 1.15rem; }
.product-gallery__lightbox { width: min(94vw, 84rem); max-width: none; max-height: 90vh; overflow: visible; border: 1px solid var(--product-border); border-radius: calc(var(--theme-radius) * 1.15); background: color-mix(in srgb, rgb(var(--cl-background)) 92%, black); }
.product-gallery__lightbox::backdrop { background: rgb(0 0 0 / 0.82); backdrop-filter: blur(5px); }
.product-gallery__lightbox-inner { position: relative; display: grid; min-width: min(90vw, 32rem); min-height: min(75vh, 52rem); place-items: center; padding: 1.25rem; }
.product-gallery__lightbox img { width: auto; max-width: 100%; max-height: calc(90vh - 2.5rem); object-fit: contain; }
.product-gallery__lightbox-close, .product-gallery__lightbox-nav { position: absolute; width: 2.5rem; height: 2.5rem; border: 1px solid var(--product-border); border-radius: 50%; background: color-mix(in srgb, rgb(var(--cl-background)) 84%, transparent); transition: background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }
.product-gallery__lightbox-close { top: 0.8rem; right: 0.8rem; }
.product-gallery__lightbox-nav.is-previous { left: 0.8rem; }
.product-gallery__lightbox-nav.is-next { right: 0.8rem; }
.product-gallery__lightbox-close:hover, .product-gallery__lightbox-close:focus-visible, .product-gallery__lightbox-nav:hover, .product-gallery__lightbox-nav:focus-visible { background: var(--product-accent); color: rgb(var(--cl-t-accent)); outline: 0; transform: translateY(-0.08rem); }
.product-detail[data-media-style="edge-to-edge"] .product-gallery { padding: 0; background: transparent; }
.product-detail[data-media-style="edge-to-edge"] .product-gallery__frame { border: 0; border-radius: calc(var(--theme-radius) * 1.1); }

.product-detail__description { padding: clamp(1.1rem, 2.5vw, 1.6rem); border-top: 1px solid var(--product-border); }
.product-detail__tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.85rem; border-bottom: 1px solid var(--product-border); scrollbar-width: none; }
.product-detail__tabs::-webkit-scrollbar { display: none; }
.product-detail__tab { min-height: 2.35rem; flex: 0 0 auto; padding: 0.5rem 0.7rem; border: 0; border-radius: calc(var(--theme-radius) * 0.62); background: transparent; color: var(--theme-muted); font: inherit; font-size: 0.75rem; font-weight: var(--font-weight-button); cursor: pointer; transition: background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease; }
.product-detail__tab:hover, .product-detail__tab:focus-visible { background: color-mix(in srgb, var(--product-accent) 9%, transparent); color: rgb(var(--cl-t-primary)); outline: 0; }
.product-detail__tab.is-active { background: color-mix(in srgb, var(--product-accent) 15%, transparent); color: var(--product-accent); }
.product-detail__tab-panels { padding-top: clamp(1rem, 2.2vw, 1.5rem); }
.product-detail__rich-content { max-width: 70ch; color: var(--theme-muted); font-size: 0.93rem; line-height: 1.75; overflow-wrap: anywhere; }
.product-detail__description-panel { display: grid; justify-items: start; }.product-detail__rich-content.is-collapsible { position: relative; max-height: var(--description-expanded-height); overflow: hidden; transition: max-height 260ms ease; }.product-detail__rich-content.is-collapsible.is-collapsed { max-height: 18rem; }.product-detail__rich-content.is-collapsible.is-collapsed::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4rem; background: linear-gradient(to bottom, transparent, var(--product-surface)); content: ''; pointer-events: none; }.product-detail__description-toggle { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.25rem; margin-top: 0.9rem; padding: 0.45rem 0.68rem; border: 1px solid color-mix(in srgb, var(--product-accent) 30%, var(--product-border)); border-radius: calc(var(--theme-radius) * 0.62); background: color-mix(in srgb, var(--product-accent) 8%, transparent); color: var(--product-accent); font: inherit; font-size: 0.7rem; font-weight: var(--font-weight-button); cursor: pointer; transition: background-color var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }.product-detail__description-toggle:hover, .product-detail__description-toggle:focus-visible { border-color: var(--product-accent); background: color-mix(in srgb, var(--product-accent) 15%, transparent); outline: 0; transform: translateY(-0.06rem); }.product-detail__description-toggle i { font-size: 0.62rem; transition: transform var(--theme-motion-duration) ease; }.product-detail__description-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.product-detail__rich-content :is(h1,h2,h3,h4) { margin: 1.5em 0 0.55em; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-weight: var(--font-weight-heading); line-height: 1.2; }
.product-detail__rich-content :is(h1,h2) { font-size: 1.35rem; }.product-detail__rich-content h3 { font-size: 1.12rem; }
.product-detail__rich-content p + p { margin-top: 0.9rem; }.product-detail__rich-content :is(ul,ol) { padding-left: 1.25rem; margin: 1rem 0; }.product-detail__rich-content ul { list-style: disc; }.product-detail__rich-content ol { list-style: decimal; }.product-detail__rich-content li + li { margin-top: 0.35rem; }.product-detail__rich-content a { color: var(--product-accent); text-decoration: underline; text-underline-offset: 0.18em; }.product-detail__rich-content img, .product-detail__rich-content iframe, .product-detail__rich-content video { width: 100%; height: auto; margin-block: 1.25rem; border: 1px solid var(--product-border); border-radius: calc(var(--theme-radius) * 0.75); }.product-detail__rich-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }.product-detail__rich-content :is(th,td) { padding: 0.65rem 0.75rem; border: 1px solid var(--product-border); text-align: left; }

.product-detail__highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.85rem; }
.product-detail__highlight { display: flex; gap: 0.65rem; min-width: 0; padding: 0.85rem; border: 1px solid var(--product-border); border-radius: var(--theme-radius); background: var(--product-surface); }
.product-detail__highlight-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: calc(var(--theme-radius) * 0.58); background: color-mix(in srgb, var(--product-accent) 11%, transparent); color: var(--product-accent); font-size: 0.78rem; }
.product-detail__highlight h2 { margin: 0; color: rgb(var(--cl-t-primary)); font-size: 0.77rem; font-weight: var(--font-weight-button); }.product-detail__highlight p { margin: 0.25rem 0 0; color: var(--theme-muted); font-size: 0.68rem; line-height: 1.45; }

.product-detail__purchase-column { position: sticky; top: clamp(0.8rem, 2vw, 1.5rem); min-width: 0; }

.product-detail__purchase-card { position: relative; border-color: var(--product-border); border-radius: calc(var(--theme-radius) * 1.15); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--product-accent) 7%, transparent), transparent 55%), var(--product-surface); box-shadow: 0 1.8rem 4rem -3.35rem color-mix(in srgb, rgb(var(--cl-background)) 80%, rgb(var(--cl-t-primary))); }
.product-detail__purchase-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: calc(var(--theme-radius) * 1.15) calc(var(--theme-radius) * 1.15) 0 0; background: linear-gradient(90deg, transparent, var(--product-accent), transparent); opacity: 0.85; }

.product-detail__purchase-summary { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2.3vw, 1.4rem); border-bottom: 1px solid var(--product-border); }
.product-detail__purchase-label { display: block; margin-bottom: 0.25rem; color: var(--theme-subtle); font-size: 0.63rem; font-weight: var(--font-weight-button); letter-spacing: 0.1em; text-transform: uppercase; }
.product-detail__price { color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.35rem); font-weight: var(--font-weight-heading); letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; transition: opacity var(--theme-motion-duration) ease; }
.product-detail__unit-price { margin: 0.4rem 0 0; color: var(--theme-muted); font-size: 0.68rem; }
.product-detail__availability { min-height: 1.1rem; text-align: right; }
.product-detail__availability > span { display: inline-flex; align-items: center; justify-content: end; gap: 0.42rem; font-size: 0.72rem; font-weight: var(--font-weight-button); }
.product-detail__availability .is-available { color: #4acb87; }
.product-detail__availability .is-unavailable { color: var(--theme-muted); }
.product-detail__availability .is-available .product-detail__availability-dot { --product-status: #4acb87; }

.product-purchase-form__body { padding: clamp(1rem, 2.3vw, 1.35rem); }
.product-purchase-form__section { border-color: var(--product-border); }
.product-purchase-form__label { color: rgb(var(--cl-t-primary)); font-size: 0.76rem; font-weight: var(--font-weight-button); }

/* Variant selector — dropdown (Choices.js), scoped to the variants section so the
   currency/language selectors elsewhere on the site are untouched. */
.product-purchase-form__select { border: 1px solid var(--product-border); outline: 0; transition: border-color var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease; }
.product-purchase-form__select:focus { border-color: var(--product-accent); box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--product-accent) 13%, transparent); }
.product-purchase-form__section--variants .choices__inner { border: 1px solid var(--product-border); background: color-mix(in srgb, var(--product-raised) 55%, transparent); border-radius: calc(var(--theme-radius) * 0.75); transition: border-color var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease; }
.product-purchase-form__section--variants .choices.is-open .choices__inner { border-color: var(--product-accent); border-radius: calc(var(--theme-radius) * 0.75) calc(var(--theme-radius) * 0.75) 0 0; box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--product-accent) 15%, transparent); }
.product-purchase-form__section--variants .choices__list--dropdown { border: 1px solid var(--product-accent); border-top: 0; background: var(--product-surface); border-radius: 0 0 calc(var(--theme-radius) * 0.75) calc(var(--theme-radius) * 0.75); overflow: hidden; }
.product-purchase-form__section--variants .choices__list--dropdown .choices__item { background: transparent; }
.product-purchase-form__section--variants .choices__list--dropdown .choices__item--selectable.is-highlighted { background: color-mix(in srgb, var(--product-accent) 16%, transparent); color: var(--product-accent); }

/* Variant selector — button cards. A CSS-only radio dot lives on ::before so the
   markup and Alpine bindings don't need to change; `.is-active` is toggled in
   product-form.njk alongside the existing accent-border utility class. */
.product-purchase-form__variant { position: relative; display: flex; align-items: center; gap: 0.85rem; border-color: var(--product-border); background: color-mix(in srgb, var(--product-raised) 50%, transparent); text-align: left; transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }
.product-purchase-form__variant::before { content: ''; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1.5px solid var(--product-border); background: color-mix(in srgb, var(--product-raised) 45%, transparent); transition: border-color var(--theme-motion-duration) ease, background var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease; }
.product-purchase-form__variant:hover:not(:disabled) { border-color: color-mix(in srgb, var(--product-accent) 42%, var(--product-border)); background: color-mix(in srgb, var(--product-accent) 6%, transparent); transform: translateY(-0.05rem); }
.product-purchase-form__variant:focus-visible { outline: 2px solid var(--product-accent); outline-offset: 2px; }
.product-purchase-form__variant:disabled { opacity: 0.48; cursor: not-allowed; }
.product-purchase-form__variant:disabled::before { opacity: 0.5; }
.product-purchase-form__variant p:first-child { font-family: var(--font-heading); font-weight: var(--font-weight-heading); transition: color var(--theme-motion-duration) ease; }
.product-purchase-form__variant > div:last-child { border: 1px solid var(--product-border); border-radius: 999px; padding: 0.3rem 0.65rem; background: color-mix(in srgb, rgb(var(--cl-t-primary)) 5%, transparent); font-variant-numeric: tabular-nums; transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease; }
.product-purchase-form__variant.is-active { box-shadow: 0 0.6rem 1.4rem -1rem color-mix(in srgb, var(--product-accent) 60%, transparent); }
.product-purchase-form__variant.is-active::before { border-color: var(--product-accent); background: radial-gradient(circle, var(--product-accent) 0 38%, transparent 42%); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--product-accent) 16%, transparent); }
.product-purchase-form__variant.is-active p:first-child { color: var(--product-accent); }
.product-purchase-form__variant.is-active > div:last-child { border-color: color-mix(in srgb, var(--product-accent) 45%, var(--product-border)); background: color-mix(in srgb, var(--product-accent) 14%, transparent); color: var(--product-accent); }

.product-purchase-form__quantity { width: min(100%, 12rem); border: 1px solid var(--product-border); border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--product-raised) 60%, transparent); transition: border-color var(--theme-motion-duration) ease; }
.product-purchase-form__quantity:focus-within { border-color: color-mix(in srgb, var(--product-accent) 55%, var(--product-border)); }
.product-purchase-form__quantity button { border-radius: 0; background: transparent; transition: background-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease, transform 0.15s ease; }
.product-purchase-form__quantity button:hover:not(:disabled) { background: color-mix(in srgb, var(--product-accent) 14%, transparent); color: var(--product-accent); }
.product-purchase-form__quantity button:active:not(:disabled) { transform: scale(0.9); }
.product-purchase-form__quantity input { background: transparent; text-align: center; color: rgb(var(--cl-t-primary)); font-weight: var(--font-weight-button); font-variant-numeric: tabular-nums; }

.product-purchase-form__discount-hint { border-color: color-mix(in srgb, var(--product-accent) 28%, var(--product-border)) !important; background: color-mix(in srgb, var(--product-accent) 7%, transparent) !important; }
.product-purchase-form__deal { border-color: var(--product-border); background: color-mix(in srgb, var(--product-raised) 50%, transparent); transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }
.product-purchase-form__deal:hover { border-color: color-mix(in srgb, var(--product-accent) 42%, var(--product-border)); background: color-mix(in srgb, var(--product-accent) 6%, transparent); transform: translateY(-0.06rem); }

/* CTA buttons — primary ships a permanent (not just on-hover) accent glow and a
   diagonal shimmer sweep on hover; secondary gets a matching tinted rest state
   instead of the default transparent-until-hover look. */
.product-purchase-form__actions { align-items: stretch; }
.product-purchase-form__action { position: relative; overflow: hidden; min-height: 3rem; border-radius: calc(var(--theme-radius) * 0.76); transition: transform var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, color var(--theme-motion-duration) ease; }
.product-purchase-form__action:hover:not(:disabled) { transform: translateY(-0.1rem); }
.product-purchase-form__action:active:not(:disabled) { transform: translateY(0); }
.product-purchase-form__action::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, color-mix(in srgb, white 35%, transparent), transparent); transform: skewX(-18deg); transition: left 0.65s ease; pointer-events: none; }
.product-purchase-form__action:hover:not(:disabled)::after { left: 130%; }
.product-purchase-form__action--primary { background: linear-gradient(135deg, var(--product-accent), color-mix(in srgb, var(--product-accent) 75%, black)) !important; border-color: transparent !important; box-shadow: 0 0.85rem 1.8rem -1.15rem color-mix(in srgb, var(--product-accent) 65%, transparent); }
.product-purchase-form__action--primary:hover:not(:disabled) { background: linear-gradient(135deg, color-mix(in srgb, var(--product-accent) 88%, white), var(--product-accent)) !important; box-shadow: 0 1.1rem 2.2rem -1rem color-mix(in srgb, var(--product-accent) 78%, transparent); }
.product-purchase-form__action--secondary { background: color-mix(in srgb, var(--product-accent) 7%, transparent) !important; }
.product-purchase-form__action--secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--product-accent) 15%, transparent) !important; border-color: var(--product-accent) !important; }
.product-purchase-form__action--secondary svg { transition: transform var(--theme-motion-duration) ease; }
.product-purchase-form__action--secondary:hover:not(:disabled) svg { transform: translateX(0.16rem); }
@media (prefers-reduced-motion: reduce) {
  .product-purchase-form__action::after { display: none; }
}
.product-detail__trust-row { display: flex; flex-wrap: wrap; gap: 0.45rem 0.8rem; padding: 0.85rem clamp(1rem, 2.3vw, 1.35rem); border-top: 1px solid var(--product-border); color: var(--theme-muted); font-size: 0.65rem; }.product-detail__trust-row span { display: inline-flex; align-items: center; gap: 0.33rem; }.product-detail__trust-row i { color: var(--product-accent); }
.product-detail__live-stats { display: grid; gap: 0.45rem; padding: 0.85rem clamp(1rem, 2.3vw, 1.35rem); border-top: 1px solid var(--product-border); color: var(--theme-subtle); font-size: 0.68rem; }.product-detail__live-stats p { display: flex; align-items: center; gap: 0.45rem; margin: 0; }.product-detail__live-stats i { width: 0.85rem; color: var(--product-accent); text-align: center; }
.product-sticky-purchase { position: fixed; right: max(1rem, calc((100vw - var(--theme-content-width)) / 2)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 31; display: flex; align-items: center; gap: 0.8rem; width: min(31rem, calc(100vw - 2rem)); padding: 0.55rem; border: 1px solid var(--product-border); border-radius: calc(var(--theme-radius) * 1.05); background: color-mix(in srgb, var(--theme-surface-raised) 88%, rgb(var(--cl-background))); box-shadow: 0 1.2rem 2.5rem -1.3rem rgb(0 0 0 / 0.55); backdrop-filter: blur(14px); }.product-sticky-purchase__details { display: flex; align-items: center; gap: 0.55rem; min-width: 0; flex: 1; }.product-sticky-purchase__details img { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border-radius: calc(var(--theme-radius) * 0.6); }.product-sticky-purchase__details div { display: grid; min-width: 0; gap: 0.1rem; }.product-sticky-purchase__details strong, .product-sticky-purchase__details span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.product-sticky-purchase__details strong { color: rgb(var(--cl-t-primary)); font-size: 0.72rem; }.product-sticky-purchase__details span { color: var(--theme-muted); font-size: 0.64rem; }.product-sticky-purchase__price { color: rgb(var(--cl-t-primary)); font-size: 0.82rem; font-weight: var(--font-weight-button); font-variant-numeric: tabular-nums; white-space: nowrap; }.product-sticky-purchase__action { min-height: 2.45rem; padding: 0.5rem 0.85rem; border: 1px solid var(--product-accent); border-radius: calc(var(--theme-radius) * 0.65); background: var(--product-accent); color: rgb(var(--cl-t-accent)); font: inherit; font-size: 0.7rem; font-weight: var(--font-weight-button); cursor: pointer; transition: transform var(--theme-motion-duration) ease, filter var(--theme-motion-duration) ease; }.product-sticky-purchase__action:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-0.06rem); }.product-sticky-purchase__action:disabled { opacity: 0.55; cursor: not-allowed; }

.product-detail__timeline, .product-detail__faq, .product-detail__upsells { margin-top: clamp(1.5rem, 4vw, 3rem); }.product-detail__timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0; overflow: clip; border: 1px solid var(--product-border); border-radius: calc(var(--theme-radius) * 1.15); background: var(--product-surface); }.product-detail__timeline-step { position: relative; display: flex; gap: 0.65rem; min-width: 0; padding: 1rem; border-inline-start: 1px solid var(--product-border); }.product-detail__timeline-step:first-child { border-inline-start: 0; }.product-detail__timeline-index { display: grid; width: 1.6rem; height: 1.6rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--product-accent) 13%, transparent); color: var(--product-accent); font-size: 0.66rem; font-weight: var(--font-weight-button); }.product-detail__timeline-step i { color: var(--product-accent); font-size: 0.8rem; }.product-detail__timeline-step h2 { margin: 0.28rem 0 0; color: rgb(var(--cl-t-primary)); font-size: 0.78rem; font-weight: var(--font-weight-button); }.product-detail__timeline-step p { margin: 0.22rem 0 0; color: var(--theme-muted); font-size: 0.66rem; line-height: 1.45; }
.product-detail__section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }.product-detail__section-heading p { margin: 0 0 0.3rem; color: var(--product-accent); font-size: 0.63rem; font-weight: var(--font-weight-button); letter-spacing: 0.12em; text-transform: uppercase; }.product-detail__section-heading h2 { margin: 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: clamp(1.35rem, 2.5vw, 1.8rem); font-weight: var(--font-weight-heading); letter-spacing: 0; }.product-detail__faq-list { display: grid; gap: 0.55rem; }.product-detail__faq-item { border: 1px solid var(--product-border); border-radius: var(--theme-radius); background: var(--product-surface); }.product-detail__faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.4rem; padding: 0.8rem 1rem; color: rgb(var(--cl-t-primary)); font-size: 0.8rem; font-weight: var(--font-weight-button); cursor: pointer; list-style: none; }.product-detail__faq-item summary::-webkit-details-marker { display: none; }.product-detail__faq-item summary i { color: var(--product-accent); font-size: 0.72rem; transition: transform var(--theme-motion-duration) ease; }.product-detail__faq-item[open] summary i { transform: rotate(45deg); }.product-detail__faq-item > div { padding: 0 1rem 1rem; color: var(--theme-muted); font-size: 0.76rem; line-height: 1.6; }.product-detail__faq-item p { margin: 0; }
.product-detail__upsells { padding-top: clamp(1.5rem, 3vw, 2.2rem); border-top: 1px solid var(--product-border); }.product-detail__upsells-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1rem); }.product-detail__upsell-item { min-width: 0; }.product-detail__upsell-item .product-card { height: 100%; }.product-detail__upsells-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.1rem; color: var(--product-accent); font-size: 0.72rem; font-weight: var(--font-weight-button); text-decoration: none; white-space: nowrap; transition: color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease; }.product-detail__upsells-link i { font-size: 0.66rem; transition: transform var(--theme-motion-duration) ease; }.product-detail__upsells-link:hover { color: rgb(var(--cl-t-primary)); }.product-detail__upsells-link:hover i { transform: translateX(0.18rem); }.product-detail__upsells[data-related-showcase="true"][data-related-animate="ready"] .product-detail__upsell-item { opacity: 0; transform: translateY(0.85rem); transition: opacity 360ms ease, transform 360ms cubic-bezier(.2,.8,.2,1); transition-delay: var(--related-item-delay, 0ms); }.product-detail__upsells[data-related-showcase="true"].is-revealed .product-detail__upsell-item { opacity: 1; transform: translateY(0); }.product-detail__upsell-item .product-card { transition: transform var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease; }.product-detail__upsell-item .product-card:hover { transform: translateY(-0.18rem); box-shadow: 0 1rem 2rem -1.45rem rgb(0 0 0 / 0.75); }.product-detail__catalog-card { position: relative; display: grid; height: 100%; min-height: 15rem; overflow: hidden; border: 1px solid var(--product-border); border-radius: calc(var(--theme-radius) * 0.9); background: var(--product-surface); color: rgb(var(--cl-t-primary)); text-decoration: none; transition: transform var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease; }.product-detail__catalog-card:hover { border-color: color-mix(in srgb, var(--product-accent) 50%, var(--product-border)); box-shadow: 0 1rem 2rem -1.4rem rgb(0 0 0 / 0.72); transform: translateY(-0.18rem); }.product-detail__catalog-card img, .product-detail__catalog-placeholder { width: 100%; height: 8.8rem; object-fit: cover; background: color-mix(in srgb, var(--product-raised) 75%, transparent); }.product-detail__catalog-placeholder { display: grid; place-items: center; color: var(--product-accent); font-size: 1.2rem; }.product-detail__catalog-content { display: grid; align-content: start; gap: 0.24rem; min-width: 0; padding: 0.85rem; }.product-detail__catalog-name { overflow: hidden; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: 0.8rem; font-weight: var(--font-weight-heading); text-overflow: ellipsis; white-space: nowrap; }.product-detail__catalog-meta { overflow: hidden; color: var(--theme-muted); font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }.product-detail__catalog-price { color: var(--product-accent); font-size: 0.7rem; font-weight: var(--font-weight-button); }.product-detail__catalog-arrow { position: absolute; right: 0.8rem; bottom: 0.85rem; color: var(--product-accent); font-size: 0.62rem; opacity: 0.7; transition: transform var(--theme-motion-duration) ease, opacity var(--theme-motion-duration) ease; }.product-detail__catalog-card:hover .product-detail__catalog-arrow { opacity: 1; transform: translate(0.12rem, -0.12rem); }

@media (max-width: 1023px) { .product-detail__layout { grid-template-columns: 1fr; }.product-detail__purchase-column { position: static; }.product-detail__purchase-column { order: 2; }.product-sticky-purchase[data-sticky-mode="desktop"] { display: none !important; }.product-detail__upsells-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .product-detail__inner { padding-top: 1rem; }.product-detail__header { align-items: start; flex-direction: column; }.product-detail__header h1 { max-width: none; font-size: clamp(2rem, 10vw, 3rem); }.product-detail__badges { justify-content: start; max-width: none; }.product-detail__highlights { grid-template-columns: 1fr; }.product-detail__timeline { grid-template-columns: 1fr; }.product-detail__timeline-step { border-top: 1px solid var(--product-border); border-inline-start: 0; }.product-detail__timeline-step:first-child { border-top: 0; }.product-sticky-purchase { right: 0.65rem; bottom: max(0.65rem, env(safe-area-inset-bottom)); left: 0.65rem; width: auto; }.product-sticky-purchase__details { display: none; }.product-sticky-purchase__price { flex: 1; padding-left: 0.3rem; }.product-sticky-purchase__action { min-width: 9.3rem; }.product-gallery__lightbox-inner { min-width: 0; min-height: min(66vh, 34rem); padding: 2.8rem 0.7rem 0.7rem; }.product-gallery__lightbox-nav { top: auto; bottom: 0.7rem; }.product-gallery__lightbox-nav.is-previous { left: calc(50% - 2.75rem); }.product-gallery__lightbox-nav.is-next { right: calc(50% - 2.75rem); } }
@media (max-width: 520px) { .product-detail__upsells-grid { grid-template-columns: 1fr; }.product-detail__purchase-summary { align-items: start; flex-direction: column; }.product-detail__availability { text-align: left; }.product-detail__availability > span { justify-content: start; }.product-purchase-form__actions { gap: 0.6rem; }.product-gallery__zoom span { display: none; }.product-gallery__zoom { width: 2rem; padding: 0; place-content: center; } }
@media (prefers-reduced-motion: reduce) { .product-detail *, .product-detail *::before, .product-detail *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
/* =================================================
   SCROLL TOOLS (snippets/scroll-tools.njk)
   Thin progress indicator + back-to-top. The button
   sits above the product purchase bar on product
   pages so the two never overlap.
================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent), rgb(var(--cl-accent)));
  transition: width 90ms linear;
}
.back-to-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 32;
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 0.85);
  background: color-mix(in srgb, var(--theme-surface-raised) 90%, rgb(var(--cl-background)));
  color: rgb(var(--cl-t-primary));
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  visibility: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 0.9rem 1.8rem -1rem rgb(0 0 0 / 0.55);
  transition: opacity var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, visibility 0s linear var(--theme-motion-duration);
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease;
}
.back-to-top:hover, .back-to-top:focus-visible {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 55%, var(--theme-line));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 16%, var(--theme-surface-raised));
  color: rgb(var(--cl-accent));
  outline: 0;
}
/* Keep clear of the fixed purchase bar on product pages. */
.page--product .back-to-top { bottom: 5rem; }
@media (max-width: 720px) {
  .back-to-top { right: 0.8rem; bottom: max(0.8rem, env(safe-area-inset-bottom)); }
  .page--product .back-to-top { bottom: calc(4.7rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress span { transition: none; }
  .back-to-top { transition: none; }
}

/* Reserve room for the mobile purchase bar so it never covers content. */
@media (max-width: 720px) {
  .page--product .product-detail__inner { padding-bottom: calc(6.4rem + env(safe-area-inset-bottom)); }
}

/* Subtle price swap when the selected variant changes. */
[data-price-animate].price-swap { animation: price-swap-in 200ms ease both; }
@keyframes price-swap-in {
  from { opacity: 0; transform: translateY(0.3rem); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-price-animate].price-swap { animation: none; }
}

/* Product sticky purchase bar: the mobile bottom bar carries price +
   Buy Now, and Add to Cart when space allows (dropped below 400px). */
.product-sticky-purchase .product-sticky-purchase__action--cart { display: none; }
@media (max-width: 720px) and (min-width: 401px) {
  .product-sticky-purchase .product-sticky-purchase__action--cart { display: inline-flex; }
  .product-sticky-purchase__price { flex: 1; }
}
@media (max-width: 400px) {
  .product-sticky-purchase .product-sticky-purchase__action--buy { min-width: 0; flex: 1; }
}

/* =================================================
   STATUS PAGE: OVERALL BANNER + COLLAPSIBLE GROUPS
   (components/status-page.njk)
   Banner state and counts are derived from the live
   status data; nothing here hardcodes shop status.
================================================= */
.status-banner {
  --status-banner-color: rgb(var(--cl-accent));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  padding: 0.95rem clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid color-mix(in srgb, var(--status-banner-color) 32%, var(--theme-line));
  border-radius: var(--theme-radius);
  background: linear-gradient(120deg, color-mix(in srgb, var(--status-banner-color) 9%, transparent), transparent 62%), color-mix(in srgb, var(--theme-surface-raised) 64%, transparent);
  transition: border-color var(--theme-motion-duration) ease;
}
.status-banner__dot {
  position: relative;
  width: 0.72rem;
  height: 0.72rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--status-banner-color);
  box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--status-banner-color) 14%, transparent);
}
.status-banner[data-state="loading"] .status-banner__dot::after {
  content: '';
  position: absolute;
  inset: -0.3rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--status-banner-color) 30%, transparent);
  border-top-color: var(--status-banner-color);
  animation: status-banner-spin 900ms linear infinite;
}
@keyframes status-banner-spin { to { transform: rotate(360deg); } }
.status-banner__copy { display: grid; gap: 0.15rem; min-width: 0; flex: 1 1 12rem; }
.status-banner__copy strong { color: var(--status-page-text, rgb(var(--cl-t-primary))); font-family: var(--font-heading); font-size: 1.02rem; line-height: 1.25; }
.status-banner__copy span { color: var(--status-page-muted, var(--theme-muted)); font-size: 0.72rem; }
.status-banner__counts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1rem; }
.status-banner__count { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--status-page-muted, var(--theme-muted)); font-size: 0.72rem; font-weight: var(--font-weight-button); white-space: nowrap; }
.status-banner__count b { color: var(--status-page-text, rgb(var(--cl-t-primary))); font-variant-numeric: tabular-nums; }
.status-banner__count .status-filter__dot { background: var(--count-color, var(--status-banner-color)); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--count-color, var(--status-banner-color)) 12%, transparent); }
.status-banner__refresh { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; color: var(--status-page-muted, var(--theme-muted)); font-size: 0.68rem; white-space: nowrap; }
.status-banner__refresh i { font-size: 0.72rem; color: rgb(var(--cl-accent)); }
.status-banner__refresh.is-refreshing i { animation: status-banner-spin 900ms linear infinite; }
.status-banner__refresh[data-live="true"]::before { content: 'Auto'; margin-right: 0.1rem; padding: 0.12rem 0.4rem; border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 32%, var(--theme-line)); border-radius: 999px; color: rgb(var(--cl-accent)); font-size: 0.6rem; font-weight: var(--font-weight-button); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 760px) {
  .status-banner { align-items: start; }
  .status-banner__refresh { margin-left: 0; }
}

/* Collapsible category sections (mobile only). */
.status-group__toggle { display: none; }
@media (max-width: 760px) {
  .status-group__toggle {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid var(--theme-line);
    border-radius: calc(var(--theme-radius) * 0.62);
    background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
    color: var(--theme-muted);
    font-size: 0.66rem;
    cursor: pointer;
    transition: color var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease;
  }
  .status-group__toggle:hover, .status-group__toggle:focus-visible { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 44%, var(--theme-line)); color: rgb(var(--cl-accent)); outline: 0; }
  .status-group__toggle i { transition: transform var(--theme-motion-duration) ease; }
  .status-group__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
  .status-group.is-collapsed .status-group__items { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .status-banner[data-state="loading"] .status-banner__dot::after,
  .status-banner__refresh.is-refreshing i { animation: none; }
}

/* =================================================
   PRODUCT SECTION — premium search field
   (components/products.njk) Search state/logic
   untouched; visual layer only.
================================================= */
.search-field--premium {
  border: 1px solid color-mix(in srgb, var(--theme-line) 82%, rgb(255 255 255 / 0.04));
  border-radius: calc(var(--theme-radius) * 1.05);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent 55%),
    color-mix(in srgb, var(--theme-surface) 88%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.035), 0 0.45rem 1.1rem -0.75rem rgb(0 0 0 / 0.5);
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.search-field--premium:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 24%, var(--theme-line));
}
.search-field--premium:focus-within {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 55%, var(--theme-line));
  background-color: color-mix(in srgb, var(--theme-surface-raised) 92%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.035),
    0 0 0 3px color-mix(in srgb, rgb(var(--cl-accent)) 11%, transparent);
}
.search-field__icon {
  color: rgb(var(--cl-t-primary) / 0.55);
  border: 1px solid var(--theme-line);
  background: color-mix(in srgb, var(--theme-surface-raised) 72%, transparent);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.search-field--premium:focus-within .search-field__icon {
  color: rgb(var(--cl-accent));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 34%, var(--theme-line));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent);
}

/* =================================================
   PRODUCT SECTION — group + A-Z navigation
   (components/products.njk) Filters combine with
   the existing search state.
================================================= */
.shop-nav {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.1rem;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shop-nav::-webkit-scrollbar { display: none; }
.shop-nav__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  max-width: 15rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface) 62%, transparent);
  color: rgb(var(--cl-t-primary) / 0.78);
  font: inherit;
  font-size: 0.78rem;
  font-weight: var(--font-weight-button);
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.shop-nav__button span { overflow: hidden; text-overflow: ellipsis; }
.shop-nav__button small {
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-t-primary)) 8%, transparent);
  color: rgb(var(--cl-t-primary) / 0.55);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}
.shop-nav__button img { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; border-radius: 0.35rem; object-fit: cover; }
.shop-nav__button:hover {
  color: rgb(var(--cl-t-primary));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 30%, var(--theme-line));
  background: color-mix(in srgb, var(--theme-surface-raised) 85%, transparent);
}
.shop-nav__button.is-active {
  color: rgb(var(--cl-t-primary));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 11%, transparent);
  box-shadow: 0 0.4rem 1rem -0.65rem color-mix(in srgb, rgb(var(--cl-accent)) 45%, transparent);
}
.shop-nav__button.is-active small {
  background: color-mix(in srgb, rgb(var(--cl-accent)) 22%, transparent);
  color: rgb(var(--cl-accent));
}
.shop-nav__button:focus-visible { outline: 2px solid color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); outline-offset: 2px; }

.shop-nav--az { gap: 0.22rem; margin-top: -0.35rem; }
.shop-nav__letter {
  display: inline-grid;
  min-width: 1.7rem;
  place-items: center;
  padding: 0.28rem 0.4rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: rgb(var(--cl-t-primary) / 0.5);
  font: inherit;
  font-size: 0.68rem;
  font-weight: var(--font-weight-button);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.shop-nav__letter:hover { color: rgb(var(--cl-t-primary)); background: color-mix(in srgb, rgb(var(--cl-t-primary)) 6%, transparent); }
.shop-nav__letter.is-active {
  color: rgb(var(--cl-accent));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 12%, transparent);
}
.shop-nav__letter:focus-visible { outline: 2px solid color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); outline-offset: 1px; }

/* =================================================
   FEATURE GRID (why choose us) — cleaner SaaS cards
   Scoped to .feature-grid; icon chips removed in
   favor of a quiet accent mark.
================================================= */
.feature-grid .feature-card {
  gap: 0.1rem;
  padding: clamp(1.25rem, 2.2vw, 1.7rem);
  border-color: color-mix(in srgb, var(--theme-line) 72%, transparent);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent 42%),
    var(--feature-card-background, var(--theme-surface));
  transition: border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease;
}
.feature-grid .feature-card:hover { transform: translateY(-0.14rem); }
.feature-grid .feature-card__icon {
  width: auto;
  height: auto;
  margin-bottom: 0.2rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgb(var(--cl-accent));
  font-size: 0.95rem;
  opacity: 0.92;
}
.feature-grid .feature-card__title { margin-top: 0.55rem; font-size: 1.02rem; letter-spacing: -0.01em; }
.feature-grid .feature-card__description { max-width: 34ch; margin-top: 0.45rem; font-size: 0.88rem; line-height: 1.6; }

/* =================================================
   CHECKOUT CARD refinements
   (components/product-page.njk + snippets/product-form.njk)
   Softer separators, cleaner variant cards, refined
   quantity control, smoother hovers, conversion-focused
   volume discount module. No behavior changes.
================================================= */
.product-purchase-form__body { border-top-color: color-mix(in srgb, var(--product-border) 55%, transparent) !important; }
.product-purchase-form__section { border-bottom-color: color-mix(in srgb, var(--product-border) 45%, transparent) !important; }

.product-purchase-form__variant {
  border-color: color-mix(in srgb, var(--product-border) 62%, transparent);
  background: color-mix(in srgb, var(--product-raised) 34%, transparent);
  border-radius: calc(var(--theme-radius) * 0.85);
}
.product-purchase-form__variant:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--product-accent) 32%, var(--product-border));
  background: color-mix(in srgb, var(--product-raised) 62%, transparent);
}
.product-purchase-form__variant.is-active {
  border-color: color-mix(in srgb, var(--product-accent) 42%, var(--product-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--product-accent) 7%, transparent), transparent 60%), color-mix(in srgb, var(--product-raised) 55%, transparent);
  box-shadow: 0 0.5rem 1.2rem -0.95rem color-mix(in srgb, var(--product-accent) 40%, transparent);
}
.product-purchase-form__variant.is-active::before {
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--product-accent) 14%, transparent);
}

.product-purchase-form__quantity {
  border-color: color-mix(in srgb, var(--product-border) 70%, transparent);
  background: color-mix(in srgb, var(--product-raised) 40%, transparent);
}

.product-purchase-form__quantity:focus-within {
  border-color: color-mix(in srgb, var(--product-accent) 40%, var(--product-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--product-accent) 9%, transparent);
}

.product-purchase-form__action { will-change: transform; }
.product-purchase-form__action--primary:hover:not(:disabled) { transform: translateY(-0.08rem); }
.product-purchase-form__action--primary:active:not(:disabled) { transform: translateY(0); }
.product-purchase-form__action--secondary:hover:not(:disabled) { transform: translateY(-0.08rem); background: color-mix(in srgb, var(--product-accent) 11%, transparent) !important; }
.product-purchase-form__action--secondary:active:not(:disabled) { transform: translateY(0); }

.product-volume-discount {
  --discount-progress: 0%;
  display: grid;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding: 0.7rem 0.85rem 0.75rem;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 22%, var(--product-border));
  border-radius: calc(var(--theme-radius) * 0.85);
  background: linear-gradient(120deg, color-mix(in srgb, rgb(var(--cl-accent)) 7%, transparent), transparent 65%), color-mix(in srgb, var(--product-raised) 45%, transparent);
}
.product-volume-discount__head { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.product-volume-discount__badge {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-accent)) 16%, transparent);
  color: rgb(var(--cl-accent));
  font-size: 0.66rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.product-volume-discount__hint { min-width: 0; color: rgb(var(--cl-t-primary) / 0.82); font-size: 0.76rem; line-height: 1.45; }
.product-volume-discount__track {
  position: relative;
  height: 0.28rem;
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-t-primary)) 8%, transparent);
  overflow: hidden;
}
.product-volume-discount__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--discount-progress);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, rgb(var(--cl-accent)) 70%, transparent), rgb(var(--cl-accent)));
  transition: width 380ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.product-volume-discount__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -55%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.35), transparent);
  transform: skewX(-18deg);
  animation: volume-discount-sheen 2.6s ease-in-out infinite;
}
@keyframes volume-discount-sheen { 0%, 55% { left: -55%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  .product-volume-discount__fill { transition: none; }
  .product-volume-discount__fill::after { display: none; }
  .shop-nav__button, .feature-grid .feature-card, .product-purchase-form__action { transition: none; }
}

/* Mobile: inline stats stack cleanly without divider seams */
@media (max-width: 640px) {
  .hero-section .hero-stats--inline { gap: 0.75rem 1.1rem; }
  .hero-section .hero-stats--inline .hero-stat { padding: 0 1.1rem; border-left-width: 1px; }
  .hero-section .hero-stats--pills .hero-stat { padding: 0.5rem 0.9rem; }
}

/* =================================================
   STATS SECTION — variant styles (components/stats-section.njk)
   cards / inline / pills, matching the hero stat language.
================================================= */
.stats-section__grid { justify-items: var(--stats-align, center); text-align: var(--stats-align, center); gap: 0.8rem; }

/* cards variant: framed, horizontal stat cards — icon chip beside copy */
.stats-section--cards .stats-section__grid { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: clamp(0.7rem, 1.4vw, 1rem); }
.stats-section--cards .stats-section__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 4.6rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 75%, transparent);
  border-radius: calc(var(--theme-radius) * 1.05);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.028), transparent 55%),
    var(--theme-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.035), 0 0.65rem 1.5rem -1.2rem rgb(0 0 0 / 0.55);
  text-align: left;
  transition: border-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease;
}
.stats-section--cards .stats-section__item:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 32%, var(--theme-line));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.035), 0 0.95rem 1.9rem -1.25rem rgb(0 0 0 / 0.62);
  transform: translateY(-0.12rem);
}
.stats-section--cards .stats-section__item > i {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  margin: 0;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 26%, var(--theme-line));
  border-radius: calc(var(--theme-radius) * 0.75);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
  color: rgb(var(--cl-accent));
  font-size: 0.85rem;
}
.stats-section--cards .stats-section__item strong {
  display: block;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stats-section--cards .stats-section__item span {
  display: block;
  margin-top: 0.14rem;
  color: var(--theme-muted);
  font-size: 0.69rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* inline variant: single row, hairline separators */
.stats-section--inline .stats-section__grid {
  grid-template-columns: initial;
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--stats-align, center);
}
.stats-section--inline .stats-section__item {
  display: grid;
  gap: 0.3rem;
  justify-items: var(--stats-align, center);
  padding: 0 2.1rem;
  border: 0;
}
.stats-section--inline .stats-section__item:first-child { padding-inline-start: 0; }
.stats-section--inline .stats-section__item:last-child { padding-inline-end: 0; }
.stats-section--inline .stats-section__item + .stats-section__item {
  border-inline-start: 1px solid color-mix(in srgb, var(--theme-line) 90%, transparent);
}
.stats-section--inline .stats-section__item > i { margin: 0; font-size: 0.85rem; }
.stats-section--inline .stats-section__item strong { font-size: clamp(1.4rem, 2.6vw, 1.85rem); letter-spacing: -0.025em; line-height: 1.1; }

/* pills variant: compact rounded chips */
.stats-section--pills .stats-section__grid {
  grid-template-columns: initial;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: var(--stats-align, center);
}
.stats-section--pills .stats-section__item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 58%),
    var(--theme-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.035);
  transition: border-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease;
}
.stats-section--pills .stats-section__item:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 34%, var(--theme-line));
  transform: translateY(-0.1rem);
}
.stats-section--pills .stats-section__item > i { margin: 0; color: rgb(var(--cl-accent)); font-size: 0.82rem; }
.stats-section--pills .stats-section__item strong { font-family: var(--font-heading); font-size: 1.05rem; font-weight: var(--font-weight-heading); letter-spacing: -0.015em; line-height: 1.1; }
.stats-section--pills .stats-section__item span { color: var(--theme-muted); font-size: 0.68rem; letter-spacing: 0.05em; }

@media (max-width: 640px) {
  .stats-section--inline .stats-section__item { padding: 0 1.1rem; }
  .stats-section--pills .stats-section__grid { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-section .stats-section__item { transition: none; }
}

/* =================================================
   PRODUCT MARQUEE (components/product-rail.njk)
   Continuous auto-cycling showcase. Hover pauses the
   scroll so a card can be clicked; reduced motion
   falls back to native swipe scrolling.
================================================= */
.product-marquee__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}
.product-marquee__header .module-heading__eyebrow,
.product-marquee__header .module-heading__title,
.product-marquee__header .module-heading__description { margin: 0; text-align: left; }
.product-marquee__header .module-heading__eyebrow { margin-bottom: 0.35rem; }
.product-marquee__header .module-heading__title { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.product-marquee__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  color: rgb(var(--cl-accent));
  font-size: 0.78rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--theme-motion-duration) ease;
}
.product-marquee__view-all i { font-size: 0.66rem; transition: transform var(--theme-motion-duration) ease; }
.product-marquee__view-all:hover { color: rgb(var(--cl-t-primary)); }
.product-marquee__view-all:hover i { transform: translateX(0.18rem); }

.product-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.product-marquee__track {
  display: flex;
  width: max-content;
  gap: 0.9rem;
  animation: product-marquee-scroll var(--marquee-duration, 38s) linear infinite;
}
.product-marquee__group {
  display: flex;
  flex: 0 0 auto;
  gap: 0.9rem;
  padding-right: 0.9rem;
}
.product-marquee__viewport:hover .product-marquee__track,
.product-marquee__viewport:focus-within .product-marquee__track {
  animation-play-state: paused;
}
@keyframes product-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 0.45rem)); } }

.product-marquee__card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  width: clamp(16rem, 24vw, 23rem);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.04));
  border-radius: calc(var(--theme-radius) * 1.25);
  background: var(--theme-surface);
  box-shadow: 0 0.85rem 1.9rem -1.3rem rgb(0 0 0 / 0.6);
  text-decoration: none;
  transition: border-color var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease;
}
.product-marquee__card:hover,
.product-marquee__card:focus-visible {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 42%, var(--theme-line));
  box-shadow: 0 1.15rem 2.2rem -1.3rem rgb(0 0 0 / 0.7);
  transform: translateY(-0.24rem) scale(1.015);
}

.product-marquee__media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--theme-surface-raised) 72%, transparent);
}
.product-marquee__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 480ms cubic-bezier(0.22, 0.8, 0.3, 1); }
.product-marquee__card:hover .product-marquee__media img { transform: scale(1.06); }
.product-marquee__media i { color: rgb(var(--cl-accent) / 0.55); font-size: 1.6rem; }

.product-marquee__flag {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.6);
  color: rgb(255 255 255 / 0.85);
  font-size: 0.58rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.product-marquee__stock {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.product-marquee__dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0.2rem rgb(34 197 94 / 14%); }

.product-marquee__overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: 0.18rem;
  padding: 2.6rem 1rem 0.95rem;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.5) 45%, rgb(0 0 0 / 0.78));
  color: #fff;
}
.product-marquee__label {
  color: rgb(255 255 255 / 0.65);
  font-size: 0.6rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.product-marquee__name {
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
  white-space: nowrap;
}
.product-marquee__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.25rem; }
.product-marquee__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.66rem;
  font-weight: var(--font-weight-button);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-0.3rem);
  transition: opacity var(--theme-motion-duration) ease, transform var(--theme-motion-duration) ease;
}
.product-marquee__cta i { font-size: 0.58rem; }
.product-marquee__card:hover .product-marquee__cta,
.product-marquee__card:focus-visible .product-marquee__cta { opacity: 1; transform: translateX(0); }
.product-marquee__price { display: inline-flex; align-items: baseline; gap: 0.3rem; color: #fff; font-size: 1rem; font-weight: var(--font-weight-button); font-variant-numeric: tabular-nums; text-shadow: 0 1px 10px rgb(0 0 0 / 0.5); white-space: nowrap; }
.product-marquee__price small { color: rgb(255 255 255 / 0.6); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 640px) {
  .product-marquee__header { flex-direction: column; align-items: start; gap: 0.45rem; }
  .product-marquee__card { width: min(17rem, 80vw); }
}
@media (prefers-reduced-motion: reduce) {
  .product-marquee__track { animation: none; }
  .product-marquee__viewport { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .product-marquee__viewport::-webkit-scrollbar { display: none; }
  .product-marquee__group[data-marquee-clone] { display: none; }
  .product-marquee__card { transition: none; }
}
/* =================================================
   HERO BACKGROUND VARIANTS (components/hero.njk)
   Very low opacity, accent-aware, pointer-events none.
================================================= */
.hero-bg-layer, .hero-spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero-bg--grid .hero-bg-layer {
  background-image:
    linear-gradient(color-mix(in srgb, rgb(var(--cl-accent)) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, rgb(var(--cl-accent)) 5%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
}
.hero-bg--dots .hero-bg-layer {
  background-image: radial-gradient(color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 10%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 10%, #000 35%, transparent 100%);
}
.hero-bg--spotlight .hero-spot,
.hero-bg--grid-spotlight .hero-spot {
  background: radial-gradient(ellipse 34% 55% at var(--spot-x, 50%) var(--spot-y, 20%), color-mix(in srgb, rgb(var(--cl-accent)) 7%, transparent), transparent 70%);
  transition: background 200ms ease;
}
.hero-bg--grid-spotlight .hero-bg-layer {
  background-image:
    linear-gradient(color-mix(in srgb, rgb(var(--cl-accent)) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, rgb(var(--cl-accent)) 4%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
}
.hero-bg--aurora .hero-bg-layer {
  background:
    radial-gradient(ellipse 55% 40% at 20% 0%, color-mix(in srgb, rgb(var(--cl-accent)) 8%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 35% at 85% 15%, color-mix(in srgb, rgb(var(--cl-accent)) 5%, transparent), transparent 70%);
}
.hero-bg--contour .hero-bg-layer {
  background-image: repeating-radial-gradient(circle at 50% -20%, transparent 0 38px, color-mix(in srgb, rgb(var(--cl-accent)) 4%, transparent) 38px 39px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
}
.hero-bg--hatch .hero-bg-layer {
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, rgb(var(--cl-accent)) 4%, transparent) 0 1px, transparent 1px 12px);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
}
.hero-bg--none .hero-bg-layer, .hero-bg--none .hero-spot { display: none; }

/* =================================================
   PRODUCT STAGE (components/product-rail.njk, layout=stage)
================================================= */
.product-stage__viewport {
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem max(1.2rem, calc((100vw - var(--theme-content-width)) / 2)) 0.6rem;
  margin-inline: calc(-1 * max(1.2rem, calc((100vw - var(--theme-content-width)) / 2)));
}
.product-stage__viewport::-webkit-scrollbar { display: none; }
.product-stage__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 20rem);
  gap: 1.1rem;
  width: max-content;
}
.product-stage__viewport .product-marquee__card {
  --stage-emphasis: 0;
  scroll-snap-align: center;
  transform: scale(calc(0.88 + 0.12 * var(--stage-emphasis)));
  opacity: calc(0.62 + 0.38 * var(--stage-emphasis));
  transition: transform 300ms cubic-bezier(0.22, 0.8, 0.3, 1), opacity 300ms ease, border-color var(--theme-motion-duration) ease, box-shadow var(--theme-motion-duration) ease;
}
.product-stage__viewport .product-marquee__card.is-focus {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 30%, var(--theme-line));
  box-shadow: 0 1rem 2.2rem -1.35rem rgb(0 0 0 / 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .product-stage__viewport .product-marquee__card { transition: none; }
}

/* =================================================
   VOLUME DISCOUNT — tiers, savings, unlock flash
================================================= */
.product-volume-discount__tiers { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.product-volume-discount__tier {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.14rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--product-border) 70%, transparent);
  border-radius: 999px;
  color: var(--theme-muted);
  font-size: 0.62rem;
  font-weight: var(--font-weight-button);
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.product-volume-discount__tier i { font-size: 0.55rem; }
.product-volume-discount__tier.is-reached {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--product-border));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
  color: rgb(var(--cl-accent));
}
.product-volume-discount__savings {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  color: var(--theme-muted);
  font-size: 0.7rem;
}
.product-volume-discount__savings i { color: rgb(var(--cl-accent)); font-size: 0.65rem; }
.product-volume-discount__savings span span { color: rgb(var(--cl-t-primary)); font-weight: var(--font-weight-button); }
.product-volume-discount__unlocked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(var(--cl-accent));
  font-size: 0.78rem;
  font-weight: var(--font-weight-button);
}
.product-volume-discount.is-unlocked { animation: volume-discount-pop 620ms cubic-bezier(0.22, 0.8, 0.3, 1); }
@keyframes volume-discount-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.018); border-color: color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .product-volume-discount.is-unlocked { animation: none; } }

/* =================================================
   GLOBAL SEARCH OVERLAY (snippets/global-search.njk)
================================================= */
.global-search { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding: clamp(1rem, 12vh, 7rem) 1rem; }
.global-search__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.global-search__panel {
  position: relative;
  width: min(38rem, 100%);
  max-height: min(30rem, 72vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: calc(var(--theme-radius) * 1.1);
  background: color-mix(in srgb, rgb(var(--cl-card)) 92%, rgb(0 0 0 / 0.2));
  box-shadow: 0 1.6rem 3.2rem -1.4rem rgb(0 0 0 / 0.75);
  animation: global-search-in 200ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
@keyframes global-search-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.985); } to { opacity: 1; transform: none; } }
.global-search__head { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--theme-line); }
.global-search__head > i { color: rgb(var(--cl-t-primary) / 0.45); font-size: 0.85rem; }
.global-search__head input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: rgb(var(--cl-t-primary)); font: inherit; font-size: 0.92rem; }
.global-search__head input::placeholder { color: rgb(var(--cl-t-primary) / 0.4); }
.global-search__clear, .global-search__esc {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: rgb(var(--cl-t-primary) / 0.5); cursor: pointer; font: inherit;
}
.global-search__clear { width: 1.5rem; height: 1.5rem; border-radius: 0.4rem; transition: color 150ms ease, background-color 150ms ease; }
.global-search__clear:hover { color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / 0.06); }
.global-search__esc { padding: 0.18rem 0.45rem; border: 1px solid var(--theme-line); border-radius: 0.35rem; font-size: 0.62rem; }
.global-search__body { overflow-y: auto; padding: 0.4rem; }
.global-search__loading, .global-search__empty { display: flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 1.6rem 1rem; color: var(--theme-muted); font-size: 0.82rem; }
.global-search__results { margin: 0; padding: 0; list-style: none; }
.global-search__result {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: calc(var(--theme-radius) * 0.7);
  color: rgb(var(--cl-t-primary)); text-decoration: none;
  transition: background-color 150ms ease;
}
.global-search__result.is-active, .global-search__result:hover { background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent); }
.global-search__thumb {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem;
  overflow: hidden; border: 1px solid var(--theme-line); border-radius: calc(var(--theme-radius) * 0.55);
  background: var(--theme-surface-raised);
}
.global-search__thumb img { width: 100%; height: 100%; object-fit: cover; }
.global-search__thumb i { color: rgb(var(--cl-accent) / 0.6); font-size: 0.8rem; }
.global-search__info { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.global-search__name { overflow: hidden; font-size: 0.82rem; font-weight: var(--font-weight-button); text-overflow: ellipsis; white-space: nowrap; }
.global-search__stock { overflow: hidden; color: var(--theme-muted); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
.global-search__price { flex: 0 0 auto; color: rgb(var(--cl-accent)); font-size: 0.78rem; font-weight: var(--font-weight-button); font-variant-numeric: tabular-nums; }
.global-search__hint {
  display: flex; gap: 1rem; padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--theme-line);
  color: var(--theme-subtle); font-size: 0.62rem;
}
.global-search__hint kbd { padding: 0.05rem 0.3rem; border: 1px solid var(--theme-line); border-radius: 0.3rem; font-family: inherit; font-size: 0.58rem; }
@media (prefers-reduced-motion: reduce) { .global-search__panel { animation: none; } }

/* =================================================
   CART DRAWER (snippets/cart-drawer.njk)
================================================= */
.cart-drawer { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.cart-drawer__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: auto; }
.cart-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: min(25.5rem, 100vw);
  border-left: 1px solid var(--theme-line);
  background: color-mix(in srgb, rgb(var(--cl-card)) 95%, rgb(0 0 0 / 0.1));
  box-shadow: -1.4rem 0 3rem -1.4rem rgb(0 0 0 / 0.7);
  pointer-events: auto;
}
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.15rem; border-bottom: 1px solid var(--theme-line); }
.cart-drawer__head h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: 1.02rem; font-weight: var(--font-weight-heading); }
.cart-drawer__count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: color-mix(in srgb, rgb(var(--cl-accent)) 16%, transparent); color: rgb(var(--cl-accent)); font-size: 0.66rem; font-variant-numeric: tabular-nums; }
.cart-drawer__close { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--theme-line); border-radius: calc(var(--theme-radius) * 0.55); background: none; color: rgb(var(--cl-t-primary) / 0.6); cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }
.cart-drawer__close:hover { color: rgb(var(--cl-t-primary)); border-color: color-mix(in srgb, rgb(var(--cl-accent)) 35%, var(--theme-line)); }
.cart-drawer__body { position: relative; flex: 1; overflow-y: auto; padding: 0.85rem; }
.cart-drawer__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; padding: 3rem 1rem; color: var(--theme-muted); font-size: 0.84rem; }

/* Non-intrusive updating state: absolute chip + dim, zero layout shift. */
.cart-drawer__updating {
  position: absolute;
  top: 1rem;
  right: 1.05rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 30%, var(--theme-line));
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-card)) 82%, transparent);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: rgb(var(--cl-accent));
  font-size: 0.72rem;
  box-shadow: 0 0.5rem 1.2rem -0.6rem rgb(0 0 0 / 0.6);
  animation: cart-updating-in 160ms ease;
  pointer-events: none;
}
@keyframes cart-updating-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.cart-drawer__body.is-updating .cart-drawer__items,
.cart-drawer__body.is-updating .cart-drawer__recs {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.cart-drawer__items, .cart-drawer__recs { transition: opacity 150ms ease; }

/* You May Also Like rail */
.cart-drawer__recs { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--theme-line); }
.cart-drawer__recs-title {
  margin: 0 0 0.6rem;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.01em;
}
.cart-drawer__recs-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cart-drawer__recs-track {
  display: flex;
  width: max-content;
  gap: 0.6rem;
  animation: cart-recs-scroll var(--cart-recs-duration, 34s) linear infinite;
}
.cart-drawer__recs-viewport:hover .cart-drawer__recs-track { animation-play-state: paused; }
@keyframes cart-recs-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 0.3rem)); } }

.cart-drawer__rec {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  width: 11.8rem;
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 80%, transparent);
  border-radius: calc(var(--theme-radius) * 0.75);
  background: var(--theme-surface);
  color: rgb(var(--cl-t-primary));
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}
.cart-drawer__rec:hover { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 34%, var(--theme-line)); transform: translateY(-1px); }
.cart-drawer__rec-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 0.5);
  background: var(--theme-surface-raised);
}
.cart-drawer__rec-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer__rec-thumb i { color: rgb(var(--cl-accent) / 0.6); font-size: 0.75rem; }
.cart-drawer__rec-info { display: grid; gap: 0.14rem; min-width: 0; flex: 1; }
.cart-drawer__rec-name { overflow: hidden; font-size: 0.72rem; font-weight: var(--font-weight-button); text-overflow: ellipsis; white-space: nowrap; }
.cart-drawer__rec-price { overflow: hidden; color: rgb(var(--cl-accent)); font-size: 0.66rem; font-weight: var(--font-weight-button); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.cart-drawer__rec-action {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
  color: rgb(var(--cl-accent));
  font-size: 0.58rem;
  transition: background-color 180ms ease;
}
.cart-drawer__rec:hover .cart-drawer__rec-action { background: color-mix(in srgb, rgb(var(--cl-accent)) 20%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .cart-drawer__recs-track { animation: none; }
  .cart-drawer__recs-viewport { overflow-x: auto; scrollbar-width: none; }
  .cart-drawer__recs-viewport::-webkit-scrollbar { display: none; }
}
.cart-drawer__empty i { font-size: 1.6rem; color: rgb(var(--cl-t-primary) / 0.25); }
.cart-drawer__empty-cta { padding: 0.5rem 1rem; border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 45%, transparent); border-radius: calc(var(--theme-radius) * 0.6); color: rgb(var(--cl-accent)); font-size: 0.78rem; font-weight: var(--font-weight-button); text-decoration: none; transition: background-color 150ms ease; }
.cart-drawer__empty-cta:hover { background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent); }
.cart-drawer__items { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; }
.cart-drawer__item { display: flex; gap: 0.75rem; padding: 0.65rem; border: 1px solid color-mix(in srgb, var(--theme-line) 80%, transparent); border-radius: calc(var(--theme-radius) * 0.85); background: var(--theme-surface); }
.cart-drawer__thumb { display: grid; place-items: center; flex: 0 0 auto; width: 3.4rem; height: 3.4rem; overflow: hidden; border: 1px solid var(--theme-line); border-radius: calc(var(--theme-radius) * 0.6); background: var(--theme-surface-raised); }
.cart-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer__thumb i { color: rgb(var(--cl-accent) / 0.6); }
.cart-drawer__info { display: grid; gap: 0.28rem; min-width: 0; flex: 1; align-content: center; }
.cart-drawer__name { overflow: hidden; color: rgb(var(--cl-t-primary)); font-size: 0.8rem; font-weight: var(--font-weight-button); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.cart-drawer__name:hover { color: rgb(var(--cl-accent)); }
.cart-drawer__variant { overflow: hidden; color: var(--theme-muted); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.cart-drawer__controls { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.15rem; }
.cart-drawer__stepper { display: inline-flex; align-items: center; border: 1px solid var(--theme-line); border-radius: calc(var(--theme-radius) * 0.5); overflow: hidden; background: var(--theme-surface-raised); }
.cart-drawer__stepper button { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; background: none; color: rgb(var(--cl-t-primary) / 0.65); font-size: 0.58rem; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.cart-drawer__stepper button:hover { color: rgb(var(--cl-accent)); background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent); }
.cart-drawer__stepper span { min-width: 1.6rem; text-align: center; color: rgb(var(--cl-t-primary)); font-size: 0.75rem; font-weight: var(--font-weight-button); font-variant-numeric: tabular-nums; }
.cart-drawer__price { color: rgb(var(--cl-t-primary)); font-size: 0.8rem; font-weight: var(--font-weight-button); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-drawer__remove { display: inline-grid; place-items: center; align-self: center; width: 1.9rem; height: 1.9rem; flex: 0 0 auto; border: 0; border-radius: calc(var(--theme-radius) * 0.45); background: none; color: rgb(var(--cl-t-primary) / 0.4); font-size: 0.72rem; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.cart-drawer__remove:hover { color: #ef4444; background: rgb(239 68 68 / 10%); }
.cart-drawer__foot { display: grid; gap: 0.7rem; padding: 1rem 1.15rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--theme-line); }
.cart-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; color: var(--theme-muted); font-size: 0.78rem; }
.cart-drawer__subtotal strong { color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: 1.15rem; font-weight: var(--font-weight-heading); font-variant-numeric: tabular-nums; }
.cart-drawer__checkout {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.7rem;
  border-radius: calc(var(--theme-radius) * 0.65);
  background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent));
  font-size: 0.85rem; font-weight: var(--font-weight-button); text-decoration: none;
  transition: filter 200ms ease, transform 200ms ease;
}
.cart-drawer__checkout:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cart-drawer__checkout i { font-size: 0.7rem; }
.cart-drawer__foot-note { margin: 0; color: var(--theme-subtle); font-size: 0.62rem; text-align: center; }

/* =================================================
   COUPON POPUP (components/coupon-popup.njk)
   Ticket-style code with integrated copy action.
================================================= */
.coupon-popup { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.coupon-popup__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.64); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: coupon-backdrop-in 240ms ease; }
@keyframes coupon-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.coupon-popup__card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  width: min(25rem, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 2.3rem 1.85rem 1.6rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.06));
  border-radius: calc(var(--theme-radius) * 1.3);
  background:
    radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent), transparent 62%),
    color-mix(in srgb, rgb(var(--cl-card)) 95%, rgb(0 0 0 / 0.2));
  box-shadow: 0 1.8rem 4rem -1.6rem rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.02) inset;
  text-align: center;
  animation: coupon-popup-in 260ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
@keyframes coupon-popup-in {
  from { opacity: 0; transform: translateY(0.8rem) scale(0.965); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.coupon-popup__accent-bar {
  position: absolute;
  top: 0; left: 1.4rem; right: 1.4rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(var(--cl-accent)), transparent);
  opacity: 0.85;
}
.coupon-popup__card--framed { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 34%, var(--theme-line)); }

.coupon-popup__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-card)) 70%, transparent);
  color: rgb(var(--cl-t-primary) / 0.55);
  cursor: pointer; font-size: 0.75rem;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.coupon-popup__close:hover { color: rgb(var(--cl-t-primary)); border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line)); transform: rotate(90deg); }

.coupon-popup__logo { width: 3.6rem; height: 3.6rem; object-fit: contain; border-radius: calc(var(--theme-radius) * 0.7); margin-bottom: 0.15rem; }

.coupon-popup__badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.24rem 0.7rem;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
  color: rgb(var(--cl-accent));
  font-size: 0.62rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.coupon-popup__badge i { font-size: 0.6rem; }

.coupon-popup__title {
  margin: 0.1rem 0 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.coupon-popup__text { margin: 0; color: var(--theme-muted); font-size: 0.82rem; line-height: 1.55; max-width: 26ch; }

/* Ticket-style copy code */
.coupon-popup__ticket {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-top: 0.55rem;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 42%, var(--theme-line));
  border-radius: calc(var(--theme-radius) * 0.85);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 6%, color-mix(in srgb, rgb(var(--cl-card)) 60%, transparent));
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  padding: 0;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.coupon-popup__ticket:hover {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 62%, transparent);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, color-mix(in srgb, rgb(var(--cl-card)) 60%, transparent));
  transform: translateY(-1px);
  box-shadow: 0 0.75rem 1.6rem -0.9rem color-mix(in srgb, rgb(var(--cl-accent)) 45%, transparent);
}
.coupon-popup__ticket:active { transform: translateY(0) scale(0.995); }
.coupon-popup__ticket:focus-visible { outline: 2px solid color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); outline-offset: 2px; }

.coupon-popup__ticket-code {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 3.1rem;
  padding: 0.65rem 0.9rem;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.16em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coupon-popup__ticket-divider {
  flex: 0 0 auto;
  width: 1px;
  margin: 0.45rem 0;
  border-left: 1px dashed color-mix(in srgb, rgb(var(--cl-accent)) 45%, transparent);
}
.coupon-popup__ticket-action { flex: 0 0 auto; display: grid; place-items: center; padding: 0 1.15rem; }
.coupon-popup__copy-idle, .coupon-popup__copy-done { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: var(--font-weight-button); }
.coupon-popup__copy-idle { color: rgb(var(--cl-accent)); }
.coupon-popup__copy-idle i { font-size: 0.85rem; transition: transform 200ms ease; }
.coupon-popup__ticket:hover .coupon-popup__copy-idle i { transform: translateY(-1px) scale(1.06); }
.coupon-popup__ticket.is-copied { border-color: #22c55e; }
.coupon-popup__copy-done { color: #22c55e; animation: coupon-copy-pop 320ms cubic-bezier(0.22, 0.8, 0.3, 1); }
.coupon-popup__copy-done i { font-size: 0.85rem; }
@keyframes coupon-copy-pop { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }

.coupon-popup__countdown {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0.2rem 0 0;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-card)) 55%, transparent);
  color: var(--theme-muted); font-size: 0.72rem;
}
.coupon-popup__countdown i { color: rgb(var(--cl-accent)); }
.coupon-popup__countdown strong { color: rgb(var(--cl-t-primary)); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

.coupon-popup__cta {
  margin-top: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.7rem; padding: 0.55rem 1.6rem;
  border-radius: calc(var(--theme-radius) * 0.7);
  background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent));
  font-size: 0.82rem; font-weight: var(--font-weight-button);
  text-decoration: none;
  transition: filter 200ms ease, transform 200ms ease;
}
.coupon-popup__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.coupon-popup__dismiss-text {
  margin-top: 0.35rem;
  border: 0; background: none; padding: 0.2rem;
  color: var(--theme-subtle);
  font: inherit; font-size: 0.7rem;
  cursor: pointer;
  transition: color 180ms ease;
}
.coupon-popup__dismiss-text:hover { color: var(--theme-muted); text-decoration: underline; }

@media (max-width: 480px) {
  .coupon-popup__card { padding: 2.1rem 1.25rem 1.4rem; }
  .coupon-popup__ticket-code { font-size: 0.95rem; letter-spacing: 0.12em; }
  .coupon-popup__ticket-action { padding: 0 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .coupon-popup__card, .coupon-popup__backdrop, .coupon-popup__copy-done { animation: none; }
  .coupon-popup__ticket, .coupon-popup__close, .coupon-popup__cta { transition: none; }
}
/* =================================================
   CHECKOUT CARD REFINEMENTS — remove sweep shine,
   calmer buttons, cleaner assurance + heading sizes.
   (components/product-page.njk, snippets/product-form.njk)
================================================= */
.product-purchase-form__action::after { display: none !important; }

.product-purchase-form__action--primary {
  background: rgb(var(--cl-accent)) !important;
  border-color: rgb(var(--cl-accent)) !important;
  box-shadow: 0 0.55rem 1.3rem -0.9rem color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent) !important;
  transition: filter 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.product-purchase-form__action--primary:hover:not(:disabled) {
  background: color-mix(in srgb, rgb(var(--cl-accent)) 88%, white) !important;
  transform: translateY(-1px);
  box-shadow: 0 0.7rem 1.5rem -0.9rem color-mix(in srgb, rgb(var(--cl-accent)) 60%, transparent) !important;
}
.product-purchase-form__action--primary:active:not(:disabled) { transform: translateY(0); }

.product-purchase-form__action--secondary {
  background: color-mix(in srgb, var(--theme-surface-raised) 88%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-line) 92%, rgb(255 255 255 / 0.04)) !important;
  color: rgb(var(--cl-t-primary)) !important;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.product-purchase-form__action--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, var(--theme-surface-raised)) !important;
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 38%, var(--theme-line)) !important;
  transform: translateY(-1px);
}
.product-purchase-form__action--secondary:active:not(:disabled) { transform: translateY(0); }
.product-purchase-form__action--secondary svg { transition: transform 200ms ease; }
.product-purchase-form__action--secondary:hover:not(:disabled) svg { transform: translateX(0.14rem); }

/* Variant buttons: neutral, calm selected state */
.product-purchase-form__variant { border-radius: calc(var(--theme-radius) * 0.8); }
.product-purchase-form__variant.is-active {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 32%, var(--product-border));
  background: color-mix(in srgb, rgb(var(--cl-accent)) 6%, color-mix(in srgb, var(--product-raised) 45%, transparent));
  box-shadow: none;
}
.product-purchase-form__variant.is-active::before { box-shadow: 0 0 0 0.15rem color-mix(in srgb, rgb(var(--cl-accent)) 12%, transparent); }
.product-purchase-form__variant.is-active p:first-child { color: rgb(var(--cl-t-primary)); }

/* Choices dropdown (variant <select>) themed */
.product-purchase-form .choices { border-radius: calc(var(--theme-radius) * 0.7); }
.product-purchase-form .choices .choices__inner {
  border: 1px solid color-mix(in srgb, var(--product-border) 75%, transparent);
  border-radius: calc(var(--theme-radius) * 0.7);
  background: color-mix(in srgb, var(--product-raised) 38%, transparent);
  color: rgb(var(--cl-t-primary));
  font-size: 0.85rem;
  min-height: 2.7rem;
  padding: 0.55rem 0.85rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.product-purchase-form .choices.is-focused .choices__inner {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 45%, var(--product-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent);
}
.product-purchase-form .choices[data-type*="select-one"]:after {
  border-color: rgb(var(--cl-t-primary) / 0.45) transparent transparent;
  margin-top: -0.2rem;
}
.product-purchase-form .choices[data-type*="select-one"].is-open:after { border-color: transparent transparent rgb(var(--cl-t-primary) / 0.45); }
.product-purchase-form .choices__list--dropdown {
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: calc(var(--theme-radius) * 0.7);
  background: color-mix(in srgb, rgb(var(--cl-card)) 96%, rgb(0 0 0 / 0.2));
  box-shadow: 0 1.1rem 2.2rem -1.1rem rgb(0 0 0 / 0.7);
  z-index: 20;
}
.product-purchase-form .choices__list--dropdown .choices__item--selectable {
  color: rgb(var(--cl-t-primary) / 0.8);
  font-size: 0.82rem;
  padding: 0.6rem 0.85rem;
  transition: background-color 150ms ease, color 150ms ease;
}
.product-purchase-form .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
  color: rgb(var(--cl-t-primary));
}

/* Assurance banner: quiet inline strip */
.product-detail__assurance {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.85rem;
  padding: 0.65rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 72%, transparent);
  border-radius: calc(var(--theme-radius) * 0.85);
  background: color-mix(in srgb, var(--theme-surface) 65%, transparent);
}
.product-detail__assurance-item {
  display: inline-flex; align-items: center; gap: 0.38rem;
  color: var(--theme-muted);
  font-size: 0.7rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.product-detail__assurance-item i { color: rgb(var(--cl-accent)); font-size: 0.68rem; }

/* Product heading: tighter, fits the layout */
.product-detail__header h1 {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.22;
}
@media (max-width: 720px) {
  .product-detail__header h1 { font-size: clamp(1.25rem, 5.5vw, 1.55rem); }
}
/* =================================================
   FAQ REDESIGN (components/faq.njk)
   Calmer accordion + integrated support CTA strip.
================================================= */
.premium-faq .faq-list { gap: 0.55rem; }

.premium-faq .faq-item {
  border-color: color-mix(in srgb, var(--faq-border) 78%, transparent);
  border-radius: calc(var(--theme-radius) * 0.9);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.014), transparent 45%),
    var(--faq-surface);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.premium-faq .faq-item:hover {
  border-color: color-mix(in srgb, var(--faq-accent) 26%, var(--faq-border));
}

.premium-faq .faq-item[open] {
  border-color: color-mix(in srgb, var(--faq-accent) 36%, var(--faq-border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--faq-accent) 4%, transparent), transparent 55%),
    var(--faq-surface);
}

.premium-faq .faq-item__summary {
  gap: 0.9rem;
  padding: 0.95rem 1.1rem;
  min-height: 3.2rem;
}

.premium-faq .faq-item__question {
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
  transition: color 200ms ease;
}

.premium-faq .faq-item:hover .faq-item__question,
.premium-faq .faq-item[open] .faq-item__question {
  color: color-mix(in srgb, var(--faq-question) 92%, var(--faq-accent));
}

.premium-faq .faq-item__icon {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: calc(var(--theme-radius) * 0.45);
  border-color: color-mix(in srgb, var(--faq-accent) 24%, var(--faq-border));
  background: color-mix(in srgb, var(--faq-accent) 7%, transparent);
  font-size: 0.62rem;
  transition: transform 220ms cubic-bezier(0.22, 0.8, 0.3, 1), background-color 200ms ease, border-color 200ms ease;
}

.premium-faq .faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
  border-color: color-mix(in srgb, var(--faq-accent) 45%, var(--faq-border));
  background: color-mix(in srgb, var(--faq-accent) 14%, transparent);
}

.premium-faq .faq-item__answer {
  padding: 0 1.1rem 1.05rem;
  font-size: 0.84rem;
  line-height: 1.65;
  animation: faq-answer-in 220ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(0.3rem); }
  to { opacity: 1; transform: none; }
}

/* Support CTA strip */
.faq-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.35rem;
  padding: 1.15rem clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--faq-accent) 22%, var(--faq-border));
  border-radius: calc(var(--theme-radius) * 1.05);
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--faq-accent) 7%, transparent), transparent 55%),
    var(--faq-surface);
}

.faq-support__copy { display: grid; gap: 0.22rem; min-width: 0; }
.faq-support__copy strong {
  color: var(--faq-question);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.01em;
}
.faq-support__copy span { color: var(--faq-answer); font-size: 0.78rem; line-height: 1.5; }

.faq-support__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.faq-support__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0.55rem 1.15rem;
  border-radius: calc(var(--theme-radius) * 0.65);
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, filter 200ms ease;
}

.faq-support__button i { font-size: 0.85rem; }

.faq-support__button--discord {
  border: 1px solid color-mix(in srgb, var(--faq-accent) 30%, var(--faq-border));
  background: color-mix(in srgb, var(--faq-accent) 8%, transparent);
  color: var(--faq-question);
}
.faq-support__button--discord:hover {
  border-color: color-mix(in srgb, var(--faq-accent) 48%, var(--faq-border));
  background: color-mix(in srgb, var(--faq-accent) 14%, transparent);
  transform: translateY(-1px);
}

.faq-support__button--support {
  border: 1px solid transparent;
  background: var(--faq-accent);
  color: rgb(var(--cl-t-accent));
}
.faq-support__button--support:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .premium-faq .faq-item__summary { padding: 0.85rem 0.9rem; }
  .premium-faq .faq-item__answer { padding: 0 0.9rem 0.95rem; font-size: 0.8rem; }
  .faq-support { flex-direction: column; align-items: stretch; }
  .faq-support__actions { flex-direction: column; }
  .faq-support__button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-faq .faq-item__answer { animation: none; }
  .premium-faq .faq-item__icon,
  .faq-support__button { transition: none; }
}

/* =================================================
   GLOBAL HORIZONTAL-BLEED GUARD
   Full-bleed sections use 100vw, which includes the
   scrollbar width and can push the page 9-17px wide.
   overflow-x: clip prevents that without creating a
   scroll container, so position: sticky keeps working.
================================================= */
html { overflow-x: clip; }
/* =================================================
   FOOTER NAV COLUMNS (components/footer.njk)
================================================= */
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.75rem 2.25rem;
  padding-block: 1.9rem;
  border-top: 1px solid var(--theme-line);
}
.site-footer__col { display: grid; gap: 0.55rem; justify-items: start; }
.site-footer__col-title {
  margin: 0 0 0.3rem;
  color: var(--theme-subtle);
  font-size: 0.64rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-footer__nav-link {
  position: relative;
  color: var(--theme-muted);
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 180ms ease;
}
.site-footer__nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.14rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.55;
  transition: transform 200ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.site-footer__nav-link:hover { color: rgb(var(--cl-t-primary)); }
.site-footer__nav-link:hover::after { transform: scaleX(1); }
@media (max-width: 640px) {
  .site-footer__nav { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__nav-link::after { transition: none; }
}

/* =================================================
   CURRENCY SELECTOR (components/header.njk)
   Choices.js dropdown themed; plain-text options
   with (symbol) fallback to code only.
================================================= */
.currency-selector .choices { min-width: 6.2rem; font-size: 0.78rem; }
.currency-selector .choices .choices__inner {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: calc(var(--theme-radius) * 0.5);
  background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
  color: rgb(var(--cl-t-primary) / 0.82);
  font: inherit;
  font-weight: var(--font-weight-button);
  font-variant-numeric: tabular-nums;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.currency-selector .choices:hover .choices__inner { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 30%, var(--theme-line)); }
.currency-selector .choices.is-focused .choices__inner {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 45%, var(--theme-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent);
}
.currency-selector .choices[data-type*="select-one"] .choices__inner { padding-bottom: 0.3rem; }
.currency-selector .choices[data-type*="select-one"]:after {
  border-color: rgb(var(--cl-t-primary) / 0.45) transparent transparent;
  margin-top: -0.14rem;
}
.currency-selector .choices[data-type*="select-one"].is-open:after { border-color: transparent transparent rgb(var(--cl-t-primary) / 0.45); }
.currency-selector .choices__list--dropdown {
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: calc(var(--theme-radius) * 0.6);
  background: color-mix(in srgb, rgb(var(--cl-card)) 96%, rgb(0 0 0 / 0.2));
  box-shadow: 0 1.1rem 2.2rem -1.1rem rgb(0 0 0 / 0.7);
  z-index: 60;
}
.currency-selector .choices__list--dropdown .choices__item--selectable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.8rem;
  color: rgb(var(--cl-t-primary) / 0.78);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 150ms ease, color 150ms ease;
}
.currency-selector .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
  color: rgb(var(--cl-t-primary));
}
.currency-selector .choices__list--dropdown .choices__item--selectable.is-selected { color: rgb(var(--cl-accent)); }

/* =================================================
   CHECKOUT CARD — remove top glow line and accent
   radial; quiet card surface instead.
================================================= */
.product-detail__purchase-card::before { display: none; }
.product-detail__purchase-card {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.018), transparent 42%),
    var(--product-surface) !important;
  box-shadow: 0 1.2rem 2.6rem -2.1rem rgb(0 0 0 / 0.6) !important;
}
.product-detail__purchase-summary { border-bottom-color: color-mix(in srgb, var(--product-border) 55%, transparent); }
/* =================================================
   PRODUCTS PAGE — discovery toolbar + full-width grid
   (components/products-page.njk)
================================================= */
.catalog-page__inner { width: min(100%, var(--theme-content-width)); margin-inline: auto; padding-block: var(--theme-section-space); }
.catalog-page__heading { margin-bottom: 1.4rem; }
.catalog-page__heading h1 {
  margin: 0;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.02em;
}

/* Category navigation */
.catalog-nav {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding-bottom: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.catalog-nav::-webkit-scrollbar { display: none; }
.catalog-nav__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface) 62%, transparent);
  color: rgb(var(--cl-t-primary) / 0.78);
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  white-space: nowrap;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.catalog-nav__pill:hover {
  color: rgb(var(--cl-t-primary));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 30%, var(--theme-line));
  background: color-mix(in srgb, var(--theme-surface-raised) 85%, transparent);
}
.catalog-nav__pill.is-active {
  color: rgb(var(--cl-t-primary));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 11%, transparent);
}
.catalog-nav__pill:focus-visible { outline: 2px solid color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); outline-offset: 2px; }

.catalog-nav__pill-img {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  border-radius: 0.35rem;
  object-fit: cover;
}

/* Toolbar: search + A-Z + filters + sort */
.catalog-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.catalog-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 16rem;
  min-width: 0;
}
.catalog-search__icon {
  position: absolute;
  left: 0.95rem;
  color: rgb(var(--cl-t-primary) / 0.45);
  font-size: 0.82rem;
  pointer-events: none;
  transition: color 180ms ease;
}
.catalog-search:focus-within .catalog-search__icon { color: rgb(var(--cl-accent)); }
.catalog-search input {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.55rem 2.4rem 0.55rem 2.55rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: calc(var(--theme-radius) * 0.75);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 55%),
    color-mix(in srgb, var(--theme-surface) 80%, transparent);
  color: rgb(var(--cl-t-primary));
  font: inherit;
  font-size: 0.86rem;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.catalog-search input::placeholder { color: rgb(var(--cl-t-primary) / 0.4); }
.catalog-search input:focus {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 50%, var(--theme-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
}
.catalog-search__clear {
  position: absolute;
  right: 0.7rem;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 0.4rem;
  background: none;
  color: rgb(var(--cl-t-primary) / 0.45);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.catalog-search__clear:hover { color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / 0.06); }

/* Popover buttons + popovers */
.catalog-popover-wrap { position: relative; display: inline-flex; }
.catalog-toolbar__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 0.6);
  background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
  color: rgb(var(--cl-t-primary) / 0.78);
  font: inherit;
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.catalog-toolbar__button i { font-size: 0.7rem; color: rgb(var(--cl-t-primary) / 0.45); transition: transform 180ms ease; }
.catalog-toolbar__button:hover {
  color: rgb(var(--cl-t-primary));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 32%, var(--theme-line));
}
.catalog-toolbar__button.is-active {
  color: rgb(var(--cl-accent));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 45%, transparent);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent);
}
.catalog-toolbar__button.is-active i { color: rgb(var(--cl-accent)); }
.catalog-toolbar__button strong {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.2rem;
  border-radius: 0.35rem;
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-t-accent));
  font-size: 0.62rem;
}
.catalog-toolbar__dot {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgb(var(--cl-accent));
}
.catalog-toolbar__button:focus-visible { outline: 2px solid color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); outline-offset: 2px; }

.catalog-popover {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 40;
  min-width: 15rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: calc(var(--theme-radius) * 0.85);
  background: color-mix(in srgb, rgb(var(--cl-card)) 96%, rgb(0 0 0 / 0.2));
  box-shadow: 0 1.2rem 2.4rem -1.1rem rgb(0 0 0 / 0.7);
}
.catalog-popover--az {
  right: auto;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 11rem;
  max-width: 15rem;
}
.catalog-az__letter {
  display: inline-grid;
  place-items: center;
  min-width: 1.65rem;
  min-height: 1.65rem;
  padding: 0 0.25rem;
  border: 0;
  border-radius: 0.45rem;
  background: none;
  color: rgb(var(--cl-t-primary) / 0.55);
  font: inherit;
  font-size: 0.72rem;
  font-weight: var(--font-weight-button);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.catalog-az__letter:hover { color: rgb(var(--cl-t-primary)); background: color-mix(in srgb, rgb(var(--cl-t-primary)) 7%, transparent); }
.catalog-az__letter.is-active { color: rgb(var(--cl-accent)); background: color-mix(in srgb, rgb(var(--cl-accent)) 13%, transparent); }

.catalog-popover__title {
  margin: 0 0 0.6rem;
  color: var(--theme-subtle);
  font-size: 0.64rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.catalog-popover__price-row { display: flex; align-items: end; gap: 0.55rem; }
.catalog-popover__field { display: grid; gap: 0.3rem; flex: 1; }
.catalog-popover__field label { color: var(--theme-muted); font-size: 0.66rem; }
.catalog-popover__input-wrap { position: relative; }
.catalog-popover__input-wrap input {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.4rem 2rem 0.4rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: calc(var(--theme-radius) * 0.5);
  background: color-mix(in srgb, var(--theme-surface) 80%, transparent);
  color: rgb(var(--cl-t-primary));
  font: inherit;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.catalog-popover__input-wrap input:focus {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 50%, var(--theme-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent);
}
.catalog-popover__currency {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  color: rgb(var(--cl-t-primary) / 0.45);
  font-size: 0.7rem;
  pointer-events: none;
}
.catalog-popover__dash { padding-bottom: 0.85rem; color: rgb(var(--cl-t-primary) / 0.35); }
.catalog-popover__actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.85rem; }
.catalog-popover__apply {
  flex: 1;
  min-height: 2.3rem;
  border: 0;
  border-radius: calc(var(--theme-radius) * 0.5);
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-t-accent));
  font: inherit;
  font-size: 0.78rem;
  font-weight: var(--font-weight-button);
  cursor: pointer;
  transition: filter 180ms ease;
}
.catalog-popover__apply:hover { filter: brightness(1.08); }
.catalog-popover__reset {
  color: var(--theme-muted);
  font-size: 0.76rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  transition: color 150ms ease;
}
.catalog-popover__reset:hover { color: rgb(var(--cl-t-primary)); }

/* Sort */
.catalog-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 0.9rem 0 0.85rem;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 0.6);
  background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
  color: rgb(var(--cl-t-primary) / 0.78);
  transition: border-color 180ms ease;
}
.catalog-sort > i { margin-right: 0.5rem; font-size: 0.72rem; color: rgb(var(--cl-t-primary) / 0.45); }
.catalog-sort__select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  outline: none;
  cursor: pointer;
  padding-right: 1.2rem;
}
.catalog-sort__select option { color: rgb(var(--cl-t-primary)); background: rgb(var(--cl-card)); }
.catalog-sort::after {
  content: '';
  position: absolute;
  right: 0.85rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid rgb(var(--cl-t-primary) / 0.5);
  border-bottom: 1.5px solid rgb(var(--cl-t-primary) / 0.5);
  transform: translateY(-0.1rem) rotate(45deg);
  pointer-events: none;
}
.catalog-sort:focus-within { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line)); }

/* Meta row: count + chips */
.catalog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.9rem;
  margin-bottom: 1.15rem;
  min-height: 1.6rem;
}
.catalog-meta__count { margin: 0; color: var(--theme-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.catalog-meta__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.catalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 14rem;
  padding: 0.22rem 0.3rem 0.22rem 0.65rem;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 26%, var(--theme-line));
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-accent)) 7%, transparent);
  color: rgb(var(--cl-t-primary) / 0.85);
  font-size: 0.7rem;
  font-weight: var(--font-weight-button);
}
.catalog-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-chip button, .catalog-chip a {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgb(var(--cl-t-primary) / 0.5);
  font-size: 0.58rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.catalog-chip button:hover, .catalog-chip a:hover { color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / 0.08); }
.catalog-meta__clear {
  color: rgb(var(--cl-accent));
  font-size: 0.72rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  transition: color 150ms ease;
}
.catalog-meta__clear:hover { color: rgb(var(--cl-t-primary)); }

/* Grid + empty state */
.catalog-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
}
.catalog-page__item { min-width: 0; }
.catalog-page__item.is-filtered-out { display: none; }
.catalog-page__pagination { margin-top: 2rem; }

.catalog-empty {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 3.2rem 1.5rem;
  border: 1px dashed color-mix(in srgb, var(--theme-line) 90%, transparent);
  border-radius: calc(var(--theme-radius) * 1.05);
  background: color-mix(in srgb, var(--theme-surface) 45%, transparent);
  text-align: center;
}
.catalog-empty__icon { font-size: 1.5rem; color: rgb(var(--cl-t-primary) / 0.25); }
.catalog-empty__title { margin: 0.2rem 0 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: 1.05rem; font-weight: var(--font-weight-heading); }
.catalog-empty__text { margin: 0; color: var(--theme-muted); font-size: 0.8rem; }
.catalog-empty__clear {
  margin-top: 0.55rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 40%, transparent);
  border-radius: calc(var(--theme-radius) * 0.55);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
  color: rgb(var(--cl-accent));
  font: inherit;
  font-size: 0.76rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.catalog-empty__clear:hover { background: color-mix(in srgb, rgb(var(--cl-accent)) 17%, transparent); border-color: color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); }

/* Responsive */
@media (max-width: 900px) {
  .catalog-page__grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
}
@media (max-width: 640px) {
  .catalog-toolbar { gap: 0.5rem; }
  .catalog-search { flex-basis: 100%; }
  .catalog-toolbar__button, .catalog-sort { flex: 1; justify-content: center; }
  .catalog-sort__select { text-align: center; text-align-last: center; }
  .catalog-popover--filters { right: 0; left: 0; }
  .catalog-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .catalog-meta { align-items: flex-start; }
}
@media (max-width: 420px) {
  .catalog-popover--az { left: 0; right: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-toolbar__button, .catalog-search input, .catalog-popover, .catalog-chip button { transition: none; }
}
/* =================================================
   GROUP NAV — premium segmented navigation with
   sliding highlight indicator (products-page.njk)
================================================= */
.catalog-nav {
  position: relative;
  gap: 0.25rem;
  margin-bottom: 1.15rem;
  padding: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 65%, transparent);
  border-radius: calc(var(--theme-radius) * 0.95);
  background: color-mix(in srgb, var(--theme-surface) 45%, transparent);
}
.catalog-nav__pill {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid transparent;
  border-radius: calc(var(--theme-radius) * 0.7);
  background: none;
  color: rgb(var(--cl-t-primary) / 0.62);
  font: inherit;
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  white-space: nowrap;
  cursor: pointer;
  transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.catalog-nav__pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 34%, transparent);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 55%),
    color-mix(in srgb, rgb(var(--cl-accent)) 13%, transparent);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.catalog-nav__pill.is-active::before { opacity: 1; transform: scale(1); }
.catalog-nav__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface) 62%, transparent);
  color: rgb(var(--cl-t-primary) / 0.78);
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  white-space: nowrap;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.catalog-nav__pill:hover {
  color: rgb(var(--cl-t-primary));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 30%, var(--theme-line));
  background: color-mix(in srgb, var(--theme-surface-raised) 85%, transparent);
}
.catalog-nav__pill.is-active {
  color: rgb(var(--cl-t-primary));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 11%, transparent);
}
.catalog-nav__pill:focus-visible { outline: 2px solid color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); outline-offset: 2px; }

.catalog-nav__pill-img {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  border-radius: 0.35rem;
  object-fit: cover;
}

/* Toolbar: search + A-Z + filters + sort */
.catalog-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.catalog-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 16rem;
  min-width: 0;
}
.catalog-search__icon {
  position: absolute;
  left: 0.95rem;
  color: rgb(var(--cl-t-primary) / 0.45);
  font-size: 0.82rem;
  pointer-events: none;
  transition: color 180ms ease;
}
.catalog-search:focus-within .catalog-search__icon { color: rgb(var(--cl-accent)); }
.catalog-search input {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.55rem 2.4rem 0.55rem 2.55rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: calc(var(--theme-radius) * 0.75);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 55%),
    color-mix(in srgb, var(--theme-surface) 80%, transparent);
  color: rgb(var(--cl-t-primary));
  font: inherit;
  font-size: 0.86rem;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.catalog-search input::placeholder { color: rgb(var(--cl-t-primary) / 0.4); }
.catalog-search input:focus {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 50%, var(--theme-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
}
.catalog-search__clear {
  position: absolute;
  right: 0.7rem;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 0.4rem;
  background: none;
  color: rgb(var(--cl-t-primary) / 0.45);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.catalog-search__clear:hover { color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / 0.06); }

/* Popover buttons + popovers */
.catalog-popover-wrap { position: relative; display: inline-flex; }
.catalog-toolbar__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 0.6);
  background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
  color: rgb(var(--cl-t-primary) / 0.78);
  font: inherit;
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.catalog-toolbar__button i { font-size: 0.7rem; color: rgb(var(--cl-t-primary) / 0.45); transition: transform 180ms ease; }
.catalog-toolbar__button:hover {
  color: rgb(var(--cl-t-primary));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 32%, var(--theme-line));
}
.catalog-toolbar__button.is-active {
  color: rgb(var(--cl-accent));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 45%, transparent);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent);
}
.catalog-toolbar__button.is-active i { color: rgb(var(--cl-accent)); }
.catalog-toolbar__button strong {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.2rem;
  border-radius: 0.35rem;
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-t-accent));
  font-size: 0.62rem;
}
.catalog-toolbar__dot {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgb(var(--cl-accent));
}
.catalog-toolbar__button:focus-visible { outline: 2px solid color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); outline-offset: 2px; }

.catalog-popover {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 40;
  min-width: 15rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: calc(var(--theme-radius) * 0.85);
  background: color-mix(in srgb, rgb(var(--cl-card)) 96%, rgb(0 0 0 / 0.2));
  box-shadow: 0 1.2rem 2.4rem -1.1rem rgb(0 0 0 / 0.7);
}
.catalog-popover--az {
  right: auto;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 11rem;
  max-width: 15rem;
}
.catalog-az__letter {
  display: inline-grid;
  place-items: center;
  min-width: 1.65rem;
  min-height: 1.65rem;
  padding: 0 0.25rem;
  border: 0;
  border-radius: 0.45rem;
  background: none;
  color: rgb(var(--cl-t-primary) / 0.55);
  font: inherit;
  font-size: 0.72rem;
  font-weight: var(--font-weight-button);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.catalog-az__letter:hover { color: rgb(var(--cl-t-primary)); background: color-mix(in srgb, rgb(var(--cl-t-primary)) 7%, transparent); }
.catalog-az__letter.is-active { color: rgb(var(--cl-accent)); background: color-mix(in srgb, rgb(var(--cl-accent)) 13%, transparent); }

.catalog-popover__title {
  margin: 0 0 0.6rem;
  color: var(--theme-subtle);
  font-size: 0.64rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.catalog-popover__price-row { display: flex; align-items: end; gap: 0.55rem; }
.catalog-popover__field { display: grid; gap: 0.3rem; flex: 1; }
.catalog-popover__field label { color: var(--theme-muted); font-size: 0.66rem; }
.catalog-popover__input-wrap { position: relative; }
.catalog-popover__input-wrap input {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.4rem 2rem 0.4rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.05));
  border-radius: calc(var(--theme-radius) * 0.5);
  background: color-mix(in srgb, var(--theme-surface) 80%, transparent);
  color: rgb(var(--cl-t-primary));
  font: inherit;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.catalog-popover__input-wrap input:focus {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 50%, var(--theme-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent);
}
.catalog-popover__currency {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  color: rgb(var(--cl-t-primary) / 0.45);
  font-size: 0.7rem;
  pointer-events: none;
}
.catalog-popover__dash { padding-bottom: 0.85rem; color: rgb(var(--cl-t-primary) / 0.35); }
.catalog-popover__actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.85rem; }
.catalog-popover__apply {
  flex: 1;
  min-height: 2.3rem;
  border: 0;
  border-radius: calc(var(--theme-radius) * 0.5);
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-t-accent));
  font: inherit;
  font-size: 0.78rem;
  font-weight: var(--font-weight-button);
  cursor: pointer;
  transition: filter 180ms ease;
}
.catalog-popover__apply:hover { filter: brightness(1.08); }
.catalog-popover__reset {
  color: var(--theme-muted);
  font-size: 0.76rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  transition: color 150ms ease;
}
.catalog-popover__reset:hover { color: rgb(var(--cl-t-primary)); }

/* Sort */
.catalog-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 0.9rem 0 0.85rem;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 0.6);
  background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
  color: rgb(var(--cl-t-primary) / 0.78);
  transition: border-color 180ms ease;
}
.catalog-sort > i { margin-right: 0.5rem; font-size: 0.72rem; color: rgb(var(--cl-t-primary) / 0.45); }
.catalog-sort__select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  outline: none;
  cursor: pointer;
  padding-right: 1.2rem;
}
.catalog-sort__select option { color: rgb(var(--cl-t-primary)); background: rgb(var(--cl-card)); }
.catalog-sort::after {
  content: '';
  position: absolute;
  right: 0.85rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid rgb(var(--cl-t-primary) / 0.5);
  border-bottom: 1.5px solid rgb(var(--cl-t-primary) / 0.5);
  transform: translateY(-0.1rem) rotate(45deg);
  pointer-events: none;
}
.catalog-sort:focus-within { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line)); }

/* Meta row: count + chips */
.catalog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.9rem;
  margin-bottom: 1.15rem;
  min-height: 1.6rem;
}
.catalog-meta__count { margin: 0; color: var(--theme-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.catalog-meta__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.catalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 14rem;
  padding: 0.22rem 0.3rem 0.22rem 0.65rem;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 26%, var(--theme-line));
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--cl-accent)) 7%, transparent);
  color: rgb(var(--cl-t-primary) / 0.85);
  font-size: 0.7rem;
  font-weight: var(--font-weight-button);
}
.catalog-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-chip button, .catalog-chip a {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgb(var(--cl-t-primary) / 0.5);
  font-size: 0.58rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.catalog-chip button:hover, .catalog-chip a:hover { color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / 0.08); }
.catalog-meta__clear {
  color: rgb(var(--cl-accent));
  font-size: 0.72rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  transition: color 150ms ease;
}
.catalog-meta__clear:hover { color: rgb(var(--cl-t-primary)); }

/* Grid + empty state */
.catalog-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
}
.catalog-page__item { min-width: 0; }
.catalog-page__item.is-filtered-out { display: none; }
.catalog-page__pagination { margin-top: 2rem; }

.catalog-empty {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 3.2rem 1.5rem;
  border: 1px dashed color-mix(in srgb, var(--theme-line) 90%, transparent);
  border-radius: calc(var(--theme-radius) * 1.05);
  background: color-mix(in srgb, var(--theme-surface) 45%, transparent);
  text-align: center;
}
.catalog-empty__icon { font-size: 1.5rem; color: rgb(var(--cl-t-primary) / 0.25); }
.catalog-empty__title { margin: 0.2rem 0 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: 1.05rem; font-weight: var(--font-weight-heading); }
.catalog-empty__text { margin: 0; color: var(--theme-muted); font-size: 0.8rem; }
.catalog-empty__clear {
  margin-top: 0.55rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 40%, transparent);
  border-radius: calc(var(--theme-radius) * 0.55);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 10%, transparent);
  color: rgb(var(--cl-accent));
  font: inherit;
  font-size: 0.76rem;
  font-weight: var(--font-weight-button);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.catalog-empty__clear:hover { background: color-mix(in srgb, rgb(var(--cl-accent)) 17%, transparent); border-color: color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); }

/* Responsive */
@media (max-width: 900px) {
  .catalog-page__grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
}
@media (max-width: 640px) {
  .catalog-toolbar { gap: 0.5rem; }
  .catalog-search { flex-basis: 100%; }
  .catalog-toolbar__button, .catalog-sort { flex: 1; justify-content: center; }
  .catalog-sort__select { text-align: center; text-align-last: center; }
  .catalog-popover--filters { right: 0; left: 0; }
  .catalog-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .catalog-meta { align-items: flex-start; }
}
@media (max-width: 420px) {
  .catalog-popover--az { left: 0; right: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-toolbar__button, .catalog-search input, .catalog-popover, .catalog-chip button { transition: none; }
}
/* =================================================
   GROUP NAV — premium segmented navigation with
   sliding highlight indicator (products-page.njk)
================================================= */
.catalog-nav {
  position: relative;
  gap: 0.25rem;
  margin-bottom: 1.15rem;
  padding: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--theme-line) 65%, transparent);
  border-radius: calc(var(--theme-radius) * 0.95);
  background: color-mix(in srgb, var(--theme-surface) 45%, transparent);
}
.catalog-nav__indicator {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0;
  z-index: 0;
  width: 0;
  border-radius: calc(var(--theme-radius) * 0.7);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 55%),
    color-mix(in srgb, rgb(var(--cl-accent)) 13%, transparent);
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 34%, transparent);
  opacity: 1;
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(0.22, 0.8, 0.3, 1), width 320ms cubic-bezier(0.22, 0.8, 0.3, 1);
  pointer-events: none;
}
.catalog-nav__pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid transparent;
  border-radius: calc(var(--theme-radius) * 0.7);
  background: none;
  color: rgb(var(--cl-t-primary) / 0.62);
  font: inherit;
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms ease;
}
.catalog-nav__pill i { font-size: 0.72rem; opacity: 0.65; }
.catalog-nav__pill:hover { color: rgb(var(--cl-t-primary)); }
.catalog-nav__pill.is-active { color: rgb(var(--cl-t-primary)); }
.catalog-nav__pill.is-active i { color: rgb(var(--cl-accent)); opacity: 1; }
.catalog-nav__pill:focus-visible { outline: 2px solid color-mix(in srgb, rgb(var(--cl-accent)) 55%, transparent); outline-offset: 1px; }
.catalog-nav__pill-img {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 0.4);
  object-fit: cover;
  transition: border-color 200ms ease;
}
.catalog-nav__pill.is-active .catalog-nav__pill-img { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 45%, transparent); }
@media (max-width: 640px) {
  .catalog-nav { padding: 0.25rem; }
  .catalog-nav__pill { min-height: 2.3rem; padding: 0.4rem 0.85rem; font-size: 0.76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-nav__pill, .catalog-nav__pill::before { transition: none; }
}

/* =================================================
   HEADER — logo container + stats cluster
================================================= */
.storefront-header__brand-mark {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.28rem;
  border-radius: calc(var(--theme-radius) * 0.9);
}
.storefront-header__logo,
.storefront-header__logo--small,
.storefront-header__logo--medium,
.storefront-header__logo--large {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border-radius: calc(var(--theme-radius) * 0.55);
  transform: none;
}
.storefront-header__logo--small { transform: scale(0.82); }
.storefront-header__logo--medium { transform: scale(0.92); }

.storefront-header__stats {
  align-items: center;
  gap: 1.1rem;
  padding: 0.35rem 0.1rem;
}
.storefront-header__stat { display: grid; gap: 0.08rem; min-width: 2.6rem; }
.storefront-header__stat strong {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  color: rgb(var(--cl-t-primary));
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.storefront-header__stat strong i { align-self: center; color: rgb(var(--cl-accent)); font-size: 0.6rem; }
.storefront-header__stat span {
  color: var(--theme-subtle);
  font-size: 0.58rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.storefront-header__stat-sep {
  width: 1px;
  height: 1.5rem;
  flex: 0 0 auto;
  background: var(--theme-line);
}
@media (max-width: 1023px) {
  .storefront-header__stats { gap: 0.85rem; }
  .storefront-header__stat { min-width: 2.2rem; }
}

/* =================================================
   CURRENCY SELECTOR — premium closed chip + panel
================================================= */
.currency-selector .choices { min-width: 6.8rem; }
/* Choices adds a hidden-value input next to the selected item in
   single-select mode; hide it so the label never renders twice. */
.currency-selector .choices[data-type*="select-one"] .choices__input { display: none; }

.currency-selector .choices .choices__inner {
  min-height: 2.15rem;
  padding: 0.32rem 1.7rem 0.32rem 0.75rem;
  border-radius: calc(var(--theme-radius) * 0.55);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.028), transparent 55%),
    color-mix(in srgb, var(--theme-surface) 78%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
  letter-spacing: 0.02em;
}
.currency-selector .choices[data-type*="select-one"]:after {
  content: '';
  border: 0;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0;
  border-right: 1.5px solid rgb(var(--cl-t-primary) / 0.5);
  border-bottom: 1.5px solid rgb(var(--cl-t-primary) / 0.5);
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 200ms ease;
  right: 0.8rem;
}
.currency-selector .choices[data-type*="select-one"].is-open:after { transform: translateY(0.05rem) rotate(225deg); }
.currency-selector .choices__list--dropdown {
  border-radius: calc(var(--theme-radius) * 0.75);
  overflow: hidden;
  box-shadow: 0 1.3rem 2.6rem -1.1rem rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.02) inset;
  animation: currency-dropdown-in 180ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
@keyframes currency-dropdown-in {
  from { opacity: 0; transform: translateY(0.35rem) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.currency-selector .choices__list--dropdown .choices__list { max-height: 17rem; padding: 0.3rem; }
.currency-selector .choices__list--dropdown .choices__item--selectable {
  padding: 0.5rem 0.65rem;
  border-radius: calc(var(--theme-radius) * 0.45);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.currency-selector .choices__list--dropdown .choices__item--selectable.is-selected {
  background: color-mix(in srgb, rgb(var(--cl-accent)) 12%, transparent);
  color: rgb(var(--cl-accent));
  font-weight: var(--font-weight-button);
}
.currency-selector .choices__list--dropdown .choices__item--selectable.is-selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.62rem;
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  .currency-selector .choices__list--dropdown { animation: none; }
  .currency-selector .choices[data-type*="select-one"]:after { transition: none; }
}

/* =================================================
   PRODUCTS NAVIGATION + HEADER REFINEMENT
   Scoped finishing layer for the current storefront shell.
================================================= */
.catalog-nav {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 0.16rem;
  gap: 0.38rem;
  overflow: visible;
  padding: 0.34rem 0.34rem 0.3rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.025);
}
.catalog-nav__viewport {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.catalog-nav__viewport::-webkit-scrollbar { display: none; }
.catalog-nav__rail {
  position: relative;
  display: inline-flex;
  min-width: 100%;
  width: max-content;
  gap: 0.18rem;
  padding: 0.04rem;
}
.catalog-nav__indicator {
  top: 0.04rem;
  bottom: 0.04rem;
  left: 0.04rem;
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 42%, transparent);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 13%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0.45rem 1.1rem -0.8rem rgb(var(--cl-accent) / 0.65);
}
.catalog-nav__pill {
  min-height: 2.6rem;
  scroll-snap-align: start;
  border-radius: calc(var(--theme-radius) * 0.62);
  color: rgb(var(--cl-t-primary) / 0.6);
  letter-spacing: 0.005em;
  transition: color 180ms ease, transform 180ms ease;
}
.catalog-nav__pill:hover { color: rgb(var(--cl-t-primary)); transform: translateY(-1px); }
.catalog-nav__pill.is-active { color: rgb(var(--cl-t-primary)); }
.catalog-nav__pill.is-active .catalog-nav__pill-img { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 60%, var(--theme-line)); }
.catalog-nav__track {
  position: relative;
  width: 100%;
  height: 0.16rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-line) 68%, transparent);
}
.catalog-nav__track-fill {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgb(var(--cl-accent));
  box-shadow: 0 0 0.45rem rgb(var(--cl-accent) / 0.7);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.catalog-nav__track-fill::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.34rem;
  height: 0.34rem;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 70%, white);
  border-radius: 999px;
  background: rgb(var(--cl-background));
  box-shadow: 0 0 0.45rem rgb(var(--cl-accent) / 0.8);
  transform: translate(45%, -50%);
}
.catalog-nav:not(.has-overflow) .catalog-nav__track { opacity: 0.78; }

.storefront-header {
  isolation: isolate;
  box-shadow: 0 1.25rem 2.8rem -2.4rem rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.025);
}
.storefront-header__brand-mark {
  --header-logo-size: 3.15rem;
  width: var(--header-logo-size);
  height: var(--header-logo-size);
  flex-basis: var(--header-logo-size);
  padding: 0.24rem;
  background: color-mix(in srgb, var(--theme-surface) 82%, rgb(var(--cl-accent)));
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 40%, var(--theme-line));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.055), 0 0.6rem 1.4rem -1rem rgb(var(--cl-accent) / 0.7);
}
.storefront-header__brand-mark--small { --header-logo-size: 2.72rem; }
.storefront-header__brand-mark--large { --header-logo-size: 3.55rem; }
.storefront-header__logo,
.storefront-header__logo--small,
.storefront-header__logo--medium,
.storefront-header__logo--large {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.storefront-header__stats { gap: 1rem; padding: 0.4rem 0.2rem; }
.storefront-header__stat { min-width: 2.9rem; text-align: center; }
.storefront-header__stat strong { justify-content: center; font-size: 1rem; letter-spacing: 0; }
.storefront-header__stat span { font-size: 0.57rem; letter-spacing: 0.11em; }
.storefront-header__stat-sep { height: 1.7rem; background: color-mix(in srgb, var(--theme-line) 88%, transparent); }
.storefront-header__stats--mobile { gap: clamp(1rem, 8vw, 2.2rem); }

.currency-selector { position: relative; z-index: 80; }
.currency-selector .choices { min-width: 7.1rem; }
.currency-selector .choices .choices__inner {
  min-height: 2.28rem;
  padding: 0.38rem 1.9rem 0.38rem 0.82rem;
  border-color: color-mix(in srgb, var(--theme-line) 85%, rgb(255 255 255 / 0.08));
  color: rgb(var(--cl-t-primary) / 0.86);
  font-size: 0.76rem;
  font-weight: var(--font-weight-button);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.045), 0 0.45rem 1rem -0.9rem rgb(0 0 0 / 0.75);
}
.currency-selector .choices:hover .choices__inner,
.currency-selector .choices.is-open .choices__inner {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 52%, var(--theme-line));
  background: color-mix(in srgb, var(--theme-surface) 86%, rgb(var(--cl-accent)));
}
.currency-selector .choices.is-open .choices__inner { box-shadow: 0 0 0 0.2rem rgb(var(--cl-accent) / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.055); }
.currency-selector .choices__list--dropdown {
  min-width: max(100%, 12.75rem);
  margin-top: 0.48rem;
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 28%, var(--theme-line));
  background: color-mix(in srgb, var(--theme-surface) 96%, rgb(0 0 0 / 0.36));
  backdrop-filter: blur(18px);
  z-index: 100;
}
.currency-selector .choices__list--dropdown .choices__list { max-height: min(17rem, 48vh); padding: 0.36rem; }
.currency-selector .choices__list--dropdown .choices__item--selectable { min-height: 2.25rem; padding: 0.55rem 0.7rem; }
.currency-selector .choices__list--dropdown .choices__item--selectable.is-highlighted { background: color-mix(in srgb, rgb(var(--cl-accent)) 13%, transparent); }
@media (max-width: 640px) {
  .catalog-nav { margin-inline: -0.1rem; }
  .catalog-nav__viewport { margin-inline: -0.08rem; padding-inline: 0.08rem; }
  .catalog-nav__pill { min-height: 2.46rem; padding-inline: 0.8rem; }
  .storefront-header__brand-mark { --header-logo-size: 2.85rem; }
  .storefront-header__brand-mark--small { --header-logo-size: 2.55rem; }
  .storefront-header__brand-mark--large { --header-logo-size: 3.1rem; }
  .storefront-header__stats--mobile { gap: clamp(0.9rem, 9vw, 1.7rem); }
  .storefront-header__stat { min-width: 2.55rem; }
  .currency-selector .choices { min-width: 6.6rem; }
  .currency-selector .choices__list--dropdown { min-width: min(15.5rem, calc(100vw - 1.5rem)); }
  #storefront-mobile-menu .currency-selector .choices__list--dropdown {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-nav__indicator, .catalog-nav__track-fill, .catalog-nav__pill, .currency-selector .choices__inner { transition: none; }
}

/* =================================================
   PRODUCTS SORT MENU — custom listbox surface
================================================= */
.catalog-sort {
  position: relative;
  display: block;
  min-width: 13rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.catalog-sort::after { content: none; }
.catalog-sort__trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.58rem;
  width: 100%;
  min-height: 2.68rem;
  padding: 0.46rem 0.72rem;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 0.62);
  background: color-mix(in srgb, var(--theme-surface) 78%, transparent);
  color: rgb(var(--cl-t-primary) / 0.84);
  font: inherit;
  font-size: 0.8rem;
  font-weight: var(--font-weight-button);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.035);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.catalog-sort__trigger:hover,
.catalog-sort__trigger[aria-expanded='true'] {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 46%, var(--theme-line));
  background: color-mix(in srgb, var(--theme-surface-raised) 86%, rgb(var(--cl-accent)));
}
.catalog-sort__trigger[aria-expanded='true'] {
  box-shadow: 0 0 0 0.2rem rgb(var(--cl-accent) / 0.09), inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.catalog-sort__trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, rgb(var(--cl-accent)) 62%, transparent);
  outline-offset: 2px;
}
.catalog-sort__leading { color: rgb(var(--cl-accent)); font-size: 0.74rem; }
.catalog-sort__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-sort__chevron { color: var(--theme-subtle); font-size: 0.62rem; transition: transform 160ms ease, color 160ms ease; }
.catalog-sort__chevron.is-open { color: rgb(var(--cl-accent)); transform: rotate(180deg); }
.catalog-sort__menu {
  position: absolute;
  top: calc(100% + 0.48rem);
  right: 0;
  z-index: 90;
  width: max(100%, 16rem);
  max-width: calc(100vw - 2rem);
  padding: 0.42rem;
  border: 1px solid color-mix(in srgb, rgb(var(--cl-accent)) 26%, var(--theme-line));
  border-radius: calc(var(--theme-radius) * 0.72);
  background: color-mix(in srgb, rgb(var(--cl-card)) 96%, rgb(var(--cl-background)));
  box-shadow: 0 1rem 2rem -1.15rem rgb(0 0 0 / 0.74), inset 0 1px 0 rgb(255 255 255 / 0.045);
}
.catalog-sort__label {
  margin: 0;
  padding: 0.42rem 0.6rem 0.5rem;
  color: var(--theme-subtle);
  font-size: 0.61rem;
  font-weight: var(--font-weight-button);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.catalog-sort__option {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.48rem;
  padding: 0.4rem 0.62rem;
  border: 0;
  border-radius: calc(var(--theme-radius) * 0.48);
  background: transparent;
  color: var(--theme-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}
.catalog-sort__option:hover,
.catalog-sort__option:focus-visible {
  background: rgb(var(--cl-t-primary) / 0.055);
  color: rgb(var(--cl-t-primary));
  outline: none;
}
.catalog-sort__option.is-selected {
  background: rgb(var(--cl-accent) / 0.11);
  color: rgb(var(--cl-t-primary));
}
.catalog-sort__option-icon {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 1px solid var(--theme-line);
  border-radius: calc(var(--theme-radius) * 0.38);
  color: var(--theme-subtle);
  font-size: 0.64rem;
}
.catalog-sort__option.is-selected .catalog-sort__option-icon { border-color: rgb(var(--cl-accent) / 0.28); color: rgb(var(--cl-accent)); }
.catalog-sort__check { color: rgb(var(--cl-accent)); font-size: 0.68rem; }

/* =================================================
   ADAPTIVE HEADER LOGO
================================================= */
.storefront-header__brand-mark {
  box-sizing: border-box;
  padding: 0;
  transition: border-color var(--theme-motion-duration) ease;
}
.storefront-header__logo,
.storefront-header__logo--small,
.storefront-header__logo--medium,
.storefront-header__logo--large {
  border-radius: inherit;
}
.storefront-header__brand-mark[data-logo-shape='wide'] { width: calc(var(--header-logo-size) * 1.72); flex-basis: calc(var(--header-logo-size) * 1.72); }
.storefront-header__brand-mark[data-logo-shape='tall'] { width: calc(var(--header-logo-size) * 0.82); flex-basis: calc(var(--header-logo-size) * 0.82); }
.storefront-header__brand-mark[data-logo-shape='wide'] .storefront-header__logo { padding: 0.08rem 0.18rem; }
.storefront-header__brand-mark[data-logo-shape='tall'] .storefront-header__logo { padding: 0.08rem; }
.storefront-header__brand-mark.is-error::after {
  content: attr(data-shop-initial);
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: calc(var(--theme-radius) * 0.5);
  background: rgb(var(--cl-accent) / 0.12);
  color: rgb(var(--cl-accent));
  font-family: var(--font-heading);
  font-size: calc(var(--header-logo-size) * 0.42);
  font-weight: var(--font-weight-heading);
}

/* =================================================
   CUSTOMER PORTAL — shared SaaS account system
================================================= */
.customer-portal { max-width: var(--theme-content-width); }
.customer-portal__frame { padding-top: clamp(1.5rem, 3vw, 2.75rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.customer-portal__layout { align-items: flex-start; }
.customer-portal__sidebar { min-width: 0; }
.customer-portal__main { min-width: 0; }
.customer-nav {
  overflow: clip;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, var(--theme-surface) 90%, transparent);
  box-shadow: 0 1rem 2rem -1.75rem rgb(0 0 0 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.035);
}
.customer-nav__identity { display: flex; align-items: center; gap: 0.78rem; padding: 1rem; border-bottom: 1px solid var(--theme-line); }
.customer-nav__avatar {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  place-items: center;
  border: 1px solid rgb(var(--cl-accent) / 0.25);
  border-radius: calc(var(--theme-radius) * 0.52);
  background: rgb(var(--cl-accent) / 0.1);
  color: rgb(var(--cl-accent));
  font-size: 0.82rem;
}
.customer-nav__identity-copy { min-width: 0; }
.customer-nav__identity-copy h2 { margin: 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: 0.92rem; font-weight: var(--font-weight-heading); letter-spacing: 0; }
.customer-nav__identity-copy p { overflow: hidden; margin: 0.18rem 0 0; color: var(--theme-subtle); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-nav__list { display: grid; gap: 0.22rem; margin: 0; padding: 0.55rem; list-style: none; }
.customer-nav__link,
.customer-nav__logout {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.42rem;
  padding: 0.48rem 0.64rem;
  border: 1px solid transparent;
  border-radius: calc(var(--theme-radius) * 0.5);
  background: transparent;
  color: var(--theme-muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.customer-nav__link > i,
.customer-nav__logout > i { width: 1.55rem; color: var(--theme-subtle); font-size: 0.72rem; text-align: center; transition: color 150ms ease; }
.customer-nav__link strong { color: var(--theme-subtle); font-size: 0.68rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.customer-nav__link:hover,
.customer-nav__logout:hover { background: rgb(var(--cl-t-primary) / 0.045); color: rgb(var(--cl-t-primary)); }
.customer-nav__link.is-active {
  border-color: rgb(var(--cl-accent) / 0.2);
  background: rgb(var(--cl-accent) / 0.105);
  color: rgb(var(--cl-t-primary));
}
.customer-nav__link.is-active > i { color: rgb(var(--cl-accent)); }
.customer-nav__link:focus-visible,
.customer-nav__logout:focus-visible { outline: 2px solid rgb(var(--cl-accent) / 0.55); outline-offset: 2px; }
.customer-nav__logout { border-top: 1px solid var(--theme-line); border-radius: 0; color: var(--theme-subtle); }
.customer-nav__logout:hover { color: rgb(var(--cl-t-primary)); }

.customer-portal__main .bg-card.border {
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: color-mix(in srgb, var(--theme-surface) 90%, transparent);
  box-shadow: 0 1rem 2rem -1.8rem rgb(0 0 0 / 0.74), inset 0 1px 0 rgb(255 255 255 / 0.03);
}
.customer-portal__main .bg-card.border > h3,
.customer-portal__main .bg-card.border h3 { color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-weight: var(--font-weight-heading); letter-spacing: 0; }
.customer-portal__main .text-2xl { font-family: var(--font-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.customer-portal__main .grid > .bg-card.border { min-height: 7rem; }
.customer-portal__main table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.customer-portal__main table thead { background: rgb(var(--cl-t-primary) / 0.035); }
.customer-portal__main table th { color: var(--theme-subtle); font-size: 0.62rem; font-weight: var(--font-weight-button); letter-spacing: 0.09em; }
.customer-portal__main table td { color: rgb(var(--cl-t-primary) / 0.74); }
.customer-portal__main table tbody tr { transition: background-color 140ms ease; }
.customer-portal__main table tbody tr:hover { background: rgb(var(--cl-t-primary) / 0.025); }
.customer-portal__main table tbody tr:last-child { border-bottom: 0; }
.customer-portal__main input,
.customer-portal__main textarea,
.customer-portal__main select {
  border-color: var(--theme-line);
  border-radius: calc(var(--theme-radius) * 0.52);
  background-color: rgb(var(--cl-t-primary) / 0.035);
  color: rgb(var(--cl-t-primary));
  caret-color: rgb(var(--cl-accent));
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.customer-portal__main input:focus,
.customer-portal__main textarea:focus,
.customer-portal__main select:focus {
  border-color: rgb(var(--cl-accent) / 0.48);
  background-color: rgb(var(--cl-t-primary) / 0.05);
  box-shadow: 0 0 0 0.2rem rgb(var(--cl-accent) / 0.09);
  outline: none;
}
.customer-portal__main button,
.customer-portal__main a { text-underline-offset: 0.18em; }
.customer-portal__main button:focus-visible,
.customer-portal__main a:focus-visible { outline: 2px solid rgb(var(--cl-accent) / 0.55); outline-offset: 2px; }
.customer-portal__main .overflow-y-hidden,
.customer-portal__main .overflow-x-auto { scrollbar-width: thin; scrollbar-color: rgb(var(--cl-accent) / 0.35) transparent; }
.customer-portal__main .overflow-y-hidden::-webkit-scrollbar,
.customer-portal__main .overflow-x-auto::-webkit-scrollbar { width: 0.45rem; height: 0.45rem; }
.customer-portal__main .overflow-y-hidden::-webkit-scrollbar-track,
.customer-portal__main .overflow-x-auto::-webkit-scrollbar-track { background: transparent; }
.customer-portal__main .overflow-y-hidden::-webkit-scrollbar-thumb,
.customer-portal__main .overflow-x-auto::-webkit-scrollbar-thumb { border-radius: 999px; background: rgb(var(--cl-accent) / 0.28); }

@media (min-width: 1024px) {
  .customer-portal__layout { display: grid; grid-template-columns: minmax(13.5rem, 0.92fr) minmax(0, 3fr); gap: clamp(1.25rem, 2vw, 2rem); }
  .customer-portal__sidebar { position: sticky; top: 1.25rem; width: auto; }
  .customer-portal__main { width: auto; }
}
@media (max-width: 1023px) {
  .customer-portal__layout { align-items: stretch; }
  .customer-nav { overflow: visible; }
  .customer-nav__identity { padding: 0.82rem 0.9rem; }
  .customer-nav__scroll { overflow-x: auto; border-bottom: 1px solid var(--theme-line); scrollbar-width: none; }
  .customer-nav__scroll::-webkit-scrollbar { display: none; }
  .customer-nav__list { display: flex; width: max-content; min-width: 100%; gap: 0.25rem; padding: 0.42rem; }
  .customer-nav__link { grid-template-columns: auto auto; min-height: 2.35rem; padding-inline: 0.68rem; white-space: nowrap; }
  .customer-nav__link strong { display: none; }
  .customer-nav__logout { grid-template-columns: auto auto; justify-content: start; border-top: 0; border-radius: 0 0 var(--theme-radius) var(--theme-radius); padding-inline: 0.9rem; }
}
@media (max-width: 640px) {
  .customer-portal__frame { padding-inline: 0; padding-top: 1.25rem; }
  .customer-nav__identity-copy h2 { font-size: 0.84rem; }
  .customer-portal__main .bg-card.border { border-radius: calc(var(--theme-radius) * 0.82); }
  .customer-portal__main .bg-card.border { padding: 1rem; }
  .customer-portal__main table th,
  .customer-portal__main table td { padding-inline: 0.9rem; }
  .catalog-sort { width: 100%; min-width: 0; }
  .catalog-sort__menu { right: 0; width: min(17rem, calc(100vw - 2rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-sort__trigger,
  .catalog-sort__chevron,
  .catalog-sort__option,
  .storefront-header__brand-mark,
  .customer-nav__link,
  .customer-nav__logout,
  .customer-portal__main table tbody tr { transition: none; }
}