/*
Theme Name:   SBC (Hello Elementor Child)
Theme URI:    https://supremebaitcollective.be
Description:  Child theme for Supreme Bait Collective. All custom CSS lives here.
              Custom PHP for commerce logic lives in the sbc-core plugin, NOT here.
Author:       Supreme Bait Collective
Template:     hello-elementor
Version:      1.6.71
Text Domain:  sbc
*/

/* ===========================================================================
   Design system — "the SBC pack, opened to light"
   ===========================================================================
   Direction agreed 2026-09-02 from the packaging + the Baitworks reference:
   warm paper ground, charcoal as an accent, one muted olive, hairline rules,
   0 radius, Saira Condensed display / Inter body / IBM Plex Mono for data.
   Fonts are self-hosted in /fonts (see fonts.css) — no Google Fonts CDN (C6).
   Elementor Global Fonts + Colours are set to mirror these tokens.
   ------------------------------------------------------------------------- */

:root {
  /* Neutrals + accent (light) */
  --sbc-paper:      #F4F2EC;
  --sbc-paper-2:    #ECE9DF;
  --sbc-ink:        #262523;
  --sbc-ink-soft:   #4C4A44;
  --sbc-stone:      #86847A;
  --sbc-line:       #D9D5C9;
  --sbc-line-soft:  #EAE6DB;   /* dividers inside a white card */
  --sbc-olive:      #586451;
  --sbc-olive-ink:  #3F4838;
  --sbc-olive-tint: #E6ECDD;   /* olive ~14% over white — active states */

  /* Bright layer that sits ON the paper ground: cards, panels, gallery. */
  --sbc-card:       #FFFFFF;
  --sbc-card-warm:  #FBFAF5;   /* a half-step warm — quiet reading zones */

  /* Charcoal brand sections — fixed in light and dark */
  --sbc-dark-bg:    #262523;
  --sbc-dark-fg:    #EFEDE3;
  --sbc-dark-soft:  #B7B4A8;
  --sbc-dark-line:  #454339;
  --sbc-dark-olive: #98A383;

  /* Type */
  --sbc-font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --sbc-font-body:    "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sbc-font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sbc-font-base:    var(--sbc-font-body);      /* back-compat alias */
  --sbc-font-heading: var(--sbc-font-display);

  --sbc-fs-eyebrow: 0.72rem;
  --sbc-fs-small:   0.82rem;
  --sbc-fs-body:    1rem;
  --sbc-fs-h3:      1.15rem;
  --sbc-fs-h2:      clamp(1.7rem, 3.6vw, 2.5rem);
  --sbc-fs-h1:      clamp(2.4rem, 5.5vw, 4.2rem);
  --sbc-tracking-label: 0.15em;

  /* Spacing */
  --sbc-space-xs: 0.5rem;
  --sbc-space-sm: 1rem;
  --sbc-space-md: 2rem;
  --sbc-space-lg: 4rem;
  --sbc-space-xl: 8rem;

  --sbc-radius: 0;
  --sbc-hair: 1px solid var(--sbc-line);
  --sbc-measure: 64ch;

  /* Retint WooCommerce's own button / accent variables so its classic and
     block buttons follow the palette without a specificity fight. */
  --wc-primary: #586451;
  --wc-primary-text: #F4F2EC;
  --wc-secondary: #ECE9DF;
  --wc-secondary-text: #262523;
  --wc-highlight: #586451;
  --wc-content-text: #4C4A44;
  --woocommerce: #586451;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wc-primary: #98A383;
    --wc-primary-text: #1F1E1C;
  }
}
:root[data-theme="dark"] { --wc-primary: #98A383; --wc-primary-text: #1F1E1C; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sbc-paper:     #1F1E1C;
    --sbc-paper-2:   #292824;
    --sbc-ink:       #EEECE3;
    --sbc-ink-soft:  #C9C6BA;
    --sbc-stone:     #928F83;
    --sbc-line:      #39382F;
    --sbc-line-soft: #312E26;
    --sbc-olive:     #98A383;
    --sbc-olive-ink: #B6C09E;
    --sbc-olive-tint:#2C3126;
    --sbc-card:      #26251F;
    --sbc-card-warm: #232220;
  }
}
:root[data-theme="dark"] {
  --sbc-paper:     #1F1E1C;
  --sbc-paper-2:   #292824;
  --sbc-ink:       #EEECE3;
  --sbc-ink-soft:  #C9C6BA;
  --sbc-stone:     #928F83;
  --sbc-line:      #39382F;
  --sbc-line-soft: #312E26;
  --sbc-olive:     #98A383;
  --sbc-olive-ink: #B6C09E;
  --sbc-olive-tint:#2C3126;
  --sbc-card:      #26251F;
  --sbc-card-warm: #232220;
}

/* ===========================================================================
   Base
   ------------------------------------------------------------------------- */

body {
  font-family: var(--sbc-font-body);
  color: var(--sbc-ink-soft);
  background: var(--sbc-paper);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sbc-font-display);
  color: var(--sbc-ink);
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.0;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--sbc-fs-h1); font-weight: 700; }
h2 { font-size: var(--sbc-fs-h2); }
h3 { font-size: var(--sbc-fs-h3); letter-spacing: 0.04em; }

/* Form controls do not inherit font-family on their own. */
button, input, optgroup, select, textarea { font-family: inherit; }

img { max-width: 100%; height: auto; }

/* Visible keyboard focus. Never remove without an equivalent replacement. */
:focus-visible {
  outline: 2px solid var(--sbc-olive);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   Components — apply these classes to Elementor widgets / WooCommerce markup
   ------------------------------------------------------------------------- */

.sbc-eyebrow {
  font-family: var(--sbc-font-mono);
  font-size: var(--sbc-fs-eyebrow);
  letter-spacing: var(--sbc-tracking-label);
  text-transform: uppercase;
  color: var(--sbc-stone);
}

.sbc-mono { font-family: var(--sbc-font-mono); font-variant-numeric: tabular-nums; }

.sbc-rule { border: 0; border-top: var(--sbc-hair); margin: 0; }

.sbc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--sbc-font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--sbc-ink);
  color: var(--sbc-ink);
  background: transparent;
  border-radius: var(--sbc-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.sbc-btn:hover { background: var(--sbc-ink); color: var(--sbc-paper); }
.sbc-btn--fill {
  background: var(--sbc-olive);
  border-color: var(--sbc-olive);
  color: #F4F2EC;
}
.sbc-btn--fill:hover { background: var(--sbc-olive-ink); border-color: var(--sbc-olive-ink); color: #F4F2EC; }
.sbc-btn--ghost:hover { background: var(--sbc-paper-2); color: var(--sbc-ink); }

.sbc-card { display: flex; flex-direction: column; gap: 11px; text-decoration: none; }
.sbc-card__media { aspect-ratio: 1 / 1; border: var(--sbc-hair); background: #fff; }
.sbc-card__cat {
  font-family: var(--sbc-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sbc-stone);
}
.sbc-card__title {
  font-family: var(--sbc-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sbc-ink);
  font-size: 1rem;
}
.sbc-card__price { font-family: var(--sbc-font-mono); font-size: 0.82rem; color: var(--sbc-ink); }

.sbc-ladder { border: var(--sbc-hair); font-family: var(--sbc-font-mono); font-size: 0.76rem; }
.sbc-ladder__row {
  display: flex;
  justify-content: space-between;
  padding: 9px 13px;
  border-bottom: var(--sbc-hair);
}
.sbc-ladder__row:last-child { border-bottom: 0; }
.sbc-ladder__row--active { background: var(--sbc-paper-2); }
.sbc-ladder__row--active :last-child { color: var(--sbc-olive-ink); }
.sbc-ladder__row :first-child { color: var(--sbc-stone); letter-spacing: 0.06em; text-transform: uppercase; }
.sbc-ladder__row :last-child { color: var(--sbc-ink); }

.sbc-spec { border: var(--sbc-hair); }
.sbc-spec__head {
  display: flex;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: var(--sbc-hair);
  font-family: var(--sbc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sbc-stone);
}
.sbc-spec__body { padding: 14px; font-size: 0.82rem; line-height: 1.55; }
.sbc-analyt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--sbc-line);
  border: var(--sbc-hair);
  margin-top: 12px;
}
.sbc-analyt > div { background: var(--sbc-paper); padding: 9px 11px; font-family: var(--sbc-font-mono); font-size: 0.72rem; }
.sbc-analyt > div > span {
  display: block;
  color: var(--sbc-stone);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* Charcoal section helper */
.sbc-dark {
  background: var(--sbc-dark-bg);
  color: var(--sbc-dark-soft);
}
.sbc-dark h1, .sbc-dark h2, .sbc-dark h3 { color: var(--sbc-dark-fg); }
.sbc-dark .sbc-eyebrow { color: var(--sbc-dark-soft); }
.sbc-dark .sbc-rule { border-top-color: var(--sbc-dark-line); }

/* ===========================================================================
   WooCommerce — universal, safe overrides only (no layout — that is Elementor)
   ------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
  border-radius: var(--sbc-radius);
  font-family: var(--sbc-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 26px;
}

/* Primary action = filled olive; secondary = ink outline.
   `!important` here defends against woocommerce.css + wc-blocks.css, which set a
   literal purple with the same specificity and load after this file. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.wc-block-components-button:not(.is-link) {
  background: var(--sbc-olive) !important;
  border: 1px solid var(--sbc-olive) !important;
  color: #F4F2EC !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.wc-block-components-button:not(.is-link):hover {
  background: var(--sbc-olive-ink) !important;
  border-color: var(--sbc-olive-ink) !important;
}
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt) {
  background: transparent;
  border: 1px solid var(--sbc-ink);
  color: var(--sbc-ink);
}
.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover {
  background: var(--sbc-ink);
  color: var(--sbc-paper);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--sbc-font-mono);
  color: var(--sbc-ink);
}

.woocommerce .woocommerce-price-suffix { color: var(--sbc-stone); }

/* Product / loop titles pick up the display face. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sbc-ink);
}

/* ===========================================================================
   WooCommerce layout — classic templates, until Elementor Theme Builder (P4).
   A grid for the single product, contained gallery, full-width sections; a
   tidy shop grid. Structural only — no decoration beyond the tokens.
   ------------------------------------------------------------------------- */

.sbc-wc-main {
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 56px) clamp(18px, 5vw, 44px) clamp(48px, 8vw, 96px);
}

/* --- single product --- */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 1fr;
  column-gap: clamp(32px, 5vw, 64px);
  row-gap: 0;
  /* the gallery card and the buy-box card are one height */
  align-items: stretch;
}
/* WooCommerce sizes the gallery with `width: 41.176%; float:left` from three
   different stylesheets (woocommerce.css, wc-blocks.css loading last). Inside
   our grid that makes the gallery a ~240px sliver. Scoped !important on the
   structural props only — decoration still comes from the tokens. Phase 4
   replaces this whole template in Elementor. */
.woocommerce div.product .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  /* bright zone 1 — gallery lifts off the paper on a white card, and fills
     the row so the photo floats centred against the taller buy box */
  background: var(--sbc-card);
  border: 1px solid var(--sbc-line);
  padding: clamp(16px, 3vw, 32px);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
  width: 100%;
  max-width: 440px;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image { width: 100%; }
.woocommerce div.product .woocommerce-product-gallery img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 820px) {
  .woocommerce div.product .woocommerce-product-gallery { align-self: auto; }
}
/* bright zone 2 — the buy box as a raised white card */
.woocommerce div.product .summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  background: var(--sbc-card);
  border: 1px solid var(--sbc-line);
  padding: clamp(20px, 3vw, 32px);
}
.woocommerce div.product .summary .product_title {
  padding-bottom: 0;
  margin-bottom: 2px;
}
.woocommerce div.product .summary .product_title::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--sbc-olive);
  margin-top: 14px;
}
.woocommerce div.product .summary .price .woocommerce-price-suffix { color: var(--sbc-olive-ink); }
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .upsells,
.woocommerce div.product > .related,
.woocommerce div.product > #reviews,
.woocommerce div.product .sbc-crosssell {
  grid-column: 1 / -1;
  margin-top: clamp(40px, 6vw, 72px);
}
.woocommerce div.product .sbc-crosssell {
  border-top: var(--sbc-hair);
  padding-top: clamp(32px, 5vw, 56px);
}
.woocommerce span.onsale {
  position: absolute;
  background: var(--sbc-ink);
  color: var(--sbc-paper);
  border-radius: 0;
  font-family: var(--sbc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  min-height: 0;
  min-width: 0;
  padding: 5px 10px;
  line-height: 1;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.5rem;
  margin: 0.2rem 0 0;
}
.woocommerce div.product form.cart { margin: 1.4rem 0 0; }

/* --- Diameter selector ---------------------------------------------------
   WooCommerce renders the variation attribute as a 2-column <table> (label
   cell | value cell). Break it to a block stack so the label sits ABOVE the
   segmented buttons, mono and quiet — as in the mockup. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  display: block;
  width: 100%;
  padding: 0;
  background: none;   /* kill WooCommerce's grey rgba fill on the value cell */
  text-align: left;
}
.woocommerce div.product form.cart .variations { margin: 0 0 1.1rem; }
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.label { padding: 0 0 8px; }
.woocommerce div.product form.cart .variations th.label label,
.woocommerce div.product form.cart .variations td.label label {
  display: block;
  margin: 0;
  font-family: var(--sbc-font-mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sbc-stone);
}
.woocommerce div.product form.cart .variations td.value { line-height: 0; }
.woocommerce div.product form.cart .variations td.value .sbc-seg { line-height: normal; }
.woocommerce div.product form.cart .variations td.value select { display: none !important; }
/* "clear" link is redundant next to the segmented buttons — pick another size */
.woocommerce div.product form.cart .reset_variations { display: none !important; }

.woocommerce .quantity .qty {
  border: var(--sbc-hair);
  border-radius: 0;
  height: 46px;
  padding: 0 8px;
  font-family: var(--sbc-font-mono);
  background: var(--sbc-card);
  color: var(--sbc-ink);
}
/* Quantity + add-to-cart: one full-width row so its right edge lines up
   exactly with the segmented-button block above. qty stays compact, the
   button takes the rest. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart.cart:not(.variations_form) {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity,
.woocommerce div.product form.cart .quantity { flex: 0 0 auto; margin: 0; }
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.woocommerce div.product .woocommerce-product-details__short-description { margin-top: 1rem; }
/* SKU + Category now live in the "Additional information" tab (sbc-core
   1.6.4), so the buy box ends at the pack line — a shorter column. */
.woocommerce div.product .summary .product_meta { display: none; }

/* tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 1.4rem;
  border-bottom: var(--sbc-hair);
  display: flex;
  gap: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--sbc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sbc-stone);
  padding: 12px 18px;
  display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--sbc-olive);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sbc-ink); }
/* the description is a soft warm panel that spans the full product width
   (gallery + summary); the prose reads to a measure, the feed-label and
   analytical tables are full-width white cards stacked below it — as in the
   "SBC Product Page" mockup. */
.woocommerce div.product .woocommerce-tabs .panel {
  max-width: none;
  background: var(--sbc-card-warm);
  border: 1px solid var(--sbc-line-soft);
  padding: clamp(24px, 3.5vw, 44px);
}
.woocommerce div.product .woocommerce-tabs .panel > p,
.woocommerce div.product .woocommerce-tabs .panel > .sbc-lead { max-width: var(--sbc-measure); }
/* WooCommerce repeats the tab name ("Beschrijving") as an <h2> inside the
   panel — redundant with the tab. Replace it with a quiet eyebrow. */
.woocommerce div.product .woocommerce-tabs .panel > h2 { display: none; }
#tab-description::before {
  content: "About this bait";
  display: block;
  font-family: var(--sbc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sbc-stone);
  margin-bottom: 1.1rem;
}
/* first spec card sits clearly apart from the prose */
.woocommerce div.product .woocommerce-tabs .panel > .sbc-spec { margin-top: clamp(32px, 4.5vw, 48px); }
/* opening positioning line of a product description */
.woocommerce div.product .woocommerce-tabs .panel .sbc-lead {
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--sbc-ink);
  margin: 0 0 1.1rem;
}

/* Spec tables inside the product description — the feed label as a two-column
   declaration, the analytical constituents as a compact mono band. Markup is a
   plain <table class="sbc-spec"> / <table class="sbc-analysis"> in the product
   content, so it carries into an Elementor template unchanged. */
.woocommerce div.product .sbc-spec,
.woocommerce div.product .sbc-analysis {
  width: 100%;
  margin: 1.7rem 0;
  border-collapse: collapse;
  font-family: var(--sbc-font-body);
  /* each table is its own full-width white card inside the warm zone */
  background: var(--sbc-card);
  border: 1px solid var(--sbc-line);
  padding: clamp(20px, 3vw, 32px);
  max-width: none;
}
.woocommerce div.product .sbc-spec caption,
.woocommerce div.product .sbc-analysis caption {
  caption-side: top;
  text-align: left;
  font-family: var(--sbc-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sbc-stone);
  padding: 0 0 0.75rem;
}
.woocommerce div.product .sbc-spec th,
.woocommerce div.product .sbc-spec td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--sbc-line-soft);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--sbc-ink-soft);
  background: none;
}
.woocommerce div.product .sbc-spec tr:last-child th,
.woocommerce div.product .sbc-spec tr:last-child td { border-bottom: 0; }
.woocommerce div.product .sbc-spec th {
  width: 180px;
  padding-right: 1.4rem;
  font-family: var(--sbc-font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sbc-stone);
}
/* analytical constituents: a wrap-around grid of label-over-value cells */
.woocommerce div.product .sbc-analysis tbody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  background: var(--sbc-line);
  border: 1px solid var(--sbc-line);
}
.woocommerce div.product .sbc-analysis tr {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  background: var(--sbc-card);
}
.woocommerce div.product .sbc-analysis th,
.woocommerce div.product .sbc-analysis td {
  border: 0;
  padding: 0;
  text-align: left;
  background: none;
}
.woocommerce div.product .sbc-analysis th {
  font-family: var(--sbc-font-mono);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sbc-stone);
}
.woocommerce div.product .sbc-analysis td {
  font-family: var(--sbc-font-mono);
  font-size: 0.95rem;
  color: var(--sbc-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .woocommerce div.product { grid-template-columns: 1fr; row-gap: 28px; }
  .woocommerce div.product > .woocommerce-tabs,
  .woocommerce div.product .sbc-crosssell { margin-top: 32px; }
}

/* --- shop / archive --- */
.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title,
.woocommerce h1.page-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 1.4rem;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-family: var(--sbc-font-mono);
  font-size: 0.75rem;
  color: var(--sbc-stone);
}
.woocommerce .woocommerce-ordering select {
  border: var(--sbc-hair);
  border-radius: 0;
  padding: 8px 10px;
  color: var(--sbc-ink);
}
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 34px);
  margin: 1.6rem 0 2.4rem;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  width: auto;
  margin: 0;
  float: none;
  text-align: left;
  /* each loop card is a white object on the paper grid */
  background: var(--sbc-card);
  border: 1px solid var(--sbc-line);
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product a img {
  /* WooCommerce already crops catalog thumbnails to a square — display that
     square and let it fill the media zone (cover). Upload product photos
     square (>=1200px) with the subject centred on a clean light background. */
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  margin: 0 0 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--sbc-line);
  background: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.9rem;
  padding: 0;
  margin: 0.15rem clamp(12px, 1.6vw, 16px);
}
.woocommerce ul.products li.product .price {
  font-family: var(--sbc-font-mono);
  font-size: 0.78rem;
  color: var(--sbc-ink);
  margin: 0.2rem clamp(12px, 1.6vw, 16px) 0;
}
.woocommerce ul.products li.product .price del { color: var(--sbc-stone); }
.woocommerce ul.products li.product .button {
  margin: 0.6rem clamp(12px, 1.6vw, 16px) clamp(12px, 1.6vw, 16px);
  font-size: 0.62rem;
  padding: 8px 13px;
  align-self: flex-start;
}
.woocommerce nav.woocommerce-pagination ul {
  border: var(--sbc-hair);
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--sbc-font-mono);
  border-radius: 0;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--sbc-ink);
  color: var(--sbc-paper);
}
@media (max-width: 780px) { .woocommerce ul.products { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* ===========================================================================
   Storefront finish — overrides on the sbc-core .sbc-* structural CSS, to
   introduce the "lighter card zones" (mockup: SBC Product Page). style.css
   loads after sbc-storefront.css, so equal-specificity rules win here.
   ------------------------------------------------------------------------- */

/* tier ladder sits on white inside the buy box; the active tier is a warm
   olive tint with an olive edge — not the old flat grey fill. */
.sbc-ladder { background: var(--sbc-card); border-color: var(--sbc-line); }
.sbc-ladder__row { border-bottom-color: var(--sbc-line-soft); }
.sbc-ladder__row--active {
  background: var(--sbc-olive-tint);
  border-left: 2px solid var(--sbc-olive);
}
.sbc-ladder__row--active > span:first-child { color: var(--sbc-olive-ink); }

/* diameter buttons: white controls, full card width (drops the 22rem cap in
   sbc-storefront.css) so the block aligns with the add-to-cart row below */
.sbc-seg {
  background: var(--sbc-card);
  border-color: var(--sbc-line);
  max-width: none;
  width: 100%;
}
.sbc-seg button { border-right-color: var(--sbc-line); }
.sbc-packline { border-top-color: var(--sbc-line-soft); }

/* cross-sell items become white cards, matching the shop loop */
.sbc-crosssell .sbc-card {
  background: var(--sbc-card);
  border: 1px solid var(--sbc-line);
  gap: 0;
  padding-bottom: 12px;
}
.sbc-crosssell .sbc-card__media {
  border: 0;
  border-bottom: 1px solid var(--sbc-line);
  margin-bottom: 10px;
}
.sbc-crosssell .sbc-card__cat,
.sbc-crosssell .sbc-card__title,
.sbc-crosssell .sbc-card__price { margin-inline: clamp(12px, 2vw, 14px); }
.sbc-crosssell .sbc-card__title { margin-top: 3px; }
.sbc-crosssell .sbc-card__price { margin-top: 5px; }

/* family nav tiles: white, not paper-on-paper */
.sbc-family { background: var(--sbc-card); }
.sbc-family:hover { background: var(--sbc-card-warm); }
.sbc-familynav { background: var(--sbc-line); border-color: var(--sbc-line); }

/* ---------------------------------------------------------------------------
   Cart — volume-pricing (Staffelkorting) feedback from sbc-core
   ------------------------------------------------------------------------- */
.woocommerce .sbc-advised {
  color: var(--sbc-stone);
  font-weight: 400;
  margin-right: 6px;
}
.woocommerce .sbc-tier-note {
  margin-top: 4px;
}
.woocommerce .sbc-tier-note small {
  font-family: var(--sbc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--sbc-olive-ink);
}
/* the totals row is a "you saved" note, not a charge — olive, no bold */
.woocommerce .cart_totals tr.sbc-tier-saving th,
.woocommerce .cart_totals tr.sbc-tier-saving td {
  color: var(--sbc-olive-ink);
  font-weight: 400;
  border-top: 1px dashed var(--sbc-line);
}
.woocommerce .cart_totals tr.sbc-tier-saving th {
  font-family: var(--sbc-font-mono);
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ===========================================================================
   Elementor Theme Builder — HEADER (#elementor-336) layout finish
   The template (eb-header.php) lays out structure + widgets; the horizontal
   split and rhythm are done here, same pattern as the WooCommerce styling.
   ------------------------------------------------------------------------- */
[data-elementor-type="header"] .elementor-section .elementor-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  /* mirror .sbc-wc-main exactly: same max-width, same padding, and width:100%
     so a scrollbar shrinks the header the same way it shrinks the page body —
     keeps the logo edge dead in line with the content edge */
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 44px);
}
[data-elementor-type="header"] .elementor-col-50:first-child { flex: 0 0 auto; width: auto; }
[data-elementor-type="header"] .elementor-col-50:last-child {
  flex: 1 1 auto;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 3vw, 32px);
}
[data-elementor-type="header"] .elementor-col-50:last-child > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 3vw, 32px);
  width: 100%;
}
[data-elementor-type="header"] .elementor-col-50:last-child > .elementor-widget-wrap > .elementor-widget {
  width: auto;
  flex: 0 0 auto;
}
[data-elementor-type="header"] .elementor-widget { margin: 0; }
[data-elementor-type="header"] .elementor-widget-image,
[data-elementor-type="header"] .elementor-widget-image img {
  display: block;
  width: clamp(176px, 17vw, 214px) !important;   /* trimmed logo (#337) — glyph fills the frame */
  max-width: 214px;
  height: auto;
}
/* the logo art carries a fine tagline BELOW the wordmark, so `align-items:
   center` sits the big "SBC" a touch high vs the nav — lift nav to match its
   optical centre */
[data-elementor-type="header"] .elementor-col-50:last-child > .elementor-widget-wrap {
  transform: translateY(-4px);
}
/* the logo art has a fine tagline line — trim the section padding so a bigger
   logo doesn't make the bar too tall */
[data-elementor-type="header"] .elementor-section {
  padding-top: 10px;
  padding-bottom: 10px;
}
[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  gap: 4px;
}
[data-elementor-type="header"] .elementor-nav-menu--main .elementor-item {
  padding-block: 6px;
  font-size: 0.8rem !important;
  letter-spacing: 0.13em;
}
[data-elementor-type="header"] .elementor-menu-cart__toggle .elementor-button {
  background: transparent;
  color: var(--sbc-ink);
  padding: 0;
}
[data-elementor-type="header"] .elementor-menu-cart__toggle .elementor-button-icon svg,
[data-elementor-type="header"] .elementor-menu-cart__toggle .elementor-button-icon i { font-size: 20px; }
[data-elementor-type="header"] .elementor-menu-cart__subtotal { display: none; }

/* mobile: nav collapses to the widget's own toggle; keep logo + cart in a row */
@media (max-width: 767px) {
  [data-elementor-type="header"] .elementor-col-50:last-child { gap: 12px; }
}

/* ===========================================================================
   Elementor Theme Builder — FOOTER (eb-footer.php) layout finish
   ------------------------------------------------------------------------- */
[data-elementor-type="footer"] .elementor-section {
  background: var(--sbc-dark-bg);
}
[data-elementor-type="footer"] .elementor-section .elementor-container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 48px);
  align-items: flex-start;
}
[data-elementor-type="footer"] .elementor-column { width: auto; }
[data-elementor-type="footer"] .elementor-col-40 { flex: 1 1 300px; min-width: 240px; }
[data-elementor-type="footer"] .elementor-col-20 { flex: 0 1 150px; }
[data-elementor-type="footer"] .elementor-col-100 { flex: 1 1 100%; }
[data-elementor-type="footer"] .elementor-widget { margin: 0; }
[data-elementor-type="footer"] .elementor-widget + .elementor-widget { margin-top: 14px; }

[data-elementor-type="footer"] .elementor-widget-image img {
  width: 176px;
  max-width: 176px;
  height: auto;
  display: block;
}

[data-elementor-type="footer"],
[data-elementor-type="footer"] p,
[data-elementor-type="footer"] a {
  color: var(--sbc-dark-soft);
}
[data-elementor-type="footer"] a { text-decoration: none; }
[data-elementor-type="footer"] a:hover { color: var(--sbc-dark-fg); }

[data-elementor-type="footer"] .elementor-widget-text-editor p {
  font-size: 0.86rem;
  line-height: 1.6;
  max-width: 34ch;
}
[data-elementor-type="footer"] h4 {
  font-family: var(--sbc-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sbc-dark-fg);
  margin: 0 0 10px;
  font-weight: 500;
}
[data-elementor-type="footer"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-elementor-type="footer"] ul li { margin: 0; }
[data-elementor-type="footer"] ul li a {
  display: block;
  font-size: 0.86rem;
  padding: 3px 0;
}

/* bottom bar */
[data-elementor-type="footer"] .sbc-footbar {
  font-family: var(--sbc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--sbc-dark-soft);
  max-width: none;
}
[data-elementor-type="footer"] .sbc-footbar a { color: var(--sbc-dark-soft); }
[data-elementor-type="footer"] .sbc-footbar a:hover { color: var(--sbc-dark-fg); }

@media (max-width: 720px) {
  [data-elementor-type="footer"] .elementor-col-20 { flex: 1 1 40%; }
}

/* ===========================================================================
   Homepage (Elementor page #340, eb-homepage.php) — layout finish
   ------------------------------------------------------------------------- */
.elementor-page-340 .elementor-section > .elementor-container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 44px);
}
.sbc-eyebrow-line {
  font-family: var(--sbc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sbc-stone);
  margin: 0 0 14px;
}

/* --- hero --- */
.elementor-element-sbchero { color: var(--sbc-dark-fg); }
.elementor-element-sbchero .sbc-eyebrow-line { color: var(--sbc-dark-soft); }
.elementor-element-sbchero h1 {
  color: var(--sbc-dark-fg);
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  max-width: 16ch;
  margin: 0;
}
.elementor-element-sbchero .elementor-widget-text-editor p {
  color: var(--sbc-dark-soft);
  max-width: 48ch;
  font-size: 1.03rem;
  margin-top: 20px;
}
.elementor-element-sbchero .elementor-widget-button { margin-top: 30px; }
.elementor-element-sbchero .elementor-button {
  background: var(--sbc-olive);
  color: #F4F2EC;
  border: 1px solid var(--sbc-olive);
  border-radius: 0;
  font-family: var(--sbc-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 28px;
}
.elementor-element-sbchero .elementor-button:hover { background: var(--sbc-olive-ink); border-color: var(--sbc-olive-ink); }

/* --- generic home section heading --- */
:is(.elementor-element-sbcrange,.elementor-element-sbcstory,.elementor-element-sbcquick,.elementor-element-sbcsocial) h2 {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  margin: 0 0 28px;
}

/* --- boilie range: the [products] grid reuses the shop-loop card styling --- */
:is(.elementor-element-sbcrange,.elementor-element-sbcstory,.elementor-element-sbcquick,.elementor-element-sbcsocial) .woocommerce { margin-top: 0; }
:is(.elementor-element-sbcrange,.elementor-element-sbcstory,.elementor-element-sbcquick,.elementor-element-sbcsocial) ul.products { margin: 0; }

/* --- welcome + why --- */
/* same lone-100%-column gutter-padding waste as sbcwhybox below — sbcstorycol
   is the only column in sbcstory's own container, so its default 44px each
   side gutter (meant to space multiple columns) is pure dead space; zeroing
   it recovers the full 1160px content width for the row + button below it. */
.elementor-element-sbcstory > .elementor-container { padding: 0 !important; }
.elementor-element-sbcstoryrow > .elementor-container { align-items: stretch; gap: clamp(28px, 4vw, 56px); }
.elementor-element-sbcstory h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); text-transform: none; margin-bottom: 14px; }
.elementor-element-sbcstory .elementor-widget-text-editor p { max-width: 60ch; }
.elementor-element-sbcstory .elementor-widget-text-editor p + p { margin-top: 1em; }
/* KPI grid ("Waarom kiezen voor SBC?") — native 2-column x 3-row Elementor
   grid (see restructure-why-kpi.php): one text-editor widget per point, so
   the owner can edit / reorder / add a point directly in Elementor, nothing
   to lose in the visual editor since each widget holds one plain <p>. The
   grid lines come from the column + widget classes, not custom markup. */
/* Matched line-for-line against the approved mockup file (sbc-kpi-mockup-v2,
   re-read verbatim on 2026-09-13 rather than guessed again): outer card
   keeps its own border, but now ALSO has real padding around the grid
   (the mockup's ".why { padding: clamp(20,3vw,30) }") instead of the grid
   touching the card's edge directly, and the grid gets its OWN border on
   top of that (the mockup's ".kpi2x3 { border:1px }") — a frame-within-a-
   frame, not a single flush border. Column ratio, cell padding, font-size
   and the index-marker size are set to the mockup's exact values. */
/* Found live via devtools (staging's TLS cert now fixed, so this is a real
   inspection, not a guess): a single 100%-wide column still inherits
   Elementor's default column-GAP padding on its parent ".elementor-container"
   (0 44px — meant to gutter multiple columns apart) even though there is
   only one column here to gutter. That silently ate 88px off sbcwhycard's
   width, which is why the grid sat inset with large dead margins instead of
   filling the padded card. Zero it — there's nothing here for it to gutter. */
.elementor-element-sbcwhybox > .elementor-container { padding: 0 !important; }
/* the 3 grid rows are real 2-column mini-sections, so they ALSO carry this
   same default gutter — here it's not "wrong" the way sbcwhybox's was, but
   the mockup's grid has no such gutter at all (its dividers are a 1px CSS
   grid gap, not a 44px column margin), so it must be zeroed here too or the
   grid reads far more inset than the approved design. Live-verified via
   devtools before writing this: without it colA/colB were 144px each with
   ~75px dead margin per side; with it they're 188px with ~30px (the actual
   card padding) per side. */
.elementor-element-sbcwhyrow1 > .elementor-container,
.elementor-element-sbcwhyrow2 > .elementor-container,
.elementor-element-sbcwhyrow3 > .elementor-container { padding: 0 !important; }
.elementor-element-sbcwhybox {
  border: 1px solid var(--sbc-line);
  background: var(--sbc-card);
  counter-reset: sbcwhy;
}
/* Owner's call (2026-09-13): priority 2 — card height must match the
   paragraph exactly, even if that means tighter than the mockup's own
   spacing. Tuned live via devtools against this page's real paragraph
   length: 20px card padding + no per-cell min-height (natural 2-line
   content only) closes the ~109px overshoot down to ~15-20px. */
.elementor-element-sbcwhycard > .elementor-widget-wrap { padding: 20px !important; }
.elementor-element-sbcwhyrow1,
.elementor-element-sbcwhyrow2,
.elementor-element-sbcwhyrow3 { margin: 0; padding: 0; }
/* the grid's own frame, drawn on the outer edges of the row/column set */
.elementor-element-sbcwhyrow1 { border-top: 1px solid var(--sbc-line); }
.elementor-element-sbcwhyrow3 { border-bottom: 1px solid var(--sbc-line); }
/* the divider between rows is ONE border drawn across each row's own
   container (see restructure-why-rows.php) — level by construction, unlike
   the old per-cell borders, which sat wherever that cell's own text ended. */
.elementor-element-sbcwhyrow1,
.elementor-element-sbcwhyrow2 { border-bottom: 1px solid var(--sbc-line); }
.elementor-element-sbcwhyrow1 > .elementor-container,
.elementor-element-sbcwhyrow2 > .elementor-container,
.elementor-element-sbcwhyrow3 > .elementor-container { align-items: flex-start; }
.elementor-element-sbcwhyrow1colA,
.elementor-element-sbcwhyrow2colA,
.elementor-element-sbcwhyrow3colA { border-left: 1px solid var(--sbc-line); border-right: 1px solid var(--sbc-line); }
.elementor-element-sbcwhyrow1colB,
.elementor-element-sbcwhyrow2colB,
.elementor-element-sbcwhyrow3colB { border-right: 1px solid var(--sbc-line); }
.elementor-element-sbcwhybox .elementor-widget-text-editor { margin: 0 !important; width: 100%; }
.elementor-element-sbcwhybox .elementor-widget-text-editor p {
  box-sizing: border-box;
  margin: 0;
  padding: 8px 14px 9px;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--sbc-ink);
  text-align: left;
}
.elementor-element-sbcwhybox .elementor-widget-text-editor p::before {
  counter-increment: sbcwhy;
  content: counter(sbcwhy, decimal-leading-zero);
  display: block;
  font-family: var(--sbc-font-mono);
  font-size: 10.5px;
  color: var(--sbc-olive);
  margin-bottom: 7px;
}
.elementor-element-sbcstory .elementor-widget-button { margin-top: 18px; }
.elementor-element-sbcstory .elementor-button {
  background: transparent;
  border: 1px solid var(--sbc-ink);
  color: var(--sbc-ink);
  border-radius: 0;
  font-family: var(--sbc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 13px 24px;
}
.elementor-element-sbcstory .elementor-button:hover { background: var(--sbc-ink); color: var(--sbc-paper); }

/* --- quick navigation tiles --- */
nav.sbc-quick {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--sbc-line);
  border: 1px solid var(--sbc-line);
}
@media (max-width: 820px) { nav.sbc-quick { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { nav.sbc-quick { grid-template-columns: 1fr 1fr; } }
nav.sbc-quick a {
  background: var(--sbc-card);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}
nav.sbc-quick a:hover { background: var(--sbc-card-warm); }
nav.sbc-quick .n {
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sbc-ink);
  letter-spacing: 0.03em;
  font-size: 1.05rem;
}
nav.sbc-quick .s {
  font-family: var(--sbc-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sbc-stone);
}

/* --- social --- */
.elementor-element-sbcsocial { text-align: center; }
.elementor-element-sbcsocial .sbc-eyebrow-line { margin-bottom: 8px; }
.elementor-element-sbcsocial h2 { margin-bottom: 8px; }
.elementor-element-sbcsocial .elementor-widget-text-editor p {
  font-family: var(--sbc-font-mono);
  font-size: 0.8rem;
  color: var(--sbc-olive-ink);
  margin: 0 auto;
}

/* Elementor's global Primary colour (olive) bleeds onto headings/text via the
   kit — force the SBC ink / on-dark colours back on the homepage. */
.elementor-page-340 .elementor-widget-heading .elementor-heading-title { color: var(--sbc-ink); }
.elementor-page-340 .elementor-widget-text-editor { color: var(--sbc-ink-soft); }
.elementor-element-sbchero .elementor-widget-heading .elementor-heading-title { color: var(--sbc-dark-fg) !important; }
.elementor-element-sbchero .elementor-widget-text-editor,
.elementor-element-sbchero .elementor-widget-text-editor p { color: var(--sbc-dark-soft) !important; }
.elementor-element-sbchero .sbc-eyebrow-line { color: var(--sbc-dark-soft) !important; }

/* ---- homepage round 2 (owner feedback) ------------------------------------ */

/* hero: category strip with olive dashes, replaces the lede paragraph */
.elementor-element-sbchero .sbc-hero-cats {
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  color: var(--sbc-dark-fg) !important;
  margin-top: 22px !important;
  max-width: none !important;
}
.elementor-element-sbchero .sbc-hero-cats b {
  color: var(--sbc-dark-olive);
  font-weight: 400;
  margin: 0 0.35em;
}

/* boilie range: the [products] shortcode adds .columns-3, whose 30.75% width
   rule fights our grid and collapses each card — force the card to fill its
   grid track. */
.elementor-element-sbcrange ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.elementor-element-sbcrange ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
@media (max-width: 820px) {
  .elementor-element-sbcrange ul.products.columns-3 { grid-template-columns: repeat(2, 1fr); }
}
/* phones: horizontal swipe slider instead of a vertical stack */
@media (max-width: 560px) {
  .elementor-element-sbcrange ul.products,
  .elementor-element-sbcrange ul.products.columns-3 {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 1.4rem 0 2rem;
    padding-bottom: 8px;
  }
  .elementor-element-sbcrange ul.products li.product,
  .elementor-element-sbcrange ul.products.columns-3 li.product {
    flex: 0 0 auto;
    width: 76% !important;
    scroll-snap-align: start;
    margin: 0 !important;
  }
  .elementor-element-sbcrange ul.products::-webkit-scrollbar { height: 3px; }
  .elementor-element-sbcrange ul.products::-webkit-scrollbar-thumb { background: var(--sbc-line); }
  .elementor-element-sbcrange ul.products::-webkit-scrollbar-track { background: transparent; }
}

/* welcome + why: card top/bottom pinned to the paragraph, button centred on
   the full width (owner request 2026-09-13, round 2). Round 1 targeted the
   ".elementor-column" divs directly and fought the wrong element — a
   column's actual flex container for its children is its OWN
   ".elementor-widget-wrap" (flex + wrap + align-content:flex-start by
   default), so that is what needs flex-direction:column here. The button
   is no longer position:absolute (its containing block kept landing on a
   nested wrapper, not the shared row) — see restructure-story-row.php,
   which moved it into a real full-width column next to the 2-col row. */
.elementor-element-sbcstorycol > .elementor-widget-wrap { padding: 0 !important; }
.elementor-element-sbcstorycolL > .elementor-widget-wrap,
.elementor-element-sbcstorycolR > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
/* the top-alignment offset (≈ the h2's own height + spacing, so the card
   starts level with the paragraph) now lives on the LABEL, not the card —
   owner feedback 2026-09-13: pushing the card down on its own left a big
   dead gap between "Waarom kiezen voor SBC?" and the card below it. Moving
   the offset up one element keeps the exact same card position (verified
   live: unchanged) while the label sits directly above the card again. */
.elementor-element-sbcwhylabel { flex: 0 0 auto !important; margin-top: 80px; }
.elementor-element-sbcwhybox {
  flex: 1 1 auto !important;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.elementor-element-sbcwhybtn { text-align: center !important; margin-top: 28px !important; }
@media (max-width: 1024px) {
  .elementor-element-sbcstoryrow > .elementor-container { align-items: flex-start; }
  .elementor-element-sbcstorycolL > .elementor-widget-wrap,
  .elementor-element-sbcstorycolR > .elementor-widget-wrap { height: auto !important; }
  .elementor-element-sbcwhylabel { margin-top: 0; }
  .elementor-element-sbcwhybox { flex: none; justify-content: flex-start; }
}
/* "Read our story" -> olive */
.elementor-element-sbcstory .elementor-button {
  border-color: var(--sbc-olive);
  color: var(--sbc-olive-ink);
}
.elementor-element-sbcstory .elementor-button:hover {
  background: var(--sbc-olive);
  border-color: var(--sbc-olive);
  color: #F4F2EC;
}

/* quick nav is now 6 tiles, names only */
nav.sbc-quick { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { nav.sbc-quick { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { nav.sbc-quick { grid-template-columns: repeat(2, 1fr); } }
nav.sbc-quick a { padding: 24px 14px; align-items: center; text-align: center; }

/* ---- footer round 2 ----------------------------------------------------- */
/* brand column is now just the logo */
[data-elementor-type="footer"] .elementor-col-40 { flex: 0 1 220px; }
[data-elementor-type="footer"] .elementor-section:first-child .elementor-container {
  justify-content: space-between;
}
/* bottom bar on ONE wide line */
[data-elementor-type="footer"] .sbc-footbar {
  max-width: none !important;
  white-space: nowrap;
  overflow-x: auto;
}
[data-elementor-type="footer"] .elementor-section:last-child .elementor-container {
  display: block;
}

/* homepage: the Smash Balloon feed was added in a full-bleed container —
   pull the container in to the site content width (1160), same gutter as the
   other sections. The gutter lives on the container only; the widget inside
   must not add a second one. */
.elementor-page-340 .e-con:has(#sb_instagram),
.elementor-page-340 .elementor-element-9bba25e {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 44px);
}
.elementor-page-340 .e-con:has(#sb_instagram) .elementor-widget-shortcode {
  max-width: none;
  padding-inline: 0;
}
.elementor-page-340 #sb_instagram { width: 100%; }

/* ============================================================
   Plain content pages — About, and later the policy pages.
   Wrap page content in <div class="sbc-prose">.
   ============================================================ */
.sbc-prose {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(40px, 7vw, 88px) clamp(18px, 5vw, 44px);
}
.sbc-prose > * + * { margin-top: 1.1em; }
.sbc-prose h2 {
  margin-top: 2.2em;
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--sbc-ink);
}
.sbc-prose h3 {
  margin-top: 1.6em;
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 1.02rem;
  color: var(--sbc-olive-ink);
}
.sbc-prose p,
.sbc-prose li { color: var(--sbc-ink-soft); line-height: 1.7; }
.sbc-prose .sbc-lead {
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--sbc-ink);
}
.sbc-prose blockquote.sbc-tagline {
  margin: 2.4em 0;
  padding: 1.1em 1.4em;
  border-left: 3px solid var(--sbc-olive);
  background: var(--sbc-card-warm);
}
.sbc-prose blockquote.sbc-tagline p {
  margin: 0;
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
  color: var(--sbc-ink);
}
.sbc-prose ul.sbc-team { list-style: none; padding: 0; }
.sbc-prose ul.sbc-team li {
  padding: .55em 0;
  border-bottom: 1px solid var(--sbc-line-soft);
}
.sbc-prose ul.sbc-team li strong { color: var(--sbc-ink); }
.sbc-prose .sbc-cta-row { margin-top: 2.6em; }
.sbc-prose a.sbc-btn {
  display: inline-block;
  padding: .8em 1.6em;
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--sbc-olive-ink);
  border: 1px solid var(--sbc-olive);
  transition: background .15s, color .15s;
}
.sbc-prose a.sbc-btn:hover { background: var(--sbc-olive); color: #fff; }

/* plain-prose pages: pull the theme page-title (h1.entry-title) into the same
   column as .sbc-prose and tone it down from the hero-sized default */
main.site-main:has(.sbc-prose) .page-header {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(40px, 7vw, 88px) clamp(18px, 5vw, 44px) 0;
}
main.site-main:has(.sbc-prose) .page-header .entry-title {
  font-size: clamp(2rem, 4vw, 3rem);
}
main.site-main:has(.sbc-prose) .sbc-prose { padding-top: 1.4em; }

/* ============================================================================
   About Us page (#320) — now an Elementor page (eb-about.php). Section ids
   sbcab<name>. The styled inner markup (.lede / .sbc-ab-values / .v /
   blockquote / .sbc-btn / .sbc-ab-team / .sbc-ab-time / .e ...) is preserved
   verbatim inside text / html widgets, so every rule from ".sbc-ab-values {"
   downward still applies unchanged. These rules re-create the band + wrapper
   layer that the old <div class="sbc-about"> gave.
   ============================================================================ */
main.site-main:has([class*="elementor-element-sbcab"]) { max-width: none; width: 100%; padding: 0; margin: 0; }
main.site-main:has([class*="elementor-element-sbcab"]) .page-header { display: none; }

[class*="elementor-element-sbcab"] > .elementor-container {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 44px);
  padding-block: clamp(56px, 9vw, 104px);
}
[class*="elementor-element-sbcab"] .elementor-widget-wrap { padding: 0 !important; }
[class*="elementor-element-sbcab"] .elementor-widget { margin-bottom: 0; }
[class*="elementor-element-sbcab"] h1.elementor-heading-title,
[class*="elementor-element-sbcab"] h2.elementor-heading-title,
[class*="elementor-element-sbcab"] h3 { color: var(--sbc-ink); }
[class*="elementor-element-sbcab"] h2.elementor-heading-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 8px 0 clamp(26px, 4vw, 46px); }
[class*="elementor-element-sbcab"] .elementor-widget-text-editor p { color: var(--sbc-ink-soft); }

/* opener — charcoal band. The old page double-padded opener/tagline (outer
   section clamp + inner .in clamp); reproduce that exact rhythm as one calc. */
.elementor-element-sbcabopener > .elementor-container { padding-block: calc(clamp(56px, 9vw, 104px) + clamp(52px, 7vw, 88px)); }
.elementor-element-sbcabopener { background: var(--sbc-dark-bg); color: var(--sbc-dark-soft); }
.elementor-element-sbcabopener .elementor-widget-text-editor p { color: var(--sbc-dark-soft); }
.elementor-element-sbcabopener .elementor-widget-text-editor p.sbc-eyebrow-line { color: var(--sbc-dark-olive); }
.elementor-element-sbcabopener h1.elementor-heading-title {
  color: var(--sbc-dark-fg);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 700;
  margin: 12px 0 0;
}
.elementor-element-sbcabopener .lede {
  margin-top: 20px;
  max-width: 60ch;
  font-size: clamp(0.94rem, 0.9vw, 1.02rem);
  line-height: 1.75;
}
.elementor-element-sbcabopener .lede strong { color: var(--sbc-dark-fg); font-weight: 500; }

.elementor-element-sbcabtime { background: var(--sbc-card-warm); border-block: 1px solid var(--sbc-line-soft); }
.elementor-element-sbcabteam { background: #FFFFFF; border-block: 1px solid var(--sbc-line); }

/* core values — 2-up white cards */
.sbc-ab-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.sbc-ab-values .v {
  background: var(--sbc-card);
  border: 1px solid var(--sbc-line);
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sbc-ab-values h3 {
  align-self: flex-start;
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.045em;
  color: var(--sbc-ink);
  padding-bottom: 9px;
  border-bottom: 2px solid var(--sbc-olive);
}
.sbc-ab-values p { font-size: 0.98rem; line-height: 1.68; }

/* tagline band — quote centred over the About background photo */
.elementor-element-sbcabtagline {
  background-color: #1B1A18;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url("https://staging.supremebaitcollective.be/wp-content/uploads/2026/09/aboutus_background.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;   /* scroll-over / parallax, as on production */
}
.elementor-element-sbcabtagline > .elementor-container { padding-block: calc(clamp(56px, 9vw, 104px) + clamp(36px, 5vw, 60px)); }
.elementor-element-sbcabtagline .elementor-widget-wrap {
  min-height: 200px;
  display: flex !important;   /* Elementor forces flex here; keep it, just recentre */
  flex-direction: column !important;
  flex-wrap: nowrap !important;   /* else align-content:flex-start pins the line left */
  align-items: center !important;
  align-content: center !important;
  justify-content: center;
  gap: 22px;
  text-align: center;
}
.elementor-element-sbcabtagline .elementor-widget { width: auto !important; max-width: 100%; }
.elementor-element-sbcabtagline blockquote,
.elementor-element-sbcabtagline blockquote p {   /* wpautop wraps the quote text in <p> */
  margin: 0;
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  font-weight: 600;
  color: #FFFFFF;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  font-size: clamp(1.45rem, 3.4vw, 2.4rem);
  line-height: 1.16;
}
.elementor-element-sbcabtagline blockquote { max-width: 24ch; }
@media (max-width: 768px) {
  .elementor-element-sbcabtagline { background-attachment: scroll; }
}
.elementor-element-sbcabtagline .sbc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sbc-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  color: var(--sbc-dark-fg);
  border: 1px solid rgba(239, 237, 227, 0.55);
  background: transparent;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.elementor-element-sbcabtagline .sbc-btn::after { content: "\2192"; }
.elementor-element-sbcabtagline .sbc-btn:hover {
  background: var(--sbc-olive);
  border-color: var(--sbc-olive);
  color: #F4F2EC;
}

/* team — 3-up cards with a country flag per person */
.sbc-ab-team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.sbc-ab-team .m {
  background: var(--sbc-card);
  border: 1px solid var(--sbc-line);
  display: flex;
  flex-direction: column;
}
.sbc-ab-team .ph {
  aspect-ratio: 4 / 3;
  background: var(--sbc-olive-tint);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--sbc-line);
}
.sbc-ab-team .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbc-ab-team .ph span {
  font-family: var(--sbc-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: 0.04em;
  color: var(--sbc-olive-ink);
}
.sbc-ab-team .who { padding: 18px clamp(16px, 2vw, 22px) 22px; display: flex; flex-direction: column; gap: 6px; }
.sbc-ab-team .who b {
  font-family: var(--sbc-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sbc-ink);
  font-size: 1.04rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sbc-ab-team .who small {
  font-family: var(--sbc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sbc-stone);
  line-height: 1.5;
}
img.sbc-flag {   /* img.* to beat Elementor's ".elementor img { height:auto }" */
  height: 15px;
  width: auto;
  max-width: 26px;
  object-fit: contain;
  border: 1px solid var(--sbc-line);
  flex: 0 0 auto;
  vertical-align: middle;
}

/* history — left-rail timeline */
.sbc-ab-time { display: grid; }
.sbc-ab-time .e {
  display: grid;
  grid-template-columns: clamp(56px, 9vw, 92px) 1fr;
  gap: 0 clamp(18px, 4vw, 40px);
}
.sbc-ab-time .yr {
  font-family: var(--sbc-font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--sbc-olive);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding-top: 2px;
}
.sbc-ab-time .bd {
  position: relative;
  border-left: 1px solid var(--sbc-line);
  padding: 0 0 clamp(30px, 5vw, 52px) clamp(20px, 4vw, 40px);
}
.sbc-ab-time .e:last-child .bd { border-color: transparent; padding-bottom: 0; }
.sbc-ab-time .bd::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 4px;
  width: 8px;
  height: 8px;
  background: var(--sbc-olive);
}
.sbc-ab-time .bd h3 {
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.sbc-ab-time .bd p { max-width: 64ch; line-height: 1.72; }

@media (max-width: 860px) {
  .sbc-ab-values { grid-template-columns: 1fr; }
  .sbc-ab-team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .sbc-ab-team { grid-template-columns: 1fr; }
}

/* ============================================================================
   Site-wide announcement strip (free-shipping threshold) — wp_body_open,
   above the header. See functions.php `sbc_annbar_text`.
   ============================================================================ */
.sbc-annbar {
  background: var(--sbc-olive);
  color: #F4F2EC;
  text-align: center;
  padding: 8px 12px;
}
.sbc-annbar span {
  font-family: var(--sbc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ============================================================================
   Shop page ("Winkel" — Elementor page #7). Opener + one section per category
   (element ids sbcshop<cat>) + the sticky filter bar injected by shop.js.
   ============================================================================ */

/* opener — charcoal title band, heading centred */
.elementor-element-sbcshopopener .elementor-heading-title {
  color: var(--sbc-dark-fg) !important;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* category section heading = group head with a hairline rule */
.elementor-section[class*="elementor-element-sbcshop"] h2.elementor-heading-title {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  padding-bottom: 14px;
  margin-bottom: clamp(18px, 3vw, 30px);
  border-bottom: 1px solid var(--sbc-line);
}

/* [products] grid inside the shop sections — force the 3-up grid over
   WooCommerce's .columns-3 { width: 30.75% } on the loop items */
[class*="elementor-element-sbcshop"] ul.products {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
}
[class*="elementor-element-sbcshop"] ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
@media (max-width: 820px) {
  [class*="elementor-element-sbcshop"] ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  [class*="elementor-element-sbcshop"] ul.products { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  [class*="elementor-element-sbcshop"] ul.products { grid-template-columns: 1fr; }
}

/* Tackle empty state */
.sbc-shop-empty {
  max-width: none !important;
  border: 1px dashed var(--sbc-line);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  font-family: var(--sbc-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sbc-stone);
}

/* sticky filter bar (built by shop.js, inserted after the opener) */
.sbc-shopbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--sbc-paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--sbc-line);
}
.sbc-shopbar__in {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 44px);
}
.sbc-shopbar__row {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding-block: 12px;
}
.sbc-shopbar__row--primary { border-bottom: 1px solid var(--sbc-line-soft); }
.sbc-shopbar__row--secondary[hidden] { display: none; }
.sbc-shopbar__row--secondary { animation: sbcDrop 0.18s ease-out; }
@keyframes sbcDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sbc-shopbar__sublabel {
  font-family: var(--sbc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sbc-stone);
}
.sbc-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.sbc-chip {
  font-family: var(--sbc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sbc-ink-soft);
  background: transparent;
  padding: 7px 12px;
  border: 1px solid var(--sbc-line);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.sbc-chip:hover { border-color: var(--sbc-olive); color: var(--sbc-olive-ink); }
.sbc-chip.is-active { background: var(--sbc-olive); border-color: var(--sbc-olive); color: #F4F2EC; }
.sbc-chips--sub .sbc-chip { font-size: 0.66rem; padding: 6px 10px; }

/* section hidden by the category filter */
.elementor-section.sbc-hide { display: none !important; }

/* shop opener: taller charcoal band, heading vertically centred */
.elementor-element-sbcshopopener { padding-top: 60px !important; padding-bottom: 60px !important; }
.elementor-element-sbcshopopener .elementor-heading-title { border-bottom: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* --- shop page: line the content up with the header logo -----------------
   Hello Elementor caps <main class="site-main"> at 1140px; the header container
   is 1160. Drop the cap so the section's own 1160 container centres exactly like
   the header, then match the header's 44px inline gutter. */
main.sbc-shop-main { max-width: none !important; padding-inline: 0 !important; }
.elementor-section[class*="elementor-element-sbcshop"] > .elementor-container {
  padding-inline: clamp(18px, 5vw, 44px);
}
.elementor-section[class*="elementor-element-sbcshop"] .elementor-widget-wrap { padding: 0 !important; }

/* filter chips: keep the primary row on ONE line (scrolls on narrow screens) */
.sbc-shopbar__row--primary .sbc-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.sbc-shopbar__row--primary .sbc-chips::-webkit-scrollbar { display: none; }
.sbc-shopbar__row--primary .sbc-chip { flex: 0 0 auto; }

/* header cart: Elementor's kit puts a 1px border square around the toggle icon */
[data-elementor-type="header"] .elementor-menu-cart__toggle_button,
[data-elementor-type="header"] .elementor-menu-cart__toggle .elementor-button {
  border: 0 !important;
  box-shadow: none !important;
}

/* contact: text, map and form share one left edge (aligned with the header) */
main.site-main:has(.elementor-element-c333sec) { padding-inline: 0 !important; }
.elementor-element-c333sec > .elementor-container { padding-inline: clamp(18px, 5vw, 44px); }
.elementor-element-c333col .elementor-widget-wrap { padding: 0 !important; }
.sbc-prose.sbc-prose--left { padding-inline: 0; }

/* ============================================================================
   Content pages (Voorwaarden / Contact / Verzending / Retour / FAQ / Privacy)
   — Elementor pages, one text-editor widget wrapped in .sbc-prose.
   ============================================================================ */

/* "concept — na te lezen" banner on the drafted pages */
.sbc-prose .sbc-draftnote {
  margin: 0 0 1.6em;
  padding: 0.9em 1.1em;
  border-left: 3px solid var(--sbc-olive);
  background: var(--sbc-olive-tint);
  font-family: var(--sbc-font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--sbc-olive-ink);
}

/* FAQ — native <details> accordion */
.sbc-prose details.sbc-faq {
  border-bottom: 1px solid var(--sbc-line);
}
.sbc-prose details.sbc-faq:first-of-type { border-top: 1px solid var(--sbc-line); }
.sbc-prose details.sbc-faq > summary {
  cursor: pointer;
  list-style: none;
  padding: 1em 2em 1em 0;
  position: relative;
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.02rem;
  color: var(--sbc-ink);
}
.sbc-prose details.sbc-faq > summary::-webkit-details-marker { display: none; }
.sbc-prose details.sbc-faq > summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 0.8em;
  font-family: var(--sbc-font-mono);
  color: var(--sbc-olive);
}
.sbc-prose details.sbc-faq[open] > summary::after { content: "\2013"; }
.sbc-prose details.sbc-faq > p { margin: 0 0 1.1em; }

/* secondary filter: attribute not yet assigned to any product in this category */
.sbc-shopbar__hint {
  font-family: var(--sbc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--sbc-stone);
  font-style: italic;
}

/* left-aligned prose variant (Contact) */
.sbc-prose.sbc-prose--left { margin-inline: 0; max-width: 760px; }

/* Contact — locations + map */
.sbc-locs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin: 0.6em 0 0;
}
.sbc-loc {
  border: 1px solid var(--sbc-line);
  background: var(--sbc-card);
  padding: clamp(16px, 2vw, 22px);
}
.sbc-loc h3 {
  margin: 0 0 0.5em;
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1rem;
  color: var(--sbc-olive-ink);
}
.sbc-loc p { margin: 0 0 0.5em; }
.elementor-widget-google_maps { margin: 1.4em 0 0.4em; }
.elementor-widget-google_maps iframe {
  border: 1px solid var(--sbc-line);
  filter: grayscale(0.25) contrast(0.95);
}
.sbc-map__note {
  margin: 0.7em 0 0;
  font-family: var(--sbc-font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--sbc-stone);
}
.sbc-map__note code { font-size: 0.95em; background: var(--sbc-paper-2); padding: 0 3px; }

/* ============================================================================
   Floating WhatsApp chat button (functions.php wp_footer), site-wide.
   ============================================================================ */
.sbc-wa {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 900;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sbc-wa:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); }
@media (prefers-reduced-motion: reduce) { .sbc-wa { transition: none; } }

/* Contact page: cap every widget in the column to the prose measure so the map
   and the form line up with the text (all flush-left at the same right edge). */
.elementor-element-c333col .elementor-widget { max-width: 760px; }
.elementor-element-c333col .sbc-prose--left { max-width: none; }

/* shop: centred green "Alles weergeven" button under a truncated category */
.elementor-widget-button[class*="elementor-element-sbcshop"] {
  text-align: center;
  margin-top: clamp(22px, 3vw, 34px);
}
.elementor-widget-button[class*="elementor-element-sbcshop"] .elementor-button {
  background: var(--sbc-olive);
  color: #F4F2EC;
  border: 1px solid var(--sbc-olive);
  border-radius: 0;
  font-family: var(--sbc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 30px;
  transition: background 0.15s, border-color 0.15s;
}
.elementor-widget-button[class*="elementor-element-sbcshop"] .elementor-button:hover {
  background: var(--sbc-olive-ink);
  border-color: var(--sbc-olive-ink);
  color: #F4F2EC;
}

/* cart: "Verder naar afrekenen" — calm SBC button, not a full-width slab */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button.alt {
  display: inline-block;
  width: auto;
  min-width: 0;
  font-family: var(--sbc-font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 30px;
  background: var(--sbc-olive);
  color: #F4F2EC;
  border: 1px solid var(--sbc-olive);
  border-radius: 0;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--sbc-olive-ink);
  border-color: var(--sbc-olive-ink);
  color: #F4F2EC;
}

/* cart: the tier-saving row value reads as a deduction */
.cart_totals .sbc-tier-saving td,
.cart_totals tr.sbc-tier-saving td { color: var(--sbc-olive-ink); white-space: nowrap; }

/* ============================================================================
   Delivery-time notice — sbc-core render_delivery_notice()
   ("Verzending 1-3 werkdagen*"): product page shows the footnote as small
   print; the cart shows it as a tooltip on the "*".
   ============================================================================ */
.sbc-delivery {
  position: relative;
  margin: 14px 0 0;
  font-family: var(--sbc-font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--sbc-ink-soft);
}
.sbc-delivery__claim { display: inline-flex; align-items: center; }
.sbc-delivery__claim::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 9px;
  background: var(--sbc-olive);
  flex: 0 0 auto;
}
.sbc-delivery__mark { margin-left: 3px; cursor: help; color: var(--sbc-olive-ink); }
.sbc-delivery__mark:focus-visible { outline: 2px solid var(--sbc-olive); outline-offset: 2px; }

.sbc-delivery--product .sbc-delivery__note {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--sbc-stone);
  max-width: 46ch;
}

.sbc-delivery--cart .sbc-delivery__note {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  background: var(--sbc-ink);
  color: var(--sbc-dark-fg);
  font-size: 0.68rem;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}
.sbc-delivery--cart:hover .sbc-delivery__note,
.sbc-delivery--cart:focus-within .sbc-delivery__note { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .sbc-delivery--cart .sbc-delivery__note { transition: none; } }

/* ============================================================================
   Promoties page (#321 — Elementor page). Section ids sbcpromo<name>.
   Text lives in native Heading / Text-Editor widgets; the three card grids are
   HTML widgets styled here.
   ============================================================================ */

main.site-main:has([class*="elementor-element-sbcpromo"]) { max-width: none !important; padding-inline: 0 !important; }
.elementor-section[class*="elementor-element-sbcpromo"] > .elementor-container { padding-inline: clamp(18px, 5vw, 44px); }
.elementor-section[class*="elementor-element-sbcpromo"] .elementor-widget-wrap { padding: 0 !important; }

.elementor-element-sbcpromoopener .elementor-heading-title {
  color: var(--sbc-dark-fg) !important;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.elementor-element-sbcpromoopener { padding-top: 60px !important; padding-bottom: 60px !important; }

[class*="elementor-element-sbcpromo"]:not(.elementor-element-sbcpromoopener) h2.elementor-heading-title {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin-top: 8px;
}
[class*="elementor-element-sbcpromo"] .elementor-widget-text-editor p { max-width: 64ch; line-height: 1.7; }
[class*="elementor-element-sbcpromo"] .elementor-widget-text-editor { margin-bottom: clamp(20px, 3vw, 32px); }
[class*="elementor-element-sbcpromo"] .sbc-eyebrow-line { margin-bottom: 2px; }
.sbc-promo-note {
  max-width: none !important;
  margin-top: 14px !important;
  font-family: var(--sbc-font-mono);
  font-size: 0.68rem;
  font-style: italic;
  color: var(--sbc-stone);
}

.sbc-promo-student {
  display: grid;
  grid-template-columns: minmax(170px, 250px) 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background: var(--sbc-olive-tint);
  border: 1px solid var(--sbc-olive);
  padding: clamp(24px, 4vw, 44px);
}
.sbc-promo-student .fig {
  font-family: var(--sbc-font-display);
  font-weight: 700;
  line-height: 0.9;
  color: var(--sbc-olive-ink);
}
.sbc-promo-student .fig b { display: block; font-size: clamp(3.4rem, 9vw, 5.6rem); }
.sbc-promo-student .fig span { display: block; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; margin-top: 8px; }
.sbc-promo-student .bd h3 {
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: var(--sbc-ink);
  margin: 0 0 12px;
}
.sbc-promo-student .bd ul { list-style: none; margin: 0; padding: 0; font-family: var(--sbc-font-mono); font-size: 0.78rem; line-height: 1.9; color: var(--sbc-ink-soft); }
.sbc-promo-student .bd li { padding-left: 18px; position: relative; }
.sbc-promo-student .bd li::before { content: "\2014"; position: absolute; left: 0; color: var(--sbc-olive); }
.sbc-promo-student .bd .ph { margin: 12px 0 0; font-family: var(--sbc-font-mono); font-size: 0.68rem; font-style: italic; color: var(--sbc-stone); }

.sbc-promo-bundles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px); }
.sbc-promo-bundle { background: var(--sbc-card); border: 1px solid var(--sbc-line); display: flex; flex-direction: column; }
.sbc-promo-bundle .bname {
  font-family: var(--sbc-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sbc-ink);
  font-size: 1.05rem;
  padding: 16px clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid var(--sbc-line);
}
.sbc-promo-bundle .brows { display: flex; flex-direction: column; padding: 4px clamp(14px, 1.8vw, 20px); flex: 1 1 auto; }
.sbc-promo-bundle .brow { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.sbc-promo-bundle .brow + .brow { border-top: 1px solid var(--sbc-line-soft); }
.sbc-promo-bundle .bm {
  width: 40px; height: 40px; flex: 0 0 auto;
  background: var(--sbc-olive-tint);
  display: grid; place-items: center;
  font-family: var(--sbc-font-display);
  font-weight: 700; font-size: 0.9rem;
  color: var(--sbc-olive-ink);
  border: 1px solid var(--sbc-line);
}
.sbc-promo-bundle .bt { display: flex; flex-direction: column; }
.sbc-promo-bundle .bt b { font-family: var(--sbc-font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.9rem; color: var(--sbc-ink); }
.sbc-promo-bundle .bt small { font-family: var(--sbc-font-mono); font-size: 0.66rem; color: var(--sbc-stone); letter-spacing: 0.04em; }
.sbc-promo-bundle .bfoot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 14px clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--sbc-line);
  background: var(--sbc-card-warm);
}
.sbc-promo-bundle .bsave {
  font-family: var(--sbc-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: #F4F2EC;
  background: var(--sbc-olive);
  padding: 5px 10px;
}
.sbc-promo-bundle .bprice { font-family: var(--sbc-font-mono); font-size: 0.82rem; color: var(--sbc-ink); }
.sbc-promo-bundle .bprice del { color: var(--sbc-stone); margin-right: 6px; }

.sbc-promo-clear { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px); }
.sbc-promo-ccard { background: var(--sbc-card); border: 1px solid var(--sbc-line); display: flex; flex-direction: column; }
.sbc-promo-ccard .cmedia {
  aspect-ratio: 4 / 3;
  background: var(--sbc-olive-tint);
  border-bottom: 1px solid var(--sbc-line);
  display: grid; place-items: center;
  position: relative;
}
.sbc-promo-ccard .cmedia span { font-family: var(--sbc-font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2rem); color: var(--sbc-olive-ink); }
.sbc-promo-ccard .cmedia .ctag {
  position: absolute; left: 0; top: 0;
  font-family: var(--sbc-font-mono);
  font-size: 0.62rem; letter-spacing: 0.14em;
  color: #F4F2EC; background: var(--sbc-ink);
  padding: 5px 9px;
}
.sbc-promo-ccard .cbd { padding: 16px clamp(14px, 1.8vw, 20px) 20px; display: flex; flex-direction: column; gap: 6px; }
.sbc-promo-ccard .cbd b { font-family: var(--sbc-font-display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--sbc-ink); font-size: 1rem; }
.sbc-promo-ccard .cwhy { font-family: var(--sbc-font-mono); font-size: 0.66rem; color: var(--sbc-stone); letter-spacing: 0.04em; }
.sbc-promo-ccard .cprice { font-family: var(--sbc-font-mono); font-size: 0.92rem; color: var(--sbc-ink); margin-top: 4px; }
.sbc-promo-ccard .cprice del { color: var(--sbc-stone); margin-right: 8px; }
.sbc-promo-ccard .cstock { font-family: var(--sbc-font-mono); font-size: 0.66rem; color: var(--sbc-olive-ink); letter-spacing: 0.06em; }

@media (max-width: 860px) {
  .sbc-promo-bundles, .sbc-promo-clear { grid-template-columns: 1fr; }
  .sbc-promo-student { grid-template-columns: 1fr; }
}

/* ============================================================================
   Youth Program page (#321 — Elementor page, section ids sbcpromo<name>).
   Reuses the wrapper / opener / eyebrow / .sbc-promo-student rules above; adds
   the three pillars, the join steps, and the charcoal "club" CTA band.
   ============================================================================ */

.sbc-yp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.sbc-yp-pillar { background: var(--sbc-card); border: 1px solid var(--sbc-line); padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.sbc-yp-pillar .k { font-family: var(--sbc-font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sbc-olive-ink); }
.sbc-yp-pillar h3 { font-family: var(--sbc-font-display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.03em; color: var(--sbc-ink); margin: 0; }
.sbc-yp-pillar p { margin: 0; font-size: 0.92rem; line-height: 1.65; }

.sbc-yp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.sbc-yp-step { border-top: 2px solid var(--sbc-olive); padding-top: 16px; }
.sbc-yp-step .n { font-family: var(--sbc-font-display); font-weight: 700; font-size: 1.6rem; color: var(--sbc-olive); line-height: 1; }
.sbc-yp-step p { margin: 8px 0 0; font-size: 0.94rem; line-height: 1.6; }

/* charcoal "club" CTA band — section background comes from the builder ($dark) */
.elementor-element-sbcpromoclub h2.elementor-heading-title { color: var(--sbc-dark-fg) !important; max-width: 24ch; }
.elementor-element-sbcpromoclub .elementor-widget-text-editor p { color: #B7B4A8; max-width: 56ch; }
.elementor-element-sbcpromoclub .elementor-button {
  background: transparent;
  border: 1px solid rgba(239, 237, 227, 0.5);
  color: var(--sbc-dark-fg);
}
.elementor-element-sbcpromoclub .elementor-button:hover { background: var(--sbc-olive); border-color: var(--sbc-olive); color: #F4F2EC; }

@media (max-width: 860px) {
  .sbc-yp-pillars, .sbc-yp-steps { grid-template-columns: 1fr; }
}

/* ============================================================================
   Homepage — Introduction Pack slider + Promo/Articles band (eb-homepage.php).
   ============================================================================ */

.elementor-element-sbchomeintropack .elementor-widget-text-editor p { max-width: 62ch; }
.elementor-element-sbchomeintropack h2.elementor-heading-title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-top: 6px; }

/* ---- pack slider ---- */
.sbc-pack-slider { --sbc-pack-gap: clamp(14px, 2vw, 24px); margin-top: clamp(20px, 3vw, 30px); }
.sbc-pack-viewport { overflow: hidden; }
.sbc-pack-track { display: flex; gap: var(--sbc-pack-gap); transition: transform 0.32s ease; will-change: transform; }
.sbc-pack {
  flex: 0 0 calc((100% - 2 * var(--sbc-pack-gap)) / 3);
  background: var(--sbc-card);
  border: 1px solid var(--sbc-line);
  display: flex;
  flex-direction: column;
}
.sbc-pack .pname {
  font-family: var(--sbc-font-display);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--sbc-ink); font-size: 1.08rem;
  padding: 15px clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid var(--sbc-line);
}
.sbc-pack .rows { display: flex; flex-direction: column; padding: 2px clamp(14px, 1.8vw, 20px); flex: 1 1 auto; }
.sbc-pack .brow { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.sbc-pack .brow + .brow { border-top: 1px solid var(--sbc-line-soft); }
.sbc-pack .bm {
  width: 38px; height: 38px; flex: 0 0 auto;
  background: var(--sbc-olive-tint);
  display: grid; place-items: center;
  font-family: var(--sbc-font-display); font-weight: 700; font-size: 0.82rem;
  color: var(--sbc-olive-ink); border: 1px solid var(--sbc-line);
}
.sbc-pack .bt { display: flex; flex-direction: column; }
.sbc-pack .bt b { font-family: var(--sbc-font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.9rem; color: var(--sbc-ink); }
.sbc-pack .bt small { font-family: var(--sbc-font-mono); font-size: 0.64rem; color: var(--sbc-stone); letter-spacing: 0.04em; }
.sbc-pack .pfoot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--sbc-line);
  background: var(--sbc-card-warm);
}
.sbc-pack .pprice { font-family: var(--sbc-font-display); font-weight: 700; font-size: 1.25rem; color: var(--sbc-ink); display: flex; align-items: baseline; gap: 8px; }
.sbc-pack .pprice del { font-family: var(--sbc-font-mono); font-weight: 400; font-size: 0.8rem; color: var(--sbc-stone); }
.sbc-pack .pship { font-family: var(--sbc-font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: #F4F2EC; background: var(--sbc-olive); padding: 4px 8px; }

.sbc-pack-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.sbc-pack-dots { display: flex; gap: 8px; }
.sbc-pack-dots button { width: 9px; height: 9px; padding: 0; border: 0; background: var(--sbc-line); cursor: pointer; }
.sbc-pack-dots button[aria-current="true"] { background: var(--sbc-olive); }
.sbc-pack-arrows { display: flex; gap: 8px; }
.sbc-pack-arrows button {
  width: 34px; height: 34px;
  border: 1px solid var(--sbc-line);
  background: transparent;
  color: var(--sbc-ink);
  font-family: var(--sbc-font-mono);
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 0.15s, color 0.15s;
}
.sbc-pack-arrows button:hover:not(:disabled) { border-color: var(--sbc-olive); color: var(--sbc-olive-ink); }
.sbc-pack-arrows button:disabled { opacity: 0.32; cursor: default; }
.sbc-pack-slider .sbc-promo-note { margin-top: 12px; }

@media (max-width: 900px) { .sbc-pack { flex-basis: calc((100% - var(--sbc-pack-gap)) / 2); } }
@media (max-width: 560px) { .sbc-pack { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .sbc-pack-track { transition: none; } }

/* ---- promo + articles band ------------------------------------------------
   Two equal halves, stretched to the same height. Each half opens with a
   matched ".sbc-splithead" strip (same height both sides), so the promo frame
   and the first article photo start on the same line; the frame then fills the
   left half and the 3 articles divide the right half, so the frame bottom and
   the last article photo bottom also line up. */
.elementor-element-sbchomepromo > .elementor-container { align-items: stretch; }
.elementor-element-sbchomepromo .elementor-widget-wrap.elementor-element-populated {
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
}
.elementor-element-sbchomepromo .elementor-widget { margin-bottom: 0 !important; }
.elementor-element-sbcpromoLframe,
.elementor-element-sbcpromoRlist { flex: 1 1 auto; display: flex; }
.elementor-element-sbcpromoLframe > .elementor-widget-container,
.elementor-element-sbcpromoRlist > .elementor-widget-container { flex: 1 1 auto; display: flex; width: 100%; }
.elementor-element-sbcpromoRlist .elementor-shortcode { flex: 1 1 auto; display: flex; width: 100%; }

.sbc-splithead {
  min-height: 34px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 16px;
}
.sbc-splithead--row { justify-content: space-between; align-items: baseline; gap: 12px; }
.sbc-splithead h3 {
  font-family: var(--sbc-font-display); text-transform: uppercase; font-weight: 600;
  font-size: 1.1rem; letter-spacing: 0.04em; color: var(--sbc-ink); margin: 0;
}
.sbc-splithead__more {
  font-family: var(--sbc-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--sbc-olive-ink); white-space: nowrap;
}
.sbc-splithead__more::after { content: " \2192"; }

.sbc-promo-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 300px;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,0.03) 22px 44px),
    var(--sbc-olive-tint);
  border: 1px solid var(--sbc-line);
  display: grid; place-items: center;
  font-family: var(--sbc-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sbc-olive-ink); text-align: center; padding: 24px;
}

.sbc-articles { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.sbc-article {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--sbc-line);
  text-decoration: none;
  align-items: center;
}
.sbc-article:first-child { border-top: 0; padding-top: 0; }
.sbc-article:last-child { padding-bottom: 0; }
.sbc-article__thumb { aspect-ratio: 1 / 1; border: 1px solid var(--sbc-line); overflow: hidden; background: var(--sbc-olive-tint); }
.sbc-article__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbc-article__ph { display: block; width: 100%; height: 100%; }
.sbc-article__txt { display: flex; flex-direction: column; gap: 6px; }
.sbc-article__meta { font-family: var(--sbc-font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sbc-stone); }
.sbc-article__title { font-family: var(--sbc-font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--sbc-ink); font-size: 1rem; line-height: 1.12; }
.sbc-article:hover .sbc-article__title { color: var(--sbc-olive-ink); }
.sbc-article-all {
  display: inline-block; margin-top: 14px;
  font-family: var(--sbc-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--sbc-olive-ink);
}
.sbc-article-all::after { content: " \2192"; }

@media (max-width: 767px) {
  .elementor-element-sbchomepromo .elementor-column { width: 100% !important; }
  .elementor-element-sbcpromoLframe, .elementor-element-sbcpromoRlist { display: block; }
  .sbc-splithead { min-height: 0; }
  .sbc-promo-frame { flex: none; aspect-ratio: 16 / 11; min-height: 0; margin-bottom: 28px; }
  .sbc-articles { display: block; }
  .sbc-article:first-child { border-top: 1px solid var(--sbc-line); padding-top: 14px; }
}

/* ============================================================================
   Blog / Artikels — archive + single post (Hello Elementor defaults + finish).
   ============================================================================ */
.blog .site-main,
.single-post .site-main,
.archive.category .site-main { padding-block: clamp(36px, 6vw, 72px); }
.single-post .entry-content,
.blog .hentry .entry-content { max-width: 720px; }
.single-post .entry-content > * + *,
.blog .hentry .entry-content > * + * { margin-top: 1.1em; }

/* blog archive + single: SBC title colour (kill the Elementor-kit link accent),
   readable width */
.blog .hentry .entry-title a,
.archive .hentry .entry-title a,
.search .hentry .entry-title a { color: var(--sbc-ink); text-decoration: none; }
.blog .hentry .entry-title a:hover,
.archive .hentry .entry-title a:hover { color: var(--sbc-olive-ink); }
.single-post .entry-title,
.blog .page-header .page-title,
.archive .page-header .page-title { color: var(--sbc-ink); }
.blog .hentry,
.archive .hentry,
.single-post .hentry { max-width: 760px; }
.blog .hentry .post-thumbnail img,
.archive .hentry .post-thumbnail img,
.single-post .post-thumbnail img { border: 1px solid var(--sbc-line); }

/* ============================================================================
   Range page (Elementor page, section ids sbcrng<name>). The six boilie
   recipes as a guided storyline, with a cooler cold-months band. Each entry
   has a triangular photo slot in its bottom-right corner — drop an <img> in
   .sbc-rng-photo and it inherits the clip.
   ============================================================================ */
main.site-main:has([class*="elementor-element-sbcrng"]) { max-width: none !important; padding-inline: 0 !important; }
.elementor-section[class*="elementor-element-sbcrng"] > .elementor-container { padding-inline: clamp(18px, 5vw, 44px); }
.elementor-section[class*="elementor-element-sbcrng"] .elementor-widget-wrap { padding: 0 !important; }
[class*="elementor-element-sbcrng"] .elementor-widget-text-editor p { line-height: 1.7; }
[class*="elementor-element-sbcrng"] .sbc-eyebrow-line { margin-bottom: 6px; }
.elementor-element-sbcrngsix, .elementor-element-sbcrngchoose { border-top: 1px solid var(--sbc-line-soft); }

/* opener (charcoal from the builder) */
.elementor-element-sbcrngopener .elementor-heading-title { color: var(--sbc-dark-fg) !important; font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 700; letter-spacing: 0.02em; margin-top: 6px; }
.elementor-element-sbcrngopener .sbc-eyebrow-line { color: var(--sbc-dark-olive); }
.elementor-element-sbcrngopener .elementor-widget-text-editor p { color: var(--sbc-dark-fg) !important; }
.elementor-element-sbcrngopener .sbc-rng-lead { max-width: 54ch; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.elementor-element-sbcrngopener .sbc-rng-flavours { font-family: var(--sbc-font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--sbc-dark-soft) !important; margin-top: 4px; }

/* band heads */
[class*="elementor-element-sbcrng"] h2.elementor-heading-title { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin-top: 6px; }
[class*="elementor-element-sbcrng"] .sbc-rng-head-intro { max-width: 64ch; }

/* the six — numbered narrative */
.sbc-rng-list { display: grid; }
.sbc-rng-item {
  position: relative;
  display: grid; grid-template-columns: minmax(200px, 280px) 1fr;
  gap: clamp(20px, 4vw, 52px);
  padding-block: clamp(26px, 4vw, 40px);
  padding-bottom: clamp(60px, 8vw, 96px);
  border-top: 1px solid var(--sbc-line);
}
.sbc-rng-item:first-child { border-top: 0; padding-top: 4px; }
.sbc-rng-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sbc-rng-num { font-family: var(--sbc-font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 0.8; color: var(--sbc-olive); }
.sbc-rng-mark h3 { font-family: var(--sbc-font-display); text-transform: uppercase; font-weight: 600; font-size: 1.5rem; letter-spacing: 0.012em; color: var(--sbc-ink); margin: 4px 0 0; }
.sbc-rng-tag { font-family: var(--sbc-font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sbc-olive-ink); border: 1px solid var(--sbc-line); padding: 4px 8px; }
.sbc-rng-season { font-family: var(--sbc-font-mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--sbc-stone); }
.sbc-rng-season b { color: var(--sbc-olive-ink); font-weight: 500; }
.sbc-rng-price { font-family: var(--sbc-font-mono); font-size: 0.72rem; color: var(--sbc-ink-soft); }
.sbc-rng-one { font-family: var(--sbc-font-display); text-transform: none; font-weight: 500; font-size: clamp(1.05rem, 1.8vw, 1.28rem); color: var(--sbc-ink); line-height: 1.28; letter-spacing: 0.005em; }
.sbc-rng-body p { font-size: 0.95rem; line-height: 1.7; max-width: 62ch; }
.sbc-rng-body p + p { margin-top: 12px; }
.sbc-rng-data { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 16px 0 0; padding: 0; list-style: none; font-family: var(--sbc-font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--sbc-ink-soft); }
.sbc-rng-data li { padding: 0 12px; border-left: 1px solid var(--sbc-line); }
.sbc-rng-data li:first-child { padding-left: 0; border-left: 0; }

/* triangular photo slot, bottom-right of each block */
.sbc-rng-photo {
  position: absolute; right: 0; bottom: 0;
  width: clamp(120px, 17vw, 190px); aspect-ratio: 5 / 4;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(0,0,0,0.05) 12px 24px),
    var(--sbc-olive-tint);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 9px 7px 0;
}
.sbc-rng-photo span { font-family: var(--sbc-font-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sbc-olive-ink); opacity: 0.65; }
.sbc-rng-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 72%; }
/* with a real photo: white behind the cut-out, zoomed toward the bottom-right
   (the part of the triangle that shows), flush to the block corner, with an
   outline tracing the whole triangle (incl. the hypotenuse — drop-shadow, not
   border): olive on the light entries, cold-blue on the winter cards. */
.sbc-rng-photo--img,
.sbc-rng-coldcard .sbc-rng-photo--img { background: #FFFFFF; padding: 0; overflow: hidden; right: 0; bottom: 0; }
.sbc-rng-photo--img img { transform: scale(1.5); transform-origin: 72% 72%; }
/* Per-photo crop tuning (each Photoroom cut-out has the pile in a different
   spot, so a single object-position leaves an empty corner). Values chosen so
   the pile fills the bottom-right of the triangle the same way in every place
   the flavour appears (list entry + winter card). */
.sbc-rng-photo--img img[alt="Spicy Peach"] {
  object-position: 52% 52%;
  transform: scale(1.35);
  transform-origin: 72% 92%;
}
.sbc-rng-photo--img img[alt="Monsterfish"] {
  object-position: 50% 40%;
  transform: scale(1.3);
  transform-origin: 70% 90%;
}
.sbc-rng-photo--img {
  filter:
    drop-shadow( 1.4px 0 0 var(--sbc-olive)) drop-shadow(-1.4px 0 0 var(--sbc-olive))
    drop-shadow(0  1.4px 0 var(--sbc-olive)) drop-shadow(0 -1.4px 0 var(--sbc-olive));
}
.sbc-rng-coldcard .sbc-rng-photo--img {
  filter:
    drop-shadow( 1.4px 0 0 var(--sbc-cold-accent)) drop-shadow(-1.4px 0 0 var(--sbc-cold-accent))
    drop-shadow(0  1.4px 0 var(--sbc-cold-accent)) drop-shadow(0 -1.4px 0 var(--sbc-cold-accent));
}

/* the six on WHITE — the "Smaak voor smaak / De zes…" heading stays on the
   warm paper (section sbcrngsix); only the entries themselves sit on white */
.elementor-element-sbcrngsixw { background: #FFFFFF !important; border-block: 1px solid var(--sbc-line); }

/* cold-months band — dark, COLD-BLUE accents, drifting snow. The dark stays
   (owner asked to keep it); blue reads as winter where olive did not. */
:root { --sbc-cold-accent: #86AFC1; --sbc-cold-line: rgba(134,175,193,0.30); }
.elementor-element-sbcrngcold {
  position: relative;
  overflow: hidden;
  /* solid, no gradient — a gradient background on this box (overflow:hidden +
     many GPU-promoted snow flakes) rendered as transparent/white on iOS */
  background-color: #1E2529 !important;
  background-image: none !important;
}
.elementor-element-sbcrngcold > .elementor-container { position: relative; z-index: 2; }
.elementor-element-sbcrngcold .elementor-heading-title { color: var(--sbc-dark-fg) !important; }
.elementor-element-sbcrngcold .elementor-widget-text-editor p { color: var(--sbc-dark-soft); }
.elementor-element-sbcrngcold .elementor-widget-text-editor p.sbc-eyebrow-line { color: var(--sbc-cold-accent); }
.sbc-rng-cold { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 24px); }
.sbc-rng-coldcard { position: relative; background: rgba(255,255,255,0.045); border: 1px solid var(--sbc-cold-line); border-top: 2px solid var(--sbc-cold-accent); padding: clamp(22px, 3vw, 30px); padding-bottom: clamp(56px, 7vw, 80px); }
.sbc-rng-coldcard .sbc-rng-tag { color: var(--sbc-cold-accent); border-color: var(--sbc-cold-line); }
.sbc-rng-coldcard h3 { font-family: var(--sbc-font-display); text-transform: uppercase; font-weight: 600; font-size: 1.35rem; letter-spacing: 0.012em; color: var(--sbc-dark-fg); margin: 12px 0 10px; }
.sbc-rng-coldcard p { font-size: 0.93rem; line-height: 1.65; color: var(--sbc-dark-soft); }
.sbc-rng-cdata { margin-top: 14px; font-family: var(--sbc-font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--sbc-cold-accent); }
/* identical to the light-section triangles (same width clamp, same crop);
   only nudged 1px onto the card's outer corner past its border, and the
   outline is blue (set further up) instead of olive */
.sbc-rng-coldcard .sbc-rng-photo { right: -1px; bottom: -1px; }
.sbc-rng-coldcard .sbc-rng-photo span { color: var(--sbc-cold-accent); opacity: 0.8; }
.sbc-rng-coldtip { margin-top: clamp(20px, 3vw, 28px); padding: clamp(16px, 2.2vw, 22px); border: 1px dashed var(--sbc-cold-line); font-size: 0.9rem; line-height: 1.6; color: var(--sbc-dark-soft); }
.sbc-rng-coldtip strong { font-family: var(--sbc-font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sbc-cold-accent); }

/* snow layer (injected by range.js; absent when prefers-reduced-motion) */
.sbc-rng-snow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sbc-rng-snow i {
  position: absolute; top: -14px; display: block;
  background: #EAF2F6; border-radius: 50%;
  opacity: 0; will-change: transform;
  animation: sbcRngSnow linear infinite;
}
@keyframes sbcRngSnow {
  0%   { transform: translate3d(0,0,0); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translate3d(var(--dx,24px), var(--fall,620px), 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sbc-rng-snow { display: none; } }

/* how to choose */
.sbc-rng-choose { margin: 0; display: grid; }
.sbc-rng-choose > div { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vw, 40px); padding-block: 16px; border-top: 1px solid var(--sbc-line); align-items: baseline; }
.sbc-rng-choose > div:first-child { border-top: 0; }
.sbc-rng-choose dt { font-family: var(--sbc-font-body); font-weight: 500; color: var(--sbc-ink); font-size: 0.96rem; }
.sbc-rng-choose dd { margin: 0; font-family: var(--sbc-font-display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--sbc-olive-ink); font-size: 1.02rem; }

/* cta (charcoal from the builder) */
.elementor-element-sbcrngcta .elementor-heading-title { color: var(--sbc-dark-fg) !important; }
.elementor-element-sbcrngcta .elementor-widget-text-editor p { color: var(--sbc-dark-soft) !important; max-width: 52ch; }
.elementor-element-sbcrngcta .elementor-button { background: transparent; border: 1px solid rgba(239,237,227,0.5); color: var(--sbc-dark-fg); }
.elementor-element-sbcrngcta .elementor-button:hover { background: var(--sbc-olive); border-color: var(--sbc-olive); color: #F4F2EC; }

@media (max-width: 820px) {
  .sbc-rng-item { grid-template-columns: 1fr; gap: 12px; padding-bottom: 96px; }
  .sbc-rng-mark { flex-flow: row wrap; align-items: center; gap: 10px 12px; }
  .sbc-rng-num { font-size: 2rem; }
  .sbc-rng-photo { width: 118px; }
  .sbc-rng-cold { grid-template-columns: 1fr; }
  .sbc-rng-choose > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================================
   More white breathing room (the warm paper ground was starting to dominate).
   Give the content-heavy zones a plain white surface, keep one warm band as a
   deliberate contrast.
   ============================================================================ */
/* Homepage */
.elementor-element-sbcrange,
.elementor-element-sbcquick { background-color: #FFFFFF !important; border-block: 1px solid var(--sbc-line); }

/* Youth Program */
.elementor-element-sbcpromocore,
.elementor-element-sbcpromojoin { background-color: #FFFFFF !important; border-block: 1px solid var(--sbc-line); }
.elementor-element-sbcpromoincludes { background-color: var(--sbc-paper) !important; }

/* About — team + history band colours are set in the About-page block above */

/* ============================================================================
   Dark bands — enforce the charcoal here too, with a SOLID colour, so a band
   that is dark on desktop is never rendered light on mobile (iOS Safari was
   dropping some Elementor/gradient section backgrounds, stranding light text
   on a light surface). Solid colour only — no gradients on section bg.
   ============================================================================ */
.elementor-element-sbcrngopener,
.elementor-element-sbcrngcta,
.elementor-element-sbcpromoopener,
.elementor-element-sbcpromoclub {
  background-color: var(--sbc-dark-bg) !important;
  background-image: none !important;
}
.elementor-element-sbchero { background-color: var(--sbc-dark-bg) !important; }
.elementor-element-sbcabopener { background-color: var(--sbc-dark-bg) !important; }