/* ==========================================================================
   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: 999px;
  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 JACQUE 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); }

/* 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; }
.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; }

.mega__tile { display: block; }
.mega__tile svg {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--surface);
}
.mega__tile span {
  display: block;
  margin-top: var(--s3);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* --- 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 two category buttons share the row under it. */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s6);
}
.hero__cta-main { flex: 0 0 100%; }
/* the two category buttons share one row and split it between them, so the
   pair fills the same width as the primary above without either going full-row */
.hero__cta .btn--ghost {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(50% - (var(--s3) / 2));
  min-height: 52px;
  padding: 0 var(--s4);
  font-size: 16px;
  font-weight: 600;
}
.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;
}
.card__buy { width: 100%; margin-top: auto; 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: 999px;
  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;
  background: var(--ink);
  white-space: nowrap;
}
.badge--sale::before { background: var(--sale); }
.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); 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;
}
.filters .pill { flex: none; }

.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;
}

.loadwrap { display: flex; justify-content: center; margin-top: var(--s8); }
.loadwrap[hidden] { display: none; }

.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; }

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 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; }

.pdp__stock {
  display: flex;
  align-items: center;
  gap: var(--s3);
  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); }
}

.pdp__lines { display: grid; gap: var(--s3); margin-top: var(--s5); }
/* 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 */
.pdp__lines li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--s3);
  align-items: start;
  font-size: 16.5px;
}
.pdp__lines svg {
  width: 21px; height: 21px;
  color: var(--body);
  justify-self: center;
  margin-top: 1px;
}
.pdp__lines .brandmark { width: 30px; justify-self: center; margin-top: 2px; }

/* supplied brand marks keep their own colour, so they are <img> not sprite use */
.brandmark { flex: none; width: 30px; height: auto; margin-top: 1px; }
.pdp__lines .brandmark { width: 34px; }
.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; }

.cart__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.cart__top h2 { font-size: 17px; font-weight: 700; }

.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); }
.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); }
.pdp__lines { margin-top: var(--s3); gap: var(--s2); }
.pdp__lines li { padding-block: 3px; }
.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; }
.usp__grid b { display: block; margin-top: var(--s2); font-size: 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); }