/* ==========================================================================
   Driveway — design system
   Shared by the WordPress child theme and the static preview.
   Vernacular: equipment spec plates, ANSI Z535 safety decals, NEMA codes.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------ */

:root {
  /* The store is a light design. Declaring it stops the browser painting the
     canvas and form controls from a dark OS preference underneath us. */
  color-scheme: light;

  /* Surfaces: wet asphalt and poured concrete */
  --asphalt:      #1c2530;
  --asphalt-deep: #141b23;
  --asphalt-line: #2f3d4c;
  --concrete:     #e5e3de;
  --paper:        #f6f5f3;
  /* The exact field the product photographs are cut out on. The hero uses it
     so the photo has no visible edge. Re-sample this if the image set
     changes: the generated set sits on a grey studio backdrop instead. */
  --photo-field:  #f8f8f8;
  --paper-edge:   #d8d5cf;

  /* Ink */
  --ink:          #171d24;
  --ink-mid:      #5c6773;
  --ink-soft:     #8b95a1;
  --ink-invert:   #f2f4f6;
  --ink-invert-mid: #9aa8b6;

  /* Accents — signal orange carries emphasis, charge green is reserved
     strictly for electrical/charging state so it stays meaningful. */
  --signal:       #d8510b;
  --signal-lift:  #f2691f;
  --charge:       #2f9e68;
  --warn:         #b8860b;

  /* Type */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — 1.25 minor third, clamped for fluid sizing */
  --t-mega:  clamp(2.75rem, 7vw, 5.75rem);
  --t-xl:    clamp(2rem, 4.2vw, 3.25rem);
  --t-lg:    clamp(1.4rem, 2.4vw, 1.9rem);
  --t-md:    1.125rem;
  --t-base:  1rem;
  --t-sm:    0.875rem;
  --t-xs:    0.75rem;
  --t-plate: 0.6875rem;

  /* Space */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1240px;

  /* Spec plates are stamped metal: minimal radius, hard edges */
  --r-plate: 2px;
  --r-soft: 4px;
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body.driveway,
.dw {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

.dw h1, .dw h2, .dw h3, .dw h4 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.dw p { margin: 0 0 var(--s4); max-width: var(--measure); }

.dw a { color: inherit; }

/* Quality floor: always-visible keyboard focus */
.dw :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: var(--r-soft);
}

@media (prefers-reduced-motion: reduce) {
  .dw *, .dw *::before, .dw *::after {
    animation-duration: 0.001ms !important;
    /* The delay has to go too. Zeroing only the duration leaves a staggered
       entrance holding its opening frame for the length of the delay, which
       for these readers is just a blank hero for a second. */
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Layout primitives -------------------------------------------------- */

.dw-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.dw-section { padding-block: clamp(3.5rem, 9vw, 7rem); }
.dw-section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.dw-section--asphalt {
  background: var(--asphalt);
  color: var(--ink-invert);
}
.dw-section--asphalt h1,
.dw-section--asphalt h2,
.dw-section--asphalt h3 { color: var(--ink-invert); }

.dw-section--concrete { background: var(--concrete); }

/* --- Eyebrow / labels --------------------------------------------------- */
/* Labels read as stamped part markings, not decoration: each one names a
   real thing (a category, a certification, a spec group). */

.dw-label {
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s4);
}
.dw-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}
.dw-section--asphalt .dw-label { color: var(--ink-invert-mid); }

/* --- Masthead ----------------------------------------------------------- */

.dw-masthead {
  background: var(--asphalt-deep);
  color: var(--ink-invert);
  border-bottom: 1px solid var(--asphalt-line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.dw-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 64px;
}

/* --- Brand lockup in the masthead ---------------------------------------- */
/* Mark, name, descriptor. The mark's two ink bars take currentColor so the
   lockup works on the asphalt masthead and would work on paper unchanged. */

.dw-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink-invert);
}

.dw-brand__mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block;
}

.dw-brand__text {
  display: grid;
  gap: 2px;
  line-height: 1;
}

.dw-brand__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 122, "wght" 800;
  font-size: 15px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-invert);
}

/* Same monospace as the spec plates, so the identity and the catalogue match. */
.dw-brand__sub {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--ink-invert-mid);
  /* The wide tracking adds a trailing gap; pull it back so the descriptor
     optically aligns with the D above it. */
  margin-right: -0.5em;
}

.dw-brand:hover .dw-brand__sub { color: var(--ink-invert); }

@media (max-width: 420px) {
  .dw-brand { gap: 8px; }
  .dw-brand__mark { width: 22px; height: 22px; }
  .dw-brand__name { font-size: 13px; }
  .dw-brand__sub { font-size: 7px; letter-spacing: 0.42em; }
}

/* Retained for the static preview pages, which still use the old wordmark. */
.dw-wordmark {
  font-family: var(--display);
  font-variation-settings: "wdth" 125, "wght" 800;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-invert);
  white-space: nowrap;
}
/* The one flourish in the wordmark: a charge-green tick, the only place
   green appears outside electrical data. */
.dw-wordmark span { color: var(--charge); }

.dw-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--s4), 2.5vw, var(--s6));
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* wp_nav_menu emits <li> elements; strip the parent theme's list styling. */
.dw-nav ul {
  display: flex;
  align-items: center;
  gap: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dw-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dw-nav li::before,
.dw-nav li::marker { content: none; }

.dw-nav a {
  color: var(--ink-invert-mid);
  text-decoration: none;
  padding-block: var(--s2);
  border-bottom: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
/* Anchor links to sections of the homepage all get aria-current from
   WordPress, which would underline several at once. Hover is the only state
   the masthead needs. */
.dw-nav a:hover,
.dw-nav a:focus-visible {
  color: var(--ink-invert);
  border-bottom-color: var(--signal);
}

.dw-cart {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--ink-invert);
  text-decoration: none;
  border: 1px solid var(--asphalt-line);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-plate);
  white-space: nowrap;
  transition: border-color 0.18s ease;
}
.dw-cart:hover { border-color: var(--signal); }
.dw-cart__empty { color: var(--ink-invert-mid); }

/* A filled cart is worth noticing without shouting. */
.dw-cart--filled { border-color: var(--signal); }
/* Squared off, not a round pip: the design language here is stamped plates
   and hard edges. */
.dw-cart__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--r-plate);
  background: var(--signal);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
}

/* WordPress ships a 9999px radius on block buttons. Nothing uses the class
   today, but it would turn into a pill the moment a button block is added to
   a page, so it is brought onto the house style here. */
.dw .wp-block-button__link {
  border-radius: var(--r-soft);
  background-color: var(--signal);
  font-family: var(--body);
  font-weight: 500;
}
.dw-cart__total { font-variant-numeric: tabular-nums; }

/* --- Order bar ----------------------------------------------------------- */
/* Appears only once something is in the cart, and keeps checkout one click
   away from anywhere on the page. */

/* Fixed, not sticky: the markup lives at the end of the document, so sticky
   would only reveal it once the reader reached the footer. The spacer below
   reserves the same height so the bar never covers the footer. */
.dw-orderbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--asphalt-deep);
  color: var(--ink-invert);
  border-top: 1px solid var(--asphalt-line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}

.dw-orderbar__spacer { height: 68px; }

.dw-orderbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-block: var(--s3);
}

.dw-orderbar__summary {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--t-sm);
}
.dw-orderbar__summary strong { font-weight: 600; }
.dw-orderbar__total { font-variant-numeric: tabular-nums; }
.dw-orderbar__note {
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.06em;
  color: var(--ink-invert-mid);
}

.dw-orderbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.dw-orderbar__link {
  font-size: 0.875rem;
  color: var(--ink-invert-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dw-orderbar__link:hover { color: var(--ink-invert); }

@media (max-width: 620px) {
  .dw-orderbar__inner { justify-content: center; text-align: center; }
  .dw-orderbar__actions { width: 100%; justify-content: space-between; }
}

/* A quiet pointer from a product to the guide that answers the question the
   product page does not. */
.dw-guide-link {
  margin: var(--s5) 0 0;
  font-size: 0.875rem;
}
.dw-guide-link a {
  color: var(--ink-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dw-guide-link a::before { content: "Read: "; color: var(--ink-soft); }
.dw-guide-link a:hover { color: var(--signal); }

/* --- Buy row on a stage --------------------------------------------------- */

.dw-buyrow {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
}
.dw-buyrow__detail {
  font-size: 0.875rem;
  color: var(--ink-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dw-buyrow__detail:hover { color: var(--ink); }
.dw-stage--asphalt .dw-buyrow__detail { color: var(--ink-invert-mid); }
.dw-stage--asphalt .dw-buyrow__detail:hover { color: var(--ink-invert); }

/* Confirmation state after an in-place add. WooCommerce also adds .loading
   while the request is in flight. */
.dw-cta.loading { opacity: 0.7; cursor: progress; }
.dw-cta.dw-added {
  background: var(--charge);
  border-color: var(--charge);
}
.dw-cta.dw-added::after {
  content: " \2713";
}

/* WooCommerce injects its own "View cart" link after an ajax add; the order
   bar already covers that, so keep it out of the layout. */
.dw-buyrow .added_to_cart { display: none; }

@media (max-width: 720px) {
  .dw-nav { gap: var(--s4); font-size: 0.6875rem; }
  .dw-masthead__inner { flex-wrap: wrap; padding-block: var(--s3); }
}

/* --- Hero --------------------------------------------------------------- */

.dw-hero {
  background: var(--asphalt);
  color: var(--ink-invert);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}

/* Faint lane markings, angled like a driveway apron. Subtle enough to read
   as texture rather than pattern. */
.dw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    102deg,
    transparent 0 78px,
    rgba(255, 255, 255, 0.028) 78px 80px
  );
  pointer-events: none;
}

.dw-hero > * { position: relative; }

/* Storefront colours headings globally, which outranks inheriting from the
   hero, so the hero states its own colours. */
.dw-hero :where(h1, h2, h3) { color: var(--ink-invert); }
.dw-hero .dw-ruler__hint,
.dw-hero .dw-hero__sub { color: var(--ink-invert-mid); }

.dw-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(var(--s5), 5vw, var(--s8));
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
@media (max-width: 860px) {
  .dw-hero__head { grid-template-columns: 1fr; align-items: start; }
}

.dw-hero h1 {
  font-size: var(--t-mega);
  font-variation-settings: "wdth" 118, "wght" 750;
  letter-spacing: -0.03em;
  margin: 0;
}
.dw-hero h1 em {
  font-style: normal;
  color: var(--signal);
}

.dw-hero__sub {
  color: var(--ink-invert-mid);
  font-size: var(--t-md);
  max-width: 34ch;
  margin: 0;
  padding-bottom: var(--s2);
}

/* --- Age ruler — the signature element ---------------------------------- */
/* Ages are the real differentiator between these products, so the ruler is
   both the hero image and the primary navigation. */

.dw-ruler {
  border: 1px solid var(--asphalt-line);
  border-radius: var(--r-plate);
  background: rgba(0, 0, 0, 0.22);
  padding: clamp(var(--s5), 3vw, var(--s6));
}

.dw-ruler__legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.dw-ruler__legend h2 {
  font-size: var(--t-lg);
  font-variation-settings: "wdth" 108, "wght" 650;
  margin: 0;
}
.dw-ruler__hint {
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-invert-mid);
  margin: 0;
}

/* Tick scale: ages 2 through 12 */
.dw-ruler__scale {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  border-bottom: 1px solid var(--asphalt-line);
  padding-bottom: var(--s2);
  margin-bottom: var(--s4);
}
.dw-ruler__tick {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-invert-mid);
  text-align: center;
  position: relative;
  padding-top: var(--s3);
}
.dw-ruler__tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 8px;
  background: var(--asphalt-line);
}
/* Every fifth year gets a taller tick, like a real rule */
.dw-ruler__tick--major { color: var(--ink-invert); }
.dw-ruler__tick--major::before { height: 14px; background: var(--ink-invert-mid); }

.dw-ruler__bands { display: grid; gap: var(--s3); }

.dw-band {
  position: relative;
  display: block;
  height: 58px;
  text-decoration: none;
  color: inherit;
}

.dw-band__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px solid var(--signal);
  background: rgba(216, 81, 11, 0.14);
  border-radius: var(--r-plate);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-inline: var(--s4);
  overflow: hidden;
  transition: background 0.2s ease, transform 0.2s ease;
}
.dw-band:hover .dw-band__fill,
.dw-band:focus-visible .dw-band__fill {
  background: rgba(216, 81, 11, 0.3);
  transform: translateY(-2px);
}

.dw-band__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 650;
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dw-band__years {
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.1em;
  color: var(--ink-invert-mid);
  white-space: nowrap;
}

/* The unpowered product is drawn differently — a real distinction, not
   decoration: no motor means no fill, just an outline. */
.dw-band--unpowered .dw-band__fill {
  border-style: dashed;
  border-color: var(--ink-invert-mid);
  background: rgba(255, 255, 255, 0.05);
}
.dw-band--unpowered:hover .dw-band__fill {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 620px) {
  .dw-band { height: 52px; }
  .dw-band__years { display: none; }
  .dw-band__fill { padding-inline: var(--s3); }
  .dw-band__name { font-size: var(--t-xs); }
  .dw-ruler__tick { font-size: 0.625rem; }
}

/* --- Spec plate --------------------------------------------------------- */
/* A stamped equipment nameplate carrying the product's real electrical data. */

.dw-plate {
  font-family: var(--mono);
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-plate);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(0,0,0,0.03));
  padding: var(--s4);
  display: grid;
  gap: var(--s3);
}
.dw-section--asphalt .dw-plate,
.dw-plate--dark {
  border-color: var(--asphalt-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.18));
  color: var(--ink-invert);
}

.dw-plate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  font-size: var(--t-plate);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--paper-edge);
  padding-bottom: var(--s3);
}
.dw-plate--dark .dw-plate__head,
.dw-section--asphalt .dw-plate__head {
  color: var(--ink-invert-mid);
  border-bottom-color: var(--asphalt-line);
}

.dw-plate__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: var(--s4) var(--s3);
}

.dw-plate__cell dt {
  font-size: var(--t-plate);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s1);
}
.dw-plate--dark .dw-plate__cell dt,
.dw-section--asphalt .dw-plate__cell dt { color: var(--ink-invert-mid); }

.dw-plate__cell dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Electrical values get the charge colour — the reserved use */
.dw-plate__cell--electric dd { color: var(--charge); }

/* --- Product cards ------------------------------------------------------ */

.dw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s5);
}

/* auto-fit collapses empty tracks, so a lone card would stretch across the
   whole row. Spares hold their track width however few there are. */
.dw-grid--parts {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.dw-card {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.dw-card:hover { border-color: var(--ink-mid); transform: translateY(-3px); }

.dw-card__media {
  aspect-ratio: 4 / 3;
  background: var(--concrete);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--paper-edge);
  position: relative;
}
.dw-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder used until real photography is dropped in */
.dw-card__ph {
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.dw-card__body {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: 1;
}

.dw-card__age {
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}

.dw-card h3 {
  font-size: var(--t-lg);
  font-variation-settings: "wdth" 106, "wght" 650;
}

.dw-card__desc {
  color: var(--ink-mid);
  font-size: var(--t-sm);
  margin: 0;
}

/* Plates sit hard against the price row so they line up across a row of
   cards regardless of how long each description runs. */
.dw-card .dw-plate { margin-top: auto; }

.dw-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--paper-edge);
  margin-top: auto;
}

.dw-price {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.dw-price small {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-plate);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* --- Buttons ------------------------------------------------------------ */

.dw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-plate);
  border: 1px solid var(--signal);
  background: var(--signal);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.dw-btn:hover { background: var(--signal-lift); border-color: var(--signal-lift); }

.dw-btn--ghost {
  background: transparent;
  color: var(--signal);
}
.dw-btn--ghost:hover { background: var(--signal); color: #fff; }

.dw-section--asphalt .dw-btn--ghost { color: var(--signal-lift); }

.dw-btn[disabled],
.dw-btn--wait {
  background: transparent;
  border-color: var(--ink-soft);
  color: var(--ink-mid);
  cursor: default;
}

/* --- Notices ------------------------------------------------------------ */
/* Modelled on ANSI Z535 decals: a coloured bar, a stamped word, then plain
   language. Used for freight fees and safety notes — real warnings only. */

.dw-notice {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  border: 1px solid var(--paper-edge);
  border-left: 5px solid var(--warn);
  border-radius: var(--r-plate);
  background: rgba(184, 134, 11, 0.07);
  padding: var(--s4) var(--s5);
  margin-block: var(--s5);
}
.dw-notice__tag {
  font-family: var(--mono);
  font-size: var(--t-plate);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warn);
  padding-top: 2px;
  white-space: nowrap;
}
.dw-notice p { margin: 0; font-size: var(--t-sm); color: var(--ink-mid); }

.dw-notice--charge { border-left-color: var(--charge); background: rgba(47,158,104,0.07); }
.dw-notice--charge .dw-notice__tag { color: var(--charge); }

/* --- Split section (kids / car) ---------------------------------------- */

.dw-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(var(--s5), 4vw, var(--s8));
  align-items: start;
}

.dw-split__col h2 {
  font-size: var(--t-xl);
  margin-bottom: var(--s4);
}

/* --- Footer ------------------------------------------------------------- */

/* --- Premium homepage --------------------------------------------------- */
/* Restraint is the premium move: the product is large, the type is small and
   quiet, and each product gets a full stage of its own rather than competing
   in a grid. No scroll animation; the rhythm does the work. */

.dw-stage {
  min-height: 84vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: clamp(1rem, 3vw, 3rem);
  row-gap: var(--s6);
  padding-block: clamp(3rem, 8vh, 6rem);
  padding-inline: var(--gutter);
  position: relative;
}

.dw-stage--paper    { background: var(--paper); }
.dw-stage--concrete { background: var(--concrete); }
.dw-stage--asphalt  { background: var(--asphalt); color: var(--ink-invert); }
.dw-stage--asphalt :where(h2, h3) { color: var(--ink-invert); }

/* Product left, words right. Flipped on every second stage so the eye moves. */
.dw-stage__media { grid-column: 1 / 8; }
.dw-stage__copy  { grid-column: 8 / 13; }
.dw-stage--flip .dw-stage__media { grid-column: 6 / 13; order: 2; }
.dw-stage--flip .dw-stage__copy  { grid-column: 1 / 6; order: 1; }

.dw-stage__media img {
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
}

.dw-stage__index {
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: var(--s4);
}
.dw-stage--asphalt .dw-stage__index { color: var(--ink-invert-mid); }

/* Deliberately modest: roughly a third the size of the old card headings. */
.dw-stage__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 106, "wght" 620;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
}

.dw-stage__line {
  font-size: var(--t-base);
  color: var(--ink-mid);
  max-width: 34ch;
  margin: 0 0 var(--s5);
}
.dw-stage--asphalt .dw-stage__line { color: var(--ink-invert-mid); }

/* Spec data reduced to one quiet row rather than a full plate. */
.dw-stage__data {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin: 0 0 var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--paper-edge);
  font-family: var(--mono);
}
.dw-stage--asphalt .dw-stage__data { border-top-color: var(--asphalt-line); }

.dw-stage__data div { display: grid; gap: 2px; }
.dw-stage__data dt {
  font-size: var(--t-plate);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.dw-stage--asphalt .dw-stage__data dt { color: var(--ink-invert-mid); }
.dw-stage__data dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dw-stage__data .is-electric dd { color: var(--charge); }

.dw-stage__buy {
  display: flex;
  align-items: baseline;
  gap: var(--s5);
  flex-wrap: wrap;
}
.dw-stage__price {
  font-family: var(--display);
  font-variation-settings: "wdth" 104, "wght" 600;
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
}
.dw-stage__note {
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* Understated CTA, closer to a considered link than a shouting button. */
.dw-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: var(--s3) var(--s6);
  border-radius: var(--r-soft);
  border: 1px solid var(--signal);
  background: var(--signal);
  color: #fff;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.dw-cta:hover { background: var(--signal-lift); border-color: var(--signal-lift); }
.dw-cta--quiet {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
.dw-stage--asphalt .dw-cta--quiet { color: var(--ink-invert); }
.dw-cta--quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dw-stage--asphalt .dw-cta--quiet:hover { background: var(--ink-invert); color: var(--asphalt); }

@media (max-width: 880px) {
  .dw-stage {
    min-height: 0;
    grid-template-columns: 1fr;
    padding-block: var(--s8);
  }
  .dw-stage__media,
  .dw-stage__copy,
  .dw-stage--flip .dw-stage__media,
  .dw-stage--flip .dw-stage__copy { grid-column: 1 / -1; }
  .dw-stage--flip .dw-stage__media { order: 0; }
  .dw-stage--flip .dw-stage__copy  { order: 1; }
  .dw-stage__media img { max-height: 46vh; }
}

/* --- Hero, premium variant ---------------------------------------------- */
/* Product on the right, words on the left, and the age scale running full
   width along the bottom as the horizon both sit on. */

/* The product photography is cut out on white, so the hero is light: the
   product floats on the page instead of sitting in a white box on a dark one. */
.dw-hero--full {
  min-height: 94vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(2.5rem, 7vh, 4.5rem) var(--gutter) clamp(1.75rem, 4vh, 2.5rem);
  background: var(--photo-field);
  color: var(--ink);
}
.dw-hero--full::before { display: none; }

.dw-hero__words  { grid-column: 1 / 6; grid-row: 1; }
.dw-hero__object { grid-column: 6 / 13; grid-row: 1; justify-self: stretch; }
.dw-hero__scale  { grid-column: 1 / 13; grid-row: 2; }

/* Fill the column the grid actually gives it. A fixed max-width left the
   product marooned in dead space on wide screens. */
.dw-hero__object img {
  display: block;
  width: 100%;
  /* Sized from what is left after the age chooser, which has to stay above the
     fold because it is the navigation. A flat vh value pushed it off screen on
     shorter displays. The floor stops the product vanishing on laptops. */
  max-height: max(280px, calc(92vh - 392px));
  margin-inline: auto;
  object-fit: contain;
  /* The product photographs are cut out on #f8f8f8 and the page is #f6f5f3,
     so the field disappears on its own. A multiply blend would darken it into
     a visible rectangle, which is exactly what we do not want. */
  /* The photographs carry their own generous margin, so a little scale brings
     the machine up to the size of its frame without cropping anything. */
  transform: scale(1.06);
}

/* Restrained. Roughly half the size it started at, normal width, less weight. */
.dw-hero--full .dw-hero__statement {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: clamp(1.75rem, 2.8vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 19ch;
  margin: 0 0 var(--s4);
  color: var(--ink);
}

.dw-hero--full .dw-hero__support {
  color: var(--ink-mid);
  font-size: var(--t-base);
  max-width: 40ch;
  margin: 0 0 var(--s5);
}

.dw-hero--full .dw-label { color: var(--ink-soft); }

@media (max-width: 900px) {
  .dw-hero--full {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 0;
    row-gap: var(--s6);
  }
  .dw-hero__words  { grid-column: 1; grid-row: 1; }
  .dw-hero__object { grid-column: 1; grid-row: 2; justify-self: stretch; }
  .dw-hero__scale  { grid-column: 1; grid-row: 3; }
  .dw-hero__object img { max-height: 38vh; margin-inline: auto; }
}

/* --- Hero entrance -------------------------------------------------------- */
/* One orchestrated page-load sequence, not scattered effects, and nothing tied
   to scrolling or the cursor. The words settle, the product arrives, then each
   age span draws itself left to right the way a dimension is measured onto a
   drawing. Roughly a second end to end, then it is over.
   Everything is cancelled wholesale by the reduced-motion rule further up. */

@keyframes dw-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dw-arrive {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1.06); }
}
@keyframes dw-measure {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes dw-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dw-hero--full .dw-label,
.dw-hero--full .dw-hero__statement,
.dw-hero--full .dw-hero__support,
.dw-hero--full .dw-hero__words .dw-cta {
  animation: dw-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.dw-hero--full .dw-hero__statement { animation-delay: 70ms; }
.dw-hero--full .dw-hero__support   { animation-delay: 140ms; }
.dw-hero--full .dw-hero__words .dw-cta { animation-delay: 210ms; }

.dw-hero--full .dw-hero__object img {
  animation: dw-arrive 760ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 120ms;
}

.dw-hero--full .dw-scale__head,
.dw-hero--full .dw-scale__axis,
.dw-hero--full .dw-scale__unit {
  animation: dw-fade 520ms ease-out both;
  animation-delay: 380ms;
}

.dw-hero--full .dw-scale__fill {
  animation: dw-measure 560ms cubic-bezier(0.33, 1, 0.68, 1) both;
}
.dw-hero--full .dw-scale__name {
  animation: dw-fade 420ms ease-out both;
}

/* Youngest span first, so the sequence reads along the scale. */
.dw-hero--full .dw-scale__spans > :nth-child(1) .dw-scale__fill { animation-delay: 470ms; }
.dw-hero--full .dw-scale__spans > :nth-child(1) .dw-scale__name { animation-delay: 610ms; }
.dw-hero--full .dw-scale__spans > :nth-child(2) .dw-scale__fill { animation-delay: 590ms; }
.dw-hero--full .dw-scale__spans > :nth-child(2) .dw-scale__name { animation-delay: 730ms; }
.dw-hero--full .dw-scale__spans > :nth-child(3) .dw-scale__fill { animation-delay: 710ms; }
.dw-hero--full .dw-scale__spans > :nth-child(3) .dw-scale__name { animation-delay: 850ms; }
.dw-hero--full .dw-scale__spans > :nth-child(4) .dw-scale__fill { animation-delay: 830ms; }
.dw-hero--full .dw-scale__spans > :nth-child(4) .dw-scale__name { animation-delay: 970ms; }

/* --- Age scale ----------------------------------------------------------- */
/* Solid bars over a labelled axis. The earlier hairline version was too faint
   to see and too abstract to read, so weight and plain language win here over
   restraint. Each bar carries its own age range so the reader never has to
   trace a line down to the axis to work out what it means. */

.dw-scale {
  --scale-ink:  var(--ink);
  --scale-mid:  var(--ink-mid);
  --scale-line: var(--paper-edge);
}
.dw-section--asphalt .dw-scale,
.dw-hero--asphalt .dw-scale {
  --scale-ink:  var(--ink-invert);
  --scale-mid:  var(--ink-invert-mid);
  --scale-line: var(--asphalt-line);
}

.dw-scale__head { margin-bottom: var(--s4); }

.dw-scale__title {
  font-family: var(--display);
  font-variation-settings: "wdth" 104, "wght" 650;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  letter-spacing: -0.015em;
  color: var(--scale-ink);
  margin: 0 0 var(--s2);
}

.dw-scale__hint {
  font-size: 0.9375rem;
  color: var(--scale-mid);
  margin: 0;
  max-width: 60ch;
}

/* Plot area: gridlines behind, bars over them, axis beneath. */
.dw-scale__plot { position: relative; }

.dw-scale__grid {
  position: absolute;
  inset: 0 0 34px 0;
  display: grid;
  grid-template-columns: repeat(var(--dw-cols), 1fr);
  pointer-events: none;
}
/* One hairline per year, centred in its column so it lines up with the tick
   underneath. This is what ties a bar to a number. */
.dw-scale__grid span {
  position: relative;
}
.dw-scale__grid span::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--scale-line);
  opacity: 0.7;
}

.dw-scale__spans {
  position: relative;
  display: grid;
  gap: var(--s2);
  padding-bottom: var(--s3);
}

.dw-scale__span {
  position: relative;
  display: block;
  height: 46px;
  text-decoration: none;
  color: inherit;
}

/* The bar itself: a real filled block, not a line. */
.dw-scale__fill {
  position: absolute;
  inset: 0 var(--to) 0 var(--from);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-inline: var(--s4);
  border-radius: var(--r-soft);
  background: var(--concrete);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--signal);
  overflow: hidden;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.dw-scale__span:hover .dw-scale__fill,
.dw-scale__span:focus-visible .dw-scale__fill {
  background: var(--signal);
  border-color: var(--signal);
  transform: translateY(-1px);
}
.dw-scale__span:hover .dw-scale__fill :where(.dw-scale__age, .dw-scale__name, .dw-scale__note),
.dw-scale__span:focus-visible .dw-scale__fill :where(.dw-scale__age, .dw-scale__name, .dw-scale__note) {
  color: #fff;
}

/* The age range is the thing being looked up, so it leads and it is bold. */
.dw-scale__age {
  font-family: var(--display);
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: 1.0625rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.dw-scale__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dw-scale__note {
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  white-space: nowrap;
  flex-shrink: 0;
}

/* A chevron, so the bar reads as something you can open. */
.dw-scale__go {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  transform: rotate(-45deg);
  flex-shrink: 0;
}
.dw-scale__span:hover .dw-scale__go,
.dw-scale__span:focus-visible .dw-scale__go { border-color: #fff; }

/* Axis */
.dw-scale__axis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--dw-cols), 1fr);
  border-top: 1px solid var(--scale-mid);
  padding-top: var(--s2);
}
.dw-scale__tick {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--scale-mid);
}
.dw-scale__tick b {
  font-weight: 500;
  color: var(--scale-ink);
}

.dw-scale__unit {
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: var(--s2) 0 0;
  text-align: center;
}

/* Narrow screens: a proportional bar cannot hold three pieces of text, so the
   label moves above its own full-width row and the bar sits under it, still
   showing the span. Legible first, clever second. */
@media (max-width: 760px) {
  .dw-scale__span { height: auto; }
  .dw-scale__fill {
    position: static;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-soft);
  }
  .dw-scale__name { white-space: normal; }
  .dw-scale__grid { display: none; }
  .dw-scale__axis { display: none; }
  .dw-scale__unit { display: none; }
  .dw-scale__spans { padding-bottom: 0; }
}

/* --- WooCommerce pages -------------------------------------------------- */
/* Product, shop, cart and checkout come from Storefront's templates, which
   have no container of their own once the parent chrome is removed. Give them
   the same measure and gutter as the rest of the store. */

.content-area {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* WooCommerce's own buttons come from Storefront in its default black. Bring
   them onto the brand so add-to-cart matches every other action on the site. */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-plate);
  border: 1px solid var(--signal);
  background: var(--signal);
  color: #fff;
  font-weight: 500;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--signal-lift);
  border-color: var(--signal-lift);
  color: #fff;
}

/* Storefront's own pagination is unhooked in functions.php; this covers any
   theme update that puts it back. */
.storefront-product-pagination { display: none; }

/* Product photography is shot on white, which disappears against the page.
   The cards solve this with a concrete panel; the gallery gets the same. */
.woocommerce-product-gallery__image {
  background: var(--concrete);
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-soft);
  overflow: hidden;
}

/* Storefront lays its content area out with floats. Without a block
   formatting context around them the floats escape #main, and the footer's
   dark background rides up underneath the product, shop, cart and checkout
   pages. flow-root contains them; clear:both is the belt to that braces. */
#main {
  display: flow-root;
}

.dw-footer {
  clear: both;
  background: var(--asphalt-deep);
  color: var(--ink-invert-mid);
  padding-block: var(--s8) var(--s6);
  font-size: var(--t-sm);
}
.dw-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--asphalt-line);
}
.dw-footer h4 {
  font-family: var(--mono);
  font-size: var(--t-plate);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-invert);
  margin: 0 0 var(--s4);
}
.dw-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.dw-footer a { color: var(--ink-invert-mid); text-decoration: none; }
.dw-footer a:hover { color: var(--ink-invert); text-decoration: underline; }
.dw-footer__base {
  padding-top: var(--s5);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* --- Single product ----------------------------------------------------- */

.dw-product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--s5), 5vw, var(--s8));
  align-items: start;
}
@media (max-width: 900px) { .dw-product { grid-template-columns: 1fr; } }

.dw-product__media {
  aspect-ratio: 1 / 1;
  background: var(--concrete);
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-soft);
  display: grid;
  place-items: center;
  position: sticky;
  top: 88px;
}
@media (max-width: 900px) { .dw-product__media { position: static; } }

.dw-product h1 {
  font-size: var(--t-xl);
  margin-bottom: var(--s3);
}

.dw-product__price {
  font-family: var(--display);
  font-variation-settings: "wdth" 110, "wght" 700;
  font-size: 2.25rem;
  font-variant-numeric: tabular-nums;
  margin-block: var(--s4);
}

.dw-speclist { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s2); }
.dw-speclist li {
  display: flex;
  gap: var(--s3);
  font-size: var(--t-sm);
  color: var(--ink-mid);
  padding-block: var(--s2);
  border-bottom: 1px solid var(--paper-edge);
}
.dw-speclist li::before {
  content: "—";
  color: var(--signal);
  font-family: var(--mono);
  flex-shrink: 0;
}

.dw-buybox {
  border: 1px solid var(--ink);
  border-radius: var(--r-soft);
  padding: var(--s5);
  display: grid;
  gap: var(--s4);
  background: #fff;
}

/* --- Utilities ---------------------------------------------------------- */

.dw-lede { font-size: var(--t-md); color: var(--ink-mid); max-width: 58ch; }
.dw-center { margin-inline: auto; text-align: center; }
.dw-stack > * + * { margin-top: var(--s4); }

/* Prose headings need more room above than the paragraphs around them, and a
   looser line-height than display headings so a two-line heading does not
   crowd the text under it. */
.dw-stack h2 { font-size: var(--t-lg); line-height: 1.15; }
.dw-stack h3 { font-size: var(--t-md); font-variation-settings: "wdth" 104, "wght" 650; line-height: 1.2; }
.dw-stack > :where(h2, h3) + * { margin-top: var(--s4); }
.dw-stack > * + :where(h2, h3) { margin-top: var(--s7); }
.dw-stack > :first-child { margin-top: 0; }

/* Tables in prose: the guides compare age bands and voltages, so the table is
   carrying real content and needs room rather than a cramped grid. */
.dw-stack table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-block: var(--s2);
}
.dw-stack thead th,
.dw-stack tr:first-child th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-plate);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-mid);
  padding: 0 var(--s4) var(--s2) 0;
}
.dw-stack td {
  border-bottom: 1px solid var(--paper-edge);
  padding: var(--s3) var(--s4) var(--s3) 0;
  vertical-align: top;
  color: var(--ink-mid);
}
/* The first column is the key the reader scans by, so keep it on one line. */
.dw-stack td:first-child {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.dw-stack table :where(td, th):last-child { padding-right: 0; }
.dw-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dw-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--signal); color: #fff; padding: var(--s3) var(--s5);
  font-family: var(--mono); font-size: var(--t-xs);
}
.dw-skip:focus { left: var(--s4); top: var(--s4); }

/* --- Contact widget ----------------------------------------------------- */
/* Launcher and panel for live chat, WhatsApp and email. Sits on the same
   bottom-right corner as the order bar, and lifts above it when that bar is
   present (--dw-help-lift is measured and set by the widget's script). */

.dw-help {
  --dw-help-lift: 0px;
  position: fixed;
  right: var(--s4);
  bottom: calc(var(--s4) + var(--dw-help-lift));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s3);
  font-family: var(--body);
}

/* Launcher: a stamped plate, not a bubble. */
.dw-help__launch {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s4);
  border: 1px solid var(--asphalt-line);
  border-radius: var(--r-soft);
  background: var(--asphalt-deep);
  color: var(--ink-invert);
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: background 140ms ease, border-color 140ms ease;
}
.dw-help__launch:hover { background: var(--asphalt); border-color: var(--signal); }
.dw-help__launch:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.dw-help__launch .dw-help__glyph { width: 20px; height: 20px; display: block; }
.dw-help__launch-shut { display: none; }
.dw-help.is-open .dw-help__launch-open { display: none; }
.dw-help.is-open .dw-help__launch-shut { display: block; }

/* Panel */
.dw-help__panel {
  width: 340px;
  max-width: calc(100vw - (var(--s4) * 2));
  background: var(--asphalt-deep);
  border: 1px solid var(--asphalt-line);
  border-radius: var(--r-soft);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  order: -1; /* Panel above the launcher, launcher stays pinned to the corner. */
}

.dw-help__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border-bottom: 1px solid var(--asphalt-line);
}

.dw-help__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--asphalt-line);
  border-radius: var(--r-plate);
  color: var(--ink-invert);
}
.dw-help__mark svg { width: 20px; height: 20px; display: block; }

.dw-help__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dw-help__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink-invert);
  letter-spacing: -0.005em;
}
.dw-help__sub {
  font-size: var(--t-xs);
  line-height: 1.35;
  color: var(--ink-invert-mid);
}

/* The hidden attribute is only display:none in the UA sheet, so any explicit
   display below would silently outrank it and show an empty plate. Restore it
   for everything inside the widget. */
.dw-help [hidden] { display: none !important; }

/* Status plate. Hidden until Tawk reports something real. */
.dw-help__state {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 4px var(--s2);
  border: 1px solid var(--asphalt-line);
  border-radius: var(--r-plate);
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-invert-mid);
  white-space: nowrap;
}
.dw-help__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-soft);
  flex: 0 0 auto;
}
.dw-help__state[data-status="online"] { color: var(--charge); border-color: var(--charge); }
.dw-help__state[data-status="online"] .dw-help__dot { background: var(--charge); }
.dw-help__state[data-status="away"] { color: var(--warn); border-color: var(--warn); }
.dw-help__state[data-status="away"] .dw-help__dot { background: var(--warn); }

/* Rows */
.dw-help__list { list-style: none; margin: 0; padding: var(--s3); display: grid; gap: var(--s2); }

.dw-help .dw-help__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 56px;
  padding: var(--s3);
  border: 1px solid var(--asphalt-line);
  border-radius: var(--r-plate);
  background: var(--asphalt);
  color: var(--ink-invert);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  transition: border-color 140ms ease, background 140ms ease;
}
.dw-help .dw-help__row:hover { background: #202b38; border-color: var(--signal); }
.dw-help .dw-help__row:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.dw-help__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-plate);
  background: var(--asphalt-deep);
  border: 1px solid var(--asphalt-line);
  flex: 0 0 auto;
}
.dw-help__icon .dw-help__glyph { width: 19px; height: 19px; display: block; }
.dw-help__icon--chat { color: var(--signal); }
.dw-help__icon--wa   { color: var(--charge); }
.dw-help__icon--mail { color: var(--ink-invert-mid); }

.dw-help__copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dw-help .dw-help__label {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink-invert);
}
.dw-help .dw-help__meta {
  font-family: var(--mono);
  font-size: var(--t-plate);
  color: var(--ink-invert-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dw-help__row > .dw-help__glyph {
  width: 16px;
  height: 16px;
  color: var(--signal);
  flex: 0 0 auto;
}

.dw-help__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--asphalt-line);
  font-size: var(--t-plate);
  font-family: var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-invert-mid);
}
.dw-help__foot-brand { color: var(--signal); }

@media (max-width: 480px) {
  .dw-help { left: var(--s4); align-items: stretch; }
  .dw-help__panel { width: auto; }
  .dw-help__launch { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .dw-help__launch,
  .dw-help__row { transition: none; }
}

/* Trading address in the footer base. The <address> element is italic by
   default in every browser, which reads as an aside rather than a fact. */
.dw-footer__addr {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-plate);
  letter-spacing: 0.04em;
}

/* home-copy:start */
/* Homepage category copy. Generated by CLAUDE/homecopy/build.py. */
.dw-copy__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(var(--s5),5vw,var(--s8));align-items:start}
.dw-copy__title{font-size:var(--t-xl);margin:0;max-width:18ch}
.dw-copy__body p{margin:0 0 var(--s4);color:var(--ink-mid);font-size:var(--t-md);line-height:1.7;max-width:62ch}
.dw-copy__body p:last-child{margin-bottom:0}
.dw-copy__body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px}
.dw-copy__body a:hover,.dw-copy__body a:focus-visible{color:var(--signal)}
.dw-section--asphalt .dw-copy__body p{color:var(--ink-invert-mid)}
.dw-section--asphalt .dw-copy__body a{color:var(--ink-invert);text-decoration-color:var(--signal-lift)}
.dw-copy--b{border-top:1px solid var(--paper-edge)}
@media(max-width:860px){.dw-copy__grid{grid-template-columns:1fr}}
/* home-copy:end */