/* ==========================================================================
   CRYSKULL — Design System
   Direction: Premium · Minimal · Dark · Stone · Craftsmanship · Precision
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg:            #0a0a0b;
  --bg-2:          #101012;
  --surface:       #16161a;
  --surface-2:     #1d1d22;
  --line:          rgba(255, 255, 255, 0.09);
  --line-strong:   rgba(255, 255, 255, 0.18);

  --text:          #ececee;
  --text-muted:    #9b9ba4;
  /* Was #6e6e78, which measured 3.92:1 on --bg and 3.58:1 on --surface — below
     the WCAG AA minimum of 4.5:1 for small text, and it is used for hints,
     breadcrumbs, eyebrows and footer links. This value measures 5.4:1 on --bg
     and 4.9:1 on --surface. */
  --text-dim:      #85858f;

  --accent:        #c4a57b;
  --accent-soft:   rgba(196, 165, 123, 0.14);
  --accent-line:   rgba(196, 165, 123, 0.35);

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1240px;
  --container-narrow: 820px;
  --radius: 2px;

  --section-y: clamp(2.75rem, 5vw, 5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
h4 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }

/* Compact card/aside heading.
 *
 * Card and sidebar titles need to sit at the semantically correct level (an h3
 * inside an h2 section, not an h4), but the display-serif h3 style is far too
 * large for them. This class carries the compact sans treatment independently of
 * the tag, so heading level and visual size stop being coupled. */
.h-card {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* Hides content visually while leaving it available to assistive technology —
   used for section headings that give the document a correct outline where a
   visible heading would be redundant. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 62ch;
}
p { color: var(--text-muted); }
p + p { margin-top: 1.1em; }
strong { color: var(--text); font-weight: 600; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow-muted { color: var(--text-dim); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.container-narrow { max-width: var(--container-narrow); }
.section { padding: var(--section-y) 0; }
.section-tight { padding: clamp(2rem, 3.5vw, 3.25rem) 0; }
.section-bordered { border-top: 1px solid var(--line); }
.section-alt { background: var(--bg-2); }

.section-head { max-width: 62ch; margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.section-head h2 + p { margin-top: 1rem; }
.section-head .eyebrow { display: block; margin-bottom: 1rem; }

.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Grid/flex items default to min-width:auto, which lets wide content (tables,
   long unbroken strings) expand the track beyond its container. On mobile that
   pushes the whole page into horizontal scroll — a real conversion problem.
   min-width:0 lets the item shrink and the content wrap instead. */
.product-layout > *,
.split > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-5 > *,
.footer-grid > *,
.product-grid-4 > *,
.post-grid > * { min-width: 0; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split-wide { grid-template-columns: 1.15fr 0.85fr; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #14100a;
}
.btn-primary:hover { background: #d3b68e; border-color: #d3b68e; color: #14100a; }
.btn-sm { padding: 0.65rem 1.25rem; font-size: 0.75rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.btn-row-center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 0.25em;
  transition: gap 0.25s var(--ease), border-color 0.25s var(--ease);
}
.link-arrow:hover { gap: 0.9em; border-color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 72px;
}
.brand {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  flex-shrink: 0;
}
.brand span { color: var(--accent); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.045em;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
  position: relative;
  padding: 0.35rem 0;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
}

.header-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 72% 28%, rgba(196, 165, 123, 0.10), transparent 62%),
    radial-gradient(ellipse 55% 45% at 12% 78%, rgba(120, 150, 190, 0.07), transparent 60%);
  pointer-events: none;
}
.hero .container { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-bottom: 1.5rem; }
.hero .lede { margin-bottom: 2.25rem; }
.hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Stat bar ---------- */
.stat-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.stat-bar-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.stat {
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 1.25rem;
  text-align: center;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.25rem, 2.2vw, 2rem);
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease);
}
.product-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.product-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0d0d0f;
  overflow: hidden;
}
.product-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.product-card:hover .product-card-media img { transform: scale(1.045); }
.product-card-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
/* Category on the left, product reference on the right.
   The SKU is what a buyer quotes back to us in an enquiry, so it belongs on the
   card — out of the way of the title, but legible enough to read off the screen.
   `margin-left: auto` rather than `justify-content: space-between` so that on a
   narrow card, where the two wrap onto separate lines, the SKU still sits right
   instead of snapping back to the left edge. */
.product-card-cat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}
.product-card-sku {
  margin-left: auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.product-card h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}
.product-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
/* The footer keeps the price block and the wholesale note on opposite sides. */
.product-card-foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}
.price-note {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* "Retail" sits ABOVE the figure; the block keeps the accent colour and stays on
   the left of the footer, opposite the wholesale note. */
.card-price {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.05;
  color: var(--accent);
  white-space: nowrap;
}
.card-price-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.card-price-value {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
}
/* Retail price block on the product page buy box. Wholesale stays "on request"
   directly beneath it, so the two read together rather than conflicting. */
.detail-price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.detail-price-value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
  color: var(--text);
}
.detail-price-label {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  border-radius: var(--radius);
}
.badge-accent { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.badge-pending { border-color: rgba(200, 160, 90, 0.3); color: #c8a05a; }

/* Filter bar */
/* Category filters stay reachable while scrolling the grid.
   The header is 72px tall and sticky, so the bar parks directly beneath it
   instead of scrolling out of reach. background must be opaque: content passes
   behind it once stuck. */
.filter-bar {
  position: sticky;
  top: 72px;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  padding: 0.75rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.filter-bar a {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.25s var(--ease);
}
.filter-bar a:hover { color: var(--text); border-color: var(--line-strong); }
.filter-bar a[aria-current="page"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* ---------- Product detail ---------- */
.product-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
/* The buy box carries the product's h1, so it is first in the DOM to give the
   page a correct heading order (h1 before the gallery's h2/h3). `order` restores
   the design's visual arrangement: gallery on the left, buy box on the right —
   and on mobile, gallery first, which is the intended reading order there too. */
.product-layout > .gallery-col { order: 1; }
.product-layout > .buy-box { order: 2; }
.gallery-main {
  border: 1px solid var(--line);
  background: #0d0d0f;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  /* Horizontal drags belong to the gallery's swipe handler; vertical drags stay a
     normal page scroll. Declaring it here (rather than preventDefault-ing in JS)
     keeps scrolling native and the touch listeners passive. */
  touch-action: pan-y;
}
/* The native video controls need their own gestures — scrubbing is a horizontal
   drag — so they are left alone. */
.gallery-main video { touch-action: auto; }
/* Portrait shots fill the square frame; landscape shots (e.g. the top-down
   view) are switched to `contain` by JS so the whole carving is visible
   instead of being cropped by cover. */
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main.contain img { object-fit: contain; }
/* Prev/next arrows, centred vertically over the frame. */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s var(--ease), background 0.2s var(--ease);
}
.gallery-col:hover .gallery-arrow,
.gallery-arrow:focus-visible { opacity: 1; }
.gallery-arrow:hover { background: rgba(196, 165, 123, 0.9); color: #0a0a0b; }
.gallery-arrow-prev { left: 0.85rem; }
.gallery-arrow-next { right: 0.85rem; }
@media (hover: none) {
  /* touch: always visible so the arrows are actually reachable */
  .gallery-arrow { opacity: 1; }
  .gallery-arrow { width: 40px; height: 40px; }
}
.gallery-thumbs {
  display: grid;
  /* Mobile: as many 72px thumbnails as fit, wrapping as needed. */
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}
/* Tablet and desktop: every product carries one video plus eight photos, so the
   strip is laid out as exactly nine columns and that set occupies a single row.
   With auto-fill the ninth item wrapped inside the ~690px gallery column, leaving
   one lonely thumbnail under the main image. Products with more shots (CS-260017
   has twelve, so thirteen items) simply continue on the next row at the same size.
   minmax(0, 1fr) rather than 1fr so narrow tracks shrink instead of overflowing. */
@media (min-width: 768px) {
  .gallery-thumbs { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
.gallery-thumb {
  border: 1px solid var(--line);
  background: #0d0d0f;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
  opacity: 0.6;
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb[aria-current="true"] { border-color: var(--accent); opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb { position: relative; }
.thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 11, 0.45);
  color: #fff;
  font-size: 0.7rem;
}
.gallery-thumb[aria-current="true"] .thumb-play { background: rgba(10, 10, 11, 0.2); color: var(--accent); }
.gallery-main video { width: 100%; height: 100%; object-fit: contain; background: #0d0d0f; display: block; }

/* Descriptive content that sits under the gallery in the LEFT column. Putting
   it here balances the columns — otherwise the buy box is far taller than the
   gallery and leaves a large dead area on the left. */
.gallery-detail {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.gallery-detail h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0.75rem 0 1rem; }
.gallery-detail .h-card { margin: 1.75rem 0 0.6rem; }
.gallery-detail .split { gap: 2rem; }

.detail-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* Numbered "what happens next" — removes uncertainty about the RFQ process,
   which is a common drop-off point on quote-only sites. */
.step-list { counter-reset: step; margin: 1.5rem 0 0; }
.step-list li {
  counter-increment: step;
  position: relative;
  padding: 0.7rem 0 0.7rem 2.4rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.step-list li:last-child { border-bottom: 0; }
.step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.step-list strong { color: var(--text); }

/* Trust bullets — the reasons a buyer should enquire rather than bounce */
.trust-list { margin: 1.75rem 0 0; }
.trust-list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.6rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.trust-list li:last-child { border-bottom: 0; }
.trust-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.trust-list strong { color: var(--text); }

/* Inline quick-quote form on product pages */
.quick-quote {
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.quick-quote-head { margin-bottom: 1.5rem; }
.quick-quote-head .h-card { margin-bottom: 0.3rem; }
.quick-quote .field input[readonly] {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: default;
}
.quick-quote .form-grid { gap: 1rem; }

/* Related products: only column counts that divide the item count evenly
   (4 / 2 / 1), so the last row is never left ragged. */
.product-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.2vw, 2rem); }
@media (max-width: 1024px) { .product-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid-4 { grid-template-columns: 1fr; } }

/* Home featured row: 6 items, so 3 columns gives two full rows (and 2 or 1
   columns still divide evenly at smaller widths). */
.product-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.2vw, 2rem); }
@media (max-width: 860px) { .product-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid-3 { grid-template-columns: 1fr; } }

.buy-box { position: sticky; top: 96px; }
.buy-box h1 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); margin-bottom: 1rem; }
.buy-box .lede { font-size: 1rem; margin-bottom: 1.75rem; }

.spec-table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; table-layout: fixed; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  vertical-align: top;
  /* Long values (e.g. "1.04 kg (1040 g / approx. 2.29 lb)") must wrap rather
     than widen the table and push the whole page into horizontal scroll. */
  overflow-wrap: break-word;
}
.spec-table th {
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  width: 40%;
  padding-right: 1rem;
}
.spec-table td { color: var(--text); }

.notice {
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--accent-line);
  background: var(--accent-soft);
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 1.5rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice strong { display: block; margin-bottom: 0.3rem; color: var(--text); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* Catalogue download panel — the B2B soft-conversion: a buyer who is not ready
   to enquire will still take the PDF, and it circulates internally. */
.download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.download-row > div { flex: 1 1 22rem; min-width: 0; }
.download-row .btn { flex: 0 0 auto; }

/* ---------- Content blocks ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.5em; margin-bottom: 0.75em; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2em; margin-bottom: 0.6em; font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; }
.prose ul, .prose ol { margin: 1.25em 0; }
.prose li { color: var(--text-muted); padding-left: 1.5em; position: relative; margin-bottom: 0.55em; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 5px; height: 1px;
  background: var(--accent);
}
.prose ol { counter-reset: item; }
.prose ol li::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.prose a { color: var(--accent); border-bottom: 1px solid var(--accent-line); }
.prose a:hover { border-color: var(--accent); }

/* Feature cards */
.feature-card {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease);
}
.feature-card:hover { border-color: var(--accent-line); }
.feature-card .num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
  display: block;
  margin-bottom: 0.85rem;
  line-height: 1;
}
.feature-card .h-card { margin-bottom: 0.65rem; }
.feature-card p { font-size: 0.9375rem; line-height: 1.6; }

/* Process steps — presented as a compact card grid rather than a tall
   full-width list, which used to run the full page height for six steps. */
.process-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.process-step {
  background: var(--surface);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  transition: background 0.25s var(--ease);
}
.process-step:hover { background: var(--surface-2); }
.process-step-n {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 0.75rem;
}
.process-step .h-card { margin-bottom: 0.35rem; }
.process-step p { font-size: 0.9375rem; margin: 0; }

@media (max-width: 860px) { .process-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-list { grid-template-columns: 1fr; } }

/* Production flow */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.flow-step {
  background: var(--surface);
  padding: 1.5rem 1rem;
  text-align: center;
}
.flow-step .n {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.6rem;
}
.flow-step .en {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.flow-step .zh {
  font-size: 0.6875rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}

/* Monumental: portrait source in a split layout (see home page) */

/* FAQ */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  padding: 1.5rem 0;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-answer { padding: 0 0 1.75rem; max-width: 72ch; }
.faq-answer p { font-size: 0.9375rem; }

/* ---------- Blog ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.25rem, 2.2vw, 2rem);
}
.post-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.post-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease);
}
.post-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.post-card h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin-bottom: 0.7rem;
  color: var(--text);
}
.post-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}
.post-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.15rem;
}
.post-card .link-arrow { margin-top: auto; align-self: flex-start; }

.article-header {
  max-width: var(--container-narrow);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.article-header h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); margin: 1rem 0 1.15rem; }
.article-header .post-card-tags { margin-bottom: 0; }

.article-body {
  max-width: 72ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.article-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: 2.6em;
  margin-bottom: 0.7em;
  padding-top: 1.6em;
  border-top: 1px solid var(--line);
}
.article-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body h3 { margin-top: 2em; font-size: 1.125rem; }
.article-body p { color: var(--text-muted); margin-bottom: 1.25em; }
.article-body strong { color: var(--text); }
.article-body li { margin-bottom: 0.6em; }
.article-body blockquote {
  margin: 1.75em 0;
  padding: 1.15rem 1.35rem;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article-body blockquote p { margin: 0; color: var(--text); font-size: 1rem; }
.article-body blockquote p + p { margin-top: 0.7em; color: var(--text-muted); }
.article-body blockquote strong {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
}
.article-body hr { margin: 2.5em 0; }

.md-table { overflow-x: auto; margin: 1.75em 0; }
.md-table table { width: 100%; border-collapse: collapse; min-width: 420px; }
.md-table th, .md-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  text-align: left;
  vertical-align: top;
}
.md-table th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-2);
  white-space: nowrap;
}
.md-table td { color: var(--text-muted); }
.md-table td strong { color: var(--text); }

.article-footer {
  max-width: 72ch;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* Reassurance directly above the fields: the form shows fourteen fields but only
   five are required, and a buyer who does not realise that may not start. */
.form-lead {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.form-lead strong { color: var(--text); }

/* Optional detail, collapsed by default. Progressive disclosure keeps perceived
   effort low without dropping any field the sales team wants. */
.form-more {
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.form-more > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.15rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s var(--ease);
}
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary::before {
  content: "+";
  font-weight: 300;
  font-size: 1.125rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.form-more[open] > summary::before { transform: rotate(45deg); }
.form-more > summary:hover { color: var(--accent); }
.form-more > summary .dim { font-weight: 400; }
.form-more > .form-grid { padding: 0 1.15rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9375rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239b9ba4' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.field-hint { font-size: 0.75rem; color: var(--text-dim); }
.field input[type="file"] { padding: 0.7rem 1rem; font-size: 0.8125rem; cursor: pointer; }

.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; }

.form-status {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  display: none;
}
.form-status[data-state="success"] { display: block; border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.form-status[data-state="error"] { display: block; border-color: rgba(220, 100, 100, 0.4); background: rgba(220, 100, 100, 0.08); color: #e8a0a0; }
.form-status[data-state="loading"] { display: block; color: var(--text-muted); }

/* ---------- CTA band ---------- */
.cta-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0;
  text-align: center;
}
.cta-band h2 { max-width: 22ch; margin: 0 auto 1.25rem; }
.cta-band .lede { margin: 0 auto 2.25rem; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 5vw, 4.5rem) 0 2rem;
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}
.footer-brand .brand { margin-bottom: 1.15rem; display: block; }
.footer-brand p { font-size: 0.875rem; max-width: 34ch; }
.footer-brand p a { display: inline-block; padding: 0.25rem 0; }
.footer-col .footer-head {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.1rem;
}
.footer-col li + li { margin-top: 0.3rem; }
/* Padding gives footer links a hit area of at least 24px tall, the WCAG 2.5.8
   minimum. They are standalone navigation targets, not inline links, so the
   inline exception does not apply. The reduced list gap keeps the visual
   rhythm the same. */
.footer-col a { font-size: 0.875rem; color: var(--text-muted); transition: color 0.2s var(--ease); display: inline-block; padding: 0.2rem 0; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
}
.footer-bottom a:hover { color: var(--accent); }
/* Same 24px minimum hit area as the footer nav links (WCAG 2.5.8). */
.footer-bottom a { display: inline-block; padding: 0.25rem 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  padding: 1.5rem 0 0;
}
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { margin: 0 0.5rem; opacity: 0.5; }

/* ---------- Page header ---------- */
.page-header {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}
.page-header h1 { margin-bottom: 1.25rem; }
.page-header .lede { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.dim { color: var(--text-dim); }
.small { font-size: 0.8125rem; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 1.25rem; }
.divider { height: 1px; background: var(--line); margin: 2.5rem 0; }

/* WhatsApp float (renders only when number configured) */
.float-wa {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  background: #25d366;
  color: #062611;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 100px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s var(--ease);
}
.float-wa:hover { transform: translateY(-2px); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-layout { grid-template-columns: 1fr; }
  .buy-box { position: static; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 16 / 10; max-height: 460px; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .site-header.nav-open .nav {
    display: flex;
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0 1rem;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .site-header.nav-open .nav a {
    padding: 0.9rem clamp(1.25rem, 4vw, 2.5rem);
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--line);
  }
  .grid-3, .grid-2, .split, .split-wide { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .header-actions .btn { display: none; }
}

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

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .float-wa, .cta-band { display: none; }
  body { background: #fff; color: #000; }
}