:root {
  --bg: #2a2c31;
  --bg-2: #2e3035;
  --panel: #373a41;
  --steel: #54575f;
  --line: #484b53;
  --line-soft: #43464d;
  --cream: #f4efe7;
  --muted: #bdb6ab;
  --faint: #938c82;
  --copper: #e5a068;
  --copper-hi: #f0b784;
  --copper-lo: #b06a38;
  --save: #9fd6a9;
  --ink-soft: #5b5750;
  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  --knob: linear-gradient(160deg, var(--copper-hi), var(--copper-lo));
  --plate: linear-gradient(150deg, var(--steel), #33363c);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; color: inherit; }
h1, h2 { margin: 0; font-family: var(--display); text-transform: uppercase; }
h1 strong, h2 strong { color: var(--copper); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* ---- top strip + header ---- */
.strip {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 40px;
  padding: 11px var(--gutter);
  border-bottom: 1px solid var(--line-soft);
  color: var(--copper);
  font: 600 14px/1.2 var(--display);
  letter-spacing: .22em; text-transform: uppercase;
}
.strip i { font-style: normal; color: #6a6d75; }

.header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 40px;
  padding: 20px var(--gutter);
  background: rgba(42, 44, 49, .94);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 14px; }
.knob-mark {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--knob); color: var(--bg);
  font: 700 22px var(--display);
}
.word { font: 600 28px var(--display); letter-spacing: .2em; text-transform: uppercase; }
.word em { font-style: normal; color: var(--copper); }
.nav {
  display: flex; gap: 36px; margin-left: auto;
  font: 600 19px var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.nav a { white-space: nowrap; }
.nav a:hover { color: var(--copper); }
@media (max-width: 1200px) { .nav { gap: 22px; font-size: 17px; } .header { gap: 28px; } }
.cart-btn {
  background: none; border: 1px solid var(--copper);
  padding: 11px 20px; cursor: pointer; white-space: nowrap;
  font: 600 17px var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.cart-btn:hover, .cart-btn[aria-expanded="true"] { background: var(--copper); color: var(--bg); }

/* ---- cart panel ---- */
.cart {
  position: fixed; z-index: 40; top: 96px; right: var(--gutter);
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - 120px); overflow: auto;
  background: var(--panel); border: 1px solid var(--steel);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.cart[hidden], .scrim[hidden] { display: none; }
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.35); }
.cart-head { display: flex; justify-content: space-between; align-items: center; }
.cart-head h2 { font-weight: 600; font-size: 26px; letter-spacing: .1em; }
.cart-body { display: flex; flex-direction: column; gap: 14px; }
.link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; }
.link-btn:hover { color: var(--cream); }
.empty { color: var(--muted); }
.line { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.line-name { flex: 1; min-width: 0; }
.line-name small { display: block; font-size: 14px; color: var(--muted); }
.step {
  width: 30px; height: 30px; flex: none; cursor: pointer;
  border: 1px solid var(--steel); background: none;
}
.step:hover { border-color: var(--copper); }
.line-total { width: 70px; text-align: right; flex: none; }
.row { display: flex; justify-content: space-between; }
.save-row { color: var(--save); font-size: 15px; }
.total-row { font: 600 30px var(--display); }
.total-row b { font-weight: 600; color: var(--copper); }

/* ---- buttons ---- */
.btn {
  display: inline-block; text-align: center;
  background: var(--copper); color: var(--bg);
  padding: 18px 30px;
  font: 700 19px var(--display); letter-spacing: .12em; text-transform: uppercase;
  border: 0; cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: var(--copper-hi); }
.underline { border-bottom: 1px solid var(--copper); padding-bottom: 4px; }
.underline:hover { color: var(--copper); }

/* ---- hero ---- */
.hero {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
  padding: 48px var(--gutter) 96px;
  max-width: 1280px; margin: 0 auto;
}
.hero-copy { display: flex; flex-direction: column; gap: 30px; }
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  color: var(--copper);
  font: 400 17px var(--display); letter-spacing: .2em; text-transform: uppercase;
}
.rule { width: 48px; height: 1px; background: var(--copper); flex: none; }
.hero h1 { font-weight: 300; font-size: clamp(56px, 8.8vw, 112px); line-height: .92; letter-spacing: -.01em; }
.hero h1 strong { font-weight: 700; }
.hero p { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 480px; }
.hero p b { color: var(--copper); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }

.hero-art {
  position: relative; height: 540px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
}
.glow-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; opacity: .5;
  background: linear-gradient(90deg, transparent, var(--copper) 30%, var(--copper) 70%, transparent);
}
.plate {
  position: relative; border-radius: 18px;
  background: var(--plate);
  box-shadow: 0 20px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.plate-xl { width: 280px; height: 280px; border-radius: 28px; box-shadow: 0 40px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.knob { position: relative; border-radius: 50%; background: var(--knob); }
.knob::after {
  content: ''; position: absolute; left: 50%; border-radius: 3px; background: var(--bg);
}
.knob-xl {
  width: 160px; height: 160px; cursor: grab;
  box-shadow: 0 12px 24px rgba(0,0,0,.3);
  transform: rotate(35deg);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.knob-xl::after { top: 14px; width: 6px; height: 40px; margin-left: -3px; }
.badge {
  position: absolute; top: 28px; right: 28px;
  width: 132px; height: 132px; border-radius: 50%; border: 1px solid var(--copper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .14em;
}
.badge span { font-size: 13px; color: var(--muted); }
.badge b { font-size: 42px; color: var(--copper); letter-spacing: 0; line-height: 1.05; }

/* ---- sections ---- */
.section { padding: 0 var(--gutter) 96px; max-width: 1280px; margin: 0 auto; }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 40px;
}
.section-head h2 { font-weight: 700; font-size: clamp(40px, 5vw, 60px); }
.section-head span { font-family: var(--display); letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }

/* range */
.range-groups { display: flex; flex-direction: column; gap: 56px; }
.range-sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; }
.range-sub h3 { margin: 0; font: 600 26px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--copper); }
.range-sub span { font: 400 14px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.range-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; padding: 1px;
}
/* each card draws its own rule, so a short last row leaves no grey cells */
.card { box-shadow: 0 0 0 1px var(--line); background: var(--bg); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.card-top {
  display: flex; justify-content: space-between;
  font: 400 14px var(--display); letter-spacing: .14em; color: var(--muted); text-transform: uppercase;
}
.card-top b { font-weight: 400; color: var(--copper); }
.card-art { height: 200px; display: grid; place-items: center; }
.card-art .plate { height: 140px; }
/* product photo in place of the drawn plate: whole photo, nothing cropped */
.card-photo { display: block; height: auto; overflow: hidden; background: var(--panel); }
.card-photo img { width: 100%; height: auto; display: block; transition: transform .3s; }
.card-photo:hover img { transform: scale(1.03); }
.card h3 a:hover, .style-name a:hover, .best-name:hover { color: var(--copper); }
.style-name a { color: inherit; }
.card-art .knob { width: 76px; height: 76px; transition: transform .3s; }
.card-art .knob::after { top: 7px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; }
.card:hover .knob { transform: rotate(60deg); }
.socket { display: grid; grid-template-columns: repeat(2, 12px); gap: 10px; }
.socket span { width: 12px; height: 12px; border-radius: 6px; background: #1d1e22; }
.socket span:last-child { grid-column: span 2; justify-self: center; width: 14px; height: 14px; border-radius: 7px; }
/* plate finishes (4-step variants) — Standard keeps the default steel */
.plate.f-silver { background: linear-gradient(150deg, #c9cbcf, #8d9096); }
.plate.f-chrome { background: linear-gradient(135deg, #f2f3f5 0%, #9a9ea6 38%, #e9ebee 52%, #6d7179 100%); }
.plate.f-ring .knob { box-shadow: 0 0 0 5px #3b3e44, 0 0 0 7px var(--copper); }
.card { container-type: inline-size; }
.picker {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@container (max-width: 300px) { .picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.picker button {
  min-width: 0; padding: 8px 2px; border: 0; cursor: pointer;
  background: var(--bg); color: var(--muted);
  font: 600 14px var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.picker button:hover { color: var(--cream); }
.picker button[aria-pressed="true"] { background: var(--panel); color: var(--copper); }
.style-name { font: 600 16px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }
.style-name small { display: block; font: 400 13px var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: 2px; }
.card h3 { margin: 0; font: 600 26px/1.05 var(--display); text-transform: uppercase; }
.card p { font-size: 15px; color: var(--muted); line-height: 1.5; flex: 1; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.price b { font: 600 32px var(--display); color: var(--copper); }
.price s { color: var(--faint); }
.add {
  background: none; border: 1px solid var(--copper); padding: 14px 8px; cursor: pointer;
  font: 600 16px var(--display); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;                                   /* always one line */
}
/* inside a card, the label shrinks with the card so it still fits on one line */
.card .add { font-size: clamp(11px, 5.9cqi, 16px); letter-spacing: .06em; }
.add:hover { background: rgba(229, 160, 104, .12); }
.qty {
  display: flex; justify-content: space-between; align-items: center;
  height: 50px; background: var(--copper); color: var(--bg);
  font: 700 16px var(--display); letter-spacing: .1em;
}
.qty button { width: 48px; height: 50px; border: 0; background: none; color: var(--bg); font-size: 20px; cursor: pointer; }

/* bestsellers */
.best { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; }
.best-intro { display: flex; flex-direction: column; gap: 14px; }
.best-intro h2 { font-weight: 700; font-size: clamp(40px, 4.4vw, 52px); line-height: 1; }
.best-intro h2 strong { font-weight: 800; }
.best-intro p { color: var(--muted); }
.best-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 140px auto; align-items: center; gap: 20px;
  border-top: 1px solid var(--line); padding: 16px 0;
}
.thumb { width: 56px; height: 56px; border-radius: 10px; background: var(--plate); display: grid; place-items: center; }
.thumb i { width: 28px; height: 28px; border-radius: 50%; background: var(--knob); }
.best-name { font-size: 19px; }
.best-price b { font-weight: 400; color: var(--copper); font-size: 20px; }
.best-price s { color: var(--faint); font-size: 14px; }
.best-add {
  background: none; border: 1px solid var(--copper); text-align: center; cursor: pointer; padding: 10px 8px;
  font: 600 15px var(--display); letter-spacing: .14em; text-transform: uppercase;
}
.best-add:hover, .best-add.on { color: var(--copper); }

/* why */
.why {
  background: var(--cream); color: var(--bg);
  padding: 72px max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px;
  margin-bottom: 96px;
}
.why div { display: flex; flex-direction: column; gap: 12px; }
.why b {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--copper); font: 600 19px var(--display);
}
.why h3 { margin: 0; font: 600 24px var(--display); text-transform: uppercase; }
.why p { color: var(--ink-soft); line-height: 1.6; }

/* warranty */
.hero-warranty {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(229, 160, 104, .45); background: rgba(229, 160, 104, .08);
  color: var(--cream); font-size: 16px;
}
.hero-warranty svg, .pd-warranty svg { color: var(--copper); flex: none; }
.hero-warranty b, .pd-warranty b { color: var(--copper); font-weight: 600; }
.hero-warranty:hover { background: rgba(229, 160, 104, .16); }

.warranty { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: center; }
.w-seal { display: grid; place-items: center; }
.w-ring {
  position: relative; width: 280px; height: 280px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, var(--panel), var(--bg-2) 70%);
  border: 1px solid var(--copper);
  box-shadow: 0 0 0 10px var(--bg), 0 0 0 11px var(--line), 0 30px 60px rgba(0,0,0,.35);
  font-family: var(--display); text-transform: uppercase; text-align: center;
}
/* tick marks round the seal, like a regulator dial */
.w-ring::before {
  content: ''; position: absolute; inset: 14px; border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, var(--copper) 0 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 118px, #000 119px, #000 124px, transparent 125px);
          mask: radial-gradient(circle, transparent 118px, #000 119px, #000 124px, transparent 125px);
  opacity: .8;
}
.w-ring b {
  font-size: 150px; font-weight: 800; line-height: .82; color: transparent;
  background: var(--knob); -webkit-background-clip: text; background-clip: text;
}
.w-ring span { font-size: 18px; font-weight: 600; letter-spacing: .24em; line-height: 1.25; color: var(--cream); margin-top: 6px; }
.w-copy { display: flex; flex-direction: column; gap: 22px; }
.warranty h2 { font-weight: 700; font-size: clamp(44px, 5vw, 64px); line-height: 1; }
.w-lede { color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 640px; }
.w-lede b { color: var(--cream); font-weight: 600; }
.w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.w-card { background: var(--bg); padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.w-card h3 { margin: 0; font: 600 22px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.w-list, .w-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--muted); line-height: 1.5; }
.w-list li { position: relative; padding-left: 26px; }
.w-list li::before {
  content: ''; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px;
  border-left: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(-45deg);
}
.w-steps { counter-reset: step; }
.w-steps li { position: relative; padding-left: 38px; counter-increment: step; }
.w-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--copper); color: var(--bg); font: 700 14px var(--display);
}
.w-steps b { color: var(--cream); font-weight: 600; }
.w-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.w-foot .btn { font-size: 18px; padding: 16px 28px; }
.w-fine { flex: 1 1 280px; font-size: 14px; line-height: 1.55; color: var(--faint); }

.pd-warranty {
  display: flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 10px 14px; border: 1px solid var(--line); color: var(--muted); font-size: 15px;
}
.pd-warranty:hover { border-color: var(--copper); }
.cart-warranty { font-size: 14px; color: var(--muted); text-align: center; }
.cart-warranty::before { content: '✓ '; color: var(--copper); }

@media (max-width: 1000px) {
  .warranty { grid-template-columns: 1fr; gap: 40px; }
  .w-seal { justify-self: start; }
}
@media (max-width: 600px) {
  .w-grid { grid-template-columns: 1fr; }
  .w-ring { width: 200px; height: 200px; }
  .w-ring::before {
    -webkit-mask: radial-gradient(circle, transparent 80px, #000 81px, #000 85px, transparent 86px);
            mask: radial-gradient(circle, transparent 80px, #000 81px, #000 85px, transparent 86px);
  }
  .w-ring b { font-size: 104px; }
  .w-ring span { font-size: 14px; }
  .w-seal { justify-self: center; }
  .w-card { padding: 22px; }
}

/* hero promise row: quality, warranty, minimum order */
.promise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promise li { padding: 16px 18px 16px 0; }
.promise li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.promise li, .promise a { display: flex; align-items: center; gap: 12px; }
.promise svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--copper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.promise span { display: flex; flex-direction: column; line-height: 1.15; font-size: 14px; color: var(--muted); white-space: nowrap; }
.promise b { font: 700 20px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }
.promise a:hover b { color: var(--copper); }
@media (max-width: 600px) {
  .promise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promise li { padding: 12px 8px 12px 0; }
  .promise li + li { padding-left: 10px; }
  .promise li, .promise a { flex-direction: column; align-items: flex-start; gap: 6px; }
  .promise b { font-size: 17px; }
  .promise span { font-size: 12px; }
}

/* minimum order */
.min-order { display: flex; flex-direction: column; gap: 8px; }
.min-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.min-bar i { display: block; height: 100%; background: var(--copper); }
.min-order p { font-size: 14px; color: var(--muted); margin: 0; }
.min-order b { color: var(--cream); }
.btn-off { opacity: .4; cursor: not-allowed; pointer-events: none; }
.pd-min { font-size: 14px; color: var(--muted); }

/* bulk */
.bulk { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.bulk-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.bulk-copy .eyebrow { font-size: 16px; }
.bulk h2 { font-weight: 700; font-size: clamp(44px, 5vw, 64px); line-height: 1; }
.bulk p { color: var(--muted); font-size: 18px; line-height: 1.6; }
.bulk .btn { font-size: 18px; padding: 16px 28px; }
.reviews { display: flex; flex-direction: column; gap: 28px; }
.reviews blockquote { margin: 0; border-left: 1px solid var(--copper); padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.reviews q { font-size: 19px; line-height: 1.5; font-weight: 300; }
.reviews cite { font: normal 14px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* visit */
.visit {
  margin: 0 auto 64px; max-width: calc(1280px - 2 * 64px);
  border: 1px solid var(--line); padding: 40px;
  display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 40px; align-items: center;
}
@media (max-width: 1280px) { .visit { margin-inline: var(--gutter); } }
.visit h2 { font-weight: 700; font-size: 40px; line-height: 1; }
.visit address { font-style: normal; font-size: 17px; line-height: 1.7; color: var(--muted); }
.visit address { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.visit address a { color: var(--copper); font-size: 20px; }
.visit .hours { display: block; font-size: 16px; line-height: 1.6; color: var(--muted); }
.visit .hours b { font-weight: 600; color: var(--cream); margin-right: 4px; }
.visit .map-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  padding: 9px 14px; border: 1px solid var(--copper);
  font: 600 15px var(--display) !important; letter-spacing: .12em; text-transform: uppercase;
}
.visit .map-link:hover { background: var(--copper); color: var(--bg); }
.map-frame { height: 260px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(.95); }

/* ---- product specification page ---- */
.pd-page { max-width: 1280px; margin: 0 auto; padding: 16px var(--gutter) 96px; }
.crumbs {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 32px;
  font: 400 15px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.crumbs a { color: var(--copper); }
.crumbs a:hover { text-decoration: underline; }
.crumbs span:not([aria-current]) { color: var(--faint); }
.crumbs [aria-current] { color: var(--cream); }
.pd { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.pd-media {
  position: sticky; top: 100px;
  min-height: 420px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
}
.pd-media.has-photo { min-height: 0; background: var(--panel); }
.pd-media img { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 140px); display: block; margin: 0 auto; }
.plate-pd { width: 240px; height: 240px; border-radius: 24px; }
.plate-pd .knob { width: 130px; height: 130px; }
.plate-pd .knob::after { top: 11px; width: 5px; height: 32px; margin-left: -2.5px; }
.pd-info { display: flex; flex-direction: column; gap: 20px; }
.pd-eyebrow { font: 400 16px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pd-eyebrow b { font-weight: 400; color: var(--copper); }
.pd-info h1 { font-weight: 700; font-size: clamp(36px, 4.4vw, 56px); line-height: 1; }
.pd-style { font: 600 24px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--copper); }
.pd-lede { color: var(--muted); font-size: 18px; line-height: 1.6; }
.pd-price b { font-size: 44px; }
.pd-block { display: flex; flex-direction: column; gap: 10px; }
.pd-label { font: 600 14px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pd-info .picker a {
  display: block; text-align: center; padding: 11px 2px; background: var(--bg); color: var(--muted);
  font: 600 15px var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.pd-info .picker a:hover { color: var(--cream); }
.pd-info .picker a[aria-current] { background: var(--panel); color: var(--copper); }
.pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.pd-actions > .add, .pd-actions > .qty { flex: 0 1 260px; }
.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td { padding: 12px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.specs th { width: 40%; font-weight: 400; color: var(--muted); }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 1px solid var(--line); }
.pd-note { font-size: 14px; color: var(--faint); }
.pd-missing { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 48px 0; }
.pd-missing h1 { font-size: 48px; }
@media (max-width: 900px) {
  .pd { grid-template-columns: 1fr; gap: 32px; }
  .pd-media { position: static; min-height: 300px; }
}

.footer {
  border-top: 1px solid var(--line);
  padding: 28px var(--gutter) 96px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--faint); font-size: 14px;
}
.footer .word { font-size: 14px; color: var(--cream); }

.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 25;
  height: 56px; padding: 0 22px 0 16px; border-radius: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 16px var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: #25d366; color: #fff;                 /* WhatsApp's own green and white logo */
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.fab:hover { background: #1ebe5b; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .best { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  /* phones and tablets: the menu becomes a slim second row under the logo and cart */
  .header { flex-wrap: wrap; row-gap: 10px; }
  .nav {
    order: 3; flex: 1 1 100%; margin-left: 0;
    justify-content: space-between; gap: 18px;
    padding-top: 10px; border-top: 1px solid var(--line-soft);
    font-size: 14px; letter-spacing: .08em;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding-block: 4px; }
  .cart-btn { margin-left: auto; }
  .hero, .bulk { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-top: 24px; padding-bottom: 72px; }
  .visit { grid-template-columns: 1fr 1fr; }
  .map-frame { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 118px; }                 /* header is two rows on phones */
  .strip { gap: 4px 14px; font-size: 12px; letter-spacing: .14em; }
  .header { gap: 12px; padding-block: 14px; }
  .knob-mark { width: 36px; height: 36px; font-size: 18px; }
  .word { font-size: 21px; letter-spacing: .14em; }
  .cart-btn { padding: 9px 12px; font-size: 15px; }
  .cart { top: 72px; right: 16px; padding: 22px; }
  .plate-xl { width: 200px; height: 200px; }
  .knob-xl { width: 116px; height: 116px; }
  .badge { width: 100px; height: 100px; top: 16px; right: 16px; }
  .badge b { font-size: 30px; }
  .badge span { font-size: 11px; }
  .range-grid { grid-template-columns: 1fr; }
  .section, .bulk { padding-bottom: 72px; }
  .best-row { grid-template-columns: 48px minmax(0, 1fr); row-gap: 10px; column-gap: 14px; }
  .thumb { width: 48px; height: 48px; align-self: start; }
  .best-price, .best-add, .best-qty { grid-column: 2; justify-self: start; }
  .why { grid-template-columns: 1fr; padding-block: 56px; gap: 32px; margin-bottom: 72px; }
  .visit { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
  .section-head span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* pack options: single / box of 10 / 100+ / 500+ */
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.packs button { min-width: 0; padding: 9px 2px; border: 0; cursor: pointer; background: var(--bg); color: var(--muted);
  font: 600 13px var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.packs button:hover { color: var(--cream); }
.packs button[aria-pressed="true"] { background: var(--panel); color: var(--copper); }
@container (max-width: 300px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pack-price em { font-style: normal; font-size: 14px; color: var(--muted); }
.in-bag { font-size: 13px; color: var(--muted); }
.pd-buy { display: flex; flex-direction: column; gap: 12px; flex: 1 1 100%; }
.pd-buy .price b { font-size: 40px; }
.in-bag-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 50px; padding: 0 6px 0 14px;
  background: var(--copper); color: var(--bg); font: 700 15px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.in-bag-bar button, .line-remove { border: 0; background: none; cursor: pointer; font: 600 13px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.in-bag-bar button { color: var(--bg); padding: 8px; text-decoration: underline; }
.line-remove { color: var(--muted); padding: 6px; flex: none; }
.line-remove:hover { color: var(--copper); }
.line-name small b { color: var(--cream); font-weight: 600; }

/* logo: BD charged badge */
.bd-mark { width: 48px; height: 48px; flex: none; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand .word { line-height: 1; }
.brand-tag { font: 400 11px var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.foot-brand svg { flex: none; }
@media (max-width: 600px) {
  .bd-mark { width: 38px; height: 38px; }
  .brand-tag { font-size: 9px; letter-spacing: .24em; }
}

/* bestseller quantity */
.best-qty { display: inline-flex; align-items: center; justify-self: end; border: 1px solid var(--copper); }
.best-qty button { width: 32px; height: 32px; border: 0; background: none; color: var(--cream); font-size: 18px; cursor: pointer; }
.best-qty button:hover { background: rgba(229, 160, 104, .15); }
.best-qty b { min-width: 28px; text-align: center; font: 600 16px var(--display); color: var(--copper); }

/* ---- cart page ---- */
a.cart-btn { display: inline-block; }
.cp { max-width: 1280px; margin: 0 auto; padding: 16px var(--gutter) 96px; }
.cp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 28px; }
.cp-head h1 { font-weight: 300; font-size: clamp(44px, 6vw, 72px); line-height: .95; }
.cp-head h1 strong { font-weight: 700; }
.cp-count { font: 400 16px var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.cp-items { display: flex; flex-direction: column; }
.cp-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line); }
.cp-line:first-child { padding-top: 0; }
.cp-thumb { width: 96px; height: 96px; background: var(--panel); overflow: hidden; display: grid; place-items: center; }
.cp-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; transform: scale(1.9); transform-origin: 54% 78%; }  /* zoom to the regulator, not the headline */
.cp-plate { width: 54px; height: 62px; border-radius: 8px; background: var(--plate); display: grid; place-items: center; }
.cp-plate i { width: 30px; height: 30px; border-radius: 50%; background: var(--knob); }
.cp-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-name { font: 600 20px/1.15 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.cp-name:hover { color: var(--copper); }
.cp-pack { font-size: 14px; color: var(--muted); }
.cp-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.cp-qty { height: 40px; min-width: 220px; }
.cp-qty button { height: 40px; width: 40px; }
.cp-qty span { font-size: 14px; }
.cp-remove { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px 0;
  font: 600 13px var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.cp-remove:hover { color: var(--copper); }
.cp-total { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.cp-total b { font: 600 24px var(--display); color: var(--copper); }
.cp-total small { color: var(--muted); font-size: 13px; }
.cp-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; }
.cp-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.cp-box { background: var(--panel); border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.cp-box h2 { font: 600 24px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.cp-box .row { font-size: 16px; color: var(--muted); }
.cp-grand { border-top: 1px solid var(--line); padding-top: 14px; font: 600 26px var(--display) !important; color: var(--cream) !important; text-transform: uppercase; }
.cp-grand b { color: var(--copper); }
.cp-send { text-align: center; }
.cp-note { font-size: 13px; color: var(--muted); line-height: 1.5; }
.cp-trust { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.cp-details label { display: flex; flex-direction: column; gap: 6px; font: 600 13px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cp-details input, .cp-details textarea { font: 16px var(--body); color: var(--cream); background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; resize: vertical; text-transform: none; letter-spacing: 0; }
.cp-details input:focus, .cp-details textarea:focus { outline: none; border-color: var(--copper); }
.cp-empty { padding: 40px 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cp-empty p { font: 400 22px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 960px) { .cp-grid { grid-template-columns: 1fr; } .cp-side { position: static; } }
@media (max-width: 600px) {
  .cp-line { grid-template-columns: 72px minmax(0, 1fr); }
  .cp-thumb { width: 72px; height: 72px; }
  .cp-total { grid-column: 2; text-align: left; }
  .cp-qty { min-width: 0; flex: 1 1 100%; }
}

/* ---- home banner slideshow ---- */
.showcase { position: relative; width: 100%; max-width: 480px; justify-self: center; margin-top: 26px; }
.sc-frame { position: relative; aspect-ratio: 768 / 1007; background: var(--panel); overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.sc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.sc-slide.on { opacity: 1; z-index: 1; }
.sc-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.showcase .badge { z-index: 2; top: -26px; right: -26px; width: 118px; height: 118px;   /* sits on the frame corner, clear of the photo headline */
  background: rgba(34, 35, 40, .78); backdrop-filter: blur(4px); }
.showcase .badge b { font-size: 40px; }
.sc-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 2px 0; }
.sc-name { font: 600 18px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }
.sc-name:hover { color: var(--copper); }
.sc-dots { display: flex; gap: 8px; flex: none; }
.sc-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; }
.sc-dots button[aria-current] { background: var(--copper); width: 24px; border-radius: 5px; }
@media (max-width: 900px) { .showcase { max-width: 420px; } }
@media (max-width: 600px) {
  .showcase .badge { width: 88px; height: 88px; top: -14px; right: -8px; }
  .showcase .badge b { font-size: 29px; }
  .sc-name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .sc-slide { transition: none; } }
.best-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.best-packs { max-width: 420px; }
.best-packs button { padding: 7px 2px; font-size: 12px; }
.best-price small { display: block; color: var(--muted); font-size: 13px; }
.best-qty b { min-width: 0; padding: 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.best-add { white-space: nowrap; letter-spacing: .08em; padding: 10px 14px; }

/* pack buttons carry their own price */
.packs button { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15; padding: 8px 2px; }
.packs button b { font: 400 12px var(--body); letter-spacing: 0; text-transform: none; color: var(--faint); }
.packs button[aria-pressed="true"] b { color: var(--cream); }

/* type-your-quantity box */
.typeqty { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--line); }
.typeqty label { font: 600 12px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tq-row { display: flex; gap: 8px; }
.tq-row input { flex: 1 1 auto; min-width: 0; width: 100%; font: 600 18px var(--display); color: var(--cream); background: var(--bg);
  border: 1px solid var(--line); padding: 8px 10px; -moz-appearance: textfield; }
.tq-row input::-webkit-outer-spin-button, .tq-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tq-row input:focus { outline: none; border-color: var(--copper); }
.tq-row button { flex: none; border: 0; background: var(--copper); color: var(--bg); padding: 0 14px; cursor: pointer;
  font: 700 13px var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tq-row button:hover { background: var(--copper-hi); }
.tq-hint { font-size: 13px; color: var(--muted); line-height: 1.4; }
.tq-hint b { color: var(--copper); font-weight: 600; }
.best-info .typeqty { max-width: 420px; }

/* hum-free badge (4-step and 5-step regulators) */
.hum-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px;
  border: 1px solid rgba(159, 214, 169, .45); background: rgba(159, 214, 169, .08); color: var(--save);
  font: 600 12px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.hum-chip svg, .pd-hum svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.best-info .hum-chip { margin-top: -4px; }
.pd-hum { display: flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 14px;
  border: 1px solid rgba(159, 214, 169, .35); color: var(--muted); font-size: 15px; }
.pd-hum svg { width: 20px; height: 20px; color: var(--save); }
.pd-hum b { color: var(--save); font-weight: 600; }

/* GST notes */
.gst-note { display: block; font-size: 12px; color: var(--faint); letter-spacing: .02em; margin-top: -8px; }
.best-price .gst-note { margin-top: 2px; }
.gst-line { font-size: 13px; color: var(--muted); margin: -4px 0 0; }
.gst-line b { color: var(--cream); font-weight: 600; }
@media (max-width: 600px) { .promise span { white-space: normal; } }

/* the option whose rate currently applies to what's in the bag */
.packs button[data-rate="on"] { box-shadow: inset 0 -2px 0 var(--save); }
.in-bag b { color: var(--save); font-weight: 600; }
.qty button { font: 600 16px var(--display); }

/* bestseller photos */
.thumb-photo { overflow: hidden; background: var(--panel); border-radius: 10px; }
.thumb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; transform: scale(1.9); transform-origin: 54% 78%; display: block; }
.best-row .thumb { width: 72px; height: 72px; }
.best-row { grid-template-columns: 72px minmax(0, 1fr) 140px auto; }
@media (max-width: 600px) { .best-row { grid-template-columns: 56px minmax(0, 1fr); } .best-row .thumb { width: 56px; height: 56px; } }
.best-row .thumb { align-self: start; margin-top: 4px; }

/* shipping */
.cp-box .row .free { color: var(--save); font-weight: 600; letter-spacing: .08em; }
.ship-hint { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.ship-hint b { color: var(--save); font-weight: 600; }
.pd-min b { color: var(--save); font-weight: 600; }

/* bestseller photos: the whole photo, uncropped, large */
.best-row { grid-template-columns: 170px minmax(0, 1fr) 140px auto; gap: 24px; padding: 22px 0; }
.best-row .thumb { width: 170px; height: auto; aspect-ratio: 768 / 1007; margin-top: 0; align-self: start; border-radius: 6px; }
.thumb-photo img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.thumb-photo:hover img { transform: scale(1.03); transition: transform .3s; }
@media (max-width: 900px) { .best-row { grid-template-columns: 140px minmax(0, 1fr); } .best-row .thumb { width: 140px; grid-row: span 3; } }
@media (max-width: 600px) { .best-row { grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; } .best-row .thumb { width: 110px; } }

/* very small phones (≤ 380px): keep logo + cart on one row and all five menu items in view */
@media (max-width: 380px) {
  .header { gap: 8px; }
  .brand { gap: 8px; }
  .brand .bd-mark { width: 36px; height: 36px; }
  .word { font-size: 17px; letter-spacing: .1em; }
  .brand-tag { font-size: 8px; letter-spacing: .14em; }
  .cart-btn { padding: 8px 9px; font-size: 13px; letter-spacing: .06em; }
  .nav { gap: 10px; font-size: 12.5px; letter-spacing: .04em; }
}

/* WhatsApp order button (hero + trust section) */
.btn-wa { display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #fff; }
.btn-wa:hover { background: #1ebe5b; }
.btn-wa svg { flex: none; }
@media (max-width: 600px) {
  .fab { height: 50px; padding: 0 16px 0 12px; gap: 8px; font-size: 14px; right: 14px; bottom: 14px; }
  .fab svg { width: 26px; height: 26px; }
}

/* trust */
.trust { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: start; }
.trust-head { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.trust-head h2 { margin: 0; font-weight: 300; font-size: clamp(44px, 5vw, 64px); line-height: 1; text-transform: uppercase; }
.trust-head h2 strong { font-weight: 700; color: var(--copper); }
.trust-head p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.trust-item { background: var(--bg); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.trust-item svg { width: 34px; height: 34px; fill: none; stroke: var(--copper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust-item h3 { margin: 6px 0 0; font: 600 21px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.trust-item p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15.5px; }
@media (max-width: 1100px) { .trust { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .trust-grid { grid-template-columns: 1fr; } .trust-item { padding: 22px 18px; } }