/* Bricolage Grotesque, self-hosted (French market: no third-party font CDN). One latin
   variable file, 75KB, covers 200-800 weights. It carries the display voice of the whole
   store; body text deliberately stays on the system stack for rendering speed. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}

:root {
  --ink: #20241f;
  --ink-2: #303730;
  --muted: #626a63;
  --line: #dce1dc;
  --line-dark: #b8c0b9;
  --control-border: #858d86;
  --paper: #ffffff;
  --canvas: #fffdf8;
  --soft: #f2f5f2;
  --soft-blue: #e7f0f6;
  --soft-yellow: #fff3c9;
  --green: #245c45;
  --green-dark: #173e2e;
  --red: #c83f33;
  --red-dark: #a82f26;
  --focus: #0b5fa5;
  --shadow: 0 14px 38px rgba(28, 36, 31, 0.12);
  --shadow-soft: 0 8px 24px rgba(28, 36, 31, 0.08);
  --shadow-lift: 0 18px 42px rgba(28, 36, 31, 0.13);
  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
  --max: 1400px;
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

button,
select {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

svg,
.lucide {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.utility-bar {
  min-height: 35px;
  display: flex;
  justify-content: center;
  gap: clamp(28px, 6vw, 90px);
  padding: 7px 24px;
  background: var(--green-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.utility-bar span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.utility-bar svg {
  width: 15px;
  height: 15px;
}

.site-header {
  position: relative;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-main {
  width: min(var(--max), calc(100% - 48px));
  min-height: 88px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 230px minmax(360px, 700px) 190px;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand strong {
  font-weight: 850;
}

.brand span {
  color: var(--green);
  font-weight: 520;
}

.header-search {
  position: relative;
}

.header-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.header-search > div:first-of-type {
  height: 50px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.header-search > div:first-of-type:focus-within {
  background: var(--paper);
  border-color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.header-search svg {
  margin: auto;
}

.header-search input {
  min-width: 0;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
}

.header-search button {
  height: 38px;
  margin-right: 6px;
  padding: 0 18px;
  border: 0;
  border-radius: 3px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  transition: background-color 180ms ease, transform 180ms var(--ease-out);
}

.header-search button:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 430px;
  overflow: auto;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}

.search-suggestions a {
  min-height: 66px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px;
}

.search-suggestions a:hover {
  background: var(--soft);
}

.search-suggestions img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--soft);
}

.search-suggestions span {
  min-width: 0;
}

.search-suggestions strong,
.search-suggestions small {
  display: block;
}

.search-suggestions strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestions small {
  color: var(--muted);
  font-size: 12px;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
}

.icon-button,
.cart-button,
.header-icon-action {
  border: 0;
  background: transparent;
}

.icon-button,
.header-icon-action {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
}

.header-icon-action {
  position: relative;
  color: var(--ink);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}

.header-icon-action:hover,
.header-icon-action:focus-visible {
  background: var(--soft);
  color: var(--green);
  transform: translateY(-1px);
}

.header-icon-action b,
.mobile-action-bar b {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9dfcd;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
}

.account-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--green);
}

.desktop-search-toggle,
.mobile-only,
.mobile-action-bar,
.mobile-header-spacer,
.mobile-header-left,
.mobile-header-right {
  display: none;
}

.main-nav {
  width: min(var(--max), calc(100% - 48px));
  min-height: 46px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 48px);
  font-size: 13px;
  font-weight: 750;
}

.main-nav a {
  position: relative;
  padding: 13px 0;
}

.main-nav a:hover::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--red);
}

.category-rail {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.category-rail > div {
  width: min(1080px, calc(100% - 40px));
  min-height: 72px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.category-rail a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-right: 1px solid var(--line);
  font-size: 13px;
  font-weight: 720;
}

.category-rail a:first-child {
  border-left: 1px solid var(--line);
}

.category-rail a:hover {
  background: var(--soft-yellow);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

h1 {
  /* Fluid, so the mobile override jungle below stops fighting fixed pixel sizes. */
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 720;
}

h2 {
  font-size: clamp(29px, 3.4vw, 44px);
  font-weight: 680;
}

h3 {
  font-size: 18px;
}

.hero {
  position: relative;
  min-height: 510px;
  height: min(62vw, 580px);
  overflow: hidden;
  background: #e8e1d7;
}

.hero picture,
.hero picture img {
  width: 100%;
  height: 100%;
}

.hero picture img {
  object-fit: cover;
  object-position: center;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: max(28px, calc((100% - var(--max)) / 2));
  width: min(540px, 42vw);
  transform: translateY(-50%);
  z-index: 1;
}

/* The photo is bright and busy exactly where the headline sits. A soft canvas-coloured
   scrim buys AA contrast without dimming the product photography on the right. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 253, 248, 0.90) 0%, rgba(255, 253, 248, 0.55) 38%, rgba(255, 253, 248, 0) 62%);
  pointer-events: none;
}

.hero-content h1 {
  margin-bottom: 16px;
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 700;
}

.hero-content > p:not(.eyebrow) {
  max-width: 510px;
  margin-bottom: 26px;
  color: #30352f;
  font-size: 20px;
}

.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease-out);
}

.button:hover {
  transform: translateY(-1px);
}

.button[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.78;
  transform: none;
}

.button-dark {
  background: var(--ink);
  color: #fff;
}

.button-dark:hover {
  background: var(--green-dark);
}

.button-accent {
  background: var(--red);
  color: #fff;
}

.button-accent:hover {
  background: var(--red-dark);
}

.button-outline {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
}

.button-full {
  width: 100%;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 760;
}

.text-link svg {
  width: 16px;
  transition: transform 180ms var(--ease-out);
}

.text-link:hover svg {
  transform: translateX(3px);
}

.benefit-strip {
  min-height: 92px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ink);
  color: #fff;
}

.benefit-strip > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 32px;
  border-right: 1px solid #454b45;
}

.benefit-strip > div:last-child {
  border: 0;
}

.benefit-strip svg {
  width: 25px;
  height: 25px;
  color: #e8c35b;
}

.benefit-strip strong,
.benefit-strip small {
  display: block;
}

.benefit-strip strong {
  font-size: 14px;
}

.benefit-strip small {
  margin-top: 2px;
  color: #cbd0cb;
  font-size: 12px;
}

.section {
  padding: 82px max(24px, calc((100% - var(--max)) / 2));
}

.section-soft {
  background: var(--soft);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 34px;
}

.section-heading h2 {
  max-width: 760px;
  margin: 0;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.collection-tile {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: var(--soft);
  border-radius: 4px;
  transition: box-shadow 220ms ease, transform 220ms var(--ease-out);
}

.collection-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 280ms ease;
}

.collection-tile:hover img {
  transform: scale(1.025);
}

.collection-tile:hover,
.collection-tile:focus-within {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.collection-tile > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 122px;
  padding: 20px;
  background: rgba(27, 31, 27, 0.9);
  color: #fff;
}

.collection-tile small,
.collection-tile strong,
.collection-tile em {
  display: block;
}

.collection-tile small {
  color: #ccd3cc;
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
}

.collection-tile strong {
  margin: 5px 0 10px;
  font-size: 21px;
}

.collection-tile em {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.collection-tile em svg {
  width: 15px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 18px;
}

.product-card {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 220ms ease, transform 220ms var(--ease-out);
}

.product-card:hover,
.product-card:focus-within {
  border-color: var(--line-dark);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.product-card-media-shell {
  position: relative;
}

.product-card-media {
  position: relative;
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  background: #f6f7f5;
}

.product-card-wishlist,
.product-save-button {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}

.product-card-wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(28, 36, 31, 0.08);
}

.product-card-wishlist:hover,
.product-card-wishlist:focus-visible,
.product-save-button:hover,
.product-save-button:focus-visible,
.product-card-wishlist.is-saved,
.product-save-button.is-saved {
  border-color: var(--green);
  background: #edf7f1;
  color: var(--green);
  transform: translateY(-1px);
}

.product-card-wishlist.is-saved svg,
.product-save-button.is-saved svg {
  fill: currentColor;
}

.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 250ms ease;
}

.product-card:hover .product-card-media img {
  transform: scale(1.025);
}

.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 8px;
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.product-badge-offer {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.product-card-body {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: 17px;
}

.product-brand {
  margin-bottom: 8px;
  color: var(--green);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.product-card h3 {
  min-height: 61px;
  margin-bottom: 9px;
  font-size: 17px;
}

.product-card h3 a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.product-summary {
  display: -webkit-box;
  min-height: 63px;
  margin-bottom: 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.product-card-specs,
.product-key-specs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-card-specs {
  display: grid;
  gap: 7px;
  margin: 0 0 15px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.product-card-specs li {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  align-items: baseline;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.35;
}

.product-card-specs span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-price {
  font-size: 17px;
  font-weight: 850;
  white-space: nowrap;
}

.product-price-primary {
  display: block;
  margin: -1px 0 12px;
}

.product-price small,
.product-price-large small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.quick-add {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 12px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  font-size: 12px;
  font-weight: 800;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms var(--ease-out);
}

.product-card-foot .quick-add {
  margin-left: auto;
}

.quick-add:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-1px);
}

.quick-add svg {
  width: 15px;
  height: 15px;
}

.editorial-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr);
  background: var(--soft-blue);
}

.editorial-image {
  min-height: 620px;
}

.editorial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorial-copy {
  align-self: center;
  max-width: 680px;
  padding: 80px clamp(40px, 6vw, 100px);
}

.editorial-copy h2 {
  margin-bottom: 20px;
}

.editorial-copy > p:not(.eyebrow) {
  color: var(--ink-2);
  font-size: 18px;
}

.editorial-copy ul {
  margin: 26px 0 32px;
  padding: 0;
  list-style: none;
}

.editorial-copy li {
  padding: 11px 0;
  border-bottom: 1px solid #bacbd5;
  font-weight: 700;
}

.need-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.need-grid a {
  position: relative;
  min-height: 245px;
  padding: 25px;
  border-right: 1px solid var(--line-dark);
}

.need-grid a:last-child {
  border: 0;
}

.need-grid a:hover {
  background: var(--soft-yellow);
}

.need-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.need-grid strong {
  display: block;
  margin: 45px 0 12px;
  font-size: 20px;
  line-height: 1.25;
}

.need-grid p {
  color: var(--muted);
  font-size: 14px;
}

.need-grid svg {
  position: absolute;
  top: 24px;
  right: 24px;
}

.delivery-band {
  padding: 72px max(24px, calc((100% - var(--max)) / 2));
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(600px, 1.2fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: center;
  background: var(--green-dark);
  color: #fff;
}

.delivery-band .eyebrow {
  color: #f0c65f;
}

.delivery-band h2 {
  margin-bottom: 15px;
}

.delivery-band > div > p:last-child {
  color: #ccd7d0;
}

.delivery-band ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.delivery-band li {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 18px;
  border-left: 1px solid #587565;
}

.delivery-band li b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
  font-size: 12px;
}

.delivery-band strong,
.delivery-band small {
  display: block;
}

.delivery-band strong {
  font-size: 14px;
}

.delivery-band small {
  margin-top: 5px;
  color: #c7d4cc;
  font-size: 12px;
}

.faq-list {
  border-top: 1px solid var(--line-dark);
}

.faq-list details {
  border-bottom: 1px solid var(--line-dark);
}

.faq-list summary {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 4px;
  cursor: pointer;
  font-weight: 760;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list details[open] summary svg {
  transform: rotate(45deg);
}

.faq-list details p {
  max-width: 850px;
  padding: 0 4px 22px;
  color: var(--muted);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.breadcrumbs a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.collection-hero {
  display: grid;
  grid-template-columns: minmax(340px, 0.85fr) minmax(480px, 1.15fr);
  min-height: 410px;
  background: var(--soft-blue);
}

.collection-hero > div {
  align-self: center;
  max-width: 700px;
  padding: 60px max(32px, calc((100vw - var(--max)) / 2));
  padding-right: 60px;
}

.collection-hero .breadcrumbs {
  margin-bottom: 45px;
}

.collection-hero h1 {
  margin-bottom: 18px;
  font-size: clamp(36px, 5.4vw, 60px);
}

.collection-hero > div > p:last-child {
  color: var(--muted);
  font-size: 17px;
}

.collection-hero > img {
  width: 100%;
  height: 100%;
  min-height: 410px;
  object-fit: cover;
}

.catalogue-section {
  padding: 46px max(24px, calc((100% - var(--max)) / 2)) 90px;
}

.catalogue-toolbar {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.catalogue-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.catalogue-toolbar label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.catalogue-toolbar select {
  min-width: 170px;
  height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--control-border);
  border-radius: 3px;
  background: var(--paper);
}

.shop-hero,
.page-hero {
  padding: 72px max(24px, calc((100% - var(--max)) / 2));
}

.shop-hero {
  padding-top: 40px;
  padding-bottom: 40px;
  background: var(--soft-yellow);
}

.shop-hero h1 {
  font-size: 56px;
}

.shop-hero h1,
.page-hero h1 {
  max-width: 980px;
  margin-bottom: 18px;
}

.shop-hero > p:last-child,
.page-hero > p:last-child {
  max-width: 750px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
}

.shop-layout {
  width: min(var(--max), calc(100% - 48px));
  margin: 28px auto 90px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 40px;
}

.shop-filters {
  min-width: 0;
  margin: 0;
  padding: 0;
  align-self: start;
  position: sticky;
  top: 20px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-top: 2px solid var(--ink);
}

.shop-filters legend {
  width: 100%;
  padding: 18px 0 10px;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.shop-filters button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13px;
}

.shop-filters button.is-active {
  color: var(--green);
  font-weight: 800;
}

.shop-filters button span {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--soft);
  font-size: 10px;
}

.shop-search {
  height: 48px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid var(--control-border);
  border-radius: 3px;
  background: var(--paper);
}

.shop-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.shop-search > svg {
  margin: auto;
  color: var(--muted);
}

.shop-search input {
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
}

.shop-search button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.shop-search:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--focus);
}

.no-results {
  padding: 60px 0;
  color: var(--muted);
  text-align: center;
}

.product-breadcrumbs {
  width: min(var(--max), calc(100% - 48px));
  margin: 30px auto 22px;
}

.product-back-link {
  display: none;
}

.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 9px;
}

.product-layout {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  grid-template-areas:
    "gallery intro"
    "gallery facts"
    "gallery buy";
  grid-template-rows: auto 1fr;
  gap: clamp(44px, 6vw, 90px);
  row-gap: 24px;
}

.product-layout:not(:has(> .product-facts)) {
  grid-template-areas:
    "gallery intro"
    "gallery buy";
}

.product-buy > .purchase-facts {
  margin-top: 16px;
}

.product-gallery {
  grid-area: gallery;
  min-width: 0;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 10px;
  align-items: start;
}

.product-main-image {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  touch-action: pan-y pinch-zoom;
}

.product-main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 320ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .product-main-image:hover > img {
    transform: scale(1.012);
  }
}

.product-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-thumb {
  width: 78px;
  min-height: 78px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}

.product-thumb.is-active {
  border-color: var(--green);
  box-shadow: inset 0 0 0 2px var(--green);
}

@media (hover: hover) and (pointer: fine) {
  .product-thumb:hover {
    border-color: var(--green);
    transform: translateY(-1px);
  }
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--control-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(28, 36, 31, 0.08);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-zoom:hover {
    border-color: var(--green);
    box-shadow: 0 8px 20px rgba(28, 36, 31, 0.12);
    transform: scale(1.04);
  }
}

.product-intro {
  grid-area: intro;
  align-self: start;
  padding-top: 8px;
}

.product-offer {
  grid-area: offer;
  align-self: start;
}

.product-facts {
  grid-area: facts;
}

.product-intro h1 {
  margin-bottom: 18px;
  font-size: 48px;
}

.product-title-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.product-title-row h1 {
  flex: 1;
}

.product-save-button {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: 3px;
  border-color: #cbd6cf;
  border-radius: 50%;
  background: #f8faf9;
  box-shadow: 0 4px 14px rgba(28, 36, 31, 0.08);
  line-height: 0;
}

.product-save-button svg {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.product-save-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.product-save-button:hover,
.product-save-button:focus-visible {
  box-shadow: 0 6px 18px rgba(28, 36, 31, 0.13);
}

.product-save-button:focus-visible {
  outline: 3px solid rgba(31, 107, 80, 0.2);
  outline-offset: 3px;
}

.product-buy {
  grid-area: buy;
  align-self: start;
}

.product-lead {
  color: var(--muted);
  font-size: 17px;
}

.product-price-large {
  margin: 0;
  font-size: 30px;
  font-weight: 850;
  line-height: 1.1;
}

/* Price, reference price and the final-price caption now sit directly above the
   quantity stepper and the cart button, so the number is read at the moment of
   the decision rather than three scrolls earlier. */
.product-price-block {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}

.product-price-reference {
  margin: 6px 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.product-price-reference[hidden] {
  display: none;
}

.product-price-reference [data-variant-reference] {
  font-weight: 600;
}

.product-detail-band li b {
  font-size: 15px;
}

.product-detail-band li span {
  color: #6b6250;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.product-detail-band li a {
  color: inherit;
  text-decoration: underline;
}

.product-price-saving {
  font-weight: 700;
}

.product-price-disclaimer {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.product-price-disclaimer[hidden] {
  display: none;
}

.product-price-caption {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.purchase-facts {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.purchase-facts > span {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}

.purchase-facts svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--green);
}

.purchase-facts b,
.purchase-facts small {
  display: block;
}

.purchase-facts b {
  font-size: 12px;
}

.purchase-facts small {
  color: var(--muted);
  font-size: 11px;
}

.purchase-facts a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.benefit-list {
  margin: 0 0 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
  font-size: 14px;
}

.benefit-list svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--green);
}

.purchase-controls {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
}

.purchase-controls.purchase-controls-limited {
  grid-template-columns: minmax(0, 1fr);
}

.limited-purchase-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 11px 13px;
  border-left: 3px solid var(--green);
  background: var(--soft);
}

.limited-purchase-note svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--green);
}

.limited-purchase-note strong,
.limited-purchase-note small {
  display: block;
}

.limited-purchase-note strong {
  font-size: 12px;
}

.limited-purchase-note small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.purchase-button-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.buy-now-large {
  min-height: 52px;
}

.quantity-stepper {
  height: 52px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  border: 1px solid var(--control-border);
  border-radius: 4px;
}

.quantity-stepper button,
.quantity-stepper input {
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.quantity-stepper input {
  appearance: textfield;
}

.quantity-stepper input::-webkit-inner-spin-button,
.quantity-stepper input::-webkit-outer-spin-button {
  appearance: none;
}

.add-to-cart-large {
  min-height: 52px;
}

.seller-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.seller-note strong {
  color: var(--ink);
}

.launch-cta-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 9px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}

.launch-cta-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.launch-cta-trust svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--green);
}

.product-key-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  margin: 20px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-key-specs li {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 0;
  color: var(--ink-2);
  font-size: 12px;
}

.product-key-specs svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--green);
}

.product-accordions details {
  border-top: 1px solid var(--line);
}

.product-accordions details:last-child {
  border-bottom: 1px solid var(--line);
}

.product-accordions summary {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  transition: color 160ms ease;
}

.product-accordions summary:hover {
  color: var(--green);
}

.product-accordions summary svg {
  transition: transform 200ms var(--ease-out);
}

.product-accordions summary::-webkit-details-marker {
  display: none;
}

.product-accordions details[open] summary svg {
  transform: rotate(180deg);
}

.product-accordions details p,
.product-accordions details ul {
  color: var(--muted);
  font-size: 13px;
}

.product-accordions details p,
.product-accordions details ul {
  margin-bottom: 20px;
}

.product-accordions ul {
  padding-left: 20px;
}

.product-specs {
  margin: 0 0 18px;
}

.product-specs > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.product-specs dt {
  color: var(--muted);
}

.product-specs dd {
  margin: 0;
  font-weight: 700;
}

/* The global :focus-visible ring is a white outline plus a coloured box-shadow, and the
   coloured half is what makes it visible on a white page. .product-thumb.is-active sets
   its own box-shadow at higher specificity and cancelled it, so a keyboard user landing
   on the selected thumbnail saw nothing. Restated here at matching specificity. */
.product-thumb:focus-visible,
.product-thumb.is-active:focus-visible,
.gallery-zoom:focus-visible,
.gallery-dialog-nav:focus-visible,
.gallery-dialog-close:focus-visible,
.gallery-dialog-thumb:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus);
}

/* Gating :hover behind (pointer: fine) correctly stopped hover sticking after a tap, but
   it also removed the only press feedback the gallery had on the devices this page is
   actually served to. :active works on touch and costs nothing on desktop. */
.product-thumb:active,
.gallery-zoom:active,
.gallery-dialog-nav:active,
.gallery-dialog-close:active,
.gallery-dialog-thumb:active {
  transform: scale(0.96);
  transition-duration: 60ms;
}

.product-main-image {
  cursor: zoom-in;
  touch-action: pan-y pinch-zoom;
}

.gallery-counter {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(20, 24, 20, 0.72);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  /* Tabular figures stop the pill reflowing between 1 / 5 and 4 / 5. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.gallery-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1180px, calc(100% - 32px));
  max-width: none;
  height: min(860px, calc(100dvh - 32px));
  max-height: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  overflow: hidden;
  background: #111511;
  color: #ffffff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
}

.gallery-dialog::backdrop {
  background: rgba(10, 13, 10, 0.84);
  backdrop-filter: blur(4px);
}

.gallery-dialog-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) auto;
}

.gallery-dialog-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 0 10px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: #111511;
}

.gallery-dialog-close {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.gallery-dialog-product {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-dialog-stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f2f4f1;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.gallery-dialog-media {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 10px 76px;
}

.gallery-dialog-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  pointer-events: none;
}

.gallery-dialog-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(17, 21, 17, 0.9);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
}

.gallery-dialog-nav:active {
  transform: translateY(-50%) scale(0.96);
}

.gallery-dialog-prev {
  left: 16px;
}

.gallery-dialog-next {
  right: 16px;
}

.gallery-dialog-counter {
  color: #ffffff;
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gallery-dialog-footer {
  display: grid;
  gap: 8px;
  padding: 9px 16px 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: #111511;
}

.gallery-dialog-caption {
  min-height: 17px;
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-dialog-thumbs {
  min-width: 0;
  display: flex;
  gap: 8px;
  justify-content: safe center;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 4px;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(255, 255, 255, 0.34) transparent;
  scrollbar-width: thin;
}

.gallery-dialog-thumb {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  padding: 2px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 4px;
  background: #ffffff;
  opacity: 0.68;
  scroll-snap-align: center;
  transition: border-color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.gallery-dialog-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-dialog-thumb.is-active {
  border-color: #76c69a;
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(118, 198, 154, 0.35);
}

.gallery-dialog.is-single .gallery-dialog-nav,
.gallery-dialog.is-single .gallery-dialog-thumbs {
  display: none;
}

@media (max-width: 620px) {
  .gallery-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .gallery-dialog-shell {
    grid-template-rows: calc(54px + env(safe-area-inset-top)) minmax(0, 1fr) auto;
  }

  .gallery-dialog-toolbar {
    gap: 10px;
    padding: env(safe-area-inset-top) 8px 0 12px;
  }

  .gallery-dialog-product {
    font-size: 12px;
  }

  .gallery-dialog-media {
    padding: 8px 2px;
  }

  .gallery-dialog-nav {
    width: 42px;
    height: 42px;
  }

  .gallery-dialog-prev { left: 8px; }
  .gallery-dialog-next { right: 8px; }

  .gallery-dialog-footer {
    gap: 7px;
    padding: 8px 10px calc(9px + env(safe-area-inset-bottom));
  }

  .gallery-dialog-caption {
    padding: 0 2px;
  }

  .gallery-dialog-thumbs {
    justify-content: flex-start;
    gap: 7px;
  }

  .gallery-dialog-thumb {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }
}

@keyframes gallery-dialog-in {
  from { opacity: 0; transform: scale(0.97); }
}

@keyframes gallery-backdrop-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-dialog[open] { animation: gallery-dialog-in 200ms var(--ease-out); }
  .gallery-dialog[open]::backdrop { animation: gallery-backdrop-in 200ms ease; }
}

.fine-print {
  font-size: 11px !important;
}

.product-detail-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  background: var(--soft-yellow);
}

.product-detail-band > div p:last-child {
  max-width: 650px;
  color: var(--muted);
  font-size: 17px;
}

.product-detail-band ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: center;
  margin: 0;
  padding: 0;
  border-top: 1px solid #d7c785;
  border-left: 1px solid #d7c785;
  list-style: none;
}

.product-detail-band li {
  min-height: 90px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 18px 16px;
  border-right: 1px solid #d7c785;
  border-bottom: 1px solid #d7c785;
  text-align: left;
  font-weight: 750;
}

.product-layout-launch {
  margin-bottom: 56px;
  grid-template-areas:
    "gallery intro"
    "gallery offer"
    "gallery facts"
    "gallery buy";
  grid-template-rows: auto auto auto 1fr;
}

body:has(.product-layout-launch) .category-rail {
  display: none;
}

.product-layout-launch .product-intro h1 {
  max-width: 620px;
  font-size: 46px;
}

.product-layout-launch .product-intro .product-lead,
.product-layout-launch .product-offer .launch-price-row {
  margin-bottom: 0;
}

.product-layout-launch .product-offer .launch-price-row {
  margin-top: 0;
}

.launch-price-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.launch-clearance-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 7px 10px;
  border: 1px solid #d98279;
  border-radius: 4px;
  background: #fff3f1;
  color: #a52b22;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.launch-clearance-badge svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.launch-current-price {
  color: var(--ink);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.launch-reference-price {
  display: grid;
  gap: 2px;
  padding-bottom: 2px;
  color: #8a8f8b;
}

.launch-reference-price small {
  font-size: 10px;
  font-weight: 750;
}

.launch-reference-price s {
  font-size: 22px;
  font-weight: 750;
  line-height: 1;
  text-decoration-thickness: 2px;
}

.launch-price-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 9px;
}

.launch-price-badges > span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid #bcebd3;
  border-radius: 999px;
  background: #effcf5;
  color: #087958;
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
}

.launch-price-badges svg {
  width: 17px;
  height: 17px;
}

.launch-offer-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 13px;
}

.launch-offer-label span {
  padding: 6px 9px;
  border-radius: 3px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.launch-offer-label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.launch-price-caption {
  margin: 0;
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
}

.market-price-proof {
  margin-top: 15px;
  padding: 13px 15px;
  border: 1px solid #c8d0ca;
  border-left: 4px solid var(--green);
  border-radius: 4px;
  background: var(--soft);
}

.market-price-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.market-price-proof-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.market-price-proof-head svg {
  width: 15px;
  height: 15px;
}

.market-price-proof-head > strong {
  color: var(--red);
  font-size: 13px;
  white-space: nowrap;
}

.market-price-proof-prices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.market-price-proof-prices > div:last-child {
  text-align: right;
}

.market-price-proof-prices small,
.market-price-proof-prices b {
  display: block;
}

.market-price-proof-prices small {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.market-price-proof-prices b {
  font-size: 18px;
  line-height: 1.15;
}

.market-price-proof-prices > div:last-child b {
  color: #555e58;
  font-size: 16px;
}

.market-price-proof-prices > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.market-price-proof-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid #d7ddd8;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.market-price-proof a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  color: var(--green);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.market-price-proof a svg {
  width: 12px;
  height: 12px;
}

.launch-desktop-buy {
  margin-top: 14px;
}

.launch-mobile-buy {
  display: none;
}

.product-layout-launch .purchase-facts {
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.launch-price-reason {
  margin-top: 15px;
  padding: 13px 15px;
  border-left: 3px solid var(--green);
  background: var(--soft);
}

.launch-price-reason strong {
  font-size: 12px;
}

.launch-price-reason p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.launch-price-reason a {
  color: var(--green);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.xc10-metrics {
  min-height: 128px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ink);
  color: #fff;
}

.xc10-metrics > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 25px 18px;
  border-right: 1px solid #485048;
  text-align: center;
}

.xc10-metrics > div:last-child {
  border-right: 0;
}

.xc10-metrics strong {
  color: #f1cd64;
  font-size: 34px;
  line-height: 1;
}

.xc10-metrics span {
  color: #d6ddd7;
  font-size: 12px;
}

.xc10-story-band,
.xc10-technology-band,
.xc10-everyday-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.xc10-story-media,
.xc10-technology-media,
.xc10-everyday-band > div:first-child {
  min-width: 0;
  min-height: 570px;
  overflow: hidden;
}

.xc10-story-media img,
.xc10-technology-media img,
.xc10-everyday-band > div:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xc10-story-copy,
.xc10-everyday-band > div:last-child {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(55px, 7vw, 110px);
}

.xc10-story-copy h2,
.xc10-technology-copy h2,
.xc10-everyday-band h2,
.xc10-kit-section h2,
.xc10-faq-section h2,
.xc10-final-offer h2 {
  max-width: 680px;
  margin-bottom: 20px;
  font-size: 42px;
}

.xc10-story-copy > p:not(.eyebrow),
.xc10-everyday-band > div:last-child > p:not(.eyebrow),
.xc10-heading-note,
.xc10-faq-section > div:first-child > p:last-child {
  color: var(--muted);
  font-size: 16px;
}

.xc10-check-list {
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.xc10-check-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
}

.xc10-check-list svg {
  width: 17px;
  color: var(--green);
}

.xc10-heading-note {
  max-width: 430px;
  margin: 0;
}

.xc10-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.xc10-benefit-grid article {
  min-width: 0;
  min-height: 260px;
  padding: 28px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.xc10-benefit-grid article > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 42px;
  background: var(--soft-yellow);
  color: var(--green);
}

.xc10-benefit-grid h3 {
  margin-bottom: 10px;
  font-size: 19px;
}

.xc10-benefit-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.xc10-technology-band {
  background: var(--green-dark);
  color: #fff;
}

.xc10-technology-copy {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(55px, 7vw, 110px);
}

.xc10-technology-copy .eyebrow {
  color: #f1cd64;
}

.xc10-technology-copy > p:not(.eyebrow) {
  max-width: 660px;
  color: #cad5cd;
  font-size: 16px;
}

.xc10-technology-copy ol {
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid #4a6757;
  list-style: none;
}

.xc10-technology-copy li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid #4a6757;
}

.xc10-technology-copy li b {
  color: #f1cd64;
  font-size: 12px;
}

.xc10-technology-copy li strong,
.xc10-technology-copy li small {
  display: block;
}

.xc10-technology-copy li small {
  margin-top: 3px;
  color: #b9c8bd;
  font-size: 12px;
}

.xc10-technology-media {
  background: #172129;
}

.xc10-technology-media img {
  object-fit: contain;
}

.xc10-everyday-band > div:first-child img {
  object-fit: contain;
}

.xc10-kit-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: start;
}

.xc10-kit-copy > p:not(.eyebrow) {
  color: var(--muted);
}

.xc10-kit-list {
  margin: 24px 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.xc10-kit-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 720;
}

.xc10-kit-list svg {
  color: var(--green);
}

.xc10-spec-card {
  padding: 28px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--soft);
}

.xc10-spec-card h3 {
  margin-bottom: 18px;
  font-size: 22px;
}

.xc10-spec-card dl {
  margin: 0;
}

.xc10-spec-card dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.8fr);
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.xc10-spec-card dt {
  color: var(--muted);
}

.xc10-spec-card dd {
  margin: 0;
  font-weight: 760;
  text-align: right;
}

.xc10-spec-card > p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.xc10-everyday-band {
  grid-template-columns: 1.08fr 0.92fr;
  background: var(--soft-yellow);
}

.xc10-everyday-band > div:first-child {
  min-height: 620px;
}

.xc10-use-note {
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid #d7c785;
  font-size: 12px !important;
}

.xc10-faq-section {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(420px, 1.25fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: start;
}

.xc10-faq-section .faq-list {
  border-top: 1px solid var(--line-dark);
}

.xc10-faq-section .faq-list details {
  background: transparent;
}

.xc10-final-offer {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: center;
  padding: 76px max(24px, calc((100% - var(--max)) / 2));
  background: var(--ink);
  color: #fff;
}

.xc10-final-offer .eyebrow {
  color: #f1cd64;
}

.xc10-final-offer > div:first-child > p:last-child {
  max-width: 690px;
  color: #cbd3cc;
}

.xc10-final-buy {
  display: grid;
  gap: 7px;
  padding-left: clamp(0px, 4vw, 60px);
  border-left: 1px solid #4a514b;
}

.xc10-final-buy > span,
.xc10-final-buy > small {
  color: #cbd3cc;
  font-size: 12px;
}

.xc10-final-buy > strong {
  font-size: 38px;
  line-height: 1;
}

.xc10-final-price-reference {
  width: fit-content;
  color: #efd26f;
  font-size: 11px;
  font-weight: 750;
}

.xc10-final-buy .button {
  width: 100%;
  margin-top: 14px;
}

.xc10-final-limit {
  margin: 8px 0 0;
  color: #d6ddd7;
  font-size: 11px;
  line-height: 1.45;
}

.xc10-final-actions {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.xc10-final-actions .button {
  margin-top: 0;
}

.mobile-purchase-bar {
  display: none;
}

.page-hero {
  background: var(--soft-blue);
}

.about-story,
.faq-page,
.contact-layout,
.withdrawal-layout,
.prose-layout {
  width: min(1120px, calc(100% - 48px));
  margin: 70px auto 100px;
}

.about-story {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}

.about-story > div:first-child p {
  color: var(--muted);
  font-size: 17px;
}

.principles {
  border-top: 1px solid var(--line-dark);
}

.principles > div {
  display: grid;
  grid-template-columns: 55px 1fr;
  column-gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-dark);
}

.principles span {
  grid-row: 1 / 3;
  color: var(--green);
  font-weight: 850;
}

.principles h3,
.principles p {
  margin: 0;
}

.principles p {
  color: var(--muted);
  font-size: 14px;
}

.faq-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 70px;
}

.faq-page aside {
  align-self: start;
  padding: 28px;
  background: var(--soft-yellow);
}

.faq-page aside h2 {
  font-size: 24px;
}

.contact-layout,
.withdrawal-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(440px, 1.2fr);
  gap: 80px;
}

.contact-details {
  align-self: start;
}

.contact-details > a,
.contact-details > div {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--line);
}

.contact-details > a svg,
.contact-details > div svg {
  color: var(--green);
}

.contact-details small,
.contact-details strong {
  display: block;
}

.contact-details small {
  color: var(--muted);
  font-size: 11px;
}

.contact-details strong {
  font-size: 14px;
}

.contact-details > p {
  margin-top: 25px;
  color: var(--muted);
  font-size: 14px;
}

.support-form {
  display: grid;
  gap: 17px;
  padding: 32px;
  background: var(--soft);
}

.support-form > label:not(.privacy-check) {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 750;
}

.support-form label small {
  color: var(--muted);
  font-weight: 500;
}

.support-form input,
.support-form textarea {
  width: 100%;
  border: 1px solid var(--control-border);
  border-radius: 3px;
  background: var(--paper);
}

.support-form input {
  height: 48px;
  padding: 0 12px;
}

.support-form textarea {
  padding: 12px;
  resize: vertical;
}

.privacy-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.privacy-check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

.form-status {
  margin: 0;
  font-size: 13px;
}

.withdrawal-layout > div ol {
  padding-left: 24px;
}

.withdrawal-layout > div li {
  margin: 13px 0;
}

.prose-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 70px;
}

.prose-layout > aside {
  align-self: start;
  position: sticky;
  top: 20px;
  border-top: 2px solid var(--ink);
}

.prose-layout > aside p {
  margin: 17px 0 8px;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.prose-layout > aside a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.legal-prose {
  max-width: 760px;
}

.legal-prose section {
  padding: 0 0 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 30px;
}

.legal-prose h2 {
  font-size: 24px;
}

.legal-prose p,
.legal-prose li {
  color: var(--muted);
}

.legal-prose a {
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.updated {
  font-size: 12px;
}

.cart-page {
  width: min(1160px, calc(100% - 48px));
  margin: 50px auto 100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 70px;
}

.cart-main,
.cart-line,
.cart-line > div,
.order-summary {
  min-width: 0;
}

.cart-main h1 {
  margin: 30px 0 35px;
  font-size: 46px;
}

.cart-empty-page {
  padding: 65px 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.cart-empty-page svg {
  width: 35px;
  height: 35px;
  color: var(--muted);
}

.cart-line {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.cart-line:last-child {
  border-bottom: 1px solid var(--line);
}

.cart-line img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: var(--soft);
}

.cart-line h3 {
  margin-bottom: 7px;
  font-size: 15px;
}

.cart-line p {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
}

.cart-line-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cart-quantity-fixed {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--control-border);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 750;
}

.cart-quantity-fixed small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.cart-line-actions button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
}

.cart-line-price {
  font-weight: 850;
  white-space: nowrap;
}

.order-summary {
  align-self: start;
  position: sticky;
  top: 20px;
  padding: 28px;
  background: var(--soft);
  border-top: 4px solid var(--green);
}

.order-summary h2 {
  font-size: 24px;
}

.order-summary > div:not(.summary-trust):not(.checkout-payment-options) {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.order-summary .order-total {
  margin-bottom: 18px;
  border-bottom: 0 !important;
  font-size: 17px !important;
}

.order-summary > .button {
  margin-bottom: 12px;
}

.checkout-price-promise {
  display: grid;
  gap: 2px;
  margin: -4px 0 14px;
  padding: 11px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--paper);
  text-align: center;
}

.checkout-price-promise strong {
  color: var(--green-dark);
  font-size: 14px;
}

.checkout-price-promise > span {
  color: var(--muted);
  font-size: 11px;
}

.checkout-button-icon {
  display: inline-grid;
  place-items: center;
}

.checkout-button-icon.is-loading svg {
  animation: checkout-spin 800ms linear infinite;
}

@keyframes checkout-spin {
  to { transform: rotate(360deg); }
}

.checkout-status {
  margin: 12px 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.guest-checkout-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 780;
}

.guest-checkout-note svg {
  width: 17px;
  height: 17px;
}

.checkout-payment-options {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.checkout-payment-options svg {
  width: 18px;
  margin-top: 2px;
  color: var(--green);
}

.checkout-payment-options strong,
.checkout-payment-options small {
  display: block;
}

.checkout-payment-options strong {
  font-size: 12px;
}

.checkout-payment-options small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}

.order-summary .button:disabled {
  cursor: not-allowed;
  background: #737a74;
  opacity: 1;
}

.checkout-status.is-error {
  color: #a02720;
}

.checkout-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 12px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.checkout-retry[hidden] {
  display: none;
}

.checkout-retry:disabled {
  cursor: wait;
  opacity: 0.65;
}

.checkout-retry svg {
  width: 14px;
  height: 14px;
}

.checkout-noscript {
  padding: 10px;
  border: 1px solid #d9a6a1;
  background: #fff8f7;
  text-align: left;
}

.checkout-noscript a {
  color: inherit;
  font-weight: 760;
}

.summary-trust {
  display: grid;
  gap: 9px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.summary-trust span,
.summary-trust a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}

.summary-trust a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.summary-trust a > span {
  display: grid;
  gap: 2px;
}

.summary-trust a strong,
.summary-trust a small {
  display: block;
}

.summary-trust a small {
  color: var(--muted);
  line-height: 1.45;
}

.summary-trust svg {
  width: 17px;
  color: var(--green);
}

.order-summary > small {
  display: block;
  margin-top: 15px;
  color: var(--muted);
  font-size: 11px;
}

body[data-page="checkout"] {
  min-height: 100vh;
  background: #f7f8f5;
}

.checkout-site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.checkout-site-header-inner {
  width: min(1180px, calc(100% - 48px));
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
}

.checkout-logo {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
  font-size: 25px;
  font-weight: 850;
}

.checkout-logo span {
  color: var(--green);
}

.checkout-header-assurance {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--green-dark);
}

.checkout-header-assurance svg {
  width: 19px;
  height: 19px;
}

.checkout-header-assurance strong,
.checkout-header-assurance small {
  display: block;
}

.checkout-header-assurance strong {
  font-size: 12px;
}

.checkout-header-assurance small {
  color: var(--muted);
  font-size: 10px;
}

.checkout-page {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 72px;
}

.checkout-breadcrumb {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
}

.checkout-breadcrumb a,
.checkout-breadcrumb span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.checkout-breadcrumb a {
  color: var(--ink);
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkout-breadcrumb svg {
  width: 16px;
  height: 16px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
  gap: clamp(34px, 5vw, 70px);
  align-items: start;
}

.checkout-form {
  min-width: 0;
  padding: 8px 0;
}

.checkout-intro {
  margin-bottom: 30px;
}

.checkout-intro .eyebrow {
  margin-bottom: 7px;
}

.checkout-intro h1 {
  margin: 0 0 8px;
  font-size: 38px;
  line-height: 1.08;
}

.checkout-intro > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.checkout-loading {
  min-height: 230px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.checkout-loading svg,
[data-pay-loading] svg {
  animation: checkout-spin 850ms linear infinite;
}

.checkout-loading svg {
  width: 27px;
  height: 27px;
  color: var(--green);
}

.checkout-alert {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid #d8a39e;
  border-radius: 6px;
  background: #fff7f6;
  color: #81281f;
}

.checkout-alert strong,
.checkout-alert span {
  display: block;
}

.checkout-alert .button {
  width: max-content;
  margin-top: 6px;
}

.checkout-elements {
  display: grid;
  gap: 0;
}

.checkout-express,
.checkout-step {
  padding: 26px 0;
  border-top: 1px solid var(--line-dark);
}

.checkout-express {
  padding-top: 0;
  border-top: 0;
}

.checkout-express h2 {
  margin: 0 0 14px;
  font-size: 17px;
}

.checkout-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.checkout-divider::before,
.checkout-divider::after {
  height: 1px;
  background: var(--line);
  content: "";
}

.checkout-step-heading {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}

.checkout-step-heading > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green);
  border-radius: 50%;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 850;
}

.checkout-step-heading h2 {
  margin: 0;
  font-size: 19px;
}

.checkout-step-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.checkout-field,
.checkout-field > span,
.checkout-field small {
  display: block;
}

.checkout-field > span {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 730;
}

.checkout-field input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  background: var(--paper);
}

.checkout-field input:focus {
  border-color: var(--green-dark);
  outline: 1px solid var(--green-dark);
  outline-offset: 0;
}

.checkout-field input[aria-invalid="true"] {
  border-color: var(--red-dark);
}

.checkout-field small {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

.checkout-contact-help {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.checkout-field-error,
.checkout-confirm-error {
  margin: 8px 0 0;
  color: var(--red-dark);
  font-size: 12px;
  font-weight: 650;
}

.checkout-field-error:empty,
.checkout-confirm-error:empty {
  display: none;
}

.checkout-delivery-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 14px;
  border-left: 3px solid var(--green);
  background: var(--soft);
}

.checkout-delivery-note svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--green);
}

.checkout-delivery-note strong,
.checkout-delivery-note small {
  display: block;
}

.checkout-delivery-note strong {
  font-size: 12px;
}

.checkout-delivery-note small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.checkout-pay-button {
  width: 100%;
  min-height: 56px;
  margin-top: 22px;
  gap: 9px;
  font-size: 16px;
}

.checkout-pay-button:disabled {
  cursor: not-allowed;
  background: #747b75;
  opacity: 1;
}

.checkout-pay-button svg {
  width: 18px;
  height: 18px;
}

.checkout-legal-confirmation {
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.checkout-legal-confirmation a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-security-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.checkout-security-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}

.checkout-security-row svg {
  width: 15px;
  height: 15px;
  color: var(--green);
}

.checkout-order {
  position: sticky;
  top: 20px;
  padding: 26px;
  border: 1px solid var(--line-dark);
  border-top: 4px solid var(--green);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 10px 26px rgba(28, 36, 31, 0.07);
}

.checkout-order-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.checkout-order-heading .eyebrow {
  margin: 0 0 3px;
}

.checkout-order-heading h2 {
  margin: 0;
  font-size: 22px;
}

.checkout-order-heading a {
  font-size: 12px;
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkout-order-items {
  margin-top: 22px;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--line);
}

.checkout-order-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

.checkout-order-image {
  position: relative;
}

.checkout-order-image img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--soft);
}

.checkout-order-image span {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.checkout-order-item strong,
.checkout-order-item small {
  display: block;
}

.checkout-order-item strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.checkout-order-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.checkout-order-item b {
  font-size: 12px;
  white-space: nowrap;
}

.checkout-order-skeleton {
  height: 64px;
  border-radius: 4px;
  background: linear-gradient(90deg, #edf0ed 25%, #f8f9f7 50%, #edf0ed 75%);
  background-size: 200% 100%;
  animation: checkout-skeleton 1.2s ease-in-out infinite;
}

@keyframes checkout-skeleton {
  to { background-position: -200% 0; }
}

.checkout-totals {
  margin: 14px 0 0;
}

.checkout-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 0;
  color: var(--muted);
  font-size: 12px;
}

.checkout-totals dd {
  margin: 0;
  color: var(--ink);
  font-weight: 750;
  white-space: nowrap;
}

.checkout-totals .checkout-total {
  margin-top: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
  color: var(--ink);
  font-size: 17px;
}

.checkout-totals .checkout-total dd {
  font-size: 22px;
  font-weight: 880;
}

.checkout-total-promise {
  margin: 4px 0 18px;
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 720;
  text-align: right;
}

.checkout-order-trust {
  display: grid;
  gap: 10px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.checkout-order-trust span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
}

.checkout-order-trust svg {
  width: 15px;
  height: 15px;
  color: var(--green);
}

.checkout-order-trust a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-site-footer {
  padding: 24px max(24px, calc((100% - 1180px) / 2));
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 10px;
}

.checkout-site-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.checkout-site-footer a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-site-footer p {
  margin: 9px 0 0;
}

@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .checkout-order {
    position: static;
    order: -1;
  }
}

@media (max-width: 620px) {
  .checkout-site-header-inner,
  .checkout-page {
    width: calc(100% - 28px);
  }

  .checkout-site-header-inner {
    min-height: 64px;
  }

  .checkout-logo {
    font-size: 20px;
  }

  .checkout-header-assurance small,
  .checkout-breadcrumb > span {
    display: none;
  }

  .checkout-page {
    padding-top: 12px;
    padding-bottom: 48px;
  }

  .checkout-breadcrumb {
    margin-bottom: 10px;
  }

  .checkout-layout {
    gap: 22px;
  }

  .checkout-order {
    padding: 18px;
  }

  .checkout-order-heading h2 {
    font-size: 19px;
  }

  .checkout-form {
    padding-top: 0;
  }

  .checkout-intro {
    margin-bottom: 23px;
  }

  .checkout-intro h1 {
    font-size: 31px;
  }

  .checkout-express,
  .checkout-step {
    padding: 22px 0;
  }

  .checkout-step-heading {
    margin-bottom: 15px;
  }

  .checkout-divider {
    grid-template-columns: 1fr;
  }

  .checkout-divider::before,
  .checkout-divider::after {
    display: none;
  }

  .checkout-security-row {
    justify-content: flex-start;
  }

  .checkout-site-footer {
    padding: 20px 14px;
  }
}

/* Shopify-inspired single-page checkout. Native customer fields render before Stripe. */
body[data-page="checkout"] {
  background: linear-gradient(90deg, #fff 0 58%, #f5f6f4 58% 100%);
  color: #202320;
}

.checkout-site-header {
  background: #fff;
  border-bottom-color: #dedfdd;
}

.checkout-site-header-inner {
  width: min(1080px, calc(100% - 48px));
  min-height: 72px;
}

.checkout-logo {
  font-size: 23px;
  letter-spacing: 0;
}

.checkout-header-cart {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #313531;
}

.checkout-header-cart svg {
  width: 21px;
  height: 21px;
}

.checkout-page {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 64px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(330px, 42%);
  gap: 0;
  align-items: start;
}

.checkout-form {
  min-width: 0;
  padding: 46px 54px 62px 0;
}

.checkout-elements {
  display: block;
}

.checkout-alert {
  margin: 32px 50px 0 0;
}

.checkout-express {
  padding: 0 0 25px;
  border: 0;
}

.checkout-express h2 {
  margin: 0 0 13px;
  color: #626762;
  font-size: 13px;
  font-weight: 520;
  text-align: center;
}

.checkout-divider {
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  margin-top: 22px;
  color: #777b77;
  font-size: 11px;
}

.checkout-divider::before,
.checkout-divider::after {
  display: block;
  background: #dedfdd;
}

.checkout-section {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}

.checkout-subhead {
  margin: 22px 0 0;
}

.checkout-subhead h3 {
  margin: 0 0 12px;
  color: #171a17;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.checkout-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.checkout-section-heading h2,
.checkout-shipping-method legend {
  margin: 0;
  color: #171a17;
  font-size: 19px;
  font-weight: 760;
  line-height: 1.25;
}

.checkout-section-heading > span {
  color: #626762;
  font-size: 12px;
}

.checkout-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkout-control {
  position: relative;
  min-width: 0;
  min-height: 54px;
  display: block;
  border: 1px solid #c9ccc9;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.checkout-control-wide {
  grid-column: 1 / -1;
}

.checkout-control > span {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 12px;
  color: #676c67;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

.checkout-control input,
.checkout-control select {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 20px 12px 6px;
  border: 0;
  border-radius: 5px;
  outline: 0;
  background: transparent;
  color: #202320;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0;
}

.checkout-control select {
  cursor: pointer;
}

.checkout-control:focus-within {
  border-color: #295f4f;
  box-shadow: 0 0 0 1px #295f4f;
}

.checkout-control:has([aria-invalid="true"]) {
  border-color: #b42318;
  box-shadow: 0 0 0 1px #b42318;
}

.checkout-control small {
  display: block;
  padding: 0 12px 7px;
  color: #b42318;
  font-size: 11px;
}

.checkout-control small:empty {
  display: none;
}

.checkout-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  color: #333733;
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.checkout-checkbox input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: #285b4c;
}

.checkout-shipping-method {
  min-inline-size: 0;
}

.checkout-shipping-method legend {
  margin-bottom: 14px;
}

.checkout-shipping-method > label {
  min-height: 67px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #295f4f;
  border-radius: 6px;
  background: #f5faf7;
  cursor: pointer;
}

.checkout-shipping-method input {
  accent-color: #285b4c;
}

.checkout-shipping-method label > span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}

.checkout-shipping-method label svg {
  width: 18px;
  color: #285b4c;
}

.checkout-shipping-method b {
  font-size: 13px;
}

.checkout-shipping-method small {
  grid-column: 2;
  color: #676c67;
  font-size: 10px;
}

.checkout-shipping-method strong {
  font-size: 12px;
}

.checkout-payment-section {
  margin-bottom: 0;
}

.checkout-payment-heading {
  align-items: flex-start;
}

.checkout-payment-heading p {
  margin: 3px 0 0;
  color: #676c67;
  font-size: 11px;
}

.checkout-payment-shell {
  min-height: 176px;
}

.checkout-payment-shell.is-ready {
  min-height: 0;
}

.checkout-payment-loading {
  min-height: 176px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 11px;
  border: 1px solid #d3d5d3;
  border-radius: 6px;
  background: #fbfbfa;
  color: #676c67;
  font-size: 12px;
  text-align: center;
}

.checkout-payment-loading[hidden] {
  display: none;
}

.checkout-payment-loading svg {
  width: 23px;
  height: 23px;
  animation: checkout-spin 850ms linear infinite;
  color: #285b4c;
}

.checkout-billing-toggle {
  margin: 12px 0 0;
  padding: 13px 14px;
  border: 1px solid #d7d9d7;
  border-radius: 6px;
  background: #fafafa;
}

.checkout-billing-fields {
  margin-top: 10px;
}

.checkout-confirm-error {
  margin-top: 12px;
}

.checkout-pay-button {
  min-height: 55px;
  margin-top: 20px;
  border-radius: 6px;
  background: #285b4c;
  font-size: 15px;
  font-weight: 780;
}

.checkout-pay-button:hover:not(:disabled) {
  background: #1f493d;
}

.checkout-pay-button:disabled {
  background: #7c827d;
}

.checkout-legal-confirmation {
  max-width: 520px;
  margin-top: 11px;
  font-size: 10px;
}

.checkout-security-row {
  gap: 9px 16px;
  margin-top: 16px;
  padding-top: 14px;
}

.checkout-security-row span {
  font-size: 9px;
}

.checkout-order {
  position: sticky;
  top: 0;
  min-height: calc(100vh - 72px);
  padding: 46px 0 62px 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.checkout-order-details > summary {
  display: none;
}

.checkout-order-heading {
  align-items: center;
}

.checkout-order-heading h2 {
  margin: 0;
  font-size: 18px;
}

.checkout-order-heading a {
  color: #4e544f;
  font-size: 11px;
}

.checkout-order-items {
  margin-top: 20px;
  padding: 0 0 16px;
  border-bottom-color: #d8dad8;
}

.checkout-order-item {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
}

.checkout-order-image img {
  width: 58px;
  height: 58px;
  border-color: #d8dad8;
  border-radius: 6px;
  background: #fff;
}

.checkout-order-item strong {
  font-size: 11px;
}

.checkout-order-item b {
  font-size: 11px;
}

.checkout-totals > div {
  padding: 6px 0;
  color: #565b56;
  font-size: 11px;
}

.checkout-totals .checkout-total {
  margin-top: 6px;
  padding-top: 13px;
  border-top-color: #d8dad8;
  font-size: 15px;
}

.checkout-totals .checkout-total dd {
  font-size: 20px;
}

.checkout-total-promise {
  margin-bottom: 16px;
  font-size: 9px;
}

.checkout-order-trust {
  gap: 9px;
  border-top-color: #d8dad8;
}

.checkout-order-trust span {
  font-size: 9px;
}

.checkout-site-footer {
  padding: 21px max(24px, calc((100% - 1080px) / 2));
  background: #fff;
}

@media (max-width: 900px) {
  body[data-page="checkout"] {
    background: #fff;
  }

  .checkout-page {
    width: 100%;
    padding-bottom: 42px;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .checkout-form {
    padding: 30px max(20px, calc((100% - 620px) / 2)) 50px;
  }

  .checkout-order {
    position: static;
    min-height: 0;
    order: -1;
    padding: 0;
    border-bottom: 1px solid #d9dbd9;
    background: #f5f6f4;
  }

  .checkout-order-details > summary {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 max(20px, calc((100% - 620px) / 2));
    color: #285b4c;
    cursor: pointer;
    list-style: none;
  }

  .checkout-order-details > summary::-webkit-details-marker {
    display: none;
  }

  .checkout-order-details > summary span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
  }

  .checkout-order-details > summary svg {
    width: 15px;
    transition: transform 150ms ease;
  }

  .checkout-order-details[open] > summary svg {
    transform: rotate(180deg);
  }

  .checkout-order-details > summary strong {
    color: #202320;
    font-size: 16px;
  }

  .checkout-order-content {
    padding: 18px max(20px, calc((100% - 620px) / 2)) 24px;
    border-top: 1px solid #d9dbd9;
  }
}

@media (max-width: 620px) {
  .checkout-site-header-inner {
    width: calc(100% - 32px);
    min-height: 64px;
  }

  .checkout-logo {
    font-size: 21px;
  }

  .checkout-form {
    padding: 27px 16px 44px;
  }

  .checkout-section {
    margin-bottom: 27px;
  }

  .checkout-section-heading {
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .checkout-section-heading h2,
  .checkout-shipping-method legend {
    font-size: 18px;
  }

  .checkout-fields {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .checkout-control-wide {
    grid-column: auto;
  }

  .checkout-divider {
    grid-template-columns: 1fr auto 1fr;
  }

  .checkout-shipping-method > label {
    padding: 12px;
  }

  .checkout-security-row {
    justify-content: flex-start;
  }

  .checkout-order-content,
  .checkout-order-details > summary {
    padding-right: 16px;
    padding-left: 16px;
  }

  .checkout-site-footer {
    padding: 20px 16px;
  }
}

.mobile-menu,
.cart-drawer {
  position: fixed;
  z-index: 1001;
  top: 0;
  bottom: 0;
  width: min(430px, 92vw);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.mobile-menu {
  left: 0;
}

.cart-drawer {
  right: 0;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 220ms ease;
}

.cart-drawer.is-open {
  transform: none;
}

.drawer-head {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.drawer-head h2,
.drawer-head p {
  margin: 0;
}

.drawer-head h2 {
  font-size: 25px;
}

.mobile-menu nav {
  padding: 12px 22px;
}

.mobile-menu nav a {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.mobile-menu nav hr {
  height: 12px;
  margin: 0;
  border: 0;
}

.cart-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 0 22px;
}

.drawer-empty {
  padding: 70px 15px;
  text-align: center;
}

.drawer-empty svg {
  width: 32px;
  height: 32px;
  color: var(--muted);
}

.drawer-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.drawer-line img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: var(--soft);
}

.drawer-line h3 {
  margin-bottom: 6px;
  font-size: 13px;
}

.drawer-line p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.cart-offer-label {
  width: fit-content;
  display: block;
  margin: 0 0 5px;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.drawer-line button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.drawer-line button svg {
  width: 16px;
}

.cart-drawer-summary {
  padding: 20px 22px 24px;
  border-top: 1px solid var(--line);
}

.cart-drawer-summary > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.cart-drawer-summary > p {
  color: var(--green);
  font-size: 11px;
  font-weight: 750;
}

.cart-drawer-summary .cart-drawer-return {
  display: grid;
  gap: 3px;
  margin: 12px 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.cart-drawer-return strong {
  color: var(--green);
  font-size: 13px;
}

.cart-drawer-return small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.scrim {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(20, 24, 20, 0.56);
}

.search-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: min(720px, calc(100dvh - 40px));
  padding: 0;
  border: 0;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

.search-dialog::backdrop {
  background: rgba(20, 24, 20, 0.58);
}

.dialog-search {
  height: 58px;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  margin: 20px;
  border: 1px solid var(--control-border);
}

.dialog-search svg {
  margin: auto;
}

.dialog-search input {
  min-width: 0;
  height: 54px;
  border: 0;
  outline: 0;
}

.dialog-search:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--focus);
}

.dialog-search button {
  height: 44px;
  margin-right: 6px;
  padding: 0 17px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.search-results {
  max-height: 500px;
  overflow: auto;
  padding: 0 20px 24px;
}

.search-results > a {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.search-result-item {
  min-height: 80px !important;
  display: grid !important;
  grid-template-columns: 64px 1fr auto;
  gap: 13px;
}

.search-result-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--soft);
}

.search-result-item strong,
.search-result-item small {
  display: block;
}

.search-result-item.is-active {
  background: var(--soft-yellow);
  box-shadow: inset 3px 0 0 var(--green);
}

.search-result-item strong {
  font-size: 13px;
}

.search-result-item small {
  color: var(--muted);
  font-size: 11px;
}

.basket-toast {
  position: fixed;
  z-index: 1200;
  right: 20px;
  bottom: 20px;
  min-width: 300px;
  max-width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  font-size: 13px;
}

.basket-toast a {
  font-weight: 800;
  text-decoration: underline;
}

.cookie-banner {
  position: fixed;
  z-index: 1300;
  right: 20px;
  bottom: 20px;
  left: 20px;
  max-width: 880px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 23px;
  background: var(--paper);
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow);
}

/* The notice was consuming 40% of the first mobile screen — the most expensive pixels an
   ad click ever buys. Same words, tighter set; the fold shows the shop again. */
@media (max-width: 700px) {
  .cookie-banner {
    right: 10px;
    bottom: 10px;
    left: 10px;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
  }
  .cookie-banner p {
    font-size: 12.5px;
    line-height: 1.45;
  }
  .cookie-banner .button {
    padding: 10px 18px;
    font-size: 14px;
  }
}

.cookie-banner h2 {
  margin-bottom: 7px;
  font-size: 20px;
}

.cookie-banner p {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.cookie-banner a {
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 9px;
}

.cookie-actions .button {
  min-width: 125px;
}

.status-page {
  width: min(860px, calc(100% - 48px));
  min-height: 560px;
  margin: 0 auto 80px;
  padding-top: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.status-hero {
  width: min(680px, 100%);
}

.status-hero h1 {
  margin-bottom: 15px;
  font-size: 42px;
}

.status-hero > p:not(.eyebrow) {
  max-width: 560px;
  margin-right: auto;
  margin-left: auto;
  color: var(--muted);
}

.status-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}

.status-icon [data-order-icon="checking"] svg {
  animation: checkout-spin 900ms linear infinite;
}

.status-page[data-order-state="missing"] .status-icon,
.status-page[data-order-state="payment_failed"] .status-icon,
.status-page[data-order-state="expired"] .status-icon {
  background: var(--red);
}

.order-receipt,
.order-next-steps {
  width: 100%;
  margin-top: 44px;
  padding: 30px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  text-align: left;
}

.order-receipt-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.order-receipt-heading h2,
.order-next-steps h2 {
  margin: 0;
  font-size: 24px;
}

.order-receipt-heading > strong {
  color: var(--green-dark);
  font-size: 25px;
  white-space: nowrap;
}

.order-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.order-facts > div {
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--line);
}

.order-facts > div:first-child {
  padding-left: 0;
}

.order-facts > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.order-facts dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.order-facts dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 800;
}

.order-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 0 0;
}

.order-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--soft);
}

.order-item strong,
.order-item span {
  display: block;
}

.order-item strong {
  font-size: 14px;
}

.order-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.order-item b {
  font-size: 14px;
  white-space: nowrap;
}

.order-next-steps > .eyebrow {
  margin-bottom: 5px;
}

.order-next-steps ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.order-next-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
}

.order-next-steps li > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green);
  border-radius: 50%;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 850;
}

.order-next-steps li strong {
  font-size: 14px;
}

.order-next-steps li p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.status-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.status-support {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.status-support a {
  color: var(--green-dark);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 700px) {
  .status-page {
    width: calc(100% - 32px);
    margin-bottom: 55px;
    padding-top: 42px;
  }

  .status-hero h1 {
    font-size: 32px;
  }

  .order-receipt,
  .order-next-steps {
    margin-top: 32px;
    padding: 24px 0;
  }

  .order-receipt-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .order-receipt-heading h2,
  .order-next-steps h2 {
    font-size: 21px;
  }

  .order-facts,
  .order-next-steps ol {
    grid-template-columns: 1fr;
  }

  .order-facts > div,
  .order-facts > div:first-child,
  .order-facts > div:last-child {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .order-facts > div:last-child {
    border-bottom: 0;
  }

  .order-next-steps ol {
    gap: 18px;
  }

  .order-item {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .order-item img {
    width: 56px;
    height: 56px;
  }

  .order-item b {
    grid-column: 2;
  }

  .status-actions {
    width: 100%;
    flex-direction: column;
  }

  .status-actions .button {
    width: 100%;
  }
}

.site-footer {
  padding: 70px max(24px, calc((100% - var(--max)) / 2)) 25px;
  background: #1b201c;
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(35px, 6vw, 90px);
  padding-bottom: 50px;
}

.footer-grid h2 {
  margin-bottom: 18px;
  color: #b8c2ba;
  font-size: 12px;
  text-transform: uppercase;
}

.footer-grid > div > a,
.footer-link {
  display: block;
  margin: 10px 0;
  color: #e3e7e3;
  font-size: 13px;
}

.footer-link {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.brand-light {
  color: #fff;
  font-size: 24px !important;
}

.brand-light span {
  color: #b9d7c7;
}

.footer-brand p {
  max-width: 330px;
  margin: 20px 0;
  color: #aeb8b0;
  font-size: 14px;
}

.company-disclosure {
  padding: 24px 0;
  border-top: 1px solid #3e4640;
  border-bottom: 1px solid #3e4640;
}

.company-disclosure p {
  margin: 4px 0;
  color: #aeb8b0;
  font-size: 11px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  color: #9ca69e;
  font-size: 11px;
}

@media (max-width: 1180px) {
  .header-main {
    grid-template-columns: 200px minmax(300px, 1fr) 155px;
  }

  .main-nav {
    gap: 24px;
  }

  .collection-grid,
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .collection-tile:last-child {
    grid-column: span 3;
    min-height: 300px;
  }

  .need-grid {
    grid-template-columns: 1fr 1fr;
  }

  .need-grid a:nth-child(2) {
    border-right: 0;
  }

  .need-grid a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .delivery-band {
    grid-template-columns: 1fr;
  }

  .product-layout {
    gap: 40px;
  }

  .shop-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .utility-bar {
    gap: 32px;
  }

  .utility-bar span:nth-child(2) {
    display: none;
  }

  .header-main {
    min-height: 68px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 4px;
  }

  .header-search,
  .main-nav,
  .desktop-search-toggle,
  .header-actions,
  .mobile-action-bar {
    display: none;
  }

  .mobile-header-left,
  .mobile-header-right {
    display: flex;
    align-items: center;
  }

  .mobile-header-left {
    justify-content: flex-start;
  }

  .mobile-header-right {
    justify-content: flex-end;
  }

  .header-main > .brand {
    justify-self: center;
  }

  .mobile-header-left .icon-button,
  .mobile-header-right .header-icon-action {
    width: 34px;
    height: 44px;
  }

  .mobile-header-left svg,
  .mobile-header-right svg {
    width: 23px;
    height: 23px;
  }

  .category-rail {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .category-rail > div {
    width: max-content;
    min-height: 66px;
    grid-template-columns: repeat(4, 165px);
  }

  .category-rail a {
    justify-content: flex-start;
  }

  .hero {
    min-height: 500px;
    height: 62vh;
    max-height: 580px;
  }

  .hero-content {
    top: 34px;
    right: 24px;
    left: 24px;
    width: auto;
    transform: none;
  }

  .hero-content h1 {
    font-size: 58px;
  }

  .hero-content > p:not(.eyebrow) {
    max-width: 520px;
    font-size: 17px;
  }

  .benefit-strip {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .benefit-strip > div {
    min-width: min(82vw, 330px);
    min-height: 68px;
    justify-content: flex-start;
    padding: 14px 24px;
    border-right: 1px solid #454b45;
    border-bottom: 0;
    scroll-snap-align: start;
  }

  .benefit-strip > div:last-child {
    border-right: 0;
  }

  .section {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .collection-grid {
    grid-template-columns: 1fr 1fr;
  }

  .collection-tile,
  .collection-tile:last-child {
    grid-column: auto;
    min-height: 320px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editorial-band,
  .collection-hero {
    grid-template-columns: 1fr;
  }

  .editorial-image {
    min-height: 480px;
  }

  .collection-hero > div {
    padding: 40px 24px;
  }

  .collection-hero .breadcrumbs {
    margin-bottom: 30px;
  }

  .collection-hero > img {
    min-height: 320px;
    max-height: 480px;
  }

  .product-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "gallery"
      "facts"
      "buy";
    grid-template-rows: auto;
  }

  .product-layout:not(:has(> .product-facts)) {
    grid-template-areas:
      "intro"
      "gallery"
      "buy";
  }

  .product-layout.product-layout-launch {
    grid-template-areas:
      "intro"
      "gallery"
      "offer"
      "buy";
  }

  /* The desktop copy of the assurances hides with .launch-desktop-buy; the copy inside
     .launch-mobile-buy takes over, so they still sit directly under the Stripe line. */
  .launch-desktop-facts {
    display: none;
  }

  .product-gallery {
    display: block;
  }

  .product-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
  }

  .product-thumb {
    width: auto;
    min-height: 0;
  }

  .product-intro h1 {
    margin-bottom: 12px;
    font-size: 29px;
    line-height: 1.12;
  }

  .product-lead {
    font-size: 16px;
  }

  .product-buy {
    position: static;
  }

  .launch-desktop-buy {
    display: none;
  }

  .launch-mobile-buy {
    display: block;
  }

  .product-layout-launch .product-intro h1 {
    font-size: 29px;
  }

  .xc10-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .xc10-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .xc10-metrics > div:nth-child(-n + 2) {
    border-bottom: 1px solid #485048;
  }

  .xc10-story-band,
  .xc10-technology-band,
  .xc10-everyday-band,
  .xc10-kit-section,
  .xc10-faq-section,
  .xc10-final-offer {
    grid-template-columns: 1fr;
  }

  .xc10-story-media,
  .xc10-technology-media,
  .xc10-everyday-band > div:first-child {
    min-height: 480px;
  }

  .xc10-benefit-grid {
    grid-template-columns: 1fr 1fr;
  }

  .xc10-technology-media {
    order: -1;
  }

  .xc10-kit-section,
  .xc10-faq-section {
    gap: 45px;
  }

  .xc10-final-buy {
    padding-top: 26px;
    padding-left: 0;
    border-top: 1px solid #4a514b;
    border-left: 0;
  }

  body[data-page="product"] .mobile-search,
  body[data-page="product"] .category-rail,
  body[data-page="cart"] .mobile-search,
  body[data-page="cart"] .category-rail {
    display: none;
  }

  body[data-page="product"] .desktop-search-toggle,
  body[data-page="cart"] .desktop-search-toggle {
    display: inline-grid;
  }

  .product-detail-band {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .about-story,
  .faq-page,
  .contact-layout,
  .withdrawal-layout,
  .prose-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .faq-page aside {
    order: -1;
  }

  .prose-layout > aside {
    position: static;
  }

  .prose-layout > aside a {
    display: inline-block;
    margin-right: 15px;
  }

  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-filters {
    position: static;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-top: 0;
  }

  .shop-filters legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .shop-filters button {
    width: auto;
    min-width: max-content;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--control-border);
    border-radius: 3px;
  }

  .shop-filters button.is-active {
    background: var(--ink);
    color: #fff;
  }

  .shop-filters button span {
    background: rgba(255, 255, 255, 0.18);
  }

  .cart-page {
    grid-template-columns: 1fr;
  }

  .order-summary {
    position: static;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .utility-bar {
    min-height: 32px;
    padding: 7px 12px;
    justify-content: center;
  }

  .utility-bar span {
    display: none;
  }

  .utility-bar span:first-child {
    display: inline-flex;
  }

  .header-main {
    width: calc(100% - 24px);
  }

  .brand {
    gap: 5px;
    font-size: 19px;
  }

  .cart-button {
    width: 46px;
    justify-content: center;
    padding: 0;
  }

  body[data-page="shop"] .category-rail {
    display: none;
  }

  body[data-page="home"] .category-rail > div {
    min-height: 54px;
    grid-template-columns: repeat(4, 136px);
  }

  body[data-page="home"] .category-rail a {
    gap: 7px;
    padding: 8px 10px;
  }

  body[data-page="home"] .category-rail svg {
    width: 18px;
    height: 18px;
  }

  .cart-button > span {
    display: none;
  }

  .cart-button b {
    position: absolute;
    top: 0;
    right: 0;
    transform: none;
  }

  .category-rail > div {
    grid-template-columns: repeat(4, 150px);
  }

  .category-rail a {
    font-size: 12px;
  }

  .hero {
    min-height: 430px;
    height: 56vh;
  }

  .hero picture img {
    object-position: center bottom;
  }

  .hero-content {
    top: 25px;
    right: 18px;
    left: 18px;
  }

  .hero::after {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.92) 0%, rgba(255, 253, 248, 0.62) 46%, rgba(255, 253, 248, 0) 74%);
  }

  .hero-content .eyebrow {
    max-width: 250px;
    line-height: 1.3;
  }

  .hero-content h1 {
    margin-bottom: 10px;
    font-size: clamp(34px, 9.6vw, 44px);
  }

  .hero-content > p:not(.eyebrow) {
    max-width: 340px;
    margin-bottom: 18px;
    font-size: 15px;
  }

  .hero-content .button {
    min-height: 44px;
  }

  .hero-content .text-link {
    display: none;
  }

  .section,
  .catalogue-section {
    padding-right: 16px;
    padding-left: 16px;
  }

  #nos-choix {
    padding-top: 46px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 23px;
  }

  .section-heading h2 {
    font-size: 29px;
  }

  .collection-grid {
    display: flex;
    gap: 10px;
    margin-right: -16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .collection-tile,
  .collection-tile:last-child {
    min-width: 78vw;
    min-height: 340px;
    scroll-snap-align: start;
  }

  .collection-tile:last-child {
    margin-right: 16px;
  }

  .product-grid {
    gap: 12px 8px;
  }

  .product-card-body {
    min-height: 330px;
    padding: 11px;
  }

  .product-badge {
    top: 6px;
    left: 6px;
    padding: 4px 6px;
    font-size: 10px;
  }

  .product-brand {
    margin-bottom: 5px;
    font-size: 11px;
  }

  .product-card h3 {
    min-height: 67px;
    margin-bottom: 7px;
    font-size: 14px;
  }

  .product-summary {
    display: -webkit-box;
    min-height: 38px;
    margin-bottom: 10px;
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product-card-specs {
    margin-bottom: 12px;
    padding-top: 10px;
  }

  .product-card-foot {
    align-items: flex-end;
    flex-direction: column;
    margin-top: 10px;
  }

  .product-price {
    width: 100%;
    font-size: 15px;
  }

  .quick-add {
    width: 100%;
  }

  .editorial-image {
    min-height: 360px;
  }

  .editorial-copy {
    padding: 50px 20px;
  }

  .need-grid {
    grid-template-columns: 1fr;
  }

  .need-grid a {
    min-height: 185px;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .need-grid a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .need-grid strong {
    margin-top: 30px;
  }

  .delivery-band {
    padding: 55px 20px;
  }

  .delivery-band ol {
    grid-template-columns: 1fr;
  }

  .delivery-band li {
    border-left: 0;
    border-top: 1px solid #587565;
  }

  .collection-hero > div {
    padding: 35px 18px;
  }

  .collection-hero > img {
    min-height: 260px;
  }

  .catalogue-toolbar {
    min-height: 46px;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 0;
  }

  .catalogue-toolbar label {
    min-width: 0;
    margin-left: auto;
  }

  .catalogue-toolbar label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .catalogue-toolbar select {
    width: min(176px, 56vw);
    min-width: 0;
    height: 44px;
  }

  .shop-hero,
  .page-hero {
    padding: 48px 18px;
  }

  .shop-hero {
    padding: 14px 16px;
  }

  .shop-hero h1,
  .page-hero h1 {
    font-size: 40px;
  }

  .shop-hero h1 {
    margin-bottom: 7px;
    font-size: 28px;
  }

  .shop-hero .eyebrow {
    margin-bottom: 5px;
    font-size: 10px;
  }

  .shop-hero > p:last-child {
    font-size: 13px;
    line-height: 1.35;
  }

  .shop-layout,
  .about-story,
  .faq-page,
  .contact-layout,
  .withdrawal-layout,
  .prose-layout,
  .cart-page {
    width: calc(100% - 32px);
    margin-top: 40px;
  }

  .shop-layout {
    gap: 10px;
    margin-top: 12px;
  }

  .shop-search {
    margin-bottom: 4px;
  }

  .cart-page {
    gap: 14px;
    margin-top: 16px;
  }

  .product-breadcrumbs,
  .product-layout {
    width: calc(100% - 32px);
  }

  .product-breadcrumbs {
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .breadcrumb-trail {
    display: none;
  }

  .product-back-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .product-layout {
    gap: 14px;
    margin-bottom: 40px;
  }

  .product-layout-launch {
    margin-bottom: 34px;
  }

  .product-intro {
    padding-top: 0;
  }

  .product-intro h1 {
    margin-bottom: 12px;
    font-size: 30px;
  }

  .launch-offer-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .product-lead {
    margin-bottom: 14px;
    font-size: 14px;
  }

  .product-price-large {
    margin-top: 0;
    font-size: 24px;
  }

  .launch-current-price {
    font-size: 32px;
  }

  .launch-reference-price s {
    font-size: 19px;
  }

  .launch-price-badges {
    margin-top: 12px;
  }

  .launch-price-badges > span {
    min-height: 36px;
    padding: 8px 11px;
    font-size: 13px;
  }

  .market-price-proof {
    margin-top: 12px;
    padding: 12px 13px;
  }

  .market-price-proof-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .market-price-proof-head > strong {
    font-size: 12px;
  }

  .market-price-proof-prices b {
    font-size: 16px;
  }

  .market-price-proof-prices > div:last-child b {
    font-size: 15px;
  }

  .market-price-proof-source {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .market-price-proof-source a {
    min-height: 36px;
  }

  .purchase-facts {
    margin-top: 0;
    padding: 12px 0;
  }

  .product-layout-launch .purchase-facts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .product-thumbs {
    gap: 5px;
  }

  .product-buy h1 {
    font-size: 34px;
  }

  .purchase-controls {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .purchase-button-stack {
    grid-template-columns: 1fr;
  }

  .launch-cta-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .product-key-specs {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }

  .xc10-metrics {
    min-height: 0;
  }

  .xc10-metrics > div {
    min-height: 112px;
    padding: 19px 12px;
  }

  .xc10-metrics strong {
    font-size: 28px;
  }

  .xc10-metrics span {
    max-width: 135px;
    font-size: 11px;
  }

  .xc10-story-media,
  .xc10-technology-media,
  .xc10-everyday-band > div:first-child {
    min-height: 0;
    aspect-ratio: 1;
  }


  .xc10-story-copy,
  .xc10-technology-copy,
  .xc10-everyday-band > div:last-child {
    padding: 48px 18px;
  }

  .xc10-story-copy h2,
  .xc10-technology-copy h2,
  .xc10-everyday-band h2,
  .xc10-kit-section h2,
  .xc10-faq-section h2,
  .xc10-final-offer h2 {
    font-size: 30px;
  }

  .xc10-heading-note {
    font-size: 14px;
  }

  .xc10-benefit-grid {
    grid-template-columns: 1fr;
  }

  .xc10-benefit-grid article {
    min-height: 0;
    padding: 23px;
  }

  .xc10-benefit-grid article > span {
    margin-bottom: 24px;
  }

  .xc10-kit-section,
  .xc10-faq-section {
    gap: 32px;
  }

  .xc10-spec-card {
    padding: 18px;
  }

  .xc10-spec-card dl > div {
    grid-template-columns: minmax(0, 1fr) minmax(100px, 0.8fr);
    gap: 12px;
  }

  .xc10-final-offer {
    gap: 20px;
    padding: 52px 18px;
  }

  .xc10-final-buy > strong {
    font-size: 32px;
  }

  body[data-page="product"] {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .mobile-purchase-bar {
    position: fixed;
    z-index: 900;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(70px + env(safe-area-inset-bottom));
    /* Column, not grid: the bar holds the price+CTA row AND a badge strip beneath it.
       As a 2-column grid the badges were placed in the second column, next to the button. */
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 -7px 22px rgba(28, 36, 31, 0.12);
    transition: transform 180ms ease;
  }

  body.cookie-open .mobile-purchase-bar,
  body.inline-buy-visible .mobile-purchase-bar {
    transform: translateY(110%);
    pointer-events: none;
  }

  .mobile-purchase-bar b,
  .mobile-purchase-bar small {
    display: block;
  }

  .mobile-purchase-bar b {
    font-size: 16px;
  }

  .mobile-purchase-bar small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.25;
  }

  .support-form {
    padding: 20px;
  }

  .prose-layout > aside {
    overflow-x: auto;
    white-space: nowrap;
  }

  .cart-main h1 {
    margin: 14px 0 16px;
    font-size: 34px;
  }

  .cart-line {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
  }

  .cart-line img {
    width: 82px;
    height: 82px;
  }

  .cart-line h3,
  .cart-line p {
    overflow-wrap: anywhere;
  }

  .cart-line-actions {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .cart-line-price {
    grid-column: 2;
    justify-self: start;
  }

  .order-summary {
    padding: 16px;
  }

  .order-summary h2 {
    margin-bottom: 8px;
    font-size: 20px;
  }

  .order-summary > div:not(.summary-trust) {
    padding: 8px 0;
  }

  .order-summary .order-total {
    margin-bottom: 8px;
  }

  .order-summary > .button {
    min-height: 50px;
    margin-bottom: 8px;
  }

  .guest-checkout-note,
  .checkout-status {
    margin-bottom: 8px;
  }

  .summary-trust {
    padding: 12px 0;
  }

  .search-dialog {
    width: calc(100% - 20px);
  }

  .dialog-search {
    grid-template-columns: 42px 1fr;
  }

  .dialog-search button {
    grid-column: 1 / 3;
    width: calc(100% + 2px);
    margin: 0 -1px -47px;
  }

  .search-results {
    padding-top: 47px;
  }

  .cookie-banner {
    right: 10px;
    bottom: 10px;
    left: 10px;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  body[data-page="product"] .basket-toast {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 12px;
    min-width: 0;
    max-width: none;
  }

  body[data-page="product"].inline-buy-visible .basket-toast {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .cookie-banner h2 {
    margin-bottom: 3px;
    font-size: 16px;
  }

  .cookie-banner p,
  .cookie-banner a {
    font-size: 12px;
  }

  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cookie-actions .button {
    min-width: 0;
    min-height: 44px;
    padding: 0 8px;
    font-size: 12px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-grid > div:not(:first-child) {
    padding-top: 25px;
    border-top: 1px solid #3e4640;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 360px) {
  .header-main {
    width: calc(100% - 20px);
  }

  .header-main > .brand {
    font-size: 17px;
  }

  .mobile-header-right [data-account-link] {
    display: none;
  }
}

@media (max-width: 360px) {
  .brand {
    font-size: 18px;
  }

  .hero-content h1 {
    font-size: 52px;
  }

  .category-rail > div {
    grid-template-columns: repeat(4, 138px);
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product-card-body {
    min-height: 0;
  }

  body[data-page="shop"] .product-card-media {
    aspect-ratio: 4 / 3;
  }

  .product-card h3 {
    min-height: 0;
  }

  .product-card h3 a {
    display: block;
    overflow: visible;
  }

  .product-summary {
    min-height: 0;
    -webkit-line-clamp: 3;
  }

  .collection-tile,
  .collection-tile:last-child {
    min-width: calc(100vw - 48px);
  }

  .purchase-controls {
    grid-template-columns: 1fr;
  }

  .cart-page {
    width: calc(100% - 24px);
  }

  .cart-main h1 {
    font-size: 34px;
  }

  .cart-line {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }

  .cart-line img {
    width: 76px;
    height: 76px;
  }

  .cart-line-actions .quantity-stepper {
    width: 112px;
  }

  .order-summary {
    padding: 20px 14px;
  }

  .quantity-stepper {
    width: 120px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 480ms var(--ease-out), transform 520ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  /* Two independent reveal systems share the [data-reveal] attribute: bindStorefrontMotion
     hides the element and reveals with .is-visible, revealOnScroll reveals with .is-revealed.
     Honouring only one left 23 of 25 elements on shop.html stuck at opacity 0, and made the
     4-second failsafe (which writes .is-revealed) unable to rescue them. */
  .motion-ready [data-reveal].is-visible,
  .motion-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Universal store-wide checkout, 2026-08-17. */
body[data-page="checkout"] {
  background: #ffffff;
  color: #20241f;
}

body[data-page="checkout"] main {
  min-height: 70vh;
}

.checkout-site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid #dce1dc;
  background: #ffffff;
}

.checkout-site-header-inner {
  width: min(1160px, calc(100% - 48px));
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
}

.checkout-logo {
  grid-column: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: #20241f;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
}

.checkout-logo span {
  color: #245c45;
  font-weight: 500;
}

.checkout-header-back,
.checkout-header-help {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #424a43;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.checkout-header-back {
  justify-self: start;
}

.checkout-header-help {
  justify-self: end;
}

.checkout-header-back svg,
.checkout-header-help svg {
  width: 18px;
  height: 18px;
}

.checkout-site-header > p {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border-top: 1px solid #edf0ed;
  background: #f7f9f7;
  color: #4e5750;
  font-size: 11px;
  font-weight: 650;
}

.checkout-site-header > p svg {
  width: 13px;
  height: 13px;
  color: #245c45;
}

.checkout-page {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 28px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(360px, 1fr);
  /* 68px is the gutter between the form and the summary. It must NOT also apply on the
     row axis: the trust bar spans both tracks, so a row gap stacks on top of the bar's
     own margin and the form's padding and pushes the first field 136px down the page. */
  column-gap: 68px;
  row-gap: 0;
  align-items: start;
}

.checkout-form {
  min-width: 0;
  padding: 20px 0 24px;
}

.checkout-alert {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-left: 4px solid #b42318;
  background: #fff4f2;
  color: #702018;
}

.checkout-alert[hidden] {
  display: none;
}

.checkout-alert .button {
  width: max-content;
  margin-top: 4px;
}

.checkout-elements {
  display: block;
}

.checkout-express,
.checkout-section {
  margin: 0;
  padding: 0 0 24px;
  border: 0;
  border-bottom: 1px solid #e1e5e1;
}

.checkout-section + .checkout-section,
/* Matching on the resolved state matters: an adjacent-sibling selector still matches a
   display:none sibling, so step 1 was carrying a top pad that separated it from nothing. */
.checkout-express[data-express-state="ready"] + .checkout-section {
  padding-top: 22px;
}

/* While probing, the section must have a real layout box or Stripe will never render the
   wallet buttons and never fire `ready`. Off-screen with genuine dimensions satisfies both:
   Stripe can measure and paint, the shopper sees nothing. Do not swap this for display:none,
   visibility:hidden, height:0 or opacity:0 — each of those removes the box again and
   restores the deadlock this replaced. */
.checkout-express[data-express-state="probing"] {
  position: absolute;
  left: -10000px;
  top: 0;
  /* The width Stripe measures here is the width it lays the wallet buttons out for. A fixed
     400px was WIDER than the real mobile column (343px at 375px viewport) and NARROWER than
     the desktop one (620px), so the buttons were sized for a box that does not exist: on
     desktop there was slack and it looked fine, on mobile they overflowed and were clipped.
     checkout.js sets --express-probe-width from the real column before mounting. */
  width: var(--express-probe-width, 400px);
  height: 80px;
  padding: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

.checkout-express[data-express-state="empty"] {
  display: none;
}

.checkout-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
}

.checkout-section-heading > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkout-section-heading h2 {
  margin: 0;
  color: #20241f;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 780;
  letter-spacing: 0;
}

.checkout-section-heading > span {
  color: #626a63;
  font-size: 12px;
}

.checkout-step-number {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #8aa596;
  border-radius: 50%;
  color: #245c45;
  font-size: 12px;
  font-weight: 800;
}

.checkout-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin: 22px 0 0;
  color: #737a74;
  font-size: 11px;
  text-transform: lowercase;
}

.checkout-divider::before,
.checkout-divider::after {
  content: "";
  height: 1px;
  background: #dce1dc;
}

.checkout-control {
  position: relative;
  min-width: 0;
  display: block;
  border: 1px solid #7b857d;
  border-radius: 6px;
  background: #ffffff;
}

.checkout-control > span {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 12px;
  color: #596159;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

.checkout-control > span em {
  font-style: normal;
  font-weight: 400;
}

.checkout-control input {
  width: 100%;
  min-height: 54px;
  padding: 20px 12px 6px;
  border: 0;
  border-radius: 5px;
  outline: 0;
  background: transparent;
  color: #20241f;
  font: inherit;
  font-size: 16px;
  letter-spacing: 0;
}

.checkout-control:focus-within {
  border-color: #245c45;
  box-shadow: 0 0 0 1px #245c45;
}

.checkout-control:has([aria-invalid="true"]) {
  border-color: #b42318;
  box-shadow: 0 0 0 1px #b42318;
}

.checkout-control small {
  display: block;
  padding: 0 12px 8px;
  color: #b42318;
  font-size: 12px;
}

.checkout-control small:empty {
  display: none;
}

.checkout-field-help {
  margin: 9px 0 0;
  color: #626a63;
  font-size: 12px;
  line-height: 1.55;
}

.checkout-phone {
  margin-top: 16px;
}

.checkout-address-shell {
  position: relative;
  min-height: 180px;
}

.checkout-address-shell:has([data-address-loading][hidden]) {
  min-height: 0;
}

.checkout-payment-loading {
  min-height: 176px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  border: 1px solid #d5dad5;
  border-radius: 6px;
  background: #f8faf8;
  color: #626a63;
  font-size: 12px;
  text-align: center;
}

.checkout-address-shell > .checkout-payment-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.checkout-payment-loading[hidden] {
  display: none;
}

.checkout-payment-loading svg {
  width: 22px;
  height: 22px;
  color: #245c45;
  animation: checkout-spin 850ms linear infinite;
}

/* The sticky bar keeps its price+CTA on one row, with a compact badge strip beneath. */
/* Carries the layout the bar itself used to own, so the price keeps its fixed column on
   mobile and the pair stays centred on desktop. */
.mobile-purchase-row {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
}

@media (min-width: 621px) {
  .mobile-purchase-row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    width: auto;
  }
}

.payment-badges-compact {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: auto;
  margin: 0;
}

.payment-badges-compact .pay-badge svg {
  width: 30px;
  height: 19px;
}

.checkout-offer[hidden] {
  display: none;
}

/* The rule sentence is a second line, not a third column: without the basis the <small>
   becomes a flex sibling and crushes the country value against the address field. */
.checkout-order-justify {
  margin: 8px 0 0;
  color: #535b54;
  font-size: 12px;
  line-height: 1.5;
}



.checkout-pay-status {
  margin: 8px 0 0;
  color: #626a63;
  font-size: 13px;
  line-height: 1.5;
}

.checkout-pay-status:empty {
  display: none;
}

.checkout-next-steps {
  margin: 10px 0 0;
  color: #4c544d;
  font-size: 13px;
  line-height: 1.55;
}

.checkout-support-line {
  margin: 12px 0 0;
  color: #4c544d;
  font-size: 13px;
  line-height: 1.55;
}

.checkout-support-line a,
.checkout-seller a {
  color: #245c45;
  font-weight: 700;
}

/* D-12: the chevron must stay a SIBLING of [data-order-summary-toggle-label] --
   setExpanded rewrites that span's textContent on every toggle. */
.checkout-order-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

.checkout-order-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.checkout-delivery-card {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid #76a28d;
  border-radius: 6px;
  background: #f4faf6;
}

.checkout-delivery-card > svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #1f6b50;
}

.checkout-delivery-card > div {
  display: grid;
  gap: 3px;
}

.checkout-delivery-card strong {
  font-size: 14px;
}

.checkout-delivery-card span {
  color: #353c36;
  font-size: 13px;
}

.checkout-delivery-card small {
  color: #626a63;
  font-size: 11px;
}

.checkout-delivery-card b {
  color: #1f6b50;
  font-size: 13px;
}

.checkout-parcels {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.checkout-parcels[hidden] {
  display: none;
}

.checkout-parcels article {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border-left: 3px solid #9bb8a8;
  background: #f7f9f7;
  font-size: 12px;
}

.checkout-parcels span,
.checkout-parcels small {
  color: #626a63;
}

.checkout-payment-section {
  border-bottom: 0;
  padding-bottom: 0;
}

.checkout-payment-heading {
  align-items: flex-start;
}

.checkout-payment-heading h2 {
  margin-bottom: 2px;
}

.checkout-payment-heading p {
  margin: 0;
  color: #626a63;
  font-size: 11px;
}

.checkout-payment-shell {
  min-height: 176px;
}

.checkout-payment-shell.is-ready {
  min-height: 0;
}

.checkout-charge-note {
  margin-top: 24px;
  padding: 14px 16px;
  border-left: 3px solid #245c45;
  background: #f5f7f5;
  color: #626a63;
  font-size: 12px;
  line-height: 1.5;
}

.checkout-charge-note strong { color: #245c45; }
.checkout-charge-note span { margin-left: 4px; }

.checkout-review-totals,
.checkout-totals,
.order-success-totals {
  margin: 0;
}

.checkout-review-totals > div,
.checkout-totals > div,
.order-success-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 0;
  color: #4c544d;
  font-size: 13px;
}

.checkout-review-totals dt,
.checkout-review-totals dd,
.checkout-totals dt,
.checkout-totals dd,
.order-success-totals dt,
.order-success-totals dd {
  margin: 0;
}

.checkout-review-totals .is-discount,
.checkout-totals .is-discount,
.order-success-totals .is-discount {
  color: #1f6b50;
}

.checkout-review-totals .is-total,
.checkout-totals .is-total,
.order-success-totals .is-total {
  margin-top: 7px;
  padding-top: 13px;
  border-top: 1px solid #cfd5d0;
  color: #20241f;
  font-size: 17px;
  font-weight: 800;
}

.checkout-review-totals .is-total dd,
.checkout-totals .is-total dd {
  font-size: 21px;
}

.checkout-confirm-error {
  min-height: 0;
  margin-top: 14px;
  color: #a1261c;
  font-size: 13px;
  line-height: 1.5;
}

.checkout-confirm-error:empty {
  display: none;
}

.checkout-pay-button {
  width: 100%;
  min-height: 58px;
  margin-top: 18px;
  border-radius: 6px;
  background: #245c45;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
}

.checkout-pay-button:hover:not(:disabled) {
  background: #194a37;
}

.checkout-pay-button:disabled {
  background: #79837d;
  cursor: wait;
}

.checkout-button-security {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  margin: 13px 0 0;
  color: #626a63;
  font-size: 12px;
  font-weight: 650;
}

.checkout-button-security span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.checkout-button-security svg {
  width: 17px;
  height: 17px;
  color: #245c45;
}

.checkout-legal-confirmation {
  margin: 11px 0 0;
  color: #626a63;
  font-size: 11px;
  line-height: 1.5;
}

.checkout-legal-confirmation a {
  color: inherit;
}

.checkout-trust-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid #e1e5e1;
}

.checkout-trust-list span,
.checkout-trust-list a {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #485049;
  font-size: 10px;
  line-height: 1.4;
}

.checkout-trust-list svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #245c45;
}

.checkout-descriptor {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #a4b9ad;
  background: #f7f9f7;
  color: #535b54;
  font-size: 11px;
}

.checkout-inline-support {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #245c45;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.checkout-inline-support svg {
  width: 15px;
  height: 15px;
}

.checkout-order {
  position: sticky;
  top: 20px;
  min-height: 0;
  margin-top: 30px;
  padding: 24px;
  border: 1px solid #dce1dc;
  border-radius: 6px;
  background: #f4f6f3;
  box-shadow: none;
}

.checkout-order-toggle {
  width: 100%;
  min-height: 48px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #245c45;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.checkout-order-toggle strong {
  color: #20241f;
  font-size: 16px;
}

.checkout-order-content {
  padding: 0;
}

.checkout-order-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.checkout-order-heading p {
  margin: 0 0 2px;
  color: #687069;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.checkout-order-heading h2 {
  margin: 0;
  font-size: 19px;
}

.checkout-order-heading a {
  color: #245c45;
  font-size: 11px;
  font-weight: 700;
}

.checkout-order-items {
  display: grid;
  gap: 16px;
  margin-top: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid #d4dad5;
}

.checkout-order-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.checkout-order-image {
  position: relative;
}

.checkout-order-image img {
  width: 64px;
  height: 64px;
  display: block;
  border: 1px solid #d4dad5;
  border-radius: 5px;
  background: #ffffff;
  object-fit: contain;
}

.checkout-order-image > span {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 11px;
  background: #5f6861;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
}

.checkout-order-item > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.checkout-order-item strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.checkout-order-item small {
  display: grid;
  gap: 1px;
  color: #626a63;
  font-size: 10px;
  line-height: 1.35;
}

.checkout-order-item em {
  color: #4f5750;
  font-size: 10px;
  font-style: normal;
}

.checkout-order-item b {
  font-size: 12px;
  white-space: nowrap;
}

.checkout-totals {
  margin-top: 10px;
}

/* Ships with no whitespace between its tags, so :empty matches until renderTotals
   writes. Without this it reserves a row of height and shifts the card on paint. */
.checkout-totals:empty {
  display: none;
}

.checkout-promotion {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.checkout-promotion[hidden] {
  display: none;
}

.checkout-promotion label {
  color: #4f5750;
  font-size: 11px;
  font-weight: 650;
}

.checkout-promotion > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}

.checkout-promotion input,
.checkout-promotion > div button {
  min-height: 42px;
  border: 1px solid #b9c0ba;
  border-radius: 5px;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
}

.checkout-promotion input {
  min-width: 0;
  padding: 0 11px;
  text-transform: uppercase;
}

.checkout-promotion > div button {
  padding: 0 13px;
  color: #245c45;
  font-weight: 750;
  cursor: pointer;
}

.checkout-promotion p {
  margin: 0;
  color: #626a63;
  font-size: 10px;
}

.checkout-promotion p button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #245c45;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.checkout-summary-delivery {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 0;
  border-top: 1px solid #d4dad5;
  border-bottom: 1px solid #d4dad5;
}

.checkout-summary-delivery > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #245c45;
}

.checkout-summary-delivery p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.checkout-summary-delivery strong {
  font-size: 11px;
}

.checkout-summary-delivery span {
  color: #626a63;
  font-size: 10px;
}

.checkout-order-trust {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.checkout-order-trust span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #505851;
  font-size: 10px;
}

.checkout-order-trust svg {
  width: 14px;
  height: 14px;
  color: #245c45;
}

.checkout-seller {
  display: grid;
  gap: 4px;
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid #d4dad5;
  color: #4c544d;
  font-size: 12px;
  line-height: 1.5;
}

.checkout-seller strong {
  color: #303730;
  font-size: 13px;
}

.checkout-seller strong {
  color: #303730;
  font-size: 10px;
}

.checkout-support-dialog {
  width: min(430px, calc(100% - 32px));
  padding: 0;
  border: 1px solid #cbd2cc;
  border-radius: 7px;
  background: #ffffff;
  color: #20241f;
  box-shadow: 0 18px 55px rgb(24 39 30 / 20%);
}

.checkout-support-dialog::backdrop {
  background: rgb(19 31 24 / 55%);
}

.checkout-support-dialog > div {
  position: relative;
  padding: 30px;
}

.checkout-support-dialog [data-support-close] {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #3f4740;
  cursor: pointer;
}

.checkout-support-dialog [data-support-close] svg {
  width: 20px;
  height: 20px;
}

.checkout-support-dialog h2 {
  margin: 4px 0 8px;
  font-size: 24px;
}

.checkout-support-dialog > div > p:not(.eyebrow) {
  margin: 0 0 20px;
  color: #626a63;
  font-size: 13px;
  line-height: 1.55;
}

.checkout-support-dialog > div > a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid #e1e5e1;
  color: #20241f;
  text-decoration: none;
}

.checkout-support-dialog > div > a svg {
  width: 19px;
  height: 19px;
  color: #245c45;
}

.checkout-support-dialog > div > a span {
  display: grid;
  gap: 3px;
}

.checkout-support-dialog > div > a small {
  color: #626a63;
  font-size: 11px;
}

.checkout-site-footer {
  padding: 23px max(24px, calc((100% - 1160px) / 2));
  border-top: 1px solid #dce1dc;
  background: #ffffff;
}

.checkout-site-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
}

.checkout-site-footer a,
.checkout-site-footer span,
.checkout-site-footer p {
  color: #626a63;
  font-size: 10px;
}

.checkout-site-footer p {
  margin: 10px 0 0;
}

.order-success-page .order-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-success-page .order-success-totals {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #dce1dc;
}

.order-success-page .order-descriptor {
  margin: 18px 0 0;
  color: #626a63;
  font-size: 11px;
}

@media (max-width: 940px) {
  .checkout-page {
    width: 100%;
      padding-bottom: 24px;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .checkout-order {
    position: static;
    order: -1;
    margin: 0;
    padding: 24px max(24px, calc((100% - 680px) / 2));
    border-width: 0 0 1px;
    border-radius: 0;
  }

  .checkout-order-toggle:not([hidden]) {
    display: flex;
  }

  .checkout-order-toggle + .checkout-order-content {
    padding-top: 18px;
    border-top: 1px solid #d4dad5;
  }

  .checkout-form {
    width: min(680px, calc(100% - 48px));
    margin: 0 auto;
      padding: 18px 0 24px;
  }

  .checkout-seller {
    display: grid;
  }
}

@media (max-width: 620px) {
  .checkout-site-header-inner {
    width: calc(100% - 28px);
      min-height: 56px;
    gap: 8px;
  }

  .checkout-logo {
    font-size: 19px;
  }

  .checkout-header-back span,
  .checkout-header-help span {
    display: none;
  }

  .checkout-header-back,
  .checkout-header-help {
      width: 44px;
    justify-content: center;
  }

  .checkout-site-header > p {
      min-height: 22px;
  }

  .checkout-order {
    padding: 20px 16px;
  }

  .checkout-order-heading {
    align-items: center;
  }

  .checkout-order-heading h2 {
    font-size: 17px;
  }

  .checkout-order-item {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .checkout-order-image img {
    width: 58px;
    height: 58px;
  }

  .checkout-order-item strong,
  .checkout-order-item b {
    font-size: 11px;
  }

  .checkout-order-item small {
    /* Must stay grid: the three detail spans are separate lines. display:block makes them
       inline and they render as "Modele YY5785FEProduit neufFiltre inclus". */
    display: grid;
    gap: 1px;
  }

  .checkout-totals > div {
    font-size: 12px;
  }

  .checkout-summary-delivery {
    margin-top: 12px;
    padding: 12px 0;
  }

  .checkout-order-trust {
    display: grid;
  }

  .checkout-form {
    width: calc(100% - 32px);
      padding: 14px 0 20px;
  }

  .checkout-express,
  .checkout-section {
      padding-bottom: 20px;
  }

  .checkout-section + .checkout-section,
    .checkout-express[data-express-state="ready"] + .checkout-section {
    padding-top: 19px;
  }

  .checkout-section-heading {
    align-items: flex-start;
    margin-bottom: 14px;
  }

  .checkout-section-heading h2 {
    font-size: 18px;
  }

  .checkout-section-heading > span {
    padding-top: 5px;
  }

  .checkout-delivery-card {
    grid-template-columns: 20px minmax(0, 1fr);
    padding: 14px;
  }

  .checkout-delivery-card > b {
    grid-column: 2;
  }

  .checkout-final-review {
    padding: 17px;
  }

  .checkout-trust-list {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .checkout-pay-button {
    min-height: 56px;
  }

  .checkout-support-dialog > div {
    padding: 26px 22px;
  }

  .checkout-site-footer {
    padding: 20px 16px;
  }

  .checkout-site-footer > div {
    gap: 8px 14px;
  }

  .order-success-page .order-facts {
    grid-template-columns: 1fr;
  }
}


/* Checkout offer strip. Painted from the static catalogue before Stripe replies, so the
   first mobile viewport always shows the product, the price and the reassurance. */
.checkout-offer {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: 6px;
}

.checkout-offer-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkout-offer-reassurance li {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.checkout-offer-reassurance svg { width: 14px; height: 14px; }

.checkout-price-final {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* These carry the seller identity and the security promise. They must never be
   smaller than readable on the device where trust is lowest. */
.checkout-legal-confirmation { font-size: 13px; }
.checkout-trust-list span,
.checkout-trust-list a { font-size: 12px; }


/* The offer strip must be the first thing on mobile, above the summary aside
   which carries order:-1. Without this the price sits below a grey toggle again. */
@media (max-width: 940px) {
  .checkout-offer { order: -2; }
}


/* The offer strip is a direct child of the two-column .checkout-layout grid, so it must
   span both tracks. Without this it takes a grid cell and pushes the summary aside onto
   its own row, leaving a large empty column on desktop. */
.checkout-offer { grid-column: 1 / -1; }


/* Rowenta social proof. Amazon ratings for this exact reference, explicitly labelled as
   Amazon's and not ours, sitting high on the page where the price doubt appears. */
.xc10-proof { padding: clamp(40px, 6vw, 72px) 0; background: var(--paper); border-block: 1px solid var(--line); }
.xc10-proof-inner { width: min(1160px, 100% - clamp(24px, 5vw, 64px)); margin-inline: auto; }
.xc10-proof h2 { margin: 6px 0 26px; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.15; }
.xc10-proof-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.xc10-proof-score { text-align: center; }
.xc10-proof-score strong { display: block; font-size: 56px; line-height: 1; }
.xc10-proof-score > span { font-size: 13px; color: var(--muted); }
.xc10-proof-stars { margin: 8px 0 10px; font-size: 20px; letter-spacing: 2px; color: #e8a33d; }
.xc10-proof-stars span { color: #d9d6d0; }
.xc10-proof-score p { margin: 0; font-size: 13px; color: var(--muted); }
.xc10-proof-bars { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.xc10-proof-bars li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 46px; gap: 12px; align-items: center; font-size: 13px; }
.xc10-proof-bars i { height: 10px; background: #eceae5; border-radius: 999px; overflow: hidden; }
/* The CSP blocks inline style attributes, so these percentages cannot be set on the
   element. A missing value must render an empty track, never a full one: a silently
   full bar misreports the rating distribution. */
.xc10-proof-bars i::before { content: ""; display: block; width: var(--pct, 0%); height: 100%; background: #e8a33d; border-radius: 999px; }
.xc10-proof-bars i.pct-61 { --pct: 61%; }
.xc10-proof-bars i.pct-12 { --pct: 12%; }
.xc10-proof-bars i.pct-11 { --pct: 11%; }
.xc10-proof-bars i.pct-9 { --pct: 9%; }
.xc10-proof-bars i.pct-7 { --pct: 7%; }
.xc10-proof-bars b { text-align: right; color: var(--muted); font-weight: 600; }
.xc10-proof-headline { display: flex; gap: 9px; align-items: center; margin: 26px 0 10px; font-size: clamp(15px, 2vw, 18px); }
.xc10-proof-headline svg { width: 20px; height: 20px; color: #1f6b50; flex: none; }
.xc10-proof-source { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.xc10-proof-source a { text-decoration: underline; }

@media (max-width: 620px) {
  .xc10-proof-grid { grid-template-columns: 1fr; gap: 22px; }
  .xc10-proof-bars li { grid-template-columns: 62px minmax(0, 1fr) 40px; font-size: 12px; }
}


/* Sticky purchase bar above 620px. It previously existed only on phones, so every device
   from a small tablet up to desktop had exactly two buy buttons across a 7,600px page,
   with a 5,400px stretch between them. */
/* The sticky purchase bar is a PHONE control: it is display:none above 900px. The rule that
   reserved room for it lived in a min-width:621px block, i.e. it applied on exactly the screens
   where the bar does not exist and not on the ones where it does. On a 375px viewport the bar is
   120px tall and the body reserved 76px, so the last 44px of the page sat underneath it,
   clipping the DB-IP attribution the licence asks us to display. */
@media (max-width: 620px) {
  body[data-page="product"] { padding-bottom: calc(var(--sticky-bar-h, 120px) + 8px); }
}

@media (min-width: 621px) {
  body[data-page="product"] { padding-bottom: calc(var(--sticky-bar-h, 120px) + 8px); }

  .mobile-purchase-bar {
    position: fixed;
    z-index: 900;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    padding: 10px 24px;
    background: var(--paper);
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 -7px 22px rgba(28, 36, 31, 0.12);
    transition: transform 180ms ease;
  }

  /* Hide it while the buyer is already looking at the real purchase block, so the page
     never shows two competing calls to action at the same moment. */
  body.inline-buy-visible .mobile-purchase-bar {
    transform: translateY(110%);
    pointer-events: none;
  }

  /* Was ".mobile-purchase-bar > div", written when the bar had one flat child. It now has a
     price+CTA row and a badge strip, and the loose selector forced BOTH into a grid, which
     stacked the six badges vertically and made the bar 242px tall. */
  .mobile-purchase-bar .mobile-purchase-row > span {
    display: grid;
    gap: 2px;
  }
  .mobile-purchase-bar b { font-size: 17px; }
  .mobile-purchase-bar small { color: var(--muted); font-size: 12px; }
  .mobile-purchase-bar .button { min-width: 260px; }
}


/* Review cards. Verified Amazon buyers of this exact reference, names/ratings/dates as
   published, excerpts trimmed but never reworded. One measured 3-star is kept on purpose:
   an all-positive wall on an unknown store reads as fabricated. */
.xc10-rev-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin: 28px 0 16px;
  padding: 0;
  list-style: none;
}
.xc10-rev-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.xc10-rev-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.xc10-rev-stars { font-size: 14px; letter-spacing: 1px; color: #e8a33d; }
.xc10-rev-stars i { color: #d9d6d0; font-style: normal; }
.xc10-rev-head b { font-size: 13px; }
.xc10-rev-card p { margin: 0; font-size: 14px; line-height: 1.55; }
.xc10-rev-card small { font-size: 11px; color: var(--muted); }
.xc10-proof-more { margin: 0 0 14px; font-size: 13px; }
.xc10-proof-more a { font-weight: 600; text-decoration: underline; }

@media (max-width: 620px) {
  .xc10-rev-list { grid-template-columns: 1fr; gap: 12px; }
}


/* Hero price block. No strikethrough and no savings pill anywhere: a struck-through
   "prix recommandé" is an assertion the buyer cannot check, and it is the exact visual
   French shoppers have been trained to read as a dropshipping scam. A dated sentence
   naming a source is checkable, and it carries a larger number. */
.launch-rating-line { margin: 0 0 10px; font-size: 13px; }
.launch-rating-line a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.launch-rating-line a:hover { color: inherit; }

.launch-compare {
  margin: 10px 0 2px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

/* The comparison price is the evidence for the saving beneath it, so it is set at the
   same size and differentiated by colour: premise in ink, conclusion in green. */
.launch-compare b {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.launch-stock-badge {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid #bcebd3;
  border-radius: 999px;
  background: #effcf5;
  color: #087958;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

/* inline-flex also removes the inline SVG's baseline descender from the flex item box,
   which is what stops the chip floating above the price it is aligned to. */
.launch-stock-badge svg {
  width: 15px;
  height: 15px;
}

.launch-compare-delta {
  margin: 4px 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--green);
}


/* Mobile hero fold budget. The row swap below already puts the price above the gallery,
   which is what actually clears the fold. An earlier attempt also cropped the image to
   4/3.4 with object-fit: cover. That saved nothing, because the wrapper keeps
   aspect-ratio: 1 and stayed 343px tall, so it only bought 54px of dead grey band plus a
   severed cleaning head. The gallery sources are not uniformly square either
   (02 is 600x450, 04 is 584x1500), so cover discarded up to 67% of a frame. The base
   contain-fit is the only treatment that never cuts the product. */
@media (max-width: 620px) {
  /* Square, matching the desktop frame. The 5/4 box bought back 69px of fold, but with
     object-fit: contain it letterboxed every square master down both sides, and nearly all
     of them are square. White-on-white hid the seam, not the wasted width. The 69px is
     recovered elsewhere on this breakpoint rather than by cropping the frame. */
  .product-layout-launch .product-main-image {
    aspect-ratio: 1;
  }

  /* height: 100% does not resolve on a place-items: center grid item, so the image kept
     its square height and overflowed the shorter frame, and overflow: hidden clipped the
     cleaning head exactly as the original 4/3.4 crop did. Absolute inset pins the image
     to the frame box, and object-fit: contain then letterboxes inside it, so the product
     is guaranteed whole at any frame ratio. */
  .product-layout-launch .product-main-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .product-layout-launch .product-intro h1 { font-size: 22px; line-height: 1.18; }
  .product-layout-launch .product-benefit-headline { font-size: 32px; line-height: 1.07; }
  .product-layout-launch .product-lead { margin-bottom: 12px; }
}


/* Mobile hero order: headline, then price, then the gallery. On mobile .launch-desktop-buy
   is display:none, so .product-offer is purely the price block — putting it above the image
   guarantees the price, the 525 EUR comparison and the saving all clear the fold, which no
   amount of image cropping could achieve on its own. The CTA is always reachable from the
   sticky purchase bar. */
@media (max-width: 620px) {
  /* The layout places children by named area, so `order` is ignored — the rows must be
     swapped. Two classes are required: the 900px rule uses .product-layout.product-layout-launch
     and would otherwise win on specificity. */
  .product-layout.product-layout-launch {
    grid-template-areas: "intro" "gallery" "offer" "buy";
  }
}


/* The caption is fine print and must sit below the saving in the visual hierarchy,
   not above it. It was rendering bold and accent-coloured. */
.launch-price-caption {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}


/* Post-purchase reassurance on the thank-you page. The descriptor line is here to stop a
   customer who does not recognise "KULCHER" on their statement from opening a chargeback. */
.order-reassurance {
  display: grid;
  gap: 8px;
  margin: 26px auto 0;
  max-width: 640px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: left;
}
.order-reassurance span {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.order-reassurance > span > span {
  display: grid;
  gap: 2px;
}
.order-reassurance strong,
.order-reassurance small { display: block; }
.order-reassurance small { font-size: 12px; line-height: 1.45; }
.order-reassurance svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }


/* ---- Primary CTA ----------------------------------------------------------
   Was var(--red) #c83f33 on a brand whose every other element is green. Red is the
   French discount-site convention, which is the wrong signal on a page whose main job
   is convincing a stranger that a 375 EUR gap is legitimate. Green is the brand, and
   #245c45 on white clears WCAG AA comfortably.
   Also: at 14px with a 132px quantity stepper beside it, the label wrapped to two lines
   and the button rendered 69px tall. */
.button-accent {
  background: var(--green);
  color: #fff;
}

.button-accent:hover {
  background: var(--green-dark);
}

.button-accent:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.buy-now-large,
.add-to-cart-large {
  min-height: 56px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* The stepper is a secondary control and does not need a third of the screen. */
.purchase-controls {
  grid-template-columns: 104px minmax(0, 1fr);
}

.quantity-stepper {
  height: 56px;
  grid-template-columns: 36px 1fr 36px;
}

@media (max-width: 620px) {
  .purchase-controls { grid-template-columns: 104px minmax(0, 1fr); }
}

/* Sticky bar CTA matches the inline one. */
.mobile-purchase-bar .button {
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* The compact purchase bar is a continuation CTA, not page chrome. It begins fully hidden
   and becomes available only after the primary purchase control has moved above the viewport. */
.mobile-purchase-bar {
  transform: translateY(110%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 180ms ease, visibility 0s linear 180ms;
}

body.sticky-buy-eligible:not(.inline-buy-visible):not(.cookie-open) .mobile-purchase-bar {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

body[data-page="product"] {
  padding-bottom: 0;
}

body[data-page="product"].sticky-buy-eligible {
  padding-bottom: calc(var(--sticky-bar-h, 120px) + 8px);
}

.launch-cta-trust span { font-size: 12px; }


/* ---- Mobile CTA geometry and the cookie-banner collision -------------------
   Measured live at 390/360/320. Three real defects, all geometry:
   1. The cookie notice (z-index 1300, bottom:10px) sat directly on top of the sticky
      purchase bar (z-index 900). elementFromPoint at the button centre returned
      .cookie-actions — the buy button was literally untappable for every first-time
      visitor, i.e. 100% of cold traffic. Previously body.cookie-open pushed the bar
      away; that class is no longer added now that measurement runs on landing, so the
      two elements must simply not occupy the same space.
   2. .quantity-stepper keeps width:120px at <=360px while the grid track is 104px, so
      the stepper painted 6px underneath the button. A thumb aiming at the button's left
      edge hit "+" and silently doubled the order.
   3. At 320px white-space:nowrap pushed the label past the green fill: scrollWidth 176
      vs clientWidth 172 inline, 158 vs 148 on the sticky bar. The price was clipped off
      the button at the moment of commitment. */

/* The sticky purchase bar now exists at EVERY width, so the notice must clear it
   everywhere, not just on phones. Verified: at 1440px the banner also covered the
   desktop buy button and elementFromPoint returned .cookie-banner. */
.cookie-banner {
  bottom: calc(94px + env(safe-area-inset-bottom));
}

@media (max-width: 620px) {
  .cookie-banner {
    right: 10px;
    left: 10px;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border-radius: 8px;
  }

  /* The heading repeats what the sentence already says and cost 27px of a screen the
     product photo needs. */
  .cookie-banner h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .cookie-banner p {
    margin-bottom: 2px;
    font-size: 11.5px;
    line-height: 1.35;
  }

  .cookie-banner a {
    font-size: 11.5px;
  }

  .cookie-banner .button {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 620px) {
  .cookie-banner {
    bottom: calc(var(--sticky-bar-h, 120px) + 12px + env(safe-area-inset-bottom));
  }

  /* Quantity stays visible: a shop with no quantity control reads as improvised. Every
     price on the page is bound to it, so the displayed figure always matches the charge. */

  /* The price span stays visible. Hiding it collapsed the row to one in-flow child, which
     the "136px 1fr" grid then placed in the 136px column, clipping the CTA label. */
  .mobile-purchase-bar .mobile-purchase-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  .mobile-purchase-bar .button {
    width: 100%;
    min-height: 54px;
    font-size: 16px;
  }
}

/* A commit button and a number input currently share 4px radius, 56px height and the
   same border geometry, so they parse as one input group rather than one control and
   one action. */
.buy-now-large,
.add-to-cart-large {
  border-radius: 8px;
  box-shadow: 0 2px 0 var(--green-dark), 0 6px 16px rgba(23, 62, 46, 0.2);
}

/* There was no :active rule anywhere in the file, so a tap gave no confirmation on a
   touch device and people tap twice. */
.button-accent:active {
  background: var(--green-dark);
  transform: scale(0.985);
  transition-duration: 60ms;
}

/* The focus ring was blue on a blue shadow: 1.19:1 against the green fill. */
.button-accent:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--focus);
}


/* ---- "Pourquoi ce prix ?" -------------------------------------------------
   First section on scroll. A French visitor arriving from a Facebook ad has three
   explanations ready for a 375 EUR gap before ours: contrefaçon, dropshipping,
   arnaque. The page previously stated the gap and moved on, so they answered the
   question themselves. This answers it in their words, negatively — what the price
   does NOT mean — because denying the specific suspicion beats asserting quality. */
.xc10-why {
  padding: clamp(40px, 6vw, 76px) 0;
  background: var(--canvas);
  border-block: 1px solid var(--line);
}
.xc10-why-inner {
  width: min(880px, 100% - clamp(24px, 5vw, 64px));
  margin-inline: auto;
}
.xc10-why h2 {
  margin: 6px 0 18px;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.12;
}
.xc10-why-lead {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
}
.xc10-why-sub {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.xc10-why-list {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.xc10-why-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.xc10-why-list svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  color: var(--green);
}
.xc10-why-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}
.xc10-why-list span {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.xc10-why-list a { text-decoration: underline; }
.xc10-why-close {
  margin: 0;
  padding: 16px 18px;
  background: #eef4f0;
  border-left: 3px solid var(--green);
  font-size: 15px;
  line-height: 1.55;
}

/* ---- Accepted payment methods --------------------------------------------- */
.payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 10px;
}
.pay-badge { display: inline-flex; line-height: 0; }
/* A global `svg, .lucide { width:20px; height:20px }` rule squashes every SVG on the
   page. These are 42x26 plates, not 20x20 icons, so the size must be forced back. */
.pay-badge svg {
  display: block;
  width: 42px;
  height: 26px;
  border-radius: 4px;
}

.footer-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-payments .payment-badges { margin: 0; }
.footer-payments p {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.payment-badges-cta {
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
}

@media (max-width: 620px) {
  .xc10-why-list li { padding: 14px; gap: 11px; }
  .payment-badges { gap: 5px; }
}


/* The Amazon capture. Framed and captioned so it reads as an embedded document rather
   than as our own interface, and hosted on our domain so the buyer never leaves for a
   competitor selling the identical product. */
.xc10-why-proof {
  margin: 4px 0 22px;
}
.xc10-why-proof img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 780px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: #fff;
}
.xc10-why-proof figcaption {
  margin-top: 9px;
  max-width: 780px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.xc10-why-proof figcaption b { color: var(--ink-2); font-weight: 600; }

/* Variant picker ---------------------------------------------------------- */
.variant-picker { display: grid; gap: 14px; margin: 0 0 18px; }
.variant-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.variant-group legend { padding: 0 0 7px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }

.variant-option { position: relative; display: inline-flex; }
.variant-option[hidden] { display: none; }
.variant-option input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.variant-option span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.2;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.variant-option input:checked + span {
  border-color: var(--green);
  box-shadow: inset 0 0 0 2px var(--green);
}
.variant-option input:focus-visible + span {
  outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus);
}
@media (hover: hover) and (pointer: fine) {
  .variant-option input:not(:disabled) + span:hover { border-color: var(--green); }
}
/* A combination that does not exist is shown but struck through, so the customer can see
   the option exists in the range without being able to buy something unfulfillable. */
.variant-option.is-unavailable span {
  color: var(--muted); background: var(--soft);
  text-decoration: line-through; text-decoration-thickness: 1px; cursor: pointer;
}
.variant-option.is-unavailable input:checked + span {
  color: var(--ink); background: transparent; text-decoration: none;
}
.variant-option input:disabled { cursor: not-allowed; }

.variant-unavailable {
  margin: 0; padding: 10px 12px; border-radius: 6px;
  background: #fbe9e7; color: var(--red-dark); font-size: 13px; font-weight: 650;
}

[data-variant-target][disabled] { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 620px) {
  .variant-options { gap: 7px; }
  .variant-option span { padding: 0 12px; font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   Dyson Airwrap i.d. launch page. Warmer and airier than the Rowenta page on
   purpose: this one sells a result and a feeling, not a price argument.
   --------------------------------------------------------------------------- */
.awid-promise-inner,
.awid-heat-inner,
.awid-final-inner,
.awid-proof-inner {
  max-width: 760px;
  margin: 0 auto;
}

.awid-promise-inner h2,
.awid-heat-inner h2,
.awid-final-inner h2,
.awid-looks-head h2,
.awid-box-head h2,
.awid-app-copy h2,
.awid-proof-inner h2 {
  margin: 6px 0 14px;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.awid-lead {
  margin: 0 0 14px;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.65;
  color: #3d443e;
}

.awid-looks-head,
.awid-box-head {
  max-width: 640px;
  margin: 0 auto 26px;
  text-align: center;
}

.awid-looks-grid,
.awid-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.awid-look,
.awid-att {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.awid-look img,
.awid-att img,
.awid-app-media img {
  display: block;
  width: 100%;
  height: auto;
}

.awid-look figcaption,
.awid-att > div {
  display: grid;
  gap: 4px;
  padding: 14px 16px 16px;
}

.awid-look figcaption strong,
.awid-att strong {
  font-size: 15px;
  font-weight: 760;
}

.awid-look figcaption span,
.awid-att span {
  color: #535b54;
  font-size: 13px;
  line-height: 1.5;
}

.awid-inline-cta {
  margin-top: 26px;
  text-align: center;
}

.awid-heat-note {
  margin-top: 14px;
  color: #626a63;
  font-size: 13px;
  line-height: 1.55;
}

.awid-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.awid-app-media img {
  border-radius: 10px;
}

.awid-box-note {
  margin: 22px auto 0;
  max-width: 620px;
  color: #626a63;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

/* social proof */
.awid-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin: 22px 0 10px;
}

.awid-proof-score {
  text-align: center;
}

.awid-proof-score strong {
  display: block;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.awid-proof-score span {
  color: #626a63;
  font-size: 13px;
}

.awid-proof-stars {
  margin: 8px 0 6px;
  color: #d8a531;
  font-size: 17px;
  letter-spacing: 2px;
}

.awid-proof-score p {
  margin: 0;
  color: #626a63;
  font-size: 12px;
}

.awid-proof-bars {
  display: grid;
  gap: 7px;
}

.awid-proof-bars > div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  color: #535b54;
  font-size: 12px;
}

.awid-proof-bars i {
  display: block;
  height: 7px;
  background: #e6e9e5;
  border-radius: 99px;
}

.awid-proof-bars b {
  display: block;
  height: 100%;
  background: #245c45;
  border-radius: 99px;
}

.awid-proof-headline {
  margin: 6px 0 24px;
  font-size: 15px;
  font-weight: 700;
}

.awid-rev-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.awid-rev {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.awid-rev-head {
  display: flex;
  gap: 8px;
  align-items: center;
}

.awid-rev-stars {
  color: #d8a531;
  font-size: 13px;
  letter-spacing: 1px;
}

.awid-rev-head b {
  font-size: 13px;
}

.awid-rev strong {
  font-size: 14px;
}

.awid-rev p {
  margin: 0;
  color: #454d47;
  font-size: 13px;
  line-height: 1.55;
}

.awid-rev small {
  color: #7a827b;
  font-size: 11px;
}

.awid-proof-source {
  margin: 20px 0 0;
  color: #626a63;
  font-size: 12px;
  line-height: 1.55;
}

.awid-proof-source a {
  color: #245c45;
  font-weight: 700;
}

/* final offer */
.awid-final-inner {
  text-align: center;
}

.awid-final-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin: 22px 0 16px;
}

.awid-final-next {
  display: grid;
  gap: 3px;
  max-width: 370px;
  margin: 0;
  text-align: left;
}

.awid-final-next strong {
  color: #20241f;
  font-size: 15px;
  font-weight: 800;
}

.awid-final-next span {
  color: #626a63;
  font-size: 13px;
  line-height: 1.45;
}

.awid-final .payment-badges {
  justify-content: center;
}

@media (max-width: 900px) {
  .awid-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .awid-app-media {
    order: -1;
  }
}

@media (max-width: 620px) {
  .awid-proof-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .awid-final-buy {
    flex-direction: column;
    align-items: stretch;
  }

  .awid-final-next {
    text-align: center;
  }
}

/* The launch layout sells one unit, so its buy row has no quantity stepper column. */
.purchase-controls-single {
  grid-template-columns: minmax(0, 1fr);
}

/* In-gallery arrows. app.js has bound [data-gallery-prev]/[data-gallery-next] for a long
   time but the markup never rendered them, so the only way to change image was the thumb
   strip or a swipe with no affordance. */
.gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  transform: translateY(-50%);
  color: #20241f;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(28, 36, 31, 0.14);
  cursor: pointer;
}

.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }

.gallery-nav svg {
  width: 20px;
  height: 20px;
}

.gallery-nav:active {
  transform: translateY(-50%) scale(0.94);
}

.gallery-nav:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* The zoom control already sits top-right; keep the next arrow clear of it. */
.product-main-image:has([data-gallery-zoom]) .gallery-next {
  top: calc(50% + 8px);
}

@media (max-width: 620px) {
  .gallery-nav {
    width: 36px;
    height: 36px;
  }
}

/* The catalogue failing is not an empty cart. This state keeps the shopper's items front of
   mind and reads as a transient problem rather than a loss, so it is warm rather than red. */
.cart-unavailable {
  border: 1px solid var(--line-dark);
  background: var(--soft-yellow);
  border-radius: 0;
  padding: 22px 20px;
}

.cart-unavailable p {
  margin: 0 0 8px;
  color: var(--ink);
}

.cart-unavailable p:last-of-type {
  color: var(--ink-2);
}

.cart-unavailable .button {
  margin-top: 6px;
}

.cart-ceiling-notice {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-dark);
  background: var(--soft-yellow);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.catalogue-error {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid var(--red);
  background: #fdf1f0;
  color: var(--red-dark);
  font-size: 14px;
  line-height: 1.45;
}

/* --- contact field labels ---------------------------------------------------
   The email and phone inputs were the only controls on the checkout whose label
   sat INSIDE its own box, as 10px grey text that reads like placeholder copy,
   while every Stripe address field directly beneath them carries a solid label
   above the box. On 20 Aug both of the two sessions that reached the contact
   step pressed Pay with the email still empty: the error handler's focus() call
   was the first time either shopper had touched the field. One recovered after
   36 seconds, the other left 23 seconds later.

   So the label moves above the box and the box moves onto the input, matching
   the address fields it sits directly above. Keep the input at 16px: iOS zooms
   the whole viewport on focus for anything smaller, which on a phone reads as
   the page jumping. */
.checkout-control {
  position: static;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.checkout-control > span {
  position: static;
  display: block;
  margin: 0 0 6px;
  color: #20241f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  pointer-events: auto;
}

.checkout-control > span em {
  color: #596159;
  font-weight: 400;
}

.checkout-control input,
.checkout-control select {
  min-height: 48px;
  padding: 12px;
  border: 1px solid #7b857d;
  border-radius: 6px;
  background: #fff;
  font-size: 16px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* The ring belongs on the input now, not on the wrapper that no longer draws a box. */
.checkout-control:focus-within,
.checkout-control:has([aria-invalid="true"]) {
  border: 0;
  box-shadow: none;
}

.checkout-control input:focus,
.checkout-control select:focus {
  border-color: #245c45;
  box-shadow: 0 0 0 1px #245c45;
  outline: 0;
}

.checkout-control input[aria-invalid="true"],
.checkout-control select[aria-invalid="true"] {
  border-color: #b42318;
  box-shadow: 0 0 0 1px #b42318;
}

.checkout-control small {
  padding: 6px 0 0;
}

/* A sold-out variant option. Visibly unavailable, still selectable: the shopper
   can click it, see the photograph of that colour and read why they cannot buy
   it. Deliberately not [disabled], which is what made options unreachable. */
.variant-option-soldout > span { opacity: .55; text-decoration: line-through; text-decoration-thickness: 1px; }
.variant-option-soldout .variant-soldout-tag {
  display: block; margin-top: 2px; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--red, #b42318); opacity: .9; text-decoration: none;
}
.variant-option-soldout input:checked ~ span { opacity: .8; }

/* An axis with one value: stated, not selected. */
.variant-fixed { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; }
.variant-fixed-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.variant-fixed-value { font-size: 14px; color: var(--ink); }


/* ---------------------------------------------------------------------------
   Carried over from the English store when the French design system was adopted.
   These are the review block and the retail product card, which the French store
   does not have yet. The condition component now uses the same canonical wording
   as checkout and post-purchase messaging.
   --------------------------------------------------------------------------- */

.collection-card:hover { box-shadow: var(--elev-2); }

.ob-reviews { margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); }

.ob-reviews-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.ob-reviews-head h2 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 0; }

.ob-reviews-score { margin: 0; color: var(--muted); font-size: 14px; }

.ob-reviews-score strong { color: var(--ink); font-size: 17px; font-family: var(--font-display); }

.ob-reviews-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }

.ob-review { padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }

.ob-review-rating { margin: 0 0 6px; color: var(--green); letter-spacing: 2px; font-size: 14px; }

.ob-review-dim { color: var(--line-dark); }

.ob-review-body { margin: 0 0 6px; line-height: 1.55; }

.ob-review-meta { margin: 0; color: var(--muted); font-size: 13px; }

.product-card-rating { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }

.product-card-rating .stars { color: var(--green); letter-spacing: 1px; }

.product-card-rating .stars-dim { color: var(--line-dark); }

.product-card-rating .rating-count { color: var(--muted); }

.button-card { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 10px 14px; border: 0; border-radius: 8px; background: var(--green); color: #fff; font-weight: 600;
  font-size: 14px; text-decoration: none; transition: background-color 180ms var(--ease-out); }

.button-card:hover { background: var(--green-dark); }

/* The condition statement that replaced the Condition Split. One fact, stated once,
   instead of a two-cell object defending a proposition the store no longer sells. */
.ob-condition { display: grid; gap: 6px; margin: 12px 0; }
.ob-condition-chip { display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  padding: 6px 11px; border-radius: 999px; background: var(--ob-unused-fill, #DDEFE3);
  border: 1px solid var(--ob-unused-edge, #2F7A53); color: var(--ob-unused, #1C6B45);
  font-size: 13px; }
.ob-condition-chip strong { font-weight: 600; }
.ob-condition-sm { margin: 8px 0 0; }
.ob-condition-sm .ob-condition-chip { padding: 4px 9px; font-size: 11.5px; }
.ob-condition-row { font-size: 12.5px; color: var(--ob-muted, #5F5849); }


/* Structural rules restored after the design port. These carry the spec table,
   the buy-box record, the SKU strip and the reasons band: markup the store still
   emits. Only the Condition Split's .ob-split* rules were genuinely retired with
   the open-box proposition. */

.ob-reasons {
  border: 1px solid var(--ob-control);
  background: var(--ob-card);
}

.ob-reasons-title {
  margin: 0;
  padding: 6px 12px;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  font-family: var(--ob-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ob-reasons-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ob-reasons-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border-right: 1px solid var(--ob-rule);
}

.ob-reasons-list li:last-child {
  border-right: 0;
}

.ob-reasons-list span {
  color: var(--ob-muted);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ob-reasons-list strong {
  color: var(--ob-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.ob-reasons-note {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--ob-control);
  background: var(--ob-panel);
  color: var(--ob-ink-2);
  font-size: 12px;
  line-height: 1.4;
}

.ob-ref-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
  margin: 0;
  padding: 4px 10px;
  border-bottom: 1px solid var(--ob-control);
  background: var(--ob-panel);
  color: var(--ob-ink-2);
  font-family: var(--ob-mono);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ob-ref-collection {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ob-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-spec-label {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-spec-lead {
  flex: 1 1 12px;
  min-width: 10px;
  height: 0;
  margin: 0 6px;
  border-bottom: 1px dotted var(--ob-rule);
}

.ob-spec-value {
  flex: 0 0 auto;
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.ob-ref-strip {
    min-height: 20px;
    padding: 3px 8px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

.ob-ref-collection {
    display: none;
  }

.ob-spec-label {
    display: block;
    white-space: normal;
  }

.ob-spec-lead {
    display: none;
  }

.ob-spec-value {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    white-space: normal;
  }

.ob-record {
  padding: 0 14px;
  border: 1.5px solid var(--ob-ink);
  border-radius: 0;
  background: var(--ob-card);
}

.ob-record > .ob-signature {
  margin-left: -14px;
  margin-right: -14px;
}

.ob-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 14px;
  padding: 6px 14px;
  background: var(--ob-ink);
  color: var(--ob-on-ink);
  font-family: var(--ob-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ob-record-head-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ob-record-head-title svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.ob-record > .ob-split {
  margin-bottom: 16px;
}

.ob-findings {
  margin: 0 0 16px;
  border: 1px solid var(--ob-control);
  border-bottom: 0;
}

.ob-record > .ob-findings {
  border-left: 0;
  border-right: 0;
}

.ob-findings > .ob-finding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 11px;
  border-bottom: 1px solid var(--ob-control);
}

.ob-findings > .ob-finding:nth-child(even) {
  background: var(--ob-panel);
}

.ob-findings dt {
  color: var(--ob-ink-2);
  font-size: 13px;
  line-height: 1.35;
}

.ob-findings dd {
  margin: 0;
  color: var(--ob-ink);
  font-family: var(--ob-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.ob-findings > .ob-finding-noted:nth-child(even) {
  background: var(--ob-opened-fill);
  box-shadow: inset 3px 0 0 var(--ob-opened-edge);
}

.ob-findings > .ob-finding-noted dd {
  color: var(--ob-opened);
}

.ob-findings > .ob-finding-limit dd {
  color: var(--ob-limit);
}

.ob-findings > .ob-finding-limit:nth-child(even) {
  background: var(--ob-card);
}

.ob-signature {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-top: 1px solid var(--ob-control);
  background: var(--ob-panel);
  color: var(--ob-ink-2);
  font-family: var(--ob-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
}

.ob-signature strong {
  color: var(--ob-ink);
}

.ob-signature a:focus-visible {
  outline: 3px solid var(--ob-focus-invert);
  outline-offset: 2px;
}

.ob-findings > .ob-finding-noted {
    animation: ob-note-settle 180ms ease-out both;
  }

.ob-record { padding: 0 12px; }

.ob-record > .ob-signature {
    margin-left: -12px;
    margin-right: -12px;
  }

.ob-record-head { padding: 6px 12px; font-size: 10px; letter-spacing: 0.1em; }

.ob-findings > .ob-finding {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
  }

.ob-findings dt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
  }

.ob-findings dd {
    flex: 0 1 auto;
    font-size: 12px;
    letter-spacing: 0.02em;
  }

.ob-signature { padding: 10px 12px; }

.ob-record-head { letter-spacing: 0.06em; }

.ob-record {
  box-shadow: var(--elev-1);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}

/* Three classes the markup emits that neither sheet defined: the medium condition
   chip, a plain spec row and the category tile count. Unstyled they inherit whatever
   sits above them, which is how a page looks almost right and slightly wrong. */
.ob-condition-md { margin: 14px 0; }
.ob-spec-plain { color: var(--ob-muted, #5F5849); }
.ob-tile-count { display: block; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ob-muted, #5F5849); }

/* Reference price, discount badge and saving. The struck price is deliberately quieter
   than the price being charged: it is context, not the headline, and a former price set
   at the same visual weight as the real one makes the shopper read the wrong number. */
.launch-was-price {
  color: var(--muted, #6b6b6b);
  font-size: 20px;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  align-self: flex-end;
  padding-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.launch-discount-badge {
  align-self: flex-end;
  margin-bottom: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.launch-saving {
  margin: 6px 0 0;
  color: #146c2e;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dyson-price-disclosure {
  margin: 12px 0 10px;
  padding: 13px 15px 14px;
  border: 1px solid #c7d5cc;
  border-left: 4px solid var(--green);
  border-radius: 4px;
  background: #f4f7f5;
}

.dyson-price-disclosure-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.dyson-price-disclosure-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.dyson-price-disclosure-head > span {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.dyson-price-disclosure > p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.dyson-price-disclosure ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dyson-price-disclosure li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.35;
}

.dyson-price-disclosure li svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 1px;
  color: var(--green);
}

@media (max-width: 620px) {
  .dyson-price-disclosure {
    margin-top: 10px;
    padding: 12px;
  }

  .dyson-price-disclosure-head {
    display: block;
  }

  .dyson-price-disclosure-head > span {
    display: block;
    margin-top: 2px;
  }

  .dyson-price-disclosure ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
  }
}

/* ---------------------------------------------------------------------------
   Design tokens the .ob-* components depend on.

   These were lost when the French stylesheet was ported over wholesale: the 49
   .ob-* rule blocks were restored, but the :root variables they read were not.
   23 custom properties were being read by 45 declarations while nothing defined
   them, so every one of those declarations was invalid at computed-value time and
   silently fell back to an inherited value. Nothing looked broken enough to catch
   by eye, which is exactly why it survived: a missing var() does not error, it
   just quietly stops applying the design.

   Values are expressed against the current palette rather than copied from the
   original warm-kraft one, so they stay in step if the palette moves again.
   --------------------------------------------------------------------------- */
:root {
  --ob-ink: var(--ink);
  --ob-ink-2: var(--ink-2);
  --ob-muted: var(--muted);
  --ob-card: var(--paper);
  --ob-panel: var(--soft);
  --ob-control: var(--control-border);
  --ob-rule: var(--line);
  --ob-on-ink: #ffffff;
  --ob-on-ink-muted: #d5dcd6;
  --ob-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* "Never used / verified" green. Reads on the condition chip. */
  --ob-unused: var(--green);
  --ob-unused-edge: #2f7a53;
  --ob-unused-fill: #ddefe3;

  /* Amber "noted" row. Retained at its original meaning rather than repointed at
     green: it marks a row that needs the reader's attention. */
  --ob-opened: #8a4b0b;
  --ob-opened-edge: #96620f;
  --ob-opened-fill: #f7ecdc;

  /* A real per-order limit and form validation. Never urgency decoration. */
  --ob-limit: var(--red);
  --ob-focus-invert: #9cc9f2;

  /* Kept in sync with the root token: this later block would otherwise silently win the
     cascade and put every .ob-* heading back on the system stack. */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --elev-1: var(--shadow-soft);
  --elev-2: var(--shadow);
  --reveal-delay: 0ms;
  /* --sticky-bar-h is deliberately NOT defined here. app.js measures the real sticky bar and
     sets it on the root element; every consumer already writes var(--sticky-bar-h, 120px), so
     defining it up front replaced that 120px safety net with whatever placeholder was chosen
     and collapsed the reserved space until the script ran. */
}

/* Stated, not shouted. The customer needs to meet this before they pay, but it is a condition
   of delivery, not a selling point, so it sits quieter than the seller note above it. */
.seller-note-duties {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
}

.seller-note-duties a { color: inherit; text-underline-offset: 2px; }

/* Collapsed order summary bar. Label and chevron on the left, the amount on the right, with the
   reference price stacked quietly above it. The whole row is the control, so the target is the
   full width of the panel rather than a small chevron. */
.checkout-order-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  background: transparent;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
}

.checkout-order-bar:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.checkout-order-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--green);
}

.checkout-order-bar-label svg {
  width: 18px;
  height: 18px;
  transition: transform 160ms var(--ease-out, ease);
}

.checkout-order-bar[aria-expanded="true"] .checkout-order-bar-label svg {
  transform: rotate(180deg);
}

.checkout-order-bar[aria-expanded="true"] .checkout-order-bar-amounts {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .checkout-order-bar-label svg { transition: none; }
}

.checkout-order-bar-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}

.checkout-order-bar-amounts strong {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* The panel keeps its own padding for the expanded detail; the bar supplies its own, so the
   container must not double it up. */
.checkout-order:has(.checkout-order-bar) { padding-top: 0; }
.checkout-order-content { padding: 0 20px 20px; }

/* The heading row now carries only the edit link, so it should not reserve the space a
   two-line title needed. */
.checkout-order-heading-bare {
  justify-content: flex-end;
  padding-bottom: 4px;
}

/* ---------------------------------------------------------------------------
   The Forest offer page. The whole argument is one number against another, so the
   comparison is the largest thing on the page and everything else stays quiet.
   --------------------------------------------------------------------------- */
.forest-offer { background: var(--green); color: #fff; }
.forest-offer-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.forest-offer .eyebrow { color: #b9d7c7; }
.forest-offer h2 { color: #fff; margin-bottom: 28px; }

.forest-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 24px;
}

.forest-offer-grid > div {
  padding: 18px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.forest-offer-grid span {
  display: block;
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.forest-offer-grid small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #b9d7c7;
}

.forest-offer-grid > div:first-child span { text-decoration: line-through; color: #b9d7c7; }
.forest-offer-grid .is-ours { background: #fff; color: var(--green); }
.forest-offer-grid .is-ours small { color: var(--ink-2); }
.forest-offer-grid .is-saving span { color: #ffd9a0; }

.forest-offer-check { color: #dbe9e1; font-size: 15px; line-height: 1.6; }
.forest-offer-perseat { margin-top: 14px; font-size: 17px; }
.forest-offer-perseat strong { color: #ffd9a0; }

.forest-what-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.forest-what-grid li {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.forest-what-grid b { display: block; margin-bottom: 6px; }
.forest-what-grid span { color: var(--ink-2); font-size: 15px; line-height: 1.55; }

.forest-scarcity { background: var(--soft); }
.forest-scarcity-inner { max-width: 720px; margin: 0 auto; }
.forest-scarcity-limit {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--green);
  background: var(--paper);
  font-weight: 600;
}

@media (max-width: 620px) {
  .forest-offer-grid { grid-template-columns: 1fr; }
  .forest-offer-grid span { font-size: 30px; }
}

/* The UK-stock band. This is the answer to the biggest objection on a heavy item sold by a
   store that otherwise ships from the States, so it sits above the price justification. */
.forest-uk { background: var(--soft-blue); }
.forest-uk-inner { max-width: 780px; margin: 0 auto; }
.forest-uk-points {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
}
.forest-uk-points li { padding: 16px; border-radius: 10px; background: var(--paper); }
.forest-uk-points b { display: block; margin-bottom: 6px; }
.forest-uk-points span { color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* Estimated delivery, directly above the quantity and the buy button. Quiet by design: it is a
   fact the shopper needs before committing, not a claim competing with the price. */
.delivery-eta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.delivery-eta svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--green); margin-top: 1px; }
.delivery-eta strong { display: block; font-size: 15px; line-height: 1.35; }
.delivery-eta small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }

/* Delivery line inside the collapsed order summary. checkout.js fills both halves from the
   quote; the markup they were written to had been removed, so the panel showed no date. */
.checkout-order-delivery,
.checkout-order-return {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 0 0;
  border-top: 1px solid var(--line, #e4e8e5);
  margin-top: 12px;
}
.checkout-order-return {
  color: inherit;
  text-decoration: none;
}
.checkout-order-delivery svg,
.checkout-order-return svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.checkout-order-delivery span,
.checkout-order-return span { display: grid; gap: 2px; min-width: 0; }
.checkout-order-delivery strong,
.checkout-order-return strong { font-size: 14px; }
.checkout-order-delivery small,
.checkout-order-return small { font-size: 13px; line-height: 1.45; color: var(--muted, #5c6660); }

/* Reference price on listing tiles. priceComparison() already derived these for the PDP;
   the cards showed only the selling price, so the anchor was invisible until the click. */
.product-price-primary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.product-card-was {
  font-size: 0.8em;
  font-weight: 400;
  color: var(--ink-2, #5c6660);
  text-decoration: line-through;
}
.product-card-off {
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  background: #b3261e;
  color: #fff;
  letter-spacing: .01em;
}

/* Closing recap on the Forest offer page. Mirrors .awid-final so the two launch pages read
   as one system. */
.forest-final-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.forest-final-inner h2 { margin: 6px 0 10px; }
.forest-final-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin: 22px 0 14px;
}
.forest-final-price { display: grid; gap: 2px; text-align: left; }
.forest-final-price span { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #5c6660); }
.forest-final-price strong { font-size: 30px; line-height: 1.1; }
.forest-final-price small { font-size: 13px; color: var(--ink-2, #5c6660); }
.forest-final .delivery-eta { justify-content: center; }
@media (max-width: 620px) {
  .forest-final-buy { flex-direction: column; align-items: stretch; }
  .forest-final-price { text-align: center; }
  .forest-final-buy .button { width: 100%; }
}

/* .ob-spec-value is flex:0 0 auto + nowrap for the PDP spec table, where the value is short
   and should never wrap. Inside a listing tile the same class holds full sentences, so it has
   to be allowed to shrink and wrap or it overflows the card. Scoped, so the PDP is untouched. */
.product-card-specs .ob-spec-value {
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The assurances render twice on launch pages, once per buy column, exactly as the buy
   controls do. Only one is ever visible. */
.launch-mobile-facts {
  margin-top: 14px;
}

/* Customs disclosure on the confirmation page. Word-identical to the checkout line and both
   parts of the receipt email, so the three surfaces cannot drift apart. */
.order-customs-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--sand-2, #f4f2ec);
  color: var(--ink-2, #5c6660);
  font-size: 13px;
  line-height: 1.5;
}

/* The authenticity block on the Airwrap page. Deliberately plain: a heavily designed panel
   reads as marketing, and this section's whole job is to look like someone answering a
   question straight. */
.awid-real-inner { max-width: 720px; margin: 0 auto; }
.awid-real-inner h2 { margin: 6px 0 10px; text-wrap: balance; }
.awid-real-lead { color: var(--ink-2, #5c6660); margin: 0 0 20px; }
.awid-real-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.awid-real-points li {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-left: 2px solid var(--green, #2f5d45);
  background: var(--sand-2, #f4f2ec);
  border-radius: 0 8px 8px 0;
}
.awid-real-points b { font-size: 15px; }
.awid-real-points span { color: var(--ink-2, #5c6660); font-size: 14px; line-height: 1.55; }
@media (max-width: 620px) {
  .awid-real-points li { padding: 12px 14px; }
  .awid-real-points b { font-size: 14px; }
  .awid-real-points span { font-size: 13px; }
}

/* Reassurance above the form. The first screen on a phone was three demands for personal
   data with nothing to earn them; this is what the buyer is actually asking about. */
.checkout-trust-band {
  list-style: none;
  margin: 0 0 18px;
  padding: 14px;
  display: grid;
  gap: 12px;
  background: var(--sand-2, #f4f2ec);
  border-radius: 10px;
}
.checkout-trust-band li { display: flex; gap: 10px; align-items: flex-start; }
.checkout-trust-band svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--green, #2f5d45); }
.checkout-trust-band span { display: grid; gap: 1px; min-width: 0; }
.checkout-trust-band b { font-size: 13px; line-height: 1.3; }
.checkout-trust-band small { font-size: 12px; color: var(--ink-2, #5c6660); }
.checkout-trust-proof {
  margin: -8px 0 18px;
  padding: 0 2px;
  font-size: 13px;
  color: var(--ink-2, #5c6660);
}
.checkout-pay-reassure {
  margin: 12px 0 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-2, #5c6660);
}
.checkout-pay-reassure svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--green, #2f5d45); }
.checkout-pay-reassure strong { color: var(--ink, #1c211e); }
@media (min-width: 941px) {
  .checkout-trust-band { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ---------------------------------------------------------------------------
   CRO trust system: one condition story, one delivery story, every viewport.
   --------------------------------------------------------------------------- */

.product-card-media .ob-condition-sm {
  position: absolute;
  z-index: 2;
  right: 9px;
  bottom: 9px;
  left: 9px;
  margin: 0;
}

.product-card-media .ob-condition-sm .ob-condition-chip {
  width: 100%;
  justify-content: center;
  padding: 6px 8px;
  background: rgba(247, 252, 248, 0.96);
  backdrop-filter: blur(6px);
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
}

.ob-reasons {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(28, 36, 31, 0.06);
}

.ob-reasons-title {
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.ob-reasons-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 15px 14px;
}

.ob-reasons-list svg {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.ob-reasons-list b,
.ob-reasons-list span {
  display: block;
}

.ob-reasons-list b {
  margin-bottom: 3px;
  font-size: 13px;
}

.ob-reasons-list span {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
}

.ob-reasons-note {
  padding: 10px 14px;
  font-size: 11.5px;
}

.product-benefit-headline {
  max-width: 680px;
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 48px;
  font-weight: 850;
  line-height: 1.02;
  text-wrap: balance;
}

.product-layout-launch {
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 13px;
}

.product-layout-launch .product-intro {
  padding-top: 0;
}

.product-layout-launch .product-intro h1 {
  max-width: 680px;
  margin: 0 0 12px;
  color: var(--green);
  font-size: 26px;
  line-height: 1.18;
  text-wrap: balance;
}

.product-layout-launch .product-intro h1.product-primary-headline {
  color: var(--ink);
  font-size: 48px;
  font-weight: 850;
  line-height: 1.02;
}

.product-layout-launch .product-lead {
  margin: 0;
  line-height: 1.5;
}

.product-layout-launch .product-offer > .ob-condition {
  margin: 12px 0 8px;
}

.product-layout-launch .product-offer > .ob-condition .ob-condition-row {
  max-width: 62ch;
  line-height: 1.45;
}

.launch-desktop-buy {
  margin-top: 10px;
}

.delivery-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 13px 0 15px;
  padding-top: 2px;
}

.delivery-timeline-track {
  position: absolute;
  z-index: 0;
  top: 23px;
  right: calc(16.667% + 19px);
  left: calc(16.667% + 19px);
  height: 3px;
  background: var(--ink);
}

.delivery-milestone {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  justify-items: center;
  text-align: center;
}

.delivery-milestone-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 4px var(--paper);
}

.delivery-milestone-icon svg {
  width: 20px;
  height: 20px;
}

.delivery-milestone strong {
  min-height: 18px;
  margin-top: 8px;
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

.delivery-milestone small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
}

.delivery-timeline-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.delivery-timeline-note svg {
  flex: none;
  width: 15px;
  height: 15px;
}

.review-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.review-source-row .eyebrow {
  margin: 0;
}

.review-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.review-source-badge img {
  width: 58px;
  height: auto;
  display: block;
}

@media (min-width: 621px) {
  .cookie-banner {
    right: auto;
    left: 20px;
    width: min(500px, calc(100% - 40px));
    max-width: none;
    margin: 0;
    gap: 16px;
    align-items: center;
    padding: 13px 15px;
    border-radius: 8px;
  }

  .cookie-banner h2 {
    margin-bottom: 3px;
    font-size: 14px;
  }

  .cookie-banner p,
  .cookie-banner a {
    font-size: 11.5px;
    line-height: 1.4;
  }

  .cookie-actions .button {
    min-width: 88px;
    min-height: 40px;
    padding: 0 14px;
  }
}

@media (max-width: 760px) {
  .ob-reasons-list {
    grid-template-columns: 1fr;
  }

  .ob-reasons-list li {
    border-right: 0;
    border-bottom: 1px solid var(--ob-rule);
  }

  .ob-reasons-list li:last-child {
    border-bottom: 0;
  }

  .review-source-row {
    align-items: flex-start;
  }

  .review-source-badge {
    padding: 6px 8px;
  }

  .review-source-badge span {
    display: none;
  }
}

@media (max-width: 620px) {
  .product-layout-launch .product-intro h1 {
    font-size: 22px;
  }

  .product-layout-launch .product-intro h1.product-primary-headline {
    /* 34px wrapped the ad-landing headline over four lines and pushed the price 30px
       below the 812px fold. 29px keeps the authority and puts money on the first screen. */
    font-size: 29px;
    line-height: 1.1;
  }

  /* Price first inside the offer block on a phone. The badge and the rating line above it
     pushed the number itself 30px under the 812px fold; with the price row leading, the
     figure the ad promised is on screen the moment the page settles. The proof line still
     sits one glance below. Display-order only: the DOM, the JS bindings and the desktop
     column are untouched. */
  .product-layout-launch .product-offer {
    display: flex;
    flex-direction: column;
  }
  .product-layout-launch .product-offer .launch-price-row { order: 1; }
  .product-layout-launch .product-offer .launch-clearance-badge { order: 2; }
  .product-layout-launch .product-offer .launch-rating-line { order: 3; }
  .product-layout-launch .product-offer .launch-price-reason { order: 4; }
  .product-layout-launch .product-offer .launch-saving { order: 5; }
  .product-layout-launch .product-offer .launch-price-caption { order: 6; }
  .product-layout-launch .product-offer .launch-desktop-buy { order: 7; }

  /* The last 20px of fold budget: breadcrumb air and the gallery's bottom margin. */
  .product-breadcrumbs {
    margin-top: 6px;
    margin-bottom: 6px;
  }
  .product-layout-launch .product-gallery {
    margin-bottom: 4px;
  }

  .product-benefit-headline {
    font-size: 34px;
    line-height: 1.06;
  }

  .delivery-milestone-icon {
    width: 42px;
    height: 42px;
  }

  .delivery-timeline-track {
    top: 21px;
    right: calc(16.667% + 17px);
    left: calc(16.667% + 17px);
  }

  .delivery-milestone strong {
    font-size: 12px;
  }

  .delivery-milestone small,
  .delivery-timeline-note {
    font-size: 10.5px;
  }
}

@media (max-width: 360px) {
  .delivery-milestone strong {
    font-size: 11px;
  }

  .delivery-milestone small {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .delivery-timeline.is-ready .delivery-milestone-icon {
    animation: delivery-step-in 380ms var(--ease-out) both;
  }

  .delivery-timeline.is-ready .delivery-milestone:nth-of-type(3) .delivery-milestone-icon {
    animation-delay: 70ms;
  }

  .delivery-timeline.is-ready .delivery-milestone:nth-of-type(4) .delivery-milestone-icon {
    animation-delay: 140ms;
  }
}

@keyframes delivery-step-in {
  from { opacity: 0; transform: translateY(5px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Account, wishlist and commerce header */
.wishlist-page,
.account-page {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 88px;
}

.wishlist-hero,
.account-hero {
  margin: 36px 0 40px;
}

.wishlist-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-dark);
}

.wishlist-hero h1,
.account-hero h1 {
  margin: 5px 0 10px;
  font-size: clamp(38px, 5vw, 64px);
}

.wishlist-hero p,
.account-hero p {
  max-width: 680px;
  color: var(--muted);
  font-size: 17px;
}

.wishlist-hero > strong {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 18px;
}

.wishlist-page[data-wishlist-ready="false"] .wishlist-grid {
  visibility: hidden;
}

.wishlist-empty {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
}

.wishlist-empty > svg {
  width: 44px;
  height: 44px;
  color: var(--green);
}

.wishlist-empty p {
  color: var(--muted);
}

.wishlist-empty .button {
  margin-top: 8px;
}

.account-hero {
  max-width: 760px;
}

.account-loading {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
}

.account-loading svg {
  animation: spin 900ms linear infinite;
}

.account-auth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.account-auth > section {
  padding: 40px clamp(24px, 4vw, 58px) 44px 0;
}

.account-auth > section + section {
  padding-right: 0;
  padding-left: clamp(24px, 4vw, 58px);
  border-left: 1px solid var(--line-dark);
}

.account-auth h2,
.account-dashboard h2 {
  margin-bottom: 8px;
  font-size: 28px;
}

.account-auth > section > p {
  margin-bottom: 24px;
  color: var(--muted);
}

.account-auth form {
  display: grid;
  gap: 17px;
}

.account-auth label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
}

.account-auth label small {
  color: var(--muted);
  font-weight: 500;
}

.account-auth input {
  width: 100%;
  height: 50px;
  padding: 0 13px;
  border: 1px solid var(--control-border);
  border-radius: 3px;
  background: var(--paper);
  font: inherit;
}

.account-auth input:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.account-form-status {
  min-height: 20px;
  color: var(--red);
  font-size: 13px;
}

.account-form-status.is-success {
  color: var(--green);
}

.account-help-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--green);
  font-size: 13px;
  font-weight: 750;
  text-decoration: underline;
}

.account-dashboard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.account-dashboard > header p:last-child {
  color: var(--muted);
}

.account-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 34px 0 62px;
  border: 1px solid var(--line-dark);
}

.account-summary > a,
.account-summary > div {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
}

.account-summary > a {
  color: inherit;
}

.account-summary > * + * {
  border-left: 1px solid var(--line-dark);
}

.account-summary svg {
  color: var(--green);
}

.account-summary span {
  display: grid;
}

.account-summary strong {
  font-size: 24px;
}

.account-summary small {
  color: var(--muted);
}

.account-summary > a > svg:last-child {
  margin-left: auto;
  color: var(--ink);
}

.account-orders-list {
  display: grid;
  border-top: 1px solid var(--line-dark);
}

.account-order {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.5fr) auto;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-dark);
}

.account-order-reference,
.account-order-total {
  display: grid;
  align-content: start;
  gap: 4px;
}

.account-order-reference small,
.account-order-total small,
.account-orders-empty {
  color: var(--muted);
}

.account-order-items {
  display: grid;
  gap: 9px;
}

.account-order-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 11px;
}

.account-order-item img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: var(--soft);
}

.account-order-item span {
  display: grid;
  gap: 2px;
}

.account-order-item small {
  color: var(--muted);
}

.account-orders-empty {
  padding: 32px 0;
  border-top: 1px solid var(--line-dark);
}

@media (max-width: 900px) {
  .wishlist-page,
  .account-page {
    width: calc(100% - 32px);
    padding-top: 22px;
  }

  .account-auth {
    grid-template-columns: 1fr;
  }

  .account-auth > section,
  .account-auth > section + section {
    padding: 32px 0;
  }

  .account-auth > section + section {
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .account-order {
    grid-template-columns: 1fr auto;
  }

  .account-order-items {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 620px) {
  .wishlist-hero {
    align-items: start;
    flex-direction: column;
    margin-top: 24px;
  }

  .wishlist-hero h1,
  .account-hero h1 {
    font-size: 38px;
  }

  .product-card-wishlist {
    width: 38px;
    height: 38px;
  }

  .product-title-row {
    gap: 10px;
  }

  .product-save-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin-top: 2px;
  }

  .account-dashboard > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-summary {
    grid-template-columns: 1fr;
  }

  .account-summary > * + * {
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .account-order {
    grid-template-columns: 1fr;
  }

  .account-order-items,
  .account-order-total {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Keep the first-visit notice readable without turning its copy into a narrow column. */
@media (max-width: 620px) {
  .cookie-banner {
    bottom: calc(10px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    max-height: min(70vh, 420px);
    overflow-y: auto;
  }

  .cookie-banner > div:first-child {
    min-width: 0;
  }

  .cookie-actions {
    display: block;
  }

  .cookie-actions .button {
    width: 100%;
  }
}

/* ============================================================================
   2026-08-24 PDP trust package (owner reference: competitor UK PDP).
   Trust strip under the breadcrumb, VAT caption, payment marks above the CTA,
   order-by heading on the delivery timeline, purchase trust card.
   ========================================================================== */
.pdp-trust-strip { display: flex; gap: 10px; flex-wrap: wrap; width: min(var(--max), calc(100% - 48px)); margin: 2px auto 14px; }
.pdp-trust-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #fff; border: 1px solid #dce1dc; border-radius: 999px; font-size: 13px; color: #37403a; text-decoration: none; }
.pdp-trust-pill svg { width: 17px; height: 17px; color: #245c45; }
.pdp-trust-pill strong { font-weight: 800; color: #20241f; }
.pdp-trust-stars { color: #e8a33d; letter-spacing: 1.5px; font-size: 12px; }
.pdp-trust-pill-rating:hover { border-color: #245c45; }

.payment-badges-above { margin: 0 0 10px; }

.delivery-block { margin-top: 14px; }
.delivery-order-by { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #20241f; }
.delivery-order-by strong { color: #1d7a4f; }

.purchase-trust-card { list-style: none; margin: 14px 0 0; padding: 14px 16px; display: grid; gap: 12px; background: #f7f9f7; border: 1px solid #e2e7e2; border-radius: 12px; }
.purchase-trust-card li { display: flex; align-items: flex-start; gap: 11px; }
.purchase-trust-card svg { width: 20px; height: 20px; flex: none; color: #1d7a4f; margin-top: 1px; }
.purchase-trust-card strong { display: block; font-size: 14.5px; font-weight: 800; color: #20241f; }
.purchase-trust-card span { font-size: 12.5px; color: #5b635c; }

@media (max-width: 900px) {
  .pdp-trust-strip { width: calc(100% - 32px); }
  .pdp-trust-pill { padding: 8px 12px; font-size: 12.5px; }
}

/* Trustpilot pill + daily sold chip (2026-08-24, owner instruction) */
.pdp-trust-pill-trustpilot strong { color: #20241f; }
.pdp-trust-pill-trustpilot .tp-stars { display: inline-flex; gap: 2px; }
.pdp-trust-pill-trustpilot .tp-stars i { width: 14px; height: 14px; background: #00b67a; display: inline-block; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pdp-trust-pill-trustpilot b { font-weight: 800; color: #191919; }
.sold-chip { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 14px; background: #faf7f2; border: 1px solid #eee7da; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #37403a; }
.sold-chip-flame { font-size: 15px; }

/* Amazon-style rating proof row (2026-08-24, owner instruction) */
.amazon-rating-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.amazon-rating-score { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: #20241f; }
.amazon-rating-score strong { font-size: 16px; font-weight: 800; }
.amazon-stars { position: relative; display: inline-block; font-size: 17px; letter-spacing: 2px; line-height: 1; }
.amazon-stars-bg { color: #d9d3c7; }
.amazon-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #FF9900; }
.amazon-rating-count { font-size: 14px; color: #007185; font-weight: 600; }
.amazon-rating-source { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 12.5px; color: #5b635c; }
.amazon-word { position: relative; font-weight: 800; font-size: 15px; letter-spacing: -0.4px; color: #232F3E; line-height: 1; padding-bottom: 6px; }
.amazon-smile { position: absolute; left: 1px; bottom: 0; width: 34px; height: 8px; }
a.amazon-rating-source:hover span:last-child { text-decoration: underline; }

/* Trustpilot empty star + clickable pill */
.pdp-trust-pill-trustpilot .tp-stars .tp-star-off { background: #dcdce6; }
a.pdp-trust-pill-trustpilot:hover { border-color: #00b67a; }

/* The generic no-facts fallback (.product-layout:not(:has(> .product-facts)), specificity
   0,2,0) beats .product-layout-launch (0,1,0) and erased the "offer" area once the
   launch pages stopped rendering a facts block (180-jours removal, 2026-08-24) — which
   auto-placed the entire price/buy column. Launch pages get their own no-facts grid. */
.product-layout-launch:not(:has(> .product-facts)) {
  grid-template-areas:
    "gallery intro"
    "gallery offer"
    "gallery buy";
  grid-template-rows: auto auto 1fr;
}
@media (max-width: 900px) {
  .product-layout-launch:not(:has(> .product-facts)) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "gallery"
      "offer"
      "buy";
    grid-template-rows: auto;
  }
}

/* FR conversion package 2026-08-25: installments messaging + checkout reassurance */
.launch-installments { margin: 2px 0 0; font-size: 0.95rem; font-weight: 700; color: #16452f; order: 5; }
.launch-installments span { font-weight: 500; color: #52605a; }
.checkout-installments-note { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: #eef6f0; color: #16452f; font-size: 0.9rem; }
.checkout-installments-note strong { font-weight: 700; }
.payment-badges-checkout { justify-content: center; margin-top: 10px; }
.checkout-button-security { flex-wrap: wrap; justify-content: center; row-gap: 4px; }

/* Cart drawer quantity stepper (2026-08-26): same machinery as the cart page, compact */
.drawer-line-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.drawer-line-controls strong { font-size: 0.95rem; white-space: nowrap; }
.quantity-stepper-compact { display: inline-flex; align-items: center; border: 1px solid #d7dbd7; border-radius: 8px; overflow: hidden; }
.quantity-stepper-compact button { width: 30px; height: 30px; border: 0; background: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.quantity-stepper-compact button:active { background: #eef2ee; }
.quantity-stepper-compact input { width: 30px; height: 30px; border: 0; text-align: center; font-size: 0.9rem; background: #fff; padding: 0; }
.drawer-qty-fixed { font-size: 0.85rem; color: #52605a; }