/* Seboozoo Padel — main (v2: cinematic, full-bleed, more beleving) */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--sb-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sb-black);
  background: var(--sb-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.sb-display {
  font-family: var(--sb-font-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 0.4em;
  text-wrap: balance; /* even, intentional line breaks on multi-line headings */
  color: inherit; /* follow section context (white on dark, black on cream) — overrides Blocksy --theme-headings-color */
}
/* Long-form paragraphs read better with pretty wrapping (no orphans/widows) */
p, li { text-wrap: pretty; }
h1 { font-size: clamp(2.6rem, 7vw, 6.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 4rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); }
h4 { font-size: 1.2rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color .25s var(--sb-ease); }
a:hover { color: var(--sb-gold); }

/* === Accessible focus ring (applies to every interactive element) === */
:where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sb-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Link hover on light surfaces must keep contrast — switch to dark gold */
.sb-section--cream a:hover,
.sb-product-rail a:hover,
.sb-split__media a:hover { color: var(--sb-gold-text-on-light); }

img, video { max-width: 100%; height: auto; display: block; }

::selection { background: var(--sb-gold); color: var(--sb-black); }

/* ===== Full-bleed full-width by default ===== */
.wp-block-html { width: 100%; }
.entry-content > .sb-section,
.entry-content > .sb-hero,
.entry-content > .sb-split,
.entry-content > .sb-marquee,
.entry-content > .sb-page-hero,
.entry-content > .sb-subscribe,
.entry-content > .sb-trust,
.entry-content > .sb-stage,
.entry-content > .sb-immerse,
.entry-content > .sb-product-rail,
.entry-content > .sb-specs,
.entry-content > .sb-reviews,
.entry-content > .sb-quote {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}

.sb-wrap { width: 100%; padding-inline: clamp(1.5rem, 6vw, 6rem); }
.sb-narrow { max-width: 1080px; margin: 0 auto; padding-inline: clamp(1.5rem, 6vw, 6rem); }

/* Prose headings (legal / info pages: privacy, voorwaarden, verzending-retour).
   These inherit the editorial display sizes (h2 = 3rem, uppercase) which is far
   too large for body copy — scale them down to readable section headings. */
.sb-narrow h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.15; margin: 2.6rem 0 0.7rem; }
.sb-narrow h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.2; margin: 2rem 0 0.6rem; }
.sb-narrow h4 { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.25; margin: 1.5rem 0 0.45rem; }
.sb-narrow h2:first-child, .sb-narrow h3:first-child { margin-top: 0; }

.sb-section { padding-block: clamp(3rem, 7vw, 6.5rem); background: var(--sb-black); color: var(--sb-white); }
.sb-section--cream { background: var(--sb-cream); color: var(--sb-black); }
.sb-section--ink { background: var(--sb-ink); color: var(--sb-white); }

.sb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--sb-font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--sb-gold);
  margin: 0 0 1.5rem;
}
/* Decorative eyebrow dash + its hover-grow removed per design feedback — the
   little line read as generic/templated. Eyebrows are now plain labels. */
/* Gold on cream/white fails WCAG (~1.9:1) — use the AA-safe gold for eyebrows
   that sit on light section backgrounds. */
.sb-section--cream .sb-eyebrow { color: var(--sb-gold-text-on-light); }
/* Conversely, force eyebrows on dark sections back to the AAA-on-black gold —
   page content sometimes carries an inline `color:gold-text-on-light` override
   that fails contrast on dark backgrounds. */
.sb-product-rail .sb-eyebrow,
.sb-stage .sb-eyebrow,
.sb-immerse .sb-eyebrow,
.sb-section--ink .sb-eyebrow,
.sb-page-hero .sb-eyebrow,
.sb-specs .sb-eyebrow,
.sb-subscribe .sb-eyebrow { color: var(--sb-gold) !important; }

/* Hero eyebrow: normal sentence-case label, no decorative line */
.sb-hero__eyebrow {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
  font-size: 1rem;
  color: var(--sb-gold);
}

/* ===== Buttons ===== */
.sb-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--sb-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.25rem 2.1rem;
  border: 1px solid var(--sb-white);
  background: var(--sb-white);
  color: var(--sb-black);
  border-radius: var(--sb-radius);
  transition: background-color .35s var(--sb-ease), color .35s var(--sb-ease),
              border-color .35s var(--sb-ease), transform .35s var(--sb-ease),
              box-shadow .35s var(--sb-ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.sb-btn::after {
  content: '→';
  font-family: var(--sb-font-body);
  transition: transform .35s var(--sb-ease);
}
.sb-btn:hover { background: var(--sb-gold); color: var(--sb-black); border-color: var(--sb-gold); }
.sb-btn:hover::after { transform: translateX(6px); }
.sb-btn--ghost { background: transparent; color: var(--sb-white); border-color: rgba(255,255,255,0.45); }
.sb-btn--ghost:hover { background: var(--sb-white); color: var(--sb-black); border-color: var(--sb-white); }
.sb-btn--gold { background: var(--sb-gold); color: var(--sb-black); border-color: var(--sb-gold); }
.sb-btn--gold:hover { background: var(--sb-white); color: var(--sb-black); border-color: var(--sb-white); }

/* ===== HERO — cinematic 100vh ===== */
.sb-hero {
  position: relative;
  min-height: 100svh;
  background: var(--sb-black);
  color: var(--sb-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.sb-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.25) brightness(0.5) contrast(1.03);
  z-index: -2;
}
.sb-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.22) 45%, rgba(10,10,10,0.8) 100%);
  z-index: -1;
}
/* subtle gold edge accent, not a wash */
.sb-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--sb-gold), transparent 60%);
  z-index: 1;
}
.sb-hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: clamp(8rem, 14vh, 11rem) clamp(1.5rem, 6vw, 6rem) clamp(3rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.sb-hero__col-1 { max-width: 900px; }
.sb-hero h1 {
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  line-height: 1.0;
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}
.sb-hero h1 .gold { color: var(--sb-gold); }
.sb-hero p.lead {
  font-size: clamp(1.1rem, 1.55vw, 1.45rem);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 2.5rem;
  color: rgba(255,255,255,0.82);
}
.sb-hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.sb-hero__scroll {
  position: absolute;
  left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  font-family: var(--sb-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  z-index: 3;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color .25s var(--sb-ease);
}
.sb-hero__scroll:hover { color: var(--sb-gold); }
.sb-hero__scroll::after {
  content: ''; width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), transparent);
  animation: sb-line 2.4s ease-in-out infinite;
}
@keyframes sb-line { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } }

.sb-hero__side {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem); top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  font-family: var(--sb-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sb-gold);
  z-index: 2;
  display: none;
}
@media (min-width: 1024px) { .sb-hero__side { display: block; } }

/* 3D float (no rotation) — shared by the product ball wherever it appears. */
@keyframes sb-ball-float3d {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-22px) scale(1.035); }
}
@keyframes sb-ball-shadow3d {
  0%, 100% { transform: scale(1); opacity: .6; }
  50%      { transform: scale(0.72); opacity: .32; }
}

/* ===== Marquee ===== */
.sb-marquee {
  background: var(--sb-black);
  color: var(--sb-white);
  border-block: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  padding-block: 1.25rem;
}
.sb-marquee__track {
  display: flex; gap: 5rem;
  animation: sb-scroll 40s linear infinite;
  white-space: nowrap;
  font-family: var(--sb-font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}
.sb-marquee__track span { display: inline-flex; align-items: center; gap: 2rem; color: rgba(255,255,255,0.92); font-weight: 700; }
.sb-marquee__track span::after { content: '/'; color: var(--sb-gold); font-size: 0.7em; font-weight: 500; }
@keyframes sb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== STAGE — gigantic product showcase ===== */
.sb-stage {
  position: relative;
  background: var(--sb-black);
  color: var(--sb-white);
  padding-block: clamp(2.5rem, 5vw, 5rem);
  overflow: hidden;
}
.sb-stage::before {
  content: '';
  position: absolute; inset: -10%;
  background: radial-gradient(circle at 30% 40%, rgba(201,169,97,0.22), transparent 55%);
  pointer-events: none;
}
.sb-stage__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}
@media (min-width: 900px) {
  .sb-stage__inner { grid-template-columns: 1.2fr 1fr; gap: 0; }
}
.sb-stage__media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.sb-stage__media img {
  width: 58%;
  filter: drop-shadow(0 60px 60px rgba(0,0,0,0.6));
  animation: sb-ball-float3d 7s ease-in-out infinite;
}
.sb-stage__media::after {
  content: '';
  position: absolute; left: 10%; right: 10%; bottom: 8%;
  height: 30px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(8px);
  animation: sb-ball-shadow3d 7s ease-in-out infinite;
}
.sb-stage__copy { padding-inline: clamp(0rem, 3vw, 3rem); }
.sb-stage__copy h2 {
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  margin-bottom: 1.5rem;
  max-width: 14ch;
}
.sb-stage__copy p { color: rgba(255,255,255,0.75); max-width: 48ch; font-size: 1.1rem; }
.sb-stage__num { display: none; }

/* ===== Immerse — large image with overlay text ===== */
.sb-immerse {
  position: relative;
  min-height: 80vh;
  display: grid; place-items: center;
  color: var(--sb-white);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.sb-immerse__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.04);
}
.sb-immerse::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.7));
}
.sb-immerse__inner {
  position: relative; z-index: 1;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 6vw, 6rem);
  max-width: 1200px;
}
.sb-immerse h2 {
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  margin: 0 0 1.5rem;
  line-height: 0.98;
}
.sb-immerse p { font-size: clamp(1.1rem, 1.5vw, 1.4rem); max-width: 56ch; margin: 0 auto 2.5rem; color: rgba(255,255,255,0.85); }

/* ===== Editorial split (real full width) ===== */
.sb-split {
  display: grid; grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .sb-split { grid-template-columns: 1.1fr 1fr; min-height: 90vh; }
  .sb-split--reverse { grid-template-columns: 1fr 1.1fr; }
  .sb-split--reverse .sb-split__media { order: 2; }
}
.sb-split__media {
  background: var(--sb-cream);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  min-height: 60vh;
}
.sb-split__media img {
  width: 75%; max-height: 80%;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.18));
}
.sb-split__media::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(201,169,97,0.08), transparent 60%);
}
.sb-split__body {
  background: var(--sb-black);
  color: var(--sb-white);
  padding: clamp(3rem, 8vw, 8rem) clamp(1.5rem, 6vw, 6rem);
  display: flex; flex-direction: column; justify-content: center;
}
.sb-split__body h2 {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  max-width: 14ch;
  margin-bottom: 1.5rem;
}
.sb-split__body p { color: rgba(255,255,255,0.78); max-width: 48ch; font-size: 1.1rem; line-height: 1.7; }
.sb-split__big { display: none; }

/* ===== Specs / USP grid — full width ===== */
.sb-specs {
  background: var(--sb-black);
  color: var(--sb-white);
  padding-block: clamp(3rem, 5vw, 5rem);
}
.sb-specs__head { padding-inline: clamp(1.5rem, 6vw, 6rem); margin-bottom: 4rem; max-width: 1100px; }
.sb-specs__head h2 { font-size: clamp(2rem, 5vw, 4.5rem); max-width: 18ch; }
/* Four equal, FILLED cards that together span the full container (same 6rem
   gutter rhythm as the heading/header/footer). Grid stretch keeps all four the
   same height regardless of copy length, so they read as a solid, even row of
   filled boxes rather than open columns. */
.sb-specs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  /* Both edges on the same 6rem gutter as the header/footer/product rail so the
     row of cards sits inside the container, not flush to the screen. */
  padding-inline: clamp(1.5rem, 6vw, 6rem);
}
.sb-specs__item {
  padding: clamp(2.5rem, 3.4vw, 4rem) clamp(1.75rem, 2.2vw, 2.5rem);
  min-height: clamp(20rem, 26vw, 26rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--sb-radius-l);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: background .35s var(--sb-ease), border-color .35s var(--sb-ease);
}
.sb-specs__item:hover {
  background: linear-gradient(180deg, rgba(201,169,97,0.10), rgba(201,169,97,0.02));
  border-color: rgba(201,169,97,0.35);
}
@media (max-width: 980px) { .sb-specs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sb-specs__grid { grid-template-columns: 1fr; } }
.sb-specs__num {
  font-family: var(--sb-font-body);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--sb-gold);
  margin-bottom: 1.5rem;
}
.sb-specs__title {
  font-family: var(--sb-font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0 0 1rem;
}
.sb-specs__text { color: rgba(255,255,255,0.7); margin: 0; font-size: 1rem; }

/* ===== Product rail — full width horizontal showcase (dark, unified) ===== */
.sb-product-rail {
  background: var(--sb-ink);
  color: var(--sb-white);
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 6vw, 6rem) 0;
}
.sb-product-rail__head {
  display: flex; align-items: end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  padding: 0 0 3rem;
}
.sb-product-rail__head h2 { font-size: clamp(2rem, 4.5vw, 3.8rem); max-width: 18ch; margin: 0; }

/* The [products] shortcode renders right after the rail head — make it a dark band.
   Force full bleed so the 3-card grid fills the entire content width (a parent
   layout-constrained block otherwise caps it at 1290px centered). */
.home .woocommerce,
.home ul.products {
  background: var(--sb-ink);
  margin: 0 !important;
}
.home .woocommerce {
  padding: 0 clamp(1.5rem, 6vw, 6rem) clamp(5rem, 10vw, 9rem);
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.home ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(1.25rem, 2.5vw, 2.5rem) !important;
  list-style: none; padding: 0 !important; margin: 0 !important;
  width: 100%;
}
@media (max-width: 900px) { .home ul.products { grid-template-columns: 1fr !important; } }
.home ul.products li.product {
  width: 100% !important; margin: 0 !important; float: none !important;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--sb-radius-l);
  overflow: hidden;
  padding: clamp(1.75rem, 2.2vw, 2.5rem) clamp(1.75rem, 2.2vw, 2.5rem) clamp(2rem, 2.6vw, 2.75rem);
  display: flex; flex-direction: column;
  transition: transform .35s var(--sb-ease), box-shadow .35s var(--sb-ease);
}
.home ul.products li.product:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
.home ul.products li.product a img {
  background: var(--sb-cream);
  border-radius: var(--sb-radius);
  aspect-ratio: 1/1; object-fit: cover; padding: 0;
  width: 100%;
  margin-bottom: 1.5rem !important;
}
.home ul.products li.product .woocommerce-loop-product__title {
  color: var(--sb-black) !important;
  font-family: var(--sb-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.3rem, 1.6vw, 1.6rem) !important;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1;
  padding: 0 !important; margin: 0 0 .5rem !important;
}
.home ul.products li.product .price {
  color: var(--sb-gold-text-on-light) !important;
  font-weight: 700; font-family: var(--sb-font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  margin-bottom: 1.5rem;
}
.home ul.products li.product .price del { color: rgba(0,0,0,0.6); font-weight: 500; }
.home ul.products li.product .button,
.home ul.products li.product .added_to_cart {
  margin-top: auto !important;
  background: var(--sb-black) !important; color: #fff !important;
  border-radius: var(--sb-radius) !important; text-align: center;
  font-family: var(--sb-font-body) !important; text-transform: uppercase; letter-spacing: 0.08em;
}
.home ul.products li.product .button:hover { background: var(--sb-gold) !important; color: var(--sb-black) !important; }
.home ul.products li.product .onsale {
  background: var(--sb-gold) !important; color: var(--sb-black) !important; border-radius: var(--sb-radius);
}

/* ===== Quote / immersive editorial ===== */
.sb-quote {
  background: var(--sb-black);
  color: var(--sb-white);
  padding: clamp(6rem, 14vw, 13rem) clamp(1.5rem, 6vw, 6rem);
  text-align: center;
}
.sb-quote blockquote {
  font-family: var(--sb-font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 24ch;
  margin: 0 auto;
  text-transform: uppercase;
}
.sb-quote blockquote .gold { color: var(--sb-gold); }
.sb-quote cite {
  display: block;
  margin-top: 2.5rem;
  font-family: var(--sb-font-body);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-style: normal;
}

/* ===== Subscription banner ===== */
.sb-subscribe {
  background:
    radial-gradient(circle at 80% 20%, rgba(201,169,97,0.25), transparent 55%),
    var(--sb-black);
  color: var(--sb-white);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 6vw, 6rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sb-subscribe__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.sb-subscribe::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,10,0.9) 30%, rgba(10,10,10,0.55) 100%),
              radial-gradient(circle at 80% 20%, rgba(201,169,97,0.22), transparent 55%);
}
.sb-subscribe__inner { position: relative; display: grid; gap: 2.5rem; grid-template-columns: 1fr; max-width: 1400px; }
@media (min-width: 900px) { .sb-subscribe__inner { grid-template-columns: 1.4fr auto; align-items: end; } }
.sb-subscribe h2 { font-size: clamp(2rem, 5vw, 4.5rem); max-width: 18ch; margin: 0; }
.sb-subscribe__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-content: start; align-items: flex-start; }
.sb-subscribe p { color: rgba(255,255,255,0.78); max-width: 50ch; margin: 1.5rem 0 0; font-size: 1.1rem; }

/* ===== Trust strip ===== */
.sb-trust {
  padding: 2.5rem clamp(1.5rem, 6vw, 6rem);
  background: #ffffff;
  color: var(--sb-ink);
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.sb-trust__list {
  display: flex; gap: 3rem; justify-content: center; flex-wrap: wrap;
  font-family: var(--sb-font-body);
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 0.98rem;
}
.sb-trust__list span::before { content: '◆ '; color: var(--sb-gold); margin-right: .5rem; }

/* ===== Page hero (with optional background photo) ===== */
.sb-page-hero {
  background: var(--sb-black);
  color: var(--sb-white);
  padding: clamp(8rem, 18vw, 15rem) clamp(1.5rem, 6vw, 6rem) clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sb-page-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  filter: grayscale(0.2) brightness(0.52) contrast(1.03);
  transform: scale(1.04);
}
.sb-page-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.28) 45%, rgba(10,10,10,0.85) 100%);
}
.sb-page-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--sb-gold), transparent 55%);
}
.sb-page-hero .sb-wrap { position: relative; z-index: 1; }
.sb-page-hero h1 {
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  max-width: 20ch;
  margin: 0;
}

/* ===== Steps (how it works) — on cream ===== */
.sb-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 1200px; margin: 3.5rem auto 0;
  padding-inline: clamp(1.5rem, 6vw, 6rem);
}
@media (max-width: 820px) { .sb-steps { grid-template-columns: 1fr; } }
.sb-step {
  background: var(--sb-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--sb-radius-l);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
}
.sb-step__num {
  font-family: var(--sb-font-display); font-weight: 800;
  font-size: 2.4rem; color: var(--sb-gold-text-on-light); line-height: 1;
  display: block; margin-bottom: 1rem;
}
.sb-step h3 { color: var(--sb-black); font-size: 1.4rem; margin: 0 0 .6rem; }
.sb-step p { color: rgba(0,0,0,0.66); margin: 0; font-size: 0.98rem; line-height: 1.65; }

/* ===== Benefits — on dark ===== */
/* The "Waarom abonnees nooit meer terug gaan" band gets a subtle moody photo
   behind a heavy dark gradient so the white benefit text stays high-contrast. */
.sb-section:has(.sb-benefits) {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.90) 0%, rgba(10,10,10,0.82) 50%, rgba(10,10,10,0.92) 100%),
    url('../img/bg-benefits.jpg') center / cover no-repeat;
}
.sb-benefits {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 900px) { .sb-benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sb-benefits { grid-template-columns: 1fr; } }
.sb-benefit { border-left: 2px solid var(--sb-gold); padding: 0.25rem 0 0.25rem 1.25rem; }
.sb-benefit h3 { font-size: 1.2rem; margin: 0 0 .4rem; color: #fff; }
.sb-benefit p { margin: 0; color: rgba(255,255,255,0.66); font-size: 0.95rem; line-height: 1.6; }

/* ===== FAQ accordion ===== */
.sb-faq { max-width: 980px; margin: 0 auto; padding-inline: clamp(1.5rem, 6vw, 6rem); }
.sb-faq details {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 1.75rem 0;
}
.sb-faq details:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.12); }
.sb-faq summary {
  list-style: none; cursor: pointer;
  font-family: var(--sb-font-display);
  text-transform: uppercase;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  letter-spacing: -0.01em;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  color: var(--sb-white);
}
.sb-section--cream .sb-faq summary { color: var(--sb-black); }
.sb-section--cream .sb-faq details { border-top-color: rgba(0,0,0,0.12); }
.sb-section--cream .sb-faq details:last-of-type { border-bottom-color: rgba(0,0,0,0.12); }
.sb-faq summary::-webkit-details-marker { display: none; }
.sb-faq summary::after { content: '+'; font-size: 1.8rem; color: var(--sb-gold); transition: transform .3s var(--sb-ease); }
.sb-faq details[open] summary::after { content: '−'; transform: rotate(180deg); }
.sb-faq details p { margin-top: 1rem; color: rgba(255,255,255,0.7); max-width: 70ch; line-height: 1.7; }
.sb-section--cream .sb-faq details p { color: rgba(0,0,0,0.7); }

/* Subtle premium champagne-gold glow behind the subscription pricing section
   (keeps the cream base + black text readable). */
#sb-abonnementen { position: relative; isolation: isolate; }
#sb-abonnementen::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 75% at 85% 12%, rgba(201,169,97,0.16), transparent 60%),
    radial-gradient(50% 70% at 8% 92%, rgba(201,169,97,0.10), transparent 60%);
}

/* ===== Pricing tiers (abonnement) — on cream ===== */
.sb-pricing {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 1200px; margin: 0 auto;
  padding-inline: clamp(1.5rem, 6vw, 6rem);
  align-items: stretch;
}
@media (max-width: 900px) { .sb-pricing { grid-template-columns: 1fr; max-width: 480px; } }
.sb-tier {
  background: var(--sb-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--sb-radius-l);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .35s var(--sb-ease), box-shadow .35s var(--sb-ease);
}
.sb-tier:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,0.12); }
.sb-tier--featured {
  border-color: var(--sb-gold);
  box-shadow: 0 24px 48px rgba(168,139,74,0.18);
}
.sb-tier__badge {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--sb-gold) 0%, var(--sb-gold-2) 100%);
  color: var(--sb-black);
  font-family: var(--sb-font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem;
  padding: 0.45rem 0.9rem; border-radius: var(--sb-radius);
  white-space: nowrap;
}
.sb-tier__name {
  font-family: var(--sb-font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.5rem; color: var(--sb-black);
}
.sb-tier__price { display: flex; align-items: baseline; gap: 0.4rem; margin: 1rem 0 0.25rem; }
.sb-tier__amount {
  font-family: var(--sb-font-display); font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3rem); color: var(--sb-black); line-height: 1;
}
.sb-tier__per { color: rgba(0,0,0,0.55); font-size: 0.95rem; }
.sb-tier__kokers {
  color: var(--sb-gold-text-on-light); font-weight: 600;
  margin: 0 0 1.5rem; font-size: 1rem;
}
.sb-tier__list { list-style: none; padding: 0; margin: 0 0 2rem; flex: 1; }
.sb-tier__list li {
  position: relative; padding-left: 1.6rem; margin-bottom: 0.75rem;
  color: rgba(0,0,0,0.7); font-size: 0.98rem; line-height: 1.5;
}
.sb-tier__list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--sb-gold-text-on-light); font-weight: 700;
}
.sb-tier .sb-btn { width: 100%; justify-content: center; white-space: nowrap; letter-spacing: 0.1em; }
/* Non-featured tier buttons: dark (the white ghost variant would vanish on cream) */
.sb-tier .sb-btn:not(.sb-btn--gold) {
  background: var(--sb-black); color: var(--sb-white); border-color: var(--sb-black);
}
.sb-tier .sb-btn:not(.sb-btn--gold):hover {
  background: var(--sb-gold); color: var(--sb-black); border-color: var(--sb-gold);
}
/* Featured (gold) tier button: white-on-white hover would vanish on the white
   card — invert to black instead so it stays clearly visible. */
.sb-tier .sb-btn--gold:hover {
  background: var(--sb-black) !important; color: var(--sb-white) !important;
  border-color: var(--sb-black) !important;
}

/* ===== Reveal on scroll (progressive enhancement) ===== */
/* Start visible so noscript / reduced-motion users see everything */
.sb-reveal { opacity: 1; transform: none; }
/* Only when JS marks <html data-js-ready> AND motion is allowed do we hide & animate */
@media (prefers-reduced-motion: no-preference) {
  html[data-js-ready] .sb-reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--sb-ease), transform .9s var(--sb-ease); }
  html[data-js-ready] .sb-reveal.is-in { opacity: 1; transform: translateY(0); }
}

/* ===== Misc ===== */
.gold { color: var(--sb-gold); }
.outline-text {
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
}
hr.sb-rule { border: 0; border-top: 1px solid rgba(255,255,255,0.12); margin: 4rem 0; }

/* Override Blocksy color palette with Seboozoo brand.
   NB: color-4 is Blocksy's heading color — headings also get color:inherit above
   so they follow section context regardless. */
:root {
  --theme-palette-color-1: var(--sb-gold) !important;
  --theme-palette-color-2: var(--sb-gold-2) !important;
  --theme-palette-color-3: #2a2a2a !important;   /* body text on light pages */
  --theme-palette-color-4: var(--sb-black) !important;
  --theme-palette-color-5: rgba(0,0,0,0.12) !important;
  --theme-palette-color-6: var(--sb-cream) !important;
  --theme-palette-color-7: #ffffff !important;   /* default site background (light) */
  --theme-palette-color-8: var(--sb-black) !important;
}

/* =========================================================
   FULL-BLEED DESIGNED PAGES vs NORMAL CONTENT PAGES
   A page is "designed" when it contains a .sb-hero or .sb-page-hero.
   Those go edge-to-edge on a dark canvas. Everything else
   (WooCommerce shop/product/cart/checkout/account, blog) keeps
   Blocksy's normal light, readable, constrained layout.
   ========================================================= */

/* --- Designed pages: dark canvas + full-bleed --- */
body:has(.sb-hero), body:has(.sb-page-hero) { background-color: var(--sb-black) !important; }
body:has(.sb-hero) .ct-main, body:has(.sb-page-hero) .ct-main,
body:has(.sb-hero) #main, body:has(.sb-page-hero) #main,
body:has(.sb-hero) .woocommerce, body:has(.sb-page-hero) .woocommerce,
body:has(.sb-hero) .woocommerce-notices-wrapper,
body:has(.sb-page-hero) .woocommerce-notices-wrapper { background: transparent !important; }

/* The content container above the first full-bleed section was rendering as a
   light grey bar between the header and the hero (Blocksy's vertical content
   spacing + non-transparent wrapper). Kill its padding so the hero sits flush
   under the header. */
body:has(.sb-hero) [data-vertical-spacing],
body:has(.sb-page-hero) [data-vertical-spacing] {
  padding-top: 0 !important; padding-bottom: 0 !important;
}
/* Collapse the WooCommerce notices wrapper on designed pages UNLESS it holds a
   real message. On the front page Blocksy injects the transparent-header top
   offset (~144px) onto this wrapper, which pushed the hero down and left a black
   band between the header and the slider. The wrapper isn't `:empty` (it carries
   an empty `.woocommerce` div), so the old `:empty` rule never matched. */
body:has(.sb-hero) .woocommerce-notices-wrapper:not(:has(.woocommerce-message)):not(:has(.woocommerce-error)):not(:has(.woocommerce-info)),
body:has(.sb-page-hero) .woocommerce-notices-wrapper:not(:has(.woocommerce-message)):not(:has(.woocommerce-error)):not(:has(.woocommerce-info)) { display: none !important; }

body:has(.sb-hero) [class*="ct-container"],
body:has(.sb-page-hero) [class*="ct-container"] {
  max-width: none !important; padding-inline: 0 !important; width: 100% !important;
}
body:has(.sb-hero) .entry-content,
body:has(.sb-page-hero) .entry-content,
body:has(.sb-hero) .entry-content.is-layout-constrained,
body:has(.sb-page-hero) .entry-content.is-layout-constrained {
  max-width: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important;
}
body:has(.sb-hero) .entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body:has(.sb-page-hero) .entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
/* Kill the vertical block-gap WordPress inserts between top-level blocks on
   designed pages — otherwise the black body background shows as thin bars
   between the full-bleed sections (each section brings its own padding). */
body:has(.sb-hero) .entry-content > *,
body:has(.sb-page-hero) .entry-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Hide Blocksy's default page title / hero on designed pages (we render our own) */
body:has(.sb-hero) .entry-header,
body:has(.sb-page-hero) .entry-header,
body:has(.sb-page-hero) .hero-section { display: none !important; }
.entry-content > p:empty { display: none; }

/* Designed pages: the full-bleed hero must sit flush under the header.
   Blocksy adds top content-spacing via [data-vertical-spacing*=top]; kill it
   here so subpages match the homepage (no dark gap above the hero). */
body:has(.sb-hero) [data-vertical-spacing*="top"],
body:has(.sb-page-hero) [data-vertical-spacing*="top"] { padding-top: 0 !important; }

/* --- Normal content pages: light, readable, constrained (Blocksy defaults) --- */
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) {
  background-color: var(--sb-cream) !important;
  color: #1a1a1a;
}
.woocommerce-page, .woocommerce { color: #1a1a1a; }
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3,
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce div.product .product_title { color: var(--sb-black) !important; }

/* Blog/single readable container width on light pages */
:root {
  --theme-normal-container-max-width: 1290px !important;
}

/* Archive / search / blog cards: our palette maps color-8 to black, which
   Blocksy also uses for entry-card backgrounds — so cards came out black with
   near-black text. Force light cards + dark text on these light pages. */
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) .entry-card {
  background-color: #fff !important;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--sb-shadow-soft);
}
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) .entry-card .entry-title,
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) .entry-card .entry-title a {
  color: var(--sb-black) !important;
}
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) .entry-card .entry-title a:hover {
  color: var(--sb-gold-text-on-light) !important;
}
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) .entry-card .entry-excerpt,
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) .entry-card .entry-excerpt p {
  color: #444 !important;
}
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) .entry-card .entry-meta,
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) .entry-card .entry-meta a {
  color: #6a6a6a !important;
}
/* Archive / search card titles: WP global styles (theme.json) set h2 up to ~48px which
   overrides Blocksy's scoped --theme-font-size var. Enforce a readable size directly. */
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) .entry-card .entry-title,
body:not(:has(.sb-hero)):not(:has(.sb-page-hero)) .entry-card .entry-title a {
  font-size: 16px !important;
  line-height: 1.4;
}

/* =========================================================
   HEADER — strak, readable, sticky, transparent over hero
   ========================================================= */

/* Announcement bar */
.sb-announce {
  background: #ffffff;
  color: var(--sb-ink);
  text-align: center;
  font-family: var(--sb-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
/* gold fails contrast on white — use the AA-safe dark gold */
.sb-announce strong { color: var(--sb-gold-text-on-light); font-weight: 700; }

/* Blocksy header: force dark surface + readable WHITE nav */
#header.ct-header,
.ct-header [data-row*="middle"] {
  background-color: var(--sb-black) !important;
  background-image: none !important;
}
.ct-header [data-row*="middle"] { --height: 104px !important; }
.ct-header [data-device] [data-column="end"] [data-items] { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); }

/* Header spans full width with the same 6rem gutters on EVERY page (homepage,
   shop, cart, account, …) so the logo and nav line up identically site-wide.
   Previously only "designed" pages got this, leaving the shop header narrower. */
#header .ct-container,
#header > div > [data-row] > .ct-container {
  padding-inline: clamp(1.5rem, 6vw, 6rem) !important;
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
}

/* Menu links — white, uppercase, gold hover, underline animation */
.ct-header [data-id="menu"] > ul > li > a,
.ct-header [data-id="menu"] .ct-menu-link {
  color: #ffffff !important;
  font-family: var(--sb-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  position: relative;
}
.ct-header [data-id="menu"] > ul > li > a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 2px; background: var(--sb-gold);
  transition: right .3s var(--sb-ease);
}
.ct-header [data-id="menu"] > ul > li > a:hover { color: var(--sb-gold) !important; }
.ct-header [data-id="menu"] > ul > li > a:hover::after { right: 0; }
.ct-header [data-id="menu"] > ul > li.current-menu-item > a { color: var(--sb-gold) !important; }

/* Sub-menu (dropdown) */
.ct-header [data-id="menu"] .sub-menu {
  background: var(--sb-ink) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.ct-header [data-id="menu"] .sub-menu .ct-menu-link { color: rgba(255,255,255,0.85) !important; }

/* Header icons (search / account / cart) — white */
.ct-header [data-id="cart"] .ct-icon-container,
.ct-header [data-id="account"],
.ct-header [data-id="search"],
.ct-header .ct-toggle-close,
.ct-header [data-id="cart"],
.ct-header svg { color: #ffffff !important; fill: currentColor !important; }
.ct-header [data-id="cart"]:hover,
.ct-header [data-id="account"]:hover,
.ct-header [data-id="search"]:hover { color: var(--sb-gold) !important; }
.ct-header .ct-cart-count,
.ct-header [data-id="cart"] .ct-dynamic-count-wrapper {
  background: var(--sb-gold) !important; color: var(--sb-black) !important;
}

/* Logo sizing + hide redundant text site-title (logo already shows wordmark) */
.ct-header [data-id="logo"] img,
.ct-header [data-id="logo"] .ct-image-default { max-height: 76px !important; width: auto !important; }
@media (max-width: 999.98px) {
  .ct-header [data-id="logo"] img,
  .ct-header [data-id="logo"] .ct-image-default { max-height: 52px !important; }
}
.ct-header [data-id="logo"] .site-title,
.ct-header [data-id="logo"] .site-description { display: none !important; }

/* Injected cart + account actions */
.sb-header-actions { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.sb-header-actions .sb-h-link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; line-height: 0;
  transition: color .25s var(--sb-ease);
}
.sb-header-actions .sb-h-link:hover { color: var(--sb-gold); }
.sb-header-actions .sb-cart-count {
  position: absolute; top: -8px; right: -10px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--sb-gold); color: var(--sb-black);
  font-family: var(--sb-font-body); font-weight: 700; font-size: 11px;
  border-radius: 999px; line-height: 1;
}
.sb-header-actions .sb-cart-count[data-count="0"] { display: none; }

/* Header action icons — three distinct circular buttons, evenly spaced.
   Search is moved into .sb-header-actions by main.js so all three share one
   flex row (equal gaps). Styles: search = white, account = gold,
   cart = black with white border. */
.sb-header-actions { display: flex; align-items: center; gap: 0.65rem; }
.sb-header-actions .sb-h-link,
.sb-header-actions button[data-id="search"] {
  width: 44px !important; height: 44px !important;
  min-width: 44px !important; padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: background-color .25s var(--sb-ease), color .25s var(--sb-ease),
              transform .25s var(--sb-ease), box-shadow .25s var(--sb-ease);
}
.sb-header-actions .sb-h-link:hover,
.sb-header-actions button[data-id="search"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
/* hide the redundant "Zoeken" text label inside the circular search toggle */
.sb-header-actions button[data-id="search"] .ct-label { display: none !important; }
/* search glyph is filled, account/cart glyphs are stroked */
.sb-header-actions button[data-id="search"] svg,
.sb-header-actions button[data-id="search"] .ct-icon { fill: currentColor !important; }
.sb-header-actions .sb-h-link svg { fill: none !important; }

/* 1) Search — WHITE circle, gold glyph */
.sb-header-actions button[data-id="search"] { background: #ffffff !important; }
.sb-header-actions button[data-id="search"] svg,
.sb-header-actions button[data-id="search"] .ct-icon { color: var(--sb-gold) !important; }

/* 2) Account — GOLD circle, black glyph */
.sb-header-actions .sb-h-link:not(.sb-h-cart) { background: var(--sb-gold) !important; }
.sb-header-actions .sb-h-link:not(.sb-h-cart) svg { color: var(--sb-black) !important; }

/* 3) Cart — BLACK circle, white border, white glyph */
.sb-header-actions .sb-h-cart { background: var(--sb-black) !important; border-color: #ffffff !important; }
.sb-header-actions .sb-h-cart svg { color: #ffffff !important; }

/* badge sits on the circle's edge */
.sb-header-actions .sb-cart-count { top: -3px; right: -3px; }

/* Mobile hamburger trigger — white */
.ct-header [data-id="trigger"] .ct-toggle,
.ct-header [data-id="trigger"] svg { color: #ffffff !important; }

/* Transparent header over hero on the HOME front page, solidify on scroll */
.home #header.ct-header {
  position: absolute; top: var(--sb-announce-h, 0); left: 0; right: 0; z-index: 50;
}
.home #header.ct-header [data-row*="middle"] { background-color: transparent !important; }
.home #header.ct-header.is-scrolled {
  position: fixed; top: 0;
  animation: sb-slidedown .4s var(--sb-ease);
}
.home #header.ct-header.is-scrolled [data-row*="middle"] {
  background-color: rgba(10,10,10,0.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@keyframes sb-slidedown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* On inner pages keep header sticky + solid */
body:not(.home) #header.ct-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Search & offcanvas panels already dark in Blocksy config — ensure text white */
#search-modal, #offcanvas { color: #fff; }
#offcanvas .ct-menu-link, #offcanvas a { color: #fff !important; }
/* "Toon meer" live-search button renders dim by default — make it a clear gold action */
.ct-search-more, .ct-search-more * {
  color: var(--sb-gold) !important;
  opacity: 1 !important;
}
.ct-search-more {
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  justify-content: center;
  padding: 14px 0 4px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ct-search-more:hover, .ct-search-more:hover * { color: #fff !important; }

/* =========================================================
   FOOTER — custom, rendered via Blocksy copyright row
   ========================================================= */
.ct-footer, .ct-footer [data-row] {
  background-color: var(--sb-black) !important;
  color: rgba(255,255,255,0.7) !important;
}
.ct-footer [data-row="bottom"] { padding: 0 !important; }
.ct-footer [data-column="copyright"] { width: 100% !important; text-align: left !important; }
.ct-footer .ct-container { max-width: none !important; padding: 0 !important; width: 100% !important; margin-inline: 0 !important; }
.ct-footer-copyright { width: 100%; }

.sb-footer { width: 100%; color: rgba(255,255,255,0.72); }
.sb-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
  /* Full width with the same 6rem gutters as the header — no max-width cap, so
     the footer edges line up with the header logo/nav on every screen size. */
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 6rem) clamp(2.5rem, 4vw, 3.5rem);
}
@media (max-width: 900px) { .sb-footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 560px) { .sb-footer__top { grid-template-columns: 1fr; } }

.sb-footer__brand img { width: 120px; height: auto; margin-bottom: 1.25rem; }
.sb-footer__brand p { font-size: 0.95rem; line-height: 1.7; max-width: 38ch; color: rgba(255,255,255,0.62); margin: 0 0 1.5rem; }
.sb-footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sb-footer__pay img {
  display: block; height: 20px; width: auto;
  background: #fff; border-radius: 4px;
  padding: 5px 7px; box-sizing: content-box;
}
.sb-footer__ship {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.9rem 0 0; font-size: 0.78rem; line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}
.sb-footer__ship-logo {
  display: block; height: 14px; width: auto;
  border-radius: 2px; flex: 0 0 auto;
}
.sb-footer__tp { margin-top: 0.9rem; }
.sb-footer__tp-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.9rem; font-size: 0.78rem; line-height: 1.3;
  color: rgba(255, 255, 255, 0.72); text-decoration: none;
}
.sb-footer__tp-cta:hover { color: #fff; }
.sb-footer__tp-cta .sb-stars { font-size: 0.85rem; }

/* ---- Reviews (Trustpilot) ---- */
.sb-reviews { padding: clamp(2.5rem, 5vw, 5rem) 0; text-align: center; background: var(--sb-black); color: var(--sb-white); }
.sb-reviews__head { max-width: 720px; margin: 0 auto 2.5rem; }
.sb-reviews__head h2 { text-wrap: balance; }
.sb-reviews__box { display: flex; justify-content: center; }
.sb-reviews__cta {
  max-width: 560px; margin: 0 auto; padding: 2.5rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--sb-radius-l);
  background: rgba(255, 255, 255, 0.03);
}
.sb-reviews__lead {
  margin: 0.75rem 0 1.75rem; color: rgba(255, 255, 255, 0.74);
  text-wrap: pretty;
}
.sb-stars {
  color: var(--sb-gold); letter-spacing: 0.15em; font-size: 1.4rem;
  line-height: 1;
}
.sb-footer__col h3,
.sb-footer__col h4 {
  font-family: var(--sb-font-body); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sb-gold);
  margin: 0 0 1.25rem;
  line-height: 1;
}
.sb-footer__col a {
  display: block; color: rgba(255,255,255,0.7) !important;
  font-size: 0.95rem; padding: 0.4rem 0; transition: color .25s var(--sb-ease);
}
.sb-footer__col a:hover { color: var(--sb-gold) !important; }
.sb-footer__cta p { font-size: 0.95rem; line-height: 1.7; color: rgba(255,255,255,0.62); margin: 0 0 1.25rem; max-width: 32ch; }
.sb-footer__cta .sb-btn { padding: 0.9rem 1.5rem; font-size: 0.85rem; }

.sb-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding: 1.5rem clamp(1.5rem, 6vw, 6rem);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.82rem; color: rgba(255,255,255,0.62);
}
.sb-footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.sb-footer__legal a { color: rgba(255,255,255,0.62) !important; }
.sb-footer__legal a:hover { color: var(--sb-gold) !important; }

/* =========================================================
   POLISH — premium micro-detailing (additive, non-structural)
   ========================================================= */

/* Refined announcement bar — slight horizontal gradient + tighter typography */
.sb-announce {
  background: #ffffff;
  color: var(--sb-ink);
  letter-spacing: normal;
  font-size: 0.98rem;
  font-weight: 400;
  text-transform: none;
}

/* (Removed: gold accent line that slid across spec cards on hover — design feedback.) */
.sb-specs__num { position: relative; }

/* position:relative kept for the absolutely-positioned SALE badge.
   (Removed: gold accent line that slid across product cards on hover — design feedback.) */
.home ul.products li.product,
body.woocommerce-shop ul.products li.product,
body.post-type-archive-product ul.products li.product { position: relative; }

/* Buttons — subtle diagonal shine sweep on hover (uses mix-blend so it tints
   instead of covering the label/arrow) */
.sb-btn { position: relative; isolation: isolate; }
.sb-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
  mix-blend-mode: overlay;
  transition: transform .9s var(--sb-ease);
  z-index: 0;
}
.sb-btn:hover::before { transform: translateX(110%); }

/* Marquee — soft edge fade so the track dissolves into the section instead of
   hard-clipping at the viewport edges */
.sb-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* Sale badge polish — slight gold gradient + uppercase mono spacing */
.woocommerce span.onsale,
.home ul.products li.product .onsale {
  background: linear-gradient(135deg, var(--sb-gold) 0%, var(--sb-gold-2) 100%) !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(168,139,74,0.25);
}

/* H1/H2 — slightly stronger weight contrast for the new body grotesque */
h1, h2 { font-weight: 900; }

/* Body text on dark sections — bring the body font to life with proper weight */
.sb-section p, .sb-stage__copy p, .sb-immerse p, .sb-split__body p, .sb-quote cite {
  font-weight: 400;
}

/* ===== Reduced motion — disable all decorative loops ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sb-hero__bg,
  .sb-stage__media img,
  .sb-stage__media::after,
  .sb-marquee__track,
  .sb-hero__scroll::after { animation: none !important; transform: none !important; }
  .sb-reveal { opacity: 1 !important; transform: none !important; }
}

/* ===== Body-prose links: keep them distinguishable beyond colour =====
   WCAG 1.4.1 (Use of Color) — links inside paragraphs must be identifiable
   without relying on hue. Restore an underline in long-form prose contexts. */
.sb-narrow p a,
.sb-narrow li a,
.entry-content p a,
.entry-content li a,
.sb-split__body p a,
.sb-section p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}
.sb-narrow p a:hover,
.sb-narrow li a:hover,
.entry-content p a:hover,
.entry-content li a:hover,
.sb-split__body p a:hover,
.sb-section p a:hover { text-decoration-thickness: 2px; }
/* Exempt button-like CTAs that happen to sit inside a paragraph */
.sb-narrow p a.sb-btn,
.entry-content p a.sb-btn,
.sb-section p a.sb-btn { text-decoration: none; }

/* ===== Screen-reader-only utility (visually hidden, exposed to AT) ===== */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ===== Skip link (Blocksy ships one; restyle to be visible on focus) ===== */
.skip-link, .ct-skip-link, a[href^="#main"]:focus,
a[href^="#content"]:focus {
  position: fixed; top: 1rem; left: 1rem; z-index: 9999;
  background: var(--sb-black); color: var(--sb-white);
  padding: .75rem 1rem; border: 2px solid var(--sb-focus);
  font-family: var(--sb-font-body); letter-spacing: 0.12em;
  text-transform: uppercase; font-size: .85rem;
}