/*
 * 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,
      rgb(var(--cl-accent) / 0.16) 0%,
      rgb(var(--cl-accent) / 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: rgb(var(--cl-accent) / 0.45);
  box-shadow: 0 18px 40px -26px rgb(var(--cl-accent) / 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 rgb(var(--cl-accent) / 0.35);
  background: rgb(var(--cl-accent) / 0.18);
  color: rgb(var(--cl-accent));
  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: rgb(var(--cl-t-accent));
  background: rgb(var(--cl-accent));
  border: 1px solid rgb(var(--cl-accent));
  box-shadow: 0 10px 26px -16px rgb(var(--cl-accent) / 0.9);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.hero-discord__cta:hover {
  background: color-mix(in srgb, rgb(var(--cl-accent)) 86%, black);
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 86%, black);
  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, rgb(var(--cl-accent) / 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: rgb(var(--cl-accent) / 0.45);
  box-shadow: 0 18px 40px -26px rgb(var(--cl-accent) / 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 rgb(var(--cl-accent) / 0.35);
  border-radius: 0.875rem;
  background: rgb(var(--cl-accent) / 0.18);
  color: rgb(var(--cl-accent));
  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 rgb(var(--cl-accent));
  border-radius: 0.65rem;
  padding: 0.6rem 1rem;
  background: rgb(var(--cl-accent));
  box-shadow: 0 10px 26px -16px rgb(var(--cl-accent) / 0.9);
  color: rgb(var(--cl-t-accent));
  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: color-mix(in srgb, rgb(var(--cl-accent)) 86%, black);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 86%, black);
  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. */
.page--shop .payment-rail { padding-block: clamp(1.25rem, 2.6vw, 2rem); }
.page--shop .payment-rail .module-heading { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.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; }
}

/* opioid.wtf brand layer */
.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.02em;
  letter-spacing: -0.055em;
  font-weight: 800;
}
.brand-wordmark__name { color: rgb(var(--cl-accent)); }
.brand-wordmark__suffix { color: rgb(var(--cl-t-primary)); }
.storefront-header__brand-mark {
  border: 1px solid rgb(var(--cl-accent) / 0.3);
  background: color-mix(in srgb, rgb(var(--cl-accent)) 12%, rgb(var(--cl-card)));
}
.storefront-header__brand-mark::before {
  color: rgb(var(--cl-accent));
}
.site-footer__name { font-weight: 800; }
.hero-discord__icon { color: rgb(var(--cl-accent)); }

.opioid-logo-frame {
  position: relative;
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgb(var(--cl-accent) / 0.36);
  border-radius: 0.9rem;
  background: rgb(var(--cl-background));
  box-shadow: 0 0.4rem 1.4rem rgb(var(--cl-accent) / 0.12);
}
.opioid-logo-frame--footer { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; border-radius: 0.75rem; }
.opioid-logo { width: 100%; height: 100%; object-fit: cover; transform: scale(1.9); }

.opioid-swing-art {
  display: flex;
  min-width: 0;
  min-height: 34rem;
  align-items: center;
  justify-content: center;
  overflow: visible;
  animation: heroFadeUp 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}
.opioid-swing-art__image {
  display: block;
  width: min(100%, 34rem);
  height: 100%;
  max-height: 37rem;
  object-fit: contain;
  transform-origin: 50% 0%;
  animation: opioidSwing 5.4s ease-in-out infinite;
  filter: drop-shadow(0 1.6rem 2.2rem rgb(0 0 0 / 0.3));
}
@keyframes opioidSwing {
  0%, 100% { transform: rotate(-2.4deg); }
  50% { transform: rotate(2.4deg); }
}
@media (max-width: 1023px) {
  .opioid-swing-art { min-height: 0; height: clamp(19rem, 72vw, 27rem); }
  .opioid-swing-art__image { width: min(100%, 28rem); }
}
@media (prefers-reduced-motion: reduce) {
  .opioid-swing-art,
  .opioid-swing-art__image { animation: none !important; }
}

/* Simple branded first-visit loader */
.opioid-intro { display: none; }
html.opioid-intro-active,
html.opioid-intro-active body { overflow: hidden; }
html.opioid-intro-active .opioid-intro {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgb(var(--cl-accent) / .055), transparent 48%), #0d0c10;
  opacity: 1;
  transition: opacity 420ms ease, visibility 420ms ease;
}
.opioid-intro.is-leaving {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgb(var(--cl-accent) / .055), transparent 48%), #0d0c10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 420ms ease;
}
.opioid-intro__loader { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: auto; margin: 0; }
.opioid-intro__logo {
  display: block;
  width: clamp(9.5rem, 22vw, 15rem);
  max-width: min(62vw, 15rem);
  max-height: 62vh;
  height: auto;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 1rem 2rem rgb(var(--cl-accent) / .16));
  animation: opioidIntroLogoPulse 2s ease-in-out infinite;
}
.opioid-intro__dots { display: flex; align-items: center; justify-content: center; gap: .42rem; min-height: .8rem; }
.opioid-intro__dots i { display: block; width: .48rem; height: .48rem; border-radius: 50%; background: #f58ab6; opacity: .45; transform: scale(.68); animation: opioidIntroDotPulse .9s ease-in-out infinite; }
.opioid-intro__dots i:nth-child(2) { animation-delay: .14s; }
.opioid-intro__dots i:nth-child(3) { animation-delay: .28s; }
@keyframes opioidIntroLogoPulse { 0%, 100% { transform: scale(.98); } 50% { transform: scale(1.025); } }
@keyframes opioidIntroDotPulse { 0%, 100% { opacity: .4; transform: scale(.68); } 50% { opacity: 1; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  .opioid-intro__logo,.opioid-intro__dots i { animation: none !important; }
  .opioid-intro__dots i { opacity: .85; transform: none; }
  .opioid-intro,.opioid-intro.is-leaving { transition: none !important; }
}
/* Small signature details that carry the pink / ink palette through the shop. */
::selection { background: rgb(var(--cl-accent) / 0.78); color: #fff; }
html { scrollbar-color: rgb(var(--cl-accent) / 0.42) #090809; scrollbar-width: thin; }
html::-webkit-scrollbar { width: 0.55rem; }
html::-webkit-scrollbar-track { background: #090809; }
html::-webkit-scrollbar-thumb { border: 2px solid #090809; border-radius: 99px; background: rgb(var(--cl-accent) / 0.42); }
.nav-link { isolation: isolate; }
.nav-link::after {
  position: absolute;
  right: 0.72rem;
  bottom: 0.18rem;
  left: 0.72rem;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgb(var(--cl-accent)), transparent);
  content: '';
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover::after, .nav-link.is-active::after { opacity: 0.9; transform: scaleX(1); }
.storefront-header__brand-link:hover .opioid-logo-frame { border-color: rgb(var(--cl-accent) / 0.72); box-shadow: 0 0.45rem 1.7rem rgb(var(--cl-accent) / 0.24); }
.storefront-header__brand-link .opioid-logo-frame { transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.storefront-header__brand-link:hover .opioid-logo-frame { transform: translateY(-1px) rotate(-2deg); }
@media (prefers-reduced-motion: reduce) {
  .opioid-intro__logo { animation: none !important; }
  .opioid-intro, .nav-link::after, .storefront-header__brand-link .opioid-logo-frame { transition: none !important; }
}

/* Home refresh: a floating wordmark bar and a character-led editorial hero. */
.storefront-header {
  position: relative;
  width: min(calc(100% - 3rem), 1320px);
  margin: 1rem auto 0;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.storefront-header--sticky { position: sticky; top: 0.75rem; }
.storefront-header__main { min-height: 5rem; padding: 0 !important; }
.storefront-header__stats { display: none !important; }
.storefront-header__brand-link { gap: 0.95rem; }
.storefront-header__brand-link::after { content: none; }
.storefront-header__brand-name { font-size: 1.05rem; }
.opioid-logo-frame {
  width: 3.8rem;
  height: 3.8rem;
  flex-basis: 3.8rem;
  border: 1px solid rgb(var(--cl-accent) / 0.62);
  border-radius: 1.1rem;
  background: #171016;
  box-shadow: 0 0 0 0.28rem rgb(var(--cl-accent) / 0.055), 0 0.7rem 1.8rem rgb(var(--cl-accent) / 0.17);
}
.opioid-logo { transform: scale(1.65); }
.storefront-header__nav {
  z-index: 2;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.storefront-header__nav > div { justify-content: center; }
.storefront-header__links { gap: 0.55rem; padding: 0.35rem !important; }
.storefront-header .nav-link {
  min-height: 2.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.015em;
}
.storefront-header .nav-link.is-active {
  background: rgb(var(--cl-accent) / 0.13);
  color: rgb(var(--cl-accent));
}
.storefront-header__community {
  min-height: 2.45rem;
  padding-inline: 1rem;
  border-color: rgb(var(--cl-accent));
  border-radius: 999px;
  background: rgb(var(--cl-accent));
  color: rgb(var(--cl-background));
}
.storefront-header__community:hover { border-color: rgb(var(--cl-accent)); background: color-mix(in srgb, rgb(var(--cl-accent)) 84%, white); color: rgb(var(--cl-background)); }
.storefront-header__icon-action,
.storefront-header__cart { border-radius: 50% !important; }

@media (min-width: 1240px) {
  .storefront-header {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto minmax(24rem, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }
  .storefront-header__main,
  .storefront-header__main > div { display: contents; }
  .storefront-header__brand { grid-column: 1; justify-self: start; }
  .storefront-header__actions { grid-column: 3; justify-self: end; gap: 0.75rem; }
  .storefront-header__nav {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    transform: none;
  }
  .storefront-header__mobile-panel { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1239px) {
  .storefront-header__nav { position: relative; width: 100%; margin: 0.2rem 0 0.55rem; }
}
@media (max-width: 767px) {
  .storefront-header { width: calc(100% - 2rem); margin-top: 0.55rem; }
  .storefront-header__main { min-height: 4.2rem; }
  .opioid-logo-frame { width: 3.15rem; height: 3.15rem; flex-basis: 3.15rem; }
  .opioid-logo { transform: scale(1.65); }
  .storefront-header__mobile-panel { margin: 0.4rem 0 0; border-radius: 1.2rem; }
}

.page--shop .hero-section {
  position: relative;
  margin-top: 0.6rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(ellipse 42% 82% at 76% 47%, rgb(var(--cl-accent) / 0.105), transparent 72%),
    radial-gradient(ellipse 68% 130% at 6% 100%, rgb(var(--cl-accent) / 0.055), transparent 70%),
    linear-gradient(125deg, #090809 8%, #100b0f 56%, #090809 100%) !important;
}
.page--shop .hero-section::before {
  display: block;
  top: auto;
  right: max(1.5rem, calc((100vw - 1320px) / 2));
  bottom: 0;
  left: max(1.5rem, calc((100vw - 1320px) / 2));
  width: auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--cl-accent) / 0.25) 50%, transparent);
}
.page--shop .hero-section .hero-layout {
  display: grid !important;
  width: min(calc(100% - 3rem), 1320px);
  max-width: 1320px;
  min-height: clamp(40rem, 76vh, 53rem);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.page--shop .hero-content { position: relative; z-index: 2; width: 100%; max-width: 39rem; }
.page--shop .hero-section .hero-eyebrow {
  display: inline-flex;
  gap: 0.65rem;
  margin-bottom: 1rem;
  color: rgb(var(--cl-accent));
  font-size: 0.62rem;
  letter-spacing: 0.22em;
}
.page--shop .hero-eyebrow__mark { width: 1.15rem; height: 1px; border-radius: 0; background: rgb(var(--cl-accent)); }
.page--shop .hero-section .hero-title {
  max-width: 9ch;
  margin: 0;
  font-size: clamp(3.8rem, 7.1vw, 7.1rem);
  font-weight: 800;
  line-height: 0.91;
  letter-spacing: -0.075em;
  background: linear-gradient(145deg, #fff 8%, #f5f7fb 58%, #f5f7fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page--shop .hero-section .hero-subtitle {
  max-width: 33rem;
  margin-top: 1.35rem;
  color: rgb(var(--cl-t-primary) / 0.62);
  font-size: clamp(0.96rem, 1.35vw, 1.1rem);
  line-height: 1.75;
}
.page--shop .hero-section .hero-actions { gap: 0.7rem; margin-top: 0.3rem; }
.page--shop .hero-section .hero-actions .ui-btn { min-height: 3.15rem; padding-inline: 1.35rem; border-radius: 999px; font-size: 0.82rem; }
.page--shop .hero-section .hero-divider { display: none; }
.page--shop .hero-section .hero-stats--inline {
  display: flex;
  width: 100%;
  max-width: 31rem;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--cl-t-primary) / 0.11);
}
.page--shop .hero-section .hero-stats--inline .hero-stat {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
  padding: 0 1.15rem;
  border: 0;
  text-align: left;
}
.page--shop .hero-section .hero-stats--inline .hero-stat:first-child { padding-left: 0; }
.page--shop .hero-section .hero-stats--inline .hero-stat + .hero-stat { border-left: 1px solid rgb(var(--cl-t-primary) / 0.12); }
.page--shop .hero-section .hero-stats--inline .hero-stat__value { font-size: 1rem; font-weight: 750; }
.page--shop .hero-section .hero-stats--inline .hero-stat__label { font-size: 0.58rem; letter-spacing: 0.13em; }

.opioid-swing-art {
  position: relative;
  z-index: 1;
  min-height: 40rem;
  align-self: stretch;
  overflow: visible;
  isolation: isolate;
}
.opioid-swing-art::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(91%, 36rem);
  aspect-ratio: 1;
  border: 1px solid rgb(var(--cl-accent) / 0.21);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgb(255 255 255 / 0.15), transparent 35%),
    radial-gradient(circle at 50% 50%, rgb(var(--cl-accent) / 0.2), rgb(var(--cl-accent) / 0.045) 58%, transparent 72%);
  box-shadow: inset 0 0 5rem rgb(var(--cl-accent) / 0.07), 0 0 7rem rgb(var(--cl-accent) / 0.09);
  content: '';
  transform: translate(-50%, -50%);
}
.opioid-swing-art::after {
  position: absolute;
  right: 2%;
  bottom: 12%;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 999px;
  background: rgb(11 8 10 / 0.78);
  color: rgb(255 255 255 / 0.8);
  content: '✦  TAKE YOUR TIME';
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  box-shadow: 0 0.7rem 2rem rgb(0 0 0 / 0.24);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.opioid-swing-art__image {
  position: relative;
  z-index: 1;
  width: min(100%, 39rem);
  max-height: 45rem;
  filter: drop-shadow(0 2.2rem 2.5rem rgb(0 0 0 / 0.34)) drop-shadow(0 0 2rem rgb(var(--cl-accent) / 0.11));
  animation-duration: 7s;
}

@media (max-width: 900px) {
  .page--shop .hero-section .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) !important; }
  .page--shop .hero-section .hero-title { font-size: clamp(3.55rem, 7.2vw, 5.4rem); }
  .opioid-swing-art { min-height: 34rem; height: auto; }
  .opioid-swing-art__image { max-height: 38rem; }
}
@media (max-width: 767px) {
  .page--shop .hero-section { margin-top: 0; }
  .page--shop .hero-section .hero-layout {
    width: min(calc(100% - 2rem), 40rem);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.4rem;
    padding-block: 3.1rem 2.3rem;
  }
  .page--shop .hero-section .hero-title { max-width: 8.2ch; font-size: clamp(3.35rem, 15vw, 5.8rem); }
  .page--shop .hero-section .hero-subtitle { margin-top: 1rem; font-size: 0.95rem; }
  .page--shop .hero-section .hero-actions .ui-btn { min-height: 2.9rem; padding-inline: 1rem; }
  .page--shop .hero-section .hero-stats--inline { margin-top: 1.15rem; }
  .page--shop .hero-section .hero-stats--inline .hero-stat { padding-inline: 0.75rem; }
  .page--shop .hero-section .hero-stats--inline .hero-stat:first-child { padding-left: 0; }
  .opioid-swing-art { min-height: 0; height: clamp(24rem, 112vw, 34rem); margin-top: 0.2rem; }
  .opioid-swing-art__image { width: min(100%, 31rem); max-height: 100%; }
  .opioid-swing-art::before { width: min(88%, 29rem); }
  .opioid-swing-art::after { right: 3%; bottom: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .opioid-swing-art__image { animation: none !important; }
}

/* Keep navigation in its own lane so it can never collide with utility actions. */
.storefront-header { display: block !important; }
.storefront-header__main { display: block !important; }
.storefront-header__main > div { display: flex !important; }
.storefront-header__nav {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  width: 100% !important;
  margin: 0.7rem 0 0 !important;
  transform: none !important;
}
.storefront-header__nav > div { justify-content: center; }
.storefront-header__links { width: max-content; max-width: 100%; justify-content: center; }
@media (max-width: 767px) {
  .storefront-header__nav { display: none !important; }
}



/* opioid.wtf: charcoal storefront surfaces and soft pink accents. */
:root{color-scheme:dark;--opioid-muted:#969ba7;--opioid-line:rgba(255,255,255,.085);--opioid-pink:#f58ab6;--opioid-panel:#171a22}
html{color-scheme:dark;scrollbar-color:rgb(var(--cl-accent)/.48) rgb(var(--cl-background));scrollbar-width:thin}html::-webkit-scrollbar-track{background:rgb(var(--cl-background))}html::-webkit-scrollbar-thumb{border-color:rgb(var(--cl-background))}
body{color:rgb(var(--cl-t-primary));background:rgb(var(--cl-background))}::selection{background:rgb(var(--cl-accent)/.72);color:#fff}.site-container{max-width:none;padding-inline:0!important}.site-content{width:100%;overflow:clip}
.brand-wordmark__name,.brand-wordmark__suffix{color:rgb(var(--cl-t-primary))}.opioid-logo-frame{display:inline-flex;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;align-items:center;justify-content:center;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}.opioid-logo-frame--footer{width:2.5rem;height:2.5rem;flex-basis:2.5rem;border-radius:.7rem;background:rgb(var(--cl-accent))}.opioid-logo{width:100%;height:100%;object-fit:contain;transform:none}.storefront-header__brand-copy,.site-footer__brand-copy{display:grid;gap:.15rem}.storefront-header__brand-name{color:#f5f7fb;font-size:1.15rem;font-weight:800;line-height:1}.storefront-header__brand-tagline,.site-footer__tagline{color:#6f7581;font-size:.56rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase}.site-footer__name{color:rgb(var(--cl-accent));font-weight:800;letter-spacing:.04em}.site-footer__description{max-width:20rem;margin:.9rem 0 1rem;color:var(--opioid-muted);font-size:.82rem;line-height:1.65}

/* Full-width two-row header. */
.storefront-header{position:relative;z-index:30;display:block!important;width:100%;max-width:none;margin:0;overflow:visible;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.storefront-header--sticky{position:sticky;top:0}
.storefront-header__main{position:relative;width:100vw;min-height:4.45rem;margin-left:calc(50% - 50vw);padding:.65rem max(1rem,calc((100vw - 1320px)/2))!important;border-bottom:1px solid rgb(var(--cl-accent)/.28);background:#0d0e12}.storefront-header__main>div{width:100%;max-width:1320px;margin:auto}.storefront-header__brand-link{gap:.8rem!important}.storefront-header__actions{gap:.65rem!important}.storefront-header__community{display:none!important}
.storefront-header__icon-action,.storefront-header__cart,.storefront-header__actions select{display:inline-flex;min-height:2.4rem;align-items:center;justify-content:center;border:1px solid var(--opioid-line)!important;border-radius:.6rem!important;background:rgba(255,255,255,.035);color:#9ba1ad!important}
.storefront-header__nav{position:relative!important;width:100vw!important;margin:0 0 0 calc(50% - 50vw)!important;padding:0;border-bottom:1px solid rgba(255,255,255,.07)!important;background:#171a22!important;transform:none!important}.storefront-header__nav>div{display:flex;width:min(calc(100% - 2rem),1320px);min-height:3.45rem;align-items:center;justify-content:space-between;gap:1.4rem;margin:auto}.storefront-header__links{display:flex;width:auto;max-width:none;align-items:center;gap:.2rem;margin:0;padding:.35rem 0!important}
.storefront-header .nav-link{display:inline-flex;align-items:center;gap:.42rem;min-height:2.15rem;padding:.42rem .65rem;border-radius:.35rem;color:#9a9eaa!important;font-size:.77rem;font-weight:700;text-decoration:none}.storefront-header .nav-link:hover{color:#fff!important;background:rgba(255,255,255,.045)!important}.storefront-header .nav-link.is-active{color:#fff!important;background:transparent!important;box-shadow:none!important}.storefront-header .nav-link>i{color:#737986;font-size:.73rem}.storefront-header .nav-link.is-active>i{color:rgb(var(--cl-accent))}
.storefront-header__search-trigger{display:inline-flex;width:min(27rem,38vw);min-height:2.35rem;align-items:center;gap:.7rem;padding:.35rem .55rem .35rem .8rem;border:1px solid rgba(255,255,255,.085);border-radius:.65rem;background:rgba(9,10,13,.36);color:#737986;text-align:left;cursor:pointer}.storefront-header__search-trigger>span:first-of-type{flex:1;color:#777d89;font-size:.78rem}.storefront-header__search-filter{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .55rem;border:1px solid rgba(255,255,255,.08);border-radius:.4rem;background:rgba(255,255,255,.045);color:#b4b8c1;font-size:.68rem;font-weight:700}
.nav-dropdown{position:relative}.nav-dropdown__menu{position:absolute;top:calc(100% + .35rem);left:0;z-index:50;display:grid;min-width:12rem;gap:.2rem;padding:.45rem;border:1px solid var(--opioid-line);border-radius:.7rem;background:#171a22;box-shadow:0 1rem 2rem #0006}.nav-dropdown__menu a{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem;border-radius:.45rem;color:#a6abb6;font-size:.78rem;text-decoration:none}.nav-dropdown__menu a:hover{color:#fff;background:#ffffff0e}.nav-dropdown__menu i{width:1rem;color:rgb(var(--cl-accent))}
@media(max-width:767px){.storefront-header__main{width:100vw;min-height:4rem;padding-inline:1rem!important}.storefront-header__main>div{width:100%}.storefront-header__brand-tagline{font-size:.47rem;letter-spacing:.13em}.opioid-logo-frame{width:2.4rem;height:2.4rem;flex-basis:2.4rem}.storefront-header__nav{display:none!important}.storefront-header__actions select{display:none}}

/* Open hero with the user's reference artwork. */
.page--shop .hero-section{position:relative;width:100vw;margin:0 0 1.25rem calc(50% - 50vw);overflow:hidden;border:0!important;border-radius:0!important;background:#0f1014!important;box-shadow:none!important}.page--shop .hero-section .hero-layout{position:relative;display:block!important;width:min(calc(100% - 2rem),1320px);max-width:1320px;min-height:clamp(34rem,62vw,40rem);margin:auto;padding:4.4rem 0 4rem}.page--shop .hero-content{position:relative;z-index:3;width:min(50%,39rem);max-width:39rem}
.page--shop .hero-section .hero-title{max-width:10ch;margin:0;color:#f8f9fc;background:none;-webkit-text-fill-color:currentColor;font-size:clamp(3.15rem,5vw,4.35rem);font-weight:800;letter-spacing:-.055em;line-height:1.02}.page--shop .hero-section .hero-rotating-line{max-width:9.4ch;align-self:flex-start;margin-top:.2rem;line-height:1.05}.page--shop .hero-section .hero-rotating{display:block;line-height:1.05}.page--shop .hero-section .hero-rotating__word{display:block;max-width:9.4ch;color:rgb(var(--cl-accent));font-size:clamp(2.9rem,4.55vw,4.1rem);font-weight:800;letter-spacing:-.055em;line-height:1.08;white-space:normal}.page--shop .hero-section .hero-subtitle{max-width:32rem;margin-top:1.15rem;color:#a2a5ad;font-size:1.04rem;font-weight:500;line-height:1.7}.page--shop .hero-section .hero-actions{width:auto;margin-top:1.7rem}.page--shop .hero-section .hero-actions .ui-btn{min-height:3rem;padding-inline:1.25rem;border-radius:.45rem;font-size:.82rem;font-weight:800}
.page--shop .hero-section .hero-stats--cards{display:flex;width:auto;max-width:30rem;gap:.55rem;margin-top:1.5rem}.page--shop .hero-section .hero-stats--cards .hero-stat{display:grid;min-width:5.3rem;gap:.15rem;padding:.55rem .7rem;border:1px solid rgba(255,255,255,.12);border-radius:.55rem;background:rgba(24,26,32,.76);text-align:left;backdrop-filter:blur(8px)}.page--shop .hero-section .hero-stats--cards .hero-stat__value{color:#f5f7fb;font-size:.94rem;font-weight:800}.page--shop .hero-section .hero-stats--cards .hero-stat__label{color:#858a95;font-size:.56rem;font-weight:800;letter-spacing:.07em}
.opioid-swing-art{position:absolute;z-index:1;top:0;right:max(-1rem,calc((1320px - 100vw)/2));display:block;width:min(63vw,870px);height:100%;min-height:0;overflow:hidden;opacity:.87;animation:none}.opioid-swing-art:before,.opioid-swing-art:after{display:none!important}.opioid-swing-art__image{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;filter:none;transform:none;animation:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.32) 9%,#000 35%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.32) 9%,#000 35%,#000 88%,transparent 100%)}
@media(max-width:767px){.page--shop .hero-section{margin-bottom:.5rem}.page--shop .hero-section .hero-layout{min-height:0;padding:3rem 0 2.2rem}.page--shop .hero-content{width:100%;max-width:34rem}.page--shop .hero-section .hero-title{font-size:clamp(2.7rem,12vw,4rem)}.page--shop .hero-section .hero-rotating__word{font-size:clamp(2.6rem,11vw,3.8rem)}.page--shop .hero-section .hero-subtitle{font-size:.94rem}.opioid-swing-art{top:3rem;right:-6rem;width:100%;height:85%;opacity:.24}.opioid-swing-art__image{object-position:45% center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}}

/* Catalog, reviews, and store experience. */
.page--shop .shop-section--products{width:min(calc(100% - 2rem),1320px);margin:auto;padding:1.4rem 1.5rem 1.65rem;border:1px solid var(--opioid-line);border-radius:1rem;background:linear-gradient(180deg,#ffffff06,#ffffff03),#111318}.page--shop .products-section-heading{align-items:flex-start;margin-bottom:1rem}.page--shop .products-section-heading h2{color:#f5f7fb;font-size:1.4rem;font-weight:800;text-align:left;text-transform:uppercase}.page--shop .shop-nav{margin-bottom:.8rem}.shop-nav__button,.shop-nav__letter{border-color:#ffffff14;background:#1b1e26;color:#a5a9b2}.shop-nav__button.is-active,.shop-nav__letter.is-active{border-color:rgb(var(--cl-accent));background:rgb(var(--cl-accent));color:#fff}
.product-card{overflow:hidden;border:1px solid #ffffff14!important;border-radius:.75rem!important;background:#171a22!important;box-shadow:0 8px 28px #0003}.product-card:hover{border-color:rgb(var(--cl-accent)/.45)!important}.product-card h3{color:#f5f7fb!important}.product-card .text-t-primary\/40,.product-card .text-t-primary\/50{color:#969ba7!important}.product-card .text-accent-400,.product-card .text-accent-500{color:rgb(var(--cl-accent))!important}.page--products .catalog-page{width:min(calc(100% - 2rem),1320px);margin:auto}.page--products .catalog-page h1,.page--products .catalog-page h2{color:#f5f7fb}
.review-showcase__inner,.module-section__inner{width:min(calc(100% - 2rem),1320px);margin-inline:auto}.review-showcase__eyebrow,.module-heading__eyebrow,.section-heading__eyebrow{color:rgb(var(--cl-accent))}.feedbacks-heading,.module-heading__title,.section-heading__title,.page-intro__title{color:#f7f8fb}.feedback-card,.review-card{border-color:#ffffff14;background:linear-gradient(160deg,#20232b,#171a22);color:#f4f6fa}.feature-card{border-color:#ffffff16;background:#111318}.feature-card__title{color:#f4f6fa}.feature-card__description,.module-heading__description{color:#9297a2}.feature-card__icon{border-color:rgb(var(--cl-accent)/.25);background:rgb(var(--cl-accent)/.08);color:rgb(var(--cl-accent))}
.trust-badges .trust-badges__grid{display:block}.trust-badges .trust-badge{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border:1px solid var(--opioid-line);border-radius:.7rem;background:#15171d}.trust-badges .trust-badge>i{color:rgb(var(--cl-accent))}.trust-badges .trust-badge strong{color:#f2f4f8}.trust-badges .trust-badge small{color:#9095a0}
.text-video-block__media--empty{display:grid;min-height:18rem;place-content:center;gap:.65rem;border:1px solid #ffffff14;border-radius:.9rem;background:radial-gradient(ellipse at 50% 43%,#f58ab62b,transparent 53%),#0f1116;color:#aeb4c0;text-align:center}.text-video-block__media--empty .showcase-play{display:grid;width:4rem;height:4rem;place-items:center;margin:auto;border:1px solid rgb(var(--cl-accent)/.44);border-radius:50%;background:rgb(var(--cl-accent));color:#fff;box-shadow:0 0 0 .5rem rgb(var(--cl-accent)/.12)}.text-video-block__media--empty strong{color:#e4e7ed;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* FAQ: trust card on the left, numbered answers on the right. */
.page--faq .page-shell__inner{width:min(calc(100% - 2rem),1280px)}.page--faq .module-heading{max-width:70rem;margin:0 0 2rem;text-align:left!important}.page--faq .page-intro__title{display:inline-block;padding-left:.8rem;border-left:3px solid rgb(var(--cl-accent));font-size:clamp(2.1rem,4vw,3rem)}.page--faq .module-heading__description{padding-left:1rem}.page--faq .faq-list--split{display:grid;grid-template-columns:minmax(17rem,.9fr) minmax(0,1.85fr);gap:1.2rem;align-items:start}.page--faq .faq-list__aside{grid-column:1;grid-row:1;display:flex;min-height:100%;flex-direction:column;align-items:flex-start;gap:.85rem;padding:1.4rem;border:1px solid rgb(var(--cl-accent)/.24);border-radius:.9rem;background:#171a22;color:#f5f7fb}.page--faq .faq-list__aside>i{display:grid;width:2.8rem;height:2.8rem;place-items:center;border:1px solid rgb(var(--cl-accent)/.28);border-radius:.8rem;background:rgb(var(--cl-accent)/.08);color:rgb(var(--cl-accent))}.page--faq .faq-list__aside>strong{font-size:1.2rem}.page--faq .faq-list__aside>span{color:#9a9faa;font-size:.86rem}.page--faq .faq-list__items{grid-column:2;grid-row:1;display:grid;gap:.6rem}.page--faq .faq-item{border:1px solid #ffffff17;border-radius:.75rem;background:#191c24}.page--faq .faq-item__summary{min-height:4rem;color:#f4f6fa}.page--faq .faq-item__answer{color:#9ba0aa}.faq-trust-list{display:grid;width:100%;gap:.5rem;margin-top:.2rem}.faq-trust-list__item{display:grid;grid-template-columns:1rem 1fr;gap:.6rem;padding:.75rem;border:1px solid #ffffff12;border-radius:.55rem;background:#ffffff05}.faq-trust-list__item>i{margin-top:.1rem;color:rgb(var(--cl-accent))}.faq-trust-list__item strong{display:block;color:#eef1f7;font-size:.68rem;text-transform:uppercase}.faq-trust-list__item small{display:block;margin-top:.2rem;color:#8c929d;font-size:.68rem;line-height:1.45}.faq-trust-foot{display:flex;align-items:center;gap:.55rem;color:#858b97;font-size:.7rem;font-weight:700}.faq-trust-foot:before{width:.55rem;height:.55rem;border-radius:50%;background:rgb(var(--cl-accent));content:''}@media(max-width:800px){.page--faq .faq-list--split{grid-template-columns:1fr}.page--faq .faq-list__aside,.page--faq .faq-list__items{grid-column:1;grid-row:auto}}

/* Dark status and purchase surfaces. */
.status-card,.catalog-page,.product-detail__purchase-column,.product-detail__gallery,.product-detail__description{border-color:var(--opioid-line);background:#171a22}.status-card:hover{border-color:rgb(var(--cl-accent)/.35)}.product-detail__purchase-column,.product-detail__gallery,.product-detail__description{border-radius:.9rem}

/* Four-column footer and compact social buttons. */
.site-footer{margin-top:clamp(3rem,6vw,6rem);border-top:1px solid rgb(var(--cl-accent)/.26);background:linear-gradient(180deg,#171a22,#101116)}.site-footer__inner{width:min(calc(100% - 2rem),1320px);max-width:1320px;padding-top:2.2rem}.site-footer__layout{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.15fr;gap:2.2rem;padding-bottom:2rem}.site-footer__nav{display:contents;padding:0;border:0}.site-footer__col{align-content:start;gap:.72rem}.site-footer__col-title{color:#777d89;font-size:.63rem;letter-spacing:.16em}.site-footer__socials{justify-content:flex-start;gap:.45rem}.site-footer .site-social{width:2.35rem;height:2.35rem;max-width:2.35rem;justify-content:center;padding:0;border:1px solid #ffffff14;border-radius:.55rem;background:#ffffff08}.site-footer .site-social__label{display:none}.site-footer__nav-link,.site-footer__copyright,.site-footer__trust-link{color:#8f949e;font-size:.78rem}.site-footer__trust-link{display:flex;align-items:center;gap:.65rem;text-decoration:none}.site-footer__trust-link i{width:.9rem;color:rgb(var(--cl-accent))}.site-footer__bottom{min-height:3.6rem;border-top:1px solid #ffffff12;padding-block:.9rem 1rem}.site-footer__bottom-links{display:flex;flex-wrap:wrap;gap:1rem}.site-footer__bottom-links a{color:#737984;font-size:.72rem;text-decoration:none}@media(max-width:850px){.site-footer__layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1.3rem}}@media(max-width:520px){.site-footer__layout{grid-template-columns:1fr 1fr}.site-footer__identity{grid-column:1/-1}.site-footer__bottom{align-items:flex-start;flex-direction:column}}

/* opioid.wtf identity: pink accent and supplied character artwork. */
.opioid-logo-frame{border:1px solid rgb(var(--cl-accent)/.25)!important;border-radius:.7rem!important;background:rgb(var(--cl-accent)/.06)!important;box-shadow:0 0 1.2rem rgb(var(--cl-accent)/.10)}
.opioid-logo-frame--footer{width:2.6rem;height:2.6rem;flex-basis:2.6rem;background:rgb(var(--cl-accent)/.10)!important}
.opioid-logo{width:100%;height:100%;object-fit:contain!important;transform:none!important}
.opioid-intro__logo{filter:drop-shadow(0 0 2rem rgb(var(--cl-accent)/.2))}
.page--shop .hero-section .hero-content{width:min(51%,42rem)}
.opioid-swing-art{isolation:isolate;width:min(62vw,820px);right:max(-1rem,calc((1320px - 100vw)/2));overflow:visible;opacity:1}
.opioid-swing-art::before{display:block!important;position:absolute;inset:9% 1% 7% 7%;z-index:0;border-radius:50%;background:radial-gradient(ellipse at 60% 50%,rgb(var(--cl-accent)/.18),rgb(var(--cl-accent)/.07) 36%,transparent 72%);content:'';filter:blur(1.2rem)}
.opioid-swing-art__image{inset:0;width:100%;height:100%;object-fit:contain!important;object-position:right bottom!important;opacity:.96;filter:drop-shadow(0 1.1rem 2.2rem rgb(var(--cl-accent)/.12));-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.34) 10%,#000 30%,#000 100%)!important;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.34) 10%,#000 30%,#000 100%)!important}
@media(max-width:767px){.page--shop .hero-section .hero-content{width:100%}.opioid-swing-art{top:4rem;right:-3.5rem;width:112%;height:82%;opacity:.32}.opioid-swing-art::before{inset:8% 0 5% 12%}.opioid-swing-art__image{object-position:70% bottom!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%)!important;mask-image:linear-gradient(90deg,transparent 0%,#000 28%)!important}}
/* Motion and layout polish. */
@keyframes opioidHeroEnter{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes opioidArtEnter{from{transform:translate3d(0,20px,0)}to{transform:translate3d(0,0,0)}}
@keyframes opioidHeroSwing{0%,100%{transform:rotate(-1.8deg) translate3d(-2px,0,0)}50%{transform:rotate(1.8deg) translate3d(2px,3px,0)}}
@keyframes opioidGlowBreathe{0%,100%{opacity:.62;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.page--shop .hero-section .hero-content{width:min(54%,44rem);animation:opioidHeroEnter .8s cubic-bezier(.2,.8,.2,1) both}
.page--shop .hero-section .hero-rotating-line{max-width:16ch}
.page--shop .hero-section .hero-rotating__word{max-width:16ch;font-size:clamp(2.8rem,4.25vw,3.9rem)}
.opioid-swing-art{animation:opioidArtEnter .9s cubic-bezier(.2,.8,.2,1) .12s both}
.opioid-swing-art::before{animation:opioidGlowBreathe 7s ease-in-out infinite}
.opioid-swing-art__image{transform-origin:50% 0%;animation:opioidHeroSwing 5.8s ease-in-out .45s infinite;will-change:transform}
.text-video-block__media--empty{position:relative;min-height:20rem;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,rgb(var(--cl-accent)/.16),transparent 55%),linear-gradient(145deg,#17151c,#0f1014)}
.product-card,.feedback-card,.review-card,.feature-card,.faq-item,.status-card{transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgb(var(--cl-accent)/.1),0 8px 28px #0004}
.product-card img{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.product-card:hover img{transform:scale(1.035)}
.feedback-card:hover,.review-card:hover,.feature-card:hover{transform:translateY(-4px);border-color:rgb(var(--cl-accent)/.35);box-shadow:0 16px 32px #0003,0 8px 24px rgb(var(--cl-accent)/.06)}
.faq-item:hover{transform:translateY(-2px);border-color:rgb(var(--cl-accent)/.3)}
.status-card:hover{transform:translateY(-2px)}
.storefront-header .nav-link{transition:color .18s ease,background-color .18s ease,transform .18s ease}
.storefront-header .nav-link:hover{transform:translateY(-1px)}
.ui-btn{transition:transform .18s ease,box-shadow .2s ease,filter .18s ease}
.ui-btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
.opioid-reveal{opacity:0;transform:translate3d(0,18px,0) scale(.995);transition:opacity .64s ease var(--opioid-reveal-delay,0ms),transform .64s cubic-bezier(.2,.8,.2,1) var(--opioid-reveal-delay,0ms)}
.opioid-reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
@media(max-width:767px){.page--shop .hero-section .hero-content{width:100%}.opioid-swing-art__image{animation-duration:7.2s}.page--shop .hero-section .hero-rotating__word{font-size:clamp(2.55rem,10.2vw,3.7rem)}}
@media(prefers-reduced-motion:reduce){.page--shop .hero-section .hero-content,.opioid-swing-art,.opioid-swing-art::before,.opioid-swing-art__image{animation:none!important;will-change:auto!important}.opioid-reveal,.product-card,.product-card img,.feedback-card,.review-card,.feature-card,.faq-item,.status-card,.storefront-header .nav-link,.ui-btn{transition:none!important}.opioid-reveal,.opioid-reveal.is-visible{opacity:1!important;transform:none!important}.product-card:hover,.feedback-card:hover,.review-card:hover,.feature-card:hover,.faq-item:hover,.status-card:hover,.storefront-header .nav-link:hover,.ui-btn:hover{transform:none!important;filter:none!important}}
/* Elitepvpers profile button */
.site-footer .site-social--elitepvpers{width:2.35rem;max-width:2.35rem;height:2.35rem;flex:0 0 2.35rem;gap:0;overflow:hidden;padding:0;border-color:#ffffff14;background:#ffffff08}
.site-footer .site-social--elitepvpers:hover,.site-footer .site-social--elitepvpers:focus-visible{max-width:2.35rem;border-color:rgb(var(--cl-accent)/.7);background:rgb(var(--cl-accent)/.12)}
.site-footer .site-social--elitepvpers img{display:block;width:1.4rem;height:1.4rem;object-fit:contain;filter:brightness(0) invert(1)}

/* Center the empty media state within its preview frame */
.premium-text-media .text-video-block__media--empty{display:grid;grid-template-columns:minmax(0,1fr);place-content:center;justify-items:center;align-content:center;gap:1rem;min-height:20rem;padding:2rem;text-align:center}
.premium-text-media .text-video-block__media--empty .showcase-play{margin:0}
.premium-text-media .text-video-block__media--empty strong{display:block;max-width:18rem;line-height:1.4}
/* Smooth the hero into the first storefront panel */
.page--shop .hero-section{margin-bottom:0!important;background:radial-gradient(ellipse 46% 78% at 73% 42%,rgb(var(--cl-accent)/.07),transparent 72%),radial-gradient(ellipse 70% 110% at 8% 100%,rgb(var(--cl-accent)/.04),transparent 72%),linear-gradient(180deg,#0f1014 0%,#0f1014 68%,rgb(var(--cl-background)/.72) 86%,transparent 100%)!important}
.page--shop .hero-section::before{display:none!important}
.page--shop .site-content>.components>.cta-banner{padding-top:clamp(.75rem,1.5vw,1.25rem)}
/* Keep all footer social marks in the opioid.wtf pink accent */
.site-footer .site-social{color:rgb(var(--cl-accent))}
.site-footer .site-social--elitepvpers .site-social__mark{display:block;width:1.4rem;height:1.4rem;flex:0 0 1.4rem;background:currentColor;-webkit-mask-image:var(--epvp-logo);mask-image:var(--epvp-logo);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
/* Compact currency control and dropdown */
.currency-selector .choices{width:5.25rem;min-width:5.25rem}
.currency-selector .choices .choices__inner{padding-left:.62rem;padding-right:1.45rem}
.currency-selector .choices__list--dropdown{width:min(8.5rem,calc(100vw - 1.5rem));min-width:min(8.5rem,calc(100vw - 1.5rem))}
/* opioid.wtf signature motion: drifting rose light and tiny constellation sparks */
.page--shop .hero-section .hero-layout{z-index:1}
.page--shop .hero-section::after{position:absolute;inset:0;z-index:0;pointer-events:none;content:'';background:radial-gradient(ellipse 35% 45% at 19% 31%,rgb(var(--cl-accent)/.075),transparent 74%),radial-gradient(ellipse 32% 52% at 83% 58%,rgb(var(--cl-accent)/.085),transparent 72%);opacity:.72;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 65%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 65%,transparent 100%);animation:opioidRoseDrift 18s ease-in-out infinite alternate}
@keyframes opioidRoseDrift{0%{transform:translate3d(-1.2%,0,0) scale(.98);opacity:.48}100%{transform:translate3d(1.2%,-.8%,0) scale(1.04);opacity:.82}}
.opioid-swing-art::after{display:block!important;position:absolute;inset:8% 1% 8% 3%;z-index:0;pointer-events:none;content:'';background:radial-gradient(circle at 14% 24%,rgb(var(--cl-accent)/.9) 0 1px,transparent 2px),radial-gradient(circle at 29% 69%,rgb(255 255 255/.75) 0 1px,transparent 2px),radial-gradient(circle at 78% 18%,rgb(var(--cl-accent)/.82) 0 1.3px,transparent 2.3px),radial-gradient(circle at 88% 63%,rgb(255 255 255/.7) 0 1px,transparent 2px),radial-gradient(circle at 42% 14%,rgb(var(--cl-accent)/.7) 0 1px,transparent 2px);opacity:.48;animation:opioidFireflyDrift 9s ease-in-out infinite alternate}
.opioid-swing-art__image{z-index:1}
@keyframes opioidFireflyDrift{0%{transform:translate3d(0,0,0);opacity:.28}50%{opacity:.68}100%{transform:translate3d(0,-.75rem,0);opacity:.4}}
.feature-card__icon{transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease}
.feature-card:hover .feature-card__icon{transform:translateY(-.18rem) rotate(-7deg) scale(1.06);box-shadow:0 0 1.2rem rgb(var(--cl-accent)/.18)}
.premium-faq .faq-item__icon{transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .25s ease,background-color .25s ease}
.premium-faq .faq-item[open] .faq-item__icon{transform:rotate(45deg)}
.cta-banner__button>i:last-of-type{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.cta-banner__button:hover>i:last-of-type{transform:translateX(.22rem)}
.site-footer .site-social__icon i{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.site-footer .site-social:hover .site-social__icon i{transform:translateY(-2px) rotate(-8deg) scale(1.08)}
.storefront-header__brand-link .opioid-logo-frame{transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.storefront-header__brand-link:hover .opioid-logo-frame{transform:rotate(-5deg) scale(1.06);filter:drop-shadow(0 0 .65rem rgb(var(--cl-accent)/.38))}
@media(prefers-reduced-motion:reduce){.page--shop .hero-section::after,.opioid-swing-art::after{animation:none!important}.feature-card__icon,.premium-faq .faq-item__icon,.cta-banner__button>i,.site-footer .site-social__icon i,.storefront-header__brand-link .opioid-logo-frame{transition:none!important}.feature-card:hover .feature-card__icon,.premium-faq .faq-item[open] .faq-item__icon,.cta-banner__button:hover>i:last-of-type,.site-footer .site-social:hover .site-social__icon i,.storefront-header__brand-link:hover .opioid-logo-frame{transform:none!important;filter:none!important}}

/* Currency menu: searchable, compact rows with the store's pink accent. */
.currency-selector__search{position:relative;display:flex;align-items:center;margin:.12rem .1rem .35rem;padding:.55rem .65rem;gap:.5rem;border:1px solid #ffffff12;border-radius:.55rem;background:#0f1116;color:#858b97}
.currency-selector__search:focus-within{border-color:rgb(var(--cl-accent)/.5);box-shadow:0 0 0 2px rgb(var(--cl-accent)/.1)}
.currency-selector__search i{flex:0 0 auto;font-size:.72rem}
.currency-selector__search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#f5f7fb;font-size:.75rem}
.currency-selector__search input::placeholder{color:#777d89}
.currency-selector__options{scrollbar-color:rgb(var(--cl-accent)/.65) transparent;scrollbar-width:thin}
.currency-selector__options [role=option]{min-height:2.2rem}
.currency-selector__options [role=option]:focus-visible{outline:2px solid rgb(var(--cl-accent)/.7);outline-offset:-2px}
.currency-selector__symbol{font-weight:800}

/* The split FAQ uses the compact, numbered list from the reference. */
.page--faq .faq-item__summary{display:flex;align-items:center;gap:.85rem}
.page--faq .faq-item__number{display:inline-flex;width:1.8rem;height:1.8rem;flex:0 0 1.8rem;align-items:center;justify-content:center;border:1px solid rgb(var(--cl-accent)/.25);border-radius:.48rem;background:rgb(var(--cl-accent)/.055);color:rgb(var(--cl-accent));font-size:.68rem;font-weight:800;font-variant-numeric:tabular-nums}
.page--faq .faq-item__question{flex:1}
.page--faq .faq-trust-foot{margin-top:.12rem}

/* Home community panel: the social layout is branded in opioid.wtf pink. */
.community-follow{padding-block:clamp(2.25rem,5vw,4rem)}
.community-follow__inner{padding:clamp(1.2rem,2.4vw,1.8rem);border:1px solid #ffffff14;border-radius:1rem;background:linear-gradient(145deg,#ffffff04,transparent 55%),#111318}
.community-follow .module-heading{margin-bottom:1.2rem}
.community-follow .module-heading__eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:rgb(var(--cl-accent));font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.community-follow .module-heading__title{margin:.55rem 0 .35rem;color:#f5f7fb;font-size:clamp(1.55rem,3vw,2rem);font-weight:800;letter-spacing:-.035em}
.community-follow .module-heading__description{margin:0;color:#9297a2;font-size:.86rem}
.community-follow__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:.75rem}
.community-follow__card{position:relative;display:flex;min-width:0;min-height:6.8rem;align-items:center;gap:.85rem;padding:1rem 1.1rem;border:1px solid #ffffff14;border-radius:.75rem;background:linear-gradient(145deg,#ffffff04,transparent 58%),#101116;color:inherit;text-decoration:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .24s ease,background-color .24s ease,box-shadow .24s ease}
.community-follow__card:hover,.community-follow__card:focus-visible{transform:translateY(-3px);border-color:rgb(var(--cl-accent)/.42);background-color:#151219;box-shadow:0 12px 28px #0003,0 0 22px rgb(var(--cl-accent)/.055);outline:0}
.community-follow__icon{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;border:1px solid rgb(var(--cl-accent)/.24);border-radius:.7rem;background:rgb(var(--cl-accent)/.07);color:rgb(var(--cl-accent));font-size:1.02rem;transition:transform .28s cubic-bezier(.2,.8,.2,1),background-color .24s ease}
.community-follow__card:hover .community-follow__icon{transform:translateY(-1px) scale(1.04);background:rgb(var(--cl-accent)/.13)}
.community-follow__copy{display:grid;min-width:0;gap:.28rem}
.community-follow__copy strong{overflow:hidden;color:#f2f4f8;font-size:.92rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.community-follow__copy small{overflow:hidden;color:#8b909a;font-size:.74rem;text-overflow:ellipsis;white-space:nowrap}
.community-follow__arrow{margin-left:auto;color:#858b97;font-size:.75rem;transition:transform .24s ease,color .24s ease}
.community-follow__card:hover .community-follow__arrow{transform:translate(2px,-2px);color:rgb(var(--cl-accent))}
.community-follow__icon--epvp{padding:.35rem}
.community-follow__epvp-mark{display:block;width:100%;height:100%;background:currentColor;-webkit-mask-image:var(--epvp-logo);mask-image:var(--epvp-logo);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.community-follow__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.85rem;margin-top:.7rem;padding:.85rem 1rem;border:1px solid #ffffff12;border-radius:.7rem;background:#ffffff04}
.community-follow__bar-icon{display:grid;width:2.35rem;height:2.35rem;place-items:center;border:1px solid rgb(var(--cl-accent)/.23);border-radius:.62rem;background:rgb(var(--cl-accent)/.07);color:rgb(var(--cl-accent))}
.community-follow__bar-copy{display:grid;gap:.2rem}
.community-follow__bar-copy strong{color:#e9ebf0;font-size:.82rem}
.community-follow__bar-copy small{color:#8d929d;font-size:.73rem;line-height:1.45}
.community-follow__button{display:inline-flex;min-height:2.4rem;align-items:center;justify-content:center;gap:.5rem;padding:0 .85rem;border:1px solid rgb(var(--cl-accent)/.28);border-radius:.55rem;background:rgb(var(--cl-accent)/.07);color:#f4dce7;font-size:.74rem;font-weight:800;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background-color .2s ease}
.community-follow__button:hover,.community-follow__button:focus-visible{transform:translateY(-1px);border-color:rgb(var(--cl-accent)/.55);background:rgb(var(--cl-accent)/.14);outline:0}
.community-follow__button i{color:rgb(var(--cl-accent))}
@media(max-width:760px){.community-follow__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.community-follow__inner{padding:1rem}}
@media(max-width:520px){.community-follow__grid{grid-template-columns:1fr}.community-follow__card{min-height:5.8rem}.community-follow__bar{grid-template-columns:auto minmax(0,1fr)}.community-follow__button{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.community-follow__card,.community-follow__icon,.community-follow__arrow,.community-follow__button{transition:none!important}.community-follow__card:hover,.community-follow__button:hover{transform:none!important}}

/* Keep these opioid.wtf surfaces pink even when a platform accent is injected. */
.page--faq .premium-faq{--faq-accent:#f58ab6!important}
.page--faq .page-intro__title{border-left-color:#f58ab6}
.page--faq .module-heading__eyebrow,.page--faq .faq-list__aside>i,.page--faq .faq-trust-list__item>i,.page--faq .faq-trust-foot:before{color:#f58ab6}
.page--faq .faq-list__aside{border-color:rgb(245 138 182/.28)}
.page--faq .faq-list__aside>i{border-color:rgb(245 138 182/.32);background:rgb(245 138 182/.09)}
.page--faq .faq-item__number{border-color:rgb(245 138 182/.3);background:rgb(245 138 182/.08);color:#f58ab6}
.page--faq .faq-trust-foot:before{background:#f58ab6}
.currency-selector__search:focus-within{border-color:rgb(245 138 182/.58);box-shadow:0 0 0 2px rgb(245 138 182/.12)}
.currency-selector__symbol{border:1px solid rgb(245 138 182/.25);background:rgb(245 138 182/.09);color:#f58ab6}
.currency-selector__symbol.bg-accent-500{border-color:#f58ab6;background-color:#f58ab6!important;color:#25131b!important}
.currency-selector [role=option][aria-selected=true]{background-color:rgb(245 138 182/.12)!important;color:#f58ab6!important}
.currency-selector [role=option][aria-selected=true] .currency-selector__symbol{background-color:#f58ab6!important;color:#25131b!important}
.currency-selector__trigger{display:flex;width:5rem;height:2.5rem;align-items:center;justify-content:space-between;gap:.45rem;padding:.28rem .48rem;border:1px solid #38333b;border-radius:.55rem;background:#17171d;color:#f6f2f6;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.currency-selector__trigger:hover,.currency-selector__trigger[aria-expanded=true]{border-color:rgb(245 138 182/.52);background:#1c1820;box-shadow:0 0 0 2px rgb(245 138 182/.07)}
.currency-selector__current-symbol{display:inline-flex;min-width:1.35rem;height:1.35rem;align-items:center;justify-content:center;padding-inline:.23rem;border:1px solid rgb(245 138 182/.36);border-radius:.36rem;background:rgb(245 138 182/.13);color:#f58ab6;font-size:.68rem;font-weight:850;line-height:1}
.currency-selector__chevron{width:.78rem;height:.78rem;flex:0 0 .78rem;color:#9a929d;transition:transform .18s ease}
.currency-selector__chevron.is-open{transform:rotate(180deg)}
.currency-selector__menu{position:absolute;top:calc(100% + .38rem);right:0;z-index:120;width:min(11rem,calc(100vw - 1.5rem));overflow:hidden;border:1px solid #35323b;border-radius:.72rem;background:#1b1c23;box-shadow:0 1rem 2.5rem #0009,0 0 0 1px #ffffff05 inset}
.currency-selector__menu--up{top:auto;bottom:calc(100% + .38rem)}
.currency-selector__search{position:relative;display:flex;align-items:center;margin:.45rem .45rem .3rem;padding:.62rem .62rem;gap:.48rem;border:1px solid #37343e;border-radius:.52rem;background:#14151a;color:#918b96}
.currency-selector__search:focus-within{border-color:rgb(245 138 182/.58);box-shadow:0 0 0 2px rgb(245 138 182/.12)}
.currency-selector__search i{flex:0 0 auto;font-size:.72rem}
.currency-selector__search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#f5f2f7;font-size:.77rem}
.currency-selector__search input::placeholder{color:#85808b}
.currency-selector__options{max-height:min(19rem,55vh);overflow-y:auto;padding:.15rem .38rem .4rem;scrollbar-color:rgb(245 138 182/.62) transparent;scrollbar-width:thin}
.currency-selector__option{display:flex;width:100%;min-height:2.35rem;align-items:center;gap:.58rem;padding:.42rem .55rem;border:0;border-radius:.48rem;background:transparent;color:#e8e5eb;text-align:left;font-size:.8rem;font-weight:650;cursor:pointer;transition:background-color .16s ease,color .16s ease}
.currency-selector__option:hover,.currency-selector__option:focus-visible{background:rgb(245 138 182/.08);color:#fff;outline:0}
.currency-selector__option.is-selected{background:rgb(245 138 182/.12);color:#fff}
.currency-selector__symbol{display:inline-flex;width:1.8rem;min-width:1.8rem;height:1.7rem;align-items:center;justify-content:center;padding-inline:.18rem;border:1px solid rgb(245 138 182/.24);border-radius:.38rem;background:rgb(245 138 182/.07);color:#f58ab6;font-size:.61rem;font-weight:850;line-height:1;white-space:nowrap}
.currency-selector__symbol.is-selected{border-color:#f58ab6;background:#f58ab6;color:#26141c}
.currency-selector__code{flex:1}
.currency-selector__check{width:.85rem;height:.85rem;flex:0 0 .85rem;color:#f58ab6}
@media(prefers-reduced-motion:reduce){.currency-selector__trigger,.currency-selector__chevron,.currency-selector__option{transition:none!important}}

/* Keep the intro loader fully opaque above the storefront while it is active. */
html.opioid-intro-active #opioid-intro,#opioid-intro.is-leaving{z-index:2147483647!important;isolation:isolate;background:#000!important}
/* Full-screen opioid.wtf account experience */
[data-opioid-auth] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: grid;
  overflow-y: auto !important;
  background: #0d0e12;
  color: #f6f5f8;
}
[data-opioid-auth][x-cloak] { display: none !important; }
.opioid-auth-stage { position: relative; display: grid; min-height: 100dvh; place-items: stretch; padding: 0; }
.opioid-auth-backdrop { position: fixed !important; inset: 0; background: linear-gradient(140deg, #100f14 0%, #111117 50%, #171018 100%) !important; }
.opioid-auth-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(26rem, 1.08fr);
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #111217 !important;
  color: #f6f5f8;
  box-shadow: none !important;
}
.opioid-auth-brand {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 4rem);
  border-right: 1px solid rgb(var(--cl-accent) / .18);
  background: linear-gradient(145deg, #211821 0%, #17151d 48%, #121319 100%);
}
.opioid-auth-brand::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 15%, rgb(var(--cl-accent) / .06) 50%, transparent 78%), repeating-linear-gradient(0deg, transparent 0 4.2rem, rgb(255 255 255 / .018) 4.25rem 4.3rem);
  content: '';
}
.opioid-auth-brand__identity,
.opioid-auth-brand__copy,
.opioid-auth-brand__foot { position: relative; z-index: 2; }
.opioid-auth-brand__identity { display: flex; align-items: center; gap: .85rem; }
.opioid-auth-brand__identity img { width: 2.75rem; height: 2.75rem; object-fit: contain; filter: drop-shadow(0 0 .8rem rgb(var(--cl-accent) / .24)); }
.opioid-auth-brand__identity span { display: grid; gap: .28rem; }
.opioid-auth-brand__identity strong { color: #fff; font-size: 1.2rem; font-weight: 850; letter-spacing: -.035em; }
.opioid-auth-brand__identity small { color: #92909a; font-size: .56rem; font-weight: 750; letter-spacing: .18em; }
.opioid-auth-brand__copy { max-width: 30rem; margin-block: auto; padding-block: 5rem 7rem; }
.opioid-auth-brand__eyebrow,
.opioid-auth-main__eyebrow { display: block; margin-bottom: .9rem; color: rgb(var(--cl-accent)); font-size: .66rem; font-weight: 800; letter-spacing: .18em; }
.opioid-auth-brand__copy h2 { margin: 0; color: #f8f7fa; font-family: var(--font-heading); font-size: clamp(2.7rem, 5.2vw, 5.3rem); font-weight: 850; letter-spacing: -.065em; line-height: .98; }
.opioid-auth-brand__copy h2 em { color: rgb(var(--cl-accent)); font-style: normal; }
.opioid-auth-brand__copy p { max-width: 24rem; margin: 1.2rem 0 0; color: #a6a1ac; font-size: .96rem; line-height: 1.75; }
.opioid-auth-brand__art { position: absolute; z-index: 1; right: -4%; bottom: 3rem; width: min(80%, 35rem); max-height: 64vh; object-fit: contain; object-position: right bottom; opacity: .28; filter: drop-shadow(0 1.6rem 2rem rgb(var(--cl-accent) / .14)); pointer-events: none; }
.opioid-auth-brand__foot { display: flex; align-items: center; gap: .65rem; padding-top: 1.1rem; border-top: 1px solid rgb(255 255 255 / .1); color: #aaa4af; font-size: .62rem; font-weight: 750; letter-spacing: .13em; }
.opioid-auth-brand__signal { width: .48rem; height: .48rem; border-radius: 50%; background: rgb(var(--cl-accent)); box-shadow: 0 0 .9rem rgb(var(--cl-accent) / .65); }
.opioid-auth-main { display: grid; min-width: 0; min-height: 100dvh; place-items: center; padding: clamp(1.5rem, 5vw, 5rem); background: linear-gradient(155deg, #171920, #111217 58%, #141117); }
.opioid-auth-main__inner { width: min(100%, 29rem); animation: opioidAuthArrive .6s cubic-bezier(.2,.8,.2,1) both; }
.opioid-auth-shell__header { align-items: flex-start; margin-bottom: 2rem !important; }
.opioid-auth-shell__header h3 { margin: 0; color: #f8f7fa; font-size: clamp(1.55rem, 3vw, 2rem); letter-spacing: -.045em; }
.opioid-auth-main__eyebrow { margin-bottom: .55rem; }
.opioid-auth-main__hint { margin: .45rem 0 0; color: #9999a4; font-size: .87rem; line-height: 1.6; }
.opioid-auth-shell__header button { display: grid; width: 2.6rem; height: 2.6rem; flex: 0 0 auto; place-items: center; margin-top: .1rem; border: 1px solid rgb(255 255 255 / .1); border-radius: .7rem; background: rgb(255 255 255 / .035); color: #b6b2bc; transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.opioid-auth-shell__header button:hover { transform: rotate(5deg); border-color: rgb(var(--cl-accent) / .5); color: rgb(var(--cl-accent)); }
.opioid-auth-shell label { color: #dedbe2 !important; font-size: .84rem; font-weight: 700; }
.opioid-auth-shell small { color: #8e8c97 !important; font-size: .75rem; line-height: 1.55; }
.opioid-auth-shell input { min-height: 3.2rem; border: 1px solid rgb(255 255 255 / .12) !important; border-radius: .75rem !important; background: #0d0e13 !important; color: #f7f5f8 !important; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.opioid-auth-shell input::placeholder { color: #666671 !important; }
.opioid-auth-shell input:focus { border-color: rgb(var(--cl-accent) / .72) !important; background: #121117 !important; box-shadow: 0 0 0 .22rem rgb(var(--cl-accent) / .12) !important; }
.opioid-auth-shell .flex.gap-2.mt-2 > input { min-width: 0; min-height: 3.5rem; flex: 1 1 0; padding-inline: .2rem; font-size: 1.25rem; font-weight: 800; }
.opioid-auth-shell button[type="submit"] { min-height: 3.35rem; margin-top: 1.25rem !important; border: 0 !important; border-radius: .78rem !important; background: linear-gradient(105deg, rgb(var(--cl-accent)), color-mix(in srgb, rgb(var(--cl-accent)) 72%, #fff)) !important; color: #22131c !important; font-size: .9rem; font-weight: 850; box-shadow: 0 .7rem 1.8rem -1rem rgb(var(--cl-accent) / .8); transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.opioid-auth-shell button[type="submit"]:hover:enabled { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 .9rem 2rem -1rem rgb(var(--cl-accent) / .85); }
.opioid-auth-shell button[type="button"]:not(.opioid-auth-shell__header button) { color: #b8b4bf; }
.opioid-auth-shell button[type="button"]:not(.opioid-auth-shell__header button):hover { color: rgb(var(--cl-accent)); }
@keyframes opioidAuthArrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Refined live-status dashboard: editorial header, clear state and crisp rows */
.status-page__inner { gap: 1.15rem; padding: clamp(.25rem, 1vw, .75rem); border: 0; border-radius: 0; background: transparent; }
.status-page__intro { position: relative; min-height: 13rem; align-items: center; overflow: hidden; padding: clamp(1.5rem, 4vw, 3.25rem); border-color: rgb(var(--cl-accent) / .2); border-radius: 1.1rem; background: linear-gradient(112deg, #1b1b24 0%, #17171f 54%, #21161f 100%); box-shadow: inset 0 1px rgb(255 255 255 / .035), 0 1.5rem 3rem -2.6rem #000; }
.status-page__intro::after { position: absolute; top: 0; right: 0; bottom: 0; width: min(36%, 22rem); border-left: 1px solid rgb(255 255 255 / .045); background: linear-gradient(135deg, transparent 35%, rgb(var(--cl-accent) / .07)), repeating-linear-gradient(135deg, transparent 0 1.1rem, rgb(255 255 255 / .018) 1.15rem 1.2rem); content: ''; mask-image: linear-gradient(90deg, transparent, #000 50%); pointer-events: none; }
.status-page__intro-copy { position: relative; z-index: 1; }
.status-page__eyebrow { display: inline-flex; align-items: center; gap: .55rem; }
.status-page__eyebrow::before { width: .42rem; height: .42rem; border-radius: 50%; background: rgb(var(--cl-accent)); box-shadow: 0 0 .8rem rgb(var(--cl-accent) / .72); content: ''; }
.status-page__intro .page-intro__title { max-width: 12ch; margin: 0; font-size: clamp(2.5rem, 5vw, 4.1rem); font-weight: 850; letter-spacing: -.06em; line-height: 1.02; }
.status-page__description { max-width: 40rem; font-size: .95rem; }
.status-banner { position: relative; gap: 1rem 1.35rem; min-height: 5.5rem; padding: 1.05rem 1.35rem; border-radius: .9rem; background: linear-gradient(110deg, color-mix(in srgb, var(--status-banner-color) 11%, #191a21), #17181f 65%); box-shadow: inset 0 1px rgb(255 255 255 / .035); }
.status-banner__dot { width: .78rem; height: .78rem; }
.status-banner[data-state="ready"] .status-banner__dot { animation: opioidStatusBreath 2.8s ease-in-out infinite; }
.status-banner__counts { gap: .5rem; margin-left: auto; }
.status-banner__count { min-height: 2rem; padding: .38rem .58rem; border: 1px solid color-mix(in srgb, var(--count-color) 23%, transparent); border-radius: .55rem; background: color-mix(in srgb, var(--count-color) 7%, transparent); }
.status-page__toolbar { padding: .25rem 0; }
.status-page__search { min-height: 3.15rem; border-radius: .75rem; }
.status-page__nav { padding-bottom: .8rem; border-bottom: 1px solid rgb(255 255 255 / .08); }
.status-filter { border-radius: .68rem; }
.status-page__status-nav { padding-block: .35rem; }
.status-page__results-bar { padding-top: .3rem; }
.status-group { gap: .55rem; }
.status-group__header { padding: .6rem .2rem; border-bottom: 1px solid rgb(255 255 255 / .07); }
.status-group__identity > img, .status-group__fallback { width: 2.6rem; height: 2.6rem; border-radius: .75rem; }
.status-group__title { font-size: 1rem; }
.status-card { min-height: 5.6rem; border-radius: .82rem; background: linear-gradient(110deg, rgb(255 255 255 / .025), transparent 65%), var(--status-card-surface, var(--theme-surface)); box-shadow: inset 0 1px rgb(255 255 255 / .025); }
.status-card:hover, .status-card:focus-visible { box-shadow: 0 .9rem 1.8rem -1.45rem rgb(var(--cl-accent) / .3), inset 0 1px rgb(255 255 255 / .045); }
@keyframes opioidStatusBreath { 0%, 100% { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--status-banner-color) 11%, transparent); } 50% { box-shadow: 0 0 0 .42rem color-mix(in srgb, var(--status-banner-color) 17%, transparent); } }

/* Account pages inherit the same quiet pink detail as the storefront */
.customer-portal__sidebar .customer-nav,
.customer-portal__main .bg-card.border { border-color: rgb(var(--cl-accent) / .14); box-shadow: inset 0 1px rgb(255 255 255 / .025); }
.customer-portal__main .bg-card.border:hover { border-color: rgb(var(--cl-accent) / .3); }

@media (max-width: 760px) {
  .opioid-auth-shell { grid-template-columns: 1fr; }
  .opioid-auth-brand { min-height: 0; padding: 1.1rem 1.25rem; border-right: 0; border-bottom: 1px solid rgb(var(--cl-accent) / .18); }
  .opioid-auth-brand__identity img { width: 2.35rem; height: 2.35rem; }
  .opioid-auth-brand__identity strong { font-size: 1rem; }
  .opioid-auth-brand__identity small { font-size: .49rem; }
  .opioid-auth-brand__copy { margin: 1.1rem 0 0; padding: 0; }
  .opioid-auth-brand__eyebrow { margin-bottom: .4rem; font-size: .56rem; }
  .opioid-auth-brand__copy h2 { font-size: clamp(1.45rem, 6vw, 2.1rem); line-height: 1.05; }
  .opioid-auth-brand__copy h2 br { display: none; }
  .opioid-auth-brand__copy p, .opioid-auth-brand__art, .opioid-auth-brand__foot { display: none; }
  .opioid-auth-main { min-height: 0; padding: 2rem 1.25rem 3rem; }
  .status-page__intro { min-height: 11rem; }
  .status-page__intro::after { width: 23%; opacity: .6; }
  .status-banner__counts { width: 100%; margin-left: 0; }
  .status-banner__count { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
  .opioid-auth-brand { padding-inline: 1rem; }
  .opioid-auth-main { padding-inline: 1rem; }
  .opioid-auth-shell__header { margin-bottom: 1.4rem !important; }
  .opioid-auth-shell .flex.gap-2.mt-2 { gap: .3rem; }
  .opioid-auth-shell .flex.gap-2.mt-2 > input { min-height: 3rem; font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
  .opioid-auth-main__inner, .opioid-auth-shell button, .opioid-auth-shell input, .status-banner[data-state="ready"] .status-banner__dot { animation: none !important; transition: none !important; }
  .status-banner[data-state="ready"] .status-banner__dot { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--status-banner-color) 11%, transparent); }
}

/* Remove the old orbit drawn behind the swing character. */
.opioid-swing-art::before,
.opioid-swing-art::after { display: none !important; content: none !important; animation: none !important; }
.opioid-swing-art__image { filter: drop-shadow(0 1.1rem 2.2rem rgb(var(--cl-accent) / .1)) !important; }

/* Supported-games index in the footer */
.site-footer__layout { grid-template-columns: minmax(12rem, 1.35fr) minmax(7rem, .8fr) minmax(8rem, .9fr) minmax(10rem, 1fr) minmax(19rem, 1.75fr); }
.site-footer__games { min-width: 0; }
.site-footer__games .site-footer__col-title { margin: 0 0 .78rem; color: #777d89; font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.site-footer__games-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(10, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .52rem .95rem; }
.site-footer__games-grid a { min-width: 0; color: #8f949e; font-size: .77rem; line-height: 1.45; text-decoration: none; text-underline-offset: .2em; transition: color .18s ease, transform .18s ease; }
.site-footer__games-grid a:hover, .site-footer__games-grid a:focus-visible { color: rgb(var(--cl-accent)); transform: translateX(.12rem); outline: none; }
.site-footer__games-all { display: inline-flex; align-items: center; gap: .38rem; margin-top: .9rem; color: rgb(var(--cl-accent)); font-size: .78rem; font-weight: 800; text-decoration: none; }
.site-footer__games-all span { transition: transform .2s ease; }
.site-footer__games-all:hover span { transform: translateX(.2rem); }
@media (max-width: 1100px) {
  .site-footer__layout { grid-template-columns: minmax(13rem, 1.2fr) repeat(3, minmax(7rem, .8fr)); }
  .site-footer__games { grid-column: 1 / -1; }
  .site-footer__games-grid { grid-template-rows: repeat(5, auto); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .site-footer__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__games-grid { grid-template-rows: repeat(5, auto); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem 1rem; }
}
@media (max-width: 520px) {
  .site-footer__games-grid { grid-template-rows: repeat(10, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .56rem .75rem; }
  .site-footer__games-grid a { font-size: .73rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__games-grid a, .site-footer__games-all span { transition: none; }
}

/* Flow the live store game list into balanced columns, whatever its count. */
.site-footer__games-grid { display: block; columns: 2; column-gap: 1.1rem; }
.site-footer__games-grid a { display: block; break-inside: avoid; padding-block: .22rem; }
@media (max-width: 1100px) {
  .site-footer__games-grid { columns: 2; }
}
@media (max-width: 520px) {
  .site-footer__games-grid { columns: 2; column-gap: .75rem; }
}

/* Account, cart, and status pages use the storefront's black and rose visual language. */
:is(.sa-page-customer-dashboard, .sa-page-customer-affiliate, .sa-page-customer-balance, .sa-page-customer-tickets, .sa-page-customer-ticket, .sa-page-customer-subscriptions, .sa-page-customer-invoices, .sa-page-cart, .status-page) {
  position: relative;
  isolation: isolate;
}
:is(.sa-page-customer-dashboard, .sa-page-customer-affiliate, .sa-page-customer-balance, .sa-page-customer-tickets, .sa-page-customer-ticket, .sa-page-customer-subscriptions, .sa-page-customer-invoices, .sa-page-cart, .status-page)::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(76rem, 100vw);
  height: 27rem;
  background: radial-gradient(ellipse at 16% 0%, rgb(var(--cl-accent) / .075), transparent 55%);
  content: '';
  pointer-events: none;
  transform: translateX(-50%);
}

:is(.sa-page-customer-dashboard, .sa-page-customer-affiliate, .sa-page-customer-balance, .sa-page-customer-tickets, .sa-page-customer-ticket, .sa-page-customer-subscriptions, .sa-page-customer-invoices) .sa-customer-header {
  position: relative;
  overflow: hidden;
  min-height: 7.1rem;
  align-items: center;
  margin-bottom: 1.25rem !important;
  padding: 1.25rem clamp(1.1rem, 2.6vw, 1.8rem);
  border: 1px solid rgb(var(--cl-accent) / .18);
  border-radius: 1rem;
  background: radial-gradient(ellipse at 100% 0%, rgb(var(--cl-accent) / .11), transparent 36%), linear-gradient(115deg, #181920, #121318 72%);
  box-shadow: inset 0 1px rgb(255 255 255 / .045), 0 1rem 2.5rem -2.1rem #000;
}
:is(.sa-page-customer-dashboard, .sa-page-customer-affiliate, .sa-page-customer-balance, .sa-page-customer-tickets, .sa-page-customer-ticket, .sa-page-customer-subscriptions, .sa-page-customer-invoices) .sa-customer-header::before {
  position: absolute;
  inset: 1.15rem auto 1.15rem 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: rgb(var(--cl-accent));
  box-shadow: 0 0 1rem rgb(var(--cl-accent) / .55);
  content: '';
}
.sa-customer-header-copy { position: relative; z-index: 1; }
.sa-customer-header-eyebrow { display: flex; align-items: center; gap: .48rem; margin-bottom: .38rem; color: rgb(var(--cl-accent)); font-size: .58rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.sa-customer-header-eyebrow > span[aria-hidden="true"]:not(.sa-customer-header-signal) { color: #676975; }
.sa-customer-header-signal { width: .38rem; height: .38rem; flex: 0 0 .38rem; border-radius: 50%; background: rgb(var(--cl-accent)); box-shadow: 0 0 .7rem rgb(var(--cl-accent) / .8); }
.sa-customer-header-title { font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 850; letter-spacing: -.055em; line-height: 1.05; }
.sa-customer-header-subtitle { max-width: 42rem; margin-top: .45rem !important; color: #9697a1; font-size: .82rem; line-height: 1.6; }
.sa-customer-header-link { min-height: 2.75rem; border: 1px solid rgb(255 255 255 / .1); border-radius: .65rem !important; background: linear-gradient(105deg, rgb(var(--cl-accent)), color-mix(in srgb, rgb(var(--cl-accent)) 78%, white)) !important; color: #24151d !important; font-weight: 850 !important; box-shadow: 0 .65rem 1.5rem -1rem rgb(var(--cl-accent) / .85) !important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important; }
.sa-customer-header-link:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 .8rem 1.7rem -1rem rgb(var(--cl-accent) / .9) !important; }

:is(.sa-page-customer-dashboard, .sa-page-customer-affiliate, .sa-page-customer-balance, .sa-page-customer-tickets, .sa-page-customer-ticket, .sa-page-customer-subscriptions, .sa-page-customer-invoices) .customer-nav {
  border-color: rgb(var(--cl-accent) / .16);
  background: linear-gradient(160deg, #171820, #121318 75%);
  box-shadow: inset 0 1px rgb(255 255 255 / .035), 0 1rem 2rem -1.7rem #000;
}
:is(.sa-page-customer-dashboard, .sa-page-customer-affiliate, .sa-page-customer-balance, .sa-page-customer-tickets, .sa-page-customer-ticket, .sa-page-customer-subscriptions, .sa-page-customer-invoices) .customer-nav__identity { background: linear-gradient(105deg, rgb(var(--cl-accent) / .07), transparent 80%); }
:is(.sa-page-customer-dashboard, .sa-page-customer-affiliate, .sa-page-customer-balance, .sa-page-customer-tickets, .sa-page-customer-ticket, .sa-page-customer-subscriptions, .sa-page-customer-invoices) .customer-nav__avatar { border-color: rgb(var(--cl-accent) / .25); background: rgb(var(--cl-accent) / .1); color: rgb(var(--cl-accent)); box-shadow: 0 0 1.2rem -0.6rem rgb(var(--cl-accent) / .65); }
:is(.sa-page-customer-dashboard, .sa-page-customer-affiliate, .sa-page-customer-balance, .sa-page-customer-tickets, .sa-page-customer-ticket, .sa-page-customer-subscriptions, .sa-page-customer-invoices) .customer-nav__link.is-active { border-color: rgb(var(--cl-accent) / .18); background: linear-gradient(90deg, rgb(var(--cl-accent) / .13), rgb(var(--cl-accent) / .035)); box-shadow: inset 2px 0 rgb(var(--cl-accent)); }

:is(.sa-page-customer-dashboard, .sa-page-customer-affiliate, .sa-page-customer-balance, .sa-page-customer-tickets, .sa-page-customer-ticket, .sa-page-customer-subscriptions, .sa-page-customer-invoices) .rounded-card.border.bg-surface {
  border-color: rgb(var(--cl-accent) / .13);
  background: linear-gradient(145deg, rgb(255 255 255 / .025), transparent 56%), #171920;
  box-shadow: inset 0 1px rgb(255 255 255 / .035), 0 .8rem 1.8rem -1.5rem #000;
}
.sa-page-customer-dashboard-item { position: relative; overflow: hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.sa-page-customer-dashboard-item::after { position: absolute; inset: auto 1rem 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--cl-accent) / .5), transparent); content: ''; opacity: .45; }
.sa-page-customer-dashboard-item:hover { transform: translateY(-3px); border-color: rgb(var(--cl-accent) / .31); box-shadow: inset 0 1px rgb(255 255 255 / .045), 0 1rem 1.8rem -1.1rem rgb(var(--cl-accent) / .24); }
.sa-page-customer-tickets-item, .sa-page-customer-invoices-item { transition: background-color .2s ease; }
.sa-page-customer-tickets-item:hover, .sa-page-customer-invoices-item:hover { background: linear-gradient(90deg, rgb(var(--cl-accent) / .055), transparent 75%); }
.sa-page-customer-subscriptions-item { transition: background-color .2s ease; }
.sa-page-customer-subscriptions-item:hover { background: rgb(var(--cl-accent) / .045); }
.sa-page-customer-ticket-items { scrollbar-color: rgb(var(--cl-accent) / .35) transparent; }
.sa-page-customer-ticket-items .max-w-\[85\%\] { box-shadow: 0 .5rem 1.1rem -1rem #000; }
.sa-page-customer-balance-price { letter-spacing: -.055em; }
.sa-page-customer-balance-actions button { min-height: 3rem; border-radius: .65rem; background: rgb(255 255 255 / .025); transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease; }
.sa-page-customer-balance-actions button:hover { transform: translateY(-1px); background: rgb(var(--cl-accent) / .07); }
.sa-page-customer-balance-items thead { background: rgb(255 255 255 / .025); }
.sa-page-customer-balance-items th { color: #92939d; font-size: .62rem; letter-spacing: .1em; }
.sa-page-customer-balance-items tbody tr { transition: background-color .18s ease; }
.sa-page-customer-balance-items tbody tr:hover { background: rgb(var(--cl-accent) / .045); }

.sa-page-cart .section-header { max-width: none; margin: 0 0 1.25rem; padding: 1.1rem 0 1rem; border-bottom: 1px solid rgb(var(--cl-accent) / .15); }
.sa-page-cart .section-header .sa-section-eyebrow { color: rgb(var(--cl-accent)); font-size: .65rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.sa-page-cart .section-header .sa-section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 850; letter-spacing: -.06em; }
.sa-page-cart .section-header .sa-section-subtitle { max-width: 38rem; font-size: .85rem; }
.sa-page-cart-item, .sa-page-cart-summary { border-color: rgb(var(--cl-accent) / .14); background: linear-gradient(145deg, rgb(255 255 255 / .026), transparent 60%), #171920; box-shadow: inset 0 1px rgb(255 255 255 / .035), 0 1rem 2rem -1.7rem #000; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.sa-page-cart-item:hover { transform: translateY(-2px); border-color: rgb(var(--cl-accent) / .32); box-shadow: inset 0 1px rgb(255 255 255 / .045), 0 1rem 1.7rem -1.15rem rgb(var(--cl-accent) / .2); }
.sa-page-cart-summary { border-color: rgb(var(--cl-accent) / .25); }
.sa-page-cart-summary h2 { letter-spacing: -.035em; }
.sa-page-cart-empty { position: relative; isolation: isolate; overflow: hidden; width: min(100%, 42rem); margin-inline: auto; padding: clamp(2.8rem, 8vw, 5rem) 1.5rem !important; border: 1px solid rgb(var(--cl-accent) / .16); border-radius: 1.2rem; background: radial-gradient(ellipse at 50% 0%, rgb(var(--cl-accent) / .1), transparent 58%), linear-gradient(145deg, #171820, #111217 80%); box-shadow: inset 0 1px rgb(255 255 255 / .04), 0 1.5rem 3rem -2.5rem #000; }
.sa-page-cart-empty-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; margin: 0 auto 1rem; border: 1px solid rgb(var(--cl-accent) / .28); border-radius: 1rem; background: rgb(var(--cl-accent) / .1); color: rgb(var(--cl-accent)); font-size: 1.2rem; box-shadow: 0 0 2.5rem -1rem rgb(var(--cl-accent) / .7); }
.sa-page-cart-empty-eyebrow { margin: 0 0 .45rem; color: rgb(var(--cl-accent)); font-size: .62rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.sa-page-cart-empty > p.text-t-muted { font-size: .9rem; }
.sa-page-cart-empty > a { min-height: 2.8rem; margin-top: 1.15rem; border-radius: .65rem !important; font-weight: 850 !important; }
.sa-page-cart-loading-dots { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.5rem; }
.sa-page-cart-loading-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: rgb(var(--cl-accent)); animation: opioidCartDot 900ms ease-in-out infinite alternate; }
.sa-page-cart-loading-dots i:nth-child(2) { animation-delay: 150ms; }
.sa-page-cart-loading-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes opioidCartDot { from { opacity: .42; transform: scale(.72); } to { opacity: 1; transform: scale(1.25); } }

.status-page__intro { border-color: rgb(var(--cl-accent) / .22); background: radial-gradient(ellipse at 87% 6%, rgb(var(--cl-accent) / .12), transparent 34%), linear-gradient(112deg, #15161c 0%, #121318 58%, #17131a 100%); }
.status-page__intro::after { border-left-color: rgb(var(--cl-accent) / .12); background: linear-gradient(135deg, transparent 28%, rgb(var(--cl-accent) / .09)), repeating-linear-gradient(135deg, transparent 0 1.1rem, rgb(255 255 255 / .016) 1.15rem 1.2rem); }
.status-page__eyebrow { color: rgb(var(--cl-accent)); font-size: .62rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.status-page .status-filter.is-active { border-color: rgb(var(--cl-accent) / .4); background: linear-gradient(120deg, rgb(var(--cl-accent) / .15), rgb(var(--cl-accent) / .065)); color: #fff; box-shadow: inset 0 0 0 1px rgb(var(--cl-accent) / .08); }
.status-page .status-filter.is-active .status-filter__icon { color: rgb(var(--cl-accent)); }
.status-page .status-group__header { border-bottom-color: rgb(var(--cl-accent) / .11); }
.status-page .status-card { border-color: rgb(var(--cl-accent) / .12); background: linear-gradient(110deg, rgb(var(--cl-accent) / .035), transparent 58%), #171920; }
.status-page .status-card:hover, .status-page .status-card:focus-visible { border-color: rgb(var(--cl-accent) / .36); }

@media (max-width: 767px) {
  :is(.sa-page-customer-dashboard, .sa-page-customer-affiliate, .sa-page-customer-balance, .sa-page-customer-tickets, .sa-page-customer-ticket, .sa-page-customer-subscriptions, .sa-page-customer-invoices) .sa-customer-header { min-height: 0; align-items: stretch; gap: 1rem; padding: 1.15rem 1.1rem 1.2rem 1.3rem; }
  .sa-customer-header-link { width: 100%; }
  .sa-page-cart .section-header { padding-top: .5rem; }
  .sa-page-cart-item .flex.items-start.gap-4 { gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-customer-header-link, .sa-page-customer-dashboard-item, .sa-page-customer-tickets-item, .sa-page-customer-invoices-item, .sa-page-customer-subscriptions-item, .sa-page-customer-balance-actions button, .sa-page-cart-item, .sa-page-cart-loading-dots i { animation: none !important; transition: none !important; }
  .sa-page-customer-dashboard-item:hover, .sa-page-cart-item:hover, .sa-customer-header-link:hover { transform: none; }
}

/* Shared storefront catalog polish: home preview and full products page. */
.page--shop .shop-section--products > div { padding-block: 0 !important; }
.page--shop .shop-section--products .products-section-heading { display: block; margin: 0 0 1.1rem; }
.products-section-heading__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.products-section-heading__copy { display: grid; justify-items: start; gap: .38rem; }
.products-section-heading__eyebrow,
.catalog-page__eyebrow { display: flex; align-items: center; gap: .45rem; margin: 0; color: rgb(var(--cl-accent)); font-size: .64rem; font-weight: 800; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; }
.products-section-heading__eyebrow i,
.catalog-page__eyebrow i { font-size: .65rem; }
.page--shop .products-section-heading h2 { margin: 0; color: #f5f7fb; font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.12; text-align: left; text-transform: none; }
.products-section-heading__description,
.catalog-page__description { margin: .12rem 0 0; color: #969ba7; font-size: .86rem; line-height: 1.55; }
.products-section-heading__count { display: inline-flex; align-items: center; gap: .42rem; margin-top: .28rem; color: #8c929e; font-size: .68rem; font-weight: 700; }
.products-section-heading__count i { color: rgb(var(--cl-accent)); font-size: .7rem; }
.products-section-heading__link { display: inline-flex; min-height: 2.55rem; flex: 0 0 auto; align-items: center; justify-content: center; gap: .55rem; padding: .55rem .85rem; border: 1px solid rgb(var(--cl-accent) / .32); border-radius: .55rem; background: rgb(var(--cl-accent) / .08); color: rgb(var(--cl-accent)); font-size: .75rem; font-weight: 800; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.products-section-heading__link:hover { transform: translateY(-1px); border-color: rgb(var(--cl-accent) / .62); background: rgb(var(--cl-accent) / .14); }
.products-section-search { width: 100%; margin-top: 1rem; }
.products-section-search .search-field { width: 100%; max-width: none; min-height: 3.05rem; border: 1px solid #ffffff14; border-radius: .7rem; background: linear-gradient(180deg,#ffffff05,transparent),#14161c; }
.products-section-search .search-field:focus-within { border-color: rgb(var(--cl-accent) / .48); box-shadow: 0 0 0 3px rgb(var(--cl-accent) / .08); }
.page--shop .shop-section--products .shop-nav { margin-block: .9rem; }
.shop-section--products .shop-nav__button { min-height: 2.35rem; }
.shop-section--products .shop-nav__button > i { color: rgb(var(--cl-accent)); font-size: .72rem; }
.shop-section--products .shop-nav__button.is-active > i { color: currentColor; }
.shop-section--products .shop-nav__button small,
.catalog-nav__pill small { display: inline-grid; min-width: 1.25rem; min-height: 1.25rem; place-items: center; padding: .08rem .34rem; border: 1px solid #ffffff10; border-radius: 999px; background: #ffffff09; color: #b0b4be; font-size: .62rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.shop-section--products .shop-nav__button.is-active small { border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .16); color: #fff; }
.page--products .catalog-page { margin-block: 1.4rem; padding: clamp(1rem, 2vw, 1.55rem); border: 1px solid var(--opioid-line); border-radius: 1rem; background: linear-gradient(180deg,#ffffff05,transparent 28%),#111318; }
.page--products .catalog-page__inner { width: 100%; padding-block: .3rem; }
.page--products .catalog-page__heading { display: grid; justify-items: start; gap: .42rem; margin: 0 0 1.35rem; }
.page--products .catalog-page__heading h1 { margin: 0; color: #f5f7fb; font-size: clamp(1.65rem, 3vw, 2.2rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.1; }
.page--products .catalog-page__description { margin-top: .05rem; }
.page--products .catalog-nav { margin-bottom: .9rem; padding: .36rem; border: 1px solid #ffffff10; border-radius: .72rem; background: #15171d; }
.page--products .catalog-nav__pill { min-height: 2.35rem; padding-inline: .8rem; border-color: transparent; border-radius: .52rem; background: transparent; font-size: .76rem; }
.page--products .catalog-nav__pill.is-active { border-color: rgb(var(--cl-accent) / .38); background: rgb(var(--cl-accent) / .15); box-shadow: inset 0 0 0 1px rgb(var(--cl-accent) / .1); }
.page--products .catalog-nav__pill small { margin-left: .12rem; }
.page--products .catalog-nav__pill.is-active small { border-color: rgb(var(--cl-accent) / .3); background: rgb(var(--cl-accent) / .17); color: rgb(var(--cl-accent)); }
.page--products .catalog-page__grid,
.page--shop .shop-section--products .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.page--products .catalog-page__grid .product-card,
.page--shop .shop-section--products .product-card { min-width: 0; height: 100%; border-color: #ffffff14 !important; border-radius: .78rem !important; background: linear-gradient(180deg,#ffffff04,transparent 30%),#171a22 !important; box-shadow: 0 8px 28px #0003; }
.page--products .catalog-page__grid .product-card:hover,
.page--shop .shop-section--products .product-card:hover { border-color: rgb(var(--cl-accent) / .46) !important; box-shadow: 0 16px 34px rgb(var(--cl-accent) / .1), 0 8px 28px #0004; }
.page--products .catalog-page__grid .product-card > div:first-child,
.page--shop .shop-section--products .product-card > div:first-child { border-bottom: 1px solid #ffffff0d; }
.page--products .catalog-page__grid .product-card h3,
.page--shop .shop-section--products .product-card h3 { color: #f5f7fb !important; }
@media (max-width: 1100px) {
  .page--products .catalog-page__grid,
  .page--shop .shop-section--products .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page--products .catalog-page__grid,
  .page--shop .shop-section--products .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .page--shop .shop-section--products { padding: 1.1rem !important; }
  .products-section-heading__top { align-items: flex-start; flex-direction: column; gap: .9rem; }
}
@media (max-width: 480px) {
  .page--products .catalog-page__grid,
  .page--shop .shop-section--products .grid { grid-template-columns: 1fr; }
  .page--products .catalog-page { width: calc(100% - 1rem); padding: .85rem; }
  .page--shop .shop-section--products { width: calc(100% - 1rem); padding: .85rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .products-section-heading__link { transition: none; }
  .products-section-heading__link:hover { transform: none; }
}

/* Keep review expansion and product navigation together at the card edge. */
.feedback-card__surface { justify-content: flex-start; }
.feedback-card__body { flex: 1 1 auto; }
.feedback-card__actions { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding: .45rem .9rem; border-top: 1px solid color-mix(in srgb, var(--feedback-card-border, var(--theme-line)) 78%, transparent); background: linear-gradient(180deg, rgb(var(--cl-t-primary) / .025), transparent); }
.feedback-card__expand,
.feedback-card__product-link { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; gap: .4rem; margin: 0; padding: .4rem .55rem; border: 1px solid transparent; border-radius: .45rem; color: rgb(var(--cl-accent)); font-size: .7rem; font-weight: var(--font-weight-button); line-height: 1; text-decoration: none; white-space: nowrap; transition: color var(--theme-motion-duration) ease, border-color var(--theme-motion-duration) ease, background-color var(--theme-motion-duration) ease; }
.feedback-card__expand { background: color-mix(in srgb, rgb(var(--cl-accent)) 9%, transparent); cursor: pointer; }
.feedback-card__expand:hover,
.feedback-card__expand:focus-visible { border-color: color-mix(in srgb, rgb(var(--cl-accent)) 25%, transparent); background: color-mix(in srgb, rgb(var(--cl-accent)) 15%, transparent); outline: none; }
.feedback-card__product-link { margin-left: auto; }
.feedback-card__product-link:hover,
.feedback-card__product-link:focus-visible { border-color: var(--theme-line); background: color-mix(in srgb, rgb(var(--cl-t-primary)) 5%, transparent); outline: none; }
.feedback-card__expand i { transition: transform var(--theme-motion-duration) ease; }
.feedback-card__product-link i { transition: transform var(--theme-motion-duration) ease; }
.feedback-card__expand:hover i { transform: translateY(.08rem); }
.feedback-card__product-link:hover i { transform: translate(.08rem, -.08rem); }
@media (max-width: 599px) {
  .feedback-card__actions { min-height: 2.85rem; padding-inline: .65rem; }
  .feedback-card__expand, .feedback-card__product-link { font-size: .67rem; }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-card__expand, .feedback-card__product-link,
  .feedback-card__expand i, .feedback-card__product-link i { transition: none; }
}
/* Keep keyboard focus inside the rounded review card instead of drawing a second offset corner. */
.feedback-card:focus-visible .feedback-card__surface {
  border-color: color-mix(in srgb, rgb(var(--cl-accent)) 72%, var(--theme-line));
  outline: none;
  outline-offset: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, rgb(var(--cl-accent)) 34%, transparent);
}
.feedback-card__surface { overflow: hidden; border-radius: var(--theme-radius, 1rem); }
.feedback-card__actions { overflow: hidden; }
/* Compact storefront metrics, following the site's live pink-accent data. */
.page--shop .hero-section .hero-stats--compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 35rem);
  max-width: none;
  gap: 0;
  margin-top: 1.5rem;
  padding-block: .72rem;
  border-top: 1px solid rgb(255 255 255 / .1);
  border-bottom: 1px solid rgb(255 255 255 / .1);
}
.page--shop .hero-section .hero-stats--compact .hero-stat {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .62rem;
  padding: .2rem .72rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.page--shop .hero-section .hero-stats--compact .hero-stat:first-child { padding-left: 0; }
.page--shop .hero-section .hero-stats--compact .hero-stat + .hero-stat { border-left: 1px solid rgb(255 255 255 / .1); }
.page--shop .hero-section .hero-stats--compact .hero-stat:hover { transform: none; background: transparent; }
.page--shop .hero-section .hero-stat__icon {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  place-items: center;
  border: 1px solid rgb(var(--cl-accent) / .3);
  border-radius: .72rem;
  background: rgb(var(--cl-accent) / .07);
  color: rgb(var(--cl-accent));
  font-size: .82rem;
}
.page--shop .hero-section .hero-stat__copy { display: grid; min-width: 0; gap: .12rem; }
.page--shop .hero-section .hero-stats--compact .hero-stat__label { order: 0; color: #898b95; font-size: .58rem; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.page--shop .hero-section .hero-stats--compact .hero-stat__value { order: 1; overflow: hidden; color: #f5f7fb; font-size: .98rem; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
  .page--shop .hero-section .hero-stats--compact .hero-stat { gap: .4rem; padding-inline: .45rem; }
  .page--shop .hero-section .hero-stats--compact .hero-stat:first-child { padding-left: 0; }
  .page--shop .hero-section .hero-stat__icon { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; border-radius: .58rem; font-size: .7rem; }
  .page--shop .hero-section .hero-stats--compact .hero-stat__label { font-size: .5rem; letter-spacing: .08em; }
  .page--shop .hero-section .hero-stats--compact .hero-stat__value { font-size: .82rem; }
}

/* The home FAQ borrows the centered, clean accordion rhythm of the reference. */
.page--shop .premium-faq .module-heading { max-width: 52rem; margin-inline: auto; margin-bottom: 1.6rem; }
.page--shop .premium-faq .module-heading__title { font-size: clamp(2rem, 4.8vw, 3.25rem); font-weight: 850; letter-spacing: -.055em; line-height: 1.06; }
.page--shop .premium-faq .faq-list { width: min(100%, 58rem); margin-inline: auto; gap: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / .08); border-radius: 1.1rem; background: #101116; }
.page--shop .premium-faq .faq-item { border: 0; border-bottom: 1px solid rgb(255 255 255 / .075); border-radius: 0; background: transparent; box-shadow: none; }
.page--shop .premium-faq .faq-item:last-child { border-bottom: 0; }
.page--shop .premium-faq .faq-item:hover { transform: none; background: rgb(255 255 255 / .018); }
.page--shop .premium-faq .faq-item__summary { min-height: 4.15rem; }
.page--shop .premium-faq .faq-item__number { color: var(--theme-subtle); font-variant-numeric: tabular-nums; }
.page--shop .premium-faq .faq-item[open] .faq-item__number { color: rgb(var(--cl-accent)); }

/* Real-time product availability totals are calculated from the status cards. */
.status-summary { overflow: hidden; border: 1px solid rgb(255 255 255 / .09); border-radius: .92rem; background: linear-gradient(115deg, #191a21, #15161c 68%); box-shadow: inset 0 1px rgb(255 255 255 / .03); }
.status-summary__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.status-summary__metric { display: grid; align-content: start; gap: .38rem; min-width: 0; padding: 1rem 1.15rem; }
.status-summary__metric + .status-summary__metric { border-left: 1px solid rgb(255 255 255 / .07); }
.status-summary__label { display: flex; align-items: center; gap: .48rem; color: #858792; font-size: .58rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.status-summary__label .status-filter__dot { width: .42rem; height: .42rem; box-shadow: none; }
.status-summary__label > i { color: rgb(var(--cl-accent)); }
.status-summary__metric strong { color: #f6f5f8; font-size: 1.45rem; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; }
.status-summary__footer { display: flex; align-items: center; gap: 1rem; padding: .72rem 1.15rem; border-top: 1px solid rgb(255 255 255 / .07); }
.status-summary__operational { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; color: #27c7a0; font-size: .72rem; }
.status-summary__track { height: .3rem; flex: 1 1 auto; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .09); }
.status-summary__track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #27c7a0; transition: width .35s ease; }
@media (max-width: 600px) {
  .status-summary__metric { padding: .85rem .7rem; }
  .status-summary__label { gap: .32rem; font-size: .5rem; letter-spacing: .08em; }
  .status-summary__metric strong { font-size: 1.2rem; }
  .status-summary__footer { padding-inline: .8rem; }
}

/* Product insights and process timeline, using live product data and pink accents. */
.product-detail__insights { margin-top: .8rem; padding: .9rem; border: 1px solid var(--product-border); border-radius: .85rem; background: linear-gradient(135deg, rgb(var(--cl-accent) / .045), transparent 68%), var(--product-surface); }
.product-detail__insights-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .68rem; color: rgb(var(--cl-t-primary)); font-size: .67rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.product-detail__insights-heading > span { display: inline-flex; align-items: center; gap: .45rem; }
.product-detail__insights-heading > span i { color: var(--product-accent); }
.product-detail__insights-heading > small { display: inline-flex; align-items: center; gap: .35rem; color: var(--theme-muted); font-size: .58rem; letter-spacing: .1em; }
.product-detail__insights-heading > small i { width: .38rem; height: .38rem; border-radius: 50%; background: #27c7a0; box-shadow: 0 0 .5rem rgb(39 199 160 / .35); }
.product-detail__insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.product-detail__insight { display: flex; min-width: 0; align-items: center; gap: .62rem; padding: .62rem; border: 1px solid rgb(255 255 255 / .1); border-radius: .65rem; background: rgb(255 255 255 / .025); }
.product-detail__insight-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border: 1px solid rgb(var(--cl-accent) / .22); border-radius: .58rem; background: rgb(var(--cl-accent) / .075); color: var(--product-accent); font-size: .76rem; }
.product-detail__insight-copy { display: grid; min-width: 0; gap: .1rem; }
.product-detail__insight-copy strong { color: rgb(var(--cl-t-primary)); font-size: 1.05rem; font-weight: 850; line-height: 1; }
.product-detail__insight-copy > span { color: #c0bec7; font-size: .65rem; line-height: 1.3; }
.product-detail__insight-copy small { color: var(--theme-subtle); font-size: .57rem; line-height: 1.3; }
.product-detail__timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; margin-top: clamp(1.5rem, 4vw, 3rem); border: 0; border-radius: 0; background: transparent; overflow: visible; }
.product-detail__timeline-heading { display: grid; gap: .35rem; text-align: center; }
.product-detail__timeline-heading > span { color: var(--product-accent); font-size: .62rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.product-detail__timeline-heading h2 { margin: 0; color: rgb(var(--cl-t-primary)); font-size: clamp(1.65rem, 3.5vw, 2.35rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.12; }
.product-detail__timeline-heading p { margin: 0; color: var(--theme-muted); font-size: .82rem; line-height: 1.55; }
.product-detail__timeline-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--product-border); border-radius: calc(var(--theme-radius) * 1.15); background: var(--product-surface); }
.product-detail__timeline-step { border-inline-start: 1px solid var(--product-border); }
.product-detail__timeline-step:first-child { border-inline-start: 0; }
.product-detail__timeline-step h3 { margin: .28rem 0 0; color: rgb(var(--cl-t-primary)); font-size: .78rem; font-weight: var(--font-weight-button); }
@media (max-width: 720px) {
  .product-detail__timeline-steps { 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; }
}
@media (prefers-reduced-motion: reduce) { .status-summary__track > span { transition: none; } }
.account-empty-state { display: grid; justify-items: center; gap: .55rem; min-height: 13rem; align-content: center; padding: 2rem 1rem; border: 1px dashed rgb(var(--cl-accent) / .2); border-radius: .9rem; background: radial-gradient(ellipse at 50% 0%, rgb(var(--cl-accent) / .07), transparent 60%), rgb(0 0 0 / .08); text-align: center; }
.account-empty-state--compact { min-height: 11rem; }
.account-empty-state__icon { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid rgb(var(--cl-accent) / .2); border-radius: 50%; background: rgb(var(--cl-accent) / .07); color: rgb(var(--cl-accent)); font-size: 1rem; }
.account-empty-state strong { color: rgb(var(--cl-t-primary)); font-size: .95rem; font-weight: 800; }
.account-empty-state p { max-width: 28rem; margin: 0; color: var(--theme-muted); font-size: .76rem; line-height: 1.5; }
.account-empty-state a { display: inline-flex; align-items: center; gap: .45rem; margin-top: .25rem; padding: .62rem .9rem; border: 1px solid rgb(var(--cl-accent) / .28); border-radius: .6rem; background: rgb(var(--cl-accent) / .09); color: rgb(var(--cl-accent)); font-size: .72rem; font-weight: 800; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.account-empty-state a:hover { transform: translateY(-1px); background: rgb(var(--cl-accent) / .15); }
@media (prefers-reduced-motion: reduce) { .account-empty-state a { transition: none; } .account-empty-state a:hover { transform: none; } }
/* Let a small review set use the available row width without leaving empty tracks. */
.review-showcase__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: stretch;
}
.review-showcase__grid > .feedback-card { width: 100%; min-width: 0; }
.feedback-card__surface { min-height: 100%; }
.feedback-card__actions { flex-wrap: wrap; }
.review-showcase__sort-button { text-decoration: none; }
.review-showcase__sort-button.is-active { pointer-events: none; }
/* Black and pink account, cart, and order journey details. */
.customer-portal .sa-customer-header {
  position: relative;
  overflow: hidden;
  min-height: 7.1rem;
  align-items: center;
  margin-bottom: 1.25rem !important;
  padding: 1.25rem clamp(1.1rem, 2.6vw, 1.8rem);
  border: 1px solid rgb(var(--cl-accent) / .18);
  border-radius: 1rem;
  background: radial-gradient(ellipse at 100% 0%, rgb(var(--cl-accent) / .11), transparent 36%), linear-gradient(115deg, #181920, #121318 72%);
  box-shadow: inset 0 1px rgb(255 255 255 / .045), 0 1rem 2.5rem -2.1rem #000;
}
.customer-portal .sa-customer-header::before { position: absolute; inset: 1.15rem auto 1.15rem 0; width: 2px; border-radius: 0 2px 2px 0; background: rgb(var(--cl-accent)); box-shadow: 0 0 1rem rgb(var(--cl-accent) / .55); content: ''; }

.customer-dashboard__overview { display: grid; grid-template-columns: minmax(0, 1.08fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(7.6rem, auto)); grid-template-areas: "spent completed since" "spent latest latest"; gap: 1rem; }
.customer-dashboard__overview--has-balance { grid-template-areas: "spent completed since" "spent latest balance"; }
.customer-dashboard__metric { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 1.15rem; overflow: hidden; border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: radial-gradient(ellipse at 100% 0%, rgb(var(--cl-accent) / .08), transparent 55%), linear-gradient(145deg, #171820, #111217 78%); box-shadow: inset 0 1px rgb(255 255 255 / .035), 0 1rem 2rem -1.75rem #000; }
.customer-dashboard__metric--spent { grid-area: spent; justify-content: space-between; min-height: 16.2rem; padding: 1.35rem; }
.customer-dashboard__metric:not(.customer-dashboard__metric--spent):not(.customer-dashboard__metric--latest):not(.customer-dashboard__metric--balance):nth-child(2) { grid-area: completed; }
.customer-dashboard__metric:not(.customer-dashboard__metric--spent):not(.customer-dashboard__metric--latest):not(.customer-dashboard__metric--balance):nth-child(3) { grid-area: since; }
.customer-dashboard__metric--latest { grid-area: latest; }
.customer-dashboard__metric--balance { grid-area: balance; }
.customer-dashboard__metric-icon, .customer-dashboard__section-icon { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 2.4rem; place-items: center; border: 1px solid rgb(var(--cl-accent) / .24); border-radius: .72rem; background: rgb(var(--cl-accent) / .1); color: rgb(var(--cl-accent)); font-size: .86rem; }
.customer-dashboard__metric--spent .customer-dashboard__metric-icon { width: 2.8rem; height: 2.8rem; flex-basis: 2.8rem; border: 0; border-radius: .85rem; background: linear-gradient(135deg, rgb(var(--cl-accent)), color-mix(in srgb, rgb(var(--cl-accent)) 74%, #fff)); color: #24151d; box-shadow: 0 .6rem 1.7rem -1rem rgb(var(--cl-accent) / .9); }
.customer-dashboard__metric-label { margin-top: .85rem; color: #999aa5; font-size: .62rem; font-weight: 850; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; }
.customer-dashboard__metric-value { display: block; width: 100%; margin-top: .42rem; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.customer-dashboard__metric--spent .customer-dashboard__metric-value { margin-top: auto; color: rgb(var(--cl-accent)); font-size: clamp(2rem, 4vw, 3.15rem); letter-spacing: -.055em; }
.customer-dashboard__metric-value--date { font-size: clamp(1.02rem, 1.55vw, 1.38rem); }
.customer-dashboard__metric-value--latest { overflow: hidden; font-family: var(--font-body); font-size: .94rem; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.customer-dashboard__metric-link { display: inline-flex; align-items: center; gap: .38rem; margin-top: .55rem; color: rgb(var(--cl-accent)); font-size: .68rem; font-weight: 750; text-decoration: none; }
.customer-dashboard__metric-link i { font-size: .58rem; transition: transform .18s ease; }
.customer-dashboard__metric-link:hover i { transform: translateX(.16rem); }
.customer-dashboard__section-heading { display: flex; align-items: center; gap: .55rem; margin: 1.65rem 0 .8rem; padding-bottom: .65rem; border-bottom: 1px solid var(--theme-line); color: #a5a5af; font-size: .67rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.customer-dashboard__section-icon { width: 1.55rem; height: 1.55rem; flex-basis: 1.55rem; border: 0; border-radius: 50%; background: transparent; font-size: .8rem; }
.customer-dashboard__section-heading + .grid { margin-top: 0 !important; }

.steps-section__order-preview { position: relative; overflow: hidden; margin-bottom: 1.4rem; padding: 1rem 1.15rem .85rem; border: 1px solid rgb(var(--cl-accent) / .15); border-radius: calc(var(--theme-radius) * .72); background: radial-gradient(ellipse at 90% 0%, rgb(var(--cl-accent) / .09), transparent 38%), linear-gradient(115deg, rgb(8 9 12 / .72), rgb(20 22 29 / .76)); box-shadow: inset 0 1px rgb(255 255 255 / .03); }
.steps-section__order-preview-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; color: #a7a7b1; font-size: .62rem; font-weight: 800; letter-spacing: .11em; }
.steps-section__order-preview-top strong { margin-left: .32rem; color: rgb(var(--cl-accent)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; letter-spacing: .04em; }
.steps-section__live { display: inline-flex; align-items: center; gap: .4rem; color: #b6b7c1; font-size: .58rem; letter-spacing: .1em; }
.steps-section__live i { width: .42rem; height: .42rem; border-radius: 50%; background: #35d0a0; box-shadow: 0 0 .65rem rgb(53 208 160 / .65); animation: status-pulse 1.6s ease-in-out infinite; }
.steps-section__license { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; margin-top: .8rem; padding: .75rem .85rem; border: 1px solid rgb(255 255 255 / .06); border-radius: .65rem; background: rgb(255 255 255 / .025); }
.steps-section__license-label { color: #888994; font-size: .6rem; font-weight: 850; letter-spacing: .1em; }
.steps-section__license-value { color: #f2f2f5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(.7rem, 1.6vw, .9rem); letter-spacing: .1em; white-space: nowrap; }
.steps-section__license-state { display: inline-flex; align-items: center; gap: .42rem; color: rgb(var(--cl-accent)); font-size: .66rem; font-weight: 750; text-align: right; }
.steps-section__license-state > i { font-size: .65rem; }
.steps-section__order-progress { height: 3px; margin-top: .75rem; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .08); }
.steps-section__order-progress > span { display: block; width: 100%; height: 100%; transform: scaleX(var(--order-progress, 0)); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--cl-accent)), color-mix(in srgb, rgb(var(--cl-accent)) 55%, white)); box-shadow: 0 0 .8rem rgb(var(--cl-accent) / .48); transition: transform .75s cubic-bezier(.22,.8,.3,1); }

.opioid-cart-page__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.4rem; margin-bottom: 1.5rem; padding: 0 0 1.25rem; border-bottom: 1px solid rgb(var(--cl-accent) / .16); }
.opioid-cart-page__eyebrow { display: inline-flex; align-items: center; gap: .42rem; color: rgb(var(--cl-accent)); font-size: .61rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.opioid-cart-page__header h1 { margin: .42rem 0 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.06em; line-height: 1; }
.opioid-cart-page__header p { margin: .55rem 0 0; color: var(--theme-muted); font-size: .84rem; }
.opioid-cart-page__promises { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.opioid-cart-page__promises span { display: inline-flex; align-items: center; gap: .42rem; min-height: 2.2rem; padding: .4rem .7rem; border: 1px solid var(--theme-line); border-radius: 999px; background: rgb(255 255 255 / .025); color: #b8b8c1; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.opioid-cart-page__promises i { color: rgb(var(--cl-accent)); font-size: .67rem; }
.opioid-cart-page .cart-page__items .text-center { min-height: 14rem; display: grid; place-content: center; border: 1px solid rgb(var(--cl-accent) / .14); border-radius: var(--theme-radius); background: radial-gradient(ellipse at 50% 0%, rgb(var(--cl-accent) / .08), transparent 58%), linear-gradient(145deg, #171820, #111217 80%); }
.opioid-cart-page .cart-page__items .text-center svg { margin: 0 auto .8rem; }
.opioid-cart-help { margin-top: clamp(2rem, 4vw, 3.25rem); padding: clamp(1.1rem, 2.4vw, 1.7rem); border: 1px solid var(--theme-line); border-radius: var(--theme-radius); background: linear-gradient(145deg, rgb(255 255 255 / .025), transparent 55%), #14151a; }
.opioid-cart-help__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.opioid-cart-help__heading h2 { margin: .38rem 0 0; color: rgb(var(--cl-t-primary)); font-family: var(--font-heading); font-size: clamp(1.1rem, 2.1vw, 1.45rem); font-weight: 850; letter-spacing: -.04em; }
.opioid-cart-help__heading > a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; color: rgb(var(--cl-accent)); font-size: .7rem; font-weight: 800; text-decoration: none; }
.opioid-cart-help__questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.opioid-cart-help__questions details { align-self: start; overflow: hidden; border: 1px solid var(--theme-line); border-radius: .68rem; background: rgb(255 255 255 / .022); }
.opioid-cart-help__questions summary { display: flex; min-height: 3.15rem; align-items: center; justify-content: space-between; gap: .7rem; padding: .75rem .85rem; color: #e9e9ee; font-size: .72rem; font-weight: 750; cursor: pointer; list-style: none; }
.opioid-cart-help__questions summary::-webkit-details-marker { display: none; }
.opioid-cart-help__questions summary i { color: rgb(var(--cl-accent)); font-size: .65rem; transition: transform .18s ease; }
.opioid-cart-help__questions details[open] summary i { transform: rotate(45deg); }
.opioid-cart-help__questions details p { margin: 0; padding: 0 .85rem .85rem; color: var(--theme-muted); font-size: .69rem; line-height: 1.55; }

@media (max-width: 800px) {
  .customer-dashboard__overview, .customer-dashboard__overview--has-balance { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-template-areas: "spent spent" "completed since" "latest latest" "balance balance"; }
  .customer-dashboard__overview:not(.customer-dashboard__overview--has-balance) { grid-template-areas: "spent spent" "completed since" "latest latest"; }
  .customer-dashboard__metric--spent { min-height: 12rem; }
  .steps-section__license { grid-template-columns: auto 1fr; }
  .steps-section__license-state { grid-column: 1 / -1; text-align: left; }
  .opioid-cart-page__header { align-items: flex-start; flex-direction: column; }
  .opioid-cart-page__promises { justify-content: flex-start; }
  .opioid-cart-help__questions { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .customer-dashboard__overview, .customer-dashboard__overview--has-balance, .customer-dashboard__overview:not(.customer-dashboard__overview--has-balance) { grid-template-columns: 1fr; grid-template-areas: none; }
  .customer-dashboard__metric { grid-area: auto !important; }
  .customer-dashboard__metric--spent { min-height: 10.5rem; }
  .steps-section__order-preview { padding: .85rem .75rem .7rem; }
  .steps-section__license { gap: .45rem; padding: .65rem; }
  .steps-section__license-value { font-size: .66rem; letter-spacing: .04em; }
  .steps-section__license-state { font-size: .61rem; }
  .opioid-cart-help__heading { align-items: flex-start; flex-direction: column; }
}/* The order journey uses round checkpoints like the reference, with reduced-motion support. */
.steps-section__timeline .steps-section__icon { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .steps-section__live i { animation: none; }
  .steps-section__order-progress > span,
  .customer-dashboard__metric-link i,
  .opioid-cart-help__questions summary i { transition: none; }
}.sa-customer-header-subtitle { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: .48rem; padding: .34rem .62rem; border: 1px solid rgb(var(--cl-accent) / .14); border-radius: 999px; background: rgb(var(--cl-t-primary) / .045); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; overflow-wrap: anywhere; }
.sa-customer-header-subtitle > i { flex: 0 0 auto; color: #81828d; font-size: .66rem; }/* Keep the review page's two-card rail at the same compact width as the reference. */
.review-showcase--page .review-showcase__grid { width: min(100%, 41rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 19rem)); justify-content: start; align-items: stretch; gap: 1rem; }
.review-showcase--page .feedback-card { min-width: 0; }
@media (max-width: 640px) {
  .review-showcase--page .review-showcase__grid { grid-template-columns: minmax(0, 1fr); }
}.product-detail__insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 460px) { .product-detail__insights-grid { grid-template-columns: 1fr; } }
/* Keep the homepage review rail compact and give every review card a clean outline. */
.page--shop .review-showcase__grid {
  width: min(100%, 41rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 19rem));
  justify-content: start;
  align-items: stretch;
  gap: 1rem;
}
.feedback-card__surface { border-radius: 1rem; }
@media (max-width: 640px) {
  .page--shop .review-showcase__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Feedback catalog: four aligned cards on desktop, with responsive columns. */
.review-showcase--page .review-showcase__grid {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  align-items: stretch;
  gap: 1rem;
}
@media (max-width: 1100px) {
  .review-showcase--page .review-showcase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .review-showcase--page .review-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .review-showcase--page .review-showcase__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Reduce homepage review card size while keeping the existing motion. */
.page--shop .review-showcase__grid {
  width: min(100%, 37rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 16rem));
  justify-content: start;
  gap: 0.85rem;
}
.page--shop .review-showcase__marquee .feedback-card { flex-basis: clamp(13.5rem, 20vw, 17rem); }
.page--shop .feedback-card__surface { min-height: 11rem; }
.page--shop .feedback-card__body { padding: 1rem; }
.page--shop .feedback-card__meta { margin-bottom: 0.7rem; }
.page--shop .feedback-card__product { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.55rem; margin-bottom: 0.75rem; padding: 0.55rem; }
.page--shop .feedback-card__product-media { width: 2.4rem; height: 2.4rem; }
.page--shop .feedback-card__reply { margin-top: 0.75rem; padding: 0.7rem; }
.page--shop .feedback-card__footer { padding-block: 0.6rem; }
@media (max-width: 640px) {
  .page--shop .review-showcase__marquee .feedback-card { flex-basis: min(70vw, 15rem); }
}
/* Cart line items: keep product information, quantity, price, and remove action aligned. */
.opioid-cart-page .opioid-cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
  padding: 1rem !important;
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  background: linear-gradient(145deg, rgb(255 255 255 / .026), transparent 60%), #171920;
}
.opioid-cart-page .opioid-cart-item__product { display: flex; min-width: 0; align-items: center; gap: 1rem; overflow: visible; white-space: normal; }
.opioid-cart-page .opioid-cart-item__image { display: flex; width: 6rem; max-width: 6rem; flex: 0 0 6rem; align-items: center; justify-content: center; padding: 0; }
.opioid-cart-page .opioid-cart-item__image img { display: block; width: 100%; height: 4.25rem; border-radius: .55rem; object-fit: cover; }
.opioid-cart-page .opioid-cart-item__details { min-width: 0; flex: 1 1 auto; overflow: hidden; padding: 0; text-align: left; white-space: normal; }
.opioid-cart-page .opioid-cart-item__details > div:first-child { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .6rem; }
.opioid-cart-page .opioid-cart-item__title { display: block; min-width: 0; overflow: hidden; font-size: .96rem; font-weight: 750; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.opioid-cart-page .opioid-cart-item__details > p { margin: .2rem 0 0; color: var(--theme-muted); font-size: .78rem; }
.opioid-cart-page .opioid-cart-item__controls {
  display: grid !important;
  grid-template-columns: 8rem minmax(5rem, auto) 2rem;
  align-items: center;
  justify-content: end;
  gap: .75rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.opioid-cart-page .opioid-cart-item__stepper {
  display: grid !important;
  width: 8rem;
  max-width: none;
  height: 2.45rem;
  grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
  align-items: stretch;
  border: 1px solid var(--theme-line);
  border-radius: .6rem;
  background: rgb(255 255 255 / .025);
}
.opioid-cart-page .opioid-cart-item__stepper button { width: 2.4rem; height: 100%; border: 0; background: transparent; color: var(--theme-muted); }
.opioid-cart-page .opioid-cart-item__stepper button:hover:not(:disabled) { background: rgb(var(--cl-accent) / .12); color: rgb(var(--cl-accent)); }
.opioid-cart-page .opioid-cart-item__quantity { width: 100%; min-width: 0; height: 100%; padding: 0 .2rem; border: 0; border-inline: 1px solid var(--theme-line); border-radius: 0; background: transparent; color: rgb(var(--cl-t-primary)); font-variant-numeric: tabular-nums; }
.opioid-cart-page .opioid-cart-item__quantity::-webkit-inner-spin-button,
.opioid-cart-page .opioid-cart-item__quantity::-webkit-outer-spin-button { margin: 0; appearance: none; }
.opioid-cart-page .opioid-cart-item__price { min-width: 5rem; margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opioid-cart-page .opioid-cart-item__remove { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .45rem; color: var(--theme-muted); }
.opioid-cart-page .opioid-cart-item__remove:hover { background: rgb(var(--cl-accent) / .1); color: rgb(var(--cl-accent)); }

@media (max-width: 640px) {
  .opioid-cart-page .opioid-cart-item { grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: .8rem !important; }
  .opioid-cart-page .opioid-cart-item__image { width: 4.5rem; max-width: 4.5rem; flex-basis: 4.5rem; }
  .opioid-cart-page .opioid-cart-item__image img { height: 3.5rem; }
  .opioid-cart-page .opioid-cart-item__controls { grid-template-columns: 8rem minmax(0, 1fr); width: 100%; padding-top: .75rem; border-top: 1px solid var(--theme-line); }
  .opioid-cart-page .opioid-cart-item__price { text-align: right; }
}
/* Keep the FAQ page's eyebrow, title, and description in one clear left-aligned stack. */
.page--faq .faq-page-heading {
  display: flex;
  width: 100%;
  max-width: 70rem;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  margin: 0 0 2rem;
  text-align: left;
}
.page--faq .faq-page-heading .module-heading__eyebrow { display: block; margin: 0; }
.page--faq .faq-page-heading .page-intro__title { display: block; width: 100%; margin: 0; line-height: 1.05; }
.page--faq .faq-page-heading .module-heading__description { max-width: 48rem; margin: .1rem 0 0; padding: 0; }
/* Match the dedicated FAQ page to the centered, open Q&A reference. */
.page--faq .faq-page-heading { max-width: 46rem; }
.page--faq .faq-page-heading--center { align-items: center; margin-inline: auto; text-align: center !important; }
.page--faq .faq-page-heading--center .page-intro__title { width: auto; padding: 0; border: 0; }
.page--faq .faq-page-heading--center .module-heading__description { margin: .1rem 0 0; text-align: center; }
.page--faq .faq-list:not(.faq-list--split) { display: block; width: min(100%, 46.25rem); margin-inline: auto; overflow: hidden; border: 1px solid #ffffff16; border-radius: 1rem; background: #101116; }
.page--faq .faq-list:not(.faq-list--split) .faq-list__items { display: grid; min-width: 0; gap: 0; }
.page--faq .faq-list:not(.faq-list--split) .faq-item { border: 0; border-bottom: 1px solid #ffffff13; border-radius: 0; background: transparent; box-shadow: none; }
.page--faq .faq-list:not(.faq-list--split) .faq-item:last-child { border-bottom: 0; }
.page--faq .faq-list:not(.faq-list--split) .faq-item:hover { transform: none; background: #ffffff03; }
.page--faq .faq-list:not(.faq-list--split) .faq-item__summary { min-height: 3.55rem; padding: .65rem .95rem; }
.page--faq .faq-list:not(.faq-list--split) .faq-item__number { width: 1.8rem; height: auto; flex-basis: 1.8rem; border: 0; border-radius: 0; background: transparent; color: #f58ab6; font-size: .8rem; }
.page--faq .faq-list:not(.faq-list--split) .faq-item__question { flex: 1; text-align: center; }
.page--faq .faq-list:not(.faq-list--split) .faq-item__icon { width: 1.45rem; height: 1.45rem; border-radius: .3rem; transform: rotate(45deg); }
.page--faq .faq-list:not(.faq-list--split) .faq-item__icon i { transform: rotate(-45deg); }
.page--faq .faq-list:not(.faq-list--split) .faq-item[open] .faq-item__icon i { transform: rotate(-45deg); }
.page--faq .faq-list:not(.faq-list--split) .faq-item__answer { padding: 0 .95rem .9rem; font-size: .76rem; line-height: 1.5; }
@media (max-width: 600px) {
  .page--faq .faq-page-heading { margin-bottom: 1.3rem; }
  .page--faq .faq-list:not(.faq-list--split) .faq-item__summary { gap: .5rem; padding-inline: .75rem; }
  .page--faq .faq-list:not(.faq-list--split) .faq-item__answer { padding-inline: .75rem; }
}
/* DMA bundle landing page */
.dma-page { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); }
.dma-page::before { position: absolute; z-index: -1; top: -12rem; left: 50%; width: min(70rem, 115vw); height: 36rem; border-radius: 50%; background: radial-gradient(ellipse, rgb(245 138 182 / .1), transparent 68%); content: ''; transform: translateX(-50%); pointer-events: none; }
.dma-page__inner { width: min(calc(100% - 2rem), 1160px); margin-inline: auto; }
.dma-page__back { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); color: #9a9eaa; font-size: .78rem; font-weight: 700; text-decoration: none; transition: color .18s ease; }
.dma-page__back:hover { color: #f58ab6; }
.dma-page__header { max-width: 48rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.dma-page__eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .48rem .78rem; border: 1px solid rgb(245 138 182 / .24); border-radius: 999px; background: rgb(245 138 182 / .07); color: #f58ab6; font-size: .64rem; font-weight: 850; letter-spacing: .15em; }
.dma-page__header h1 { margin: 1rem 0 .65rem; color: #f5f6fa; font-size: clamp(2.35rem, 5vw, 4rem); font-weight: 850; letter-spacing: -.055em; line-height: 1.03; }
.dma-page__header h1 span { color: #f58ab6; }
.dma-page__header p { max-width: 39rem; margin: 0 auto; color: #969aa5; font-size: .95rem; line-height: 1.7; }
.dma-page__bundle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; align-items: stretch; }
.dma-bundle-card { min-width: 0; overflow: hidden; border: 1px solid #ffffff16; border-radius: 1.05rem; background: linear-gradient(145deg, #ffffff07, transparent 40%), #15171e; box-shadow: 0 1.5rem 4rem -3rem #000b; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.dma-bundle-card:hover { transform: translateY(-3px); border-color: rgb(245 138 182 / .38); box-shadow: 0 1.7rem 4rem -3rem #000c, 0 0 2rem rgb(245 138 182 / .045); }
.dma-bundle-card__topline { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.15rem .85rem; color: #818692; font-size: .63rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.dma-bundle-card__tag { padding: .38rem .58rem; border: 1px solid rgb(245 138 182 / .24); border-radius: 999px; background: rgb(245 138 182 / .07); color: #f0a4c3; font-size: .58rem; letter-spacing: .08em; }
.dma-bundle-card__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; padding: .15rem 1.15rem 1rem; }
.dma-bundle-card__gallery figure { min-width: 0; margin: 0; }
.dma-bundle-card__gallery figure > div { display: grid; height: clamp(6.8rem, 13vw, 9rem); place-items: center; overflow: hidden; border: 1px solid #ffffff10; border-radius: .72rem; background: radial-gradient(ellipse at 50% 45%, rgb(245 138 182 / .055), transparent 72%), #101116; }
.dma-bundle-card__gallery img { display: block; width: 100%; height: 100%; padding: .45rem; object-fit: contain; }
.dma-bundle-card__gallery figcaption { overflow: hidden; padding-top: .45rem; color: #969aa5; font-size: .61rem; font-weight: 650; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dma-bundle-card__body { padding: .5rem 1.2rem 1.2rem; }
.dma-bundle-card__body h2 { margin: 0; color: #f1f2f6; font-size: clamp(1rem, 1.6vw, 1.28rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.3; }
.dma-bundle-card__summary { margin: .35rem 0 1rem; color: #8f949f; font-size: .74rem; line-height: 1.5; }
.dma-bundle-card__price { display: flex; align-items: baseline; gap: .45rem; padding-bottom: 1rem; border-bottom: 1px solid #ffffff12; }
.dma-bundle-card__price strong { color: #f58ab6; font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 850; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.dma-bundle-card__price span { color: #858a96; font-size: .68rem; font-weight: 800; letter-spacing: .1em; }
.dma-bundle-card__breakdown { display: grid; gap: .35rem; margin: .75rem 0 0; padding: .7rem .8rem; border: 1px solid #ffffff0d; border-radius: .65rem; background: #10111680; }
.dma-bundle-card__breakdown > div { display: flex; justify-content: space-between; gap: 1rem; color: #a9adb7; font-size: .72rem; line-height: 1.4; }
.dma-bundle-card__breakdown dt, .dma-bundle-card__breakdown dd { margin: 0; }
.dma-bundle-card__breakdown dd { color: #e2e4e9; font-weight: 750; font-variant-numeric: tabular-nums; }
.dma-bundle-card__shipping { margin: .5rem 0 0; color: #858a96; font-size: .66rem; font-style: italic; }
.dma-bundle-card__included-title { margin: 1rem 0 .55rem; color: #c4c7cf; font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.dma-bundle-card__included { display: grid; gap: .48rem; margin: 0 0 1.15rem; padding: 0; color: #a9adb7; font-size: .78rem; list-style: none; }
.dma-bundle-card__included li { display: flex; align-items: center; gap: .55rem; }
.dma-bundle-card__included i { color: #f58ab6; font-size: .65rem; }
.dma-bundle-card__action { display: flex; min-height: 2.8rem; align-items: center; justify-content: center; gap: .6rem; padding: .65rem 1rem; border: 1px solid rgb(245 138 182 / .34); border-radius: .65rem; background: linear-gradient(135deg, rgb(245 138 182 / .18), rgb(245 138 182 / .08)); color: #ffdce9; font-size: .77rem; font-weight: 850; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.dma-bundle-card__action:hover { transform: translateY(-1px); border-color: rgb(245 138 182 / .65); background: rgb(245 138 182 / .18); }
.dma-page__note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.1rem 0 0; color: #858a95; font-size: .7rem; text-align: center; }
.dma-page__note i { color: #f58ab6; }
@media (max-width: 760px) { .dma-page__bundle-grid { grid-template-columns: 1fr; max-width: 38rem; margin-inline: auto; } .dma-page__header { margin-bottom: 1.7rem; } }
@media (max-width: 480px) { .dma-page__inner { width: min(calc(100% - 1.25rem), 1160px); } .dma-bundle-card__topline { padding-inline: .85rem; } .dma-bundle-card__gallery { gap: .35rem; padding-inline: .85rem; } .dma-bundle-card__gallery figure > div { height: 6.2rem; } .dma-bundle-card__gallery figcaption { font-size: .56rem; } .dma-bundle-card__body { padding: .5rem .9rem .95rem; } .dma-bundle-card__summary { margin-bottom: .8rem; } }
@media (prefers-reduced-motion: reduce) { .dma-bundle-card, .dma-page__back, .dma-bundle-card__action { transition: none; } .dma-bundle-card:hover, .dma-bundle-card__action:hover { transform: none; } }

/* DMA page: individual parts, order animation, and page-specific FAQ */
.dma-section { margin-top: clamp(3.25rem, 7vw, 5.5rem); }
.dma-section__heading { max-width: 44rem; margin: 0 auto 1.45rem; text-align: center; }
.dma-section__eyebrow { color: #f58ab6; font-size: .62rem; font-weight: 850; letter-spacing: .16em; }
.dma-section__heading h2 { margin: .45rem 0 .4rem; color: #f1f2f6; font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.12; }
.dma-section__heading p { margin: 0; color: #969aa5; font-size: .83rem; line-height: 1.6; }
.dma-individual__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; }
.dma-part-card { min-width: 0; overflow: hidden; border: 1px solid #ffffff16; border-radius: .9rem; background: #15171e; transition: border-color .2s ease, transform .2s ease; }
.dma-part-card:hover { transform: translateY(-3px); border-color: rgb(245 138 182 / .4); }
.dma-part-card__image { display: grid; height: clamp(8rem, 15vw, 11rem); place-items: center; padding: .75rem; background: radial-gradient(ellipse at 50% 50%, rgb(245 138 182 / .06), transparent 72%), #101116; }
.dma-part-card__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dma-part-card__info { display: flex; flex-direction: column; align-items: flex-start; padding: .9rem; }
.dma-part-card__info > span { color: #8d929e; font-size: .58rem; font-weight: 850; letter-spacing: .14em; }
.dma-part-card__info h3 { min-height: 2.4em; margin: .35rem 0 .55rem; color: #f1f2f6; font-size: .94rem; font-weight: 800; line-height: 1.25; }
.dma-part-card__info > strong { margin-bottom: .8rem; color: #f58ab6; font-size: 1.28rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.dma-part-card__info > strong small { color: #858a96; font-size: .58rem; letter-spacing: .08em; }
.dma-part-card__info a { display: flex; width: 100%; min-height: 2.4rem; align-items: center; justify-content: center; gap: .45rem; margin-top: auto; padding: .55rem; border: 1px solid rgb(245 138 182 / .3); border-radius: .55rem; background: rgb(245 138 182 / .08); color: #ffdce9; font-size: .68rem; font-weight: 800; text-decoration: none; transition: background .18s ease, border-color .18s ease; }
.dma-part-card__info a:hover { border-color: rgb(245 138 182 / .65); background: rgb(245 138 182 / .16); }
.dma-how { position: relative; margin-top: clamp(3.5rem, 8vw, 6rem); padding: clamp(1.3rem, 4vw, 2.5rem); overflow: hidden; border: 1px solid #ffffff15; border-radius: 1rem; background: radial-gradient(ellipse at 50% 0%, rgb(245 138 182 / .07), transparent 60%), #14161d; }
.dma-how__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.dma-how__steps::before, .dma-how__steps::after { position: absolute; top: 1.65rem; left: 16.66%; width: 66.66%; height: 2px; content: ''; pointer-events: none; }
.dma-how__steps::before { background: #ffffff17; }
.dma-how__steps::after { background: linear-gradient(90deg, transparent, #f58ab6 35%, #f58ab6 65%, transparent); background-size: 200% 100%; animation: dma-flow 3.5s linear infinite; }
.dma-how__steps li { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: center; text-align: center; }
.dma-how__icon { position: relative; display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border: 1px solid rgb(245 138 182 / .48); border-radius: 50%; background: #191820; color: #f58ab6; box-shadow: 0 0 0 6px #14161d, 0 0 1.5rem rgb(245 138 182 / .15); animation: dma-pulse 2.8s ease-in-out infinite; }
.dma-how__steps li:nth-child(2) .dma-how__icon { animation-delay: .45s; }
.dma-how__steps li:nth-child(3) .dma-how__icon { animation-delay: .9s; }
.dma-how__icon > i { font-size: 1.05rem; }
.dma-how__icon > span { position: absolute; right: -.3rem; bottom: -.2rem; display: grid; width: 1.2rem; height: 1.2rem; place-items: center; border: 2px solid #14161d; border-radius: 50%; background: #f58ab6; color: #171218; font-size: .48rem; font-weight: 900; }
.dma-how__status { margin-top: 1.05rem; color: #f58ab6; font-size: .55rem; font-weight: 900; letter-spacing: .16em; }
.dma-how__steps h3 { margin: .35rem 0; color: #eff0f4; font-size: .95rem; font-weight: 800; }
.dma-how__steps p { max-width: 19rem; margin: 0; color: #969aa5; font-size: .72rem; line-height: 1.6; }
.dma-faq { margin-top: clamp(3.5rem, 8vw, 6rem); }
.dma-faq__list { max-width: 52rem; margin: 0 auto; overflow: hidden; border: 1px solid #ffffff16; border-radius: .9rem; background: #111318; }
.dma-faq__list details { border-bottom: 1px solid #ffffff13; }
.dma-faq__list details:last-child { border-bottom: 0; }
.dma-faq__list summary { display: flex; min-height: 3.7rem; align-items: center; gap: .8rem; padding: .8rem 1rem; color: #eceef3; cursor: pointer; font-size: .82rem; font-weight: 750; list-style: none; }
.dma-faq__list summary::-webkit-details-marker { display: none; }
.dma-faq__list summary > span { flex: 0 0 1.8rem; color: #f58ab6; font-size: .68rem; font-variant-numeric: tabular-nums; }
.dma-faq__list summary > i { margin-left: auto; color: #f58ab6; font-size: .7rem; transition: transform .2s ease; }
.dma-faq__list details[open] summary > i { transform: rotate(45deg); }
.dma-faq__list details > p { margin: -.1rem 2.8rem 1rem; color: #a3a7b0; font-size: .75rem; line-height: 1.65; }
@keyframes dma-flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes dma-pulse { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 6px #14161d, 0 0 1rem rgb(245 138 182 / .12); } 50% { transform: translateY(-3px); box-shadow: 0 0 0 6px #14161d, 0 0 1.8rem rgb(245 138 182 / .3); } }
@media (max-width: 900px) { .dma-individual__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dma-how__steps { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; } .dma-how__steps::before, .dma-how__steps::after { top: 1.65rem; bottom: 1.65rem; left: calc(50% - 1px); width: 2px; height: auto; background-size: 100% 200%; } .dma-how__steps::after { animation-name: dma-flow-vertical; } .dma-how__steps p { max-width: 23rem; } .dma-faq__list summary { gap: .55rem; padding-inline: .75rem; font-size: .75rem; } .dma-faq__list details > p { margin-inline: 2.55rem .8rem; font-size: .72rem; } }
@keyframes dma-flow-vertical { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
@media (prefers-reduced-motion: reduce) { .dma-how__steps::after, .dma-how__icon { animation: none; } }

/* Keep every DMA product fully visible and make better use of its image frame. */
.dma-bundle-card__gallery figure > div { height: clamp(8rem, 14vw, 10.5rem); }
.dma-bundle-card__gallery img { box-sizing: border-box; max-width: 100%; max-height: 100%; padding: .15rem; object-fit: contain !important; object-position: center; }
.dma-part-card__image { height: clamp(10rem, 17vw, 12.5rem); }
.dma-part-card__image img { box-sizing: border-box; max-width: 100%; max-height: 100%; object-fit: contain !important; object-position: center; }
@media (max-width: 480px) { .dma-bundle-card__gallery figure > div { height: 7rem; } }

/* DMA product details stay below their image frame. */
.dma-part-card { display: flex; flex-direction: column; }
.dma-part-card__image { position: relative; box-sizing: border-box; flex: 0 0 clamp(10rem, 17vw, 12.5rem); height: clamp(10rem, 17vw, 12.5rem); overflow: hidden; }
.dma-part-card__image img { position: absolute; inset: .5rem; display: block; width: calc(100% - 1rem); height: calc(100% - 1rem); max-width: none; max-height: none; margin: 0; padding: 0; object-fit: contain !important; object-position: center; }
.dma-part-card__info { position: relative; z-index: 1; flex: 1; border-top: 1px solid #ffffff10; }

/* Cart rows: compact product details and clearly visible quantity controls. */
.opioid-cart-page .opioid-cart-item { width: 100%; height: auto !important; min-height: 0 !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .8rem 1rem !important; }
.opioid-cart-page .opioid-cart-item > * { min-height: 0; }
.opioid-cart-page .opioid-cart-item__product { min-height: 0; align-self: center; gap: .85rem; }
.opioid-cart-page .opioid-cart-item__image { width: 5.5rem; max-width: 5.5rem; height: 4.5rem; flex: 0 0 5.5rem; overflow: hidden; padding: .25rem; border: 1px solid var(--theme-line); border-radius: .65rem; background: rgb(255 255 255 / .025); }
.opioid-cart-page .opioid-cart-item__image img { display: block; width: 100%; height: 100% !important; border-radius: .35rem; object-fit: contain !important; object-position: center; }
.opioid-cart-page .opioid-cart-item__details { align-self: center; padding: 0 !important; overflow: visible; }
.opioid-cart-page .opioid-cart-item__title { white-space: normal; }
.opioid-cart-page .opioid-cart-item__details > p { line-height: 1.4; }
.opioid-cart-page .opioid-cart-item__controls { grid-template-columns: 7.5rem minmax(5.25rem, auto) 2rem; align-self: center; gap: .65rem; min-height: 0; height: auto; margin: 0; padding: 0; border: 0; }
.opioid-cart-page .opioid-cart-item__stepper { display: grid !important; width: 7.5rem; height: 2.45rem; grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem; overflow: hidden; border: 1px solid var(--theme-line); border-radius: .6rem; background: rgb(255 255 255 / .025); }
.opioid-cart-page .opioid-cart-item__stepper button { display: grid !important; width: 2.2rem; height: 100%; place-items: center; padding: 0; color: #b8bbc4; }
.opioid-cart-page .opioid-cart-item__stepper button svg { display: block; width: 1rem; height: 1rem; fill: currentColor; }
.opioid-cart-page .opioid-cart-item__quantity { display: block; width: 100% !important; height: 100%; padding: 0 .2rem; color: #f1f2f6; font-size: .88rem; line-height: 1; text-align: center; }
.opioid-cart-page .opioid-cart-item__controls > div:nth-child(2) { min-width: 5.25rem; }
.opioid-cart-page .opioid-cart-item__price { color: #f1f2f6; font-size: .95rem; font-weight: 750; }
.opioid-cart-page .opioid-cart-item__remove { width: 2rem; height: 2rem; }
@media (max-width: 640px) {
  .opioid-cart-page .opioid-cart-item { grid-template-columns: minmax(0, 1fr); gap: .65rem; padding: .75rem !important; }
  .opioid-cart-page .opioid-cart-item__controls { grid-template-columns: 7.5rem minmax(0, 1fr); width: 100%; padding-top: .65rem; border-top: 1px solid var(--theme-line); }
  .opioid-cart-page .opioid-cart-item__image { width: 4.5rem; max-width: 4.5rem; flex-basis: 4.5rem; }
}

/* Separated cart quantity controls are easier to scan and tap. */
.opioid-cart-page .opioid-cart-item { display: grid !important; grid-auto-rows: min-content; align-self: start; height: fit-content !important; min-height: 0 !important; max-height: none; }
.opioid-cart-page .opioid-cart-item__stepper { display: grid !important; width: 8.4rem; height: 2.8rem; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; gap: .25rem; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.opioid-cart-page .opioid-cart-item__stepper button { display: grid !important; width: 2.5rem; height: 2.8rem; place-items: center; border: 1px solid rgb(var(--cl-accent) / .28); border-radius: .65rem; background: rgb(var(--cl-accent) / .08); color: rgb(var(--cl-accent)); transition: color .16s ease, background .16s ease, border-color .16s ease; }
.opioid-cart-page .opioid-cart-item__stepper button:hover:not(:disabled) { border-color: rgb(var(--cl-accent) / .65); background: rgb(var(--cl-accent) / .2); color: rgb(var(--cl-t-primary)); }
.opioid-cart-page .opioid-cart-item__stepper button:disabled { opacity: .42; }
.opioid-cart-page .opioid-cart-item__stepper button svg { display: block; width: 1.15rem; height: 1.15rem; fill: currentColor; }
.opioid-cart-page .opioid-cart-item__quantity { width: 100% !important; height: 2.8rem; border: 1px solid var(--theme-line); border-radius: .65rem; background: #101116; color: rgb(var(--cl-t-primary)); font-size: .9rem; font-weight: 800; text-align: center; }
@media (max-width: 640px) { .opioid-cart-page .opioid-cart-item__stepper { width: 8.4rem; } }
@media (prefers-reduced-motion: reduce) { .opioid-cart-page .opioid-cart-item__stepper button { transition: none; } }

/* Fixed horizontal quantity stepper: keep the value between its buttons. */
.opioid-cart-page .opioid-cart-item__stepper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between; gap: .25rem; box-sizing: border-box; width: 8.4rem !important; min-width: 8.4rem !important; max-width: 8.4rem !important; height: 2.8rem !important; min-height: 2.8rem !important; max-height: 2.8rem !important; padding: 0; overflow: visible; }
.opioid-cart-page .opioid-cart-item__stepper button { display: grid !important; flex: 0 0 2.5rem !important; box-sizing: border-box; width: 2.5rem !important; min-width: 2.5rem !important; max-width: 2.5rem !important; height: 2.8rem !important; min-height: 2.8rem !important; max-height: 2.8rem !important; align-self: center; }
.opioid-cart-page .opioid-cart-item__quantity { display: block !important; flex: 0 0 2.6rem !important; box-sizing: border-box; width: 2.6rem !important; min-width: 2.6rem !important; max-width: 2.6rem !important; height: 2.8rem !important; min-height: 2.8rem !important; max-height: 2.8rem !important; align-self: center; padding: 0 !important; appearance: textfield; }
.opioid-cart-page .opioid-cart-item__quantity::-webkit-inner-spin-button,
.opioid-cart-page .opioid-cart-item__quantity::-webkit-outer-spin-button { display: none; appearance: none; }