/* Layout modelled on british-supplements.net (top bars, mega-menu header, quick strip, full-width title bands,
   image-left / text-right story blocks, Them vs Us, bestseller strip, tiered product page, grey footer).
   Fonts and colours are Fieldborn's own: Archivo + Libre Franklin; red, white, pale sky blue, and forest green for actions. One light theme. */
:root {
  --white: #ffffff;
  --ink: #000000;
  --text: #333333;
  --muted: #555555;
  --line: #e4e4e4;
  --soft: #eef7fd;
  --bar: #8e0c21;
  --red: #c8102e;
  --red-deep: #8e0c21;
  --sky: #d6ecfa;
  --sky-line: #a7d3f2;
  --sky-ink: #0b2a3c;
  --navy: #d6ecfa;
  --navy-deep: #d6ecfa;
  --navy-btn: #d6ecfa;
  --green: #1f7a3d;
  --green-us: #1f7a3d;
  --green-dark: #1f7a3d;
  --head: "Archivo", "Arial Narrow", Arial, sans-serif;
  --body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1100px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 14px/1.65 var(--body); }
a { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 { font-family: var(--head); font-weight: 700; font-stretch: 90%; line-height: 1.25; margin: 0 0 .6em; text-wrap: balance; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 20px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.center { text-align: center; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--white); padding: 8px; z-index: 60; }

/* Top bars */
.topbar { background: var(--bar); color: #fff; font-size: 12px; text-align: center; padding-block: 7px; }
.subbar { background: var(--white); border-bottom: 1px solid var(--line); text-align: center; font-size: 12px; font-weight: 600; padding-block: 6px; }
.subbar span { background: var(--sky); color: var(--red); padding: 2px 8px; border-radius: 3px; margin-left: 4px; }

/* Header */
header.site { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--white); }
header.site .wrap { display: flex; align-items: center; gap: 18px; padding-block: 10px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.logo img { width: 38px; height: 38px; }
.logo b { font: 700 18px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; }
nav.main { display: flex; gap: 2px 16px; flex-wrap: wrap; flex: 1; min-width: 0; }
nav.main .item { position: relative; }
nav.main .item > a { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #222; text-decoration: none; padding: 10px 0; display: inline-block; }
nav.main .item > a:hover { color: var(--red); }
.mega { display: none; position: absolute; left: 0; top: 100%; background: var(--white); border: 1px solid var(--line); box-shadow: 0 8px 24px rgb(0 0 0 / .12); padding: 16px; z-index: 40; width: max-content; max-width: min(560px, 90vw); }
nav.main .item:hover .mega, nav.main .item:focus-within .mega { display: grid; grid-template-columns: repeat(3, 150px); gap: 12px; }
.mega a { text-decoration: none; font-size: 11px; text-align: center; display: grid; gap: 4px; }
.mega .thumb { height: 110px; display: grid; place-items: center; background: var(--soft); }
.mega .thumb svg { height: 90px; width: auto; }
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ask-btn { border: 2px solid var(--green-dark); color: var(--green-dark); background: var(--white); border-radius: 999px; padding: 7px 16px; font: 600 13px var(--body); cursor: pointer; }
.search { display: flex; }
.search input { font: inherit; font-size: 12px; border: 1px solid #ccc; border-right: 0; padding: 7px 10px; width: 180px; min-width: 0; }
.search button { background: var(--green-dark); color: #fff; border: 0; padding: 0 12px; cursor: pointer; }
.cart { font-size: 12px; text-decoration: none; border: 1px solid #ccc; padding: 6px 10px; }

/* Quick strip */
.quick { border-bottom: 1px solid var(--line); background: var(--white); }
.quick .wrap { display: flex; gap: 6px 26px; overflow-x: auto; padding-block: 10px; }
.quick a { font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.quick a.best { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }

/* Bands */
.band { color: #fff; text-align: center; padding-block: 14px; }
.band h1, .band h2 { font-size: clamp(22px, 3.4vw, 32px); margin: 0; color: #fff; }
.band p { margin: 6px 0 0; font-size: 13px; }
.band.red { background: var(--red); }
.band.navy { background: var(--sky); color: var(--sky-ink); border-block: 1px solid var(--sky-line); }
.band.navy h1, .band.navy h2, .band.deep h1, .band.deep h2 { color: var(--sky-ink); }
.band.deep { background: var(--sky); color: var(--sky-ink); border-block: 1px solid var(--sky-line); }

/* Story blocks: image left, text right */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-block: 32px; align-items: start; }
.story + .story { border-top: 1px solid var(--line); }
.story h3, .story h4 { text-align: center; font-size: 17px; }
.story .copy { font-size: 13px; min-width: 0; }
@media (max-width: 760px) { .story { grid-template-columns: minmax(0, 1fr); } }
.emblem { max-width: 460px; width: 100%; margin: 0 auto; display: block; }
.factcard { background: var(--sky); color: var(--sky-ink); border: 1px solid var(--sky-line); padding: 28px 24px; text-align: center; font-family: var(--head); }
.factcard .from { font-size: 22px; font-weight: 700; }
.factcard .arrow { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .8; margin: 8px 0; }
.factcard .to { font-size: 15px; }
.video { aspect-ratio: 16 / 9; max-width: 100%; background: #111; color: #ddd; display: grid; place-items: center; text-align: center; padding: 16px; font-size: 13px; }

/* Them vs Us */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-block: 32px; }
.vs h5 { font-size: clamp(22px, 3vw, 30px); text-align: center; }
.vs .us h5 { color: var(--green-us); }
.vs .them p.list { font-size: 13px; line-height: 1.9; }
.vs .us h4 { font-size: clamp(22px, 3vw, 30px); text-align: center; }
@media (max-width: 760px) { .vs { grid-template-columns: minmax(0, 1fr); } }

/* Product cards and bestseller strip */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: 16px; overflow-x: auto; padding-block: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; padding-block: 24px; }
.card { text-align: center; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card .img { position: relative; aspect-ratio: 3 / 4; max-width: 100%; display: grid; place-items: center; background: var(--soft); }
.card .img svg { width: 62%; height: auto; }
.card .img img { width: 100%; height: 100%; object-fit: cover; }
.card .badge { position: absolute; left: 0; top: 10px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; }
.card .badge.ok { background: var(--green); }
.card .name { font-size: 13px; color: var(--ink); text-decoration: none; }
.card .price { font-weight: 700; }
.btn { display: inline-block; font: 600 14px var(--body); padding: 11px 22px; border: 0; cursor: pointer; text-decoration: none; text-align: center; }
.btn.green { background: var(--green); color: #fff; }
.btn.navy { background: var(--sky); color: var(--sky-ink); border: 1px solid var(--sky-line); }
.btn.dark { background: #222; color: #fff; }
.btn.small { font-size: 12px; padding: 8px 14px; }

/* Product page */
.crumbs { font-size: 12px; color: var(--muted); padding-block: 14px 0; }
.crumbs a { color: var(--muted); }
.pdp { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; padding-block: 16px 40px; }
@media (max-width: 860px) { .pdp { grid-template-columns: minmax(0, 1fr); } }
.gallery { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
.gallery .thumbs { display: grid; gap: 10px; align-content: start; }
.gallery .thumbs div { aspect-ratio: 1; background: var(--soft); border: 1px solid var(--line); display: grid; place-items: center; }
.gallery .thumbs svg { width: 60%; }
.gallery .main { position: relative; aspect-ratio: 4 / 5; max-width: 100%; background: var(--soft); display: grid; place-items: center; }
.gallery .main svg { width: 58%; }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.ribbon { position: absolute; left: 0; top: 18px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 12px; }
.pdp h1 { font-weight: 700; text-transform: uppercase; font-size: clamp(20px, 2.6vw, 24px); text-align: center; margin-bottom: 4px; }
.launch { background: var(--red); color: #fff; text-align: center; font-size: 12px; font-weight: 600; padding: 3px; }
.trust { display: flex; justify-content: center; gap: 6px 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); padding-block: 10px; }
.trust span::before { content: "✔ "; color: var(--red); }
.save { background: var(--sky); color: var(--sky-ink); text-align: center; font: 700 clamp(18px, 2.4vw, 24px)/1.25 var(--head); padding: 14px; margin-top: 8px; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; padding-block: 16px; }
.tier { border: 1px solid #ccc; text-align: center; padding: 14px 8px; display: grid; gap: 6px; }
.tier:first-child { border: 3px solid var(--red); }
.tier .big { font: 700 26px/1 var(--head); }
.tier .cap { background: var(--sky); font-size: 11px; padding: 2px 6px; justify-self: center; }
.tier .p { font-weight: 700; color: var(--red); }
.pdp-actions { display: grid; gap: 10px; justify-items: center; padding-block: 8px; }
.pdp-actions .btn { min-width: 220px; }
.gate { background: #fbf0ed; border: 1px solid #ecc6bd; padding: 12px 14px; font-size: 13px; width: 100%; }
.details h2 { font-size: 22px; text-align: center; }
.facts { border: 2px solid var(--ink); font-size: 13px; }
.facts .row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.facts .row:last-child { border-bottom: 0; }
.facts .k { font-weight: 600; }
.facts .head { background: var(--ink); color: #fff; padding: 8px 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
@media (max-width: 480px) { .facts .row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
details { border-bottom: 1px solid var(--line); padding-block: 12px; }
summary { cursor: pointer; font-weight: 600; }

/* Tables, forms */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--soft); font-weight: 600; }
form.inline { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
input[type="email"], input[type="text"], select { font: inherit; padding: 10px 12px; border: 1px solid #ccc; background: #fff; color: var(--ink); min-width: 0; flex: 1 1 220px; }
.page { padding-block: 24px 48px; }
.page .prose { max-width: 760px; margin: 0 auto; }
.page h1 { text-align: center; font-size: clamp(24px, 3vw, 30px); }

/* Reviews + footer */
.reviews { background: var(--soft); padding-block: 36px; text-align: center; }
.reviews h2 { font-size: 22px; }
footer.site { background: var(--sky); border-top: 1px solid var(--sky-line); padding-block: 28px; font-size: 13px; color: var(--muted); }
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 24px; align-items: start; }
footer.site a { color: var(--sky-ink); font-weight: 600; text-decoration: none; display: block; padding: 2px 0; }
footer.site .copy { text-align: center; margin-top: 18px; font-size: 12px; }

/* Ask George */
.ask-launch { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: #fff; border: 0; font: 700 11px var(--body); cursor: pointer; box-shadow: 0 6px 18px rgb(0 0 0 / .25); }
.ask-panel { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); background: #fff; border: 1px solid var(--line); z-index: 50; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.ask-panel header { padding: 12px 14px; background: var(--green-dark); color: #fff; display: flex; justify-content: space-between; align-items: center; }
.ask-log { padding: 14px; overflow-y: auto; display: grid; gap: 10px; font-size: 13px; }
.ask-log .q { justify-self: end; background: var(--sky); padding: 8px 10px; max-width: 85%; }
.ask-log .a { background: var(--soft); padding: 8px 10px; max-width: 92%; }
.ask-panel form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.close { background: none; border: 0; font-size: 1.3rem; color: #fff; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Video spaces */
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; padding-block: 20px; }
.vslot { margin: 0; min-width: 0; }
.vbox { aspect-ratio: 16 / 9; width: 100%; max-width: 100%; border: 0; display: grid; place-items: center; text-align: center; background: #111; color: #fff; text-decoration: none; font-weight: 600; }
.vslot.empty .vbox { background: var(--soft); color: var(--muted); border: 2px dashed var(--sky-line); font-weight: 400; }
.vslot figcaption { font-size: 13px; padding-top: 6px; text-align: center; }