/* RebarGuns — design tokens ported from the Lovable "rebargun-glow-up" theme.
   Tailwind utilities were resolved to plain CSS so the site is a dependency-free
   static build (the IONOS webspace serves static files and PHP only). */

:root {
  --graphite: oklch(0.205 0 0);
  --steel: oklch(0.6 0.015 190);
  --offwhite: oklch(0.97 0.012 82);
  --red: oklch(0.56 0.215 27);
  --radius: 0.5rem;
  --head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wrap: 80rem;
  color-scheme: light;
}

* { box-sizing: border-box; border-color: color-mix(in oklch, var(--graphite) 10%, transparent); }

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--graphite);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -0.015em; margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } }

.dark { background: var(--graphite); color: var(--offwhite); }
.eyebrow {
  font-size: 0.6875rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.25em; color: var(--red); margin: 0;
}
.muted { color: var(--steel); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--graphite); color: var(--offwhite); }
.site-header .wrap { display: flex; height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; }
/* padding-block enlarges the touch target to ~44px without moving anything */
.brand { font-family: var(--head); font-size: 1.125rem; font-weight: 600; text-decoration: none; display: inline-block; padding-block: 0.7rem; }
.brand span { color: var(--red); }
.site-nav { display: none; gap: 2.25rem; font-size: 0.875rem; color: var(--steel); }
.site-nav a { text-decoration: none; transition: color 0.2s; }
.site-nav a:hover { color: var(--offwhite); }
@media (min-width: 768px) { .site-nav { display: flex; align-items: center; } }

/* The nav is hidden below 768px, so without this button a phone has no way
   to reach Products, Tie Wire or Account at all — the header is only a logo
   and a cart. The button is injected by cart.js and hidden on desktop. */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; margin-left: auto;
  background: none; border: 0; border-radius: var(--radius);
  color: inherit; cursor: pointer;
}
.nav-toggle:hover { background: color-mix(in oklch, var(--offwhite) 10%, transparent); }
.nav-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
/* 37px tall was below a comfortable thumb target on a phone. */
@media (max-width: 767.98px) { .cart-link { min-height: 2.75rem; } }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (min-width: 768px) { .nav-toggle { display: none; } }

@media (max-width: 767.98px) {
  /* .site-header is sticky, so it is already a positioning context and the
     panel can span the full width rather than the padded .wrap. */
  .site-nav.is-open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--graphite);
    padding-bottom: 0.5rem;
    box-shadow: 0 14px 28px rgb(0 0 0 / 0.28);
  }
  .site-nav.is-open a {
    padding: 0.95rem 1.25rem; font-size: 1rem; color: var(--offwhite);
    border-top: 1px solid color-mix(in oklch, var(--offwhite) 14%, transparent);
  }
  .site-nav.is-open a:active { background: color-mix(in oklch, var(--offwhite) 10%, transparent); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--radius); padding: 0.75rem 1.25rem;
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: opacity 0.2s, background-color 0.2s;
}
.btn-red { background: var(--red); color: var(--offwhite); }
.btn-red:hover { opacity: 0.9; }
.btn-ghost { border-color: color-mix(in oklch, var(--offwhite) 20%, transparent); padding: 0.5rem 1rem; font-weight: 500; }
.btn-ghost:hover { background: color-mix(in oklch, var(--offwhite) 10%, transparent); }
.btn-outline { border-color: color-mix(in oklch, var(--graphite) 15%, transparent); font-weight: 500; }
.btn-outline:hover { background: color-mix(in oklch, var(--graphite) 4%, transparent); }
.btn-block { width: 100%; justify-content: space-between; }

/* The header is sticky at 4.5rem, so in-page anchors must clear it or the
   target heading lands underneath. */
section[id] { scroll-margin-top: 5.5rem; }
.icon { width: 1rem; height: 1rem; flex: none; }

/* ---------- hero ---------- */
.hero .wrap { display: grid; gap: 3rem; align-items: center; padding-block: 3.5rem; }
@media (min-width: 1024px) {
  .hero .wrap { grid-template-columns: 5fr 7fr; padding-block: 6rem; }
}
.hero h1 { margin-top: 1.5rem; font-size: clamp(2.5rem, 6vw, 3.75rem); line-height: 0.98; max-width: 36rem; }
.hero p.lede { margin-top: 1.5rem; max-width: 30rem; font-size: 1.0625rem; line-height: 1.7; color: var(--steel); }
.hero .btn { margin-top: 2.25rem; }
/* height:auto is required: the width/height HTML attributes (kept to reserve
   layout space and prevent shift) apply as presentational styles, and without
   this they override the aspect-ratio and stretch the image. */
.hero-img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); }
.stat-row { margin-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.stat-card {
  border-radius: var(--radius); padding: 1rem;
  border: 1px solid color-mix(in oklch, var(--offwhite) 12%, transparent);
  background: color-mix(in oklch, var(--offwhite) 6%, transparent);
}
.stat-card b { font-family: var(--head); font-size: clamp(1.05rem, 2.2vw, 1.5rem); font-weight: 600; display: block; }
.stat-card small { display: block; margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.3; color: var(--steel); }

/* ---------- measured band ---------- */
.band .wrap { display: grid; gap: 1.75rem; padding-block: 3rem; align-items: center; }
@media (min-width: 768px) { .band .wrap { grid-template-columns: 1.25fr 2fr; } }
.band h2 { font-size: clamp(1.6rem, 3vw, 1.875rem); line-height: 1.2; }
.band-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (min-width: 640px) { .band-figures { gap: 2rem; } }
.band-figures b { font-family: var(--head); font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 600; display: block; }
.band-figures b.accent { color: var(--red); }
.band-figures p { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.35; color: var(--steel); }

/* ---------- split (wire) ---------- */
.split .wrap { display: grid; gap: 3rem; align-items: center; padding-block: 4rem; }
@media (min-width: 1024px) { .split .wrap { grid-template-columns: 1fr 1fr; padding-block: 5rem; } }
.split-img { aspect-ratio: 5 / 4; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); }
.split h2 { margin-top: 1.25rem; font-size: clamp(1.9rem, 4vw, 2.25rem); line-height: 1.08; max-width: 32rem; }
.split p.lede { margin-top: 1.5rem; max-width: 36rem; line-height: 1.7; color: var(--steel); }
.ticks { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; font-size: 0.875rem; }
.ticks li { display: flex; gap: 0.75rem; align-items: flex-start; }
.ticks .icon { color: var(--red); margin-top: 0.15rem; }

/* wire product mini-cards */
.wire-cards { margin-top: 2.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .wire-cards { grid-template-columns: 1fr 1fr; } }
.wire-card {
  display: flex; gap: 1rem; align-items: center; text-decoration: none;
  border-radius: var(--radius); padding: 0.875rem;
  border: 1px solid color-mix(in oklch, var(--offwhite) 12%, transparent);
  background: color-mix(in oklch, var(--offwhite) 5%, transparent);
  transition: background-color 0.2s;
}
.wire-card:hover { background: color-mix(in oklch, var(--offwhite) 10%, transparent); }
.wire-card img { width: 4rem; height: 4rem; object-fit: contain; flex: none; }
.wire-card h3 { font-size: 0.9375rem; }
.wire-card .price { font-family: var(--head); font-size: 0.875rem; color: var(--red); margin-top: 0.2rem; display: block; }
.wire-card small { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--steel); }

/* ---------- products ---------- */
.products .wrap { padding-block: 4rem; }
@media (min-width: 1024px) { .products .wrap { padding-block: 5rem; } }
.section-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
@media (min-width: 640px) { .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.section-head h2 { margin-top: 1rem; font-size: clamp(1.9rem, 4vw, 2.25rem); }
.link-underline { font-size: 0.875rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 8px; display: inline-block; padding-block: 0.8rem; }
.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius); padding: 1.25rem; background: var(--offwhite);
  border: 1px solid color-mix(in oklch, var(--graphite) 10%, transparent);
}
.card.featured { border-color: var(--red); }
.flag {
  position: absolute; left: 0.75rem; top: 0.75rem; z-index: 1;
  border-radius: 4px; background: var(--red); color: var(--offwhite);
  padding: 0.25rem 0.5rem; font-size: 0.625rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.15em;
}
/* The image is absolutely positioned, which is the whole point: an out-of-flow
   child cannot contribute to its container's height, so the container's size
   depends only on aspect-ratio and can never be pushed around by the image.
   Earlier attempts kept the image in flow and constrained it with percentage
   height / max-height. Chromium resolved those against the aspect-ratio height,
   but Safari does not resolve a percentage max-height against a parent sized by
   aspect-ratio — it dropped the constraint, laid the image out at its intrinsic
   ~1330px, and the box grew to contain it. */
.card-media {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklch, var(--steel) 12%, transparent);
  overflow: hidden; /* clip the hover scale instead of letting it spill */
}
.card-media img {
  position: absolute;
  top: 1.25rem; left: 1.25rem;
  width: calc(100% - 2.5rem);
  height: calc(100% - 2.5rem);
  object-fit: contain;
}
/* No transform on the image on hover, deliberately. The scale-on-hover effect
   is what surfaced the Safari sizing bug, and it is decoration — the card
   signals hover with color instead, which cannot affect layout in any engine. */
.card { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.card:hover {
  border-color: color-mix(in oklch, var(--red) 45%, transparent);
  box-shadow: 0 6px 20px color-mix(in oklch, var(--graphite) 10%, transparent);
}
.card-head { margin-top: 1.25rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.card-head h3 { font-size: 1.25rem; }
.card-head .range { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--steel); }
.card-head .price { font-family: var(--head); font-size: 1.125rem; font-weight: 600; white-space: nowrap; }
.card > p.detail { margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.65; color: var(--steel); }
.specs { margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid color-mix(in oklch, var(--graphite) 10%, transparent); display: grid; gap: 0.4rem; font-size: 0.8125rem; }
.specs div { display: flex; justify-content: space-between; gap: 1rem; }
.specs dt { color: var(--steel); }
.specs dd { margin: 0; text-align: right; font-weight: 500; }
.card .btn { margin-top: 1.25rem; }
.note { margin: 0.75rem 0 0; font-size: 0.6875rem; color: var(--steel); }

/* ---------- benefits ---------- */
.benefits { background: color-mix(in oklch, var(--steel) 12%, var(--offwhite)); }
.benefits .wrap { padding-block: 4rem; }
@media (min-width: 1024px) { .benefits .wrap { padding-block: 5rem; } }
.benefits h2 { max-width: 32rem; margin-bottom: 2.5rem; font-size: clamp(1.9rem, 4vw, 2.25rem); }
.tiles {
  display: grid; gap: 1px; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--graphite) 10%, transparent);
  background: color-mix(in oklch, var(--graphite) 10%, transparent);
}
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { background: var(--offwhite); padding: 1.75rem; }
.tile h3 { font-size: 1.25rem; color: var(--red); }
.tile p { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.65; color: var(--steel); }

/* ---------- cta + footer ---------- */
.cta { text-align: center; }
.cta .wrap { max-width: 48rem; padding-block: 5rem; }
.cta h2 { font-size: clamp(2rem, 5vw, 3rem); }
.cta p { margin: 1.5rem auto 0; max-width: 36rem; color: var(--steel); line-height: 1.7; }
.cta .btn { margin-top: 2.25rem; }

.site-footer { border-top: 1px solid color-mix(in oklch, var(--offwhite) 10%, transparent); }
.site-footer .wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding-block: 2.25rem; text-align: center;
}
@media (min-width: 640px) { .site-footer .wrap { flex-direction: row; justify-content: space-between; text-align: left; } }
.site-footer p { margin: 0; font-size: 0.75rem; color: var(--steel); }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 700ms cubic-bezier(.2,.7,.2,1) both; }
  .reveal-delay { animation-delay: 150ms; }
}
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Staging ribbon — remove at go-live. See docs/GO_LIVE_CHECKLIST.md */
.staging-flag {
  background: var(--red); color: var(--offwhite); text-align: center;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.4rem 1rem;
}

/* ============================================================
   Shop pages — products, cart, checkout
   ============================================================ */

/* cart badge in the header */
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; }
.cart-badge {
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--red); color: var(--offwhite);
  font-size: 0.6875rem; font-weight: 600; line-height: 1.25rem; text-align: center;
}

/* page banner */
.page-head { background: var(--graphite); color: var(--offwhite); }
.page-head .wrap { padding-block: 3rem 2.5rem; }
.page-head h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-top: 0.75rem; }
.page-head p { margin: 1rem 0 0; max-width: 42rem; color: var(--steel); line-height: 1.7; }
.crumbs { font-size: 0.75rem; color: var(--steel); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--offwhite); text-decoration: underline; }

.section-pad { padding-block: 3.5rem; }
.grid-products { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

/* documents on a product card */
.docs { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid color-mix(in oklch, var(--graphite) 10%, transparent); }
.docs h4 { margin: 0 0 0.6rem; font-family: var(--head); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel); }
.doc-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.doc-links a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid color-mix(in oklch, var(--graphite) 15%, transparent);
  border-radius: 999px; padding: 0.4rem 0.7rem; font-size: 0.75rem; text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.doc-links a:hover { background: color-mix(in oklch, var(--red) 8%, transparent); border-color: var(--red); }
.doc-links .icon { width: 0.85rem; height: 0.85rem; color: var(--red); }

.card-actions { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.btn.is-added { background: oklch(0.62 0.15 150); border-color: transparent; color: var(--offwhite); }
.price-tba { font-family: var(--head); font-size: 0.9375rem; font-weight: 600; color: var(--steel); }

/* two-column shop layout */
.shop-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .shop-layout { grid-template-columns: 1.9fr 1fr; gap: 2.5rem; } }

/* cart table */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  text-align: left; font-family: var(--head); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel);
  padding: 0 0 0.75rem; border-bottom: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent);
}
.cart-table th.num, .cart-table td.num { text-align: right; }
/* Price is right-aligned and Quantity is left-aligned, so without a gutter the
   two headings run together and read as one word: "PRICEQUANTITY". */
.cart-table th + th, .cart-table td + td { padding-left: 1.25rem; }
.cart-table td { padding: 1.1rem 0; border-bottom: 1px solid color-mix(in oklch, var(--graphite) 10%, transparent); vertical-align: middle; }
.cart-item { display: flex; align-items: center; gap: 1rem; }
.cart-item img {
  width: 4.5rem; height: 4.5rem; object-fit: contain; flex: none;
  border-radius: var(--radius); padding: 0.4rem;
  background: color-mix(in oklch, var(--steel) 12%, transparent);
}
.cart-item h3 { font-size: 1rem; }

/* Four columns do not fit a phone: the table forced the page 65px wider than
   the viewport and pushed the Total column off-screen entirely. Below 40rem
   each row becomes a block, with the column headings restated inline so a
   price is never an unlabelled number. */
@media (max-width: 40rem) {
  .cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: auto; }
  .cart-table tr {
    padding: 1.1rem 0;
    border-bottom: 1px solid color-mix(in oklch, var(--graphite) 10%, transparent);
  }
  .cart-table td, .cart-table td + td { padding: 0; border: 0; }
  .cart-table td + td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin-top: 0.6rem; font-size: 0.875rem; padding-left: 0;
  }
  /* data-label is set in the cart markup so the value keeps its meaning. */
  .cart-table td + td::before {
    content: attr(data-label);
    color: var(--steel); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  }
  .cart-table td.num { text-align: right; }
  .cart-table .qty-pick { margin-left: auto; }
}
.cart-item .meta { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--steel); }
.link-remove { background: none; border: 0; padding: 0; margin-top: 0.35rem; font: inherit; font-size: 0.75rem; color: var(--steel); cursor: pointer; text-decoration: underline; }
.link-remove:hover { color: var(--red); }

.qty { display: inline-flex; align-items: center; border: 1px solid color-mix(in oklch, var(--graphite) 15%, transparent); border-radius: var(--radius); overflow: hidden; }
.qty button {
  width: 2.25rem; height: 2.25rem; border: 0; background: transparent;
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; color: inherit;
}
.qty button:hover { background: color-mix(in oklch, var(--graphite) 6%, transparent); }
.qty input {
  width: 2.75rem; height: 2.25rem; border: 0; text-align: center; font: inherit; font-size: 0.875rem;
  background: transparent; color: inherit; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* summary panel */
.panel {
  border: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent);
  border-radius: var(--radius); padding: 1.5rem; background: var(--offwhite);
}
@media (min-width: 900px) { .panel.sticky { position: sticky; top: 6rem; } }
.panel h2 { font-size: 1.125rem; margin-bottom: 1.25rem; }
.sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; font-size: 0.875rem; }
.sum-row .muted { color: var(--steel); }
.sum-total {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent);
  font-family: var(--head); font-size: 1.25rem; font-weight: 600;
}
.panel .btn { margin-top: 1.25rem; }
.panel .fineprint { margin: 0.85rem 0 0; font-size: 0.6875rem; line-height: 1.5; color: var(--steel); }

/* empty state */
.empty { text-align: center; padding: 4rem 1rem; }
.empty h2 { font-size: 1.375rem; }
.empty p { margin: 0.75rem auto 1.75rem; max-width: 24rem; color: var(--steel); }

/* forms */
.field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.field label { font-size: 0.8125rem; font-weight: 500; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.9375rem; padding: 0.65rem 0.8rem; color: inherit;
  border: 1px solid color-mix(in oklch, var(--graphite) 18%, transparent);
  border-radius: var(--radius); background: var(--offwhite); width: 100%;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
legend { padding: 0; margin-bottom: 1rem; font-family: var(--head); font-size: 1.0625rem; font-weight: 600; }

.notice {
  border-radius: var(--radius); padding: 1rem 1.1rem; font-size: 0.8125rem; line-height: 1.6;
  border: 1px solid color-mix(in oklch, var(--red) 35%, transparent);
  background: color-mix(in oklch, var(--red) 7%, transparent);
}
.notice strong { display: block; margin-bottom: 0.25rem; font-family: var(--head); }

.confirm { text-align: center; padding: 3.5rem 1rem; }
.confirm .tick {
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1.5rem; border-radius: 999px;
  display: grid; place-items: center; color: var(--offwhite);
  background: oklch(0.62 0.15 150);
}
.confirm h2 { font-size: 1.75rem; }
.confirm p { margin: 1rem auto 0; max-width: 30rem; color: var(--steel); line-height: 1.7; }
.order-ref { font-family: var(--head); font-weight: 600; color: var(--graphite); }

/* ---------- product detail ---------- */
.detail-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 860px) { .detail-layout { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.detail-media { max-width: 32rem; }
.detail-info .detail-price { font-family: var(--head); font-size: 2rem; font-weight: 600; margin: 0; }
.detail-info .ship-note { margin: 0.4rem 0 1.5rem; font-size: 0.8125rem; color: var(--steel); }
.detail-desc { margin: 0 0 1.75rem; line-height: 1.75; color: var(--steel); }
.detail-info .btn-block { max-width: 22rem; }
.detail-specs { margin-top: 3.5rem; }
.detail-specs h2 { font-size: 1.375rem; margin-bottom: 1.25rem; }
.spec-table { max-width: 34rem; border-top: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent); padding-top: 0.75rem; }
.spec-table div { padding: 0.55rem 0; border-bottom: 1px solid color-mix(in oklch, var(--graphite) 8%, transparent); }



/* admin section navigation */
.admin-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .admin-layout { grid-template-columns: 13rem 1fr; gap: 2.5rem; } }
.admin-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; }
@media (min-width: 900px) {
  .admin-nav { display: block; position: sticky; top: 1.5rem; }
}
.admin-nav-head {
  margin: 0 0 0.4rem; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--steel); width: 100%;
}
.admin-nav-head + a { margin-top: 0; }
.admin-nav-head:not(:first-child) { margin-top: 1.5rem; }
.admin-nav a {
  display: block; padding: 0.5rem 0.75rem; margin-bottom: 0.15rem;
  border-radius: var(--radius); text-decoration: none;
  font-size: 0.875rem; font-weight: 500; color: var(--steel);
  border-left: 2px solid transparent;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.admin-nav a:hover { color: var(--graphite); background: color-mix(in oklch, var(--graphite) 4%, transparent); }
.admin-nav a.is-active {
  color: var(--graphite); border-left-color: var(--red);
  background: color-mix(in oklch, var(--red) 6%, transparent);
}
.admin-nav a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
#admin-pane > .panel { margin: 0; max-width: 40rem; }
#admin-pane .rule { margin: 1.75rem 0 1.25rem; }

/* admin dashboard */
.stat-grid {
  display: grid; gap: 1rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.stat-tile {
  border: 1px solid color-mix(in oklch, var(--graphite) 10%, transparent);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; background: #fff;
}
.stat-label {
  margin: 0 0 0.4rem; font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--steel);
}
.stat-value { margin: 0; font-family: var(--head); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.stat-note { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--steel); line-height: 1.45; }

.dash-warnings { display: grid; gap: 0.6rem; margin-bottom: 2rem; }
.dash-warnings .notice { margin: 0; }
.dash-warnings a { color: var(--red); font-weight: 500; }

.dash-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.dash-card {
  border: 1px solid color-mix(in oklch, var(--graphite) 10%, transparent);
  border-radius: var(--radius); padding: 1.25rem; background: #fff;
}
.dash-card h3 { font-size: 1rem; margin: 0 0 0.9rem; }
.dash-card .admin-table td { padding: 0.6rem 0; }
.dash-card .muted { font-size: 0.8125rem; margin: 0; }

/* Wide tables scroll inside their card rather than the page. */
.table-scroll { overflow-x: auto; }

/* Paired form fields, single column until there is room for two. */
.two-up { display: grid; gap: 0 1rem; }
@media (min-width: 32rem) { .two-up { grid-template-columns: 1fr 1fr; } }
#user-form { max-width: 42rem; }
.copy-line {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0; padding: 0.6rem 0.75rem; border-radius: var(--radius);
  background: color-mix(in oklch, var(--graphite) 5%, transparent);
}
.copy-line code { font-size: 0.8125rem; word-break: break-all; }
.clear-secret {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 0.4rem; font-size: 0.75rem; color: var(--steel); cursor: pointer;
}
/* .field input is width:100%, which stretched this checkbox across the row and
   pushed its label off to the right. Opt out for checkboxes specifically. */
.clear-secret input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; padding: 0; }

/* The reCAPTCHA badge is fixed to the bottom-right and on a 375px screen it
   hangs off the viewport and sits on top of buttons. Google permits hiding it
   as long as the attribution is shown instead, which cart.js adds to the
   footer whenever reCAPTCHA is actually active. */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note { margin-top: 0.75rem; font-size: 0.6875rem; color: var(--steel); }
.recaptcha-note a { color: inherit; }
#user-form-slot:not(:empty) { margin-bottom: 1.5rem; }
.row-link { cursor: pointer; }
.row-link:hover { background: color-mix(in oklch, var(--red) 4%, transparent); }

/* footer links + policy page prose */
.footer-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin-top: 1rem; }
.footer-links a {
  font-size: 0.8125rem; color: color-mix(in oklch, var(--offwhite) 70%, transparent);
  text-decoration: none; padding-block: 0.35rem;
}
.footer-links a:hover { color: var(--offwhite); text-decoration: underline; }

/* Inquiry text is whatever the customer typed: preserve their line breaks,
   and break long unbroken strings rather than letting them widen the card. */
.msg-body {
  white-space: pre-wrap; overflow-wrap: anywhere;
  margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.6;
}

.prose { max-width: 44rem; }
.prose h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 0.9375rem; line-height: 1.7; margin: 0 0 1rem; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.5rem; }
/* :not(.btn) matters — without it this rule wins on specificity over
   .btn-red's white text and paints red text on a red button. */
.prose a:not(.btn) { color: var(--red); }
.prose code {
  font-size: 0.875em; padding: 0.1em 0.35em; border-radius: 4px;
  background: color-mix(in oklch, var(--graphite) 7%, transparent);
}

/* skip link + consent banner */
.skip-link {
  position: absolute; left: 0.75rem; top: -3rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: var(--radius);
  background: var(--graphite); color: var(--offwhite);
  font-size: 0.875rem; text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 0.75rem; }
[role="main"]:focus { outline: none; }

.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; padding: 1rem 1.25rem;
  background: var(--graphite); color: var(--offwhite);
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.2);
}
.consent p { margin: 0; font-size: 0.8125rem; line-height: 1.5; max-width: 46rem; }
.consent a { color: var(--offwhite); }
.consent-actions { display: flex; gap: 0.5rem; flex: none; }
.consent .btn { padding-block: 0.55rem; }
.consent .btn-outline { color: var(--offwhite); border-color: color-mix(in oklch, var(--offwhite) 40%, transparent); }
@media (max-width: 40rem) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: stretch; }
  .consent-actions .btn { flex: 1; justify-content: center; }
}
/* product detail tabs */
.detail-tabs { margin-top: 3.5rem; }
.tab-strip {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  border-bottom: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent);
}
.tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--head); font-size: 0.9375rem; font-weight: 500; color: var(--steel);
  padding: 0.7rem 1rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.tab:hover { color: var(--graphite); }
.tab.is-active { color: var(--graphite); border-bottom-color: var(--red); }
.tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: var(--radius); }
.tab-panel { padding-top: 1.5rem; }
/* Prose stays at a readable measure; the tables span the page. */
.tab-list, .tab-intro, .tab-note { max-width: 46rem; }
/* The strip already names the panel on screen. */
.tab-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tab-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.tab-list li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; line-height: 1.55; }
.tab-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--red);
}
.tab-intro, .tab-note { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.6; }
.tab-note { margin: 1.25rem 0 0; color: var(--steel); font-size: 0.8125rem; }
.tab-panel .spec-table { margin-top: 0; max-width: none; width: 100%; }
.wire-list div { align-items: baseline; }
.wire-list dt { font-weight: 600; color: var(--graphite); white-space: nowrap; }
.wire-list dd { font-weight: 400; color: var(--steel); }
@media (max-width: 32rem) {
  .tab { padding-inline: 0.6rem; font-size: 0.875rem; }
  .wire-list div { display: grid; gap: 0.15rem; }
  .wire-list dd { text-align: left; }
}
.related { margin-top: 3.5rem; }
.related h2 { font-size: 1.375rem; margin-bottom: 1.25rem; }
/* 10rem + gap needed 336px and the content box is 335px, so a phone showed a
   single column and four full-height cards. 8.5rem fits two. */
.rel-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.rel-card {
  display: grid; gap: 0.6rem; justify-items: center; text-align: center; text-decoration: none;
  border: 1px solid color-mix(in oklch, var(--graphite) 10%, transparent);
  border-radius: var(--radius); padding: 1rem; font-size: 0.8125rem; font-weight: 500;
  transition: border-color 0.2s, background-color 0.2s;
}
.rel-card:hover { border-color: var(--red); background: color-mix(in oklch, var(--red) 4%, transparent); }
.rel-card img { width: 5rem; height: 5rem; object-fit: contain; }

/* ---------- accounts ---------- */
.auth-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 800px) { .auth-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.auth-grid .panel h2 { margin-bottom: 1.25rem; }
.auth-grid .fineprint { display: block; margin-top: 0.3rem; font-size: 0.6875rem; color: var(--steel); }

.orders { display: grid; gap: 0.75rem; }
.order-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.order-row .meta { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--steel); }
.badge-status {
  display: inline-block; margin-left: 0.5rem; border-radius: 999px;
  padding: 0.15rem 0.5rem; font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: color-mix(in oklch, var(--red) 12%, transparent); color: var(--red);
}
.gate { max-width: 34rem; }
.gate .btn { margin-top: 0.5rem; }

/* ---------- admin ---------- */
.admin-order {
  border: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent);
  border-radius: var(--radius); padding: 1.1rem; margin-bottom: 0.75rem;
}
.admin-order-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.admin-order .meta { margin: 0.45rem 0 0; font-size: 0.75rem; color: var(--steel); }
.admin-order-actions { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.6rem; }
.admin-order-actions select {
  font: inherit; font-size: 0.8125rem; padding: 0.35rem 0.5rem;
  border: 1px solid color-mix(in oklch, var(--graphite) 18%, transparent);
  border-radius: var(--radius); background: var(--offwhite); color: inherit;
}
.badge-guest {
  display: inline-block; margin-left: 0.4rem; border-radius: 999px;
  padding: 0.15rem 0.5rem; font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: color-mix(in oklch, var(--steel) 22%, transparent); color: var(--graphite);
}
.rule { border: 0; border-top: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent); margin: 1.5rem 0; }
.toggle-row { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1.1rem; }
.toggle-row strong { font-family: var(--head); font-size: 0.9375rem; }
.toggle-row .fineprint { margin: 0.2rem 0 0; }
.switch { position: relative; flex: none; width: 2.6rem; height: 1.5rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span {
  position: absolute; inset: 0; border-radius: 999px;
  background: color-mix(in oklch, var(--graphite) 22%, transparent); transition: background-color 0.2s;
}
.switch span::after {
  content: ''; position: absolute; top: 0.18rem; left: 0.2rem;
  width: 1.14rem; height: 1.14rem; border-radius: 999px; background: var(--offwhite);
  transition: transform 0.2s;
}
.switch input:checked + span { background: var(--red); }
.switch input:checked + span::after { transform: translateX(1.05rem); }
.switch input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
#settings-msg { min-height: 1.2em; margin-top: 0.75rem; }
.panel code { font-size: 0.7rem; word-break: break-all; background: color-mix(in oklch, var(--graphite) 6%, transparent); padding: 0.15rem 0.3rem; border-radius: 4px; }

/* Google button */
.btn-google { background: #fff; color: #1f1f1f; border-color: #dadce0; justify-content: center; }
.btn-google:hover { background: #f7f8f8; }
.or-rule { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--steel); font-size: 0.75rem; }
.or-rule::before, .or-rule::after { content: ''; flex: 1; height: 1px; background: color-mix(in oklch, var(--graphite) 12%, transparent); }

/* ---------- field validation ---------- */
.field-error { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--red); }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--red); }
.field.has-error input:focus-visible,
.field.has-error select:focus-visible,
.field.has-error textarea:focus-visible { outline-color: var(--red); }
.nav-admin { color: var(--red) !important; font-weight: 600; }

/* ---------- order detail ---------- */
.detail-cols { display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 700px) { .detail-cols { grid-template-columns: 1fr 1fr; } }
.detail-cols h2 { font-size: 1.0625rem; margin-bottom: 0.75rem; }
.detail-cols .sum-row { padding: 0.4rem 0; border-bottom: 1px solid color-mix(in oklch, var(--graphite) 8%, transparent); }
.order-row a.view-order, .admin-order a.view-order { font-size: 0.75rem; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- stock + quantity ---------- */
.stock { margin: 0.6rem 0 0; font-size: 0.8125rem; font-weight: 500; }
.stock.ok   { color: oklch(0.55 0.13 150); }
.stock.low  { color: oklch(0.62 0.16 60); }
.stock.out  { color: var(--red); }
.buy-row { display: flex; gap: 0.6rem; align-items: stretch; margin-top: 1rem; }
.buy-row .btn { flex: 1; justify-content: center; }
.qty-pick { flex: none; }
.qty-pick input { width: 2.5rem; }
a.plain { text-decoration: none; }
a.plain:hover { text-decoration: underline; text-underline-offset: 3px; }
a.card-media { display: block; }
.admin-table th, .admin-table td { font-size: 0.8125rem; }
.admin-table .meta { margin: 0.25rem 0 0; font-size: 0.6875rem; color: var(--steel); }
.catalog { margin-top: 1rem; }

/* ---------- admin image picker ---------- */
.image-picker { display: flex; gap: 1rem; align-items: flex-start; }
.image-picker-controls { flex: 1; display: grid; gap: 0.35rem; justify-items: start; }
.image-picker input[type=file] { font: inherit; font-size: 0.8125rem; max-width: 100%; }
.image-preview {
  width: 5.5rem; height: 5.5rem; object-fit: contain; flex: none;
  border: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent);
  border-radius: var(--radius); padding: 0.35rem;
  background: color-mix(in oklch, var(--steel) 12%, transparent);
}

/* ---------- admin gallery + upload progress ---------- */
.gallery-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0 0.75rem; }
.gallery-item {
  margin: 0; width: 6.5rem; padding: 0.4rem; position: relative;
  border: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent);
  border-radius: var(--radius); background: color-mix(in oklch, var(--steel) 10%, transparent);
}
.gallery-item.is-main { border-color: var(--red); }
.gallery-item img { width: 100%; height: 4.5rem; object-fit: contain; }
.main-badge {
  position: absolute; top: 0.3rem; left: 0.3rem; background: var(--red); color: var(--offwhite);
  font-size: 0.5625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.1rem 0.3rem; border-radius: 3px;
}
.gallery-actions { display: grid; gap: 0.15rem; margin-top: 0.35rem; justify-items: center; }
.gallery-actions .link-remove { font-size: 0.625rem; }

.upload-progress { margin-top: 0.6rem; display: grid; gap: 0.3rem; }
.progress-track {
  height: 0.5rem; border-radius: 999px; overflow: hidden;
  background: color-mix(in oklch, var(--graphite) 12%, transparent);
}
.progress-bar { height: 100%; width: 0; background: var(--red); transition: width 0.15s linear; }

/* ---------- storefront gallery ---------- */
.gallery-viewer { max-width: 32rem; }
.thumb-strip { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.thumb {
  width: 4.25rem; height: 4.25rem; padding: 0.3rem; cursor: pointer;
  border: 1px solid color-mix(in oklch, var(--graphite) 12%, transparent);
  border-radius: var(--radius); background: color-mix(in oklch, var(--steel) 10%, transparent);
  transition: border-color 0.2s;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb:hover { border-color: color-mix(in oklch, var(--red) 45%, transparent); }
.thumb.is-active { border-color: var(--red); border-width: 2px; }

/* ---------- brand logo ---------- */
/* The supplied logo is dark artwork — ~60% of its opaque pixels are near-black,
   and "REBAR", ".COM" and the rebar bar all sit in that range. The header and
   footer are graphite, so the mark gets a light plate to sit on rather than
   disappearing into the background. */
/* flex:none is required. .brand is a flex item of the header row, so without
   it the item shrinks and the global `img { max-width: 100% }` then clamps the
   logo to that collapsed width — it rendered 13px wide instead of ~126px.
   max-width:none stops that clamp applying to the logo at all. */
.brand { display: inline-flex; align-items: center; padding-block: 0.55rem; flex: none; }
.brand-logo {
  display: block;
  height: 2.15rem;
  width: auto;
  max-width: none;
  background: #fff;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
}
.site-footer .brand-logo { height: 1.9rem; }
@media (max-width: 520px) { .brand-logo { height: 1.75rem; padding: 0.25rem 0.4rem; } }