/*
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.7.0
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 */
  --sbc-red:        #A13A2E;   /* muted brick red — out-of-stock / unavailable */

  /* 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 {
  /* was width:auto — some other rule (WooCommerce core's own
     ul.products.columns-3 li.product width, at equal specificity) still won
     the cascade even with a plain 100% here, leaving the card ~100px wide
     with a big dead gap beside it in a 328px grid track (found + confirmed
     live via getComputedStyle on the boilies category page, 2026-09-26,
     both before AND after a non-!important 100% attempt). !important forces
     the fill. */
  width: 100% !important;
  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;
}
/* Subtle "volume pricing applies" flag across the top of the photo frame,
   for tier-priced products (currently the Boilie range) — owner request
   2026-09-28. li.product is already position:relative via WooCommerce core. */
.sbc-tier-flag {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--sbc-olive) 88%, transparent);
  color: #F4F2EC;
  font-family: var(--sbc-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 6px;
  pointer-events: none;
}
.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; }

/* Bait-family nav (above the shop/category grid, sbc-core's render_family_nav).
   Originally a single row of fixed-160px photo+name tiles (2026-09-26 fix,
   see below) -- owner request 2026-09-28 dropped the photo (every family
   showed the same generic placeholder anyway) and asked for the names shown
   "naast elkaar" (side by side). The fixed 160px basis + forced 50% split on
   mobile is also what caused the "deeltje gebroken" report: with the photo's
   fixed width gone from the box, some items' text no longer fit their forced
   half-width share and got pushed to their own full-width row while others
   paired up fine, an inconsistent-looking wrap. Replaced with plain
   auto-width pills that wrap naturally at any viewport -- no forced
   basis/split needed, so this class of bug can't recur.
   (Earlier note, still relevant: this nav previously had no layout CSS at
   all, letting native <img width="500"> photos stack the 6 flavours into a
   ~1100px-tall block that pushed the product grid far down the page.) */
.sbc-familynav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.6rem 0 2rem;
}
.sbc-family {
  flex: 0 0 auto;
  padding: 10px 18px;
  background: var(--sbc-card);
  border: 1px solid var(--sbc-line);
  text-decoration: none;
  color: inherit;
}
.sbc-family:hover { background: var(--sbc-card-warm); border-color: var(--sbc-olive); }
.sbc-family__name {
  font-family: var(--sbc-font-display);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--sbc-ink);
}

/* ---------------------------------------------------------------------------
   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); }
/* Background Slideshow has one global position control (currently "center
   right", tuned for wide desktop crops) with no separate mobile override in
   Elementor's own UI — owner report 2026-09-28: the product jar in one of
   the 3 slides was being cropped out entirely on narrow viewports. Re-anchor
   just for mobile; checked all 3 slideshow images at 375px, this keeps the
   subject in frame on all of them without touching the desktop framing. */
@media (max-width: 767px) {
  .elementor-element-sbchero .elementor-background-slideshow__slide__image { background-position: center 65% !important; }
}

/* Same issue, different section: the "Snel naar" background photo (a
   kingfisher, subject sitting mid-frame) is a classic Elementor background
   with cover sizing — on mobile the full-width category grid card sits
   right over the vertical middle of the image, and since the source is much
   wider than the mobile container, cover-fit leaves zero vertical slack, so
   no position value alone can move the bird above or below that card. Zoom
   in (background-size beyond cover) to create that slack, then re-anchor so
   the bird lands in the strip above the grid instead of hidden behind it. */
@media (max-width: 767px) {
  .elementor-element-sbcquick { background-size: 281% auto !important; background-position: 47% 88% !important; }
}

/* --- 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. Re-tuned 2026-09-16 after the owner edited the KPI wording
   (different line-wraps) and after the sbcstoryrow gutter got zeroed for
   the button-alignment fix above — both changed how much text wraps in
   the card, so the padding needed a fresh pass, not just re-applying the
   old number: 8px card padding closes the gap back down to ~12-20px. */
.elementor-element-sbcwhycard > .elementor-widget-wrap { padding: 8px !important; }
.elementor-element-sbcwhyrow1,
.elementor-element-sbcwhyrow2,
.elementor-element-sbcwhyrow3 { margin: 0; padding: 0; }
/* the grid used to have its OWN frame on top of the card's outer border —
   a frame-within-a-frame the owner didn't like (2026-09-16). Dropped: the
   card's own border is enough; only the dividers BETWEEN cells remain. */
/* 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-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. */
/* CTA button re-aligned under the TEXT column only, not the full width
   (owner correction 2026-09-16 — "centraal onder het blok 'Bij SBC...'",
   reversing the earlier full-width centring). Rather than duplicate colL's
   fragile width formula, the shared wrapper becomes a grid using the SAME
   55/45 ratio + gap as the inner row; the row spans both tracks unchanged,
   the button sits in track 1 only — verified live to land on colL's exact
   pixel edges at every width tested. That only works while colL/colR sit
   side by side, so it's undone below the column-stacking breakpoint. */
.elementor-element-sbcstorycol > .elementor-widget-wrap {
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 55fr 45fr !important;
  gap: clamp(28px, 4vw, 56px) !important;
}
.elementor-element-sbcstoryrow { grid-column: 1 / 3; }
.elementor-element-sbcstoryrow > .elementor-container { padding: 0 !important; }
.elementor-element-sbcwhybtn { grid-column: 1 / 2; justify-self: center; }
@media (max-width: 1024px) {
  .elementor-element-sbcstorycol > .elementor-widget-wrap { display: block !important; }
  .elementor-element-sbcwhybtn { justify-self: unset; }
}
.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://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;
}

/* WooCommerce's own notice colours ("X verwijderd" = green, "winkelwagen is
   leeg" = blue) didn't match anything else on the site — unify both to the
   same olive as the announcement bar above (owner request 2026-09-26).
   .woocommerce-error (red) is left alone; a real error should still read
   as one. */
.woocommerce-message,
.woocommerce-info { border-top-color: var(--sbc-olive); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--sbc-olive); }

/* ============================================================================
   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; }
/* Boilies/Hookbaits can chain two refinement rows (Bait range, then
   Diameter) — shop.js reuses this same row style for each; separate them
   with a hairline so the two chip lists don't visually merge. */
.sbc-shopbar__row--secondary + .sbc-shopbar__row--secondary { border-top: 1px solid var(--sbc-line-soft); }
@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; }

/* Out-of-stock variant: red bullet instead of olive, and a slightly smaller,
   non-wrapping claim so "Momenteel uitverkocht" always stays on one line. */
.sbc-delivery--oos .sbc-delivery__claim { font-size: 0.72rem; white-space: nowrap; }
.sbc-delivery--oos .sbc-delivery__claim::before { background: var(--sbc-red); }

.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);
  overflow: hidden;
}
/* owner correction 2026-09-16: the product photo goes IN the existing
   38x38 badge (same format kept), not as a banner above the card — see
   add-pack-photos.php. Same photo in all 3 rows of a pack (one per
   flavour, no separate boilie/liquid/hookbait shots exist). */
.sbc-pack .bm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.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; }
/* Boilies diameter / pop-up flavour pickers (owner request 2026-09-27:
   4-item pack — Boilies+Liquid+Dip+Exclusive Range pop-up, diameter and
   pop-up chosen here before "Toevoegen aan winkelmand" — see home.js). */
.sbc-pack .bt select {
  font-family: var(--sbc-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--sbc-ink-soft);
  background: var(--sbc-card);
  border: 1px solid var(--sbc-line);
  padding: 2px 4px;
  cursor: pointer;
}
.sbc-pack .bt select:hover,
.sbc-pack .bt select:focus-visible { border-color: var(--sbc-olive); outline: none; }
/* .pfoot used to be JUST the price + a "Gratis verzending" pill, with
   nothing to actually buy the pack (owner request 2026-09-26: move the
   shipping pill, add a real "Toevoegen aan winkelmand" button that adds the
   3 component products at the pack's own total — see
   add-pack-cart-button.php / sbc-core.php handle_add_session_pack()). */
.sbc-pack .pfoot {
  display: flex; flex-direction: column; gap: 10px;
  padding: 13px clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--sbc-line);
  background: var(--sbc-card-warm);
}
.sbc-pack .pfoot-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.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.6rem; letter-spacing: 0.05em; color: var(--sbc-stone); }
.sbc-pack-btn {
  display: block;
  text-align: center;
  background: var(--sbc-olive);
  color: #F4F2EC !important;
  border: 1px solid var(--sbc-olive);
  font-family: var(--sbc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 14px;
}
.sbc-pack-btn:hover { background: var(--sbc-olive-ink); border-color: var(--sbc-olive-ink); }

/* cart: a Sessie Pack line's quantity is fixed at 1 (owner request
   2026-09-26 — editing one line alone would break the pack's shared
   price), shown as plain text instead of the +/- stepper. */
.sbc-spack-qty { display: inline-block; min-width: 32px; text-align: center; font-family: var(--sbc-font-mono); color: var(--sbc-ink-soft); }

/* Owner request 2026-09-28: having both a dot navigator and prev/next arrows
   read as two competing navigators -- arrows removed (home.js no longer
   builds them), dots are the sole navigator and now centered instead of
   sitting flush left. */
.sbc-pack-nav { display: flex; align-items: center; justify-content: center; 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-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;
}

/* 1 large featured article (most recent) + a stacked column of small ones —
   owner request 2026-09-28, replacing the previous uniform row list. */
.sbc-articles { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
.sbc-article { display: block; text-decoration: none; }
.sbc-article__thumb { 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); line-height: 1.12; }
.sbc-article:hover .sbc-article__title { color: var(--sbc-olive-ink); }

.sbc-article--featured { display: flex; flex-direction: column; gap: 16px; }
.sbc-article--featured .sbc-article__thumb { aspect-ratio: 16 / 11; }
.sbc-article--featured .sbc-article__title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

/* Height is set inline by home.js to match the featured photo's own
   rendered height exactly (top+bottom-aligned with the photo, not the
   photo+title block) — space-between then spreads the 3 small items evenly
   across that span. */
.sbc-articles__side { display: flex; flex-direction: column; justify-content: space-between; }
.sbc-article--small { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; padding-top: 16px; border-top: 1px solid var(--sbc-line); }
.sbc-article--small:first-child { padding-top: 0; border-top: 0; }
.sbc-article--small .sbc-article__thumb { aspect-ratio: 1 / 1; }
.sbc-article--small .sbc-article__title { font-size: 0.86rem; }

.sbc-article-all {
  display: inline-block; margin-top: 16px;
  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; }
  .sbc-articles { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================================
   Artikels archive + single post — Elementor Theme Builder templates
   (owner request 2026-09-28: rebuild both in Elementor, matching the
   homepage Articles treatment). Reuses .sbc-article/.sbc-article__* from
   above for the featured+small block; adds the equal-card grid for the
   rest of the posts, pagination, and the single-post header/prose.
   ============================================================================ */
.sbc-articles-empty { color: var(--sbc-stone); font-family: var(--sbc-font-mono); }

/* Flexbox, not a fixed-column grid: a WooCommerce-style 3-column grid
   reserves 3 tracks regardless of how many posts are actually left over,
   which with few articles (site is brand new) left 1-2 phantom empty
   column-widths of blank space before the footer — reported by the owner
   as "rommelige lay-out". flex-wrap only ever takes up as much width as
   there are real cards, growing to 3-per-row once there are enough. */
.sbc-articles-grid { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 32px); }
.sbc-articles + .sbc-articles-grid { margin-top: clamp(40px, 5vw, 64px); }
.sbc-article--grid { flex: 0 1 320px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.sbc-article--grid .sbc-article__thumb { aspect-ratio: 4 / 3; }
.sbc-article--grid .sbc-article__title { font-size: 1rem; }
@media (max-width: 560px) { .sbc-article--grid { flex-basis: 100%; } }

.sbc-articles-pagination { margin-top: clamp(40px, 5vw, 56px); display: flex; justify-content: center; }
.sbc-articles-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.sbc-articles-pagination .page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--sbc-line);
  font-family: var(--sbc-font-mono); font-size: 0.76rem; color: var(--sbc-ink-soft);
  text-decoration: none;
}
.sbc-articles-pagination a.page-numbers:hover { border-color: var(--sbc-olive); color: var(--sbc-olive-ink); }
.sbc-articles-pagination .page-numbers.current { background: var(--sbc-olive); border-color: var(--sbc-olive); color: #F4F2EC; }
.sbc-articles-pagination .page-numbers.dots { border: 0; }

/* Archive page header (Elementor "Artikels" template opener). */
.elementor-element-sbcartopener { padding-block: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 36px); }
.elementor-element-sbcartopener h1 { margin-top: 6px; }

/* Single post template. */
.elementor-element-sbcpostopener { padding-block: clamp(32px, 5vw, 48px) 0; }
.sbc-post-back {
  display: inline-block; margin-bottom: 18px;
  font-family: var(--sbc-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--sbc-olive-ink);
}
.sbc-post-back:hover { color: var(--sbc-ink); }
.sbc-post-meta {
  font-family: var(--sbc-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sbc-stone); margin: 0 0 10px;
}
/* Owner report 2026-09-28 (screenshot, repeated after the body-only fix
   below still left the photo visibly narrower than "Meer artikels"): the
   whole article -- title/meta, photo, body -- should be one consistent
   1160px column, same as "Meer artikels". Was 760px for opener+image only
   (an assumption of mine that a narrower "reading column" for the
   header/photo was wanted -- it wasn't; matching Meer artikels throughout
   is what was actually asked). */
.elementor-element-sbcpostopenercol,
.elementor-element-sbcpostimgcol { max-width: 1160px; margin-inline: auto; }
.elementor-element-sbcpostimg { padding-block: clamp(24px, 4vw, 36px); }
.elementor-element-sbcpostimgcol img { border: 1px solid var(--sbc-line); width: 100%; height: auto; }
.elementor-element-sbcpostbody { padding-block: 0 clamp(40px, 6vw, 64px); }
.elementor-element-sbcpostbodycol { max-width: 1160px; margin-inline: auto; }
/* .sbc-prose itself still carries the global 760px reading-width cap (shared
   with About/Voorwaarden/Contact/FAQ/etc, line ~1492) -- widening the column
   above wasn't enough on its own since .sbc-prose centers itself inside that
   column at its own max-width. Override it back up to 1160px, scoped to this
   one column only, so the other .sbc-prose pages are untouched. */
.elementor-element-sbcpostbodycol .sbc-prose { max-width: 1160px; }
.elementor-element-sbcpostmore { padding-block: clamp(32px, 5vw, 48px) clamp(48px, 7vw, 72px); border-top: 1px solid var(--sbc-line); }
.elementor-element-sbcpostmorecol { max-width: 1160px; margin-inline: auto; }
.sbc-more-articles__head {
  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 0 20px;
}
/* Owner report 2026-09-28: with exactly 3 fixed-width (320px) cards and the
   column now 1160px wide (note #147), the leftover slack all collected on
   the right (flex's default flex-start) instead of being spread evenly.
   "Meer artikels" always renders exactly 3 cards (count="3", see
   sbc_more_articles shortcode), so space-between is safe here -- unlike the
   shared .sbc-articles-grid class used on the archive page, where a partial
   last row would stretch oddly under space-between, this is scoped to only
   the "Meer artikels" instance. */
.sbc-more-articles .sbc-articles-grid { justify-content: space-between; }

/* ============================================================================
   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; }
/* That max-width (no auto-centering, written for the old default single.php
   template's .hentry article wrapper) also lands on the NEW Elementor
   Theme Builder single-post template's own outer wrapper div, because
   WordPress's post_class() adds "hentry" there too — clamping the whole
   template to 760px flush against the left edge instead of centered
   (owner report 2026-09-28: "staat links uitgelijnd"). Cancel it
   specifically for that wrapper (identified by elementor-location-single,
   which only Elementor Pro's Theme Builder adds); the template's own
   sections/columns control width and centering themselves. */
.single-post .hentry.elementor-location-single { max-width: none; }
.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 — native <details> accordion (owner request 2026-09-28:
   click a row to open it and reveal a short explanation of why that product
   fits that situation). Same interaction as the existing .sbc-prose FAQ
   accordion, but not nested in .sbc-prose so it gets its own selector. */
.sbc-rng-choose { margin: 0; }
.sbc-rng-choose details.sbc-rng-row { border-top: 1px solid var(--sbc-line); }
.sbc-rng-choose details.sbc-rng-row:first-child { border-top: 0; }
.sbc-rng-choose details.sbc-rng-row > summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 40px);
  align-items: baseline;
  padding: 16px 28px 16px 0;
  position: relative;
}
.sbc-rng-choose details.sbc-rng-row > summary::-webkit-details-marker { display: none; }
.sbc-rng-choose details.sbc-rng-row > summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 16px;
  font-family: var(--sbc-font-mono);
  color: var(--sbc-olive);
}
.sbc-rng-choose details.sbc-rng-row[open] > summary::after { content: "\2013"; }
.sbc-rng-row__situation { font-family: var(--sbc-font-body); font-weight: 500; color: var(--sbc-ink); font-size: 0.96rem; }
.sbc-rng-row__products { font-family: var(--sbc-font-display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--sbc-olive-ink); font-size: 1.02rem; }
.sbc-rng-choose details.sbc-rng-row > .sbc-draftnote { margin: 0 0 16px; }

/* 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; }
  /* mobile "mark" row was flex-wrap (num/name/tag/season/price all in one
     wrapping row) — the tag broke onto its own ragged line and price got
     pushed to the bottom. Approved mockup (2026-09-17): num+name+price on
     one line, tag chip + season on the line below. */
  .sbc-rng-mark {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "num name price" "tag tag season";
    align-items: center;
    column-gap: 10px;
    row-gap: 7px;
  }
  .sbc-rng-mark .sbc-rng-num { grid-area: num; font-size: 1.6rem; }
  .sbc-rng-mark h3 { grid-area: name; margin: 0; font-size: 1.15rem; }
  .sbc-rng-mark .sbc-rng-price {
    grid-area: price;
    font-family: var(--sbc-font-display); font-weight: 700; font-size: 1.05rem;
    color: var(--sbc-ink); white-space: nowrap;
  }
  .sbc-rng-mark .sbc-rng-tag {
    grid-area: tag; justify-self: start;
    background: var(--sbc-olive-tint); color: var(--sbc-olive-ink); border: none;
  }
  .sbc-rng-mark .sbc-rng-season { grid-area: season; justify-self: end; text-align: right; }
  .sbc-rng-photo { width: 118px; }
  .sbc-rng-cold { grid-template-columns: 1fr; }
  .sbc-rng-choose details.sbc-rng-row > summary { grid-template-columns: 1fr; gap: 4px; padding-right: 24px; }
}

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