/* ==========================================================================
   CubyCrafts — shared stylesheet
   Dark, layered, orange-accented. Mobile-first; scales to wide desktop.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */
:root {
  --bg: #0b0c0d;
  --bg-2: #0a0b0c;
  --panel: #141516;
  --panel-2: #1a1a1a;
  --raised: #1f2021;
  --text: #f4f4f4;
  --muted: #b5b5b5;
  --dim: #8d8d8d;
  --orange: #ff6900;
  --orange-2: #ff8b1a;
  --orange-dim: rgba(255, 105, 0, .14);
  --cream: #ece4d7;
  --line: rgba(255, 255, 255, .11);
  --line-soft: rgba(255, 255, 255, .06);
  --ok: #4ec77f;
  --warn: #ffc35c;
  --err: #ff6b6b;

  --max: 1180px;
  --gut: 20px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow: 0 20px 55px rgba(0, 0, 0, .35);
  --shadow-lift: 0 26px 60px rgba(0, 0, 0, .5);
  --ring: 0 0 0 3px rgba(255, 105, 0, .45);

  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Poppins, var(--font);
  --header-h: 72px;
}

/* ---------------------------------------------------------------- 2. reset */
*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute has to beat every layout rule below it. A class that
   sets display (grid, flex) on the same element otherwise wins on source order
   and the element stays on screen — which has now cost us `.field` and
   `.contact-grid`, both silently. One rule, once. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

/* The canvas colour lives on html so the page can never show through white,
   however tall it gets. The decorative gradients are top-anchored on body —
   a fixed attachment would break long pages and stutter on iOS. */
html { background-color: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background-color: #0d0e0f;
  background-image:
    radial-gradient(circle at 10% 15%, rgba(255, 105, 0, .08), transparent 24%),
    linear-gradient(180deg, #0a0b0c, #111214 55%, #0d0e0f 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 820px, 100% 1500px;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 700;
}

h1 { font-size: clamp(34px, 6vw, 60px); }
h2 { font-size: clamp(28px, 4.2vw, 46px); }
h3 { font-size: clamp(19px, 2.2vw, 24px); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--orange);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 700;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* Grid and flex children default to min-width:auto, which lets a wide child
   (a tab strip, a table, a long word) push its track past the viewport.
   Every layout track on this site opts out of that. */
.pdp > *, .shop-layout > *, .cart-layout > *, .about-grid > *,
.contact-grid > *, .grid > *, .form-grid > *, .feature-grid > *,
.footer-grid > *, .steps > *, .material-grid > *, .mini-line > * { min-width: 0; }

/* ------------------------------------------------------------- 3. utilities */
.container { width: min(var(--max), calc(100% - var(--gut) * 2)); margin-inline: auto; }
.container-wide { width: min(1360px, calc(100% - var(--gut) * 2)); margin-inline: auto; }

section { padding: clamp(56px, 8vw, 88px) 0; }
.section-tight { padding-top: 0; }

.eyebrow {
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 10px;
}

.lead { color: var(--muted); max-width: 66ch; margin-top: 16px; font-size: clamp(15px, 1.6vw, 17px); }
.section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.section-head.center { text-align: center; }
.section-head.center .lead { margin-inline: auto; }

.divider-top { border-top: 1px solid var(--line-soft); padding-top: clamp(48px, 6vw, 72px); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.stack-sm > * + * { margin-top: 8px; }

/* --------------------------------------------------------------- 4. buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 10px 26px rgba(255, 105, 0, .22); }
.btn.secondary { background: rgba(18, 18, 19, .72); backdrop-filter: blur(8px); }
.btn.outline { border-color: var(--orange); color: var(--orange-2); }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.btn.block { width: 100%; }
.btn.lg { min-height: 54px; padding: 0 26px; font-size: 15px; }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 13px; }

.link-arrow { color: var(--orange-2); font-weight: 700; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow:hover { gap: 10px; }
.link-arrow span { transition: transform .18s ease; }

/* -------------------------------------------------- 5. badges / pills / tags */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.badge.hot { background: var(--orange); color: #fff; }
.badge.new { background: rgba(78, 199, 127, .16); color: var(--ok); border: 1px solid rgba(78, 199, 127, .35); }
.badge.low { background: rgba(255, 195, 92, .14); color: var(--warn); border: 1px solid rgba(255, 195, 92, .32); }
.badge.soft { background: rgba(255, 255, 255, .07); color: var(--muted); border: 1px solid var(--line); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: .18s ease;
}
.pill:hover { color: var(--text); border-color: rgba(255, 105, 0, .45); }
.pill[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ----------------------------------------------------------------- 6. forms */
/* `align-content: start` keeps a field's label, control and hint packed at the
   top. Without it a short field stretches to match a taller neighbour in the
   same grid row, and its control floats away from its label. */
.field { display: grid; gap: 7px; align-content: start; }
.field > label { font-size: 13px; font-weight: 700; color: #dcdcdc; }
.field .hint { font-size: 12px; color: var(--dim); }

/* Match every text-like input, including those with no type attribute at all
   (which default to text but would not match input[type="text"]). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #101112;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
  cursor: pointer;
}
input::placeholder, textarea::placeholder { color: #6d6d6d; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 105, 0, .18);
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--err); }
.error-text { color: var(--err); font-size: 12.5px; font-weight: 600; min-height: 1em; }

/* File input. It inherits the field box above; only the browser's own button
   needs restyling, and it is the one control whose padding must stay tight so
   the button does not overflow the box. */
.file-input { padding: 8px 10px; cursor: pointer; }
.file-input::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.file-input::file-selector-button:hover { border-color: var(--orange); background: var(--orange-dim); }
.file-note:empty { display: none; }
.file-note {
  font-size: 12.5px; font-weight: 600; color: var(--ok);
  overflow-wrap: anywhere;
}

/* Chromium paints autofilled fields white; hold the dark theme instead. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #101112 inset;
  caret-color: var(--text);
}

.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; min-height: 0; accent-color: var(--orange); margin-top: 2px; flex: none; }

.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- 7. header */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8, 9, 10, .88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-text {
  font-family: var(--display);
  font-weight: 700; font-size: clamp(19px, 2.4vw, 23px); letter-spacing: -.03em;
}
.brand-text .b1 { color: #efe9df; }
.brand-text .b2 { color: var(--orange); }

.nav-links { display: none; align-items: center; gap: 26px; font-size: 14px; color: #dedede; }
.nav-links a { position: relative; padding: 6px 0; font-weight: 500; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--orange); transition: right .22s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--orange); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  transition: .18s ease;
}
.icon-btn:hover { border-color: rgba(255, 105, 0, .5); color: var(--orange-2); }
.icon-btn svg { width: 20px; height: 20px; }

.cart-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid #0b0c0d;
}
.cart-count[hidden] { display: none; }

.quote-btn { display: none; }
.nav-toggle { display: grid; }

/* mobile drawer */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0; z-index: 39;
  background: rgba(8, 9, 10, .97);
  backdrop-filter: blur(18px);
  padding: 24px var(--gut) 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu nav { display: grid; gap: 2px; }
.mobile-menu nav a {
  padding: 15px 6px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 17px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-menu nav a[aria-current="page"] { color: var(--orange); }
.mobile-menu .btn { margin-top: 22px; }

@media (min-width: 981px) {
  .nav-links { display: flex; }
  .quote-btn { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }
}

/* ------------------------------------------------------------------ 8. hero */
/* Split hero: wording on one side, photograph on the other, the image running
   full bleed to the viewport edge at the full height of the section. The copy
   is padded so it still lines up with the site container, so the text column
   sits on the same left margin as every section below it. */
/* .hero is a <section>; drop the generic section padding so the photo runs
   right up under the header rather than starting 88px below it. */
.hero { padding: 0; border-bottom: 1px solid var(--line-soft); }

.hero-inner { display: grid; grid-template-columns: 1fr; }

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 8vw, 96px) var(--gut) clamp(40px, 7vw, 84px);
}

.hero-media { background: #111; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: stretch;
    min-height: min(720px, calc(100vh - var(--header-h)));
  }
  /* Line the copy up with the container's left gutter without constraining the
     grid, so the image can still reach the right edge of the viewport. */
  .hero-copy {
    padding-inline: max(var(--gut), calc((100vw - var(--max)) / 2)) clamp(28px, 4.5vw, 64px);
  }
}

/* On a phone the copy stacks above the photo, which keeps a fixed shape so it
   never crowds out the text. */
@media (max-width: 899px) {
  .hero-media img { aspect-ratio: 4 / 3; }
}

.hero-eyebrow {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
}

.hero-wordmark {
  font-size: clamp(46px, 6.6vw, 82px);
  letter-spacing: -.035em;
  line-height: .95;
  margin: 0;
}
.hero-wordmark .b1 { color: #efe9df; }
.hero-wordmark .b2 { color: var(--orange); }

.hero-tagline {
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

/* "Built layer by layer" between two rules, as on the printed lockup */
.hero-rule {
  display: flex; align-items: center; gap: 14px;
  margin: 13px 0 0;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  color: var(--orange-2);
}
.hero-rule::before, .hero-rule::after {
  content: ""; height: 1px; flex: 1 1 20px; max-width: 74px; background: var(--orange); opacity: .75;
}

.hero-copy .lead { margin-top: clamp(20px, 2.6vw, 28px); max-width: 46ch; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(26px, 3.5vw, 36px); }
.hero-actions .btn { flex: 0 1 auto; min-width: 156px; }

/* Our labels are longer than a bare "Shop now", so trim the padding on phones
   to keep both calls to action on one line rather than stacking them. */
@media (max-width: 460px) {
  .hero-actions { gap: 10px; }
  .hero-actions .btn.lg { min-width: 0; padding-inline: 15px; font-size: 14px; }
}

/* --------------------------------------------------------- 9. feature strip */
.features { padding-top: 0; }
.feature-grid {
  transform: translateY(-15px);
  background: linear-gradient(145deg, #191919, #121314);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.feature { padding: 26px 22px; text-align: center; position: relative; }
.feature .icon {
  width: 48px; height: 48px; margin: 0 auto 14px;
  border: 1px solid rgba(255, 105, 0, .55);
  background: var(--orange-dim);
  color: var(--orange);
  border-radius: 50%; display: grid; place-items: center;
}
.feature .icon svg { width: 23px; height: 23px; }
.feature strong { display: block; color: var(--orange-2); margin-bottom: 6px; }
.feature p { margin: 0; color: #c2c2c2; font-size: 13px; }
.feature + .feature::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px; background: var(--line);
}
@media (min-width: 620px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature + .feature::before { left: 18%; right: 18%; }
  .feature:nth-child(odd) + .feature::before,
  .feature:nth-child(n+3)::before { content: ""; }
}
@media (min-width: 981px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .feature + .feature::before { left: 0; right: auto; top: 22%; bottom: 22%; width: 1px; height: auto; }
}

/* ------------------------------------------------------------- 10. about */
.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1.05fr; } }

.about-visual {
  min-height: 340px;
  border-radius: var(--r-lg);
  overflow: hidden; position: relative;
  background:
    radial-gradient(circle at 78% 68%, rgba(255, 105, 0, .26), transparent 26%),
    linear-gradient(145deg, #33200f, #0f1113 62%);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
}
.about-visual img { width: min(78%, 320px); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.about-stats div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 12px; background: rgba(255, 255, 255, .02); }
.about-stats b { display: block; font-family: var(--display); font-size: clamp(20px, 3vw, 27px); color: var(--orange-2); }
.about-stats span { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------- 11. generic cards */
.card {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(180deg, #1b1b1b, #151515);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); border-color: rgba(255, 105, 0, .45); box-shadow: var(--shadow-lift); }
.card-art {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 100%, #5c310f, #1b1714 56%, #111);
  font-size: clamp(48px, 7vw, 68px);
  filter: drop-shadow(0 13px 16px rgba(0, 0, 0, .45));
}
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-body h3 { font-size: 16px; }
.card-body p { margin: 0; color: #aaa; font-size: 13px; flex: 1; }
.card-body .link-arrow { margin-top: 6px; }

.grid { display: grid; gap: 15px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4, .grid.cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .grid.cols-5 { grid-template-columns: repeat(5, 1fr); } }

/* ---------------------------------------------------------- 12. product card */
.product-card { position: relative; }
.product-card .card-art {
  aspect-ratio: 1 / 1;
  background: #121314;
  padding: 0;
  overflow: hidden;
}
.product-card .card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .card-art img { transform: scale(1.06); }
.product-card .badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.product-card h3 { font-size: 15.5px; line-height: 1.25; }
.product-card .cat { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 700; }
.product-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.price { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--text); }
.price-was { font-size: 13px; color: var(--dim); text-decoration: line-through; }
.rating { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.stars { color: var(--orange-2); letter-spacing: 1px; font-size: 13px; }
.product-card .card-actions { display: flex; gap: 8px; margin-top: 10px; }
.product-card .card-actions .btn { flex: 1; }

/* -------------------------------------------------------------- 13. process */
.steps { display: grid; grid-template-columns: 1fr; gap: 22px; position: relative; }
.step { text-align: center; position: relative; z-index: 1; }
.step-num {
  width: 58px; height: 58px; margin: 0 auto 14px;
  border: 1px solid var(--orange); background: #161616; border-radius: 50%;
  display: grid; place-items: center; color: var(--orange); font-weight: 800; font-size: 19px;
  font-family: var(--display);
}
.step h4 { margin: 0 0 6px; font-size: 16px; }
.step p { margin: 0; color: #aaa; font-size: 13px; }
@media (min-width: 620px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 981px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: 18px; }
  .steps::before {
    content: ""; position: absolute; left: 9%; right: 9%; top: 29px; height: 1px;
    background: linear-gradient(90deg, transparent, #a64c08 12%, #a64c08 88%, transparent);
  }
}

/* ------------------------------------------------------------- 14. cta band */
.cta {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(22px, 3vw, 30px) clamp(22px, 4vw, 34px);
  border-radius: var(--r);
  background: linear-gradient(110deg, #38200f 0, #1c1c1c 31%, #171717 100%);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.cta h3 { margin: 4px 0; font-size: clamp(21px, 3vw, 29px); }
.cta p { margin: 0; color: #aaa; }
.cta .btn { flex: none; }
@media (min-width: 800px) { .cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; } }

/* ------------------------------------------------------------ 15. materials */
.material-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 30px; }
.material {
  border: 1px solid var(--line); border-radius: var(--r); padding: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
}
.material h4 { font-size: 17px; margin-bottom: 4px; }
.material .tag { color: var(--orange-2); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.material p { margin: 8px 0 0; color: #a8a8a8; font-size: 13.5px; }
.material dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 14px 0 0; font-size: 12.5px; }
.material dt { color: var(--dim); }
.material dd { margin: 0; color: #ccc; text-align: right; }

/* ------------------------------------------------------------------ 16. faq */
.faq-list { display: grid; gap: 10px; margin-top: 28px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, .02); overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 18px 52px 18px 20px; position: relative;
  font-weight: 600; font-size: 15.5px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--orange); font-size: 22px; font-weight: 400; line-height: 1;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--orange-2); }
.faq-item .faq-body { padding: 0 20px 18px; color: #aaa; font-size: 14.5px; }

/* --------------------------------------------------------------- 17. footer */
footer {
  padding: clamp(40px, 6vw, 56px) 0 26px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 981px) { .footer-grid { grid-template-columns: 1.5fr .8fr .9fr 1.2fr; gap: 40px; } }
.footer-grid h4 { margin: 0 0 16px; font-size: 16px; }
.footer-grid p, .footer-grid a { color: #aaa; font-size: 14px; }
.footer-grid a:hover { color: var(--orange-2); }
.footer-brand p { margin-top: 14px; max-width: 42ch; }
.footer-links { display: grid; gap: 9px; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted);
}
.social a:hover { border-color: var(--orange); color: var(--orange); }
.social svg { width: 17px; height: 17px; }

.newsletter { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-top: 12px; background: #131313; }
.newsletter input { min-width: 0; flex: 1; border: 0; background: transparent; border-radius: 0; }
.newsletter input:focus { box-shadow: none; }
.newsletter button { border: 0; background: var(--orange); color: #fff; width: 50px; cursor: pointer; display: grid; place-items: center; }
.newsletter button:hover { filter: brightness(1.1); }

.copyright {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 10px;
  color: #777; font-size: 12px;
}
@media (min-width: 640px) { .copyright { flex-direction: row; justify-content: space-between; } }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-legal a { color: #8d8d8d; }
.footer-legal a:hover { color: var(--orange-2); }

/* ------------------------------------------------------------ 17b. legal pages
   Long-form prose. Narrower than the site container, because a legal page is
   read rather than scanned and 90-character lines are hard work. */
.legal { max-width: 760px; }
.legal .updated { font-size: 13px; color: var(--dim); margin-bottom: 30px; }
.legal h2 {
  font-size: clamp(19px, 2.4vw, 22px); margin: 40px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.legal h3 { font-size: 16px; margin: 24px 0 8px; color: var(--cream); }
.legal p, .legal li { color: var(--muted); font-size: 15px; line-height: 1.7; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 7px; }
.legal li { list-style: disc; }
.legal li::marker { color: var(--orange); }
.legal strong { color: var(--text); font-weight: 700; }
/* A legal page is one of the few places a link must be unmistakable, so these
   are underlined rather than relying on colour alone. */
.legal a { color: var(--orange-2); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--orange); }
.legal .callout {
  border: 1px solid rgba(255, 105, 0, .3); background: var(--orange-dim);
  border-radius: var(--r-sm); padding: 15px 17px; margin: 0 0 22px;
}
.legal .callout p:last-child { margin-bottom: 0; }
.legal dl { margin: 0 0 18px; display: grid; gap: 12px; }
.legal dt { font-weight: 700; color: var(--text); font-size: 14.5px; }
.legal dd { margin: 3px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }

/* ------------------------------------------------------- 18. page header bar */
.page-head {
  padding: clamp(36px, 6vw, 60px) 0 clamp(24px, 4vw, 36px);
  border-bottom: 1px solid var(--line-soft);
  background: radial-gradient(circle at 12% 0%, rgba(255, 105, 0, .1), transparent 40%);
}
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--dim); margin-bottom: 14px; }
.breadcrumbs a:hover { color: var(--orange-2); }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: #4a4a4a; }
.breadcrumbs li { display: flex; }

/* ------------------------------------------------------------------ 19. shop */
.shop-layout { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 981px) { .shop-layout { grid-template-columns: 258px 1fr; gap: 34px; } }

.filters {
  border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(255, 255, 255, .02);
  padding: 20px;
}
@media (min-width: 981px) { .filters { position: sticky; top: calc(var(--header-h) + 20px); } }
.filters h3 { font-size: 15px; margin-bottom: 12px; }
.filter-group + .filter-group { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.filter-options { display: grid; gap: 9px; }
.filter-options label { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); cursor: pointer; }
.filter-options label:hover { color: var(--text); }
.filter-options input { width: 17px; height: 17px; min-height: 0; accent-color: var(--orange); flex: none; }
.filter-options .count { margin-left: auto; font-size: 12px; color: var(--dim); }

.range-row { display: flex; align-items: center; gap: 10px; }
.range-row input[type="range"] { flex: 1; min-height: 0; padding: 0; border: 0; background: transparent; accent-color: var(--orange); cursor: pointer; }
.range-val { font-size: 13px; font-weight: 700; color: var(--orange-2); min-width: 56px; text-align: right; }

.shop-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 20px;
}
.shop-search { flex: 1 1 220px; position: relative; }
.shop-search input { padding-left: 40px; }
.shop-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--dim); pointer-events: none; }
.shop-toolbar select { width: auto; min-width: 178px; flex: none; }
.result-count { font-size: 13.5px; color: var(--muted); margin-left: auto; }
.filter-toggle { flex: none; }
@media (min-width: 981px) { .filter-toggle { display: none; } }

.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: thin; }
.chip-row::-webkit-scrollbar { height: 5px; }
.chip-row::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 3px; }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-filters .pill { padding-right: 10px; }
.active-filters .pill b { font-weight: 700; }

.empty-state {
  text-align: center; padding: clamp(44px, 8vw, 80px) 20px;
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .015);
}
.empty-state .icon { font-size: 44px; margin-bottom: 14px; opacity: .8; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { color: var(--muted); max-width: 44ch; margin-inline: auto; }

/* -------------------------------------------------------- 20. product detail */
.pdp { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .pdp { grid-template-columns: 1.05fr 1fr; } }
@media (min-width: 981px) { .pdp-gallery { position: sticky; top: calc(var(--header-h) + 20px); } }

.pdp-main {
  aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: #121314;
}
.pdp-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pdp-thumbs button {
  width: 74px; height: 74px; flex: none; padding: 0; cursor: pointer;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: #121314;
  transition: border-color .18s ease;
}
.pdp-thumbs button[aria-current="true"] { border-color: var(--orange); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp-info h1 { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 10px; }
.pdp-price { display: flex; align-items: baseline; gap: 10px; margin: 16px 0; }
.pdp-price .price { font-size: clamp(26px, 3.4vw, 34px); color: var(--orange-2); }
.pdp-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }

.option-group { margin-top: 22px; }
.option-group > span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.option-group > span em { font-style: normal; color: var(--muted); font-weight: 500; }
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; padding: 0;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: transform .16s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { border-color: var(--orange); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.qty button { width: 44px; height: 46px; background: rgba(255, 255, 255, .03); border: 0; cursor: pointer; font-size: 19px; }
.qty button:hover { background: rgba(255, 105, 0, .16); color: var(--orange-2); }
.qty input {
  width: 56px; height: 46px; min-height: 0; text-align: center;
  border: 0; border-inline: 1px solid var(--line); border-radius: 0;
  background: transparent; font-weight: 700; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { box-shadow: none; }

.buy-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.buy-row .btn { flex: 1 1 190px; }

.pdp-assurance { display: grid; gap: 10px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.pdp-assurance li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.pdp-assurance svg { width: 17px; height: 17px; color: var(--orange); flex: none; margin-top: 2px; }

.tabs { margin-top: 34px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.tablist { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line-soft); }
.tablist button {
  padding: 14px 13px; background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); white-space: nowrap;
}
.tablist button[aria-selected="true"] { color: var(--orange-2); border-bottom-color: var(--orange); }
.tabpanel { padding: 22px 2px; font-size: 14.5px; color: #b8b8b8; overflow-x: auto; }
.tabpanel ul { display: grid; gap: 9px; }
.tabpanel ul li { display: flex; gap: 10px; }
.tabpanel ul li::before { content: "▸"; color: var(--orange); flex: none; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { text-align: left; padding: 11px 4px; border-bottom: 1px solid var(--line-soft); }
.spec-table th { color: var(--dim); font-weight: 600; width: 42%; }
.spec-table td { color: #ddd; }

/* ------------------------------------------------------------------ 21. cart */
.cart-layout { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 981px) { .cart-layout { grid-template-columns: 1fr 350px; gap: 34px; } }

.cart-lines { display: grid; gap: 12px; }
.cart-line {
  display: grid; gap: 14px;
  grid-template-columns: 84px 1fr;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(255, 255, 255, .02);
}
.cart-line img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; background: #121314; }
.cart-line h3 { font-size: 15.5px; margin-bottom: 3px; }
.cart-line .variant { font-size: 12.5px; color: var(--dim); }
.cart-line .line-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 12px; }
.cart-line .line-total { font-family: var(--display); font-weight: 700; font-size: 17px; }
.remove-btn { background: none; border: 0; color: var(--dim); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 4px; }
.remove-btn:hover { color: var(--err); }
@media (min-width: 560px) { .cart-line { grid-template-columns: 108px 1fr; } .cart-line img { width: 108px; height: 108px; } }

.summary {
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, #191919, #131313);
  padding: 22px;
}
@media (min-width: 981px) { .summary { position: sticky; top: calc(var(--header-h) + 20px); } }
.summary h2 { font-size: 19px; margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14.5px; color: var(--muted); }
.summary-row b { color: var(--text); font-weight: 600; }
.summary-row.total {
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 16px;
  font-size: 18px; color: var(--text); font-weight: 700;
}
.summary-row.total b { font-family: var(--display); font-size: 24px; color: var(--orange-2); }
.summary .btn { margin-top: 18px; }
.summary .fineprint { font-size: 12px; color: var(--dim); margin-top: 12px; text-align: center; }

.promo { display: flex; gap: 8px; margin: 14px 0 4px; }
.promo input { flex: 1; }
.free-ship-note { font-size: 12.5px; color: var(--muted); background: var(--orange-dim); border: 1px solid rgba(255, 105, 0, .25); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 14px; }
.free-ship-note b { color: var(--orange-2); }

/* -------------------------------------------------------------- 22. checkout */
.checkout-steps { display: flex; gap: 6px; margin-bottom: 30px; flex-wrap: wrap; }
.checkout-steps li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--dim); }
.checkout-steps li + li::before { content: ""; width: 22px; height: 1px; background: var(--line); }
.checkout-steps .n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); font-size: 12px; font-weight: 800;
}
.checkout-steps li[aria-current="step"] { color: var(--text); }
.checkout-steps li[aria-current="step"] .n { background: var(--orange); border-color: var(--orange); color: #fff; }
.checkout-steps li.done .n { border-color: var(--ok); color: var(--ok); }

.checkout-panel { border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, .02); padding: clamp(18px, 3vw, 26px); }
.checkout-panel + .checkout-panel { margin-top: 16px; }
.checkout-panel h2 { font-size: 18px; margin-bottom: 18px; }

.pay-methods { display: grid; gap: 10px; }
.pay-method {
  display: flex; gap: 12px; align-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px;
  transition: border-color .18s ease;
}
.pay-method:has(input:checked) { border-color: var(--orange); background: var(--orange-dim); }
.pay-method input { width: 18px; height: 18px; min-height: 0; accent-color: var(--orange); flex: none; }
.pay-method > span { display: grid; gap: 2px; }
.pay-method .m-name { display: block; font-weight: 600; font-size: 14.5px; }
.pay-method .m-desc { display: block; font-size: 12.5px; color: var(--dim); }

.demo-note {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid rgba(255, 195, 92, .32); background: rgba(255, 195, 92, .09);
  border-radius: var(--r-sm); padding: 13px 15px; font-size: 13px; color: #e6cf9f;
  margin-bottom: 22px;
}
.demo-note svg { width: 18px; height: 18px; flex: none; color: var(--warn); margin-top: 1px; }

.confirmation { text-align: center; max-width: 620px; margin-inline: auto; padding: clamp(30px, 6vw, 56px) 0; }
.confirmation .tick {
  width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(78, 199, 127, .13); border: 1px solid rgba(78, 199, 127, .4); color: var(--ok);
}
.confirmation .tick svg { width: 34px; height: 34px; }
.confirm-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px;
}
.confirm-actions .btn { min-width: 190px; }
.order-ref {
  display: inline-block; margin: 18px 0 6px; padding: 10px 18px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; color: var(--orange-2);
}

/* ------------------------------------------------- 22b. order tracking & 404 */
.track-layout { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
/* A reference reads as a reference however it was typed. The lookup is
   case-insensitive either way; this is so the field looks like the thing on
   the confirmation page. */
#t-ref { text-transform: uppercase; letter-spacing: .06em; }
#t-ref::placeholder { text-transform: none; letter-spacing: 0; }
@media (min-width: 900px) { .track-layout { grid-template-columns: 1.1fr .9fr; gap: 46px; } }

.track-result { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.track-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.track-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px; font-weight: 700; color: var(--orange-2);
}
.track-total { font-size: 19px; font-weight: 700; }

/* The status strip. A done step gets a tick, the current one the accent, and
   everything after it stays dim — the point is "how far along", read at a
   glance, so the labels never move as the status changes. */
.track-steps { display: grid; gap: 0; margin: 0 0 20px; padding: 0; list-style: none; }
.track-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; font-size: 14.5px; color: var(--dim); position: relative;
}
.track-steps li .n {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--dim);
}
/* the connecting line, drawn from each step up to the one before it */
.track-steps li + li::before {
  content: ''; position: absolute; left: 13px; top: -8px; height: 16px;
  border-left: 1px solid var(--line);
}
.track-steps li.done { color: var(--muted); }
.track-steps li.done .n { border-color: rgba(78, 199, 127, .5); color: var(--ok); background: rgba(78, 199, 127, .12); }
.track-steps li.done + li::before { border-left-color: rgba(78, 199, 127, .5); }
.track-steps li.now { color: var(--text); font-weight: 700; }
.track-steps li.now .n { border-color: var(--orange); background: var(--orange); color: #fff; }

.track-cancelled {
  border: 1px solid rgba(255, 107, 107, .35); background: rgba(255, 107, 107, .09);
  border-radius: var(--r-sm); padding: 14px 16px; margin: 0 0 18px;
  font-size: 14.5px; color: #ffb3b3;
}
.track-note { font-size: 14.5px; color: var(--muted); margin: 0 0 22px; }
.track-h { font-size: 15px; margin: 0 0 10px; }
.track-items { display: grid; gap: 9px; }
.track-item {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 14.5px; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft);
}
.track-item:last-child { border-bottom: 0; }
.track-help { font-size: 13.5px; color: var(--dim); margin: 20px 0 0; }

.notfound { text-align: center; max-width: 660px; margin-inline: auto; padding: clamp(40px, 9vw, 90px) 0; }
.notfound-code {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(80px, 20vw, 160px);
  color: transparent; -webkit-text-stroke: 2px var(--line);
  margin-bottom: 10px; user-select: none;
}
.notfound-links { margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
.notfound-links h2 { font-size: 15px; margin-bottom: 14px; color: var(--muted); }
.notfound-links .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; }

/* ---------------------------------------------------------- 23. cart drawer */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s;
}
.drawer-scrim.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
  width: min(420px, 100%);
  background: #0f1011; border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.drawer-head h2 { font-size: 18px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.drawer-foot { border-top: 1px solid var(--line-soft); padding: 18px 20px; display: grid; gap: 10px; }
.drawer-empty { text-align: center; color: var(--muted); padding: 46px 10px; }
.drawer-empty .icon { font-size: 40px; margin-bottom: 12px; opacity: .7; }

.mini-line { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; }
.mini-line img { width: 62px; height: 62px; border-radius: 8px; object-fit: cover; background: #121314; }
.mini-line .t { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.mini-line .s { font-size: 12px; color: var(--dim); }
.mini-line .p { font-weight: 700; font-size: 14px; white-space: nowrap; }

/* ----------------------------------------------------- 23b. loading state */
.skeleton-block, .skeleton-line {
  background: linear-gradient(100deg, #1c1d1f 30%, #262729 50%, #1c1d1f 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
  display: block;
}
.skeleton-block { width: 100%; height: 100%; border-radius: 0; }
.skeleton-line { height: 11px; margin-bottom: 4px; }
.is-skeleton { pointer-events: none; }
.is-skeleton:hover { transform: none; border-color: rgba(255, 255, 255, .09); box-shadow: none; }
@keyframes shimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-block, .skeleton-line { animation: none; background: #1f2022; }
}

/* --------------------------------------------------------------- 24. toasts */
.toast-region {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 60; display: grid; gap: 8px; width: min(400px, calc(100% - 32px));
  pointer-events: none;
}
.toast {
  display: flex; gap: 11px; align-items: center;
  background: #17191b; border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: var(--r-sm); padding: 13px 16px;
  box-shadow: var(--shadow-lift); font-size: 14px;
  animation: toast-in .26s ease;
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
.toast svg { width: 18px; height: 18px; flex: none; color: var(--orange); }
.toast.ok svg { color: var(--ok); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }

/* ------------------------------------------------------------ 25. contact */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.15fr .85fr; gap: 46px; } }
.info-card { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; background: rgba(255, 255, 255, .02); }
.info-card + .info-card { margin-top: 14px; }
.info-card h3 { font-size: 16px; margin-bottom: 10px; }
.info-card dl { display: grid; gap: 10px; margin: 0; }
.info-card .row { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.info-card .row svg { width: 17px; height: 17px; color: var(--orange); flex: none; margin-top: 3px; }
.info-card .row b { color: var(--text); font-weight: 600; display: block; }

/* --------------------------------------------------- 26. motion / print */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover, .btn:hover { transform: none; }
}

@media print {
  .nav, .mobile-menu, .drawer, .drawer-scrim, .toast-region, footer, .hero-actions { display: none !important; }
  body { background: #fff; color: #000; }
}