/* ============================================================
   Stadsgenootjes — Components
   Reusable component CSS that layers on top of colors_and_type.css.
   ============================================================ */

/* ── Buttons ──────────────────────────────────────────────── */
.sg-btn {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--sg-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--sg-dur-base) var(--sg-ease),
              color var(--sg-dur-base) var(--sg-ease),
              border-color var(--sg-dur-base) var(--sg-ease),
              transform var(--sg-dur-fast) var(--sg-ease),
              box-shadow var(--sg-dur-base) var(--sg-ease);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}
.sg-btn:active { transform: scale(0.97); }
.sg-btn svg {
  /* Icons inherit text size — 1em matches the cap height of the label.
     Stroke 2.25 keeps them visually weighted with 800-weight type. */
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.sg-btn:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 3px;
}

.sg-btn-primary {
  background: var(--sg-accent);
  color: var(--sg-accent-contrast);
  border-color: var(--sg-accent);
  box-shadow: var(--sg-shadow-sm);
}
.sg-btn-primary:hover {
  background: var(--sg-accent-deep);
  border-color: var(--sg-accent-deep);
  box-shadow: var(--sg-shadow-md);
}

.sg-btn-secondary {
  background: transparent;
  color: var(--sg-ink);
  border-color: var(--sg-ink);
}
.sg-btn-secondary:hover {
  background: var(--sg-ink);
  color: var(--sg-paper);
}

.sg-btn-ghost {
  background: transparent;
  color: var(--sg-ink);
  border-color: transparent;
  padding: 14px 18px;
}
.sg-btn-ghost:hover {
  background: var(--sg-cream-soft);
}

.sg-btn-sm { padding: 10px 18px; font-size: 14px; }
.sg-btn-lg { padding: 20px 32px; font-size: 18px; }

/* ── Inputs ───────────────────────────────────────────────── */
.sg-input {
  font-family: var(--sg-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--sg-ink);
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-border);
  border-radius: 12px;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--sg-dur-fast) var(--sg-ease),
              box-shadow var(--sg-dur-fast) var(--sg-ease);
}
.sg-input::placeholder { color: var(--sg-ink-4); }
.sg-input:focus {
  outline: none;
  border-color: var(--sg-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sg-accent) 18%, transparent);
}
.sg-label {
  display: block;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--sg-ink-2);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* ── City pills / tags ────────────────────────────────────── */
.sg-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--sg-radius-pill);
  background: var(--sg-cream-soft);
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-ink);
  border: 1px solid var(--sg-border);
  cursor: pointer;
  transition: background var(--sg-dur-fast) var(--sg-ease),
              border-color var(--sg-dur-fast) var(--sg-ease),
              color var(--sg-dur-fast) var(--sg-ease),
              transform var(--sg-dur-fast) var(--sg-ease);
}
.sg-pill:hover {
  background: var(--sg-paper);
  border-color: var(--sg-ink);
  transform: translateY(-1px);
}
.sg-pill:active { transform: scale(0.97); }
.sg-pill-dot {
  width: 10px; height: 10px; border-radius: 999px; background: var(--sg-accent);
  flex-shrink: 0;
}
.sg-pill.is-active {
  background: var(--sg-accent);
  color: var(--sg-accent-contrast);
  border-color: var(--sg-accent);
}
.sg-pill.is-active:hover {
  background: var(--sg-accent-deep);
  border-color: var(--sg-accent-deep);
}
.sg-pill.is-active .sg-pill-dot { background: var(--sg-accent-contrast); }

/* ── Container — site-wide content wrapper ─────────────────────────── */
.sg-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .sg-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Product card base ─────────────────────────────────────── */
/* Full spec from design-ref/components.css. Scoped rules (.sg-plp etc.)
   override what they need (e.g. padding:0, border-radius:24px). */
.sg-product {
  background: var(--sg-paper);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--sg-shadow-sm);
  transition: transform var(--sg-dur-base) var(--sg-ease),
              box-shadow var(--sg-dur-base) var(--sg-ease);
  cursor: pointer;
  position: relative;
}
.sg-product > * { flex-shrink: 0; }
.sg-product__row { margin-top: auto; }
.sg-product:hover {
  transform: translateY(-2px);
  box-shadow: var(--sg-shadow-md);
}
.sg-product__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--sg-radius-md);
  background: var(--sg-cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.sg-product__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--sg-dur-slow) var(--sg-ease);
}
.sg-product:hover .sg-product__media img { transform: scale(1.04); }
.sg-product__badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--sg-font-script);
  font-size: 22px;
  color: var(--sg-accent);
  line-height: 1;
}
.sg-product__title {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 18px;
  color: var(--sg-ink);
  line-height: 1.2;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.sg-product__meta {
  font-family: var(--sg-font-body);
  font-size: 13px;
  color: var(--sg-ink-3);
  font-weight: 600;
  margin: 0;
}
.sg-product__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.sg-product__price {
  font-family: var(--sg-font-display);
  font-size: 24px;
  color: var(--sg-ink);
  line-height: 1;
}

/* ── Product card (popular/homepage, scoped) ───────────────── */
.sg-popular__card.sg-product {
  background: var(--sg-paper);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--sg-shadow-sm);
  transition: transform var(--sg-dur-base) var(--sg-ease),
              box-shadow var(--sg-dur-base) var(--sg-ease);
  cursor: pointer;
  position: relative;
}
.sg-popular__card.sg-product > * { flex-shrink: 0; }
/* Push the price/CTA row to the bottom regardless of title length. */
.sg-popular__card .sg-product__row { margin-top: auto; }
.sg-popular__card.sg-product:hover {
  transform: translateY(-2px);
  box-shadow: var(--sg-shadow-md);
}
.sg-popular__card .sg-product__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--sg-radius-md);
  background: var(--sg-cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.sg-popular__card .sg-product__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--sg-dur-slow) var(--sg-ease);
}
.sg-popular__card.sg-product:hover .sg-product__media img { transform: scale(1.04); }
.sg-popular__card .sg-product__badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--sg-font-script);
  font-size: 22px;
  color: var(--sg-accent);
  line-height: 1;
}
.sg-popular__card .sg-product__title {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 18px;
  color: var(--sg-ink);
  line-height: 1.2;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.sg-popular__card .sg-product__meta {
  font-family: var(--sg-font-body);
  font-size: 13px;
  color: var(--sg-ink-3);
  font-weight: 600;
  margin: 0;
}
.sg-popular__card .sg-product__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.sg-popular__card .sg-product__price {
  font-family: var(--sg-font-display);
  font-size: 24px;
  color: var(--sg-ink);
  line-height: 1;
}

/* ── Package mimic card (looks like printed boxboard) ─────── */
.sg-package {
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-ink);
  border-radius: var(--sg-radius-md);
  padding: 22px 20px;
  box-shadow: var(--sg-shadow-inset), var(--sg-shadow-md);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}

/* ── Sticky header ────────────────────────────────────────── */
.sg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
}
.sg-header__nav {
  display: flex; gap: 28px; align-items: center;
}
.sg-header__nav a {
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--sg-ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.sg-header__nav a:hover { color: var(--sg-accent-deep); }
.sg-header__cart {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--sg-radius-pill);
  background: var(--sg-ink); color: var(--sg-paper);
  font-family: var(--sg-font-body); font-weight: 800; font-size: 14px;
  cursor: pointer; border: none;
}

/* ── Quantity stepper ─────────────────────────────────────── */
.sg-stepper {
  display: inline-flex; align-items: center; gap: 0;
  border: 1.5px solid var(--sg-ink);
  border-radius: var(--sg-radius-pill);
  padding: 4px;
}
.sg-stepper button {
  width: 32px; height: 32px; border-radius: 999px;
  border: none; background: transparent; color: var(--sg-ink);
  font-family: var(--sg-font-body); font-weight: 800; font-size: 18px;
  cursor: pointer; transition: background var(--sg-dur-fast);
}
.sg-stepper button:hover { background: var(--sg-cream-soft); }
.sg-stepper .val {
  min-width: 36px; text-align: center;
  font-family: var(--sg-font-body); font-weight: 800; font-size: 16px;
  color: var(--sg-ink);
}

/* ── Responsive overrides ──────────────────────────────────
   The kit was written desktop-first with React inline styles.
   These @media rules use attribute selectors + !important to
   fold the most-used inline grid patterns to 1- or 2-column
   layouts at tablet / mobile breakpoints. Imperfect but solid
   enough to demo how the site adapts.
   Breakpoints: tablet 1024px, mobile 720px. */
@media (max-width: 1024px) {
  /* Track & trace timeline stays horizontal on tablet too — `div[…]`
     selector wins on specificity against the broad `[style*="repeat(4"]`
     rule below that flips 4-col grids to 2-col. */
  div[data-track-timeline] { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  div[data-track-timeline] > div > div:last-child { font-size: 12px !important; }

  /* Checkout on tablet — tighter card padding, summary stays beside form
     but slightly narrower. */
  .sg-checkout-form section > div { padding: 20px !important; }
  .sg-checkout-summary { padding: 20px !important; }

  /* Order detail — sidebar blocks drop below the products column,
     and the 3 sidebar items spread into a 3-col row underneath. */
  .sg-order-detail-grid { grid-template-columns: 1fr !important; }
  .sg-order-detail-grid > aside { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }

  /* Header — tablet: tighter gaps, keep all 5 nav items visible */
  .sg-header { padding: 16px 20px !important; }
  .sg-header__nav { gap: 14px !important; }
  .sg-header__nav a { font-size: 13px !important; letter-spacing: 0 !important; }
  /* Bring back the secondary links that were hidden at <1024px */
  .sg-header__nav a:nth-child(2),
  .sg-header__nav a:nth-child(3) { display: inline-block !important; }
  .sg-header__cart { padding: 9px 14px !important; font-size: 13px !important; }

  /* Hero / 2-up content sections — keep 2-col but tighter */
  /* Drop 3- and 4-col grids to 2-col */
  [style*="grid-template-columns: repeat(4"], [style*="gridTemplateColumns: repeat(4"],
  [style*="grid-template-columns: repeat(3"], [style*="gridTemplateColumns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Section padding shrinks */
  section { padding-left: 24px !important; padding-right: 24px !important; }
  /* Hero/PDP/Cart 2-col layouts stay 2-col on tablet — looks fine.
     Cart sidebar wraps under content. */

  /* Fluid display headings at tablet width — overrides inline fontSize. */
  h1[style*="fontSize"], h2[style*="fontSize"], h1[style*="font-size"], h2[style*="font-size"] {
    font-size: clamp(28px, 5.5vw, 80px) !important;
  }
  div[style*="fontSize: 84"], div[style*="fontSize: 88"] { font-size: clamp(36px, 6vw, 84px) !important; }

  /* Footer on tablet — newsletter input pinches at 4-col grid widths.
     Stack input above button, full-width. */
  footer form { max-width: 100% !important; flex-wrap: wrap !important; }
  footer form > input { flex: 1 1 100% !important; min-width: 0 !important; }
  footer form > button { flex: 1 1 100% !important; justify-content: center; }

  /* Category filter rail — collapse on tablet too */
  .sg-filter-toggle { display: flex !important; }
  aside[data-filters-open="false"] { display: none !important; }
  /* Grid becomes single-column when filter rail collapses, so products
     get full width */
  .sg-plp-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  /* Show hamburger; hide nav + extra header icons that don't fit.
     Cart drops its dark pill chrome on mobile — becomes a transparent
     icon button that matches the hamburger visually. */
  .sg-header__menu-btn { display: inline-flex !important; }
  .sg-header__user-btn { display: none !important; }
  .sg-header__cart-label { display: none !important; }
  .sg-header__cart {
    width: 40px !important; height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--sg-ink) !important;
    border-radius: 999px !important;
    justify-content: center;
    position: relative;
  }
  /* The cart count moves into a small floating badge on the icon */
  .sg-header__cart > span:not(.sg-header__cart-label) {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 18px; height: 18px;
    padding: 0 5px !important;
    font-size: 10px !important;
    border: 2px solid var(--sg-cream);
    border-radius: 999px !important;
  }
  /* Logo shrinks slightly to leave more breathing room */
  .sg-header img { height: 22px !important; }
  .sg-header { padding: 12px 16px !important; }
  /* Tighter cluster on the right */
  .sg-header > div:last-child { gap: 2px !important; }

  /* USP topbar: show single rotating message, hide the row */
  .sg-uspbar__row    { display: none !important; }
  .sg-uspbar__mobile { display: block !important; }

  /* Header nav hides; hamburger would replace it in production */
  .sg-header__nav { display: none !important; }
  .sg-header { padding: 14px 18px !important; }
  .sg-header__cart { padding: 8px 12px !important; font-size: 13px !important; }

  /* USP bar collapses to single rotating message */
  .sg-cream-soft-usp > div { gap: 12px !important; flex-wrap: wrap !important; justify-content: flex-start !important; }

  /* Force ALL multi-col grids to single column — the most reliable
     way to make a desktop-first React app readable on mobile. */
  [style*="grid-template-columns"], [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* …except the 4-up "qty badge / small avatar / label / price" rows
     which need to stay horizontal — keep simple 3-col cart rows. */
  [data-row="cart-line"] { grid-template-columns: 56px 1fr auto !important; }
  /* Some grids must KEEP their original column count on mobile (gallery thumbs). */
  div[data-keep-cols="4"] { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  div[data-keep-cols="3"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* Track & trace timeline must stay horizontal — only shrink labels */
  div[data-track-timeline] { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
  div[data-track-timeline] > div > div:last-child { font-size: 11px !important; line-height: 1.2 !important; }
  div[data-track-timeline] > div > div:first-child > div:first-child { width: 18px !important; height: 18px !important; font-size: 10px !important; }

  /* Sidebars unstick on mobile so they don't cover content */
  aside:not(.sg-offcanvas) { position: static !important; }

  /* Display sizes shrink */
  h1.sg, .sg-h1 { font-size: clamp(36px, 9vw, 56px) !important; }
  h2.sg, .sg-h2 { font-size: clamp(28px, 7vw, 40px) !important; }

  /* Section vertical rhythm tighter */
  section { padding-top: 48px !important; padding-bottom: 48px !important; padding-left: 18px !important; padding-right: 18px !important; }

  /* Demo bar wraps */
  .demo-bar { flex-wrap: wrap !important; max-width: calc(100vw - 24px); }
  .demo-bar button { font-size: 11px !important; padding: 4px 10px !important; }

  /* Cart drawer goes full-width */
  aside[style*="width: 440px"] { width: 100vw !important; }
  aside[style*="width: 420px"] { width: 100vw !important; }

  /* Search overlay — tighter padding, smaller close button, hide kbd tip */
  .sg-search__inner { padding: 16px 14px !important; }
  .sg-search__bar { padding: 10px 10px 10px 14px !important; gap: 8px !important; }
  .sg-search__bar input { font-size: 15px !important; }
  .sg-search__bar > button { width: 30px !important; height: 30px !important; }
  .sg-search__callout { flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 12px 14px !important; }
  .sg-search__callout > div { flex: 1 1 0 !important; min-width: 0 !important; }
  .sg-search__callout .sg-script { font-size: 18px !important; margin-bottom: 2px !important; }
  .sg-search__callout .sg-caption { font-size: 11px !important; line-height: 1.3 !important; }
  .sg-search__callout button { align-self: center; flex-shrink: 0; padding: 8px 12px !important; font-size: 12px !important; }
  .sg-search__footer span:first-child { display: none !important; }
  .sg-search__footer { justify-content: center !important; }

  /* Footer — really tuned, not just folded. */
  footer { padding: 56px 20px 24px !important; }
  /* Brand block on top, then a 2-col link grid under it. The first child
     of footer's main grid is the brand block; the rest are link columns. */
  footer > div:first-child > div:first-child { margin-bottom: 12px; }
  /* Link cols form a 2-col grid on mobile (compact). */
  footer ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px 14px !important; }
  /* Newsletter form goes full-width and the button drops below the input. */
  footer form { max-width: none !important; flex-wrap: wrap !important; }
  footer form > input { flex-basis: 100% !important; }
  footer form > button { flex-basis: 100% !important; justify-content: center; }
  /* Bottom strip stacks */
  footer > div:last-child { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }

  /* Category filter rail — mobile collapse */
  .sg-filter-toggle { display: flex !important; }
  aside[data-filters-open="false"] { display: none !important; }
  html, body { overflow-x: clip !important; }
  body, #root { max-width: 100vw !important; }
  img { max-width: 100% !important; height: auto; }
  section { padding-left: 16px !important; padding-right: 16px !important; }
  section > div { max-width: 100% !important; box-sizing: border-box; }

  /* Flex rows with gap wrap on mobile so button rows never overflow. */
  [style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }
  /* Hero CTA rows (gap 10–14px between sg-btns) stack vertically full-width. */
  [style*="display: flex"][style*="gap: 12"] > .sg-btn,
  [style*="display: flex"][style*="gap: 14"] > .sg-btn,
  [style*="display: flex"][style*="gap: 10"] > .sg-btn { flex: 1 1 100%; }

  /* Catch big inline-sized headings beyond the .sg-h1/.sg-h2 classes */
  h1[style*="fontSize"], h1[style*="font-size"] { font-size: clamp(34px, 9vw, 52px) !important; line-height: 1.05 !important; }
  h2[style*="fontSize"], h2[style*="font-size"] { font-size: clamp(26px, 7vw, 36px) !important; }
  div[style*="fontFamily: var(--sg-font-script)"][style*="fontSize"],
  .sg-script { font-size: clamp(28px, 7vw, 36px) !important; }

  /* PDP info tabs — 4 wide Dutch labels never fit horizontally at 390px,
     and a scroll-snap row that only shows 2.5 tabs reads as broken. On
     mobile we flip the row to a 2×2 grid — all 4 tabs visible, equal-
     width, no scrolling. Active state keeps the bottom underline. */
  .sg-pdp-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .sg-pdp-tab {
    padding: 13px 10px !important;
    font-size: 13px !important;
    white-space: normal !important;
    text-align: center;
    border-right: 1px solid var(--sg-border) !important;
    border-bottom: 1px solid var(--sg-border) !important;
    margin-bottom: 0 !important;
  }
  /* Remove the trailing edges so the grid sits flush against the card. */
  .sg-pdp-tab:nth-child(2n) { border-right: none !important; }
  .sg-pdp-tab:nth-child(n+3) { border-bottom: none !important; }
  /* Active state — keep accent underline as a 2px bottom inset so it
     reads above the grid line. */
  .sg-pdp-tab[data-active="true"] {
    box-shadow: inset 0 -2px 0 0 var(--sg-accent);
  }
  .sg-pdp-tabs-body { padding: 20px 18px !important; }
  .sg-pdp-tabs-card { margin-top: 32px !important; border-radius: 18px !important; }

  /* Upsell ("Maak het compleet") section header — heading wraps to 2 lines
     on narrow screens, which pulled the −€5 sticker into a vertical
     squeeze on the right. Stack vertically with the sticker first so it
     reads as a callout above the title. */
  .sg-upsell-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .sg-upsell-head > span.sg-sticker { order: -1; }
}
.sg-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 38px 10px 14px;
  border: 1.5px solid var(--sg-border);
  border-radius: 999px;
  background-color: var(--sg-paper);
  color: var(--sg-ink);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1A17' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  line-height: 1.2;
}
.sg-select:focus {
  outline: none;
  border-color: var(--sg-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sg-accent) 18%, transparent);
}

/* ── Arrow link — no underline ──────────────────────────── */
.sg-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sg-accent-deep);
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color var(--sg-dur-fast) var(--sg-ease);
}
.sg-arrow-link span { transition: transform var(--sg-dur-base) var(--sg-ease); }
.sg-arrow-link:hover { color: var(--sg-ink); }
.sg-arrow-link:hover span { transform: translateX(3px); }
.sg-sticker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--sg-accent);
  color: var(--sg-accent-contrast);
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: var(--sg-radius-pill);
}
.sg-sticker--circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  font-family: var(--sg-font-script);
  font-weight: 600;
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.0;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
}

/* ── Mobile-only conversion patterns (re-added) ───────────
   Bottom nav bar + sticky PDP add-to-cart. Hidden on desktop. */
.sg-bottom-nav, .sg-pdp-sticky-cta { display: none; }

@media (max-width: 720px) {
  .sg-bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: color-mix(in oklab, var(--sg-cream) 96%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid var(--sg-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  body { padding-bottom: 70px; }

  .sg-pdp-sticky-cta {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 64px; z-index: 61;
    background: var(--sg-cream);
    border-top: 1px solid var(--sg-border);
    box-shadow: 0 -8px 24px rgba(60, 40, 20, 0.10);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .sg-pdp-sticky-cta__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    max-width: 1200px; margin: 0 auto;
  }
  .sg-pdp-sticky-cta__inner > .sg-btn { flex: 1 1 auto !important; min-width: 0; }
  .sg-pdp-sticky-cta__price { font-family: var(--sg-font-display); font-size: 24px; color: var(--sg-ink); line-height: 1; }
  .sg-pdp-sticky-cta__sub { font-family: var(--sg-font-body); font-size: 11px; color: var(--sg-ink-3); font-weight: 600; margin-top: 2px; }

  .sg-pdp-price-card { display: none !important; }

  /* Hide mobile bottom nav while the menu drawer is open */
  body:has(aside[style*="translateX(0px"]) .sg-bottom-nav { display: none !important; }
}/* ============================================================
   sg-hero — homepage hero section layout
   Appended by scripts/build-home-hero.php (see CHANGELOG v1.0.x)
   ============================================================ */

.sg-hero {
  min-height: 540px;
}

.sg-hero__left {
  max-width: 560px;
}

.sg-hero .sg-eyebrow {
  margin: 0 0 8px;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sg-hero .sg-eyebrow--green {
  color: var(--sg-color-primary, #009A47);
}

.sg-hero .sg-h1 {
  margin: 0;
  font-family: var(--sg-font-display, "Caprasimo", serif);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 1.02;
  color: var(--sg-color-ink, #1B1A17);
  letter-spacing: -0.01em;
}

.sg-hero .sg-script {
  margin: -6px 0 8px;
  font-family: var(--sg-font-script, "Caveat", cursive);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  transform: rotate(-3deg);
  transform-origin: left center;
}

.sg-hero .sg-script--green {
  color: var(--sg-color-primary, #009A47);
}

.sg-hero .sg-lead {
  margin: 0 0 8px;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--sg-color-ink, #1B1A17);
  max-width: 480px;
}

.sg-hero .sg-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

/* Product card on the right */
.sg-hero__product-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sg-hero__product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Round "30+ edities" sticker — v25-token-fixes: use accent-contrast not hardcoded #fff */
.sg-sticker {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--sg-font-script, "Caveat", cursive);
  color: var(--sg-accent-contrast, #fff);
  text-align: center;
  line-height: 1;
  transform: rotate(-8deg);
  z-index: 2;
}

.sg-sticker--green {
  background: var(--sg-color-primary, #009A47);
}

.sg-sticker__line1 {
  font-size: 1.8rem;
  font-weight: 700;
}

.sg-sticker__line2 {
  font-size: 1rem;
  margin-top: 2px;
}

/* Tablet — stack to single column */
@media (max-width: 1024px) {
  .sg-hero {
    text-align: left;
  }
  .sg-hero__product-card {
    max-width: 420px;
  }
}

@media (max-width: 640px) {
  .sg-hero .sg-h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); }
  .sg-hero .sg-script { font-size: 2rem; }
  .sg-sticker { width: 72px; height: 72px; top: 16px; right: 16px; }
  .sg-sticker__line1 { font-size: 1.4rem; }
  .sg-sticker__line2 { font-size: 0.8rem; }
}

/* ============================================================
   sg-header — desktop / mobile visibility
   Header template post 53 uses these classes on its child containers.
   ============================================================ */

.sg-mobile-drawer,
.sg-mobile-only { display: none; }

@media (max-width: 900px) {
  .sg-desktop-nav,
  .sg-desktop-only { display: none !important; }
  .sg-mobile-drawer { display: flex; }
  .sg-mobile-only { display: inline-flex; }
}
/* ============================================================
   sg-hero v2 — force two-column layout
   Override Elementor's default container widths.
   Append this to components.css AFTER the first sg-hero block.
   ============================================================ */

/* Force the outer hero to be a true row on desktop */
.sg-hero.e-con,
.sg-hero {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 48px !important;
  max-width: 1280px;
  margin: 0 auto;
}

/* Inner columns get explicit widths */
.sg-hero > .sg-hero__left,
.sg-hero > .e-con-inner > .sg-hero__left,
.sg-hero .sg-hero__left {
  flex: 0 1 52% !important;
  max-width: 560px;
  width: 52% !important;
}

.sg-hero > .sg-hero__right,
.sg-hero > .e-con-inner > .sg-hero__right,
.sg-hero .sg-hero__right {
  flex: 0 1 44% !important;
  width: 44% !important;
}

/* Stack on tablet + mobile */
@media (max-width: 1024px) {
  .sg-hero.e-con,
  .sg-hero {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    text-align: left;
  }
  .sg-hero .sg-hero__left,
  .sg-hero .sg-hero__right {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 640px;
  }
}

/* The left-inner wrapper handles vertical rhythm inside the HTML widget */
.sg-hero__left-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sg-hero__left-inner > * { margin: 0; }
.sg-hero__left-inner .sg-script { margin: -8px 0 0; }
.sg-hero__left-inner .sg-cta-row { margin-top: 8px; }
/* ============================================================
   sg-sections — homepage sections 2-6 styling
   Append to components.css AFTER the v2 hero block.
   ============================================================ */

/* Shared helpers */
.sg-text-center { text-align: center; }
.sg-text-cream { color: var(--sg-color-cream, #FBF5EC) !important; }

.sg-h2 {
  font-family: var(--sg-font-display, "Caprasimo", serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  color: var(--sg-color-ink, #1B1A17);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}

.sg-body {
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sg-color-ink, #1B1A17);
  margin: 0 0 12px;
}

.sg-link--arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  color: var(--sg-color-primary, #009A47);
  text-decoration: none;
  transition: gap 0.15s ease;
}
.sg-link--arrow:hover { gap: 10px; }

/* ============================================================
   Section 2 — Edition Picker
   ============================================================ */
.sg-edition-picker__inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.sg-edition-picker .sg-eyebrow { margin-bottom: 12px; }
.sg-edition-picker .sg-h2 { text-align: center; margin-bottom: 40px; }

.sg-pill-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.sg-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sg-color-ink, #1B1A17);
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sg-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.2);
}
.sg-pill__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   Section 3 — Popular Products
   ============================================================ */
.sg-popular__inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.sg-popular__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.sg-popular__header .sg-eyebrow { margin-bottom: 6px; }
.sg-popular__header .sg-h2 { margin: 0; }

.sg-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .sg-product-grid { grid-template-columns: 1fr; }
  .sg-popular__header { flex-direction: column; align-items: flex-start; }
}

.sg-btn-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--sg-color-primary, #009A47);
  color: #fff;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sg-btn-cart:hover { opacity: 0.9; transform: translateY(-1px); }

.sg-empty {
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  color: var(--sg-color-ink-2, #3B3833);
  text-align: center;
  grid-column: 1 / -1;
  padding: 40px 0;
}

/* ============================================================
   Section 4 — Story Strip (mint background)
   ============================================================ */
.sg-story {
  max-width: none;
}
.sg-story__image {
  flex: 0 1 50%;
  max-width: 600px;
}
.sg-story__image img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
}
.sg-story__body {
  flex: 0 1 44%;
  max-width: 520px;
}
.sg-story__body .sg-eyebrow { margin-bottom: 8px; }
.sg-story__body .sg-h2 { margin-bottom: 20px; }
.sg-story__body .sg-lead { margin-bottom: 16px; }
.sg-story__body .sg-body { margin-bottom: 24px; }

@media (max-width: 1024px) {
  .sg-story { flex-direction: column !important; }
  .sg-story__image, .sg-story__body { flex: 1 1 100%; max-width: 640px; }
}

/* ============================================================
   Section 5 — Facts Strip
   ============================================================ */
.sg-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .sg-facts__grid { grid-template-columns: repeat(2, 1fr); }
}
.sg-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.sg-fact__number {
  font-family: var(--sg-font-display, "Caprasimo", serif);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--sg-color-primary, #009A47);
}
.sg-fact__label {
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 0.95rem;
  color: var(--sg-color-ink-2, #3B3833);
  max-width: 220px;
}

/* ============================================================
   Section 6 — Gift Band (dark)
   ============================================================ */
.sg-gift__body {
  flex: 0 1 44%;
  max-width: 520px;
}
.sg-gift__image {
  flex: 0 1 50%;
  max-width: 600px;
}
.sg-gift__image img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
}
.sg-script--yellow {
  color: #F2C500;
  margin: 0 0 8px;
  transform: rotate(-3deg);
  transform-origin: left center;
  font-family: var(--sg-font-script, "Caveat", cursive);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
}
.sg-btn-yellow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: #F2C500;
  color: var(--sg-color-ink, #1B1A17);
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sg-btn-yellow:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(242,197,0,0.5);
}

@media (max-width: 1024px) {
  .sg-gift { flex-direction: column !important; }
  .sg-gift__body, .sg-gift__image { flex: 1 1 100%; max-width: 640px; }
}
/* ============================================================
   v3 patches — fix story/gift two-column, button styling, etc.
   Append after append-to-components-v3.css
   ============================================================ */

/* ----- Force story + gift to two-column on desktop ----- */
.sg-story.e-con,
.sg-story,
.sg-gift.e-con,
.sg-gift {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 64px !important;
  max-width: 1280px;
  margin: 0 auto;
}

.sg-story > .e-con-inner,
.sg-gift > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: 1280px;
}

/* The HTML widget inside story/gift contains BOTH image and body as siblings.
   It needs to be a flex container itself so they sit side-by-side. */
.sg-story .elementor-widget-html > .elementor-widget-container,
.sg-gift .elementor-widget-html > .elementor-widget-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 64px;
  width: 100%;
}

.sg-story__image,
.sg-gift__image {
  flex: 0 1 50%;
  max-width: 600px;
}

.sg-story__body,
.sg-gift__body {
  flex: 0 1 44%;
  max-width: 520px;
}

@media (max-width: 1024px) {
  .sg-story .elementor-widget-html > .elementor-widget-container,
  .sg-gift .elementor-widget-html > .elementor-widget-container {
    flex-direction: column !important;
  }
  .sg-story__image, .sg-story__body,
  .sg-gift__image, .sg-gift__body {
    flex: 1 1 100%;
    max-width: 640px;
    width: 100%;
  }
}

/* ----- Remove the rogue cream highlight box from story body paragraph -----
   Some Elementor styling is putting a background on .sg-body. Strip it. */
.sg-story__body .sg-body,
.sg-gift__body .sg-body {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* ----- Fix sg-btn-ghost (pill outline button) ----- */
.sg-btn-ghost {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--sg-color-ink, #1B1A17) !important;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--sg-color-ink, #1B1A17) !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sg-btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,0.2);
}

/* ----- Hero CTA primary button consistency — v25-token-fixes ----- */
.sg-btn-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px !important;
  background: var(--sg-accent, var(--sg-color-primary, #009A47)) !important;
  color: var(--sg-accent-contrast, #fff) !important;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--sg-accent, var(--sg-color-primary, #009A47)) !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sg-btn-primary:hover {
  background: var(--sg-accent-deep, #007A36) !important;
  border-color: var(--sg-accent-deep, #007A36) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.2);
}

/* ----- Cart icon emoji rendering ----- */
.sg-btn-cart span[aria-hidden],
.sg-btn-yellow span[aria-hidden] {
  font-size: 1.1em;
  line-height: 1;
}
/* ============================================================
   v3 patches v2 — stronger overrides
   Solves:
   1. Section backgrounds should span full viewport width
   2. Story + gift inner HTML widget needs to be a flex container
      because both .sg-story__image and .sg-story__body are siblings
      inside ONE html widget's container
   ============================================================ */

/* ----- FULL-WIDTH BACKGROUNDS -----
   Elementor wraps containers in .e-con which has max-width.
   The .sg-section class needs to break out of that.
   Use the negative-margin trick to span full viewport width.
*/
.sg-section.e-con,
.sg-section {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The .e-con-inner WITHIN each section is where the content max-width lives */
.sg-section > .e-con-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ----- STORY + GIFT: force the HTML WIDGET'S CONTAINER to be a flex row -----
   Each section has structure:
     .sg-section.sg-story (Elementor container, flex row, but only 1 child)
       └── .elementor-widget-html  (the HTML widget Elementor created)
             └── .elementor-widget-container
                   └── div.sg-story__image  +  div.sg-story__body  (siblings!)
   
   The widget-container is where the two siblings live. It must be flex.
*/
.sg-story .elementor-widget-html .elementor-widget-container,
.sg-gift .elementor-widget-html .elementor-widget-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 64px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* And the .sg-section parent should NOT itself try to be a flex row -
   the wrapping widget-container handles it. Keep parent simple. */
.sg-story.e-con,
.sg-story,
.sg-gift.e-con,
.sg-gift {
  display: block !important;
  width: 100% !important;
}

.sg-story__image,
.sg-gift__image {
  flex: 0 1 50% !important;
  max-width: 600px !important;
  width: 50%;
}

.sg-story__body,
.sg-gift__body {
  flex: 0 1 44% !important;
  max-width: 520px !important;
  width: 44%;
}

@media (max-width: 1024px) {
  .sg-story .elementor-widget-html .elementor-widget-container,
  .sg-gift .elementor-widget-html .elementor-widget-container {
    flex-direction: column !important;
    align-items: center !important;
  }
  .sg-story__image,
  .sg-story__body,
  .sg-gift__image,
  .sg-gift__body {
    flex: 1 1 100% !important;
    max-width: 640px !important;
    width: 100% !important;
  }
}

/* ----- HERO: force two-column on desktop using SAME widget-container trick -----
   Hero has TWO inner containers (left + right), not a single html widget like
   story/gift. So the parent .sg-hero needs to BE the flex row itself.
*/
.sg-hero.e-con,
.sg-hero {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 48px !important;
}

.sg-hero > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1280px;
}

.sg-hero__left,
.sg-hero > .e-con-inner > .sg-hero__left {
  flex: 0 1 52% !important;
  max-width: 560px !important;
  width: 52% !important;
}

.sg-hero__right,
.sg-hero > .e-con-inner > .sg-hero__right {
  flex: 0 1 44% !important;
  max-width: 600px !important;
  width: 44% !important;
}

@media (max-width: 1024px) {
  .sg-hero.e-con, .sg-hero,
  .sg-hero > .e-con-inner {
    flex-direction: column !important;
  }
  .sg-hero__left,
  .sg-hero__right {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 640px !important;
  }
}

/* ----- Story story body inner button -----
   The "Lees meer" button needs to be inline-flex inside the body */
.sg-story__body .sg-btn-ghost,
.sg-gift__body .sg-btn-yellow {
  display: inline-flex !important;
  margin-top: 8px;
}

/* ----- Remove the rogue cream highlight on "Niet roze" paragraph -----
   It's coming from Elementor's default text-editor or a global style.
   The .sg-body shouldn't have any box around it. */
.sg-story__body .sg-body,
.sg-gift__body .sg-body {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   Marker so we can verify CSS was appended
   ============================================================ */
.sg-css-version::before { content: "v3-patches-v2"; }
/* ============================================================
   v3 patches v2 — stronger overrides
   Solves:
   1. Section backgrounds should span full viewport width
   2. Story + gift inner HTML widget needs to be a flex container
      because both .sg-story__image and .sg-story__body are siblings
      inside ONE html widget's container
   ============================================================ */

/* ----- FULL-WIDTH BACKGROUNDS -----
   Elementor wraps containers in .e-con which has max-width.
   The .sg-section class needs to break out of that.
   Use the negative-margin trick to span full viewport width.
*/
.sg-section.e-con,
.sg-section {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The .e-con-inner WITHIN each section is where the content max-width lives */
.sg-section > .e-con-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ----- STORY + GIFT: force the HTML WIDGET'S CONTAINER to be a flex row -----
   Each section has structure:
     .sg-section.sg-story (Elementor container, flex row, but only 1 child)
       └── .elementor-widget-html  (the HTML widget Elementor created)
             └── .elementor-widget-container
                   └── div.sg-story__image  +  div.sg-story__body  (siblings!)
   
   The widget-container is where the two siblings live. It must be flex.
*/
.sg-story .elementor-widget-html .elementor-widget-container,
.sg-gift .elementor-widget-html .elementor-widget-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 64px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* And the .sg-section parent should NOT itself try to be a flex row -
   the wrapping widget-container handles it. Keep parent simple. */
.sg-story.e-con,
.sg-story,
.sg-gift.e-con,
.sg-gift {
  display: block !important;
  width: 100% !important;
}

.sg-story__image,
.sg-gift__image {
  flex: 0 1 50% !important;
  max-width: 600px !important;
  width: 50%;
}

.sg-story__body,
.sg-gift__body {
  flex: 0 1 44% !important;
  max-width: 520px !important;
  width: 44%;
}

@media (max-width: 1024px) {
  .sg-story .elementor-widget-html .elementor-widget-container,
  .sg-gift .elementor-widget-html .elementor-widget-container {
    flex-direction: column !important;
    align-items: center !important;
  }
  .sg-story__image,
  .sg-story__body,
  .sg-gift__image,
  .sg-gift__body {
    flex: 1 1 100% !important;
    max-width: 640px !important;
    width: 100% !important;
  }
}

/* ----- HERO: force two-column on desktop using SAME widget-container trick -----
   Hero has TWO inner containers (left + right), not a single html widget like
   story/gift. So the parent .sg-hero needs to BE the flex row itself.
*/
.sg-hero.e-con,
.sg-hero {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 48px !important;
}

.sg-hero > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1280px;
}

.sg-hero__left,
.sg-hero > .e-con-inner > .sg-hero__left {
  flex: 0 1 52% !important;
  max-width: 560px !important;
  width: 52% !important;
}

.sg-hero__right,
.sg-hero > .e-con-inner > .sg-hero__right {
  flex: 0 1 44% !important;
  max-width: 600px !important;
  width: 44% !important;
}

@media (max-width: 1024px) {
  .sg-hero.e-con, .sg-hero,
  .sg-hero > .e-con-inner {
    flex-direction: column !important;
  }
  .sg-hero__left,
  .sg-hero__right {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 640px !important;
  }
}

/* ----- Story story body inner button -----
   The "Lees meer" button needs to be inline-flex inside the body */
.sg-story__body .sg-btn-ghost,
.sg-gift__body .sg-btn-yellow {
  display: inline-flex !important;
  margin-top: 8px;
}

/* ----- Remove the rogue cream highlight on "Niet roze" paragraph -----
   It's coming from Elementor's default text-editor or a global style.
   The .sg-body shouldn't have any box around it. */
.sg-story__body .sg-body,
.sg-gift__body .sg-body {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   Marker so we can verify CSS was appended
   ============================================================ */
.sg-css-version::before { content: "v3-patches-v2"; }
/* ============================================================
   v3 patches v3 — selectors target classes inside the HTML widget
   No more fighting Elementor's wrappers.
   ============================================================ */

/* Story strip: 2-column inside the HTML widget */
.sg-story__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.sg-story__inner .sg-story__image {
  flex: 0 1 50%;
  max-width: 600px;
}
.sg-story__inner .sg-story__image img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
}
.sg-story__inner .sg-story__body {
  flex: 0 1 44%;
  max-width: 520px;
}

/* Gift band: 2-column inside HTML widget */
.sg-gift__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.sg-gift__inner .sg-gift__body {
  flex: 0 1 44%;
  max-width: 520px;
}
.sg-gift__inner .sg-gift__image {
  flex: 0 1 50%;
  max-width: 600px;
}
.sg-gift__inner .sg-gift__image img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
}

/* Stack on tablet */
@media (max-width: 1024px) {
  .sg-story__inner,
  .sg-gift__inner {
    flex-direction: column;
    align-items: center;
  }
  .sg-story__inner > div,
  .sg-gift__inner > div {
    flex: 1 1 100%;
    width: 100%;
    max-width: 640px;
  }
}

/* ----- FULL-WIDTH BACKGROUNDS -----
   Force section to break out of Elementor's max-width.
   Trick: negative left margin equal to (100vw - 100%)/2 and matching width.
*/
.sg-section,
.sg-section.e-con {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box;
}

/* Inside each section, content should still be max-width 1280 and centered */
.sg-hero > .e-con-inner,
.sg-edition-picker > .e-con-inner,
.sg-popular > .e-con-inner,
.sg-facts > .e-con-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* Hero specifically still needs to be a flex row at the parent level */
.sg-hero,
.sg-hero.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 48px !important;
  padding: 72px max(48px, calc((100vw - 1280px) / 2)) 96px !important;
}

.sg-hero > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
}

.sg-hero__left { flex: 0 1 52%; max-width: 560px; }
.sg-hero__right { flex: 0 1 44%; max-width: 600px; }

@media (max-width: 1024px) {
  .sg-hero, .sg-hero.e-con,
  .sg-hero > .e-con-inner {
    flex-direction: column !important;
  }
  .sg-hero__left, .sg-hero__right {
    flex: 1 1 100%;
    width: 100%;
    max-width: 640px;
  }
}

/* Story body element padding/no-box rules */
.sg-story__body .sg-body,
.sg-gift__body .sg-body {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 0 12px;
}

.sg-story__body > * + *,
.sg-gift__body > * + * {
  margin-top: 16px;
}

.sg-story__body .sg-eyebrow,
.sg-gift__body .sg-script--yellow {
  margin-bottom: 4px;
}

/* Verification marker */
.sg-css-version::before { content: "v3-patches-v3"; }

/* hero v4 tweaks */
.sg-hero__left-inner .sg-script {
  margin-top: -16px !important;
  margin-left: 8px;
}
.sg-hero .sg-h1 {
  line-height: 0.98 !important;
}
.sg-hero__left {
  flex-basis: 55% !important;
  max-width: 620px !important;
}
.sg-hero__right {
  flex-basis: 40% !important;
  max-width: 540px !important;
}

/* ── header v4-patches + off-canvas ──────────────────────────────────────── */

/* Off-canvas backdrop */
.sg-offcanvas-backdrop {
  position: fixed; inset: 0; background: rgba(27,26,23,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--sg-ease);
  z-index: 90;
}
.sg-offcanvas-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Off-canvas panel */
.sg-offcanvas {
  position: fixed; top: 0; bottom: 0; width: min(420px, 92vw);
  background: var(--sg-cream); z-index: 100;
  display: flex; flex-direction: column;
  transition: transform 320ms var(--sg-ease);
  box-shadow: var(--sg-shadow-lg);
}
.sg-offcanvas[hidden] { display: flex !important; }
.sg-offcanvas--menu { left: 0;  transform: translateX(-100%); }
.sg-offcanvas--cart { right: 0; transform: translateX(100%);  }
.sg-offcanvas.is-open { transform: translateX(0); }

.sg-offcanvas__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--sg-border);
  flex-shrink: 0;
}
.sg-offcanvas__title {
  font-family: var(--sg-font-display); font-size: 22px; color: var(--sg-ink);
}
.sg-offcanvas__close {
  background: transparent; border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sg-ink);
}
.sg-offcanvas__close:hover { background: var(--sg-cream-soft); }
.sg-offcanvas__body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px; }

.sg-offcanvas__menu { list-style: none; padding: 0; margin: 0; }
.sg-offcanvas__menu li { border-bottom: 1px solid var(--sg-border); }
.sg-offcanvas__menu li:last-child { border-bottom: none; }
.sg-offcanvas__menu a {
  display: block; padding: 14px 0; text-decoration: none;
  font-family: var(--sg-font-body); font-weight: 700; font-size: 17px;
  color: var(--sg-ink);
}
.sg-offcanvas__menu a:hover { color: var(--sg-color-primary, var(--sg-rotterdam-deep, #00592A)); }

body.sg-no-scroll { overflow: hidden; }

/* Header polish */
.sg-site-header { position: sticky; top: 0; z-index: 80; }
.sg-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.sg-header__logo img { height: 28px; width: auto; display: block; }
.sg-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.sg-header__icon {
  width: 40px; height: 40px; border-radius: 999px;
  border: none; background: transparent; color: var(--sg-ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; flex-shrink: 0;
}
.sg-header__icon:hover { background: var(--sg-cream-soft); }

.sg-header__cart {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; border: none;
  background: transparent; color: var(--sg-ink); cursor: pointer;
  font-family: var(--sg-font-body); font-weight: 700; font-size: 14px;
  position: relative;
}
.sg-header__cart:hover { background: var(--sg-cream-soft); }

.sg-header__cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--sg-rotterdam, #00833D); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1;
}

/* Desktop: show full label, hide hamburger */
.sg-header__menu-btn { display: none; }

/* WP nav as flat list */
.sg-header__menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 28px; }
.sg-header__menu a {
  font-family: var(--sg-font-body); font-weight: 700; font-size: 14px;
  color: var(--sg-ink); text-decoration: none; letter-spacing: 0.01em;
}
.sg-header__menu a:hover { color: var(--sg-color-primary, var(--sg-rotterdam-deep, #00592A)); }
.sg-header__menu li { list-style: none; }

/* Tablet / mobile breakpoint */
@media (max-width: 1024px) {
  .sg-header__nav { display: none !important; }
  .sg-header__menu-btn { display: inline-flex !important; }
  .sg-header__user-btn { display: none !important; }
  .sg-header__search-btn { display: none !important; }
  .sg-header__cart-label { display: none; }
  .sg-header__cart {
    width: 40px; height: 40px; padding: 0; justify-content: center; position: relative;
  }
  .sg-header__cart-count {
    position: absolute; top: -2px; right: -2px;
    border: 2px solid var(--sg-cream);
    min-width: 18px; height: 18px; font-size: 10px;
  }
}
/* ============================================================
   v4 patches — cart icon SVG (replaces emoji)
   Append to web/app/themes/stadsgenootjes-theme/assets/css/components.css
   ============================================================ */

/* The inline SVG inside .sg-btn-cart inherits color via currentColor.
   The previous rule targeted span[aria-hidden] (the emoji) — keep it
   for safety but also style the SVG cleanly. */
.sg-btn-cart .sg-cart-icon,
.sg-btn-cart svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* color is inherited from button text color, which is set inline per city */
  stroke: currentColor;
}

/* Tighten button spacing now that the icon is a clean SVG */
.sg-btn-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* CSS marker so we can verify the file is loaded */
.sg-css-version::before { content: "v4-patches-cart-icon"; }
/* ============================================================
   v4 patches — cart icon SVG (replaces emoji)
   Append to web/app/themes/stadsgenootjes-theme/assets/css/components.css
   ============================================================ */

/* The inline SVG inside .sg-btn-cart inherits color via currentColor.
   The previous rule targeted span[aria-hidden] (the emoji) — keep it
   for safety but also style the SVG cleanly. */
.sg-btn-cart .sg-cart-icon,
.sg-btn-cart svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* color is inherited from button text color, which is set inline per city */
  stroke: currentColor;
}

/* Tighten button spacing now that the icon is a clean SVG */
.sg-btn-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* CSS marker so we can verify the file is loaded */
.sg-css-version::before { content: "v4-patches-cart-icon"; }
/* ============================================================
   v5 patches — cart icon color fix (aggressive)
   The v4 attempt failed because something is overriding stroke on
   .sg-btn-cart svg. This uses inline currentColor + !important +
   specific selectors so nothing wins over it.
   ============================================================ */

.sg-btn-cart {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sg-btn-cart .sg-cart-icon,
.sg-btn-cart > svg,
.sg-btn .sg-cart-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: inherit !important;
}

.sg-btn-cart .sg-cart-icon path,
.sg-btn-cart .sg-cart-icon circle,
.sg-btn-cart > svg path,
.sg-btn-cart > svg circle {
  fill: none !important;
  stroke: currentColor !important;
}

/* CSS marker — bump version */
.sg-css-version::before { content: "v5-patches-cart-icon-aggressive"; }
/* ============================================================
   v6 — Header + off-canvas (menu drawer + cart drawer)
   Append to web/app/themes/stadsgenootjes-theme/assets/css/components.css
   ============================================================ */

/* ── Header ──────────────────────────────────────────────────── */
.sg-site-header-wrapper {
  border-bottom: 1px solid #E8DFCE;
}

.sg-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 48px;
  max-width: 1440px;
  margin: 0 auto;
}

.sg-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--sg-color-ink, #1B1A17);
  font-family: var(--sg-font-display, "Caprasimo", serif);
  font-size: 1.4rem;
}
.sg-header__logo img,
.sg-header__logo .custom-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* Nav menu — flat ul rendered by wp_nav_menu */
.sg-header__nav .sg-header__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sg-header__nav .sg-header__menu a {
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sg-color-ink, #1B1A17);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}
.sg-header__nav .sg-header__menu a:hover {
  color: var(--sg-color-primary, #009A47);
}

/* Action icons cluster */
.sg-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sg-header__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--sg-color-ink, #1B1A17);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sg-header__icon:hover {
  background: #F4EBD9;
}

/* Cart pill (desktop) */
.sg-header__cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--sg-color-ink, #1B1A17);
  background: transparent;
  color: var(--sg-color-ink, #1B1A17);
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sg-header__cart:hover {
  background: var(--sg-color-ink, #1B1A17);
  color: #FBF5EC;
}
.sg-header__cart svg {
  flex-shrink: 0;
  stroke: currentColor;
}
.sg-header__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--sg-color-primary, #009A47);
  color: #fff;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
}

/* Hamburger — hidden on desktop */
.sg-header__menu-btn { display: none; }

/* ── Header responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .sg-site-header {
    padding: 14px 24px;
    gap: 12px;
  }
  .sg-header__nav { display: none; }
  .sg-header__menu-btn {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--sg-color-ink, #1B1A17);
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .sg-header__menu-btn:hover { background: #F4EBD9; }
  .sg-header__user-btn { display: none; }

  /* Cart becomes icon-only */
  .sg-header__cart-label { display: none; }
  .sg-header__cart {
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: var(--sg-color-ink, #1B1A17);
    border: none;
    border-radius: 999px;
    position: relative;
  }
  .sg-header__cart:hover {
    background: #F4EBD9;
    color: var(--sg-color-ink, #1B1A17);
  }
  .sg-header__cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    border: 2px solid #FBF5EC;
  }
}

/* ── Off-canvas backdrop ────────────────────────────────────── */
.sg-offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 26, 23, 0.45);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(.2,.7,.2,1);
}
.sg-offcanvas-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Off-canvas panels ──────────────────────────────────────── */
.sg-offcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: #FBF5EC;
  z-index: 100;
  display: flex !important;        /* override [hidden] so transitions work */
  flex-direction: column;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 20px 48px rgba(60, 40, 20, 0.18);
}
.sg-offcanvas[hidden] { visibility: hidden; }
.sg-offcanvas.is-open { visibility: visible; }
.sg-offcanvas--menu { left: 0;  transform: translateX(-100%); }
.sg-offcanvas--cart { right: 0; transform: translateX(100%);  }
.sg-offcanvas.is-open { transform: translateX(0); }

.sg-offcanvas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #E8DFCE;
}
.sg-offcanvas__title {
  font-family: var(--sg-font-display, "Caprasimo", serif);
  font-size: 1.4rem;
  color: var(--sg-color-ink, #1B1A17);
}
.sg-offcanvas__close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--sg-color-ink, #1B1A17);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sg-offcanvas__close:hover { background: #F4EBD9; }

.sg-offcanvas__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px 24px;
}

/* Menu list in mobile drawer */
.sg-offcanvas__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sg-offcanvas__menu li {
  border-bottom: 1px solid #E8DFCE;
}
.sg-offcanvas__menu li:last-child { border-bottom: none; }
.sg-offcanvas__menu a {
  display: block;
  padding: 14px 0;
  text-decoration: none;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sg-color-ink, #1B1A17);
  transition: color 0.15s ease;
}
.sg-offcanvas__menu a:hover { color: var(--sg-color-primary, #009A47); }

/* Body scroll lock when an off-canvas is open */
body.sg-no-scroll {
  overflow: hidden;
}

/* CSS marker — bumped version */
.sg-css-version::before { content: "v6-header-and-offcanvas"; }
/* ============================================================
   v7 — Polish: mini-cart, off-canvas spacing, hello-elementor cleanup
   Append to web/app/themes/stadsgenootjes-theme/assets/css/components.css
   ============================================================ */

/* ── Hide Hello Elementor's leftover page-header / breadcrumb ─── */
.page-header,
.entry-header,
.page-content > .entry-header,
.elementor-22 > .page-header {
  display: none !important;
}
/* If Hello renders a stray "Home" title above content */
body.home .post-22 > .entry-header,
body.home .page-header { display: none !important; }

/* ── Off-canvas head spacing + close button visible ─────────── */
.sg-offcanvas__head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid #E8DFCE;
  background: #FBF5EC;
  flex-shrink: 0;
}
.sg-offcanvas__title {
  font-family: var(--sg-font-display, "Caprasimo", serif);
  font-size: 1.5rem;
  color: var(--sg-color-ink, #1B1A17);
  line-height: 1;
}
.sg-offcanvas__close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--sg-color-ink, #1B1A17);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.sg-offcanvas__close:hover { background: #F4EBD9; }

/* ── Off-canvas body — better default padding ────────────────── */
.sg-offcanvas__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

/* ── Mobile menu list — clean borders ────────────────────────── */
.sg-offcanvas__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sg-offcanvas__menu li {
  border-bottom: 1px solid #E8DFCE;
}
.sg-offcanvas__menu li:last-child { border-bottom: none; }
.sg-offcanvas__menu a {
  display: block;
  padding: 18px 4px;
  text-decoration: none;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sg-color-ink, #1B1A17);
  transition: color 0.15s ease, padding 0.15s ease;
}
.sg-offcanvas__menu a:hover {
  color: var(--sg-color-primary, #009A47);
  padding-left: 12px;
}

/* ============================================================
   WooCommerce mini-cart — full restyle
   ============================================================ */
.sg-offcanvas--cart .woocommerce-mini-cart {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

/* Each cart item row */
.sg-offcanvas--cart .woocommerce-mini-cart-item,
.sg-offcanvas--cart .mini_cart_item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "thumb name remove"
    "thumb price price";
  column-gap: 14px;
  row-gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid #E8DFCE;
  position: relative;
  align-items: center;
}
.sg-offcanvas--cart .woocommerce-mini-cart-item:last-child,
.sg-offcanvas--cart .mini_cart_item:last-child {
  border-bottom: none;
}

/* Thumbnail */
.sg-offcanvas--cart .woocommerce-mini-cart-item a img,
.sg-offcanvas--cart .mini_cart_item a img,
.sg-offcanvas--cart .woocommerce-mini-cart-item img {
  /* grid-area: thumb; — superseded by v13-cart-items */
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 !important;
  background: #F4EBD9;
  display: block;
  float: none !important;
}

/* Product name (the first <a>, not the remove button) */
.sg-offcanvas--cart .woocommerce-mini-cart-item > a:not(.remove),
.sg-offcanvas--cart .mini_cart_item > a:not(.remove) {
  /* grid-area: name; — superseded by v13-cart-items */
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sg-color-ink, #1B1A17);
  text-decoration: none;
  line-height: 1.3;
  padding-right: 30px;
}
.sg-offcanvas--cart .woocommerce-mini-cart-item > a:not(.remove):hover,
.sg-offcanvas--cart .mini_cart_item > a:not(.remove):hover {
  color: var(--sg-color-primary, #009A47);
}

/* Quantity/price line  ("1 × € 14,85") */
.sg-offcanvas--cart .woocommerce-mini-cart-item .quantity,
.sg-offcanvas--cart .mini_cart_item .quantity {
  /* grid-area: price; — superseded by v13-cart-items */
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--sg-color-ink-2, #3B3833);
}
.sg-offcanvas--cart .woocommerce-Price-amount {
  font-weight: 700;
  color: var(--sg-color-ink, #1B1A17);
}

/* Remove button (the × top-right) */
.sg-offcanvas--cart .woocommerce-mini-cart-item a.remove,
.sg-offcanvas--cart .mini_cart_item a.remove {
  /* grid-area: remove; — superseded by v13-cart-items */
  position: static;
  width: 28px;
  height: 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #F4EBD9;
  color: var(--sg-color-ink, #1B1A17) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  align-self: start;
}
.sg-offcanvas--cart a.remove:hover {
  background: #1B1A17 !important;
  color: #FBF5EC !important;
}

/* Subtotal row */
.sg-offcanvas--cart .woocommerce-mini-cart__total,
.sg-offcanvas--cart .total {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 !important;
  margin: 0 0 20px 0 !important;
  border-top: 2px solid var(--sg-color-ink, #1B1A17);
  border-bottom: none !important;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
}
.sg-offcanvas--cart .woocommerce-mini-cart__total strong,
.sg-offcanvas--cart .total strong {
  font-weight: 700;
  font-size: 1rem;
  color: var(--sg-color-ink, #1B1A17);
}
.sg-offcanvas--cart .woocommerce-mini-cart__total .woocommerce-Price-amount,
.sg-offcanvas--cart .total .woocommerce-Price-amount {
  font-family: var(--sg-font-display, "Caprasimo", serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--sg-color-ink, #1B1A17);
}

/* Buttons block — WC outputs <p class="woocommerce-mini-cart__buttons buttons"> */
.sg-offcanvas--cart .woocommerce-mini-cart__buttons,
.sg-offcanvas--cart .buttons {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 0 !important;
  margin: 0 !important;
}
.sg-offcanvas--cart .woocommerce-mini-cart__buttons .button,
.sg-offcanvas--cart .buttons .button,
.sg-offcanvas--cart .buttons a.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  font-family: var(--sg-font-body, "Nunito", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: 2px solid var(--sg-color-ink, #1B1A17) !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  margin: 0 !important;
}
/* "Bekijk mandje" - secondary, ghost */
.sg-offcanvas--cart .buttons .button:not(.checkout):not(.wc-forward),
.sg-offcanvas--cart .buttons a.button:first-of-type {
  background: transparent !important;
  color: var(--sg-color-ink, #1B1A17) !important;
  order: 2; /* push below the checkout button */
}
.sg-offcanvas--cart .buttons .button:not(.checkout):hover {
  background: var(--sg-color-ink, #1B1A17) !important;
  color: #FBF5EC !important;
}
/* "Afrekenen" - primary, green */
.sg-offcanvas--cart .buttons .checkout,
.sg-offcanvas--cart .buttons a.checkout,
.sg-offcanvas--cart .buttons .wc-forward.checkout {
  background: var(--sg-color-primary, #009A47) !important;
  color: #fff !important;
  border-color: var(--sg-color-primary, #009A47) !important;
  order: 1;
}
.sg-offcanvas--cart .buttons .checkout:hover {
  background: #006B30 !important;
  border-color: #006B30 !important;
}

/* Empty cart state */
.sg-offcanvas--cart .woocommerce-mini-cart__empty-message {
  text-align: center;
  padding: 40px 0;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 1.05rem;
  color: var(--sg-color-ink-2, #3B3833);
}

/* ── Header logo - real SVG size ───────────────────────────── */
.sg-header__logo img,
.sg-header__logo .custom-logo {
  height: 40px !important;
  width: auto !important;
  max-width: 200px;
}

/* CSS marker */
.sg-css-version::before { content: "v7-polish"; }

/* ============================================================
   Stadsgenootjes v1.0.12 — header & off-canvas finish polish
   Append this block to assets/css/components.css.
   Goal: make hamburger visible on mobile, fix icon sizing,
         clean mobile menu list, polish cart drawer.
   ============================================================ */

/* ── Header action cluster: lock icon button sizes ──────────────
   The previous CSS let action buttons inherit Hello Elementor /
   Elementor defaults (link buttons → tiny inline-flex). Force
   uniform 44px tap targets and ensure SVGs render at 22×22.
*/
.sg-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sg-header__icon,
.sg-header__search-btn,
.sg-header__user-btn,
.sg-header__menu-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--sg-color-ink, #1B1A17);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.sg-header__icon:hover,
.sg-header__search-btn:hover,
.sg-header__user-btn:hover,
.sg-header__menu-btn:hover {
  background: rgba(27, 26, 23, 0.06);
  color: var(--sg-color-ink, #1B1A17);
}

.sg-header__icon svg,
.sg-header__search-btn svg,
.sg-header__user-btn svg,
.sg-header__menu-btn svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

/* Hide the menu button by default — only shows under 1024px */
.sg-header__menu-btn {
  display: none !important;
}

/* ── Cart pill button (desktop) — overrides icon-button reset ─── */
.sg-header__cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: auto;
  padding: 0 18px 0 16px;
  background: transparent;
  color: var(--sg-color-ink, #1B1A17);
  border: 1.5px solid var(--sg-color-ink, #1B1A17);
  border-radius: 999px;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sg-header__cart:hover {
  background: var(--sg-color-ink, #1B1A17);
  color: #FBF5EC;
}
.sg-header__cart:hover .sg-header__cart-count {
  background: #FBF5EC;
  color: var(--sg-color-primary, #009A47);
}
.sg-header__cart svg { width: 20px; height: 20px; }
.sg-header__cart-label { font-weight: 700; }
.sg-header__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  margin-left: 4px;
  background: var(--sg-color-primary, #009A47);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* ── Mobile breakpoint: hamburger visible, nav hidden ───────── */
@media (max-width: 1024px) {
  .sg-header__nav { display: none !important; }
  .sg-header__user-btn { display: none !important; }
  .sg-header__search-btn { display: inline-flex !important; }

  /* THE FIX: hamburger MUST render on mobile */
  .sg-header__menu-btn {
    display: inline-flex !important;
    order: 99; /* push to far right of the action cluster */
  }

  /* Cart becomes icon-only with floating count badge */
  .sg-header__cart {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sg-color-ink, #1B1A17);
    position: relative;
  }
  .sg-header__cart:hover { background: rgba(27, 26, 23, 0.06); }
  .sg-header__cart-label { display: none; }
  .sg-header__cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin: 0;
    font-size: 11px;
    border: 2px solid var(--sg-color-cream, #FBF5EC);
  }
  /* Hide count badge entirely when zero (looks cleaner) */
  .sg-header__cart-count:empty,
  .sg-header__cart-count:where([data-count="0"]) {
    display: none;
  }

  /* Tighter action cluster on mobile */
  .sg-header__actions { gap: 2px; }
}

/* ── Off-canvas menu: clean list styling ──────────────────────
   The previous CSS left items unstyled / oversized. Lock down
   list layout with proper padding, dividers, and link reset.
*/
.sg-offcanvas__menu,
.sg-offcanvas--menu .menu,
.sg-offcanvas--menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-offcanvas__menu li,
.sg-offcanvas--menu .menu li,
.sg-offcanvas--menu ul li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(27, 26, 23, 0.08);
}
.sg-offcanvas__menu li:last-child,
.sg-offcanvas--menu .menu li:last-child,
.sg-offcanvas--menu ul li:last-child {
  border-bottom: 0;
}
.sg-offcanvas__menu a,
.sg-offcanvas--menu .menu a,
.sg-offcanvas--menu ul a {
  display: block;
  padding: 16px 4px;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--sg-color-ink, #1B1A17);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.sg-offcanvas__menu a:hover,
.sg-offcanvas__menu a:focus,
.sg-offcanvas--menu .menu a:hover,
.sg-offcanvas--menu ul a:hover {
  color: var(--sg-color-primary, #009A47);
  padding-left: 10px;
}
.sg-offcanvas__menu .current-menu-item > a,
.sg-offcanvas--menu .current-menu-item > a {
  color: var(--sg-color-primary, #009A47);
}

/* Off-canvas head: better spacing, fixed close button */
.sg-offcanvas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(27, 26, 23, 0.1);
  flex-shrink: 0;
}
.sg-offcanvas__title {
  font-family: var(--sg-font-display, "Caprasimo", "Plus Jakarta Sans", serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--sg-color-ink, #1B1A17);
  margin: 0;
}
.sg-offcanvas__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--sg-color-ink, #1B1A17);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.sg-offcanvas__close:hover { background: rgba(27, 26, 23, 0.08); }
.sg-offcanvas__close svg { width: 22px; height: 22px; }

/* Off-canvas body: scrollable middle */
.sg-offcanvas {
  display: flex !important;
  flex-direction: column;
}
.sg-offcanvas__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 20px 20px;
}

/* ── Cart drawer: polished line items + sticky footer ─────────
   WC's woocommerce_mini_cart() outputs:
     ul.woocommerce-mini-cart
       li.woocommerce-mini-cart-item.mini_cart_item
         a.remove
         a (product link with optional thumbnail)
         <quantity HTML>
     p.woocommerce-mini-cart__total
     p.woocommerce-mini-cart__buttons
*/
.sg-offcanvas--cart .sg-offcanvas__body {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sg-offcanvas--cart ul.woocommerce-mini-cart,
.sg-offcanvas--cart ul.cart_list {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  flex: 1 1 auto;
  overflow-y: auto;
}

.sg-offcanvas--cart .woocommerce-mini-cart-item,
.sg-offcanvas--cart .mini_cart_item {
  display: grid;
  grid-template-columns: 64px 1fr 28px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "thumb name remove"
    "thumb qty  remove";
  column-gap: 14px;
  row-gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(27, 26, 23, 0.08);
  position: relative;
}
.sg-offcanvas--cart .woocommerce-mini-cart-item:last-child,
.sg-offcanvas--cart .mini_cart_item:last-child {
  border-bottom: 0;
}

/* Thumbnail */
.sg-offcanvas--cart .woocommerce-mini-cart-item img,
.sg-offcanvas--cart .mini_cart_item img {
  grid-area: thumb;
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 !important;
  float: none !important;
  background: var(--sg-color-cream-soft, #F4EBD9);
  display: block;
}

/* Product name (the <a> wrapping the title is also wrapping the img,
   so we target nested text using complex selectors). */
.sg-offcanvas--cart .woocommerce-mini-cart-item > a:not(.remove),
.sg-offcanvas--cart .mini_cart_item > a:not(.remove) {
  grid-area: name;
  align-self: start;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--sg-color-ink, #1B1A17);
  text-decoration: none;
  padding-right: 8px;
}
.sg-offcanvas--cart .woocommerce-mini-cart-item > a:not(.remove):hover,
.sg-offcanvas--cart .mini_cart_item > a:not(.remove):hover {
  color: var(--sg-color-primary, #009A47);
}

/* Quantity / price line (WC outputs this as inline text outside the <a>) */
.sg-offcanvas--cart .woocommerce-mini-cart-item .quantity,
.sg-offcanvas--cart .mini_cart_item .quantity {
  grid-area: qty;
  align-self: end;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--sg-color-ink-2, #3B3833);
}
.sg-offcanvas--cart .woocommerce-mini-cart-item .quantity .woocommerce-Price-amount,
.sg-offcanvas--cart .mini_cart_item .quantity .woocommerce-Price-amount {
  color: var(--sg-color-ink, #1B1A17);
  font-weight: 700;
}

/* Remove (×) button — top-right of each row */
.sg-offcanvas--cart .woocommerce-mini-cart-item a.remove,
.sg-offcanvas--cart .mini_cart_item a.remove,
.sg-offcanvas--cart .woocommerce-mini-cart-item a.remove_from_cart_button,
.sg-offcanvas--cart .mini_cart_item a.remove_from_cart_button {
  grid-area: remove;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--sg-color-ink-2, #3B3833) !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  align-self: start;
  position: relative;
  top: -2px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sg-offcanvas--cart .woocommerce-mini-cart-item a.remove:hover,
.sg-offcanvas--cart .mini_cart_item a.remove:hover {
  background: var(--sg-color-ink, #1B1A17) !important;
  color: #fff !important;
}

/* Subtotal row — full-width band above the buttons */
.sg-offcanvas--cart .woocommerce-mini-cart__total,
.sg-offcanvas--cart p.woocommerce-mini-cart__total,
.sg-offcanvas--cart p.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: 18px 20px;
  border-top: 1px solid rgba(27, 26, 23, 0.12);
  background: var(--sg-color-cream-soft, #F4EBD9);
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--sg-color-ink, #1B1A17);
  flex-shrink: 0;
}
.sg-offcanvas--cart .woocommerce-mini-cart__total strong,
.sg-offcanvas--cart p.total strong {
  font-weight: 700;
}
.sg-offcanvas--cart .woocommerce-mini-cart__total .woocommerce-Price-amount,
.sg-offcanvas--cart p.total .woocommerce-Price-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--sg-color-ink, #1B1A17);
}

/* Buttons block — stacked, sticky to bottom */
.sg-offcanvas--cart .woocommerce-mini-cart__buttons,
.sg-offcanvas--cart p.woocommerce-mini-cart__buttons,
.sg-offcanvas--cart p.buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 16px 20px 20px;
  background: var(--sg-color-cream, #FBF5EC);
  flex-shrink: 0;
}
.sg-offcanvas--cart .woocommerce-mini-cart__buttons .button,
.sg-offcanvas--cart p.buttons .button,
.sg-offcanvas--cart p.buttons a.button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 18px;
  border-radius: 999px;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* "Afrekenen" — primary green, on top */
.sg-offcanvas--cart p.buttons .checkout,
.sg-offcanvas--cart p.buttons a.checkout,
.sg-offcanvas--cart p.buttons .wc-forward.checkout {
  order: 1;
  background: var(--sg-color-primary, #009A47) !important;
  color: #fff !important;
  border: 0 !important;
}
.sg-offcanvas--cart p.buttons .checkout:hover {
  background: #006B30 !important;
}

/* "Bekijk mandje" — ghost outline, below */
.sg-offcanvas--cart p.buttons .button:not(.checkout),
.sg-offcanvas--cart p.buttons a.button:not(.checkout) {
  order: 2;
  background: transparent !important;
  color: var(--sg-color-ink, #1B1A17) !important;
  border: 1.5px solid var(--sg-color-ink, #1B1A17) !important;
}
.sg-offcanvas--cart p.buttons .button:not(.checkout):hover {
  background: var(--sg-color-ink, #1B1A17) !important;
  color: #FBF5EC !important;
}

/* Empty cart state */
.sg-offcanvas--cart .woocommerce-mini-cart__empty-message {
  text-align: center;
  padding: 40px 20px;
  margin: 0;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 15px;
  color: var(--sg-color-ink-2, #3B3833);
}

/* ============================================================
   v9 — Mobile drawer polish: responsive width, arrow walker,
        icon-only head, footer contacts + social
   ============================================================ */

/* ── Ensure fixed positioning survives mobile aside:static override ─ */
.sg-offcanvas {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
}

/* ── Menu drawer responsive width ───────────────────────────── */
.sg-offcanvas--menu {
  width: 360px;
}
@media (max-width: 479px) {
  .sg-offcanvas--menu {
    width: min(calc(100vw - 48px), 360px);
  }
}

/* ── Icon-only head: close button right-aligned ──────────────── */
.sg-offcanvas__head--icon-only {
  justify-content: flex-end;
  padding: 14px 18px;
}

/* ── Menu item walker links ──────────────────────────────────── */
.sg-offcanvas__menu .sg-offcanvas__item {
  border-bottom: 1px solid #E8DFCE;
}
.sg-offcanvas__menu .sg-offcanvas__item:last-child { border-bottom: none; }
.sg-offcanvas__item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 4px;
  text-decoration: none;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sg-color-ink, #1B1A17);
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.sg-offcanvas__item-label { flex: 1 1 auto; }
.sg-offcanvas__item-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--sg-color-ink-2, #3B3833);
  transition: color 0.15s ease;
}
.sg-offcanvas__item-link:hover {
  color: var(--sg-color-primary, #009A47);
  padding-left: 8px;
}
.sg-offcanvas__item-link:hover .sg-offcanvas__item-arrow,
.current-menu-item .sg-offcanvas__item-arrow {
  color: var(--sg-color-primary, #009A47);
}

/* ── Off-canvas footer ───────────────────────────────────────── */
.sg-offcanvas__foot {
  border-top: 1px solid #E8DFCE;
  padding: 18px 22px 20px;
  background: #F4EBD9;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-offcanvas__foot-contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sg-offcanvas__foot-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  text-decoration: none;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 13px;
  color: var(--sg-color-ink, #1B1A17);
  background: #FBF5EC;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.sg-offcanvas__foot-link:hover { background: #E8DFCE; }
.sg-offcanvas__foot-link svg {
  color: var(--sg-color-primary, #009A47);
  flex-shrink: 0;
}
.sg-offcanvas__foot-social {
  display: flex;
  gap: 8px;
}
.sg-offcanvas__foot-social-link {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FBF5EC;
  border-radius: 10px;
  color: var(--sg-color-ink-2, #3B3833);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.sg-offcanvas__foot-social-link:hover {
  background: var(--sg-color-primary, #009A47);
  color: #fff;
}

/* CSS marker — bump on every revision so we can verify in DevTools */
.sg-css-version::before { content: "v9-drawer-polish"; }

/* ============================================================
   v1.0.16 — Cart drawer voet polish (final override)
   Forced last in file = wins on cascade.
   Fixes: items te krap, subtotaal tegen rand, knoppen tegen rand,
          geen bottom-padding na Bekijk mandje.
   ============================================================ */

/* Drawer body: krijgt geen eigen padding meer, items hebben hun eigen padding */
.sg-offcanvas--cart .sg-offcanvas__body {
  padding: 0 !important;
}

/* Items lijst: scrollt, met inner-padding aan zijkanten */
.sg-offcanvas--cart ul.woocommerce-mini-cart,
.sg-offcanvas--cart ul.cart_list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 20px !important;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Per-item: padding boven/onder + scheidingslijn */
.sg-offcanvas--cart .woocommerce-mini-cart-item,
.sg-offcanvas--cart li.mini_cart_item {
  padding: 18px 0 !important;
  border-bottom: 1px solid rgba(27, 26, 23, 0.10) !important;
  margin: 0 !important;
}
.sg-offcanvas--cart .woocommerce-mini-cart-item:last-child,
.sg-offcanvas--cart li.mini_cart_item:last-child {
  border-bottom: 0 !important;
}

/* Subtotaal-band: full-width band, met inner padding aan zijkanten */
.sg-offcanvas--cart p.woocommerce-mini-cart__total,
.sg-offcanvas--cart p.total {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  border-top: 1px solid rgba(27, 26, 23, 0.12) !important;
  background: var(--sg-color-cream-soft, #F4EBD9) !important;
  font-family: var(--sg-font-body, "Nunito", sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--sg-color-ink, #1B1A17) !important;
  flex-shrink: 0;
}

/* Buttons-block: cream achtergrond, padding rondom, gestapeld */
.sg-offcanvas--cart p.woocommerce-mini-cart__buttons,
.sg-offcanvas--cart p.buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 16px 20px 24px !important;
  background: var(--sg-color-cream, #FBF5EC) !important;
  flex-shrink: 0;
}

/* Beide buttons: full-width pill */
.sg-offcanvas--cart p.buttons .button,
.sg-offcanvas--cart p.buttons a.button {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border-radius: 999px !important;
  font-family: var(--sg-font-body, "Nunito", sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* Afrekenen: groen primary, BOVEN */
.sg-offcanvas--cart p.buttons .checkout,
.sg-offcanvas--cart p.buttons a.checkout,
.sg-offcanvas--cart p.buttons .wc-forward.checkout {
  order: 1 !important;
  background: var(--sg-color-primary, #009A47) !important;
  color: #fff !important;
  border: 0 !important;
}
.sg-offcanvas--cart p.buttons .checkout:hover {
  background: #006B30 !important;
}

/* Bekijk mandje: ghost outline, ONDER */
.sg-offcanvas--cart p.buttons .button:not(.checkout):not(.wc-forward),
.sg-offcanvas--cart p.buttons .wc-forward:not(.checkout) {
  order: 2 !important;
  background: transparent !important;
  color: var(--sg-color-ink, #1B1A17) !important;
  border: 1.5px solid var(--sg-color-ink, #1B1A17) !important;
}
.sg-offcanvas--cart p.buttons .button:not(.checkout):not(.wc-forward):hover,
.sg-offcanvas--cart p.buttons .wc-forward:not(.checkout):hover {
  background: var(--sg-color-ink, #1B1A17) !important;
  color: #FBF5EC !important;
}

/* Marker bump */
.sg-css-version::before { content: "v11-cart-voet"; }

/* ============================================================
   v12-drawer-final
   440px drawer, 24px padding throughout, 72px thumb,
   subtotal price weight 600, free-shipping progress band.
   All rules use !important to win over v8/v11 cascade.
   ============================================================ */

/* Drawer width */
.sg-offcanvas--cart {
  width: min(440px, 92vw) !important;
}

/* Items list: 24px side padding */
.sg-offcanvas--cart ul.woocommerce-mini-cart,
.sg-offcanvas--cart ul.cart_list {
  padding: 0 24px !important;
}

/* Per-item grid: 72px thumb, 16px gap, 22px vertical padding */
.sg-offcanvas--cart .woocommerce-mini-cart-item,
.sg-offcanvas--cart li.mini_cart_item {
  grid-template-columns: 72px 1fr 28px !important;
  column-gap: 16px !important;
  padding: 22px 0 !important;
}

/* Thumb: 72px */
.sg-offcanvas--cart .woocommerce-mini-cart-item img,
.sg-offcanvas--cart .mini_cart_item img {
  width: 72px !important;
  height: 72px !important;
}

/* Name: line-height 1.35, bottom gap 6px */
.sg-offcanvas--cart .woocommerce-mini-cart-item > a:not(.remove),
.sg-offcanvas--cart .mini_cart_item > a:not(.remove) {
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
}

/* Subtotal band: 24px side padding */
.sg-offcanvas--cart p.woocommerce-mini-cart__total,
.sg-offcanvas--cart p.total {
  padding: 18px 24px !important;
}

/* Subtotal price: weight 600 (not 800) */
.sg-offcanvas--cart .woocommerce-mini-cart__total .woocommerce-Price-amount,
.sg-offcanvas--cart p.total .woocommerce-Price-amount {
  font-weight: 600 !important;
}

/* Buttons block: 16px 24px 24px */
.sg-offcanvas--cart p.woocommerce-mini-cart__buttons,
.sg-offcanvas--cart p.buttons {
  padding: 16px 24px 24px !important;
}

/* ── Free-shipping progress band ──────────────────────────── */
.sg-cart-shipping-band {
  padding: 14px 24px 16px;
  background: var(--sg-color-cream-soft, #F4EBD9);
  border-bottom: 1px solid rgba(27, 26, 23, 0.10);
  flex-shrink: 0;
}
.sg-cart-shipping-band[hidden] {
  display: none !important;
}
.sg-cart-shipping-band__text {
  font-family: var(--sg-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: 13px;
  color: var(--sg-color-ink-2, #3B3833);
  margin-bottom: 8px;
}
.sg-cart-shipping-band__text strong {
  color: var(--sg-color-ink, #1B1A17);
}
.sg-cart-shipping-band__text--done {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--sg-color-primary, #009A47);
}
.sg-cart-shipping-band__check {
  flex-shrink: 0;
}
.sg-cart-shipping-band__track {
  height: 6px;
  background: rgba(27, 26, 23, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.sg-cart-shipping-band__fill {
  height: 100%;
  background: var(--sg-color-primary, #009A47);
  border-radius: 999px;
  transition: width 240ms cubic-bezier(.2, .7, .2, 1);
}

/* CSS version marker */
.sg-css-version::before { content: "v12-drawer-final"; }

/* ============================================================
   v13-cart-items
   Card layout per item, 64px thumb col, .sg-cart-item__content
   middle col, Caprasimo subtotal price, stepper pill.
   ============================================================ */

/* Items list: flex column so cards can have gap */
.sg-offcanvas--cart ul.woocommerce-mini-cart,
.sg-offcanvas--cart ul.cart_list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 16px 24px !important;
}

/* Each item: card + single-row grid — thumb | content | remove */
.sg-offcanvas--cart .woocommerce-mini-cart-item,
.sg-offcanvas--cart li.mini_cart_item {
  display: grid !important;
  grid-template-columns: 64px 1fr auto !important;
  grid-template-rows: auto !important;
  grid-template-areas: "thumb content remove" !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  align-items: center !important;
  padding: 12px !important;
  border: 1px solid var(--sg-border, #E8DFCE) !important;
  border-radius: 14px !important;
  background: var(--sg-paper, #FFFFFF) !important;
}
/* Cancel the old last-child "no border" rule */
.sg-offcanvas--cart .woocommerce-mini-cart-item:last-child,
.sg-offcanvas--cart li.mini_cart_item:last-child {
  border: 1px solid var(--sg-border, #E8DFCE) !important;
  border-bottom: 1px solid var(--sg-border, #E8DFCE) !important;
}

/* Thumb: product link becomes image-only column; text node hidden */
.sg-offcanvas--cart .woocommerce-mini-cart-item > a:not(.remove),
.sg-offcanvas--cart li.mini_cart_item > a:not(.remove) {
  grid-area: thumb !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  flex-shrink: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
}
.sg-offcanvas--cart .woocommerce-mini-cart-item > a:not(.remove) img,
.sg-offcanvas--cart li.mini_cart_item > a:not(.remove) img {
  grid-area: unset !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Content wrapper: title + subtitle + stepper */
.sg-cart-item__content {
  grid-area: content !important;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Title */
.sg-cart-item__title {
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 800;
  font-size: 14px;
  color: var(--sg-ink, #1B1A17);
  margin: 0 0 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtitle "City · €price" */
.sg-cart-item__sub {
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 12px;
  color: var(--sg-ink-3, #6B6660);
  margin: 0 0 6px;
  line-height: 1.3;
}

/* Remove button */
.sg-offcanvas--cart .woocommerce-mini-cart-item a.remove,
.sg-offcanvas--cart li.mini_cart_item a.remove,
.sg-offcanvas--cart .woocommerce-mini-cart-item a.remove_from_cart_button,
.sg-offcanvas--cart li.mini_cart_item a.remove_from_cart_button {
  grid-area: remove !important;
  align-self: center !important;
  top: 0 !important;
}

/* Stepper pill */
.sg-cart-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sg-border, #E8DFCE);
  border-radius: 999px;
  padding: 2px;
  background: transparent;
}
.sg-cart-stepper__btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--sg-ink, #1B1A17);
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--sg-dur-fast, 140ms);
}
.sg-cart-stepper__btn:hover {
  background: var(--sg-cream-soft, #F4EBD9);
}
.sg-cart-stepper__qty {
  min-width: 22px;
  text-align: center;
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 800;
  font-size: 13px;
  color: var(--sg-ink, #1B1A17);
}

/* Subtotal price: Caprasimo 28px, no weight override */
.sg-offcanvas--cart .woocommerce-mini-cart__total .woocommerce-Price-amount,
.sg-offcanvas--cart p.total .woocommerce-Price-amount {
  font-family: var(--sg-font-display, "Caprasimo", serif) !important;
  font-size: 28px !important;
  font-weight: normal !important;
}
/* Subtotal row: baseline alignment */
.sg-offcanvas--cart p.woocommerce-mini-cart__total,
.sg-offcanvas--cart p.total {
  align-items: baseline !important;
}

/* CSS version marker */
.sg-css-version::before { content: "v13-cart-items"; }

/* ============================================================
   v1.0.16 — stepper width fix (final touch)
   ============================================================ */
.sg-cart-stepper {
  width: max-content !important;
  flex: 0 0 auto !important;
}

.sg-css-version::before { content: "v14-stepper-width"; }

/* ============================================================
   v1.0.16 — empty-cart badge hide (belt-en-braces)
   ============================================================ */
.sg-header__cart-count[hidden],
.sg-header__cart-count[data-count="0"],
.sg-header__cart-count:empty {
  display: none !important;
}

.sg-css-version::before { content: "v15-empty-badge"; }

/* v1.0.17 focus-state fix voor header buttons */
.sg-header__cart:focus,
.sg-header__menu-btn:focus,
.sg-header__search-btn:focus,
.sg-header__user-btn:focus,
.sg-header__icon:focus,
.sg-offcanvas__close:focus {
  outline: none;
  background: transparent;
}
.sg-header__cart:focus-visible,
.sg-header__menu-btn:focus-visible,
.sg-header__search-btn:focus-visible,
.sg-header__user-btn:focus-visible,
.sg-header__icon:focus-visible,
.sg-offcanvas__close:focus-visible {
  outline: 2px solid var(--sg-color-primary, #009A47);
  outline-offset: 2px;
}
.sg-header__cart:hover,
.sg-header__menu-btn:hover,
.sg-header__search-btn:hover,
.sg-header__user-btn:hover,
.sg-header__icon:hover {
  background: var(--sg-cream-soft);
}
.sg-header__cart:active,
.sg-header__menu-btn:active,
.sg-header__search-btn:active,
.sg-header__user-btn:active {
  background: var(--sg-cream-soft);
  transform: scale(0.97);
}
.sg-css-version::before { content: "v16-focus-fix"; }


/* v1.0.17 hover + focus state — final pass, win cascade with !important */
.sg-header__cart:hover,
.sg-header__menu-btn:hover,
.sg-header__search-btn:hover,
.sg-header__user-btn:hover,
.sg-header__icon:hover {
  background: var(--sg-cream-soft) !important;
  color: var(--sg-ink, #1B1A17) !important;
}

.sg-header__cart:hover .sg-header__cart-count {
  background: var(--sg-color-primary, #009A47) !important;
  color: #fff !important;
}

.sg-header__cart:focus:not(:focus-visible),
.sg-header__menu-btn:focus:not(:focus-visible),
.sg-header__search-btn:focus:not(:focus-visible),
.sg-header__user-btn:focus:not(:focus-visible),
.sg-header__icon:focus:not(:focus-visible) {
  background: transparent !important;
  color: var(--sg-ink, #1B1A17) !important;
  outline: none !important;
  box-shadow: none !important;
}

.sg-header__cart:focus-visible,
.sg-header__menu-btn:focus-visible,
.sg-header__search-btn:focus-visible,
.sg-header__user-btn:focus-visible,
.sg-header__icon:focus-visible {
  outline: 2px solid var(--sg-color-primary, #009A47) !important;
  outline-offset: 2px !important;
  background: transparent !important;
}

.sg-css-version::before { content: "v17-hover-focus-final"; }

/* ═══════════════════════════════════════════════════════════════════
   v18-pdp — Single Product Page skeleton
   ═══════════════════════════════════════════════════════════════════ */

/* ── Grid wrapper ────────────────────────────────────────────────── */
.sg-pdp {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 96px;
}
.sg-pdp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ── Info column — sticky ─────────────────────────────────────────── */
.sg-pdp__info-col {
  position: sticky;
  top: 32px;
}

/* ── Product title ────────────────────────────────────────────────── */
.sg-pdp .product_title {
  font-family: var(--sg-font-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--sg-ink);
}

/* ── Short description ────────────────────────────────────────────── */
.sg-pdp .woocommerce-product-details__short-description {
  font-size: 16px;
  line-height: 1.55;
  color: var(--sg-ink-2);
  margin-bottom: 24px;
}

/* ── Gallery ──────────────────────────────────────────────────────── */
.sg-pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sg-pdp-gallery__main {
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: var(--sg-accent-soft);
  box-shadow: var(--sg-shadow-md);
}
.sg-pdp-gallery__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sg-pdp-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sg-pdp-gallery__thumb {
  padding: 0;
  background: transparent;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--sg-border);
  cursor: pointer;
  transition: border-color 120ms;
}
.sg-pdp-gallery__thumb.is-active { border: 1.5px solid var(--sg-ink); }
.sg-pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Price card ───────────────────────────────────────────────────── */
.sg-pdp-price-card {
  padding: 24px;
  background: var(--sg-paper);
  border-radius: 20px;
  border: 1px solid var(--sg-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.sg-pdp-price-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.sg-pdp-price-card__price {
  font-family: var(--sg-font-display);
  font-size: 48px;
  color: var(--sg-ink);
  line-height: 1;
}
.sg-pdp-price-card__price .woocommerce-Price-amount,
.sg-pdp-price-card__price .woocommerce-Price-currencySymbol {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.sg-pdp-price-card__shipping {
  font-size: 12px;
  color: var(--sg-ink-3);
  text-align: right;
  max-width: 16ch;
  align-self: center;
}
.sg-pdp-price-card__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ── PDP qty stepper ──────────────────────────────────────────────── */
.sg-pdp-stepper {
  display: flex;
  align-items: center;
  background: var(--sg-cream-soft);
  border-radius: 999px;
  padding: 4px;
  flex-shrink: 0;
  gap: 0;
}
.sg-pdp-stepper__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--sg-paper);
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sg-shadow-xs);
  transition: background 120ms;
}
.sg-pdp-stepper__btn:hover { background: var(--sg-border); }
.sg-pdp-stepper__qty {
  min-width: 32px;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  color: var(--sg-ink);
}

/* ATC button fills remaining width in flex row */
.sg-pdp-atc { flex: 1; }

/* ── Facts strip ──────────────────────────────────────────────────── */
.sg-pdp-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sg-pdp-facts__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--sg-cream-soft);
  border-radius: 14px;
  font-weight: 700;
  font-size: 13px;
  color: var(--sg-ink);
}
.sg-pdp-facts__icon { font-size: 16px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sg-pdp__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sg-pdp__info-col { position: static; }
  .sg-pdp-price-card__price { font-size: 36px; }
  .sg-pdp-facts { grid-template-columns: 1fr 1fr; }
}

/* ── CSS version marker ───────────────────────────────────────────── */
.sg-css-version::before { content: "v18-pdp"; }

/* ═══════════════════════════════════════════════════════════════════
   v19-pdp-complete — PDP full rebuild (v1.0.19b)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.sg-pdp__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sg-space-2);
  margin-bottom: var(--sg-space-6);
  font-size: 13px;
  color: var(--sg-ink-2);
}
.sg-pdp__breadcrumb a {
  color: var(--sg-ink-2);
  text-decoration: none;
}
.sg-pdp__breadcrumb a:hover { text-decoration: underline; }

/* ── Eyebrow ──────────────────────────────────────────────────────── */
.sg-pdp__eyebrow {
  font-family: var(--sg-font-body, inherit);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-accent-deep, var(--sg-ink));
  margin-bottom: var(--sg-space-3);
}

/* ── USP badges ───────────────────────────────────────────────────── */
.sg-pdp__usps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: var(--sg-space-6);
}
.sg-pdp__usp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--sg-cream-soft, #F4EBD9);
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--sg-ink);
}
.sg-pdp__usp svg { flex-shrink: 0; }

/* ATC colour handled by .sg-btn-primary via --sg-accent (city theme) */

/* ── Gallery sticker — positioned absolutely, colour from .sg-sticker + city theme ── */
.sg-pdp-gallery__sticker {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
}

/* ── Tabs card ────────────────────────────────────────────────────── */
.sg-pdp-tabs-card {
  margin-top: var(--sg-space-16, 64px);
  background: var(--sg-paper, #ffffff);
  border-radius: 24px;
  border: 1px solid var(--sg-border, rgba(27,26,23,.12));
  overflow: hidden;
}
.sg-pdp-tabs {
  display: flex;
  border-bottom: 1px solid var(--sg-border, rgba(27,26,23,.12));
  background: var(--sg-cream-soft, #F4EBD9);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sg-pdp-tabs::-webkit-scrollbar { display: none; }

.sg-pdp-tab {
  flex-shrink: 0;
  padding: 18px 24px;
  font-weight: 700;
  font-size: 14px;
  color: var(--sg-ink-2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.sg-pdp-tab:hover { color: var(--sg-ink); }
.sg-pdp-tab[data-active="true"] {
  color: var(--sg-ink);
  border-bottom-color: var(--sg-accent);
}

/* ── Tab body ─────────────────────────────────────────────────────── */
.sg-pdp-tabs-body { padding: 32px 40px; min-height: 200px; }
.sg-pdp-tab-body { }
.sg-pdp-tab-body__content { line-height: var(--sg-line-height-relaxed, 1.7); }

/* Ingrediënten: 2-col grid */
.sg-pdp-tab-body--ingredienten .sg-pdp-tab-body__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.sg-pdp-tab-body__ingredients {
  font-size: 14px;
  line-height: var(--sg-line-height-relaxed, 1.7);
  color: var(--sg-ink-2);
}
.sg-pdp-tab-body__usps { display: flex; flex-direction: column; gap: 8px; }
.sg-pdp-tab-body__usp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--sg-cream-soft, #F4EBD9);
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--sg-ink);
}
.sg-pdp-tab-body__usp-item svg { flex-shrink: 0; }

/* Voedingswaarde table */
.sg-pdp-nutrition-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 560px;
  font-size: 14px;
}
.sg-pdp-nutrition-table th,
.sg-pdp-nutrition-table td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--sg-border, rgba(27,26,23,.1));
}
.sg-pdp-nutrition-table thead th {
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-ink-2);
}
.sg-pdp-nutrition-table tbody tr:last-child td { border-bottom: none; }
.sg-pdp-nutrition-table tbody tr:nth-child(even) td {
  background: var(--sg-cream-soft, #F4EBD9);
}

/* Bewaaradvies grid */
.sg-pdp-bewaaradvies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.sg-pdp-bewaaradvies__heading {
  font-family: var(--sg-font-body, "Nunito", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-ink-2);
  margin: 0 0 8px;
}
.sg-pdp-bewaaradvies__section p {
  font-size: 14px;
  line-height: var(--sg-line-height-relaxed, 1.7);
  margin: 0;
  color: var(--sg-ink);
}

/* ── Sticky CTA ───────────────────────────────────────────────────── */
.sg-pdp-sticky-cta { display: none; } /* JS adds .is-visible */

/* ── Responsive — Sticky CTA on ≤720px ───────────────────────────── */
@media (max-width: 720px) {
  .sg-pdp-price-card { display: none !important; }

  .sg-pdp-sticky-cta.is-visible {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 61;
    background: var(--sg-cream, #FBF5EC);
    border-top: 1px solid var(--sg-border, rgba(27,26,23,.12));
    box-shadow: 0 -4px 24px rgba(27,26,23,.12);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .sg-pdp-sticky-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sg-space-4);
  }
  .sg-pdp-sticky-cta__price {
    font-family: var(--sg-font-display);
    font-size: 24px;
    color: var(--sg-ink);
    line-height: 1;
  }
  .sg-pdp-sticky-cta__sub {
    font-size: 11px;
    color: var(--sg-ink-3);
    font-weight: 600;
    margin-top: 2px;
  }
  .sg-pdp-sticky-cta .sg-btn { flex-shrink: 0; }
}

/* ── Responsive — Tabs on ≤768px ─────────────────────────────────── */
@media (max-width: 768px) {
  .sg-pdp-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-x: unset;
  }
  .sg-pdp-tab {
    padding: 14px 12px;
    font-size: 13px;
    text-align: center;
    border-right: 1px solid var(--sg-border, rgba(27,26,23,.12));
    border-bottom: 1px solid var(--sg-border, rgba(27,26,23,.12));
    margin-bottom: 0;
  }
  .sg-pdp-tab:nth-child(even) { border-right: none; }
  .sg-pdp-tab:nth-child(n+3) { border-bottom: none; }
  .sg-pdp-tab[data-active="true"] {
    border-bottom-color: transparent !important;
    box-shadow: inset 0 -2px 0 var(--sg-accent);
  }
  .sg-pdp-tabs-body { padding: 24px 20px; }
  .sg-pdp-tab-body--ingredienten .sg-pdp-tab-body__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sg-pdp__usps { grid-template-columns: 1fr 1fr; }
  .sg-pdp__breadcrumb { font-size: 12px; }
}

/* ── CSS version marker ───────────────────────────────────────────── */
.sg-css-version::before { content: "v19-pdp-complete"; }

/* ═══════════════════════════════════════════════════════════════════
   v21-token-audit — design-ref alignment (v1.0.20a)
   ═══════════════════════════════════════════════════════════════════ */

/* Gallery main needs position:relative so the circle sticker can be absolute */
.sg-pdp-gallery__main { position: relative; }

/* USP icon colour — accent-deep per design-ref (screens.jsx:340) */
.sg-pdp__usp svg,
.sg-pdp-tab-body__usp-item svg { color: var(--sg-accent-deep); }

/* Tabs card — mobile tweaks matching design-ref components.css:505 */
@media (max-width: 720px) {
  .sg-pdp-tabs-card {
    margin-top: 32px;
    border-radius: 18px;
  }
  .sg-pdp-tabs-body { padding: 20px 18px; }
}

/* ── CSS version marker ───────────────────────────────────────────── */
.sg-css-version::before { content: "v21-token-audit"; }

/* ═══════════════════════════════════════════════════════════════════
   v22-pdp-polish — nutrition table + misc PDP fixes (v1.0.20a)
   ═══════════════════════════════════════════════════════════════════ */

/* Nutrition table — fix column alignment per design-ref screens.jsx:497 */
.sg-pdp-nutrition-table { max-width: 600px; }
.sg-pdp-nutrition-table thead th {
  font-weight: 500;
  text-align: left;
  font-size: var(--sg-fs-sm);
}
.sg-pdp-nutrition-table tbody td:first-child {
  text-align: left;
  font-weight: 400;
  font-size: var(--sg-fs-sm);
}
.sg-pdp-nutrition-table tbody td:last-child {
  text-align: right;
  font-weight: 700;
  font-size: var(--sg-fs-sm);
}

/* ── CSS version marker ───────────────────────────────────────────── */
.sg-css-version::before { content: "v22-pdp-polish"; }

/* ═══════════════════════════════════════════════════════════════════
   v23-header-polish — header CSS fallbacks (v1.0.20a)
   ═══════════════════════════════════════════════════════════════════ */

/* Logo height fallback — Elementor sets it but CSS wins if absent */
.sg-header img,
.elementor-widget-image a img,
header .site-logo img,
header .custom-logo { height: 28px; width: auto; display: block; }

/* Nav active link colour */
.sg-header__nav a[aria-current="page"],
.elementor-nav-menu .current-menu-item > a,
.elementor-nav-menu .current_page_item > a {
  color: var(--sg-accent-deep);
}
.sg-header__nav a:hover,
.elementor-nav-menu--main .elementor-item:hover {
  color: var(--sg-accent-deep);
}

/* ── CSS version marker ───────────────────────────────────────────── */
.sg-css-version::before { content: "v23-header-polish"; }

/* ═══════════════════════════════════════════════════════════════════
   v27-design-ref-conformity — full design-ref alignment (v1.0.20a-fixes-2)
   ═══════════════════════════════════════════════════════════════════ */

/* ── FIX 2: PDP long description ─────────────────────────────────── */
.sg-pdp__description {
  margin-top: 24px;
  max-width: 580px;
  font-family: var(--sg-font-body);
  font-size: var(--sg-fs-base, 17px);
  line-height: var(--sg-lh-normal, 1.45);
  color: var(--sg-ink-2);
}
.sg-pdp__description p { margin: 0 0 12px; }
.sg-pdp__description p:last-child { margin-bottom: 0; }

/* ── FIX 4: Tabs — exact design-ref tokens ────────────────────────── */
.sg-pdp-tabs-card {
  margin-top: 72px;
  background: var(--sg-paper);
  border-radius: 24px;
  border: 1px solid var(--sg-border);
  overflow: hidden;
}
.sg-pdp-tabs {
  display: flex;
  border-bottom: 1px solid var(--sg-border);
  background: var(--sg-cream-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sg-pdp-tabs::-webkit-scrollbar { display: none; }
.sg-pdp-tab {
  flex-shrink: 0;
  padding: 18px 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--sg-ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.sg-pdp-tab:focus,
.sg-pdp-tab:focus-visible {
  outline: none;
  box-shadow: none;
}
.sg-pdp-tab:hover:not([data-active="true"]) {
  color: var(--sg-ink-2);
  background: rgba(255,255,255,0.4);
}
.sg-pdp-tab[data-active="true"] {
  color: var(--sg-ink) !important;
  border-bottom-color: var(--sg-accent) !important;
}
.sg-pdp-tabs-body {
  padding: 32px 40px;
  min-height: 200px;
}

/* ── FIX 7: Nutrition table — no zebra, single Per 100g header ───── */
.sg-pdp-nutrition-table {
  width: 100%;
  max-width: 560px;
  border-collapse: collapse;
  font-family: var(--sg-font-body);
}
.sg-pdp-nutrition-table thead th {
  text-align: left;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-ink-3);
  border-bottom: 1px solid var(--sg-border);
  background: transparent !important;
}
.sg-pdp-nutrition-table tbody td {
  padding: 10px 0;
  border-bottom: 1px solid var(--sg-border);
  font-size: 14px;
  background: transparent !important;
}
.sg-pdp-nutrition-table tbody tr:last-child td { border-bottom: none; }
.sg-pdp-nutrition-table tbody td:first-child {
  color: var(--sg-ink-2);
  font-weight: 400;
}
.sg-pdp-nutrition-table tbody td:last-child {
  font-weight: 700;
  color: var(--sg-ink);
  text-align: right;
}
/* Kill legacy zebra — these rows no longer get a background */
.sg-pdp-nutrition-table tbody tr:nth-child(even) td { background: transparent !important; }

/* ── FIX 8: Ingrediënten tab grid ────────────────────────────────── */
.sg-pdp-tab-body__ingr-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ── Allergenen tab grid ─────────────────────────────────────────── */
.sg-pdp-tab-body__allerg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.sg-pdp-tab-body__allerg-heading {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 16px;
  color: var(--sg-ink);
  margin: 0 0 8px;
}
.sg-pdp-tab-body__allerg-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-pdp-tab-body__allerg-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sg-font-body);
  font-size: 14px;
  color: var(--sg-ink-2);
}
.sg-pdp-tab-body__allerg-check { color: var(--sg-accent); flex-shrink: 0; }

/* ── Verzending tab grid ─────────────────────────────────────────── */
.sg-pdp-tab-body__shipping-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.sg-pdp-tab-body__shipping-heading {
  font-family: var(--sg-font-display);
  font-size: 22px;
  color: var(--sg-ink);
  margin: 0 0 8px;
  font-weight: 400;
}

/* ── FIX 9: Sticky CTA button flex ──────────────────────────────── */
@media (max-width: 720px) {
  .sg-pdp-sticky-cta .sg-btn { flex: 1 1 auto !important; min-width: 0; }
}

/* ── FIX 11: Price-card shipping caption ─────────────────────────── */
.sg-pdp-price-card__shipping {
  font-size: var(--sg-fs-sm, 14px);
  font-weight: 600;
  color: var(--sg-ink-3);
  text-align: right;
  max-width: 16ch;
  align-self: center;
}

/* ── Mobile responsive — v27 tab layout ─────────────────────────── */
@media (max-width: 768px) {
  .sg-pdp-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-x: unset;
  }
  .sg-pdp-tab {
    padding: 13px 10px;
    font-size: 13px;
    text-align: center;
    white-space: normal;
    border-right: 1px solid var(--sg-border);
    border-bottom: 1px solid var(--sg-border);
    margin-bottom: 0;
  }
  .sg-pdp-tab:nth-child(2n) { border-right: none; }
  .sg-pdp-tab:nth-child(n+3) { border-bottom: none; }
  .sg-pdp-tab[data-active="true"] {
    border-bottom-color: transparent !important;
    box-shadow: inset 0 -2px 0 0 var(--sg-accent);
  }
  .sg-pdp-tabs-body { padding: 20px 18px; }
  .sg-pdp-tab-body__ingr-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sg-pdp-tab-body__allerg-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sg-pdp-tab-body__shipping-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── CSS version marker ───────────────────────────────────────────── */
.sg-css-version::before { content: "v27-design-ref-conformity"; }

/* ═══════════════════════════════════════════════════════════════════
   v28-final-final — 3 polish fixes (v1.0.20a-fixes-3)
   ROOT CAUSE MAGENTA: Hello Elementor reset.css sets
   button:focus, button:hover { background-color: #c36 } (#cc3366).
   When an active tab retains :focus after click, that rule fires.
   ═══════════════════════════════════════════════════════════════════ */

/* FIX 1 — Kill Hello Elementor's #c36 magenta on tab focus/hover/active */
.sg-pdp-tab {
  background: transparent !important;
  color: var(--sg-ink-3) !important;
}
.sg-pdp-tab:hover,
.sg-pdp-tab:focus,
.sg-pdp-tab:focus-visible,
.sg-pdp-tab:active {
  background: transparent !important;
  color: var(--sg-ink-2) !important;
  outline: none !important;
  box-shadow: none !important;
}
.sg-pdp-tab[data-active="true"],
.sg-pdp-tab[data-active="true"]:hover,
.sg-pdp-tab[data-active="true"]:focus,
.sg-pdp-tab[data-active="true"]:focus-visible,
.sg-pdp-tab[data-active="true"]:active {
  background: transparent !important;
  color: var(--sg-ink) !important;
  border-bottom: 2px solid var(--sg-accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* FIX 2 — Consistent h4 headings inside tab card: Nunito 16px 800 */
.sg-pdp-tabs-body h4 {
  font-family: var(--sg-font-body) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--sg-ink) !important;
  margin: 0 0 8px !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

/* FIX 3 — USP badges in Ingrediënten tab: accent-deep color */
.sg-pdp-tab-body__usps .sg-pdp-tab-body__usp-item {
  color: var(--sg-ink) !important;
}
.sg-pdp-tab-body__usps .sg-pdp-tab-body__usp-item svg {
  color: var(--sg-accent-deep) !important;
}

/* ── CSS version marker ───────────────────────────────────────────── */
.sg-css-version::before { content: "v28-final-final"; }

/* ═══════════════════════════════════════════════════════════════════
   v29-nutrition-exact — voedingstabel exact design-ref (v1.0.20a-fixes-4)
   Overrides Hello Elementor reset.css table defaults (borders, zebra,
   15px padding) with !important throughout.
   ═══════════════════════════════════════════════════════════════════ */

.sg-pdp-nutrition-table {
  width: 100% !important;
  max-width: 560px !important;
  border: none !important;
  border-collapse: collapse !important;
  font-family: var(--sg-font-body) !important;
  background: transparent !important;
}

.sg-pdp-nutrition-table thead th,
.sg-pdp-nutrition-table tbody td {
  border: none !important;
  border-bottom: 1px solid var(--sg-border) !important;
  padding: 10px 0 !important;
  background: transparent !important;
}

.sg-pdp-nutrition-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-ink-3);
}

.sg-pdp-nutrition-table thead th:last-child {
  text-align: right;
}

.sg-pdp-nutrition-table tbody td:first-child {
  font-size: 14px;
  color: var(--sg-ink-2);
}

.sg-pdp-nutrition-table tbody td:last-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--sg-ink);
  text-align: right;
}

.sg-pdp-nutrition-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ── CSS version marker ───────────────────────────────────────────── */
.sg-css-version::before { content: "v29-nutrition-exact"; }

/* ═══════════════════════════════════════════════════════════════════
   v30-city-theming — welcome script, flag strip, bg-tint (v1.0.20b)
   ═══════════════════════════════════════════════════════════════════ */

/* FIX 1 — Welcome script */
.sg-pdp__welcome {
  font-family: var(--sg-font-script, "Caveat", cursive);
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1;
  color: var(--sg-accent);
  transform: rotate(-2deg);
  display: inline-block;
  margin: 0 0 18px;
  letter-spacing: 0;
}

/* Den Haag: yellow accent on cream = low contrast → use deeper gold */
.theme-denhaag .sg-pdp__welcome {
  color: var(--sg-accent-deep);
}

@media (max-width: 720px) {
  .sg-pdp__welcome {
    font-size: 28px;
    margin-bottom: 12px;
  }
}

/* FIX 2 — Flag strip */
.sg-pdp__flag {
  display: inline-flex;
  gap: 0;
  height: 6px;
  width: 48px;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 24px;
}

.sg-pdp__flag span {
  flex: 1;
  display: block;
}

@media (max-width: 720px) {
  .sg-pdp__flag {
    height: 5px;
    width: 40px;
    margin-bottom: 18px;
  }
}

/* ── CSS version marker ───────────────────────────────────────────── */
.sg-css-version::before { content: "v31-no-bg-tint"; }

/* ═════════════════════════════════════════════════════════════════
   PLP — Product List Page (v1.0.21b consolidated)
   ═════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.sg-plp {
  padding: 48px 0 96px;
  background: var(--sg-cream);
}

/* Header */
.sg-plp__header { margin-bottom: 32px; }

.sg-plp__title {
  font-family: var(--sg-font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  color: var(--sg-ink);
  margin: 0 0 12px;
}

.sg-plp__lead {
  font-size: 17px;
  line-height: 1.5;
  color: var(--sg-ink-2);
  max-width: 640px;
  margin: 0;
}

/* Filter pills */
.sg-plp__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

/* Picker strip inside filter nav */
.sg-plp__picker-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Toolbar */
.sg-plp__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--sg-ink-2);
}

.sg-plp__toolbar .woocommerce-result-count {
  margin: 0;
  font-size: 14px;
  color: var(--sg-ink-2);
}

.sg-plp__toolbar .woocommerce-ordering { margin: 0; }

.sg-plp__toolbar .woocommerce-ordering select {
  background: var(--sg-paper);
  border: 1px solid var(--sg-border);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--sg-ink);
  cursor: pointer;
}

/* Grid */
.sg-plp .products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card */
.sg-plp .sg-product {
  background: var(--sg-paper, #FFFFFF);
  border: 1px solid var(--sg-border, rgba(0,0,0,0.06));
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 200ms, box-shadow 200ms;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-plp .sg-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

/* Link wraps media + body — NIET absolute */
.sg-plp .sg-product__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  flex: 1;
  position: relative;
}

.sg-plp .sg-product__link:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: -4px;
  border-radius: 24px;
}

/* Media */
.sg-plp .sg-product__media {
  aspect-ratio: 1 / 1;
  background: var(--sg-accent-soft, var(--sg-cream-soft, #FBF5EC));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-plp .sg-product__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 24px;
  transition: transform 300ms ease;
}

.sg-plp .sg-product:hover .sg-product__media img {
  transform: scale(1.03);
}

/* Badge (pack label, Caveat) */
.sg-plp .sg-product__badge {
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: var(--sg-font-script);
  font-size: 22px;
  color: var(--sg-accent);
  line-height: 1;
  z-index: 2;
}

/* Sticker (city stamp circle) */
.sg-plp .sg-product__sticker {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sg-accent);
  color: var(--sg-accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sg-font-script);
  font-size: 14px;
  text-align: center;
  transform: rotate(-8deg);
  line-height: 1;
  z-index: 2;
}

/* Body */
.sg-plp .sg-product__body {
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.sg-plp .sg-product__eyebrow {
  font-family: var(--sg-font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-ink-2);
  margin: 0;
}

.sg-plp .sg-product__title {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
  color: var(--sg-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sg-plp .sg-product__price {
  font-family: var(--sg-font-display);
  font-size: 22px;
  color: var(--sg-ink);
  line-height: 1;
  margin: 4px 0 0;
}

.sg-plp .sg-product__price .woocommerce-Price-amount {
  font-family: inherit;
}

/* Footer (ATC) */
.sg-plp .sg-product__footer {
  padding: 0 20px 20px;
}

.sg-plp .sg-product__footer .add_to_cart_button,
.sg-plp .sg-product__footer .sg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--sg-accent, var(--sg-color-primary));
  color: var(--sg-accent-contrast, #FFFFFF);
  border: none;
  border-radius: 14px;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms;
  white-space: nowrap;
  box-sizing: border-box;
}

.sg-plp .sg-product__footer .add_to_cart_button:hover,
.sg-plp .sg-product__footer .sg-btn:hover {
  filter: brightness(0.93);
}

/* Responsive */
@media (max-width: 1024px) {
  .sg-plp .products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 720px) {
  .sg-plp {
    padding: 32px 0 64px;
  }
  .sg-plp .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .sg-plp__filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .sg-plp__filter::-webkit-scrollbar { display: none; }
  .sg-plp__picker-strip {
    flex-wrap: nowrap;
  }
  .sg-plp__picker-strip .sg-pill { flex-shrink: 0; }
  .sg-plp__toolbar { flex-wrap: wrap; }
  .sg-plp__title { font-size: 36px; }
  .sg-plp .sg-product__body { padding: 14px 14px 8px; }
  .sg-plp .sg-product__title { font-size: 15px; }
  .sg-plp .sg-product__price { font-size: 18px; }
  .sg-plp .sg-product__footer { padding: 0 14px 14px; }
  .sg-plp .sg-product__footer .add_to_cart_button {
    font-size: 13px;
    padding: 10px 12px;
  }
  .sg-plp .sg-product__sticker { width: 44px; height: 44px; font-size: 12px; }
  .sg-plp .sg-product__media img { padding: 16px; }
}

/* CSS version marker */
.sg-css-version::before { content: "v34-plp-consolidated"; }



/* ═════════════════════════════════════════════════════════════════
   v36-archive-default — Default PLP with sidebar (v1.0.21c)
   ═════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.sg-archive {
  padding: 48px 0 96px;
  background: var(--sg-cream);
}

/* Header */
.sg-archive__header { margin-bottom: 12px; }

.sg-archive__breadcrumb {
  font-size: 13px;
  color: var(--sg-ink-2);
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.sg-archive__breadcrumb a { color: var(--sg-ink-2); text-decoration: none; }
.sg-archive__breadcrumb a:hover { text-decoration: underline; }

.sg-archive__header-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: end;
}

.sg-archive__title {
  font-family: var(--sg-font-display);
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--sg-ink);
  margin: 0 0 14px;
}

.sg-archive__lead {
  font-size: 17px;
  line-height: 1.5;
  color: var(--sg-ink-2);
  max-width: 52ch;
  margin: 0;
}

.sg-archive__counter { text-align: right; }
.sg-archive__counter-number {
  font-family: var(--sg-font-display);
  font-size: 36px;
  line-height: 1;
  color: var(--sg-color-primary, var(--sg-accent));
  display: block;
}
.sg-archive__counter-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sg-ink-2);
}

/* Sticky toolbar */
.sg-archive__toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--sg-cream, #FBF5EC) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--sg-border);
  border-bottom: 1px solid var(--sg-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  margin-bottom: 32px;
  font-family: var(--sg-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--sg-ink-2);
  transition: box-shadow 200ms;
}
.sg-archive__toolbar.is-stuck {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.sg-archive__toolbar strong { color: var(--sg-ink); }
.sg-archive__toolbar-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-archive__toolbar-sort-label {
  font-size: 13px;
  color: var(--sg-ink-3);
}
.sg-archive__toolbar-sort .woocommerce-ordering { margin: 0; }
.sg-archive__toolbar-sort .woocommerce-ordering select {
  font-family: var(--sg-font-body);
  font-size: 14px;
  border: 1px solid var(--sg-border);
  border-radius: 10px;
  padding: 6px 12px;
  background: var(--sg-paper);
  color: var(--sg-ink);
  cursor: pointer;
}

/* Layout */
.sg-archive__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}

/* Sidebar */
.sg-archive__sidebar { position: sticky; top: calc(75px + 72px); }
.sg-archive__filter-toggle {
  display: none; width: 100%; margin-bottom: 18px;
  align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 18px;
  background: transparent; color: var(--sg-ink);
  border: 1.5px solid var(--sg-ink); border-radius: 99px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background var(--sg-dur-base) var(--sg-ease);
}
.sg-archive__filter-toggle:hover { background: var(--sg-cream-soft); }
.sg-archive__filter-toggle[aria-expanded="true"] .sg-archive__filter-toggle-chevron { transform: rotate(180deg); }
.sg-archive__filter-toggle-label { display: flex; align-items: center; gap: 8px; }
.sg-archive__filter-toggle-chevron { flex-shrink: 0; transition: transform var(--sg-dur-base) var(--sg-ease); }

/* Filter groups */
.sg-filter-group { margin-bottom: 28px; }
.sg-filter-group__title {
  font-family: var(--sg-font-body);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sg-ink-2);
  margin: 0 0 10px;
}
.sg-filter-group__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-filter-group__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--sg-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--sg-ink);
  transition: background 140ms;
}
.sg-filter-group__link:hover { background: var(--sg-cream-soft, #F4EBD9); }
.sg-filter-group__item.is-active .sg-filter-group__link {
  background: var(--sg-cream-soft, #F4EBD9);
  font-weight: 800;
}
.sg-filter-group__count {
  margin-left: auto;
  font-size: 12px;
  color: var(--sg-ink-3);
}
.sg-filter-group__slider {
  width: 100%;
  accent-color: var(--sg-color-primary, #009A47);
  margin: 8px 0 4px;
}
.sg-filter-group__range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--sg-ink-3);
}

/* Mix CTA */
.sg-archive__cta-mix {
  background: var(--sg-amsterdam-soft, #FAEAEA);
  border-left: 3px solid var(--sg-amsterdam, #C8102E);
  border-radius: 14px;
  padding: 16px;
}
.sg-archive__cta-mix-script {
  font-family: var(--sg-font-script);
  font-size: 22px;
  color: var(--sg-amsterdam-deep, #8C0820);
  line-height: 1;
  margin-bottom: 6px;
}
.sg-archive__cta-mix p {
  font-size: 13px;
  color: var(--sg-ink-2);
  margin: 0 0 12px;
}

/* Product grid — 3-col within archive (sidebar present) */
.sg-archive .products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Pack badge — accent colour per city theme */
.sg-archive .sg-product__badge--pack {
  font-family: var(--sg-font-script);
  font-size: 22px;
  color: var(--sg-accent, var(--sg-color-primary));
  position: absolute;
  top: 16px;
  left: 20px;
  line-height: 1;
  z-index: 2;
}

/* Cadeauboxen promo */
.sg-archive__promo {
  margin-top: 32px;
  padding: 40px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.sg-archive__promo--dark {
  background: var(--sg-ink, #1B1A17);
  color: var(--sg-cream, #FBF5EC);
}
.sg-archive__promo-eyebrow {
  font-family: var(--sg-font-script);
  font-size: 26px;
  color: var(--sg-denhaag, #F4B400);
  line-height: 1;
  margin-bottom: 6px;
}
.sg-archive__promo-title {
  font-family: var(--sg-font-display);
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 10px;
  color: inherit;
}
.sg-archive__promo-text p {
  font-size: 15px;
  opacity: 0.85;
  margin: 0;
}

/* SEO block */
.sg-archive__seo {
  margin-top: 64px;
  padding: 64px 0;
  border-top: 1px solid var(--sg-border);
  background: var(--sg-cream-soft, #F4EBD9);
  margin-left: calc(-1 * var(--sg-space-6, 24px));
  margin-right: calc(-1 * var(--sg-space-6, 24px));
  padding-left: var(--sg-space-6, 24px);
  padding-right: var(--sg-space-6, 24px);
}
.sg-archive__seo-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
.sg-archive__seo-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sg-color-primary, #009A47);
  font-weight: 800;
  margin-bottom: 8px;
}
.sg-archive__seo-title {
  font-family: var(--sg-font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  margin: 0 0 18px;
  color: var(--sg-ink);
}
.sg-archive__seo-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sg-ink-2);
  margin-bottom: 20px;
}
.sg-archive__seo-links { display: flex; flex-wrap: wrap; gap: 16px; }
.sg-archive__seo-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--sg-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sg-archive__seo-link:hover { text-decoration: underline; }
.sg-archive__seo-cities-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sg-ink-3);
  font-weight: 800;
  margin-bottom: 12px;
}
.sg-archive__seo-cities-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.sg-archive__seo-cities-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-ink);
}
.sg-archive__seo-cities-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sg-archive__seo-cities-code {
  margin-left: auto;
  color: var(--sg-ink-3);
  font-size: 11px;
  font-weight: 600;
}

/* FAQ block */
.sg-archive__faq {
  padding: 80px 0;
  border-top: 1px solid var(--sg-border);
}
.sg-archive__faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
.sg-archive__faq-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sg-color-primary, #009A47);
  font-weight: 800;
  margin-bottom: 8px;
}
.sg-archive__faq-title {
  font-family: var(--sg-font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--sg-ink);
}
.sg-archive__faq-intro p {
  font-size: 15px;
  color: var(--sg-ink-2);
  line-height: 1.6;
  margin: 0;
}
.sg-archive__faq-items { display: flex; flex-direction: column; gap: 10px; }
.sg-archive__faq-item {
  background: var(--sg-paper);
  border: 1px solid var(--sg-border);
  border-radius: 16px;
  overflow: hidden;
}
.sg-archive__faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 16px;
  color: var(--sg-ink);
  text-align: left;
}
.sg-archive__faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sg-cream-soft, #F4EBD9);
  color: var(--sg-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  transition: background 140ms;
}
.sg-archive__faq-icon::after { content: "+"; }
.sg-archive__faq-item.is-open .sg-archive__faq-icon {
  background: var(--sg-color-primary, #009A47);
  color: #fff;
}
.sg-archive__faq-item.is-open .sg-archive__faq-icon::after { content: "−"; }
.sg-archive__faq-answer {
  padding: 0 24px 20px;
  font-size: 15px;
  color: var(--sg-ink-2);
  line-height: 1.6;
}
.sg-archive__faq-answer p { margin: 0; }

/* Responsive — Tablet */
@media (max-width: 1024px) {
  .sg-archive__layout {
    grid-template-columns: 200px 1fr;
    gap: 32px;
  }
  .sg-archive .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .sg-archive__header-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sg-archive__counter { text-align: left; }
  .sg-archive__seo-grid { grid-template-columns: 1fr; gap: 40px; }
  .sg-archive__faq-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Responsive — Mobile */
@media (max-width: 720px) {
  .sg-archive { padding: 32px 0 64px; }
  .sg-archive__layout {
    grid-template-columns: 1fr;
  }
  .sg-archive__sidebar {
    position: static;
  }
  .sg-archive__filter-toggle { display: flex; }
  .sg-archive__filters {
    display: none;
  }
  .sg-archive__filters.is-open { display: block; }
  .sg-archive .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .sg-archive__promo {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
  }
  .sg-archive__toolbar { flex-wrap: wrap; gap: 8px; }
  .sg-archive__seo-cities-list { grid-template-columns: 1fr; }
}

/* CSS version marker */
.sg-css-version::before { content: "v36-archive-default"; }



/* ═════════════════════════════════════════════════════════════════
   v37-archive-polish — Archive cards + sticky toolbar wrap + FAQ fix (v1.0.21d)
   ═════════════════════════════════════════════════════════════════ */

/* ── FIX 2: Sticky toolbar — outer wrapper is now the sticky element ── */
/* Reset the v36 inner-toolbar sticky props */
.sg-archive__toolbar {
  position: static;
  top: auto;
  z-index: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  margin-bottom: 0;
  box-shadow: none;
  transition: none;
}
.sg-archive__toolbar.is-stuck { box-shadow: none; }

.sg-archive__toolbar-wrap {
  position: sticky;
  top: 75px;
  z-index: 20;
  background: var(--sg-cream, #FBF5EC);
  border-top: 1px solid var(--sg-border, #E8DFCE);
  border-bottom: 1px solid var(--sg-border, #E8DFCE);
  margin-bottom: 32px;
  transition: box-shadow 200ms;
}
.sg-archive__toolbar-wrap.is-stuck {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* ── FIX 1: Product cards inside .sg-archive context ── */
.sg-archive .sg-product {
  background: var(--sg-paper, #FFFFFF);
  border: 1px solid var(--sg-border, rgba(0,0,0,0.06));
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 200ms, box-shadow 200ms;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-archive .sg-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.sg-archive .sg-product__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  flex: 1;
  position: relative;
}
.sg-archive .sg-product__link:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: -4px;
  border-radius: 24px;
}
.sg-archive .sg-product__media {
  aspect-ratio: 1 / 1;
  background: var(--sg-accent-soft, var(--sg-cream-soft, #FBF5EC));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-archive .sg-product__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 24px;
  transition: transform 300ms ease;
}
.sg-archive .sg-product:hover .sg-product__media img {
  transform: scale(1.03);
}
.sg-archive .sg-product__badge {
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: var(--sg-font-script);
  font-size: 22px;
  color: var(--sg-accent);
  line-height: 1;
  z-index: 2;
}
.sg-archive .sg-product__sticker {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sg-accent);
  color: var(--sg-accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sg-font-script);
  font-size: 14px;
  text-align: center;
  transform: rotate(-8deg);
  line-height: 1;
  z-index: 2;
}
.sg-archive .sg-product__body {
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
.sg-archive .sg-product__eyebrow {
  font-family: var(--sg-font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-ink-2);
  margin: 0;
}
.sg-archive .sg-product__title {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
  color: var(--sg-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sg-archive .sg-product__price {
  font-family: var(--sg-font-display);
  font-size: 22px;
  color: var(--sg-ink);
  line-height: 1;
  margin: 4px 0 0;
}
.sg-archive .sg-product__price .woocommerce-Price-amount {
  font-family: inherit;
}
.sg-archive .sg-product__footer {
  padding: 0 20px 20px;
}
.sg-archive .sg-product__footer .add_to_cart_button,
.sg-archive .sg-product__footer .sg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--sg-accent, var(--sg-color-primary));
  color: var(--sg-accent-contrast, #FFFFFF);
  border: none;
  border-radius: 14px;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms;
  white-space: nowrap;
  box-sizing: border-box;
}
.sg-archive .sg-product__footer .add_to_cart_button:hover,
.sg-archive .sg-product__footer .sg-btn:hover {
  filter: brightness(0.93);
}

/* ── FIX 4: FAQ accordion — prevent Hello Elementor hover colour bleed ── */
.sg-archive__faq-question:hover,
.sg-archive__faq-question:focus,
.sg-archive__faq-question:focus-visible {
  background: none !important;
  color: var(--sg-ink, #1B1A17) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline-color: var(--sg-color-primary, #009A47) !important;
}

/* Responsive — mobile card adjustments */
@media (max-width: 720px) {
  .sg-archive .sg-product__body { padding: 14px 14px 8px; }
  .sg-archive .sg-product__title { font-size: 15px; }
  .sg-archive .sg-product__price { font-size: 18px; }
  .sg-archive .sg-product__footer { padding: 0 14px 14px; }
  .sg-archive .sg-product__footer .add_to_cart_button {
    font-size: 13px;
    padding: 10px 12px;
  }
  .sg-archive .sg-product__sticker { width: 44px; height: 44px; font-size: 12px; }
  .sg-archive .sg-product__media img { padding: 16px; }
}

/* CSS version marker */
.sg-css-version::before { content: "v37-archive-polish"; }



/* ═════════════════════════════════════════════════════════════════
   v38-archive-wc-killer — Kill WooCommerce legacy float/clearfix in .sg-archive (v1.0.21e)
   ═════════════════════════════════════════════════════════════════ */

/* Force grid on all WC column variants */
.sg-archive .products,
.sg-archive ul.products,
.sg-archive .products.columns-3,
.sg-archive .products.columns-4,
.sg-archive ul.products.columns-3,
.sg-archive ul.products.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 1024px) {
  .sg-archive .products,
  .sg-archive ul.products,
  .sg-archive .products.columns-3,
  .sg-archive .products.columns-4,
  .sg-archive ul.products.columns-3,
  .sg-archive ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 720px) {
  .sg-archive .products,
  .sg-archive ul.products,
  .sg-archive .products.columns-3,
  .sg-archive .products.columns-4,
  .sg-archive ul.products.columns-3,
  .sg-archive ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Kill WC clearfix ::before/::after — removes phantom grid cell */
.sg-archive .products::before,
.sg-archive .products::after,
.sg-archive ul.products::before,
.sg-archive ul.products::after {
  display: none !important;
  content: none !important;
}

/* Kill WC li.product float + width */
.sg-archive .products li.product,
.sg-archive ul.products li.product,
.sg-archive .products li.first,
.sg-archive ul.products li.first,
.sg-archive .products li.last,
.sg-archive ul.products li.last {
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Media container: padding here, not on img */
.sg-archive .sg-product__media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 24px !important;
}

.sg-archive .sg-product__media img {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 720px) {
  .sg-archive .sg-product__media { padding: 16px !important; }
}

/* CSS version marker */
.sg-css-version::before { content: "v38-archive-wc-killer"; }



/* ═════════════════════════════════════════════════════════════════
   v39-card-rhythm — Consistent vertical rhythm + mobile truncation fix (v1.0.21f)
   ═════════════════════════════════════════════════════════════════ */

/* Eyebrow: always reserves space even when empty */
.sg-archive .sg-product__eyebrow {
  font-family: var(--sg-font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-ink-2);
  margin: 0;
  min-height: 18px;
  line-height: 1.5;
}

/* Title: min-height forces 2-line reservation across all cards */
.sg-archive .sg-product__title {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  margin: 0;
  color: var(--sg-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* Body: gap drives spacing, price pins to bottom */
.sg-archive .sg-product__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

/* Price: margin-top: auto pushes it to the bottom of the flex body */
.sg-archive .sg-product__price {
  font-family: var(--sg-font-display);
  font-size: 22px;
  color: var(--sg-ink);
  line-height: 1;
  margin: 0;
  margin-top: auto;
}

/* Mobile — smaller type to prevent truncation on 2-col narrow cards */
@media (max-width: 720px) {
  .sg-archive .sg-product__body {
    padding: 14px;
    gap: 6px;
  }
  .sg-archive .sg-product__title {
    font-size: 14px;
    line-height: 1.25;
    min-height: 2.5em;
  }
  .sg-archive .sg-product__eyebrow {
    font-size: 10px;
    min-height: 15px;
  }
  .sg-archive .sg-product__price {
    font-size: 18px;
  }
  .sg-archive .sg-product__footer {
    padding: 0 14px 14px;
  }
  .sg-archive .sg-product__footer .add_to_cart_button {
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* CSS version marker */
.sg-css-version::before { content: "v39-card-rhythm"; }



/* ═════════════════════════════════════════════════════════════════
   v40-archive-design-ref — Design-ref conformity polish (v1.0.21g)
   ═════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Breadcrumb ── */
.sg-archive__breadcrumb {
  font-size: 14px;
  color: var(--sg-ink-2);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sg-archive__breadcrumb a {
  color: var(--sg-ink-2);
  text-decoration: none;
}
.sg-archive__breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sg-archive__breadcrumb [aria-current="page"] {
  color: var(--sg-color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.sg-archive__breadcrumb-sep {
  color: var(--sg-ink-3, rgba(27,26,23,0.35));
  font-size: 12px;
}

/* ── FIX 2: Category description ── */
.sg-archive__lead {
  font-size: 17px;
  line-height: 1.5;
  color: var(--sg-ink-2);
  max-width: 720px;
  margin: 12px 0 0;
}
.sg-archive__lead p { margin: 0; }

/* ── FIX 3: Counter ── */
.sg-archive__counter {
  text-align: right;
  flex-shrink: 0;
}
.sg-archive__counter-number {
  font-family: var(--sg-font-display);
  font-size: 72px;
  line-height: 0.9;
  color: var(--sg-color-primary);
  display: block;
  font-weight: 400;
}
.sg-archive__counter-label {
  font-family: var(--sg-font-body);
  font-size: 13px;
  color: var(--sg-ink-2);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
  display: block;
}

/* ── FIX 4: Sort dropdown ── */
.sg-archive__toolbar-sort select,
.sg-archive__toolbar-sort .woocommerce-ordering select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--sg-paper, #fff);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231B1A17' stroke-width='2'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  border: 1px solid var(--sg-border, rgba(0,0,0,0.12));
  border-radius: 24px;
  padding: 10px 40px 10px 20px;
  font-family: var(--sg-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--sg-ink);
  cursor: pointer;
  min-width: 200px;
}

/* ── FIX 5: Pack-maat checkboxes ── */
.sg-filter-group__item label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 0;
}
.sg-filter-group__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--sg-ink-3, rgba(27,26,23,0.35));
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  background: var(--sg-paper, #fff);
  transition: background 120ms, border-color 120ms;
}
.sg-filter-group__checkbox:checked {
  background: var(--sg-color-primary, #009A47);
  border-color: var(--sg-color-primary, #009A47);
}
.sg-filter-group__checkbox:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sg-filter-group__label {
  flex: 1;
  color: var(--sg-ink);
}
.sg-filter-group__count {
  color: var(--sg-ink-2);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ── FIX 7: Mix-CTA sidebar card ── */
.sg-archive__sidebar-cta {
  background: #FCE4E8;
  border-radius: 16px;
  padding: 20px;
  margin-top: 32px;
}
.sg-archive__sidebar-cta-script {
  font-family: var(--sg-font-script);
  font-size: 24px;
  color: #E60028;
  margin: 0 0 8px;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-2deg);
}
.sg-archive__sidebar-cta p {
  font-size: 14px;
  color: var(--sg-ink-2);
  line-height: 1.5;
  margin: 0 0 16px;
}
.sg-archive__sidebar-cta .sg-btn--outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--sg-ink);
  color: var(--sg-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.sg-archive__sidebar-cta .sg-btn--outline:hover {
  background: var(--sg-ink);
  color: #fff;
}

/* ── FIX 8: Cadeauboxen promo card ── */
.sg-archive__promo-dark {
  background: var(--sg-ink, #1B1A17);
  color: var(--sg-cream, #FBF5EC);
  border-radius: 24px;
  padding: 40px 48px;
  margin: 48px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.sg-archive__promo-content { flex: 1; }
.sg-archive__promo-script {
  font-family: var(--sg-font-script);
  font-size: 24px;
  color: #F4C548;
  display: block;
  margin-bottom: 8px;
  font-weight: 400;
}
.sg-archive__promo-dark .sg-archive__promo-title {
  font-family: var(--sg-font-display);
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--sg-cream, #FBF5EC);
}
.sg-archive__promo-dark p {
  font-size: 16px;
  color: rgba(251,245,236,0.85);
  margin: 0;
}
.sg-archive__promo-cta {
  background: #F4C548;
  color: var(--sg-ink, #1B1A17);
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border: none;
  transition: filter 150ms;
}
.sg-archive__promo-cta:hover { filter: brightness(0.95); }

/* ── FIX 9: Card eyebrow — lowercase, no uppercase ── */
.sg-archive .sg-product__eyebrow {
  text-transform: none;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--sg-ink-2);
}

/* ── FIX 10: ATC always city-accent ── */
.sg-archive .sg-product__footer .add_to_cart_button {
  background: var(--sg-accent, var(--sg-color-primary)) !important;
  color: var(--sg-accent-contrast, #FFFFFF) !important;
}

/* Responsive */
@media (max-width: 720px) {
  .sg-archive__promo-dark {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 20px;
  }
  .sg-archive__promo-dark .sg-archive__promo-title { font-size: 28px; }
  .sg-archive__counter-number { font-size: 52px; }
}

/* CSS version marker */
.sg-css-version::before { content: "v40-archive-design-ref"; }

/* ============================================================
   v41-plp-design-ref-pass
   Covers: promo-row, seo-band/faq-band full-width sections,
   price-in-footer, regio checkbox parity.
   Sediment — v40 rules stay intact above.
   ============================================================ */

/* ── Promo row — two panels side by side ── */
.sg-archive__promo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 48px 0;
}
.sg-archive__promo-mix,
.sg-archive__promo-dark {
  border-radius: 20px;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* Override standalone margin from v40 when inside promo-row */
.sg-archive__promo-row .sg-archive__promo-dark {
  margin: 0;
}
.sg-archive__promo-mix {
  background: var(--sg-cream-soft, #F4EBD9);
  color: var(--sg-ink, #1B1A17);
}
.sg-archive__promo-mix .sg-archive__promo-script {
  color: var(--sg-color-primary, #009A47);
}
.sg-archive__promo-mix .sg-archive__promo-title {
  font-family: var(--sg-font-display);
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
  color: var(--sg-ink, #1B1A17);
}
.sg-archive__promo-mix p {
  font-size: 15px;
  color: var(--sg-ink-2, #3B3833);
  margin: 0;
  flex: 1;
}
.sg-archive__promo-mix .sg-archive__promo-cta {
  background: transparent;
  color: var(--sg-ink, #1B1A17);
  border: 2px solid var(--sg-ink, #1B1A17);
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 150ms, color 150ms;
}
.sg-archive__promo-mix .sg-archive__promo-cta:hover {
  background: var(--sg-ink, #1B1A17);
  color: var(--sg-cream, #FBF5EC);
}
/* Dark panel adjustments inside row */
.sg-archive__promo-row .sg-archive__promo-dark {
  justify-content: space-between;
}
.sg-archive__promo-row .sg-archive__promo-dark .sg-archive__promo-title {
  font-size: 32px;
}

/* ── SEO band — outside sg-container, full bleed ── */
.sg-archive__seo-band {
  margin-top: 64px;
  padding: 64px 0;
  border-top: 1px solid var(--sg-border, rgba(27,26,23,0.12));
  background: var(--sg-cream-soft, #F4EBD9);
}
/* Reuse existing grid + inner element styles via new band class */
.sg-archive__seo-band .sg-archive__seo-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
}

/* ── FAQ band — outside sg-container, full bleed ── */
.sg-archive__faq-band {
  padding: 80px 0;
  border-top: 1px solid var(--sg-border, rgba(27,26,23,0.12));
  background: var(--sg-cream, #FBF5EC);
}
.sg-archive__faq-band .sg-archive__faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}

/* ── Price in footer — before ATC button ── */
.sg-archive .sg-product__footer .sg-product__price {
  font-family: var(--sg-font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--sg-ink, #1B1A17);
  margin-bottom: 8px;
}
.sg-archive .sg-product__footer .sg-product__price .woocommerce-Price-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--sg-ink, #1B1A17);
}

/* Responsive — v41 */
@media (max-width: 900px) {
  .sg-archive__promo-row {
    grid-template-columns: 1fr;
  }
  .sg-archive__seo-band .sg-archive__seo-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sg-archive__faq-band .sg-archive__faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 720px) {
  .sg-archive__promo-mix,
  .sg-archive__promo-dark {
    padding: 28px 24px;
  }
  .sg-archive__promo-mix .sg-archive__promo-title,
  .sg-archive__promo-row .sg-archive__promo-dark .sg-archive__promo-title {
    font-size: 26px;
  }
  .sg-archive__seo-band { padding: 48px 0; }
  .sg-archive__faq-band { padding: 56px 0; }
}

/* CSS version marker */
.sg-css-version::before { content: "v41-plp-design-ref-pass"; }

/* ═══════════════════════════════════════════════════════════════════════
   v42-plp-nuke — v1.0.21j
   Force overrides over all earlier v37–v41 sediment.
   Higher specificity (.sg-main.sg-archive) + !important.
   No selector below renders correctly without these flags.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Card outer — pure white, subtle border, no accent halo ─────────── */
.sg-main.sg-archive .sg-product,
.sg-main.sg-archive li.sg-product {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.sg-main.sg-archive .sg-product:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}

/* ── Card media — pure white background, no accent-soft ─────────────── */
.sg-main.sg-archive .sg-product .sg-product__media,
.sg-main.sg-archive li.sg-product .sg-product__media {
  background: #FFFFFF !important;
}
.sg-main.sg-archive .sg-product .sg-product__media img {
  padding: 32px !important;
}

/* ── Card pack-badge — Caveat in city-accent, readable on white ─────── */
.sg-main.sg-archive .sg-product__badge--pack {
  color: var(--sg-accent, var(--sg-color-primary)) !important;
  font-family: var(--sg-font-script) !important;
  font-size: 24px !important;
  top: 16px !important;
  left: 20px !important;
}

/* ── Card body — title only, no price here ──────────────────────────── */
.sg-main.sg-archive .sg-product__body {
  padding: 18px 20px 12px !important;
  gap: 6px !important;
}
.sg-main.sg-archive .sg-product__eyebrow {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--sg-ink-2) !important;
}
.sg-main.sg-archive .sg-product__title {
  font-family: var(--sg-font-display) !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
}

/* ── Card footer — price + ATC on ONE flex row ──────────────────────── */
.sg-main.sg-archive .sg-product__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  padding: 0 20px 20px !important;
}
.sg-main.sg-archive .sg-product__footer .sg-product__price {
  font-family: var(--sg-font-display) !important;
  font-size: 22px !important;
  color: var(--sg-ink) !important;
  line-height: 1 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}
.sg-main.sg-archive .sg-product__footer .add_to_cart_button,
.sg-main.sg-archive .sg-product__footer a.add_to_cart_button {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--sg-accent, var(--sg-color-primary)) !important;
  color: var(--sg-accent-contrast, #FFFFFF) !important;
}

/* ── Header counter — compact, baseline inline with label ───────────── */
.sg-main.sg-archive .sg-archive__header-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 32px 48px !important;
  align-items: end !important;
}
.sg-main.sg-archive .sg-archive__counter {
  text-align: right !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
.sg-main.sg-archive .sg-archive__counter-number {
  font-family: var(--sg-font-display) !important;
  font-size: 56px !important;
  line-height: 1 !important;
  color: var(--sg-color-primary, var(--sg-accent)) !important;
  display: inline-block !important;
}
.sg-main.sg-archive .sg-archive__counter-label {
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sg-ink-2) !important;
  font-weight: 500 !important;
}

@media (max-width: 720px) {
  .sg-main.sg-archive .sg-archive__counter {
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* ── Filter group titles — sentence-case for real this time ─────────── */
.sg-main.sg-archive .sg-filter-group__title,
.sg-main.sg-archive .sg-filter-group h3,
.sg-main.sg-archive .sg-filter-group h4 {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--sg-ink) !important;
  margin-bottom: 12px !important;
}

/* ── Sort dropdown — pill style with chevron, "Aanbevolen" looking ──── */
.sg-main.sg-archive .sg-archive__toolbar-sort .woocommerce-ordering select,
.sg-main.sg-archive .woocommerce-ordering select {
  border-radius: 999px !important;
  padding: 10px 40px 10px 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B1A17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  font-family: var(--sg-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--sg-ink) !important;
  min-width: 200px !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
}

/* ── Filter checkbox — visible checkmark when checked ──────────────── */
.sg-main.sg-archive .sg-filter-group__checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  margin: 0 !important;
  vertical-align: middle !important;
}
.sg-main.sg-archive .sg-filter-group__checkbox:hover {
  border-color: var(--sg-ink-2) !important;
}
.sg-main.sg-archive .sg-filter-group__checkbox:checked,
.sg-main.sg-archive .sg-filter-group__checkbox[checked] {
  background: var(--sg-color-primary, #009A47) !important;
  border-color: var(--sg-color-primary, #009A47) !important;
}
.sg-main.sg-archive .sg-filter-group__checkbox:checked::after,
.sg-main.sg-archive .sg-filter-group__checkbox[checked]::after {
  content: '' !important;
  position: absolute !important;
  left: 4px !important;
  top: 0 !important;
  width: 6px !important;
  height: 11px !important;
  border: solid #FFFFFF !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
.sg-main.sg-archive .sg-filter-group__list label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: var(--sg-ink) !important;
  font-weight: 500 !important;
}
.sg-main.sg-archive .sg-filter-group__count {
  margin-left: auto !important;
  font-size: 13px !important;
  color: var(--sg-ink-3, var(--sg-ink-2)) !important;
  font-weight: 500 !important;
}

/* ── Promo row — Mix-CTA + Cadeauboxen layout ───────────────────────── */
.sg-main.sg-archive .sg-archive__promo-row {
  margin: 48px 0 24px !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) 2fr !important;
  gap: 20px !important;
  align-items: stretch !important;
}
.sg-main.sg-archive .sg-archive__promo-mix {
  background: var(--sg-cream-soft, #F4EBD9) !important;
  border-left: none !important;
  border-radius: 20px !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
.sg-main.sg-archive .sg-archive__promo-mix-script {
  font-family: var(--sg-font-script) !important;
  font-size: 28px !important;
  color: var(--sg-color-primary, #009A47) !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  font-weight: 400 !important;
}
.sg-main.sg-archive .sg-archive__promo-mix h3 {
  font-family: var(--sg-font-display) !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  color: var(--sg-ink) !important;
  margin: 0 !important;
}
.sg-main.sg-archive .sg-archive__promo-mix p {
  font-size: 15px !important;
  color: var(--sg-ink-2) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.sg-main.sg-archive .sg-archive__promo-mix .sg-btn--outline {
  margin-top: 8px !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1.5px solid var(--sg-ink) !important;
  color: var(--sg-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.sg-main.sg-archive .sg-archive__promo-row .sg-archive__promo-dark {
  margin: 0 !important;
}

/* ── Breadcrumb visible separator ──────────────────────────────────── */
.sg-main.sg-archive .sg-archive__breadcrumb a {
  color: var(--sg-color-primary, #009A47) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.sg-main.sg-archive .sg-archive__breadcrumb-sep {
  color: var(--sg-ink-3, var(--sg-ink-2)) !important;
  margin: 0 4px !important;
  display: inline-block !important;
}
.sg-main.sg-archive .sg-archive__breadcrumb [aria-current="page"] {
  color: var(--sg-ink) !important;
  font-weight: 700 !important;
}

/* ── Mobile responsive nukes ───────────────────────────────────────── */
@media (max-width: 900px) {
  .sg-main.sg-archive .sg-archive__promo-row {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 720px) {
  .sg-main.sg-archive .sg-archive__header-row {
    grid-template-columns: 1fr !important;
  }
  .sg-main.sg-archive .sg-archive__counter {
    justify-content: flex-start !important;
  }
  .sg-main.sg-archive .sg-archive__counter-number {
    font-size: 44px !important;
  }
  .sg-main.sg-archive .sg-product__footer {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .sg-main.sg-archive .sg-product__footer .add_to_cart_button {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
}

/* CSS version marker */
.sg-css-version::before { content: "v42-plp-nuke" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v43-plp-typography-fix — v1.0.21k
   Counter stack vertical, card title + price in body font (not display).
   Card border-radius tightened.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Counter — stack vertical, label below number ───────────────────── */
.sg-main.sg-archive .sg-archive__counter {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  text-align: right !important;
  gap: 2px !important;
}
.sg-main.sg-archive .sg-archive__counter-number {
  font-family: var(--sg-font-display) !important;
  font-size: 64px !important;
  line-height: 0.95 !important;
  color: var(--sg-color-primary, var(--sg-accent)) !important;
  display: block !important;
  margin: 0 !important;
}
.sg-main.sg-archive .sg-archive__counter-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sg-ink-2) !important;
  display: block !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* ── Card title — Plus Jakarta Sans body, not Caprasimo display ─────── */
.sg-main.sg-archive .sg-product .sg-product__title,
.sg-main.sg-archive li.sg-product .sg-product__title {
  font-family: var(--sg-font-body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  color: var(--sg-ink) !important;
}

/* ── Card price — Plus Jakarta Sans body, not Caprasimo display ─────── */
.sg-main.sg-archive .sg-product__footer .sg-product__price,
.sg-main.sg-archive .sg-product__footer .sg-product__price .woocommerce-Price-amount,
.sg-main.sg-archive .sg-product__footer .sg-product__price bdi {
  font-family: var(--sg-font-body) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--sg-ink) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}

/* ── Card border-radius — tighter ───────────────────────────────────── */
.sg-main.sg-archive .sg-product,
.sg-main.sg-archive li.sg-product {
  border-radius: 16px !important;
}

/* CSS version marker */
.sg-css-version::before { content: "v43-plp-typography-fix" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v44-card-media-counter-fix — v1.0.21l
   Card media: padding on container (not img) + aspect-ratio + contain.
   Counter: column-stacked confirmed, label sizing tightened.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Card media — container-level white padding, image contained ─────── */
.sg-main.sg-archive .sg-product__media,
.sg-main.sg-archive .sg-product .sg-product__media,
.sg-main.sg-archive li.sg-product .sg-product__media {
  background: #FFFFFF !important;
  aspect-ratio: 4 / 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: hidden !important;
}
.sg-main.sg-archive .sg-product__media img,
.sg-main.sg-archive .sg-product .sg-product__media img,
.sg-main.sg-archive li.sg-product .sg-product__media img {
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* ── Counter — column stack, Caprasimo number, body-font label ──────── */
.sg-main.sg-archive .sg-archive__counter {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  text-align: right !important;
  gap: 0 !important;
  align-self: flex-end !important;
}
.sg-main.sg-archive .sg-archive__counter-number {
  font-family: var(--sg-font-display) !important;
  font-size: 72px !important;
  line-height: 0.9 !important;
  color: var(--sg-color-primary, #009A47) !important;
  display: block !important;
  letter-spacing: -0.02em !important;
}
.sg-main.sg-archive .sg-archive__counter-label {
  font-family: var(--sg-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sg-ink-2) !important;
  display: block !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}

/* ── Header row — counter aligns to bottom of text block ────────────── */
.sg-main.sg-archive .sg-archive__header-row {
  align-items: flex-end !important;
}

/* CSS version marker */
.sg-css-version::before { content: "v44-card-media-counter-fix" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v45-plp-design-source-exact — v1.0.21m
   FINAL. Reproduces card + counter + filter + dropdown 1:1 with the
   Het Creatieve Bureau UI Kit design source (CategoryScreen + ProductCard).
   No more guessing — every value here is copied from design.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Card outer — paper bg, beige border 20px radius ───────────────── */
.sg-main.sg-archive .sg-product,
.sg-main.sg-archive li.sg-product {
  background: var(--sg-paper, #FFFFFF) !important;
  border: 1px solid var(--sg-border, #E8DFCE) !important;
  border-radius: 20px !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.08) !important;
  overflow: visible !important;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1),
              box-shadow 240ms cubic-bezier(.2,.7,.2,1) !important;
}
.sg-main.sg-archive .sg-product:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(60, 40, 20, 0.10) !important;
}

/* ── Card media — accent-soft bg with own 14px radius (NOT cropped by card) */
.sg-main.sg-archive .sg-product .sg-product__media {
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
}
.sg-main.sg-archive .sg-product .sg-product__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1) !important;
}
.sg-main.sg-archive .sg-product:hover .sg-product__media img {
  transform: scale(1.04) !important;
}

/* ── Card badge "3-pack" — Caveat script 22px in city-accent ───────── */
.sg-main.sg-archive .sg-product .sg-product__badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  font-family: var(--sg-font-script) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--sg-accent, var(--sg-color-primary)) !important;
  line-height: 1 !important;
  background: transparent !important;
}

/* ── Card link — display:contents so flex column flows through it ───── */
.sg-main.sg-archive .sg-product .sg-product__link {
  display: contents !important;
  color: inherit !important;
  text-decoration: none !important;
}
.sg-main.sg-archive .sg-product .sg-product__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
}

/* ── Card meta "Rotterdam · groen/wit" — body 13/600 in ink-3 ──────── */
.sg-main.sg-archive .sg-product__meta {
  font-family: var(--sg-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sg-ink-3, #6B6660) !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ── Card title — body 18/800 (NOT Caprasimo), 2-line clamp ────────── */
.sg-main.sg-archive .sg-product .sg-product__title,
.sg-main.sg-archive li.sg-product .sg-product__title {
  font-family: var(--sg-font-body) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--sg-ink) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.4em !important;
}

/* ── Card row — flex price+ATC, push to bottom ─────────────────────── */
.sg-main.sg-archive .sg-product__row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding: 0 !important;
}

/* ── Card price — Caprasimo 24px (display font, large) ─────────────── */
.sg-main.sg-archive .sg-product__row .sg-product__price,
.sg-main.sg-archive .sg-product__row .sg-product__price .woocommerce-Price-amount,
.sg-main.sg-archive .sg-product__row .sg-product__price bdi {
  font-family: var(--sg-font-display) !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  color: var(--sg-ink) !important;
  line-height: 1 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

/* ── ATC button — sg-btn-primary sg-btn-sm pill ─────────────────────── */
.sg-main.sg-archive .sg-product__row .add_to_cart_button,
.sg-main.sg-archive .sg-product__row a.add_to_cart_button {
  font-family: var(--sg-font-body) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--sg-accent, var(--sg-color-primary)) !important;
  background: var(--sg-accent, var(--sg-color-primary)) !important;
  color: var(--sg-accent-contrast, #FFFFFF) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

/* ── Counter — Caprasimo 36px in rotterdam-deep (donker groen) ──────── */
.sg-main.sg-archive .sg-archive__counter {
  display: block !important;
  text-align: right !important;
  font-family: var(--sg-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sg-ink-3, #6B6660) !important;
}
.sg-main.sg-archive .sg-archive__counter-number {
  font-family: var(--sg-font-display) !important;
  font-size: 36px !important;
  color: var(--sg-rotterdam-deep, #006B30) !important;
  line-height: 1 !important;
  display: block !important;
  margin: 0 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.sg-main.sg-archive .sg-archive__counter-label {
  font-family: var(--sg-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sg-ink-3, #6B6660) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: inline !important;
  margin: 0 !important;
}

/* ── Filter group labels — sentence-case body 13/700 ───────────────── */
.sg-main.sg-archive .sg-filter-group__title {
  font-family: var(--sg-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--sg-ink-2) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 10px !important;
  display: block !important;
}

/* ── Sort dropdown — sg-select equivalent (pill with SVG chevron) ──── */
.sg-main.sg-archive .sg-archive__toolbar-sort .woocommerce-ordering select,
.sg-main.sg-archive .woocommerce-ordering select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  font-family: var(--sg-font-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 38px 10px 14px !important;
  border: 1.5px solid var(--sg-border, #E8DFCE) !important;
  border-radius: 999px !important;
  background-color: var(--sg-paper, #FFFFFF) !important;
  color: var(--sg-ink) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1A17' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  min-width: 200px !important;
}

/* ── Mix-CTA sidebar card — Amsterdam pink with red left-border ────── */
.sg-main.sg-archive .sg-archive__sidebar-cta {
  background: var(--sg-amsterdam-soft, #FBD9D6) !important;
  border-left: 3px solid var(--sg-amsterdam, #E2231A) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-top: 8px !important;
}
.sg-main.sg-archive .sg-archive__sidebar-cta-script {
  font-family: var(--sg-font-script) !important;
  font-size: 24px !important;
  color: var(--sg-amsterdam-deep, #B41A12) !important;
  line-height: 1 !important;
  margin: 0 0 6px !important;
  font-weight: 400 !important;
  display: block !important;
}
.sg-main.sg-archive .sg-archive__sidebar-cta p {
  font-family: var(--sg-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sg-ink-3, #6B6660) !important;
  margin: 0 0 10px !important;
  line-height: 1.4 !important;
}
.sg-main.sg-archive .sg-archive__sidebar-cta .sg-btn {
  font-family: var(--sg-font-body) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--sg-ink) !important;
  background: transparent !important;
  color: var(--sg-ink) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── Cadeauboxen promo — dark solo full-width below grid ────────────── */
.sg-main.sg-archive .sg-archive__promo-dark {
  margin: 48px 0 24px !important;
  padding: 40px !important;
  background: var(--sg-ink, #1B1A17) !important;
  color: var(--sg-cream, #FBF5EC) !important;
  border-radius: 24px !important;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  gap: 32px !important;
  align-items: center !important;
}
.sg-main.sg-archive .sg-archive__promo-script {
  font-family: var(--sg-font-script) !important;
  font-size: 32px !important;
  color: var(--sg-denhaag, #F2C500) !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 400 !important;
}
.sg-main.sg-archive .sg-archive__promo-title {
  font-family: var(--sg-font-display) !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  color: var(--sg-cream, #FBF5EC) !important;
  margin: 0 0 12px !important;
  font-weight: 400 !important;
}
.sg-main.sg-archive .sg-archive__promo-dark p {
  font-family: var(--sg-font-body) !important;
  font-size: 17px !important;
  color: var(--sg-cream, #FBF5EC) !important;
  opacity: 0.85 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
.sg-main.sg-archive .sg-archive__promo-cta {
  background: var(--sg-denhaag, #F2C500) !important;
  color: var(--sg-ink) !important;
  border: 1.5px solid var(--sg-denhaag, #F2C500) !important;
  border-radius: 999px !important;
  padding: 14px 24px !important;
  font-family: var(--sg-font-body) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Hide promo-row/promo-mix if residual HTML present */
.sg-main.sg-archive .sg-archive__promo-row {
  display: contents !important;
}
.sg-main.sg-archive .sg-archive__promo-mix {
  display: none !important;
}

/* Mobile */
@media (max-width: 720px) {
  .sg-main.sg-archive .sg-archive__promo-dark {
    grid-template-columns: 1fr !important;
    padding: 28px !important;
    gap: 18px !important;
  }
  .sg-main.sg-archive .sg-archive__promo-cta {
    justify-self: start !important;
  }
  .sg-main.sg-archive .sg-archive__counter-number {
    font-size: 28px !important;
  }
  .sg-main.sg-archive .sg-product .sg-product__title {
    font-size: 16px !important;
  }
  .sg-main.sg-archive .sg-product__row .sg-product__price,
  .sg-main.sg-archive .sg-product__row .sg-product__price bdi {
    font-size: 20px !important;
  }
}

/* CSS version marker */
.sg-css-version::before { content: "v45-plp-design-source-exact" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v46-card-inner-padding — v1.0.21n
   Push horizontal padding directly onto body + row so card padding 18px
   is guaranteed regardless of what old WC/sediment rules do to <li>.
   ═══════════════════════════════════════════════════════════════════════ */

.sg-main.sg-archive li.sg-product {
  padding: 18px !important;
  box-sizing: border-box !important;
}
.sg-main.sg-archive .sg-product .sg-product__body {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
.sg-main.sg-archive .sg-product .sg-product__row {
  padding-left: 2px !important;
  padding-right: 2px !important;
  padding-bottom: 2px !important;
}

/* CSS version marker */
.sg-css-version::before { content: "v46-card-inner-padding" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v47-card-padding-specificity — v1.0.21n
   v38 WC killer sets padding:0!important on li.product (specificity 0,3,1).
   v45/v46 same specificity — tie broken by source order, but unreliable.
   Adding .product to selector bumps to 0,4,1 → definitively wins.
   ═══════════════════════════════════════════════════════════════════════ */

.sg-main.sg-archive li.product.sg-product {
  padding: 18px !important;
  box-sizing: border-box !important;
}

/* CSS version marker */
.sg-css-version::before { content: "v47-card-padding-specificity" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v48-pdp-informatie-tab — v1.0.22
   New "Informatie" tab body: paragraph rhythm consistent with sg-p.
   ═══════════════════════════════════════════════════════════════════════ */

.sg-pdp-tab-body__info {
  max-width: 720px;
}
.sg-pdp-tab-body__info p {
  font-family: var(--sg-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sg-ink);
  margin: 0 0 14px;
}
.sg-pdp-tab-body__info p:last-child {
  margin-bottom: 0;
}
.sg-pdp-tab-body__info strong {
  font-weight: 700;
}
.sg-pdp-tab-body__info a {
  color: var(--sg-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* CSS version marker */
.sg-css-version::before { content: "v48-pdp-informatie-tab" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v49-pdp-pack-selector — v1.0.24
   Pack-size selector pills below the welcome script.
   Active pill = filled with accent. Sibling pills = outlined, hover-fillable.
   ═══════════════════════════════════════════════════════════════════════ */

.sg-pdp__pack-selector {
  margin: 0 0 20px;
}
.sg-pdp__pack-selector-label {
  margin-bottom: 10px !important;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--sg-ink-2);
  letter-spacing: 0.02em;
  text-transform: none;
}
.sg-pdp__pack-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sg-pdp__pack-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1.5px solid var(--sg-border, #E8DFCE);
  border-radius: 999px;
  background: var(--sg-paper, #FFFFFF);
  color: var(--sg-ink);
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.sg-pdp__pack-pill:hover {
  border-color: var(--sg-accent, var(--sg-color-primary));
  color: var(--sg-accent, var(--sg-color-primary));
}
.sg-pdp__pack-pill.is-active {
  background: var(--sg-accent, var(--sg-color-primary));
  border-color: var(--sg-accent, var(--sg-color-primary));
  color: var(--sg-accent-contrast, #FFFFFF);
  cursor: default;
}
.sg-pdp__pack-pill.is-active:hover {
  color: var(--sg-accent-contrast, #FFFFFF);
}
.sg-pdp__pack-pill-sep {
  opacity: 0.6;
}
.sg-pdp__pack-pill-price {
  font-weight: 700;
}
.sg-pdp__pack-pill-price .woocommerce-Price-amount {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* CSS version marker */
.sg-css-version::before { content: "v49-pdp-pack-selector" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v50-pdp-crosssell — v1.0.25
   "Anderen kozen ook" — full-width cream band onder PDP info-tabs.
   4-col grid, per card city-themed via .theme-{city} cascade.
   ATC button = WC native ajax_add_to_cart (drawer triggert automatisch).
   ═══════════════════════════════════════════════════════════════════════ */

.sg-pdp-crosssell {
  margin: 72px 0 0;
  padding: 72px 0;
  background: var(--sg-cream, #FBF5EC);
}
.sg-pdp-crosssell__inner {
  padding: 0;
}
.sg-pdp-crosssell__head {
  margin-bottom: 28px;
}
.sg-pdp-crosssell__head .sg-eyebrow {
  margin-bottom: 8px;
}
.sg-pdp-crosssell__title {
  font-family: var(--sg-font-display);
  font-size: 36px;
  line-height: 1.1;
  color: var(--sg-ink);
  margin: 0;
}
.sg-pdp-crosssell__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) {
  .sg-pdp-crosssell__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sg-pdp-crosssell__grid { grid-template-columns: 1fr; }
}

/* Card — hergebruik .sg-product baseline, voeg crosssell-specifieke padding toe */
.sg-pdp-crosssell__card {
  background: var(--sg-paper, #FFFFFF);
  border: 1.5px solid var(--sg-border, #E8DFCE);
  border-radius: 20px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 140ms, box-shadow 140ms;
}
.sg-pdp-crosssell__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sg-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
}
.sg-pdp-crosssell__link {
  display: contents;
  text-decoration: none;
  color: inherit;
}
.sg-pdp-crosssell__card .sg-product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sg-accent-soft, var(--sg-color-cream-soft));
}
.sg-pdp-crosssell__card .sg-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sg-pdp-crosssell__card .sg-product__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--sg-paper, #FFFFFF);
  color: var(--sg-ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--sg-font-script, var(--sg-font-body));
  font-size: 13px;
  font-weight: 700;
}
.sg-pdp-crosssell__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-pdp-crosssell__card .sg-product__meta {
  font-family: var(--sg-font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--sg-ink-3, var(--sg-ink-2));
  text-transform: lowercase;
  letter-spacing: 0.02em;
  margin: 0;
}
.sg-pdp-crosssell__title-card {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  color: var(--sg-ink);
  margin: 0;
}
.sg-pdp-crosssell__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.sg-pdp-crosssell__price {
  font-family: var(--sg-font-display);
  font-size: 20px;
  color: var(--sg-ink);
}
.sg-pdp-crosssell__price .woocommerce-Price-amount {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.sg-pdp-crosssell__foot .add_to_cart_button {
  padding: 8px 10px !important;
  min-width: 0;
  background: var(--sg-accent, var(--sg-color-primary)) !important;
  border-color: var(--sg-accent, var(--sg-color-primary)) !important;
  color: var(--sg-accent-contrast, #FFFFFF) !important;
}
.sg-pdp-crosssell__foot .add_to_cart_button svg {
  display: block;
}

/* CSS version marker */
.sg-css-version::before { content: "v50-pdp-crosssell" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v51-pdp-extras — v1.0.26
   Personalisatie-opties: Cadeauverpakking + Kraamvisitekaartje.
   1:1 design uit chunk_9.jsx regels 277-309.
   ═══════════════════════════════════════════════════════════════════════ */

.sg-pdp__extras {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.sg-pdp__extras-label {
  margin-bottom: 0 !important;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--sg-ink-2);
  text-transform: none;
}
.sg-pdp__extra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--sg-paper, #FFFFFF);
  border: 1.5px solid var(--sg-border, #E8DFCE);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 140ms;
}
.sg-pdp__extra:hover {
  border-color: var(--sg-accent, var(--sg-color-primary));
}
.sg-pdp__extra.is-checked {
  border-color: var(--sg-accent, var(--sg-color-primary));
}
.sg-pdp__extra input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--sg-accent, var(--sg-color-primary));
  flex-shrink: 0;
  margin: 0;
}
.sg-pdp__extra-body {
  flex: 1;
  min-width: 0;
}
.sg-pdp__extra-title {
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--sg-ink);
  line-height: 1.3;
}
.sg-pdp__extra-sub {
  font-family: var(--sg-font-body);
  font-size: 12px;
  color: var(--sg-ink-3, var(--sg-ink-2));
  line-height: 1.3;
  margin-top: 2px;
}
.sg-pdp__extra-price {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 14px;
  color: var(--sg-ink);
  white-space: nowrap;
}
.sg-pdp__extra-price .woocommerce-Price-amount {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.sg-pdp__extra-msg-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-pdp__extra-msg-wrap[hidden] {
  display: none;
}
.sg-pdp__extra-msg {
  width: 100%;
  padding: 14px 16px;
  background: var(--sg-paper, #FFFFFF);
  border: 1.5px solid var(--sg-border, #E8DFCE);
  border-radius: 14px;
  font-family: var(--sg-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sg-ink);
  resize: none;
  transition: border-color 140ms;
}
.sg-pdp__extra-msg:focus {
  outline: none;
  border-color: var(--sg-accent, var(--sg-color-primary));
}
.sg-pdp__extra-msg-counter {
  font-family: var(--sg-font-body);
  font-size: 11px;
  color: var(--sg-ink-3, var(--sg-ink-2));
  text-align: right;
}
.sg-pdp__extras-line {
  font-family: var(--sg-font-body);
  font-size: 12px;
  color: var(--sg-ink-3, var(--sg-ink-2));
  margin-top: 4px;
}

/* CSS version marker */
.sg-css-version::before { content: "v51-pdp-extras" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v52-pdp-faq — v1.0.27 / v1.0.27a fix
   PDP gebruikt nu .sg-archive__faq* classes (zie PLP-block hoger).
   Alleen wrapper-section styling hier voor cream-soft band.
   ═══════════════════════════════════════════════════════════════════════ */

.sg-pdp-faq-section {
  margin-top: 72px;
  padding: 72px 0;
  background: var(--sg-cream-soft, var(--sg-color-cream-soft, #F4EBD9));
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}
.sg-pdp-faq-section > .sg-archive__faq {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
  border-top: none; /* override PLP border-top inside the band */
}

/* CSS version marker */
.sg-css-version::before { content: "v53-pdp-faq-fullwidth" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v54-pdp-extras-line — v1.0.27d
   Extra's-regel onder de hoofdprijs op de PDP price-card.
   Toont som van aangevinkte extras (Cadeauverpakking + Kraamvisitekaartje).
   Base prijs blijft ongewijzigd — cart berekent het echte totaal.
   ═══════════════════════════════════════════════════════════════════════ */

.sg-pdp-price-card__extras {
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-ink-3, var(--sg-ink-2));
  margin-top: 4px;
  line-height: 1.3;
}
.sg-pdp-price-card__extras[hidden] {
  display: none;
}

/* CSS version marker */
.sg-css-version::before { content: "v54-pdp-extras-line" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v55-minicart-extras — v1.0.27f
   Mini-cart extras (Cadeauverpakking / Kraamvisitekaartje / Bericht)
   compact gestyled — even klein als .sg-cart-item__sub (12px grijs).
   Werkt op WC's <dl class="variation"> / <dl class="wc-item-meta">.
   Geen template-wijziging.
   ═══════════════════════════════════════════════════════════════════════ */

.sg-offcanvas--cart .woocommerce-mini-cart-item .variation,
.sg-offcanvas--cart .woocommerce-mini-cart-item .wc-item-meta {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sg-font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--sg-ink-3, var(--sg-ink-2));
}

.sg-offcanvas--cart .woocommerce-mini-cart-item .variation::before {
  content: "Extra's:";
  display: block;
  font-weight: 700;
  font-size: 12px;
  color: var(--sg-ink-2);
  margin-bottom: 2px;
}

.sg-offcanvas--cart .woocommerce-mini-cart-item .variation dt,
.sg-offcanvas--cart .woocommerce-mini-cart-item .wc-item-meta dt {
  display: block;
  margin: 1px 0 0;
  padding: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sg-ink-3, var(--sg-ink-2));
}

.sg-offcanvas--cart .woocommerce-mini-cart-item .variation dt::before,
.sg-offcanvas--cart .woocommerce-mini-cart-item .wc-item-meta dt::before {
  content: "• ";
}

.sg-offcanvas--cart .woocommerce-mini-cart-item .variation dd,
.sg-offcanvas--cart .woocommerce-mini-cart-item .wc-item-meta dd {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sg-ink-3, var(--sg-ink-2));
}

.sg-offcanvas--cart .woocommerce-mini-cart-item .variation dd p,
.sg-offcanvas--cart .woocommerce-mini-cart-item .wc-item-meta dd p {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  font-weight: 400;
}

/* CSS version marker */
.sg-css-version::before { content: "v55-minicart-extras" !important; }


/* ═══════════════════════════════════════════════════════════════════════
   v57-home-recovery — v1.0.29a
   Minimal additions for front-page.php. Most section styling already
   exists (.sg-hero, .sg-hero__left/__right, .sg-popular__card.sg-product,
   .sg-story, .sg-facts, .sg-gift). This block covers only:
   - Section background modifiers (.sg-section--*)
   - Hero image wrap + sticker (not in prior CSS)
   - sg-popular__atc button
   - Section padding where Elementor's default no longer applies
   ═══════════════════════════════════════════════════════════════════════ */

/* Shared section background modifiers — used by front-page.php */
.sg-section { box-sizing: border-box; }
.sg-section--cream          { background: var(--sg-color-cream, #FBF5EC); }
.sg-section--soft           { background: var(--sg-color-cream-soft, #F4EBD9); }
.sg-section--rotterdam-soft { background: #D9F0E2; }
.sg-section--ink            { background: var(--sg-color-ink, #1B1A17); color: var(--sg-color-cream, #FBF5EC); }

/* Hero image wrap — was implicit in Elementor's image widget */
.sg-hero__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  overflow: hidden;
  background: var(--sg-color-cream-soft, #F4EBD9);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}
.sg-hero__image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sg-hero__image-wrap--empty {
  background: var(--sg-color-cream-soft, #F4EBD9);
  border: 2px dashed rgba(0, 0, 0, 0.1);
}
.sg-hero__sticker {
  position: absolute;
  top: 24px; right: 24px;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--sg-color-primary, #009A47);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sg-font-script, "Caveat", cursive);
  font-size: 18px;
  text-align: center;
  line-height: 1.15;
  transform: rotate(-6deg);
  z-index: 2;
  padding: 8px;
}

/* Popular ATC button inside cards on homepage */
.sg-popular__atc {
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: 999px;
  border: none;
  background: var(--sg-color-primary, #009A47);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sg-popular__atc:hover { opacity: 0.88; transform: translateY(-1px); }

/* Yellow CTA button (gift band) */
.sg-btn-yellow {
  background: #FFC845;
  color: var(--sg-color-ink, #1B1A17);
  border: 1px solid #FFC845;
}
.sg-btn-yellow:hover { background: #e6b43d; border-color: #e6b43d; }

/* Edition picker on homepage — center the pill strip */
.sg-home .sg-edition-picker__inner { text-align: center; }
.sg-home .sg-edition-picker__inner .sg-plp__picker-strip { justify-content: center; }

/* Facts items on homepage — items need centring if not via Elementor */
.sg-home .sg-fact { text-align: center; }

/* ── v58 — Homepage popular products: WC loop grid + card styles ── */

/* Grid wrapper */
.sg-home .sg-popular__products.products.columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) {
  .sg-home .sg-popular__products.products.columns-3 {
    grid-template-columns: 1fr;
  }
}

/* Card base — mirrors .sg-popular__card.sg-product for the WC li */
.sg-popular__products .sg-product {
  background: var(--sg-paper, #fff);
  border: 1px solid var(--sg-border, rgba(0,0,0,.06));
  border-radius: var(--sg-radius-lg, 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sg-shadow-sm, 0 2px 8px rgba(0,0,0,.04));
  transition: transform 200ms, box-shadow 200ms;
  position: relative;
  margin: 0;
}
.sg-popular__products .sg-product:hover {
  transform: translateY(-2px);
  box-shadow: var(--sg-shadow-md, 0 12px 32px rgba(0,0,0,.08));
}

/* Link fills the card height so the price row sits at the bottom */
.sg-popular__products .sg-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.sg-popular__products .sg-product__link:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: -4px;
  border-radius: var(--sg-radius-lg, 24px);
}

/* Media */
.sg-popular__products .sg-product__media {
  aspect-ratio: 1 / 1;
  background: var(--sg-accent-soft, var(--sg-cream-soft, #F4EBD9));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-popular__products .sg-product__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 24px;
  transition: transform 300ms ease;
}
.sg-popular__products .sg-product:hover .sg-product__media img {
  transform: scale(1.03);
}

/* Badge (pack size, Caveat) */
.sg-popular__products .sg-product__badge {
  position: absolute;
  top: 16px; left: 20px;
  font-family: var(--sg-font-script);
  font-size: 22px;
  color: var(--sg-accent);
  line-height: 1;
  z-index: 2;
}

/* Body (meta + title) */
.sg-popular__products .sg-product__body {
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
.sg-popular__products .sg-product__meta {
  font-family: var(--sg-font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-ink-2);
  margin: 0;
}
.sg-popular__products .sg-product__title {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
  color: var(--sg-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Row (price + ATC button) */
.sg-popular__products .sg-product__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px 20px;
}
.sg-popular__products .sg-product__price {
  font-family: var(--sg-font-display);
  font-size: 22px;
  color: var(--sg-ink);
  line-height: 1;
}
.sg-popular__products .sg-product__price .woocommerce-Price-amount {
  font-family: inherit;
}

/* CSS version marker */
.sg-css-version::before { content: "v58-popular-wc-loop" !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v59-home-rewrite — v1.0.29d
   Volledig rewrite van homepage CSS volgens design (chunk_9.jsx HomeScreen).
   Eigen .sg-home* namespace, geen Elementor .e-con-inner afhankelijkheid.
   ═══════════════════════════════════════════════════════════════════════ */

.sg-home-section { padding: 96px 32px; position: relative; }
.sg-home-section__inner { max-width: 1200px; margin: 0 auto; width: 100%; }

/* 1. HERO */
.sg-home-hero { padding: 72px 32px 96px; }
.sg-home-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.sg-home-hero__left,
.sg-home-hero__right { min-width: 0; }
.sg-home-hero__eyebrow { color: var(--sg-rotterdam-deep); margin-bottom: 14px; }
.sg-home-hero__title {
  font-family: var(--sg-font-display);
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--sg-ink);
}
.sg-home-hero__script {
  color: var(--sg-rotterdam);
  font-family: var(--sg-font-script);
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1;
  transform: rotate(-3deg);
  display: inline-block;
  margin-bottom: 18px;
}
.sg-home-hero__lead { max-width: 42ch; margin: 0 0 28px; }
.sg-home-hero__cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sg-home-hero__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  overflow: hidden;
  background: var(--sg-cream-soft);
  box-shadow: var(--sg-shadow-lg);
}
.sg-home-hero__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-home-hero__sticker {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--sg-rotterdam);
  color: var(--sg-paper);
}

/* 2. EDITION PICKER */
.sg-home-ep { padding: 56px 32px; }
.sg-home-ep__header { text-align: center; margin-bottom: 28px; }
.sg-home-ep__header .sg-eyebrow { margin-bottom: 8px; display: inline-block; }
.sg-home-ep__title {
  font-family: var(--sg-font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--sg-ink);
}
.sg-home-ep__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.sg-home-ep__pills .sg-pill { text-decoration: none; }

/* 3. POPULAR PRODUCTS */
.sg-home-popular { padding: 96px 32px; }
.sg-home-popular__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
}
.sg-home-popular__eyebrow { margin-bottom: 8px; }
.sg-home-popular__title {
  font-family: var(--sg-font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--sg-ink);
}
.sg-home-popular__more {
  padding: 10px 14px !important;
  color: var(--sg-rotterdam-deep) !important;
  flex-shrink: 0;
}
ul.products.sg-home-popular__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.products.sg-home-popular__grid::before,
ul.products.sg-home-popular__grid::after {
  content: none !important;
  display: none !important;
}
ul.products.sg-home-popular__grid li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* 4. STORY STRIP */
.sg-home-story { padding: 96px 32px; }
.sg-home-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.sg-home-story__image-wrap {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: var(--sg-cream-soft);
}
.sg-home-story__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-home-story__body { min-width: 0; }
.sg-home-story__eyebrow { color: var(--sg-rotterdam-deep); margin-bottom: 8px; }
.sg-home-story__title {
  font-family: var(--sg-font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--sg-ink);
}
.sg-home-story__lead { margin: 0 0 14px; }
.sg-home-story__paragraph { margin: 0 0 24px; }

/* 5. FACTS STRIP */
.sg-home-facts { padding: 56px 32px; }
.sg-home-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.sg-home-facts__item { min-width: 0; }
.sg-home-facts__number {
  font-family: var(--sg-font-display);
  font-size: clamp(36px, 5vw, 64px);
  color: var(--sg-rotterdam-deep);
  line-height: 1;
}
.sg-home-facts__label { margin-top: 8px; }

/* 6. GIFT BAND */
.sg-home-gift {
  padding: 96px 32px;
  background: var(--sg-ink);
  color: var(--sg-cream);
}
.sg-home-gift__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.sg-home-gift__body { min-width: 0; }
.sg-home-gift__script {
  font-family: var(--sg-font-script);
  font-weight: 600;
  font-size: clamp(28px, 3.5vw, 44px);
  color: var(--sg-denhaag);
  margin-bottom: 8px;
  line-height: 1;
}
.sg-home-gift__title {
  font-family: var(--sg-font-display);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--sg-cream);
  margin: 0 0 20px;
}
.sg-home-gift__paragraph {
  color: var(--sg-cream);
  opacity: 0.85;
  margin: 0 0 28px;
}
.sg-home-gift__cta {
  background: var(--sg-denhaag);
  color: var(--sg-ink);
  border: 1.5px solid var(--sg-denhaag);
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--sg-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--sg-dur-base) var(--sg-ease);
}
.sg-home-gift__cta:hover {
  background: var(--sg-denhaag-deep);
  border-color: var(--sg-denhaag-deep);
}
.sg-home-gift__image-wrap {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: var(--sg-cream-soft);
}
.sg-home-gift__image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Responsive */
@media (max-width: 1024px) {
  .sg-home-section { padding-left: 24px !important; padding-right: 24px !important; }
  .sg-home-hero__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  ul.products.sg-home-popular__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sg-home-facts__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .sg-home-story__grid,
  .sg-home-gift__grid { gap: 40px; }
}
@media (max-width: 720px) {
  .sg-home-section { padding-top: 64px !important; padding-bottom: 64px !important; padding-left: 18px !important; padding-right: 18px !important; }
  .sg-home-hero { padding-top: 48px !important; padding-bottom: 64px !important; }
  .sg-home-hero__grid,
  .sg-home-story__grid,
  .sg-home-gift__grid { grid-template-columns: 1fr !important; }
  .sg-home-hero__grid { gap: 32px; }
  ul.products.sg-home-popular__grid { grid-template-columns: 1fr !important; }
  .sg-home-hero__image-wrap { aspect-ratio: 4 / 5; }
  .sg-home-popular__header { flex-direction: column; align-items: flex-start; }
  .sg-home-popular__more { align-self: flex-end; }
  .sg-home-gift__grid { gap: 32px; }
  /* Edition picker — horizontaal scrollbaar op mobile */
  .sg-home-ep__pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    /* Uitlopen tot section-edge zodat eerste/laatste pill niet geclipped wordt */
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sg-home-ep__pills::-webkit-scrollbar { display: none; }
}

/* ── v60 · USP bar (design-ref: cream-soft bg, vertical mobile fade) ────── */
.sg-usp-bar {
  background: var(--sg-cream-soft);
  color: var(--sg-ink-2);
  overflow: hidden;
  border-bottom: 1px solid var(--sg-border);
}
/* Desktop: all 4 items in a row */
.sg-usp-bar__track {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 9px 32px;
  gap: 24px;
}
.sg-usp-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  color: var(--sg-ink-2);
}
.sg-usp-bar__icon { color: var(--sg-rotterdam-deep); display: inline-flex; flex-shrink: 0; }
/* Mobile: single rotating item, vertical fade */
.sg-usp-bar__mobile {
  display: none;
  position: relative; height: 34px;
  padding: 0 16px;
}
.sg-usp-bar__mobile-item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--sg-ink-2);
  transition: transform 420ms cubic-bezier(.2,.7,.2,1), opacity 420ms cubic-bezier(.2,.7,.2,1);
}
.sg-usp-bar__mobile-item .sg-usp-bar__icon { color: var(--sg-rotterdam-deep); }
@media (max-width: 720px) {
  .sg-usp-bar__track { display: none; }
  .sg-usp-bar__mobile { display: block; }
}

/* ── v60 · Mobile menu off-canvas ──────────────────────────────────────── */
.sg-mobile-menu { pointer-events: none; }
.sg-mobile-menu.is-open { pointer-events: auto; }
.sg-mobile-menu__overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(27, 26, 23, 0.55);
  opacity: 0;
  transition: opacity 320ms var(--sg-ease);
}
.sg-mobile-menu.is-open .sg-mobile-menu__overlay { opacity: 1; }
.sg-mobile-menu__panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw);
  background: var(--sg-cream);
  overflow-y: auto; overflow-x: hidden;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 320ms var(--sg-ease), visibility 320ms var(--sg-ease);
  z-index: 1001;
  display: flex; flex-direction: column;
}
.sg-mobile-menu.is-open .sg-mobile-menu__panel {
  transform: translateX(0);
  visibility: visible;
}
.sg-mobile-menu__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sg-border);
  flex-shrink: 0;
}
.sg-mobile-menu__logo img { display: block; }
.sg-mobile-menu__close {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--sg-ink); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.sg-mobile-menu__body { flex: 1; overflow-y: auto; }
.sg-mobile-menu__greeting {
  background: var(--sg-rotterdam-soft); padding: 20px;
}
.sg-mobile-menu__greeting-script {
  font-family: var(--sg-font-script); font-size: 28px; color: var(--sg-rotterdam);
  display: block; line-height: 1.1;
}
.sg-mobile-menu__greeting-tagline { margin: 4px 0 0; font-size: 14px; color: var(--sg-ink-2); }
.sg-mobile-menu__primary ul,
.sg-mobile-menu__secondary ul { list-style: none; margin: 0; padding: 0; }
.sg-mobile-menu__primary { border-bottom: 1px solid var(--sg-border); }
.sg-mobile-menu__primary-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  font-family: var(--sg-font-display); font-size: 20px; font-weight: 400;
  color: var(--sg-ink); text-decoration: none;
  border-bottom: 1px solid var(--sg-border);
  transition: background var(--sg-dur-base) var(--sg-ease);
}
.sg-mobile-menu__primary-link:hover { background: var(--sg-cream-soft); }
.sg-mobile-menu__cities {
  padding: 20px;
  border-bottom: 1px solid var(--sg-border);
}
.sg-mobile-menu__cities-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sg-ink-2); display: block; margin-bottom: 10px;
}
.sg-mobile-menu__cities-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* City pills use canonical .sg-city-pill — defined below */
.sg-mobile-menu__secondary { padding: 12px 0; }
.sg-mobile-menu__secondary-link {
  display: block; padding: 10px 20px; font-size: 15px;
  color: var(--sg-ink-2); text-decoration: none;
  transition: color var(--sg-dur-base) var(--sg-ease);
}
.sg-mobile-menu__secondary-link:hover { color: var(--sg-ink); }
.sg-mobile-menu__footer {
  flex-shrink: 0; padding: 16px 20px;
  border-top: 1px solid var(--sg-border);
  background: var(--sg-cream-soft);
}
.sg-mobile-menu__footer-contacts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sg-mobile-menu__footer-link {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--sg-ink-2); text-decoration: none;
  transition: color var(--sg-dur-base) var(--sg-ease);
}
.sg-mobile-menu__footer-link:hover { color: var(--sg-ink); }
.sg-mobile-menu__trigger {
  display: none;
  position: fixed; top: 14px; right: 14px; z-index: 49;
  background: var(--sg-ink); color: var(--sg-cream);
  border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center;
  box-shadow: var(--sg-shadow-md);
  transition: background var(--sg-dur-base) var(--sg-ease);
}
.sg-mobile-menu__trigger:hover { background: var(--sg-ink-2); }
@media (max-width: 720px) { .sg-mobile-menu__trigger { display: inline-flex; } }

/* ── v60 · PLP city pills — self-aligning (no sg-container class on element) */
.sg-plp-city-pills {
  padding-top: 12px;
  padding-bottom: 24px;
  background: var(--sg-cream);
}
.sg-plp-city-pills__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
@media (max-width: 720px) {
  .sg-plp-city-pills { overflow: hidden; }
  .sg-plp-city-pills__inner {
    max-width: none; margin: 0;
    padding-left: 16px; padding-right: 16px; padding-bottom: 4px;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sg-plp-city-pills__inner::-webkit-scrollbar { display: none; }
}

/* ── v60 · Canonical city pill ─────────────────────────────────────────── */
.sg-city-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 99px; font-size: 13px; font-weight: 600;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background: var(--sg-cream-soft); color: var(--sg-ink);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--sg-dur-base) var(--sg-ease),
              color var(--sg-dur-base) var(--sg-ease),
              border-color var(--sg-dur-base) var(--sg-ease);
}
/* Colored dot — shown when inactive */
.sg-city-pill::before {
  content: '';
  display: block; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--city-color, var(--sg-rotterdam));
}
/* Suppress dot + normalize padding for no-dot variant ("Alle edities") */
.sg-city-pill--no-dot { padding: 7px 14px; }
.sg-city-pill--no-dot::before { display: none; }
/* Hover: subtle border emphasis, dot stays */
.sg-city-pill:hover { border-color: rgba(0, 0, 0, 0.22); }
/* Active: solid city-color fill, white dot stays */
.sg-city-pill.is-active {
  background: var(--city-color, var(--sg-rotterdam));
  border-color: var(--city-color, var(--sg-rotterdam));
  color: #fff;
}
.sg-city-pill.is-active::before { background: rgba(255, 255, 255, 0.65); }
/* Homepage EP pills context */
.sg-home-ep__pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── v65 · Offcanvas menu — designed content (design-ref image #36) */
.sg-offcanvas--menu .sg-offcanvas__body { overflow-x: hidden; padding: 0 20px 20px; }

/* Logo link */
.sg-offcanvas__logo-link { display: flex; align-items: center; text-decoration: none; }
.sg-offcanvas__logo-img { display: block; height: 32px; width: auto; }

/* Greeting band — bleeds 20px to match body padding */
.sg-offcanvas--menu .sg-offcanvas__greeting {
  background: var(--sg-rotterdam-soft, #E8F5EE); padding: 22px 20px 20px;
  margin: 0 -20px 4px;
}
.sg-offcanvas__greeting-script {
  font-family: var(--sg-font-script); font-size: 30px; font-style: italic;
  color: var(--sg-color-primary, var(--sg-rotterdam)); display: block; line-height: 1.1;
  margin-bottom: 8px;
}
.sg-offcanvas__greeting-tagline { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sg-ink-2); }

/* Primary nav — card-style items (higher specificity to beat old generic rules) */
.sg-offcanvas__primary { margin-top: 8px; }
.sg-offcanvas__primary ul,
.sg-offcanvas__secondary ul { list-style: none; margin: 0; padding: 0; }
.sg-offcanvas__primary li { margin-bottom: 0; }
.sg-offcanvas--menu .sg-offcanvas__primary-link {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 16px 0;
  background: transparent;
  border: none; border-bottom: 1px solid var(--sg-border); border-radius: 0;
  color: var(--sg-ink); text-decoration: none; box-sizing: border-box;
  transition: color var(--sg-dur-base) var(--sg-ease);
}
.sg-offcanvas--menu .sg-offcanvas__primary-link:hover { color: var(--sg-color-primary, var(--sg-rotterdam)); }
.sg-offcanvas--menu .sg-offcanvas__primary-link > svg { flex-shrink: 0; opacity: 0.35; }
.sg-offcanvas__primary-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sg-offcanvas__primary-title {
  font-family: var(--sg-font-display); font-size: 22px;
  line-height: 1.15;
}
.sg-offcanvas__primary-sub { font-size: 13px; color: var(--sg-ink-2); font-weight: 500; }

/* City pills section */
.sg-offcanvas__cities { padding: 20px 0 16px; }
.sg-offcanvas__cities-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sg-ink-2); display: block; margin-bottom: 12px;
}
.sg-offcanvas__cities-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* Secondary nav — text links with arrow */
.sg-offcanvas__secondary { padding: 4px 0 8px; border-top: 1px solid var(--sg-border); }
.sg-offcanvas__secondary li { border-bottom: 1px solid var(--sg-border); }
.sg-offcanvas__secondary li:last-child { border-bottom: none; }
.sg-offcanvas--menu .sg-offcanvas__secondary-link {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 14px 0; font-size: 16px; font-weight: 500;
  color: var(--sg-ink-2); text-decoration: none;
  transition: color var(--sg-dur-base) var(--sg-ease);
}
.sg-offcanvas--menu .sg-offcanvas__secondary-link > svg { opacity: 0.35; flex-shrink: 0; }
.sg-offcanvas--menu .sg-offcanvas__secondary-link:hover { color: var(--sg-ink); }

/* Footer — override old grid/box style with simple flex row */
.sg-offcanvas--menu .sg-offcanvas__foot { background: var(--sg-cream-soft); }
.sg-offcanvas--menu .sg-offcanvas__foot-contacts {
  display: flex !important; flex-direction: row !important;
  align-items: center; gap: 12px; flex-wrap: wrap;
}
.sg-offcanvas--menu .sg-offcanvas__foot-link {
  display: inline-flex !important; flex-direction: row !important;
  align-items: center; gap: 6px;
  padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--sg-ink-2);
  text-decoration: none; background: none !important; border-radius: 0;
  transition: color var(--sg-dur-base) var(--sg-ease);
}
.sg-offcanvas--menu .sg-offcanvas__foot-link:hover { color: var(--sg-ink); }
.sg-offcanvas--menu .sg-offcanvas__foot-link svg { color: var(--sg-color-primary, var(--sg-rotterdam)); flex-shrink: 0; }

/* ── PLP archive layout — prevent grid-child overflow */
.sg-archive__layout > * { min-width: 0; }
.sg-archive__main { width: 100%; }
.sg-archive .products { width: 100%; box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════════════
   v61-cart-page — v1.0.31
   Cart page: 2-col grid, items + sticky summary. Empty state.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Cart page wrapper ──────────────────────────────────────── */
.sg-cart-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}

/* Breadcrumb */
.sg-cart-page__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.sg-cart-page__breadcrumb-step {
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--sg-ink-3);
}
.sg-cart-page__breadcrumb-step.is-active {
  color: var(--sg-ink);
  font-weight: 700;
}
.sg-cart-page__breadcrumb-sep {
  color: var(--sg-ink-4);
  font-size: 13px;
}

/* Title */
.sg-cart-page__title {
  font-family: var(--sg-font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  margin: 0 0 32px;
  color: var(--sg-ink);
}

/* 2-col grid */
.sg-cart-page__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ── Cart items ─────────────────────────────────────────────── */
.sg-cart-page__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sg-cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 16px;
  background: var(--sg-paper);
  border-radius: 16px;
  border: 1px solid var(--sg-border);
}

.sg-cart-item__image {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sg-cream-soft);
  flex-shrink: 0;
}
.sg-cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sg-cart-item__info { min-width: 0; }
.sg-cart-item__meta { margin-bottom: 2px; }
.sg-cart-item__name {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 17px;
  color: var(--sg-ink);
  margin-bottom: 6px;
}
.sg-cart-item__name a { color: inherit; text-decoration: none; }
.sg-cart-item__name a:hover { text-decoration: underline; }
.sg-cart-item__pack {
  font-family: var(--sg-font-body);
  font-size: 13px;
  color: var(--sg-ink-3);
}
.sg-cart-item__extras {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sg-font-body);
  font-size: 12px;
  color: var(--sg-ink-3);
}
.sg-cart-item__extras li::before { content: '• '; }

/* Stepper */
.sg-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--sg-border);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  background: var(--sg-paper);
}
.sg-stepper__btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--sg-ink);
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--sg-dur-fast) var(--sg-ease);
}
.sg-stepper__btn:hover { background: var(--sg-cream-soft); }
.sg-stepper__input {
  width: 32px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--sg-ink);
  -moz-appearance: textfield;
}
.sg-stepper__input::-webkit-inner-spin-button,
.sg-stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Price col */
.sg-cart-item__price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.sg-cart-item__line-price {
  font-family: var(--sg-font-display);
  font-size: 22px;
  color: var(--sg-ink);
  line-height: 1;
}
.sg-cart-item__remove {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--sg-ink-3);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--sg-dur-fast) var(--sg-ease);
}
.sg-cart-item__remove:hover { color: var(--sg-ink); }

/* Nudge */
.sg-cart-nudge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--sg-cream-soft);
  border-radius: 14px;
  border-left: 3px solid var(--sg-rotterdam);
}
.sg-cart-nudge__img-wrap {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--sg-cream);
}
.sg-cart-nudge__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.sg-cart-nudge__body { flex: 1; min-width: 0; }
.sg-cart-nudge__script {
  font-family: var(--sg-font-script);
  font-size: 24px;
  color: var(--sg-rotterdam);
  line-height: 1;
  margin-bottom: 4px;
}

/* ── Summary sidebar ────────────────────────────────────────── */
.sg-cart-summary {
  position: sticky;
  top: 100px;
  background: var(--sg-paper);
  border-radius: 20px;
  border: 1px solid var(--sg-border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-cart-summary__title {
  font-family: var(--sg-font-display);
  font-size: 24px;
  margin: 0 0 4px;
  color: var(--sg-ink);
}
.sg-cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sg-font-body);
  font-size: 14px;
  color: var(--sg-ink-2);
}
.sg-cart-summary__row--discount { color: var(--sg-rotterdam-deep); }
.sg-cart-summary__row--total {
  font-size: 17px;
  font-weight: 800;
  color: var(--sg-ink);
}
.sg-cart-summary__val { font-weight: 700; }
.sg-cart-summary__val--discount { font-weight: 800; }
.sg-cart-summary__free { color: var(--sg-rotterdam-deep); font-weight: 700; }
.sg-cart-summary__coupon-badge {
  background: var(--sg-rotterdam-soft);
  color: var(--sg-rotterdam-deep);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.sg-cart-summary__coupon-row { display: inline-flex; align-items: center; }
.sg-cart-summary__divider { height: 1px; background: var(--sg-border); }
.sg-cart-summary__total-wrap { text-align: right; }
.sg-cart-summary__total-price {
  font-family: var(--sg-font-display);
  font-size: 32px;
  color: var(--sg-ink);
  line-height: 1;
  display: block;
}
.sg-cart-summary__total-price strong,
.sg-cart-summary__total-price b {
  font-weight: normal;
}
.sg-cart-summary__vat {
  font-family: var(--sg-font-body);
  font-size: 11px;
  color: var(--sg-ink-3);
}

/* Coupon toggle + body */
.sg-cart-coupon__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--sg-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--sg-color-ink);
  text-align: left;
}
.sg-cart-coupon__icon {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--sg-ink-3, #6B6560);
}
.sg-cart-coupon__body { display: none; margin-top: 12px; }
.sg-cart-coupon__body.is-open { display: block; }

/* Coupon input row */
.sg-cart-coupon__row { display: flex; gap: 10px; align-items: stretch; }
.sg-cart-coupon__input {
  flex: 1;
  height: 54px;
  padding: 0 18px;
  border: 1.5px solid var(--sg-border, #E8DFCE);
  border-radius: 14px;
  font-family: var(--sg-font-body);
  font-size: 15px;
  background: #fff;
  color: var(--sg-color-ink);
  outline: none;
  transition: border-color 0.15s;
}
.sg-cart-coupon__input:focus { border-color: var(--sg-color-primary); }
.sg-cart-coupon__ok {
  height: 54px;
  padding: 0 24px;
  border: 2px solid var(--sg-color-ink);
  border-radius: 999px;
  background: #fff;
  font-family: var(--sg-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--sg-color-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.sg-cart-coupon__ok:hover { background: var(--sg-color-ink); color: #fff; }

.sg-cart-coupon__error {
  margin-top: 8px;
  font-family: var(--sg-font-body);
  font-size: 12px;
  color: var(--sg-error, #c0392b);
  min-height: 18px;
}

/* Checkout CTA */
.sg-cart-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-decoration: none;
  margin-top: 4px;
}

/* Payment methods */
.sg-cart-summary__payment-methods {
  display: flex;
  gap: 8px;
  justify-content: center;
  font-family: var(--sg-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-ink-3);
}

/* ── Empty state ────────────────────────────────────────────── */
.sg-cart-empty {
  text-align: center;
  padding: 96px 32px;
  max-width: 600px;
  margin: 0 auto;
}
.sg-cart-empty__script {
  font-family: var(--sg-font-script);
  color: var(--sg-rotterdam);
  font-size: 56px;
  margin-bottom: 12px;
  display: block;
}
.sg-cart-empty__title {
  font-family: var(--sg-font-display);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  margin: 0 0 16px;
  color: var(--sg-ink);
}
.sg-cart-empty__lead { margin: 0 auto 28px; max-width: 480px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sg-cart-page__grid { grid-template-columns: 1fr; }
  .sg-cart-summary { position: static; }
}
@media (max-width: 720px) {
  .sg-cart-page { padding: 24px 16px 64px; }

  .sg-cart-item {
    grid-template-columns: 72px 1fr auto;
    grid-template-rows: auto auto;
    gap: 12px;
    padding: 14px;
  }

  .sg-cart-item__image {
    width: 72px;
    height: 72px;
    grid-row: 1 / 3;
  }

  .sg-cart-item__info {
    grid-column: 2;
    grid-row: 1;
  }

  .sg-cart-item__stepper {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .sg-cart-item__price-col {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .sg-cart-nudge {
    flex-wrap: nowrap;
    gap: 12px;
  }
  .sg-cart-nudge__img-wrap {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
  }
  .sg-cart-nudge__script { font-size: 20px; }

  .sg-cart-page__grid { gap: 20px; }
  .sg-cart-summary { border-radius: 16px; padding: 20px; }
}

/* ── v70 · Header: sticky wrapper + glassmorphism ──────────────────────── */

/* Glass leeft op .elementor-location-header — sg-header is transparant */
.sg-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Intermediate containers: geen eigen achtergrond — die zit op .elementor-location-header */
.elementor-location-header > .e-con,
.elementor-location-header > .elementor-section,
.elementor-location-header > .e-con > .e-con-inner {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── v71 · Z-index fix: uspbar + header sticky stacking ────────────────── */

/* USP bar: scrolls away normally (not sticky) */
.sg-uspbar {
  position: relative !important;
  z-index: 101 !important;
  background: rgba(244, 235, 217, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--sg-border) !important;
  overflow: hidden;
}

/* Header: sticky at top:0 — snaps flush to top the moment USP bar scrolls away */
.elementor-location-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: color-mix(in oklab, var(--sg-cream, #FBF5EC) 78%, transparent) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

/* Offcanvas backdrop must sit ABOVE header/uspbar so the glass blur
   doesn't pick up the dark overlay. Panels sit above the backdrop. */
.sg-offcanvas-backdrop {
  z-index: 900 !important;
}
.sg-offcanvas {
  z-index: 1000 !important;
}

/* CSS version marker */
/* ── v74 · Cart page polish fixes ──────────────────────────────────────── */

/* Items gap: ruimte tussen de kaartjes */
.sg-cart-page__items {
  gap: 12px !important;
}

/* Checkout CTA: no underline, white text forced */
.sg-cart-summary__checkout {
  text-decoration: none !important;
  color: var(--sg-accent-contrast, #fff) !important;
}
.sg-cart-summary__checkout:hover {
  text-decoration: none !important;
  color: var(--sg-accent-contrast, #fff) !important;
}

/* Stepper input: strip browser/WC default border */
.sg-stepper__input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Cart extras block ──────────────────────────────── */
/* Gap tussen items: adjacent-sibling margins op de form-children */
.woocommerce-cart-form .sg-cart-item + .sg-cart-item,
.woocommerce-cart-form .sg-cart-extras + .sg-cart-item { margin-top: 12px; }

/* Item dat extras achter zich heeft: bottom-radius plat + geen bottom-border */
.woocommerce-cart-form .sg-cart-item:has(+ .sg-cart-extras) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

.sg-cart-extras {
  margin-top: 0;
  background: var(--sg-cream-soft);
  border-radius: 12px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  overflow: hidden;
  border: 1px solid var(--sg-border);
  border-top: 1px dashed var(--sg-border);
}
.sg-cart-extras__header {
  font-family: var(--sg-font-body);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sg-ink-3);
  padding: 10px 14px 6px;
}
.sg-cart-extras__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 14px 10px;
}
.sg-cart-extras__item + .sg-cart-extras__item {
  border-top: 1px solid var(--sg-border);
  padding-top: 10px;
}
.sg-cart-extras__icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.4;
}
.sg-cart-extras__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sg-cart-extras__label {
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-ink);
}
.sg-cart-extras__sub {
  font-family: var(--sg-font-body);
  font-size: 12px;
  color: var(--sg-ink-3);
}
.sg-cart-extras__sub--msg {
  font-style: italic;
  color: var(--sg-ink-2);
}
.sg-cart-extras__price {
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-ink);
  flex-shrink: 0;
  white-space: nowrap;
}

/* v77-drawer-empty ---------------------------------------- */
.sg-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sg-space-10) var(--sg-space-6);
  flex: 1;
  min-height: 300px;
}
.sg-drawer-empty__caveat {
  font-family: 'Caveat', cursive;
  font-size: 2.5rem;
  color: var(--sg-color-rotterdam-primary, #00833D);
  margin: 0 0 8px;
  line-height: 1;
}
.sg-drawer-empty__headline {
  font-family: 'Caprasimo', cursive;
  font-size: clamp(2rem, 6vw, 2.8rem);
  color: var(--sg-color-ink, #1B1A17);
  margin: 0 0 16px;
  line-height: 1.15;
}
.sg-drawer-empty__sub {
  font-size: 1rem;
  color: var(--sg-color-ink-2, #3B3833);
  max-width: 260px;
  margin: 0 0 24px;
  line-height: 1.55;
}
.sg-drawer-empty__cta {
  background: var(--sg-color-rotterdam-primary, #00833D);
  color: #fff !important;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none !important;
  display: inline-block;
  transition: background 0.2s;
}
.sg-drawer-empty__cta:hover {
  background: var(--sg-color-rotterdam-deep, #006B30);
}

/* v77-drawer-remove-hover --------------------------------- */
.sg-drawer-remove,
.sg-offcanvas a.remove,
.sg-cart-item .remove {
  color: var(--sg-color-ink-2, #3B3833) !important;
  background: none !important;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  text-decoration: none !important;
}
.sg-drawer-remove:hover,
.sg-offcanvas a.remove:hover,
.sg-cart-item .remove:hover {
  color: #c0392b !important;
  background: #fde8e6 !important;
  text-decoration: none !important;
}

/* v78-cart-empty-cta ---------------------------------------- */
.sg-cart-empty__cta {
  text-decoration: none !important;
  color: #fff !important;
}
.sg-cart-empty__cta:hover {
  text-decoration: none !important;
}

/* v79-footer -------------------------------------------- */
.sg-footer {
  background: #FBF5EC;
  border-top: 1px solid #E8DFCE;
  padding-top: 96px;
}
.sg-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 80px;
}
@media (max-width: 900px) {
  .sg-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .sg-footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .sg-footer {
    padding-top: 48px;
  }
  .sg-footer__inner {
    grid-template-columns: 1fr;
    padding-bottom: 40px;
  }
  .sg-footer__bottom-inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* Logo */
.sg-footer__logo {
  display: block;
  text-decoration: none;
  margin-bottom: var(--sg-space-4);
}
.sg-footer__logo svg {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: var(--sg-space-4);
}
.sg-footer__logo-text {
  font-family: 'Caprasimo', cursive;
  font-size: 1.6rem;
  color: var(--sg-color-ink);
  display: block;
  text-decoration: none;
}

/* Brand col */
.sg-footer__tagline {
  font-size: 0.9375rem;
  color: var(--sg-color-ink-2, #3B3833);
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 340px;
}
.sg-footer__caveat {
  font-family: 'Caveat', cursive;
  font-size: 1.6rem;
  color: var(--sg-color-rotterdam-primary, #00833D);
  margin: 0 0 20px;
  line-height: 1;
}

/* Newsletter form */
.sg-footer__form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sg-footer__input {
  flex: 1;
  min-width: 160px;
  border: 1.5px solid var(--sg-color-border, #D9CFC4);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 0.9375rem;
  background: transparent;
  color: var(--sg-color-ink);
  outline: none;
  transition: border-color 0.15s;
}
.sg-footer__input::placeholder {
  color: var(--sg-color-ink-2);
  opacity: 0.6;
}
.sg-footer__input:focus {
  border-color: var(--sg-color-rotterdam-primary, #00833D);
}
.sg-footer__btn {
  background: var(--sg-color-rotterdam-primary, #00833D);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.sg-footer__btn:hover {
  background: var(--sg-color-rotterdam-deep, #006B30);
}

/* Nav cols */
.sg-footer__nav-heading {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-color-rotterdam-primary, #00833D);
  margin: 0 0 16px;
}
.sg-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-footer__nav li {
  margin-bottom: 12px;
}
.sg-footer__nav a {
  color: var(--sg-color-ink-2, #3B3833);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.15s;
}
.sg-footer__nav a:hover {
  color: var(--sg-color-ink);
}

/* Bottom bar */
.sg-footer__bottom {
  border-top: 1px solid #E8DFCE;
}
.sg-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.sg-footer__copyright,
.sg-footer__contact {
  font-size: 0.8125rem;
  color: var(--sg-color-ink-2, #3B3833);
}
.sg-footer__contact a {
  color: var(--sg-color-ink-2);
  text-decoration: none;
}
.sg-footer__contact a:hover {
  color: var(--sg-color-ink);
}

/* ── v82-checkout ─────────────────────────────────────────────── */

/* Page wrapper */
.sg-checkout-page {
  padding: 48px 0 96px;
}
.sg-checkout-page__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sg-font-body);
  font-size: 13px;
  color: var(--sg-ink-3, #888);
  margin-bottom: 16px;
}
.sg-checkout-page__breadcrumb-step { color: var(--sg-ink-3, #888); text-decoration: none; }
.sg-checkout-page__breadcrumb-step.is-active { color: var(--sg-ink); font-weight: 700; }
.sg-checkout-page__breadcrumb-sep { color: var(--sg-ink-3, #888); }
.sg-checkout-page__title {
  font-family: var(--sg-font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  color: var(--sg-ink);
  margin: 0 0 40px;
}

/* 2-col grid — form is the grid container */
.sg-checkout-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) {
  .sg-checkout-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Left column */
.sg-checkout-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Section container */
.sg-checkout-section {
  background: var(--sg-paper, #fff);
  border: 1px solid var(--sg-border, #E8DFCE);
  border-radius: 18px;
  overflow: hidden;
}
.sg-checkout-section__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--sg-border, #E8DFCE);
}
.sg-checkout-section__num {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--sg-rotterdam, #00833D);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.sg-checkout-section__title {
  font-family: var(--sg-font-display);
  font-size: 24px;
  color: var(--sg-ink);
  margin: 0;
  line-height: 1.1;
}
.sg-checkout-section__body {
  padding: 24px;
}

/* WooCommerce field overrides inside checkout */
.sg-checkout-section__body .woocommerce-billing-fields,
.sg-checkout-section__body .woocommerce-shipping-fields { margin: 0; }
.sg-checkout-section__body .form-row { margin: 0 0 14px; }
.sg-checkout-section__body .form-row:last-child { margin-bottom: 0; }
.sg-checkout-section__body label { font-family: var(--sg-font-body); font-size: 12px; font-weight: 700; color: var(--sg-ink-2, #3B3833); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 4px; }
.woocommerce-checkout .sg-checkout-section__body input[type="text"],
.woocommerce-checkout .sg-checkout-section__body input[type="email"],
.woocommerce-checkout .sg-checkout-section__body input[type="tel"],
.woocommerce-checkout .sg-checkout-section__body select { width: 100%; border: 1.5px solid var(--sg-border, #D9CFC4) !important; border-radius: 12px !important; padding: 12px 16px !important; font-family: var(--sg-font-body) !important; font-size: 15px !important; color: var(--sg-ink) !important; background: var(--sg-cream, #FBF5EC) !important; outline: none !important; transition: border-color 0.15s; box-sizing: border-box !important; }
.woocommerce-checkout .sg-checkout-section__body input:focus,
.woocommerce-checkout .sg-checkout-section__body select:focus { border-color: var(--sg-rotterdam, #00833D) !important; }
/* Two-col billing grid for name + postcode row */
.sg-checkout-section__body .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sg-checkout-section__body .col2-set .form-row-first,
.sg-checkout-section__body .col2-set .form-row-last { margin: 0 0 14px; }

/* Payment section (inside right panel) */
.sg-checkout-section--payment {
  margin-top: 16px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.sg-checkout-section--payment .sg-checkout-section__head {
  border: none;
  padding: 0 0 16px;
}
.sg-checkout-section--payment .sg-checkout-section__body { padding: 0; }

/* WC payment gateway list */
#payment .payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#payment .payment_methods .wc_payment_method { margin: 0; }
#payment .payment_methods label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--sg-border, #E8DFCE);
  border-radius: 14px;
  cursor: pointer;
  background: var(--sg-paper, #fff);
  font-family: var(--sg-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--sg-ink);
  transition: border-color 0.15s;
}
#payment .payment_methods label.checked { border-color: var(--sg-rotterdam, #00833D); }
#payment .payment_methods input[type="radio"] { width: 18px; height: 18px; accent-color: var(--sg-rotterdam, #00833D); flex-shrink: 0; }
#payment .payment_methods .payment_box { display: none; }
#payment .form-row.place-order { margin-top: 16px; }
#payment #place_order {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  background: var(--sg-rotterdam, #00833D);
  color: #fff !important;
  border: none;
  border-radius: 999px;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.2s;
}
#payment #place_order:hover { background: var(--sg-rotterdam-deep, #006B30); }

/* Right: sticky column wrapper */
.sg-checkout-right {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
@media (max-width: 860px) {
  .sg-checkout-right { position: static; }
}
.sg-checkout-summary {
  width: 100%;
}
.sg-checkout-summary__panel {
  background: var(--sg-paper, #fff);
  border: 1px solid var(--sg-border, #E8DFCE);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-checkout-summary__heading {
  font-family: var(--sg-font-display);
  font-size: 24px;
  margin: 0 0 4px;
  color: var(--sg-ink);
}

/* Cart items in summary */
.sg-checkout-summary__items { display: flex; flex-direction: column; gap: 10px; }
.sg-checkout-summary__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
}
.sg-checkout-summary__thumb-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.sg-checkout-summary__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--sg-cream-soft, #F4EBD9);
  display: block;
}
.sg-checkout-summary__qty-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--sg-ink);
  color: var(--sg-cream, #FBF5EC);
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--sg-paper, #fff);
  box-sizing: border-box;
  font-family: var(--sg-font-body);
}
.sg-checkout-summary__item-name {
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--sg-ink);
}
.sg-checkout-summary__item-price {
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-ink);
  white-space: nowrap;
}

/* Dividers */
.sg-checkout-summary__divider { height: 1px; background: var(--sg-border, #E8DFCE); }
.sg-checkout-summary__divider--dashed { background: none; border-top: 1px dashed var(--sg-border, #E8DFCE); }

/* Coupon */
.sg-checkout-coupon summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: var(--sg-font-body); font-size: 13px; font-weight: 700; color: var(--sg-ink-2, #3B3833); padding: 4px 0; }
.sg-checkout-coupon summary::-webkit-details-marker { display: none; }
.sg-checkout-coupon__icon { color: var(--sg-ink-3, #888); }
.sg-checkout-coupon__body { margin-top: 10px; }
.sg-checkout-coupon__row { display: flex; gap: 6px; }
.sg-checkout-coupon__input { flex: 1; padding: 10px 12px; font-size: 13px; }
.sg-checkout-coupon__error { margin-top: 6px; font-size: 11px; color: var(--sg-error, #c0392b); font-family: var(--sg-font-body); }

/* Totals rows */
.sg-checkout-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sg-font-body);
  font-size: 14px;
  color: var(--sg-ink-2, #3B3833);
}
.sg-checkout-summary__row--total { align-items: flex-start; }
.sg-checkout-summary__row--discount { color: var(--sg-rotterdam, #00833D); }
.sg-checkout-summary__coupon-badge {
  background: var(--sg-rotterdam-soft, #e8f5ee);
  color: var(--sg-rotterdam, #00833D);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-family: var(--sg-font-body);
  margin-right: 6px;
}
.sg-checkout-summary__free { color: var(--sg-rotterdam, #00833D); font-weight: 700; }
.sg-checkout-summary__total-wrap { text-align: right; }
.sg-checkout-summary__total-price { font-family: var(--sg-font-display); font-size: 28px; color: var(--sg-ink); line-height: 1; display: block; }
.sg-checkout-summary__vat { font-family: var(--sg-font-body); font-size: 11px; color: var(--sg-ink-3, #888); }

/* SSL badge */
.sg-checkout-summary__ssl {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--sg-cream-soft, #F4EBD9);
  border-radius: 10px;
  font-family: var(--sg-font-body);
  font-size: 11px;
  color: var(--sg-ink-3, #888);
}

/* Thankyou page */
.sg-thankyou { padding: 80px 0; }
.sg-thankyou__success { text-align: center; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; }
.sg-thankyou__check-circle {
  width: 80px; height: 80px; border-radius: 999px;
  background: var(--sg-rotterdam, #00833D); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.sg-thankyou__script { font-family: var(--sg-font-script, 'Caveat', cursive); font-size: 48px; color: var(--sg-rotterdam, #00833D); margin-bottom: 8px; display: inline-block; transform: rotate(-2deg); line-height: 1; }
.sg-thankyou__title { font-family: var(--sg-font-display); font-size: clamp(32px, 5vw, 44px); color: var(--sg-ink); margin: 0 0 12px; line-height: 1.1; }
.sg-thankyou__lead { color: var(--sg-ink-2, #3B3833); margin: 0 0 32px; }
.sg-thankyou__meta { width: 100%; background: var(--sg-paper, #fff); border: 1px solid var(--sg-border, #E8DFCE); border-radius: 16px; padding: 20px 24px; margin-bottom: 32px; display: flex; flex-direction: column; gap: 12px; }
.sg-thankyou__meta-row { display: flex; justify-content: space-between; font-family: var(--sg-font-body); font-size: 14px; color: var(--sg-ink-2, #3B3833); }
.sg-thankyou__failed { text-align: center; padding: 80px 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.sg-thankyou__failed-msg { font-family: var(--sg-font-body); font-size: 16px; color: var(--sg-ink-2); }

/* Free shipping band on cart page */
.sg-cart-page .sg-cart-shipping-band { margin-bottom: 24px; }

/* ── v83-checkout-4section ─────────────────────────────────────── */

/* Card border moves from .sg-checkout-section wrapper to .sg-checkout-section__body */
.sg-checkout-section { border: none !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; padding: 0 !important; }
.sg-checkout-section__head { border-bottom: none !important; padding: 0 0 14px !important; }
.sg-checkout-section__body { background: var(--sg-paper, #fff) !important; border: 1px solid var(--sg-border, #E8DFCE) !important; border-radius: 18px !important; padding: 24px !important; }

/* Payment section: card on body, no extra margin */
.sg-checkout-section--payment { margin-top: 0 !important; }
.sg-checkout-section--payment .sg-checkout-section__head { border: none !important; padding: 0 0 14px !important; }
.sg-checkout-section--payment .sg-checkout-section__body { background: var(--sg-paper, #fff) !important; border: 1px solid var(--sg-border, #E8DFCE) !important; border-radius: 18px !important; padding: 24px !important; }

/* Address 3-col grid: [First][Last][Postcode] / [Address (2col)][City] */
.sg-checkout-addr-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.sg-checkout-addr-grid .form-row { margin: 0 !important; }
.sg-checkout-addr-grid__col.sg-col--span2 { grid-column: span 2; }

/* Newsletter checkbox */
.sg-checkout-newsletter { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--sg-font-body); font-size: 13px; color: var(--sg-ink-2, #3B3833); cursor: pointer; }
.sg-checkout-newsletter input[type="checkbox"] { accent-color: var(--sg-rotterdam, #00833D); width: 16px; height: 16px; flex-shrink: 0; }

/* Section 3: shipping method radio cards */
.sg-checkout-section__body--shipping { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.sg-checkout-shipping-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--sg-border, #E8DFCE); border-radius: 14px; cursor: pointer; background: var(--sg-paper, #fff); transition: border-color 0.15s; }
.sg-checkout-shipping-option.is-selected { border-color: var(--sg-rotterdam, #00833D); }
.sg-checkout-shipping-option input[type="radio"] { width: 18px; height: 18px; accent-color: var(--sg-rotterdam, #00833D); flex-shrink: 0; }
.sg-checkout-shipping-option__info { flex: 1; }
.sg-checkout-shipping-option__name { font-family: var(--sg-font-body); font-weight: 700; font-size: 14px; color: var(--sg-ink); }
.sg-checkout-shipping-option__price { font-family: var(--sg-font-body); font-weight: 800; font-size: 14px; color: var(--sg-ink); }
.sg-shipping-free { color: var(--sg-rotterdam, #00833D); font-weight: 700; }
.sg-checkout-no-shipping { font-size: 14px; color: var(--sg-ink-2, #3B3833); font-family: var(--sg-font-body); margin: 0; }

/* ── v83b-checkout-polish ─────────────────────────────────────── */

/* Fix 1: Address grid — 3-col with fixed postcode column, float reset */
.sg-checkout-addr-grid { grid-template-columns: 1fr 1fr 140px !important; }
.sg-checkout-addr-grid__col .form-row { float: none !important; width: 100% !important; }
.sg-checkout-addr-grid__col .form-row abbr { display: none; } /* hide required * in grid */

/* Fix 2: Payment method cards — li as card, not label */
/* Reset v82 label-as-card approach */
#payment .payment_methods label {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sg-ink) !important;
  display: inline !important;
  gap: 0 !important;
  cursor: pointer;
}
/* li is the card */
#payment ul.wc_payment_methods li.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  padding: 14px 16px !important;
  border: 1.5px solid var(--sg-border, #E8DFCE) !important;
  border-radius: 14px !important;
  background: var(--sg-paper, #fff) !important;
  transition: border-color 0.15s;
  margin: 0;
}
#payment ul.wc_payment_methods li.wc_payment_method.is-selected {
  border-color: var(--sg-rotterdam, #00833D) !important;
}
#payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  accent-color: var(--sg-rotterdam, #00833D);
  margin: 0;
}
#payment div.payment_box,
#payment div.payment_box::before,
#payment div.payment_box::after { display: none !important; }
/* Section body label override — exclude payment labels from uppercase */
.sg-checkout-section__body .wc_payment_methods label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--sg-ink) !important;
  display: inline !important;
}

/* Fix 4: Checkout summary total — match cart page (32px Caprasimo) */
.sg-checkout-summary__total-price { font-size: 32px !important; }
.sg-checkout-summary__total-price strong,
.sg-checkout-summary__total-price b { font-weight: normal; }

/* ── v83c-checkout-label-restore ──────────────────────────────── */

/*
 * Root fix: .sg-checkout-section__body label (v82 line 9033) sets
 * display:block + text-transform:uppercase for form field labels.
 * That rule bleeds onto interactive labels (shipping option, newsletter)
 * since they are also <label> elements inside .sg-checkout-section__body.
 * Override with class-level specificity.
 */

/* Shipping option card is a <label>; restore its flex layout */
.sg-checkout-section__body label.sg-checkout-shipping-option {
  display: flex !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: inherit !important;
  font-weight: normal !important;
  color: var(--sg-ink) !important;
  margin-bottom: 0 !important;
}
/* Price pushed to far right via margin-left: auto */
.sg-checkout-shipping-option__price { margin-left: auto; }

/* Newsletter checkbox label */
.sg-checkout-section__body label.sg-checkout-newsletter {
  display: flex !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--sg-ink-2, #3B3833) !important;
  margin-bottom: 0 !important;
}

/* Input border-radius guard — prevent theme/WC resets */
.woocommerce-checkout .sg-checkout-section__body input[type="text"],
.woocommerce-checkout .sg-checkout-section__body input[type="email"],
.woocommerce-checkout .sg-checkout-section__body input[type="tel"],
.woocommerce-checkout .sg-checkout-section__body select {
  border-radius: 12px !important;
  border: 1.5px solid var(--sg-border, #D9CFC4) !important;
  background: var(--sg-cream, #FBF5EC) !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── v83d-checkout-layout ─────────────────────────────────────── */

/* White inputs (design-ref uses --sg-paper, not cream) */
.woocommerce-checkout .sg-checkout-section__body input[type="text"],
.woocommerce-checkout .sg-checkout-section__body input[type="email"],
.woocommerce-checkout .sg-checkout-section__body input[type="tel"],
.woocommerce-checkout .sg-checkout-section__body select { background: var(--sg-paper, #fff) !important; }

/* Container: match cart page (1200px / 32px sides) */
.sg-checkout-page .sg-container { max-width: 1200px !important; padding-left: 32px !important; padding-right: 32px !important; }
@media (max-width: 720px) { .sg-checkout-page .sg-container { padding-left: 16px !important; padding-right: 16px !important; } }

/* Breadcrumb: weight + color match cart page, no underline */
.sg-checkout-page__breadcrumb-step { font-weight: 600 !important; text-decoration: none !important; }
.sg-checkout-page__breadcrumb-sep { color: var(--sg-ink-4, #C9BFB1) !important; }

/* Address sub-rows */
.sg-addr-row { margin-bottom: 14px; }
.sg-addr-row:last-of-type { margin-bottom: 0; }
.sg-addr-row .form-row { margin: 0 !important; float: none !important; width: 100% !important; }

/* Row 1: Voornaam + Achternaam */
.sg-addr-row--names { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Row 2: Straatnaam (flex) + Huisnummer (100px) + Postcode (140px) */
.sg-addr-row--street { display: grid; grid-template-columns: 1fr 100px 140px; gap: 14px; }
@media (max-width: 500px) {
  .sg-addr-row--names { grid-template-columns: 1fr; }
  .sg-addr-row--street { grid-template-columns: 1fr 1fr; }
  .sg-addr-row--street > div:first-child { grid-column: 1 / -1; }
}

/* Row 3: Stad — full width, primary-color label as accent */
.sg-addr-row--city label { color: var(--sg-color-primary, var(--sg-rotterdam, #00833D)) !important; }
.sg-addr-row--city input[type="text"] { font-size: 16px !important; padding: 14px 16px !important; letter-spacing: 0.01em; }

.sg-css-version::before { content: "v83d-checkout-layout" !important; display: none !important; }

/* ── v84: My Account ────────────────────────────────────────────────────── */

/* Page wrapper */
.sg-myaccount-page { padding: 48px 0 96px; background: var(--sg-color-cream, #FBF5EC); min-height: 60vh; }
.sg-myaccount-page .sg-container { max-width: 1200px; padding: 0 32px; }
@media (max-width: 720px) { .sg-myaccount-page .sg-container { padding: 0 16px; } }

/* ── Stats bar ─────────────────────────────────────────────────── */
.sg-myaccount-stats {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 36px;
  align-items: stretch;
}
@media (max-width: 900px) { .sg-myaccount-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sg-myaccount-stats { grid-template-columns: 1fr; } }

.sg-myaccount-stats__hero {
  background: var(--sg-rotterdam-soft, #D9F0E2);
  border-radius: 24px;
  padding: 28px;
}
.sg-myaccount-stats__eyebrow { color: var(--sg-rotterdam-deep, #006B30) !important; margin-bottom: 8px; }
.sg-myaccount-stats__name {
  font-family: var(--sg-font-display);
  font-size: clamp(20px, 4vw, 44px);
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--sg-color-ink, #1B1A17);
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.sg-myaccount-stats__meta { font-size: 14px; color: var(--sg-ink-2, #3B3833); margin: 0; }

.sg-myaccount-stats__card {
  background: var(--sg-paper, #fff);
  border: 1px solid var(--sg-border, #E8DFCE);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sg-myaccount-stats__num {
  font-family: var(--sg-font-display);
  font-size: 40px;
  color: var(--sg-color-ink, #1B1A17);
  line-height: 1;
  margin: 4px 0;
}
.sg-myaccount-stats__num--accent { color: var(--sg-rotterdam-deep, #006B30); font-size: 32px; }

/* ── Body (sidebar + content) ──────────────────────────────────── */
.sg-myaccount-body { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
@media (max-width: 800px) { .sg-myaccount-body { grid-template-columns: 1fr; gap: 24px; } }

/* ── Sidebar nav ───────────────────────────────────────────────── */
.sg-myaccount-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 800px) { .sg-myaccount-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; } }

.sg-myaccount-nav__item {
  display: block;
  padding: 11px 16px;
  border-radius: 12px;
  border-left: 2px solid transparent;
  font-family: var(--sg-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--sg-ink-3, #6B6660);
  text-decoration: none;
  transition: background 140ms, color 140ms;
}
.sg-myaccount-nav__item:hover { background: var(--sg-color-cream-soft, #F4EBD9); color: var(--sg-color-ink, #1B1A17); }
.sg-myaccount-nav__item.is-active {
  background: var(--sg-color-cream-soft, #F4EBD9);
  color: var(--sg-color-ink, #1B1A17);
  border-left-color: var(--sg-rotterdam, #00833D);
}
.sg-myaccount-nav__item--logout { color: var(--sg-ink-3, #6B6660); margin-top: 8px; border-top: 1px solid var(--sg-border, #E8DFCE); padding-top: 14px; }
@media (max-width: 800px) { .sg-myaccount-nav__item--logout { margin-top: 0; border-top: none; padding-top: 11px; } }

/* ── Content area ──────────────────────────────────────────────── */
.sg-myaccount-content { min-width: 0; }
.sg-myaccount-section-title { font-family: var(--sg-font-display); font-size: clamp(24px, 3vw, 32px); margin: 0 0 18px; color: var(--sg-color-ink, #1B1A17); }
.woocommerce-notices-wrapper { margin-bottom: 16px; }

/* ── Guest (login/register) wrapper ───────────────────────────── */
.sg-myaccount-guest { padding: 0; }
.sg-login-wrap { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; padding: 24px 0; }
.sg-login-wrap--split .sg-login-card { flex: 1; min-width: 320px; max-width: 480px; }
.sg-login-wrap:not(.sg-login-wrap--split) .sg-login-card { max-width: 440px; width: 100%; }

.sg-login-card {
  background: var(--sg-paper, #fff);
  border: 1px solid var(--sg-border, #E8DFCE);
  border-radius: 24px;
  padding: 36px;
}
.sg-login-card__script {
  display: inline-block;
  color: var(--sg-rotterdam, #00833D);
  font-size: 34px;
  margin-bottom: 6px;
  transform: rotate(-2deg);
}
.sg-login-card__title { font-family: var(--sg-font-display); font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; line-height: 1; }
.sg-login-card__intro { color: var(--sg-ink-2, #3B3833); margin-bottom: 22px !important; }

.sg-login-form { display: flex; flex-direction: column; gap: 14px; }
.sg-login-form__actions { margin-top: 4px; }
.sg-login-form__submit { width: 100%; justify-content: center; }
.sg-login-form__lost { text-align: center; font-size: 13px; }
.sg-register-card__auto-pw { color: var(--sg-ink-3); font-size: 13px; }

/* ── Shared form rows ──────────────────────────────────────────── */
.sg-form-row { display: flex; flex-direction: column; gap: 6px; }
.sg-form-row .sg-input, .sg-form-row input[type="text"], .sg-form-row input[type="email"],
.sg-form-row input[type="tel"], .sg-form-row input[type="password"], .sg-form-row select {
  border-radius: 12px !important; border: 1.5px solid var(--sg-border, #D9CFC4) !important;
  background: var(--sg-paper, #fff) !important; padding: 12px 14px !important; width: 100%;
}

/* ── Orders list ───────────────────────────────────────────────── */
.sg-orders-list { display: flex; flex-direction: column; gap: 10px; }

.sg-orders-list__row {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--sg-paper, #fff);
  border: 1px solid var(--sg-border, #E8DFCE);
  border-radius: 16px;
  text-decoration: none;
  color: var(--sg-color-ink, #1B1A17);
  transition: transform 140ms, box-shadow 140ms;
}
.sg-orders-list__row:hover { transform: translateY(-1px); box-shadow: var(--sg-shadow-sm); }
@media (max-width: 600px) { .sg-orders-list__row { grid-template-columns: 56px 1fr auto; } }

.sg-orders-list__thumb { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--sg-color-cream-soft, #F4EBD9); flex-shrink: 0; }
.sg-orders-list__thumb-img, .sg-orders-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-orders-list__thumb-placeholder { width: 100%; height: 100%; background: var(--sg-color-cream-soft); }

.sg-orders-list__meta { font-family: ui-monospace, monospace; font-size: 12px; color: var(--sg-ink-3, #6B6660); font-weight: 600; margin-bottom: 2px; }
.sg-orders-list__products { font-family: var(--sg-font-body); font-weight: 800; font-size: 15px; color: var(--sg-color-ink); margin-bottom: 6px; }
.sg-orders-list__total { font-family: var(--sg-font-display); font-size: 22px; color: var(--sg-color-ink); white-space: nowrap; }
.sg-orders-list__cta { font-size: 13px; font-weight: 700; color: var(--sg-rotterdam, #00833D); white-space: nowrap; }
@media (max-width: 600px) { .sg-orders-list__cta { display: none; } }

/* ── Status pill ───────────────────────────────────────────────── */
.sg-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--sg-font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sg-status-pill--lg { padding: 6px 14px; font-size: 12px; }

/* ── Empty orders state ────────────────────────────────────────── */
.sg-orders-empty { text-align: center; padding: 48px 32px; background: var(--sg-paper); border: 1.5px dashed var(--sg-border); border-radius: 18px; }
.sg-orders-empty__script { display: block; font-size: 32px; color: var(--sg-rotterdam); margin-bottom: 8px; }
.sg-orders-list__pagination { display: flex; gap: 12px; margin-top: 16px; justify-content: center; }

/* ── View order ────────────────────────────────────────────────── */
.sg-vieworder { display: flex; flex-direction: column; gap: 20px; }
.sg-vieworder__back { margin-bottom: 4px; align-self: flex-start; }
.sg-vieworder__header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.sg-vieworder__ordernum { font-family: ui-monospace, monospace; font-size: 13px; color: var(--sg-ink-3); font-weight: 600; margin-bottom: 4px; }
.sg-vieworder__title { font-family: var(--sg-font-display); font-size: clamp(22px, 3vw, 34px); margin: 0; line-height: 1.1; }

/* Timeline */
.sg-vieworder-timeline { background: var(--sg-paper, #fff); border: 1px solid var(--sg-border); border-radius: 18px; padding: 22px 24px; }
.sg-vieworder-timeline__eyebrow { margin-bottom: 14px; }
.sg-vieworder-timeline__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 600px) { .sg-vieworder-timeline__steps { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.sg-vieworder-timeline__step { display: flex; flex-direction: column; }
.sg-vieworder-timeline__step-row { display: flex; align-items: center; width: 100%; margin-bottom: 8px; }
.sg-vieworder-timeline__dot {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--sg-cream-soft, #F4EBD9); color: var(--sg-ink-3);
  border: 1.5px solid var(--sg-border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.sg-vieworder-timeline__step.is-done .sg-vieworder-timeline__dot {
  background: var(--sg-rotterdam, #00833D); color: #fff; border-color: var(--sg-rotterdam); font-size: 12px;
}
.sg-vieworder-timeline__line { flex: 1; height: 2px; background: var(--sg-border); }
.sg-vieworder-timeline__line.is-done { background: var(--sg-rotterdam, #00833D); }
.sg-vieworder-timeline__label { font-family: var(--sg-font-body); font-size: 13px; font-weight: 600; color: var(--sg-ink-3); }
.sg-vieworder-timeline__step.is-done .sg-vieworder-timeline__label { font-weight: 800; color: var(--sg-color-ink); }

/* Order body grid */
.sg-vieworder-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .sg-vieworder-body { grid-template-columns: 1fr; } }

.sg-vieworder-products { background: var(--sg-paper); border: 1px solid var(--sg-border); border-radius: 18px; padding: 22px 24px; }
.sg-vieworder-products__title { font-family: var(--sg-font-display); font-size: 20px; margin: 0 0 16px; }
.sg-vieworder-products__row { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--sg-border); margin-bottom: 12px; }
.sg-vieworder-products__row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sg-vieworder-products__thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--sg-color-cream-soft); }
.sg-vieworder-products__img, .sg-vieworder-products__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-vieworder-products__name { font-weight: 700; font-size: 14px; color: var(--sg-color-ink); }
.sg-vieworder-products__qty { font-weight: 400; color: var(--sg-ink-3); margin-left: 4px; }
.sg-vieworder-products__price { font-family: var(--sg-font-body); font-weight: 700; white-space: nowrap; }

.sg-vieworder-aside { display: flex; flex-direction: column; gap: 14px; }
.sg-vieworder-totals { background: var(--sg-paper); border: 1px solid var(--sg-border); border-radius: 18px; padding: 20px 22px; }
.sg-vieworder-totals__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sg-border); font-size: 14px; }
.sg-vieworder-totals__row:last-child { border-bottom: none; }
.sg-vieworder-totals__row--total { font-weight: 800; font-size: 16px; }
.sg-vieworder-totals__row--discount { color: var(--sg-rotterdam-deep); }
.sg-vieworder-address { background: var(--sg-paper); border: 1px solid var(--sg-border); border-radius: 18px; padding: 20px 22px; font-size: 14px; line-height: 1.6; }
.sg-vieworder-address__body { font-style: normal; color: var(--sg-ink-2); }
.sg-vieworder-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-vieworder-notes { background: var(--sg-paper); border: 1px solid var(--sg-border); border-radius: 18px; padding: 20px 24px; }

/* ── Addresses ─────────────────────────────────────────────────── */
.sg-address-intro { margin-bottom: 20px !important; }
.sg-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .sg-address-grid { grid-template-columns: 1fr; } }

.sg-address-card {
  background: var(--sg-paper, #fff);
  border: 1px solid var(--sg-border, #E8DFCE);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sg-address-card--default { border: 1.5px solid var(--sg-rotterdam, #00833D); }
.sg-address-card__header { display: flex; justify-content: space-between; align-items: center; }
.sg-address-card__eyebrow { color: var(--sg-rotterdam-deep, #006B30); }
.sg-address-card__badge { font-size: 11px; font-weight: 700; color: var(--sg-rotterdam-deep); }
.sg-address-card__body { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--sg-ink-2); flex: 1; }
.sg-address-card__actions { margin-top: 4px; }

/* ── Edit address form ─────────────────────────────────────────── */
.sg-edit-address__back { margin-bottom: 12px; display: inline-flex; }
.sg-edit-address__form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.sg-edit-address__fields { display: flex; flex-direction: column; gap: 14px; }
.sg-edit-address__fields .form-row { margin: 0 !important; float: none !important; width: 100% !important; }
.sg-edit-address__fields input[type="text"], .sg-edit-address__fields input[type="email"],
.sg-edit-address__fields input[type="tel"], .sg-edit-address__fields select {
  border-radius: 12px !important; border: 1.5px solid var(--sg-border, #D9CFC4) !important;
  background: var(--sg-paper, #fff) !important; width: 100%;
}
.sg-edit-address__footer { display: flex; gap: 12px; align-items: center; margin-top: 4px; }

/* ── Edit account form ─────────────────────────────────────────── */
.sg-account-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.sg-account-form__names { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .sg-account-form__names { grid-template-columns: 1fr; } }
.sg-account-form__password { border: 1px solid var(--sg-border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sg-account-form__password-legend { font-family: var(--sg-font-display); font-size: 16px; font-weight: 700; padding: 0; color: var(--sg-color-ink); }
.sg-account-form__password-hint { color: var(--sg-ink-3); font-size: 13px; margin: 0 !important; }
.sg-account-form__footer { display: flex; gap: 12px; align-items: center; }

/* WC notices inside my account */
.sg-myaccount-content .woocommerce-message,
.sg-myaccount-content .woocommerce-error,
.sg-myaccount-content .woocommerce-info { border-radius: 12px; margin-bottom: 16px; }

/* ── v85-cart-shipping-bar ───────────────────────────────────────────────── */

.sg-cart-shipping-bar {
  background: var(--sg-cream-soft, #F4EBD9);
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 24px;
}
.sg-cart-shipping-bar__text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sg-ink-2, #3B3833);
  margin: 0 0 10px;
  line-height: 1.4;
}
.sg-cart-shipping-bar__text strong { color: var(--sg-ink, #1B1A17); font-weight: 800; }
.sg-cart-shipping-bar__text--free {
  color: var(--sg-accent, #009A47);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.sg-cart-shipping-bar__track {
  height: 6px;
  background: #E8DFCE;
  border-radius: 999px;
  overflow: hidden;
}
.sg-cart-shipping-bar__fill {
  height: 100%;
  background: var(--sg-accent, #009A47);
  border-radius: 999px;
  transition: width 0.4s ease;
  min-width: 4px;
}

/* ── v86-account ─────────────────────────────────────────────────────────── */

/* WC form-row inputs — high-specificity to beat .woocommerce form .form-row input.input-text */
.woocommerce-account .woocommerce .form-row input.input-text,
.woocommerce-account .woocommerce .form-row input[type="text"],
.woocommerce-account .woocommerce .form-row input[type="email"],
.woocommerce-account .woocommerce .form-row input[type="password"],
.woocommerce-account .woocommerce .form-row input[type="tel"],
.woocommerce-account .woocommerce .form-row select,
.woocommerce-account .woocommerce .form-row textarea {
  font-family: var(--sg-font-body, 'Nunito', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--sg-ink, #1B1A17) !important;
  background: #fff !important;
  border: 1.5px solid var(--sg-border, #E8DFCE) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.14s, box-shadow 0.14s !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.woocommerce-account .woocommerce .form-row input:focus {
  border-color: var(--sg-accent, #009A47) !important;
  box-shadow: 0 0 0 4px rgba(0, 154, 71, 0.12) !important;
}
.woocommerce-account .woocommerce .form-row input::placeholder { color: #B7B0A6; }

/* Labels */
.woocommerce-MyAccount-content .form-row label,
.woocommerce-MyAccount-content label {
  display: block;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--sg-ink-2, #3B3833);
  margin-bottom: 6px;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.woocommerce-MyAccount-content label abbr { color: #C0291F; text-decoration: none; }

/* Form rows: reset WC floats */
.woocommerce-MyAccount-content .form-row {
  margin-bottom: 16px;
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}
.woocommerce-MyAccount-content .form-row::after { display: none !important; }

/* 2-col: Voornaam + Achternaam side-by-side */
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last {
  display: inline-block;
  width: calc(50% - 6px) !important;
  float: none !important;
}
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first { margin-right: 12px; }

/* Password fieldset */
.woocommerce-MyAccount-content fieldset legend,
.woocommerce-MyAccount-content .woocommerce-MyAccount-content h3 {
  font-family: var(--sg-font-display, 'Caprasimo', cursive) !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  color: var(--sg-ink, #1B1A17) !important;
  margin: 24px 0 16px !important;
}

/* Submit buttons inside content — fallback for any WC-rendered buttons */
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"]:not(.sg-btn),
.woocommerce-MyAccount-content input[type="submit"] {
  background: var(--sg-accent, #009A47) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-family: var(--sg-font-body) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  display: inline-block !important;
  text-decoration: none !important;
}
.woocommerce-MyAccount-content button[type="submit"]:not(.sg-btn):hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
  background: var(--sg-rotterdam-deep, #006B30) !important;
}

/* Links inside My Account */
.woocommerce-MyAccount-content .woocommerce-Address-title a { color: var(--sg-accent, #009A47); }

/* ── v87-shipping-bar ──────────────────────────────────────────────────────── */

/* On the cart page the band renders inline — style as a card */
.sg-cart-page .sg-cart-shipping-band {
  background: var(--sg-cream-soft, #F4EBD9) !important;
  border-radius: 14px !important;
  border-bottom: none !important;
  padding: 14px 20px !important;
  margin-bottom: 24px;
}
.sg-cart-page .sg-cart-shipping-band__text { font-weight: 600; margin-bottom: 10px; }
.sg-cart-page .sg-cart-shipping-band__text strong { font-weight: 800; }
.sg-cart-page .sg-cart-shipping-band__text--done { margin-bottom: 10px; }
.sg-cart-page .sg-cart-shipping-band__fill { transition: width 0.4s ease; min-width: 4px; }

/* ── v88-address-form-grid ───────────────────────────────────────────────── */

.sg-address-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 0;
}
.sg-address-grid--2col   { grid-template-columns: 1fr 1fr; }
.sg-address-grid--street { grid-template-columns: 1fr 120px; }
.sg-address-grid--postal { grid-template-columns: 140px 1fr; }

/* remove WC margin from form-rows inside grids */
.sg-address-grid > .form-row { margin: 0 !important; float: none !important; width: 100% !important; }

/* prevent grid blowout */
.sg-address-grid--2col,
.sg-address-grid--street,
.sg-address-grid--postal { min-width: 0; }

.sg-address-grid--2col .form-row,
.sg-address-grid--street .form-row,
.sg-address-grid--postal .form-row { width: 100% !important; float: none !important; padding: 0 !important; margin-bottom: 0 !important; }

.sg-address-grid--2col .form-row input.input-text,
.sg-address-grid--street .form-row input.input-text,
.sg-address-grid--postal .form-row input.input-text { width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; }

@media (max-width: 600px) {
    .sg-address-grid--2col,
    .sg-address-grid--street,
    .sg-address-grid--postal { grid-template-columns: 1fr !important; }
}

/* ── v89-site-main-wc ────────────────────────────────────────────────────── */

/* Hello Elementor sets .site-main max-width: 800px; override on WC pages */
body.woocommerce-account .site-main,
body.woocommerce-page .site-main {
    max-width: 100% !important;
    width: 100% !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

/* ── v90-shipping-tbd ────────────────────────────────────────────────────── */
.sg-cart-summary__shipping-tbd { color: var(--sg-ink-3, #6B6560); font-size: 13px; }

/* ── v91-thankyou ────────────────────────────────────────────────────────── */

.sg-thankyou { padding: 0 0 80px; }

.sg-thankyou__hero {
    text-align: center;
    padding: 64px 40px 48px;
    max-width: 600px;
    margin: 0 auto;
}
.sg-thankyou__caveat {
    font-family: var(--sg-font-script);
    font-size: 2.2rem;
    color: var(--sg-color-primary, #009A47);
    margin: 0 0 8px;
    line-height: 1;
}
.sg-thankyou__title {
    font-family: var(--sg-font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--sg-color-ink, #1B1A17);
    margin: 0 0 16px;
    line-height: 1.1;
}
.sg-thankyou__sub {
    font-family: var(--sg-font-body);
    font-size: 1rem;
    color: var(--sg-ink-2, #3B3833);
    line-height: 1.6;
    margin: 0;
}
.sg-thankyou__sub strong { color: var(--sg-color-ink); font-weight: 700; }

/* 2-col grid */
.sg-order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
@media (max-width: 900px) {
    .sg-order-detail-grid { grid-template-columns: 1fr; padding: 0 20px; }
    /* Override tablet 3-col aside: stack cards vertically on mobile */
    .sg-order-detail-grid > aside { display: flex !important; flex-direction: column !important; gap: 16px !important; }
    .sg-thankyou__bacs { padding: 0 20px; }
    .sg-thankyou__cta { width: 100%; box-sizing: border-box; }
}

.sg-thankyou__section-title {
    font-family: var(--sg-font-display);
    font-size: 1.3rem;
    margin: 0 0 20px;
    color: var(--sg-color-ink);
}

/* Items */
.sg-thankyou__items { display: flex; flex-direction: column; gap: 0; }
.sg-thankyou__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--sg-border, #E8DFCE);
    border-radius: 16px;
    margin-bottom: 8px;
}
.sg-thankyou__item-img {
    width: 72px; height: 72px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.sg-thankyou__item-img img { width: 100%; height: 100%; object-fit: cover; }
.sg-thankyou__item-qty {
    position: absolute; top: -6px; right: -6px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--sg-color-ink, #1B1A17);
    color: #fff;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.sg-thankyou__item-info { flex: 1; min-width: 0; }
.sg-thankyou__item-city {
    font-family: var(--sg-font-body);
    font-size: 11px; font-weight: 700;
    color: var(--sg-ink-3, #6B6660);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 0 0 2px;
}
.sg-thankyou__item-name {
    font-family: var(--sg-font-body);
    font-size: 0.9375rem; font-weight: 700;
    color: var(--sg-color-ink); margin: 0 0 2px;
}
.sg-thankyou__item-meta {
    font-family: var(--sg-font-body);
    font-size: 0.8125rem; color: var(--sg-ink-3); margin: 0;
}
.sg-thankyou__item-price {
    font-family: var(--sg-font-body);
    font-size: 0.9375rem; font-weight: 700;
    color: var(--sg-color-ink); white-space: nowrap; margin: 0;
}

/* Extras */
.sg-thankyou__extras {
    background: var(--sg-cream-soft, #F4EBD9);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
}
.sg-thankyou__extras-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--sg-ink-2); margin: 0 0 8px;
}
.sg-thankyou__extra-item {
    display: flex; justify-content: space-between;
    font-size: 0.875rem; font-weight: 600;
    color: var(--sg-color-ink); margin-bottom: 4px;
}
.sg-thankyou__extra-message {
    font-size: 0.8125rem; color: var(--sg-ink-3);
    font-style: italic; margin: 4px 0 0;
}

/* Sidebar */
.sg-thankyou__sidebar {
    display: flex; flex-direction: column; gap: 12px;
    position: sticky; top: 100px;
}
.sg-thankyou__card {
    background: #fff;
    border: 1px solid var(--sg-border, #E8DFCE);
    border-radius: 16px;
    padding: 20px;
}
.sg-thankyou__card-label {
    font-family: var(--sg-font-body);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--sg-ink-3); margin: 0 0 4px;
}
.sg-thankyou__card-value {
    font-family: var(--sg-font-body);
    font-size: 0.9375rem; font-weight: 600;
    color: var(--sg-color-ink); margin: 0; line-height: 1.5;
}

/* Totaal card */
.sg-thankyou__totals {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 16px; padding-bottom: 16px;
    border-bottom: 1px solid var(--sg-border, #E8DFCE);
}
.sg-thankyou__total-row {
    display: flex; justify-content: space-between;
    font-family: var(--sg-font-body);
    font-size: 0.9375rem; color: var(--sg-ink-2);
}
.sg-thankyou__free { color: var(--sg-color-primary, #009A47); font-weight: 700; }
.sg-thankyou__total-row--total {
    padding-top: 10px;
    border-top: 1px solid var(--sg-border, #E8DFCE);
    font-weight: 700; color: var(--sg-color-ink);
    align-items: flex-end;
}
.sg-thankyou__total-right { text-align: right; }
.sg-thankyou__total-amount {
    font-family: var(--sg-font-display);
    font-size: 1.8rem; line-height: 1;
    font-weight: 400;
    color: var(--sg-color-ink); margin: 0;
}
.sg-thankyou__total-sub { font-size: 11px; color: var(--sg-ink-3); margin: 2px 0 0; }
.sg-thankyou__payment-method { font-size: 0.8125rem; color: var(--sg-ink-3); margin: 0; }

/* CTA */
.sg-thankyou__cta {
    display: block; text-align: center;
    background: var(--sg-color-primary, #009A47);
    color: #fff !important;
    border-radius: 999px;
    padding: 14px 28px;
    font-family: var(--sg-font-body);
    font-weight: 800; font-size: 1rem;
    text-decoration: none !important;
    transition: background 0.2s;
}
.sg-thankyou__cta:hover { background: var(--sg-color-primary-dark, #006B30); }

/* v92-bacs-block ----------------------------------------- */
.sg-thankyou__bacs {
    max-width: 1200px;
    margin: 0 auto 24px;
    padding: 0 40px;
}
.sg-thankyou__bacs-inner {
    background: var(--sg-color-cream-soft, #F4EBD9);
    border-radius: 16px;
    padding: 24px 28px;
    border-left: 4px solid var(--sg-color-primary, #009A47);
}
.sg-thankyou__bacs-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--sg-color-ink-2, #3B3833);
    margin: 0 0 8px;
}
.sg-thankyou__bacs-text {
    font-size: 1rem;
    color: var(--sg-color-ink, #1B1A17);
    margin: 0 0 16px;
}
.sg-thankyou__bacs-text strong { font-weight: 800; }
.sg-thankyou__bacs-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.sg-thankyou__bacs-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
}
.sg-thankyou__bacs-row span:first-child {
    color: var(--sg-color-ink-2, #3B3833);
    font-weight: 600;
}
.sg-thankyou__bacs-row span:last-child {
    color: var(--sg-color-ink, #1B1A17);
    font-weight: 700;
}
.sg-thankyou__bacs-iban {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}
.sg-thankyou__bacs-ref {
    font-size: 0.875rem;
    color: var(--sg-color-ink-2, #3B3833);
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #E8DFCE;
}
.sg-thankyou__bacs-ref strong { color: var(--sg-color-ink); }

/* v93-payment-methods ---------------------------------------- */
.sg-checkout #payment ul.payment_methods li img { height: 24px; width: auto; margin-right: 10px; vertical-align: middle; }
.sg-checkout #payment ul.payment_methods label { display: flex !important; align-items: center; }
.sg-checkout__payment-icons { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.sg-checkout__payment-icons span { font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--sg-color-ink-2, #6B6660); }
.sg-checkout__payment-icons span::after { content: ' ·'; }
.sg-checkout__payment-icons span:last-child::after { content: ''; }

.sg-css-version::before { content: "v93-payment-methods" !important; display: none !important; }