/* Monument Cleaning Solutions — Storeforge theme.
   Loaded AFTER /static/store.css, so:
     1. the token block below re-points every default page (cart, checkout,
        track, product, policies) at the MCS palette and type, and
     2. the component rules rebuild the bespoke landing page on top.
   Palette from the MCS brand mark: teal + signal red, with the hygiene
   colour-coding used on the shop floor. */

:root {
  /* MCS palette */
  --ink: #0e2a2e;
  --muted: #586e72;
  --bg: #f2f6f6;
  --paper: #ffffff;
  --line: #dde7e7;
  --teal: #12968f;
  --teal-dark: #0b6a65;
  --red: #e23a2e;
  --red-dark: #c72d22;
  /* hygiene colour codes per department */
  --c-chem: #12968f;
  --c-cons: #e8a020;
  --c-equip: #2e6fd8;
  --c-paper: #64748b;
  --c-stat: #7c5cd6;
  --c-bio: #3fa34d;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(14, 42, 46, .06), 0 8px 24px rgba(14, 42, 46, .07);
  /* tokens store.css reads — repointed so untouched pages wear the MCS look */
  --accent: #12968f;
  --accent-dark: #0b6a65;
  --soft: #586e72;
  --display: "Archivo", system-ui, sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}

html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body.mcs {
  font-family: "Archivo", system-ui, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
/* Plain element selectors on purpose: anything more specific (body.mcs a)
   would outrank the class rules below that paint white links on the dark
   topbar, the basket button and the primary CTA. */
img { max-width: 100%; }
a { color: var(--teal-dark); text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* department colour hook */
.dept-chem { --cc: var(--c-chem); }
.dept-cons { --cc: var(--c-cons); }
.dept-equip { --cc: var(--c-equip); }
.dept-paper { --cc: var(--c-paper); }
.dept-stat { --cc: var(--c-stat); }
.dept-bio { --cc: var(--c-bio); }
.dept-na { --cc: var(--teal); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 15px;
  border: 0; background: none; color: inherit; text-decoration: none;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--full { width: 100%; }

/* ── topbar ─────────────────────────────── */
.topbar { background: var(--ink); color: #cfe0e0; font-size: 13px; }
.topbar__in { display: flex; align-items: center; gap: 10px; padding: 7px 20px; flex-wrap: wrap; }
.topbar a { color: #fff; font-weight: 600; }
.topbar__sep { opacity: .4; }
.topbar__spacer { flex: 1; }

/* ── header ─────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.hdr__in { display: flex; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: 12px; }
.hdr__logo img { height: 52px; width: auto; }
.hdr__wordmark { font-weight: 900; font-size: 20px; color: var(--ink); }
.hdr__search {
  flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 8px; padding: 0 14px;
}
.hdr__search:focus-within { border-color: var(--teal); background: #fff; }
.hdr__search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.hdr__search input { flex: 1; min-width: 0; border: 0; background: none; padding: 11px 0; font-size: 15px; font-family: inherit; color: inherit; }
.hdr__search input:focus { outline: none; }
.hdr__cart {
  position: relative; display: flex; align-items: center; gap: 8px; flex: none;
  font-weight: 600; padding: 10px 16px; border-radius: 8px;
  background: var(--ink); color: #fff; transition: background .2s ease;
}
.hdr__cart:hover { color: #fff; }
.hdr__cart.is-flash { background: var(--teal); }
.hdr__cart svg { width: 19px; height: 19px; }
.hdr__count {
  position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px;
  background: var(--red); color: #fff; border-radius: 99px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}

.catnav { border-top: 1px solid var(--line); background: var(--paper); }
.catnav__in { display: flex; gap: 4px; overflow-x: auto; padding-top: 0; padding-bottom: 0; scrollbar-width: none; }
.catnav__in::-webkit-scrollbar { display: none; }
.catnav__link {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 10px 13px; font-size: 14px; font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent; cursor: pointer;
}
.catnav__link:hover { color: var(--ink); }
.catnav__link.is-on { color: var(--ink); border-bottom-color: var(--cc, var(--teal)); }
.catnav__dot { width: 9px; height: 9px; border-radius: 2px; background: var(--cc, var(--teal)); flex: none; }

/* ── hero ───────────────────────────────── */
.hero { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); overflow: hidden; }
.hero__in { display: grid; grid-template-columns: 1.25fr .85fr; gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 72px; }
.eyebrow {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--teal-dark); margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; font-weight: 900;
  letter-spacing: -.015em; margin-bottom: 20px; font-family: var(--display);
}
.hero h1 em { font-style: italic; color: var(--teal); }
.hero__sub { font-size: 17.5px; color: var(--muted); max-width: 54ch; margin-bottom: 30px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

.spec {
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(14, 42, 46, .12); overflow: hidden;
}
.spec__bar { display: flex; height: 8px; }
.spec__bar i { flex: 1; }
.spec__title {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; padding: 16px 22px 4px; color: var(--muted);
}
.spec dl { padding: 6px 22px 8px; }
.spec dl div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px;
}
.spec dl div:last-child { border-bottom: 0; }
.spec dt { color: var(--muted); }
.spec dd { font-family: var(--mono); font-weight: 600; font-size: 15px; }
.spec__foot {
  background: var(--ink); color: #cfe0e0; font-size: 12.5px; padding: 10px 22px;
  font-family: var(--mono);
}

/* ── trust strip ────────────────────────── */
.trust { background: var(--ink); color: #fff; }
.trust__in {
  display: flex; flex-wrap: wrap; gap: 8px 34px; justify-content: center;
  padding-top: 16px; padding-bottom: 16px; font-size: 13.5px; font-weight: 600;
}
.trust span { display: flex; align-items: center; gap: 8px; opacity: .92; }
.trust span::before { content: "✓"; color: var(--red); font-weight: 900; }

/* ── sections ───────────────────────────── */
.sec__title { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 900; letter-spacing: -.01em; line-height: 1.15; }
.sec__sub { color: var(--muted); margin-top: 8px; max-width: 60ch; }
.sec__title--light, .sec__sub--light { color: #fff; }
.sec__sub--light { opacity: .75; }

/* ── departments ────────────────────────── */
.cats { padding: 64px 0 8px; }
.cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.cat-tile {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 22px 18px; text-align: left; display: flex; flex-direction: column; gap: 6px;
  border-top: 5px solid var(--cc, var(--teal)); color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(14,42,46,.08), 0 14px 32px rgba(14,42,46,.12); color: var(--ink); }
.cat-tile__count { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.cat-tile h3 { font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.2; }
.cat-tile p { font-size: 13.5px; color: var(--muted); }

/* ── catalogue ──────────────────────────── */
.shop { padding: 56px 0 72px; }
.shop__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.shop__tools { display: flex; align-items: center; gap: 14px; }
.shop__count { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.shop__tools select {
  border: 1.5px solid var(--line); background: var(--paper); border-radius: 8px;
  padding: 9px 12px; font-size: 14px; font-weight: 600; font-family: inherit; color: inherit;
}
.shop__body { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }

.rail { position: sticky; top: 132px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.rail__all {
  display: block; width: 100%; text-align: left; font-weight: 800; font-size: 14.5px;
  padding: 9px 10px; border-radius: 7px; color: var(--ink); cursor: pointer;
}
.rail__all:hover, .rail__root:hover { background: var(--bg); color: var(--ink); }
.rail__root {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  font-weight: 700; font-size: 13.5px; padding: 8px 10px; border-radius: 7px;
  color: var(--ink); cursor: pointer;
}
.rail__root .catnav__dot { width: 8px; height: 8px; }
.rail__root small { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.rail__subs { padding-left: 14px; display: none; }
.rail__group.is-open .rail__subs { display: block; }
.rail__subs a {
  width: 100%; display: flex; text-align: left; font-size: 13px; color: var(--muted);
  padding: 6px 10px; border-radius: 6px; gap: 8px; cursor: pointer;
}
.rail__subs a:hover { background: var(--bg); color: var(--ink); }
.rail__subs a.is-on, .rail__root.is-on { background: var(--ink); color: #fff; }
.rail__root.is-on small, .rail__subs a.is-on small { color: #fff; }
.rail__subs a small { margin-left: auto; font-family: var(--mono); font-size: 11px; opacity: .7; }
.rail__toggle {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600;
  padding: 12px 10px 6px; border-top: 1px solid var(--line); margin-top: 10px; cursor: pointer;
}
.rail__toggle input { width: 16px; height: 16px; accent-color: var(--red); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 99px;
  border: 0; text-decoration: none;
}
.chip button { color: #fff; font-size: 15px; line-height: 1; opacity: .7; border: 0; background: none; }
.chip button:hover { opacity: 1; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 0; max-width: none; }
.card {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; display: flex; flex-direction: column; text-align: left;
  transition: transform .15s ease, box-shadow .15s ease; position: relative;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(14,42,46,.08), 0 16px 34px rgba(14,42,46,.13); }
.card__code { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--cc, var(--teal)); z-index: 1; }
.card__imgWrap { background: #fff; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 14px; border: 0; width: 100%; }
.card__imgWrap img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.card__sale {
  position: absolute; top: 12px; right: 12px; background: var(--red); color: #fff;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 5px; z-index: 1;
}
.card__sale--out { background: var(--muted); }
.card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; border-top: 1px solid var(--line); }
.card__sku { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.card__name { font-size: 14.5px; font-weight: 700; line-height: 1.3; flex: 1; text-align: center; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.card__name:hover { color: var(--teal-dark); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.card__price { font-family: var(--mono); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.card__price s { color: var(--muted); font-size: 12px; font-weight: 500; margin-right: 6px; }
.card__add {
  background: var(--bg); color: var(--ink); font-weight: 700; font-size: 13px;
  padding: 8px 13px; border-radius: 7px; border: 0; cursor: pointer;
  transition: background .15s, color .15s; white-space: nowrap;
}
.card__add:hover { background: var(--teal); color: #fff; }
.shop__more { text-align: center; margin-top: 30px; }
.shop__empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 60px 0; }
.shop__empty strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: 6px; }

/* ── services ───────────────────────────── */
.svc { background: var(--ink); padding: 72px 0; }
.svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.svc__grid article {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius); padding: 22px;
}
.svc__grid h3 { font-family: var(--display); color: #fff; font-size: 16.5px; font-weight: 800; margin-bottom: 8px; }
.svc__grid p { color: #b7cbcb; font-size: 14px; }

/* ── contact ────────────────────────────── */
.contact { padding: 72px 0; }
.contact__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; }
.contact__list { margin-top: 26px; }
.contact__list div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.contact__list dt { color: var(--muted); font-weight: 600; font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.contact__list a { font-weight: 600; }
.contact__people { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; align-self: start; }
.contact__peopleTitle { font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 14px; }
.contact__people ul { list-style: none; padding: 0; margin: 0; }
.contact__people li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.contact__people li:last-child { border-bottom: 0; }
.contact__people span { font-weight: 800; font-size: 15.5px; }
.contact__people em { font-style: normal; color: var(--muted); font-size: 13px; grid-row: 2; }
.contact__people a { font-family: var(--mono); font-weight: 600; font-size: 14px; grid-column: 2; grid-row: 1 / 3; align-self: center; }

/* ── footer ─────────────────────────────── */
.ftr { background: #fff; border-top: 1px solid var(--line); padding: 40px 0; margin-top: auto; }
.ftr__in { display: grid; grid-template-columns: 1.2fr 1fr .9fr; gap: 40px; font-size: 14px; color: var(--muted); }
.ftr__logo { margin-bottom: 12px; height: 50px; width: auto; }
.ftr__links { display: flex; flex-direction: column; gap: 7px; }
.ftr__links a { color: var(--muted); font-weight: 600; }
.ftr__links a:hover { color: var(--ink); }
.ftr__legal { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.ftr__legal a { color: var(--muted); font-weight: 600; }
.ftr__legal a:hover { color: var(--ink); }
.ftr__meta p { margin-bottom: 6px; }
.footer__credit a { font-weight: 700; }

/* ── quick view modal ───────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; }
.modal__scrim { position: absolute; inset: 0; background: rgba(14, 42, 46, .55); }
.modal__card {
  position: relative; max-width: 780px; margin: 6vh auto 0; background: var(--paper);
  border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .3); padding: 28px;
  max-height: 88vh; overflow: auto; width: calc(100% - 32px);
}
.modal__x {
  position: absolute; top: 12px; right: 14px; font-size: 26px; line-height: 1;
  color: var(--muted); padding: 6px; z-index: 2; border: 0; background: none;
}
.modal__x:hover { color: var(--ink); }
.pm { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; }
.pm__imgWrap { background: #fff; border: 1px solid var(--line); border-radius: 10px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 18px; }
.pm__imgWrap img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.pm__cat { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--cc, var(--teal-dark)); font-weight: 600; margin-bottom: 8px; }
.pm__body h3 { font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1.2; }
.pm__body h3 a { color: var(--ink); }
.pm__body h3 a:hover { color: var(--teal-dark); }
.pm__sku { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin: 6px 0 12px; }
.pm__desc { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }
.pm__buy { border-top: 1px solid var(--line); padding-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pm__price { font-family: var(--mono); font-size: 22px; font-weight: 600; flex: 1 0 100%; }
.pm__price s { font-size: 15px; color: var(--muted); margin-right: 8px; }
.pm__full { flex: 1 0 100%; font-size: 13.5px; font-weight: 600; }
.qty { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty button { width: 38px; height: 42px; font-size: 18px; font-weight: 700; background: var(--bg); border: 0; }
.qty input { width: 52px; text-align: center; border: 0; font-weight: 700; font-size: 15px; font-family: inherit; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── whatsapp + toast ───────────────────── */
.wa-bubble {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(14, 42, 46, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-bubble:hover { transform: scale(1.07); color: #fff; }
.wa-bubble svg { width: 32px; height: 32px; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 120; background: var(--ink); color: #fff; border-radius: 10px;
  padding: 12px 18px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(14, 42, 46, .3);
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
}
.toast a { color: #7fe3dc; font-weight: 700; text-decoration: underline; }

/* ══ default Storeforge pages, wearing the MCS skin ══════════════════════════
   cart, checkout, track, status, policies, pay links and the product page all
   render their own markup inside this base — these rules restyle it. */

.narrow {
  max-width: 900px; margin: 0 auto; width: 100%;
  padding: 40px 20px 72px; flex: none;
}
.narrow > h1, .productpage__info h1, .reviews h2, .co__h1 {
  font-family: var(--display); font-weight: 900; letter-spacing: -.015em;
}
.narrow > h1 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 22px; }

.buybtn {
  background: var(--red); color: #fff; border-radius: 8px;
  font: 600 15.5px var(--body); padding: 14px 26px; border: 0;
  transition: background .15s ease, transform .12s ease;
}
.buybtn:hover { background: var(--red-dark); color: #fff; }
.buybtn:active { transform: translateY(1px); }
.buybtn--wide { width: 100%; margin-top: 6px; }
.backlink { color: var(--muted); font-weight: 600; }
.backlink:hover { color: var(--ink); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* cart */
.cartlist { border-top: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 18px; }
.cartline { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cartline:last-child { border-bottom: 0; }
.cartline img, .thumbless { border-radius: 8px; border: 1px solid var(--line); background: #fff; object-fit: contain; padding: 4px; }
.cartline__info strong { font-weight: 700; font-size: 14px; line-height: 1.3; }
.cartline__total { font-family: var(--mono); font-weight: 600; }
.qtyform input { border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; }
.qtyform .qtybtn { background: var(--bg); border-radius: 7px; text-decoration: none; font-weight: 700; }
.qtyform button { font-family: inherit; }
.carttotal { font-family: var(--body); font-weight: 800; font-size: 19px; }
.carttotal span:last-child { font-family: var(--mono); font-weight: 600; }
.delnote { color: var(--muted); font-size: 13px; }
.delnote--free { color: var(--c-bio); }
.cartempty { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 48px 20px; }

/* checkout */
.checkoutgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.checkoutform { gap: 15px; }
/* store.css makes every .checkoutform label a grid, which stacks the hint span
   onto its own row and (because .checkoutform label outranks .payopt) breaks
   the payment options out of their flex row. Put both back. */
.checkoutform label { display: block; font-weight: 700; font-size: 13px; }
.checkoutform label .muted { font-weight: 400; }
.checkoutform .payopt { display: flex; align-items: flex-start; gap: 11px; }
.checkoutform input, .checkoutform textarea {
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper);
  font-family: inherit; font-size: 14.5px; margin-top: 6px;
}
.checkoutform .payopt input { margin-top: 3px; }
.checkoutform input:focus, .checkoutform textarea:focus { border-color: var(--teal); background: #fff; outline: none; }
.payopts { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin: 6px 0 10px; }
.payopts legend { display: block; width: 100%; font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.payopt { border: 1.5px solid var(--line); border-radius: 9px; padding: 13px 15px; }
.payopt:hover { border-color: #bdd3d3; }
.payopt input { accent-color: var(--teal); }
.payopt:has(input:checked) { border-color: var(--teal); background: #f2fbfa; }
.payopt strong { font-weight: 700; }
.ordersummary {
  background: var(--paper); border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; top: 148px;
}
.ordersummary h2 { font-family: var(--display); font-size: 17px; font-weight: 800; }
.sumline { font-size: 13.5px; color: var(--muted); }
.sumline span:last-child { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.sumline--total { font-weight: 800; color: var(--ink); border-top: 1px dashed var(--line); }
.sumline--total span:last-child { font-size: 19px; }
.sumline--discount, .sumline--discount span:last-child { color: var(--c-bio); }
.discountform input { border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; }
.discountform button { border-radius: 8px; }
.formerror { background: #fdecea; color: #9b241a; border-left: 4px solid var(--red); border-radius: 6px; font-weight: 600; }
.paynote, .stocknote, .contactnote { color: var(--muted); font-size: 12.5px; }

/* track / status / pay pages */
.bigmark { font-family: var(--display); }
.bigmark--good { background: var(--teal); }
.bigmark--bad { background: var(--red); }
.center .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.wabtn { background: #25d366; border-radius: 8px; }
.wabtn:hover { background: #1eb857; }

/* policies */
.policybody { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; font-size: 15px; }
.policynav a { font-weight: 600; }

/* product page — themed override (product.html) */
.pd { padding: 36px 0 56px; }
.pd__in { display: grid; grid-template-columns: minmax(280px, 470px) 1fr; gap: 44px; align-items: start; }
.pd__gallery { position: sticky; top: 140px; }
.pd__imgWrap {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 22px;
}
.pd__imgWrap img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.pd__noimg {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 8px;
  background: var(--bg); font: 900 64px var(--display); color: var(--line);
}
.pd__back { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.pd__back:hover { color: var(--ink); }
.pd__sku { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.pd__body h1 { font-family: var(--display); font-size: clamp(24px, 3vw, 36px); font-weight: 900; letter-spacing: -.015em; line-height: 1.1; }
.pd__price { font-family: var(--mono); font-weight: 600; font-size: 26px; margin: 14px 0 4px; }
.pd__price s { color: var(--muted); font-size: 16px; margin-right: 8px; }
.pd__deliv { color: var(--muted); font-size: 13.5px; }
.pd__desc { color: var(--muted); font-size: 15px; margin: 16px 0 22px; max-width: 62ch; }
.pd__desc p { margin-bottom: 10px; }
.pd__bundle { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 20px; }
.pd__bundle h2 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 8px; }
.pd__bundle ul { margin: 0; padding-left: 18px; font-size: 14px; }
.pd__buy { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.pd__qty { display: grid; gap: 6px; font-weight: 700; font-size: 13px; color: var(--muted); }
.pd__qty input {
  width: 92px; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  font: 600 15px var(--body); background: var(--paper);
}
.pd__qty input:focus { outline: none; border-color: var(--teal); }
.pd__buy .btn { padding: 14px 30px; font-size: 15.5px; }
.pd__out {
  display: inline-block; background: var(--muted); color: #fff; font-weight: 800;
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  padding: 6px 12px; border-radius: 5px; margin: 6px 0 14px;
}
.pd__reviews { padding-top: 8px; padding-bottom: 64px; }
.pd__reviews > * { max-width: 720px; }
.pd__reviews h2 { font-family: var(--display); font-size: 22px; font-weight: 900; margin-bottom: 10px; }
.pd__reviews .reviewform, .pd__reviews .addform { max-width: 420px; }
.buybar__btn { border-radius: 8px; }

/* product page */
.productpage {
  display: grid; grid-template-columns: minmax(280px, 480px) 1fr;
  gap: 40px; max-width: 1180px; margin: 0 auto; width: 100%;
  padding: 36px 20px 64px;
}
.productpage__img {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; align-self: start;
}
.productpage__img img { border-radius: 6px; background: #fff; object-fit: contain; mix-blend-mode: multiply; }
.productpage__info { max-width: 560px; }
.productpage__info h1 { font-size: clamp(24px, 3vw, 34px); margin-top: 10px; }
.pricetag, .pricetag--big { font-family: var(--mono); font-weight: 600; font-size: 24px; color: var(--ink); }
.wasprice { color: var(--muted); font-size: 15px; }
.savebadge { background: var(--red); color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 5px; margin-left: 8px; }
.productpage__desc { color: var(--muted); font-size: 14.5px; max-width: 60ch; }
.addform { max-width: 400px; }
.addform label { color: var(--muted); font-weight: 700; }
.addform input { border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; }
.variantpick__opt { border: 1.5px solid var(--line); border-radius: 9px; }
.variantpick__opt:has(input:checked) { border-color: var(--teal); background: #f2fbfa; box-shadow: none; }
.variantpick__price { font-family: var(--mono); }
.thumbs__item { border-radius: 8px; }
.thumbs__item--on { border-color: var(--teal); }
.trustrow li::before { color: var(--red); }
.soldout, .soldout--inline { background: var(--muted); color: #fff; border-radius: 5px; font-weight: 800; }
.reviews { max-width: 900px; padding: 0 20px 56px; }
.reviews h2 { font-size: 22px; }
.reviews__item { border-top: 1px solid var(--line); }
.reviewform input[type="text"], .reviewform textarea { border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; }
.buybar { background: var(--paper); }
.buybar__price { font-family: var(--mono); }

/* the default header/footer chrome never renders inside this theme */
.shoptop, .shophead, .shopfoot, .wafloat, .demoribbon { display: none !important; }

/* ── responsive ─────────────────────────── */
@media (max-width: 980px) {
  .hero__in { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; padding-bottom: 52px; }
  .spec { max-width: 480px; }
  .cats__grid, .svc__grid, .grid { grid-template-columns: repeat(2, 1fr); }
  .shop__body { grid-template-columns: 1fr; }
  .rail { position: static; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
  .rail__block { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; width: 100%; }
  #railCats { display: flex; flex-wrap: wrap; gap: 4px 8px; }
  .rail__root { width: auto; }
  .rail__subs { display: none !important; }
  .rail__all { width: auto; }
  .rail__toggle { border-top: 0; margin-top: 0; padding-top: 6px; }
  .contact__in, .ftr__in { grid-template-columns: 1fr; gap: 32px; }
  .pm { grid-template-columns: 1fr; }
  .pm__imgWrap { max-width: 320px; margin: 0 auto; }
  .checkoutgrid { grid-template-columns: 1fr; }
  .ordersummary { position: static; }
  .productpage, .pd__in { grid-template-columns: 1fr; gap: 26px; }
  .pd__gallery { position: static; max-width: 460px; }
}
@media (max-width: 620px) {
  .hdr__in { flex-wrap: wrap; gap: 10px; }
  .hdr__logo img { height: 40px; }
  .hdr__search { order: 3; flex-basis: 100%; }
  .hdr__cart span:not(.hdr__count) { display: none; }
  .hdr__cart { padding: 10px 12px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card__body { padding: 10px 12px 12px; }
  .card__foot { flex-wrap: wrap; gap: 6px; }
  .cats__grid { grid-template-columns: 1fr 1fr; }
  .svc__grid { grid-template-columns: 1fr; }
  .topbar__in span:first-child { display: none; }
  html { scroll-padding-top: 170px; }
  .cartline { grid-template-columns: 56px 1fr; grid-auto-rows: auto; }
  .cartline__total { grid-column: 2; text-align: right; }
  .narrow { padding: 26px 16px 60px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}