/* ==========================================================================
   Buitenhof Outdoor Living — stylesheet
   Hand-written. No framework, no reset library, no external requests.
   Mobile-first: built at 375px, widened at 768px and 1120px.
   ========================================================================== */

/* --- 1. Minimal reset ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  --ink:        #000000;   /* all body and heading text */
  --body:       #000000;   /* paragraphs, meta */
  --buy:   #f2b840;   /* add-to-cart yellow, sampled from the reference */
  --muted: #5a646c;
  --line:       #d7dfe4;   /* hairlines, borders */
  --surface:    #f2f6f8;   /* cards, boxes, section bands */
  --bg:         #ffffff;   /* cards, header, panels */
  --page:       #ffffff;   /* the ground everything sits on */
  --accent:     #2f4a3c;   /* buttons, links, active states */
  --accent-2:   #e6ece7;   /* tint fills */
  --sale:       #c23616;   /* ribbon band, badges, stock warning */
  --sale-price: #e7000b;   /* the discounted price itself */
  --star:       #17a673;   /* rating stars */
  --radius:     12px;
  --gap:        20px;
  --max:        1360px;

  /* 4px spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;

  --gutter: 16px;
  --section-y: 28px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
              Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.2, .6, .3, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --section-y: 44px; }
}

/* --- 3. Base ------------------------------------------------------------- */

body {
  font-family: var(--font);
  font-size: 17px;          /* 50+ readability: 15px was too small to scan */
  font-weight: 400;
  line-height: 1.62;
  color: var(--body);
  background: var(--page);
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-dark :focus-visible,
.ribbon :focus-visible { outline-color: #ffffff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.section { padding-block: var(--section-y); }
.hero + .section { padding-top: var(--s5); }
.section--tint { background: var(--surface); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.section-head p { margin-top: var(--s2); max-width: 62ch; }
.section-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
}

.meta { font-size: 15px; }

/* --- 4. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 54px;
  padding: 0 var(--s6);
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: #263c31; }
.btn:active { transform: translateY(1px); }

.btn--light {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.btn--light:hover { background: #f3f1ec; }

.btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--accent-2); }

.btn--lg { min-height: 60px; padding: 0 var(--s8); font-size: 18px; }
.btn--buy { width: 100%; }

/* --- 5. Utility bar ------------------------------------------------------ */

.utility {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--body);
}
.utility ul {
  display: flex;
  justify-content: center;
  gap: var(--s5);
  min-height: 36px;
  align-items: center;
  flex-wrap: wrap;
}
.utility li:nth-child(2), .utility li:nth-child(3), .utility li:nth-child(4) { display: none; }
.utility svg { width: 14px; height: 14px; flex: none; }
.utility li { display: inline-flex; align-items: center; gap: 6px; }
.utility .rate { font-weight: 600; color: var(--ink); }
.utility .rate .stars { margin-right: 2px; }

@media (min-width: 768px) {
  .utility ul { justify-content: space-between; }
  .utility li:nth-child(2), .utility li:nth-child(3), .utility li:nth-child(4) { display: inline-flex; }
}

/* --- 6. Sticky top group (header + nav) ---------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 64px;
}

/* Serif SERGE with a rule and wide-tracked HOME beneath it. */
.wordmark {
  display: inline-block;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  text-indent: .1em;
  white-space: nowrap;
}
.wordmark span {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  font-family: var(--font);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.header__spacer { flex: 1; }

.search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 var(--s4);
  height: 42px;
}
.search svg { width: 18px; height: 18px; color: var(--body); flex: none; }
.search input {
  border: 0; background: none; width: 100%; height: 100%;
  font-size: 15px; min-width: 0;
}
.search input::placeholder { color: #5b6360; }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--accent); }

/* Suggestions hang off the search field. Rows are 64px so a thumb lands on the
   one it aimed at, and each row is a whole link, not a link inside a row. */
.search { position: relative; }
.sugg {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(17, 17, 17, .18);
  overflow: hidden;
}
.sugg[hidden] { display: none; }
.sugg a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 64px;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.sugg a:last-child { border-bottom: 0; }
.sugg a:hover, .sugg a:focus { background: var(--brand); }
.sugg img, .sugg svg { width: 52px; height: 52px; flex: none; border-radius: 8px; }
.sugg img { object-fit: cover; }
.sugg svg { background: var(--brand); padding: 4px; }
.sugg__txt { flex: 1; min-width: 0; }
.sugg__txt b { display: block; font-size: 15px; font-weight: 600; }
.sugg__txt span { font-size: 13px; color: var(--muted); }
.sugg__price { font-size: 15px; font-weight: 700; white-space: nowrap; }
.sugg__all { justify-content: center; font-weight: 700; color: var(--accent); min-height: 52px; }
.sugg__none { padding: var(--s4); font-size: 15px; color: var(--body); }

/* desktop search sits inline; mobile search drops to its own row */
.header__search { display: none; flex: 1; max-width: 520px; }

.header__mobilesearch { display: block; }
.header__mobilesearch[hidden] { display: none; }
.header__mobilesearch .wrap { padding-bottom: var(--s3); }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  color: var(--ink);
  transition: background-color .18s var(--ease);
}
.iconbtn:hover { background: var(--surface); }
.iconbtn svg { width: 24px; height: 24px; }

.header__icons { display: flex; align-items: center; gap: 2px; }
/* Push the phone number and icons to the far right: the search box has a
   max-width, so without this the leftover space collects after the icons
   instead of between the search and them. */
.header__icons { margin-left: auto; }

.header__icons .iconbtn--desk { display: none; }

@media (min-width: 900px) {
  .header .wrap { min-height: 84px; gap: var(--s6); }
  .wordmark { font-size: 29px; }
  .wordmark span { font-size: 10px; letter-spacing: .22em; }
  .header__search { display: flex; }
  .header__mobilesearch { display: none !important; }
  .header__icons .iconbtn--desk { display: inline-flex; }
  .header__icons .iconbtn--mob { display: none; }
  .header__spacer { display: none; }
}

/* --- 7. Nav + mega panel ------------------------------------------------- */

.nav { display: none; position: relative; }

@media (min-width: 900px) { .nav { display: block; } }

.nav__list { display: flex; gap: var(--s2); flex-wrap: wrap; }
.nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 var(--s3);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__btn svg { width: 16px; height: 16px; transition: transform .18s var(--ease); }
/* Big Green Egg + Barbecues push the bar wide on smaller laptops */
@media (max-width: 1180px) {
  .nav__list { gap: 0; }
  .nav__btn { padding: 0 var(--s2); font-size: 14.5px; }
}
.nav__btn:hover { color: var(--accent); }
.nav__btn[aria-expanded="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 30px -22px rgba(25, 27, 24, .35);
  z-index: 70;
}
.mega[hidden] { display: none; }
.mega__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
  gap: var(--s8);
  padding-block: var(--s7);
}
.mega__col h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: var(--s3);
}
.mega__col li + li { margin-top: var(--s2); }
.mega__col a {
  font-size: 14px;
  color: var(--body);
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease);
}
.mega__col a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.mega__col a.is-all { color: var(--accent); font-weight: 600; }

/* align-self keeps the tile its own size instead of being stretched to the
   height of the tallest link column beside it. */
.mega__tile { display: block; align-self: start; }
/* The product shots are square, so the tile is square. height:auto matters:
   without it the img's height="600" attribute wins and the picture renders
   300 wide by 600 tall. */
.mega__tile svg, .mega__tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--surface);
}
.mega__tile img { object-fit: cover; }
.mega__tile span {
  display: block;
  margin-top: var(--s3);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}



/* --- Executieverkoop ------------------------------------------------------
   Firm without shouting. A solid red badge does the work a full red panel was
   doing, so the word still hits first, but the block reads as an offer rather
   than a warning notice. Beige ground, black headline, discount in red. */

.exec {
  /* A red wash rather than a red panel: enough to register as urgent at a
     glance, not enough to read as a warning notice. */
  background: #fdeceb;
  border-bottom: 2px solid #b3121b;
  text-align: center;
  padding-block: 12px 11px;
}
.exec__tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 5px;
  background: #b3121b;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.exec__head {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
/* The discount is the offer, so it carries the colour. */
.exec__head b { color: #b3121b; font-weight: 800; }
/* One worry answered: a price this low must not read as risky. */
.exec__safe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
}
/* Black, not green. The red badge and the red discount already carry the
   colour in this block; a third hue made it look assembled rather than
   designed. */
.exec__safe svg { width: 15px; height: 15px; flex: none; color: var(--ink); }

/* The per-category extra line. .exec__safe is inline-flex, so a second one
   would sit alongside the first instead of under it; flex is block-level and
   starts its own line while still centring its own contents. */
.exec__safe--extra {
  display: flex;
  justify-content: center;
  margin-top: 4px;
  color: var(--ink);
}
.exec__safe--extra svg { color: var(--accent, #a4161a); }

/* The installation bar on an airconditioner product page. Full width, above
   the gallery, in the same red as the sale banner so it reads as part of the
   offer rather than as a generic trust badge. */
.pdp__plaatsing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 11px 16px;
  border-radius: 10px;
  background: #a4161a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.pdp__plaatsing svg { width: 18px; height: 18px; flex: none; color: #fff; }
@media (max-width: 640px) {
  .pdp__plaatsing { font-size: 14px; padding: 10px 12px; }
}

@media (min-width: 768px) {
  .exec { padding-block: 20px 18px; }
  .exec__tag { font-size: 12.5px; padding: 5px 13px; }
  .exec__head { font-size: 30px; margin-top: 9px; }
  .exec__safe { margin-top: 9px; font-size: 15px; }
}

/* --- 8. Mobile drawer ---------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(25, 27, 24, .45);
  z-index: 90;
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.scrim[hidden] { display: none; }
.scrim.is-open { opacity: 1; }

.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(88vw, 380px);
  background: var(--bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .26s var(--ease);
}
.drawer[hidden] { display: none; }
.drawer.is-open { transform: translateX(0); }

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.drawer__body { overflow-y: auto; padding: var(--s2) var(--s5) var(--s8); flex: 1; }

/* Big, single-level rows: one tap per category, nothing to expand. */
.dlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 60px;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.dlink svg { width: 22px; height: 22px; flex: none; color: var(--body); transform: rotate(-90deg); }
.dlink:hover { color: var(--accent); }
.dlink--all { color: var(--accent); }

.drawer__call {
  display: block;
  margin-top: var(--s6);
  padding: var(--s5);
  border-radius: var(--radius);
  background: var(--accent-2);
  text-align: center;
}
.drawer__call span { display: block; font-size: 15px; color: var(--body); }
.drawer__call b { display: block; font-size: 24px; font-weight: 800; color: var(--accent); padding: 4px 0; }

.drawer__extra { margin-top: var(--s6); }
.drawer__extra a { display: block; padding: var(--s3) 0; font-size: 17px; color: var(--body); }
.drawer__extra a:hover { color: var(--accent); }

/* --- 10. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #eef1f3;
  text-align: center;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78%;
  z-index: -2;
}
/* the building reads as a pale ground, not a photo competing with the type */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 55%,
                    rgba(255,255,255,.9) 100%);
}
.hero__in { padding-block: var(--s7) var(--s6); }

.hero__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #3f7a6d;
  text-wrap: balance;
}
.hero h1 {
  margin-top: var(--s4);
  font-family: var(--display);
  font-size: clamp(32px, 5.4vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__body {
  margin: var(--s5) auto 0;
  max-width: 56ch;
  font-size: 16px;
  color: var(--body);
}
.hero__flag { color: var(--sale-price); font-weight: 800; white-space: nowrap; }
/* Primary sits on its own row, the category links share the row under it. */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s6);
}
@media (max-width: 759px) {
  .hero__cta { gap: 14px; }
}
.hero__cta-main { flex: 0 0 100%; margin-bottom: var(--s1); }
/* Full-width stacked targets. The buyer here is 55+ on a phone, so a ragged
   two-then-one wrap with an orphan on its own line is the wrong shape: every
   link gets the same width as the primary above it, and the gap between them
   is wide enough that a shaky tap cannot land on the neighbour. They go side
   by side only once there is genuinely room for all three. */
.hero__cta .btn--ghost {
  flex: 0 0 100%;
  min-height: 58px;
  padding: 0 var(--s4);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  border-color: rgba(17, 17, 17, .18);
}
.hero__cta .btn--ghost:hover {
  border-color: rgba(17, 17, 17, .34);
  background: #fff;
}
@media (min-width: 760px) {
  .hero__cta .btn--ghost {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(33.333% - (var(--s3) * 2 / 3));
    white-space: nowrap;
  }
}
.hero .btn--ghost { background: #fff; }

@media (min-width: 768px) {
  .hero__in { padding-block: var(--s8) var(--s7); }
}

/* --- 11. Stars ----------------------------------------------------------- */

/* The gold row is absolutely positioned over the grey row and clipped to the
   rating percentage. The star svgs must not flex-shrink, or the clip squashes
   five narrow stars into the box instead of showing four and a bit. */
.stars {
  position: relative;
  display: inline-flex;
  flex: none;
  line-height: 0;
  vertical-align: -2px;
}
.stars__bg,
.stars__fg { display: flex; }
.stars svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
.stars__bg { color: #c9d2d6; }
.stars__fg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--pct, 100%);
  overflow: hidden;
  color: var(--star);
}

.hero__rating .stars svg { width: 17px; height: 17px; flex: 0 0 17px; }

/* Tile variant for the review block: white star on a filled square, the grey
   track showing through for the unfilled part. */
.stars--tile { gap: 0; }
.stars--tile svg {
  flex: none;
  width: 25px; height: 25px;
  padding: 0;
  border-radius: 2px;
  margin-right: 3px;
  color: #fff;
}
.stars--tile .stars__bg svg { background: #c9d2d6; }
.stars--tile .stars__fg svg { background: var(--tp, #00b67a); }
.card__rating .stars--tile svg {
  width: 21px; height: 21px;
  border-radius: 2px;
  margin-right: 2px;
}
.card__rating .stars--tile { margin-right: 2px; }
.card__score { font-weight: 700; color: var(--ink); }
.hero__rating .stars__bg { color: rgba(255, 255, 255, .38); }

/* --- 12. Category tiles -------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tile {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.tile svg {
  width: 100%;
  aspect-ratio: 4 / 3;
  transition: transform .35s var(--ease);
}
.tile__chip {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  transition: transform .3s var(--ease);
  box-shadow: 0 1px 2px rgba(25, 27, 24, .1);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover svg { transform: scale(1.04); }
  .tile:hover .tile__chip { transform: translateY(-2px); }
}

/* --- 13. Product cards --------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  /* white on a white page needs a shadow to still read as a box */
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 4px 14px rgba(16, 24, 32, .07);
}
/* absolutely positioned so the photo always fills the square tile; a
   percentage height against an aspect-ratio parent is not reliable */
.card__link { position: absolute; inset: 0; display: block; }
.card__tile--photo .card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__tile:not(.card__tile--photo) .card__link { position: static; }
.card__title {
  display: block;
  margin-top: 4px;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  min-height: 2.6em;          /* exactly two lines at that line-height */
}
.card__title:hover { color: var(--accent); }
.card__body { flex: 1; display: flex; flex-direction: column; padding: var(--s3) var(--s4) var(--s4); }
.btn--sm { min-height: 48px; padding: 0 var(--s4); font-size: 16px; }
.card__buy,
.btn--buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-weight: 700;
  letter-spacing: .01em;
  color: #131313;
  background: linear-gradient(180deg, #f8c65a 0%, var(--buy) 100%);
  border-color: #d79c22;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset,
              0 2px 6px rgba(120, 84, 12, .28);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
/* The pair sits at the foot of the card: margin-top:auto moves to the view
   button so both stay together no matter how many lines the title takes. */
.card__view {
  width: 100%;
  margin-top: auto;
  margin-bottom: var(--s2);
  background: #fff;
  border-color: #cfd5d2;
  color: var(--ink);
  font-weight: 600;
}
.card__view:hover { border-color: var(--ink); background: #fff; }
.card__buy { width: 100%; padding-top: 0; }

/* Quantity dropdown, stacked above the buy button. A native select keeps the
   platform picker, which is the whole point on a phone. */
.qtysel { position: relative; margin-bottom: var(--s3); }
.qtysel select {
  width: 100%;
  height: 56px;
  padding: 0 44px 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.qtysel select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.qtysel svg {
  position: absolute;
  right: var(--s4);
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  pointer-events: none;
  color: var(--ink);
}
.card__buy svg,
.btn--buy svg { width: 19px; height: 19px; flex: none; }
.btn--buy[data-checkout] { width: 100%; }
.card__buy:hover,
.btn--buy:hover {
  background: linear-gradient(180deg, #ffd06b 0%, #eeae2c 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
              0 5px 14px rgba(120, 84, 12, .34);
}
.card__buy:active,
.btn--buy:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(120, 84, 12, .32); }
.card__buy.is-added,
.btn--buy.is-added { background: #1d5c3c; border-color: #1d5c3c; color: #fff; box-shadow: none; }

.card__tile {
  position: relative;
  display: block;
  background: var(--surface);
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  padding: 12%;
}
/* Photographed products fill the tile edge to edge; the drawn silhouettes
   keep the 12% inset above. */
.card__tile--photo { padding: 0; }

.card__art,
.card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__art,
  .card:hover .card__photo { transform: scale(1.04); }
}

/* Both badges live in one flex row rather than being pinned to opposite
   corners: at 165px of card width they used to slide into each other. */
.card__tile { --badge-gap: var(--s2); }
.badge {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  right: var(--s3);
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.badge::before {
  content: attr(data-label);
  padding: 5px 10px;
  border-radius: 999px;
  /* Dark green with a white hairline, and both halves are doing work.
     Two colours on a card are already spoken for and neither can be borrowed:
     #f2b840 is the add-to-cart button and #c23616 is the discount chip, so
     amber, gold and red all compete with something the customer needs to read.
     White is out because the Philips pack shot has a white background. That
     leaves a dark fill, which separates on white and on pale wicker, plus a
     white rim, which separates on the hedge and on dark cushions — every other
     option failed at one end or the other.

     Charcoal and not the #2f4a3c accent: green was tried live and lost on the
     foliage every one of these photographs is shot against. Matching the brand
     is worth nothing if the badge stops being seen, and near-black is the only
     fill that separates from grass, hedge, wicker and a white pack shot alike. */
  background: #26231f;
  color: #fff;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(20, 20, 20, .32);
  white-space: nowrap;
}
.badge--sale::before {
  background: var(--sale);
  color: #fff;
  border-color: transparent;
  text-shadow: none;
}
.badge--new::before  { background: var(--accent); }
/* Opposite corner, not the opposite end of the same row: at 320px the two
   pills need 135px and the tile only offers 110px, so side by side always
   collides on the narrowest phones. Diagonal corners never can. */
.badge--off {
  top: auto;
  bottom: var(--s3);
  justify-content: flex-end;
}
.badge--off::before {
  background: var(--sale);
  color: #fff;
  border-color: transparent;
  text-shadow: none;
  letter-spacing: .02em;
}

@media (max-width: 400px) {
  .badge { font-size: 10px; }
  .badge::before { padding: 4px 8px; }
}


.card__meta { display: block; font-size: 15px; color: var(--muted); margin-top: 3px; }

.card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
  margin-bottom: var(--s4);
}
.price { font-size: 21px; font-weight: 800; color: var(--ink); }
.price--sale { color: var(--sale-price); }
.price__was { font-size: 15px; color: var(--body); text-decoration: line-through; }
.chip-off {
  font-size: 11px;
  font-weight: 700;
  color: var(--sale);
  background: #fbe9e4;
  border-radius: 999px;
  padding: 3px 8px;
}

.card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--muted);
}

/* --- 14. Trust band ------------------------------------------------------ */

/* Four separate boxes rather than one tinted band, matching the card family. */
.trust {
  background: transparent;
  border-block: 0;
}
.trust ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding-block: var(--s5);
}
@media (min-width: 768px) {
  .trust ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.trust li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 4px 14px rgba(16, 24, 32, .07);
}
.trust svg { width: 30px; height: 30px; color: var(--accent); flex: none; }
.trust strong { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.trust span { display: block; font-size: 13px; }

/* --- 19. Footer ---------------------------------------------------------- */

.footer {
  background: var(--surface);
  color: var(--body);
  border-top: 1px solid var(--line);
  padding-block: var(--s7) 0;
}
.footer h3 {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
}
.footer__grid {
  display: grid;
  gap: var(--s6);
  padding-bottom: var(--s6);
}
@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1.3fr 1fr;
    gap: var(--s7);
  }
}

.footcol h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s4);
}
.footcol li + li { margin-top: var(--s3); }
.footcol a { font-size: 16px; }
.footcol p { font-size: 16px; max-width: 40ch; }
.footcol p + p { margin-top: var(--s3); }

.foothelp__score {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.foothelp__score b { color: var(--ink); font-size: 17px; }
.foothelp__score .stars svg { width: 18px; height: 18px; flex: 0 0 18px; }
.foothelp__hours { color: var(--body); opacity: .75; font-size: 15px; }

.paychips { display: flex; flex-wrap: wrap; gap: var(--s3); }
.paychip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.paychip img { height: 24px; width: auto; display: block; }
.paychip svg { width: 17px; height: 17px; flex: none; }
.footcol__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s4);
  font-size: 15px;
}
.footcol__note svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }

.footer__rule { border: 0; border-top: 1px solid var(--line); margin-block: var(--s5); }

.footbrand { padding-bottom: var(--s8); }
.wordmark--foot { color: var(--ink); font-size: 23px; }
.wordmark--foot span { color: var(--accent); border-top-color: var(--line); }
.ratingbar--foot { padding-block: var(--s4) 0; }
.ratingbar--foot b { color: var(--ink); }

.footbrand__sub { margin-top: var(--s2); font-size: 15px; color: var(--body); }
.certrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s5);
  width: fit-content;
  max-width: 100%;
}
.certrow img { height: 29px; width: auto; display: block; }
/* all four on one line; bpost's mark is optically larger so it sits a touch smaller */
.certrow__bpost { height: 25px; }
.footbrand__addr {
  margin-top: var(--s6);
  font-style: normal;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
}
.footbrand__addr b { display: block; color: var(--ink); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.pay { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pay span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 6px;
  color: rgba(255, 255, 255, .82);
}
.social { display: flex; gap: var(--s2); }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #fff;
  transition: background-color .18s var(--ease);
}
.social a:hover { background: rgba(255, 255, 255, .12); }
.social svg { width: 18px; height: 18px; }
.legal { font-size: 14.5px; color: var(--body); }

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* --- 20. Collection page ------------------------------------------------- */


.collection__head { padding-top: var(--s5); }
.collection__head h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.intro { margin-top: var(--s3); max-width: 70ch; }
.intro p + p { margin-top: var(--s3); }
.intro__more[hidden] { display: none; }
.intro__toggle {
  margin-top: var(--s2);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}

.filters {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s5);
  overflow-x: auto;
  padding-bottom: var(--s2);
  scrollbar-width: thin;
}
/* An author rule beats the browser's own [hidden] { display: none }, whatever
   the specificity, so any element that carries a display here has to say so
   itself. Without this the empty split box sat between the sale bar and the
   grid on every collection that has no split, holding open its margin-top and
   its padding as a band of white. */
.filters[hidden] { display: none; }
.filters .pill { flex: none; }

/* The split at the head of a collection that holds two clearly different
   things — dames and heren bikes. Reads as a choice, not as a breadcrumb. */
.pill {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.pill:hover { border-color: var(--ink); }
.pill.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.resultsbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s3);
  padding-block: var(--s4);
  border-block: 1px solid var(--line);
}
.resultsbar p { font-size: 14px; }
.sortwrap { display: flex; align-items: center; gap: var(--s2); }
.sortwrap label { font-size: 14px; }
.resultsbar select {
  height: 42px;
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}


.faq { max-width: 780px; margin-inline: auto; }
.faq h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 600; margin-bottom: var(--s5); }
/* Accordion, matching the reference: thin + marker on the right, hairline
   between every row including above the first, everything closed by default. */
.faq details,
.doc details {
  border-bottom: 1px solid var(--line);
}
.faq details:first-of-type,
.doc details:first-of-type {
  border-top: 1px solid var(--line);
  margin-top: var(--s5);        /* keep the rule off the heading above it */
}
.faq summary,
.doc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) 0;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker,
.doc summary::-webkit-details-marker { display: none; }
.faq summary::after,
.doc summary::after {
  content: "+";
  flex: none;
  width: 22px;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  color: var(--body);
}
.faq details[open] summary::after,
.doc details[open] summary::after { content: "−"; }
.faq summary:hover,
.doc summary:hover { color: var(--accent); }
.faq details p,
.doc details p { padding-bottom: var(--s5); margin-top: 0; max-width: 66ch; }

.empty {
  padding: var(--s9) 0;
  text-align: center;
}
.empty[hidden] { display: none; }

/* --- 21. Product page ---------------------------------------------------- */

.pdp {
  display: grid;
  gap: var(--s6);
  padding-block: var(--s4) var(--s6);
}
@media (min-width: 900px) {
  .pdp {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s8);
    align-items: start;
    padding-block: var(--s5) var(--s6);
  }
}

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

.gallery__stage {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.gallery__stage--svg { padding: 12%; }
.gallery__stage.is-clickable { cursor: pointer; }
.gallery__stage.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* subtle hint that the image advances on click */
.gallery__stage.is-clickable::after {
  content: "";
  position: absolute;
  right: var(--s4);
  bottom: var(--s4);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191b18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 1px 4px rgba(25, 27, 24, .18);
  pointer-events: none;
  opacity: .85;
}

.gallery__main { width: 100%; height: 100%; object-fit: cover; }
.gallery__main[hidden] { display: none; }
.gallery__main--svg { object-fit: contain; }

/* Thumbs sit in a column beside the picture rather than a row beneath it.
   A row costs its own height on every screen; a column costs nothing, because
   five thumbs stack shorter than the square image they sit next to. */
.gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: var(--s2);
  align-items: start;
}
.gallery__thumbs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
}
.gallery__thumb {
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  transition: border-color .18s var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { border-color: var(--line); }
.gallery__thumb[aria-selected="true"] { border-color: var(--accent); }

.pdp__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.pdp__info h1 {
  margin-top: var(--s2);
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pdp__rating {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  font-size: 14px;
}
.pdp__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}
.pdp__price .price { font-size: 28px; }
.pdp__vat { font-size: 13px; margin-top: var(--s1); }
.pdp__desc { margin-top: var(--s5); max-width: 52ch; }

.specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 var(--s5);
  margin-top: var(--s6);
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.specs dt {
  padding: var(--s3) 0;
  color: var(--body);
  border-bottom: 1px solid var(--line);
}
.specs dd {
  padding: var(--s3) 0;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.pdp__ticks { margin-top: var(--s6); display: grid; gap: var(--s3); font-size: 14px; }
.pdp__ticks li { display: flex; align-items: center; gap: var(--s2); }
.pdp__ticks svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

.pdp__back { margin-top: var(--s7); }

/* --- 21b. Category banner ------------------------------------------------ */

.catbanner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 170px;
  background: var(--surface);
  overflow: hidden;
}
.catbanner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.catbanner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(20, 24, 20, .72) 0%, rgba(20, 24, 20, .3) 38%,
                    rgba(20, 24, 20, 0) 72%),
    linear-gradient(100deg, rgba(20, 24, 20, .6) 0%, rgba(20, 24, 20, .18) 42%,
                    rgba(20, 24, 20, 0) 70%);
}
.catbanner .wrap { padding-block: var(--s5); }
.catbanner__text { max-width: 44ch; color: #fff; }
.catbanner__text h1 {
  color: #fff;
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
.catbanner__text p {
  margin-top: var(--s3);
  color: rgba(255, 255, 255, .9);
  font-size: 16px;
}

@media (min-width: 768px) {
  .catbanner { min-height: 240px; }
  .catbanner .wrap { padding-block: var(--s7); }
}

.collection__head { padding-top: var(--s8); border-top: 1px solid var(--line); margin-top: var(--s8); }

/* --- 21c. Conversion: buy block, sticky bar, cart badge ------------------ */

.buy {
  margin-top: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--accent-2);
}
.buy__stock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2c6e49;
  margin-bottom: var(--s3);
}
.buy__stock::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2c6e49;
  flex: none;
}
.buy__done {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.buy__done[hidden] { display: none; }
.buy__done svg { width: 18px; height: 18px; flex: none; }
.buy__trust {
  display: grid;
  gap: 7px;
  margin-top: var(--s4);
  font-size: 13.5px;
}
.buy__trust li { display: flex; align-items: center; gap: 7px; }
.buy__trust svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

.iconbtn--cart { position: relative; }
.cartdot {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--sale);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.cartdot[hidden] { display: none; }

/* Sticky add-to-cart, all breakpoints. */
.stickybuy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -16px rgba(25, 27, 24, .55);
  transform: translateY(100%);
  transition: transform .22s var(--ease);
}
.stickybuy.is-up { transform: translateY(0); }
.stickybuy[hidden] { display: none; }

.stickybuy__in {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s2);
  padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px));
}
.stickybuy__thumb {
  width: 48px; height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface);
  flex: none;
  display: none;
}
.stickybuy__name {
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}
.stickybuy__price {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex: 1;
  min-width: 0;
}
.stickybuy__price .price { font-size: 17px; }
.stickybuy__price .price__was { font-size: 13px; }
.stickybuy__price .chip-off { display: none; }
.stickybuy__btn {
  /* content width, never the whole bar: the price has to stay readable next
     to it, and 54px + 24px icon + 800 weight was eating the row */
  flex: 0 0 auto;
  width: auto;
  max-width: 62%;
  min-height: 46px;
  gap: var(--s2);
  font-size: 15px;
  font-weight: 700;
  padding: 0 var(--s5);
  white-space: nowrap;
}
.stickybuy__btn svg { width: 18px; height: 18px; flex: none; }

@media (min-width: 640px) {
  .stickybuy__thumb { display: block; }
  .stickybuy__name { display: block; flex: 1; }
  .stickybuy__price { flex: none; }
}

/* keep the bar from covering the last of the footer */
body:has(.stickybuy) .footer { padding-bottom: 0; }
body:has(.stickybuy) .footoutro { padding-bottom: calc(clamp(16px, 2.5vw, 34px) + 62px + env(safe-area-inset-bottom, 0px)); }

/* --- 21c1. Call-us block: 50+ buyers phone rather than abandon ---------- */

.callus {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  background: var(--brand);
}
.callus svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.callus span { display: block; font-size: 15px; color: var(--body); }
.callus b { display: block; font-size: 23px; font-weight: 800; color: var(--ink); padding: 2px 0; }

.header__call {
  display: none;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-size: 17px;
}
.header__call svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.header__call:hover { color: var(--accent); }
@media (min-width: 1100px) { .header__call { display: inline-flex; } }

/* --- 21c2. Rating bar above the products -------------------------------- */

.ratingbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-block: var(--s5) var(--s2);
  font-size: 16px;
}
.ratingbar b { color: var(--ink); font-weight: 800; }
.ratingbar .score { color: var(--ink); font-weight: 800; }
.ratingbar .stars svg { width: 21px; height: 21px; flex: 0 0 21px; }
.ratingbar .sep { color: var(--line); }
.tplogo { height: 26px; width: auto; flex: none; }
.ratingbar span.src { color: var(--body); font-size: 14.5px; }
.ratingbar .src b { color: var(--body); font-weight: 700; }

@media (min-width: 768px) { .ratingbar { padding-block: var(--s6) var(--s2); } }

/* --- 21d. Product detail: layout, cards, reviews, USP -------------------- */

/* the buy block is plain on the PDP; 21c styles it as a box for other uses */
.buy {
  margin-top: var(--s5);
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.buy .btn { width: 100%; }

.buy__row { display: flex; gap: var(--s3); align-items: stretch; }
.buy__row .btn { flex: 1; width: auto; }
.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  flex: none;
}
.qty button {
  width: 42px; height: 54px;
  font-size: 19px; font-weight: 600;
  color: var(--ink);
  border-radius: 999px;
}
.qty button:hover { color: var(--accent); }
.qty input {
  width: 32px; height: 54px;
  border: 0; background: none;
  text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qty input:focus { outline: none; }
.btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--outline { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--outline:hover { background: var(--surface); }

.pdp__back-top {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding-top: var(--s5);
  font-size: 15px;
  color: var(--body);
}
.pdp__back-top svg { width: 18px; height: 18px; flex: none; }
.pdp__back-top:hover { color: var(--accent); }

.pdp__eyebrow a { color: inherit; }
.pdp__crumbline { margin-top: var(--s3); font-size: 14.5px; color: var(--muted); }
.pdp__crumbline a { color: inherit; }
.pdp__crumbline a:hover { color: var(--accent); }

.pdp__score {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.pdp__score .stars svg { width: 18px; height: 18px; flex: 0 0 18px; }
.pdp__score span { font-weight: 700; color: var(--ink); }

.pdp__info h1 {
  margin-top: var(--s3);
  font-family: var(--font);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.pdp__price { align-items: baseline; gap: var(--s3); margin-top: var(--s5); }
.pdp__price .price { font-size: clamp(28px, 4.2vw, 38px); color: var(--sale-price); font-weight: 800; }
.pdp__price .price__was { font-size: 18px; }

/* Same 30px icon column as /* Lost when the delivery-lines block was removed: a regex meant for
   .pdp__lines swallowed this rule with it, which left the stock line as plain
   black text with no dot. Flex rather than the old grid, because the 30px icon
   column it used to align against no longer exists. */
.pdp__stock {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--sale);
}
.pdp__stock::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--sale);
  flex: none;
  animation: stockpulse 1.8s ease-out infinite;
}
@keyframes stockpulse {
  0%   { box-shadow: 0 0 0 0 rgba(194, 54, 22, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(194, 54, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 54, 22, 0); }
}

/* fixed icon column: the bpost bitmap-ish mark is wider than the sprite icons,
   so both are centred in the same 30px slot and the text always starts level */

/* supplied brand marks keep their own colour, so they are <img> not sprite use */
.brandmark { flex: none; width: 30px; height: auto; margin-top: 1px; }
.buybox .brandmark { width: 28px; }
.paycard { display: flex; justify-content: center; margin-top: var(--s3); }
.paycard img { width: 46px; height: auto; }
.footer__pay img { width: 38px; height: auto; flex: none; }

.buybox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 4px 14px rgba(16, 24, 32, .07);
  font-size: 15.5px;
}
.buybox li { display: grid; grid-template-columns: 26px 1fr; gap: var(--s2); align-items: start; }
.buybox svg { width: 19px; height: 19px; color: var(--accent); justify-self: center; margin-top: 1px; }
.buybox .brandmark { width: 26px; justify-self: center; margin-top: 2px; }

.track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s5);
  text-align: center;
  position: relative;
}
.track::before {
  content: "";
  position: absolute;
  top: 25px; left: 16%; right: 16%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.track li { position: relative; z-index: 1; }
.track i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
}
.track svg { width: 22px; height: 22px; flex: 0 0 22px; }
.track b { display: block; margin-top: var(--s2); font-size: 14px; color: var(--ink); }
.track span { display: block; font-size: 13.5px; color: var(--body); text-decoration: underline; }

.paysafe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s5);
  font-size: 14px;
  color: var(--body);
}
.paysafe svg { width: 17px; height: 17px; flex: 0 0 17px; }

.tabs { display: flex; gap: var(--s6); margin-top: var(--s6); border-bottom: 1px solid var(--line); }
.tabs button {
  padding-bottom: var(--s3);
  font-size: 17px;
  font-weight: 700;
  color: var(--body);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabpanel[hidden] { display: none; }

.pdp__detail { border-top: 1px solid var(--line); margin-top: 0; }
.pdp__detail .doc { max-width: 780px; margin-inline: auto; padding-block: 0 var(--s7); }
.doc__h { font-family: var(--font); font-size: 20px; font-weight: 700; margin-top: var(--s6); border-top: 0; padding-top: 0; }

.pluslist { list-style: none; padding-left: 0; margin-top: var(--s4); display: grid; gap: var(--s3); }
.pluslist li { display: flex; align-items: flex-start; gap: var(--s3); margin-top: 0; }
.pm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  flex: none;
  margin-top: 1px;
}
.pm svg { width: 13px; height: 13px; display: block; }

.infocard { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-top: var(--s5);  box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 4px 14px rgba(16, 24, 32, .07); }
.infocard--pad { padding: var(--s5) var(--s6); }
.infocard h3 { font-size: 17px; font-weight: 700; }

.checklist { list-style: none; padding-left: 0; margin-top: var(--s4); display: grid; gap: var(--s3); }
.checklist li { display: flex; align-items: flex-start; gap: var(--s3); margin-top: 0; }
.checklist svg { width: 19px; height: 19px; flex: 0 0 19px; color: #0f766e; margin-top: 2px; }

.kvlist { margin-top: var(--s3); }
.kv {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.kv dt { color: var(--body); }
.kv dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); }
.kv:last-child { border-bottom: 0; padding-bottom: 0; }

.reviews__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: 20px;
  margin-top: var(--s4);
}
.reviews__word { font-size: 18px; }
.reviews__top b { font-size: 20px; }
.reviews__top span { font-size: 15px; }
.reviews__top .stars--tile svg { width: 22px; height: 22px; }
.reviews__top .tplogo { height: 22px; margin-left: var(--s1); }
.reviews__top .stars svg { width: 21px; height: 21px; flex: 0 0 21px; }
.reviews__top b { color: var(--ink); font-weight: 800; }
.reviews__top span { font-size: 15px; color: var(--body); }

.review {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin-top: var(--s3);
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 4px 14px rgba(16, 24, 32, .07);
}
.review header {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.review__av {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-2);
  flex: none;
}
.review__who { flex: 1; min-width: 0; }
.review__who b { display: block; color: var(--ink); font-size: 17.5px; }
.review__who span { display: block; font-size: 15px; color: var(--muted); }
/* .review__who span sets display:block and outranks a bare .review__place
   (0,1,1 vs 0,1,0), so the flex never applied and the flag broke to its own
   line. Qualify it to win. */
.review__who .review__place {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.review__place .flag {
  width: 18px; height: 12px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(16, 24, 32, .12);
}
.review time { font-size: 15px; color: var(--muted); flex: none; align-self: flex-start; white-space: nowrap; }
.review__rate {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
}
.review__ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 15px;
  color: #00875a;
}
.review__ok svg { width: 18px; height: 18px; flex: none; }
.review p { margin-top: var(--s3); max-width: 66ch; }
.reviews__more { width: 100%; margin-top: var(--s6); }

.usp__pay { font-size: 18px; font-weight: 800; color: var(--ink); padding-top: var(--s5); border-top: 1px solid var(--line); }

.relgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (min-width: 768px) { .relgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Same white-box treatment as the product cards, so the strip reads as three
   boxes rather than three loose images on a tint. */
.relcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 4px 14px rgba(16, 24, 32, .07);
  transition: box-shadow .15s ease;
}
.relcard:hover { box-shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 8px 22px rgba(16, 24, 32, .12); }
.relcard__tile { display: block; aspect-ratio: 1 / 1; border-radius: 0; overflow: hidden; background: #fff; }
.relcard__tile img { width: 100%; height: 100%; object-fit: cover; }
.relcard__name { display: block; margin: var(--s3) var(--s4) 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.relcard__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 2px var(--s4) var(--s4);
  font-weight: 700;
  color: var(--ink);
}
.relcard__price .price { font-size: 19px; }
.relcard__price .price__was { font-size: 14px; }
.relcard__tile { position: relative; }
.relcard:hover .relcard__name { color: var(--accent); }

/* Safety net: any sprite icon that slips past a specific rule stays small
   instead of expanding to the full column width. */
main svg:not([class]) { width: 20px; height: 20px; flex: none; }

/* --- 22. Hulp / content pages -------------------------------------------- */

.doc {
  max-width: 780px;
  padding-block: var(--s5) var(--s7);
}
.doc h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.doc__lead {
  margin-top: var(--s4);
  font-size: 17px;
  color: var(--ink);
  max-width: 60ch;
}
.doc h2 {
  margin-top: var(--s7);
  font-size: 20px;
  font-weight: 600;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.doc p { margin-top: var(--s4); max-width: 66ch; }
.doc ul, .doc ol { margin-top: var(--s4); padding-left: 1.25em; max-width: 66ch; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li { margin-top: var(--s2); }
.doc li::marker { color: var(--accent); }
.doc a { color: var(--accent); border-bottom: 1px solid currentColor; }
.doc a:hover { color: var(--ink); }
.doc strong { color: var(--ink); }
.nowrap { white-space: nowrap; }

.doc__updated { margin-top: var(--s5); font-size: 15px; color: var(--body); opacity: .8; }

.tablewrap { overflow-x: auto; margin-top: var(--s5); }
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 460px;
}
.doc thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--body);
  padding: 0 var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.doc tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.doc td, .doc tbody th {
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.doc td:last-child, .doc th:last-child { padding-right: 0; }
.doc tbody td:not(:first-child) { font-variant-numeric: tabular-nums; }

.footer__note { font-size: 15px; color: var(--body); }
.footer__pay {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 16px;
  color: var(--ink);
}
.footer__pay svg { width: 17px; height: 17px; flex: none; }

/* --- 21e. Footer outro: oversized wordmark bleeding off the bottom ------- */

.footoutro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--s7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: clamp(32px, 5vw, 70px);
  padding-bottom: clamp(16px, 2.5vw, 34px);
}
.footoutro__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  z-index: -2;
}
/* the photo is a whisper, not a picture: it should read as texture behind the
   wordmark, never as a pasted-in image */
.footoutro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    var(--brand) 0%,
    rgba(248, 244, 238, .88) 22%,
    rgba(248, 244, 238, .52) 62%,
    rgba(248, 244, 238, .38) 100%);
}
.footoutro__mark {
  display: block;
  width: 100%;
  max-width: var(--max);
  height: auto;
  padding-inline: var(--gutter);
  fill: var(--accent);
  opacity: .3;
  user-select: none;
}

/* --- 21f. Cart drawer ---------------------------------------------------- */

.cart {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(94vw, 430px);
  z-index: 110;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  box-shadow: -12px 0 40px -20px rgba(25, 27, 24, .5);
}
.cart.is-open { transform: translateX(0); }
.cart[hidden] { display: none; }

/* The drawer is short and every row above the products pushes the checkout
   button further down, so the title bar carries only the padding it needs. */
.cart__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 10px var(--s5);
  border-bottom: 1px solid var(--line);
}
.cart__top h2 { font-size: 16px; font-weight: 700; }
/* The 48px round icon button, not the padding, was setting the bar's height.
   36px is still a comfortable target for a close control sitting in a corner. */
.cart__top .iconbtn { width: 36px; height: 36px; }
.cart__top .iconbtn svg { width: 20px; height: 20px; }

.cart__body { flex: 1; overflow-y: auto; }
.cart__empty { padding: var(--s8) var(--s5); text-align: center; }

/* free-shipping bar, always full because shipping is free on everything */
.cartship { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }

/* Delivery promise under the product lines. Muted, so it informs without
   competing with the products or the total. The line above it comes from the
   last .cartline, so only a bottom rule is needed here. */
.cartdeliv {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--body);
}
.cartdeliv svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.cartship p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-weight: 600;
  color: var(--body);
  font-size: 14.5px;
}
.cartship p b { color: var(--ink); font-weight: 800; }
.cartship.is-free p { color: #1f8a4c; font-weight: 700; }
.cartship svg { width: 17px; height: 17px; flex: none; }
.cartship__bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #e3e9ec;
  margin-top: var(--s2);
  overflow: hidden;
}
.cartship__bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f8f9c 0%, #e0b23c 100%);
  transition: width .3s var(--ease);
}
.cartship.is-free .cartship__bar i { background: #1f8a4c; }

.cartline {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--s4);
  padding: var(--s5);
  border-bottom: 1px solid var(--line);
}
.cartline__art {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.cartline__art img, .cartline__art svg { width: 100%; height: 100%; object-fit: cover; }
.cartline__name { display: block; font-weight: 700; color: var(--ink); font-size: 17px; line-height: 1.3; }
.cartline__name:hover { color: var(--accent); }
.cartline__price { display: flex; align-items: baseline; gap: var(--s2); margin-top: var(--s2); }
.cartline__price .price { font-size: 19px; }
.cartline__price s { color: var(--body); font-size: 15px; }
.cartline__row { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s3); }
.cartline__del {
  font-size: 15px;
  color: var(--body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cartline__del:hover { color: var(--sale); }

.qty--sm { border-radius: 10px; }
.qty--sm button { width: 38px; height: 42px; font-size: 18px; }
.qty--sm > span { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }


.crosssell { padding: var(--s5); border-bottom: 1px solid var(--line); }
.crosssell h3 { font-size: 17px; font-weight: 700; margin-bottom: var(--s3); }
.crosssell__card {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 4px 14px rgba(16, 24, 32, .07);
}
.crosssell__art { display: block; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: #fff; }
.crosssell__art img, .crosssell__art svg { width: 100%; height: 100%; object-fit: cover; }
.crosssell__info b { display: block; font-size: 15.5px; color: var(--ink); line-height: 1.3; }
.crosssell__info a { display: block; font-size: 14.5px; color: #0f766e; margin-top: 2px; }
.crosssell__info p { display: flex; align-items: baseline; gap: var(--s2); margin-top: 3px; }
.crosssell__info .price { font-size: 16px; }
.crosssell__info s { font-size: 14px; color: var(--body); }
.crosssell__add { min-height: 44px; padding: 0 var(--s4); font-size: 15px; white-space: nowrap; }

.cartrating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--s5);
  font-size: 15px;
  text-align: center;
}
.cartrating b { color: var(--ink); }
.cartrating .stars--tile svg { width: 15px; height: 15px; flex: 0 0 15px; }
.cartrating .tplogo { height: 21px; }

.cart__foot {
  border-top: 1px solid var(--line);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--bg);
}
.cartsum { display: grid; gap: var(--s2); font-size: 16px; }
.cartsum div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
.cartsum dt { color: var(--body); }
.cartsum dd { margin: 0; color: var(--ink); font-weight: 600; }
.cartsum dd s { color: var(--body); font-weight: 400; }
.cartsum .is-save dt, .cartsum .is-save dd { color: #1f8a4c; font-weight: 700; }

.cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}
.cart__total b { font-size: 24px; font-weight: 800; }
.cart__foot .btn svg { width: 19px; height: 19px; flex: none; }
.cart__enc, .cart__wwk, .cart__pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-size: 15px;
  color: var(--body);
}
.cart__enc svg { width: 16px; height: 16px; flex: none; }
.cart__wwk img { height: 27px; width: auto; }
.cart__pay img { height: 26px; width: auto; border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; }
.cart__note { font-size: 14px; color: var(--sale); text-align: center; }

/* --- 22b. Floating WebwinkelKeur score ---------------------------------- */

.wwk {
  position: fixed;
  left: 0;
  bottom: var(--s7);
  z-index: 70;                 /* under the sticky buy bar, which is 80 */
}
.wwk__pill {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 var(--s3) 0 var(--s2);
  border-radius: 0 999px 999px 0;
  background: #fff;
  box-shadow: 0 2px 8px -2px rgba(25, 27, 24, .26);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.wwk__pill svg { width: 15px; height: 15px; color: #2f7f92; flex: none; }

.wwk__card {
  position: relative;
  width: 168px;
  margin-left: var(--s3);
  padding: var(--s5) var(--s4) var(--s4);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 14px 34px -12px rgba(25, 27, 24, .38);
  text-align: center;
}
.wwk__card[hidden] { display: none; }
.wwk__card img { margin: 0 auto; width: 94px; height: auto; }
.wwk__stars { margin-top: var(--s3); justify-content: center; }
.wwk__stars svg { width: 16px; height: 16px; flex: 0 0 16px; }
.wwk__stars .stars__fg { color: #2f7f92; }
.wwk__score { display: block; margin-top: var(--s2); font-size: 21px; font-weight: 800; color: var(--ink); }
.wwk__label { display: block; font-size: 14px; color: var(--body); }

.wwk__close {
  position: absolute;
  top: -11px; right: -11px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wwk__close svg { width: 14px; height: 14px; }

/* the sticky buy bar would otherwise sit on top of it */
body:has(.stickybuy.is-up) .wwk { bottom: calc(var(--s7) + 64px); }

@media (max-width: 560px) {
  .wwk__card { width: 156px; }
}

/* Two cards per row on a phone leaves ~130px of content. Full-size Trustpilot
   tiles plus the score overflowed that and got cut off by the card's
   overflow:hidden, so everything in the body steps down together. */
@media (max-width: 560px) {
  .card__body { padding: var(--s3); }
  .card__rating .stars--tile svg { width: 16px; height: 16px; border-radius: 2px; margin-right: 2px; }
  .card__score { font-size: 14px; }
  .card__title { font-size: 16px; }
  .card__meta { font-size: 13.5px; }
  .card .price { font-size: 18px; }
  .card .price__was { font-size: 13.5px; }
  .card__buy { font-size: 15px; gap: 6px; padding: 0 var(--s2); }
  .card__buy svg { width: 17px; height: 17px; }
  .card__buy span { white-space: nowrap; }
}

/* Below ~400px the icon is what pushes the label onto a second line. */
@media (max-width: 400px) {
  .card__buy svg { display: none; }
  .card__buy { font-size: 14.5px; padding: 0 var(--s1); }
  .card__rating .stars--tile svg { width: 14px; height: 14px; }
  .card__score { font-size: 13px; }
  .card .price { font-size: 17px; }
}

/* --- 23. Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .card__buy, .btn--buy { transition: none; }
  .card__buy:active, .btn--buy:active { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* No movement: hover scale/lift and the button press are removed outright.
     Static state rotations (chevrons) stay — with transitions at ~0 they are
     instant state, not motion, and removing them would strip the affordance. */
  .tile:hover svg,
  .card:hover .card__art,
  .card:hover .card__photo,
  .tile:hover .tile__chip,
  .btn:active {
    transform: none !important;
  }
  .drawer { transition: none !important; }
  .pdp__stock::before { animation: none !important; }
}

/* --- 24. Beige bookends --------------------------------------------------
   The announcement bar and the footer sit on the sampled beige with black text,
   so the page opens and closes on the same warm ground. Trust logos keep their
   own colours on white chips; the beige alone is too close to their artwork. */

:root {
  --brand:      #f8f4ee;
  --brand-line: #e2dbcf;
  --on-brand:   #1a1a1a;
  --on-brand-line: #e2dbcf;
}

.utility {
  background: var(--brand);
  border-bottom: 1px solid var(--brand-line);
  color: var(--on-brand);
}
.utility .rate,
.utility strong,
.utility b { color: #000; }
.utility a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.utility .stars__bg { color: #d6cec0; }
.utility .stars__fg { color: var(--star); }

.footer {
  background: var(--brand);
  color: var(--on-brand);
  border-top: 1px solid var(--brand-line);
}
.footer h3 { color: #000; }
.footer a { color: var(--on-brand); }
.footer a:hover { color: var(--accent); }
.footer__rule,
.footer .footer__rule { border-top-color: var(--on-brand-line); }
.footer__note,
.footbrand__sub,
.foothelp__score,
.foothelp__hours,
.footer address { color: var(--on-brand); }
.wordmark--foot { color: #000; }
.wordmark--foot span { color: var(--accent); border-top-color: var(--on-brand-line); }
.ratingbar--foot b,
.ratingbar--foot .score { color: #000; }
.ratingbar--foot .stars__bg { color: #d6cec0; }
.footer .pay span {
  background: #fff;
  color: #1a1a1a;
  border-color: var(--on-brand-line);
}
.footer__bottom { border-top-color: var(--on-brand-line); }

/* trust and payment marks: white chip so the artwork keeps its own colours
   and does not blend into the beige */
.footer .certrow img,
.footer .tplogo,
.footer__pay img,
.footer .brandmark {
  background: #fff;
  border-radius: 6px;
  padding: 5px 8px;
  box-sizing: content-box;
}
.footer .certrow { gap: var(--s4); }

/* --- 25. Compact cart footer --------------------------------------------
   The summary, checkout button and three trust rows filled the drawer, so the
   cross-sell above them sat below the fold. Everything here is tightened; the
   total and the checkout button keep their weight, the rest steps down. */

.cart__foot { padding: var(--s4); gap: var(--s2); }
.cartsum { gap: 5px; font-size: 15px; }
.cart__total { padding-top: var(--s2); font-size: 17px; }
.cart__total b { font-size: 21px; }

.cart__foot .btn--lg { min-height: 54px; font-size: 17px; padding: 0 var(--s5); }

.crosssell { padding: var(--s4); }
.crosssell h3 { font-size: 16px; margin-bottom: var(--s2); }
.crosssell__card { grid-template-columns: 52px 1fr auto; gap: var(--s2); padding: var(--s2); }
.crosssell__info b { font-size: 14.5px; }
.crosssell__info a { font-size: 13.5px; }
.crosssell__info .price { font-size: 15px; }
.crosssell__add { min-height: 40px; padding: 0 var(--s3); font-size: 14px; }

/* --- 26. Compact product page -------------------------------------------
   The PDP was running the same generous section rhythm as the marketing pages,
   which on a page this long just means scrolling. Blocks keep their hierarchy,
   the air between them comes down. */

.pdp { gap: var(--s5); padding-block: var(--s3) var(--s4); }
@media (min-width: 900px) {
  .pdp { gap: var(--s6); padding-block: var(--s4) var(--s5); }
}
.pdp__info h1 { margin-top: var(--s2); }
.pdp__crumbline { margin-top: var(--s2); }
.pdp__price { margin-top: var(--s3); }
.buy { margin-top: var(--s4); }
.qtysel { margin-bottom: var(--s2); }
.callus { margin-top: var(--s4); padding: var(--s3) var(--s4); }
.callus b { font-size: 21px; padding: 1px 0; }
.buybox { margin-top: var(--s4); padding: var(--s4); gap: var(--s3); }

/* the stacked content sections below the gallery */
main .section { padding-block: var(--s5); }
.doc { padding-block: var(--s4) var(--s5); }
.doc h2 { margin-top: var(--s5); }
.faq h2 { margin-bottom: var(--s3); }
.faq details:first-of-type { margin-top: var(--s3); }
.review { padding: var(--s3) var(--s4); margin-top: var(--s2); }
.review p { margin-top: var(--s2); }
.review__rate { margin-top: var(--s3); }
.reviews__top { margin-top: var(--s2); }
.reviews__more { margin-top: var(--s4); }
.usp { padding: var(--s5); margin-top: var(--s5); }
.usp__brand { padding-bottom: var(--s4); gap: var(--s6); }
.usp__grid { padding: var(--s4) 0; }
.infocard { margin-top: var(--s4); }
.relgrid { gap: var(--s4); }

.usp {
  padding: var(--s5);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin-top: var(--s5);
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 4px 14px rgba(16, 24, 32, .07);
}
.usp__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s6);
  flex-wrap: wrap;
  padding-bottom: var(--s4);
}
.usp__brand b { display: block; font-size: 27px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.usp__brand > div > span { display: block; font-size: 14.5px; color: var(--body); }
.usp__brand .stars { margin-top: var(--s2); }
.usp__brand .stars svg { width: 16px; height: 16px; flex: 0 0 16px; }
.usp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}
.usp__grid svg { width: 30px; height: 30px; flex: 0 0 30px; color: var(--ink); margin-inline: auto; }
/* "Gratis verzending" needs 164px and a cell is 155px on a 390px phone, so at
   19px it wraps and drops that cell's caption below its neighbour's. The clamp
   keeps it on one line there and full size once there is room. */
.usp__grid b {
  display: block;
  margin-top: var(--s2);
  font-size: clamp(16px, 4.4vw, 19px);
  font-weight: 800;
  color: var(--ink);
}
.usp__grid span { display: block; font-size: 14px; color: var(--body); }
.usp__pay { font-weight: 700; color: var(--ink); }


/* --- Boven de vouw op mobiel ---------------------------------------------
   Everything above the product grid is measured against one number: the first
   row has to be on screen at 390x729 on a phone. The header costs 102px and a
   card is 498px tall, which leaves about 120px. The sale block gets all of it,
   so the Trustpilot strip, the result count, the sort control and the urgency
   line wait for a wider screen. These rules live at the end of the file on
   purpose: they match the base rules on specificity and only win on order. */
@media (max-width: 767px) {
  .ratingbar { display: none; }
  .resultsbar { display: none; }
  .exec + .wrap > .section { padding-top: 8px; }
  .grid { margin-top: 0; }
  /* Trimmed so the row clears the fold with room to spare rather than by a few
     pixels: the red badge earns its height, the padding around it does not. */
  .exec { padding-block: 8px 8px; }
  .exec__tag { padding: 3px 10px; }
  .exec__head { font-size: 21px; margin-top: 4px; }
  .exec__safe { margin-top: 4px; }
  .card__view { min-height: 44px; }

  /* Card buttons are full width, so side padding buys nothing and costs the
     label its last few pixels. At 390px "Bekijk product" needed 108px and had
     105, so it broke onto a second line and the card grew a row taller than
     its neighbours. Padding down to 6px, type on a clamp, and nowrap so it can
     never wrap again on a narrower phone. */
  .card__view,
  .card__buy { padding-inline: 6px; }
  /* nowrap only on the outline button. The yellow one already fits on one line
     and forcing it would risk pushing the label out of the button instead of
     wrapping it, which is a worse failure. */
  .card__view { white-space: nowrap; }
  .card__view { font-size: clamp(13px, 3.9vw, 15px); }
  .card__buy  { font-size: clamp(13px, 3.9vw, 16px); gap: 6px; }
  .card__buy svg { width: 17px; height: 17px; }
}


/* --- Productpagina boven de vouw op mobiel --------------------------------
   The add-to-cart was 368px below the fold on a 390x729 phone. The picture is
   what sold them in the ad, so it stays, just smaller; the reassurance lines
   move under the button in the markup; and the quantity picker sits beside the
   button instead of above it. */
@media (max-width: 767px) {
  .pdp { gap: var(--s4); padding-block: var(--s2) var(--s4); }
  /* Square picture, thumbs in a 46px column beside it: five of them stack to
     264px, which is shorter than the stage, so the column is free. */
  .gallery { grid-template-columns: minmax(0, 1fr) 46px; gap: 6px; }
  .gallery__thumbs { gap: 6px; }
  /* The square picture is 26px taller than the 3:2 it replaced, so the back
     link gives some of that back rather than the add-to-cart losing the fold. */
  .pdp__back-top { padding-block: 4px; font-size: 14px; }
  .pdp__info h1 { margin-top: var(--s2); font-size: 23px; }
  .pdp__crumbline { margin-top: 4px; font-size: 13.5px; }
  .pdp__price { margin-top: var(--s3); }
  .pdp__price .price { font-size: 30px; }
  .pdp__stock { margin-top: var(--s3); font-size: 15px; }
  
  /* Quantity and button share a row: stacked they cost 64px of fold. */
  .buy {
    display: grid;
    /* "Aantal: 10" needs 118px at this size. Narrower and the label clips to
       "Aanta", which is the kind of detail that reads as a broken shop. */
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s4);
  }
  .qtysel { margin-bottom: 0; }
  /* Matches .btn--lg exactly, so the two sit as one control rather than a
     short box next to a tall button. */
  .qtysel select { font-size: 15px; padding-left: 12px; padding-right: 30px; min-height: 60px; }
  .qtysel svg { right: 9px; }
  /* The button keeps its own size; only the label tightens to fit beside it. */
  .buy .btn--buy { padding-inline: var(--s3); gap: var(--s2); }
  .buy__done { grid-column: 1 / -1; }
}


/* --- Actief filter --------------------------------------------------------
   Shown next to the result count when a mega-menu sublink narrowed the grid.
   Without it, three products where there were thirty-eight reads as a fault. */
.filterchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--s3);
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  background: var(--brand);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.filterchip:hover { border-color: var(--ink); }
.filterchip svg { width: 15px; height: 15px; flex: none; color: var(--muted); }

/* The result count is hidden on a phone to keep the grid above the fold, but a
   filter has to stay visible or the visitor cannot tell why the grid is short. */
@media (max-width: 767px) {
  .resultsbar:has(.filterchip) { display: flex; padding-block: 8px 6px; }
  .resultsbar:has(.filterchip) .sortwrap { display: none; }
  .resultsbar:has(.filterchip) p { font-size: 13px; color: var(--muted); }
}