/* =========================================
       1. DESIGN TOKENS
       ========================================= */
    :root {
      --font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

      --color-bg-page: #ffffff;
      --color-bg-soft: #f5f7fa;
      --color-bg-softer: #f9fafb;

      --color-text-main: #111827;
      --color-text-muted: #4b5563;
      --color-text-soft: #4b5563;
      --color-text-subtle: #9ca3af;
      --color-text-invert: #ffffff;

      --color-border-subtle: #e5e7eb;
      --color-border-soft: #d1d5db;

      --color-primary: #22c55e;
      --color-primary-dark: #16a34a;
      --color-neutral-strong: #111827;
      --color-accent: #2563eb;
      --color-danger: #ef4444;
      --color-warning: #f59e0b;

      --color-header-dark: #374151;
      --color-surface: #ffffff;
      --color-surface-muted: #e5e7eb;

      --color-nav-link: #374151;

      --radius-xs: 4px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-pill: 999px;

      --space-1: 4px;
      --space-1_5: 6px;
      --space-2: 8px;
      --space-2_5: 10px;
      --space-3: 12px;
      --space-3_5: 14px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-7: 32px;
      --space-8: 40px;

      --space-section: 56px; /* desktop */
      --space-section-sm: 36px; /* mobiel */

      --font-size-xs: 12px;
      --font-size-sm: 13px;
      --font-size-base: 15px;
      --font-size-md: 16px;
      --font-size-lg: 18px;
      --font-size-footer: 14px;

      --font-weight-regular: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;

      --max-width-page: 1320px;
    }

    /* =========================================
       2. GLOBAL BASIS
       ========================================= */
    * { box-sizing: border-box; }

    html, body { height: 100%; overflow-x: clip;}

    body {
      margin: 0;
      font-family: var(--font-sans);
      font-size: var(--font-size-base);
      color: var(--color-text-main);
      background: var(--color-bg-page);
      display: flex;
      flex-direction: column;
    }

    main { flex: 1 0 auto; }

    footer { flex-shrink: 0; }

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

    a, button, [role="button"] { touch-action: manipulation; }

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

    input,
    button,
    select,
    textarea {
      font-family: var(--font-sans);
      font-size: inherit;
    }

    /* =========================================
       3. UTILITIES
       ========================================= */

    .u-container {
      width: 100%;
      max-width: var(--max-width-page);
      margin-inline: auto;
      padding-inline: var(--space-4);
    }

    .u-container--flush {
      padding-inline: 0;
    }

    /* Layout */
    .u-flex { display: flex; }
    .u-flex-col { flex-direction: column; }
    .u-flex-1 { flex: 1 1 auto; }
    .u-wrap { flex-wrap: wrap; }

    .u-items-center { align-items: center; }
    .u-items-start { align-items: flex-start; }
    .u-items-end { align-items: flex-end; }

    .u-justify-start { justify-content: flex-start; }
    .u-justify-center { justify-content: center; }
    .u-justify-end { justify-content: flex-end; }
    .u-justify-between { justify-content: space-between; }

    .u-gap-1 { gap: var(--space-1); }
    .u-gap-1_5 { gap: var(--space-1_5); }
    .u-gap-2 { gap: var(--space-2); }
    .u-gap-2_5 { gap: var(--space-2_5); }
    .u-gap-3 { gap: var(--space-3); }
    .u-gap-4 { gap: var(--space-4); }
    .u-gap-5 { gap: var(--space-5); }
    .u-gap-6 { gap: var(--space-6); }
    .u-gap-7 { gap: var(--space-7); }
    .u-gap-8 { gap: var(--space-8); }

    .u-grid { display: grid; }

    /* Text & kleur */
    .u-text-xs { font-size: var(--font-size-xs); }
    .u-text-sm { font-size: var(--font-size-sm); }
    .u-text-soft { color: var(--color-text-soft); }
    .u-text-center { text-align: center; }

    .u-fw-medium { font-weight: var(--font-weight-medium); }
    .u-fw-semibold { font-weight: var(--font-weight-semibold); }

    /* Margins */
    .u-mt-1 { margin-top: var(--space-1); }
    .u-mt-1_5 { margin-top: var(--space-1_5); }
    .u-mt-2 { margin-top: var(--space-2); }
    .u-mt-3 { margin-top: var(--space-3); }
    .u-mt-4 { margin-top: var(--space-4); }
    .u-mt-7 { margin-top: var(--space-7); }

    /* Paddings */
    .u-pt-1 { padding-top: var(--space-1); }
    .u-pt-1_5 { padding-top: var(--space-1_5); }
    .u-pt-2 { padding-top: var(--space-2); }
    .u-pt-3 { padding-top: var(--space-3); }
    .u-pt-4 { padding-top: var(--space-4); }
    .u-pt-7 { padding-top: var(--space-7); }

    .u-pb-1 { padding-bottom: var(--space-1); }
    .u-pb-1_5 { padding-bottom: var(--space-1_5); }
    .u-pb-2 { padding-bottom: var(--space-2); }
    .u-pb-3 { padding-bottom: var(--space-3); }
    .u-pb-4 { padding-bottom: var(--space-4); }
    .u-pb-5 { padding-bottom: var(--space-5); }
    .u-pb-7 { padding-bottom: var(--space-7); }

    .u-bg-soft { background: var(--color-bg-soft); }

    /* Section spacing – verticale rust */
    .product-section {
      margin-top: var(--space-section);
    }

    @media (max-width: 768px) {
      .product-section {
        margin-top: var(--space-section-sm);
      }

      .product-specs {
        margin-top: 0;
      }
    }

    /* =========================================
       4. GENERIEKE COMPONENTEN
       ========================================= */

    .is-hidden { display: none; }

  .pulse {
        color: orange;
        font-size: 110%;
        -webkit-animation: blink 500ms infinite;
                animation: blink 500ms infinite;
    }
    @-webkit-keyframes blink { 50% { color: red; }}
            @keyframes blink { 50% { color: red; }}

    /* Mini-cart popup (OpenCart #cart) */
    #cart { position: relative; }
    #cart .content { display: none; }

    #cart.active .content,
    #cart:hover .content { display:block; }

    /* Nieuw: als user sluit, niet direct heropenen door hover */
    #cart.is-closed:hover .content { display:none; }

    .cart__toggle { cursor:pointer; }

    /* panel wrapper */
    .cart__panel{
      position:absolute;
      right:0;
      top:100%;           /* GEEN calc gap */
      margin-top:10px;    /* visuele ruimte */
      width:min(520px, 92vw);
      z-index:9999;
    }

    /* hover-bridge: vult de marge op zodat u de popup kunt bereiken */
    .cart__panel::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:-10px;
      height:10px;
    }

    /* ===== PANEL INNER ===== */
    .cart__panel-inner{
      background:#fff;
      border:1px solid rgba(0,0,0,.10);
      border-radius:16px;
      box-shadow:0 14px 40px rgba(0,0,0,.18);
      overflow:hidden;

      /* essentieel voor scroll-oplossing */
      display:flex;
      flex-direction:column;
      max-height:min(80vh, 720px);
    }

    /* ===== Header ===== */
    .cart__panel-header{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 16px;
      border-bottom:1px solid rgba(0,0,0,.08);
    }
    .cart__title{ font-weight:700; }
    .cart__close{
      background:transparent;
      border:0;
      cursor:pointer;
      opacity:.75;
    }
    .cart__close:hover{ opacity:1; }

    /* ===== Items (SCROLLEN) ===== */
    .cart__items{
      padding:14px 16px 24px; /* extra onderruimte ivm sticky footer */
      display:flex;
      flex-direction:column;
      gap:12px;

      overflow:auto;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }

    /* item layout */
    .cart-item{ display:flex; gap:12px; }
    .cart-item__img{ flex:0 0 48px; height:48px; }
    .cart-item__img img{
      width:48px;
      height:48px;
      object-fit:cover;
      border-radius:10px;
      display:block;
    }
    .cart-item__main{ flex:1; min-width:0; }
    .cart-item__name{
      font-weight:700;
      text-decoration:none;
      display:block;
    }
    .cart-item__meta{
      margin-top:6px;
      font-size:12px;
      opacity:.8;
    }
    .cart-item__meta-row{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }

    /* qty + regeltotaal */
    .cart-item__bottom{
      margin-top:10px;
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
    }
    .cart-item__qty{
      opacity:.8;
      white-space:nowrap;
    }
    .cart-item__price{
      font-weight:700;
      white-space:nowrap;
    }

    /* ===== Totals (STICKY) ===== */
    .cart__totals{
      position:sticky;
      bottom:64px; /* hoogte van actions */
      z-index:2;

      background:#fff;
      padding:12px 16px;
      border-top:1px solid rgba(0,0,0,.08);
    }
    .cart-total{
      display:flex;
      justify-content:space-between;
      padding:4px 0;
    }
    .cart-total__label{ opacity:.8; }
    .cart-total__value{ font-weight:700; }

    /* ===== Actions (ALTIJD ZICHTBAAR) ===== */
    .cart__actions{
      position:sticky;
      bottom:0;
      z-index:3;

      background:#fff;
      padding:14px 16px;
      border-top:1px solid rgba(0,0,0,.08);

      display:flex;
      gap:10px;
      justify-content:flex-end;
    }

    /* Empty */
    .cart__empty{ padding:16px; }

    /* Einde mini cart popup */

    .price-box {
      display: inline-flex;
      align-items: baseline;
      gap: .45rem;
      white-space: nowrap;
    }

    .price-box__old,
    .price-box__new,
    .price-box__current,
    .price-box__suffix {
      display: inline-block;
    }

    /* Vanaf-prijs: toon ALLEEN current (laagste staffel) */
    .price-box.is-from .price-box__old { display: none !important; }
    .price-box.is-from .price-box__new { display: none !important; }
    .price-box.is-from .price-box__current { display: inline !important; }

    /* OLD prijs: subtiel + doorgestreept */
    .price-box__old {
      opacity: .6;
      text-decoration: line-through;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
      font-size: .95em;
    }

    /* NEW prijs: iets zwaarder */
    .price-box__new {
      font-weight: 700;
    }

    /* CURRENT prijs: normaal (wordt bij sale verborgen) */
    .price-box__current {
      font-weight: 700; /* u kunt dit naar 600 zetten als u iets rustiger wilt */
    }

    /* Suffix: klein en rustig (optioneel; als het element niet bestaat, geen probleem) */
    .price-box__suffix {
      opacity: .7;
      font-size: .85em;
      font-weight: 500;
    }

    .js-copy-to-clipboard {
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
    }

    .js-copy-to-clipboard::after {
      font-family: "Font Awesome 6 Free";
      font-weight: 400; /* regular */
      content: "\f0c5"; /* copy icon */
      opacity: 0.6;
      transition: opacity 0.15s ease;
    }

    .js-copy-to-clipboard:hover::after {
      opacity: 1;
    }

    .js-copy-to-clipboard.is-copied::after {
      content: "\f00c"; /* check icon */
      font-weight: 900; /* solid */
      opacity: 1;
    }

    /* =========================
       Sale/Non-sale visibility
       ========================= */

    /* Geen sale: toon current, verberg old/new */
    .price-box[data-has-sale="0"] .price-box__old,
    .price-box[data-has-sale="0"] .price-box__new {
      display: none;
    }

    /* Wel sale: toon old/new, verberg current */
    .price-box[data-has-sale="1"] .price-box__current {
      display: none;
    }

    /* =========================
       Context tweaks (optioneel)
       ========================= */

    /* In compacte rijen (addons/staffels) iets strakker */
    .addon-row__price .price-box,
    .price-step__price .price-box {
      gap: .35rem;
    }

    .price-step__unit {
      margin-left: .4rem;
      opacity: .75;
      font-size: .9em;
    }

    /* BTW toggle knop (basis; pas aan naar uw tokens) */
    .vat-switch {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      cursor: pointer;
      user-select: none;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-pill);
      border: 1px solid transparent;
      padding: 8px 18px;
      cursor: pointer;
      background: transparent;
      color: var(--color-text-main);
      white-space: nowrap;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    }

    .btn--dark {
      background: var(--color-header-dark);
      color: var(--color-text-invert);
      border-color: var(--color-header-dark);
    }

    .btn--dark:hover {
      background: var(--color-primary-dark);
      border-color: var(--color-primary-dark);
      transform: translateY(-1px);
    }

    .icon-badge {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      color: var(--color-header-dark);
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    }

    .icon-badge:hover {
      background: var(--color-bg-soft);
      border-color: var(--color-border-soft);
      transform: translateY(-1px);
    }

    .icon-badge i { font-size: 18px; }

    .icon-badge--cart-count {
      position: absolute;
      top: -5px;
      right: -5px;
      min-width: 18px;
      height: 18px;
      padding-inline: 4px;
      border-radius: var(--radius-pill);
      background: var(--color-danger);
      color: var(--color-text-invert);
      font-size: 11px;
      font-weight: var(--font-weight-semibold);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 2px var(--color-surface);
    }

    .callout {
      background: var(--color-surface-muted);
      border-radius: var(--radius-lg);
      padding: 1px 15px 15px 15px;
      font-size: var(--font-size-footer);
      color: var(--color-text-soft);
    }

    /* =========================================
       Pickup warning (order status)
       ========================================= */

    .pickup-warning{
      background: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg-page));
      border: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--color-border-subtle));
      border-radius: var(--radius-lg);
      padding: var(--space-4);
    }

    .pickup-warning__icon{
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      border-radius: var(--radius-pill);
      background: var(--color-warning);
      color: var(--color-text-invert);
      font-weight: var(--font-weight-semibold);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .pickup-warning__content{
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }

    .pickup-warning__title{
      font-size: var(--font-size-base);
      color: var(--color-text-main);
    }

    .pickup-warning__text{
      font-size: var(--font-size-sm);
    }

    /* =========================================
       5. HEADER – TOPBAR
       ========================================= */

    .site-header__topbar {
      background: var(--color-bg-soft);
      font-size: var(--font-size-sm);
    }

    .topbar__left {
      color: var(--color-text-soft);
    }

    .topbar__right {
      color: var(--color-text-soft);
      white-space: nowrap;
    }

    .topbar__dot {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: var(--color-border-soft);
      align-self: center;
    }

    .topbar-usp {
      display: grid;
      min-height: 20px;
    }

    .usp-item {
      grid-area: 1 / 1;
      opacity: 0;
      transition: opacity 0.5s ease;
      white-space: nowrap;
    }

    .usp-item--active {
      opacity: 1;
    }

    @media (min-width: 1024px) {
      .topbar-usp {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
      }

      .topbar-usp .usp-item {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        opacity: 1 !important;
        position: static;
      }

      /* dot tussen USP's */
      .topbar-usp .usp-item + .usp-item::before {
        content: "•";
        margin: 0 0.75rem;
        color: var(--color-text-subtle);
      }

    }

    .vat-switch {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1_5);
      font-weight: var(--font-weight-medium);
      cursor: pointer;
      transition: color 0.15s ease;
      border: none;
      padding: 0;
      background: none;
      color: var(--color-text-soft);
    }

    .vat-switch__label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
    }

    .vat-switch__icon {
      font-size: 14px;
      color: var(--color-danger);
    }

    .vat-switch:hover { color: var(--color-text-main); }

    .topbar__link {
      font-weight: var(--font-weight-medium);
      transition: color 0.15s ease;
    }

    .topbar__lang {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      font-weight: var(--font-weight-medium);
      cursor: pointer;
      transition: color 0.15s ease;
      border: none;
      padding: 0;
      background: none;
      color: var(--color-text-soft);
    }

    .topbar__link:hover,
    .topbar__lang:hover {
      color: var(--color-text-main);
    }

    .topbar__lang-code {
      letter-spacing: 0.05em;
    }

    /* =========================================
       6. HEADER – MAIN
       ========================================= */

    .site-header__main {
      background: var(--color-surface);
    }

    .header-main__inner {
      display: grid;
      grid-template-columns: auto minmax(0, 1.5fr) auto auto;
      grid-column-gap: var(--space-4);
      grid-row-gap: var(--space-3);
      align-items: center;
    }

    .header-main__menu-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      cursor: pointer;
    }

    .header-main__menu-toggle i { font-size: 16px; }

    .site-logo {
      font-size: 26px;
      font-weight: var(--font-weight-semibold);
      white-space: nowrap;
    }
    .site-logo span { font-weight: var(--font-weight-regular); }

    .search {
      position: relative;
      width: 100%;
      max-width: 800px;
      min-width: 70%;
      margin-inline: auto;
    }

    .search__input {
      width: 100%;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border-subtle);
      padding: 11px 42px 11px 16px;
      font-size: 15px;
      outline: none;
    }

    .search__input::placeholder { color: var(--color-text-subtle); }

    .search .button-search {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      opacity: 0;
    }

    .search__icon {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: var(--color-text-subtle);
      cursor: pointer;
    }

    .search__input:focus,
    .footer-track__input:focus {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 1px var(--color-accent);
      outline: none;
    }


/* =========================
   SmartSearch – definitieve styling
   Vereist JS met .ss__body / .ss__title / .ss__desc
   ========================= */

/* =========================
   Combined dropdown: devices + products
   Markup uit JS:
   .smartsearch
     .smartsearch-section
       .smartsearch-section__title
       a.smartsearch-item.smartsearch-item--device (zonder img)
       a.smartsearch-item.smartsearch-item--product (met img.ss__img)
     .smartsearch-bottom
   ========================= */

/* Anchor voor dropdown */
#search{
  position: relative;
}

/* Dropdown container */
.smartsearch{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 3000;

  background: #ffffff;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(17,24,39,.14);

  max-height: min(70vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  display: none;
}

/* iOS-only: voorkom auto-zoom, maar behoud visueel 15px */
@supports (-webkit-touch-callout: none) {
  #search .search__input{
    font-size: 16px;
    transform: scale(0.9375);
    transform-origin: left center;
    width: calc(100% / 0.9375);
  }
}

/* =========================
   Secties + items (compacter)
   ========================= */

/* Sectie */
.smartsearch-section{
  padding: 6px 0; /* was 10px */
}

/* Subtiele scheiding tussen secties */
.smartsearch-section + .smartsearch-section{
  border-top: 1px solid rgba(17,24,39,.06);
}

/* Sectietitel */
.smartsearch-section__title{
  padding: 6px 14px 4px 14px; /* compacter */

  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;

  color: rgba(17,24,39,.55);
}

/* Item (device + product) */
.smartsearch-item{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 8px 14px; /* was 10px */
  text-decoration: none;
  background: #ffffff;

  color: rgba(17,24,39,.82);
}

/* Geen lijnen tussen items */
.smartsearch-section .smartsearch-item + .smartsearch-item{
  border-top: 0;
}

/* Hover + keyboard focus */
.smartsearch-item:hover,
.smartsearch-item:focus-visible{
  background: rgba(17,24,39,.03);
  outline: none;
}

/* Focus via pijltjestoetsen */
.smartsearch-focus{
  background: rgba(17,24,39,.055) !important;
}

/* Thumbnail */
.smartsearch-item .ss__img{
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: cover;

  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.08);
  background: #f8fafc;
}

/* Device-items */
.smartsearch-item--device{
  gap: 10px;
}

/* Tekstkolom */
.smartsearch-item .ss__body{
  display: block;
  min-width: 0;
}

/* Titel */
.smartsearch-item .ss__title{
  display: block;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.25;
  color: rgba(17,24,39,.92);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   Search overlay
   ========================= */
#search-overlay{
  position: fixed;
  inset: 0;
  z-index: 2500;

  background: rgba(17, 24, 39, 0.06);
  backdrop-filter: saturate(0.98);

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

#search-overlay.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   Bottom CTA
   ========================= */
.smartsearch-bottom{
  position: sticky;
  bottom: 0;

  padding: 10px 14px; /* compacter */
  background: linear-gradient(
    to top,
    #ffffff 65%,
    rgba(255,255,255,.75)
  );

  border-top: 1px solid rgba(17,24,39,.08);
}

.smartsearch-bottom a{
  display: inline-block;
  padding: 0;

  font-weight: 700;
  font-size: 15px;
  color: #111827;
  text-decoration: none;
}

.smartsearch-bottom a:hover{
  text-decoration: underline;
}

/* =========================
   Mobiel
   ========================= */
@media (max-width: 640px){

  .smartsearch{
    border-radius: 14px;
    top: calc(100% + 8px);
  }

  .smartsearch-section{
    padding: 4px 0;
  }

  .smartsearch-section__title{
    padding: 6px 12px 4px 12px;
    font-size: 13px;
  }

  .smartsearch-item{
    padding: 8px 12px; /* compacter */
    gap: 10px;
  }

  .smartsearch-item .ss__img{
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .smartsearch-bottom{
    padding: 10px 12px;
  }

  .smartsearch-item .ss__title{
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

}




    .header-main__primary {
      justify-self: end;
    }

    .header-main__primary .btn { font-size: var(--font-size-sm); }
    .header-main__primary .btn i { font-size: var(--font-size-lg); }

      .header-main__primary img {
        height: 52px;
        margin: 0 auto;
      }

    .header-main__icons {
      justify-self: start;
    }

    /* =========================================
       7. NAV + MEGA MENU
       ========================================= */

    .site-header__nav {
      background: var(--color-bg-softer);
      border-top: 1px solid var(--color-border-subtle);
      border-bottom: 1px solid var(--color-border-subtle);
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
      position: relative;
      z-index: 30;
    }

    .nav__inner {
      list-style: none;
      margin: 0;
      padding-inline-start: 0;
      padding-block: var(--space-1_5);
    }

    .nav-item { position: static; }

    .nav__link {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 6px 0;
      font-size: 15px;
      color: var(--color-nav-link);
      font-weight: var(--font-weight-medium);
      transition: color 0.15s ease;
    }

    .nav__link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -4px;
      height: 2px;
      background: transparent;
      transform-origin: left;
      transform: scaleX(0);
      transition: background 0.15s ease, transform 0.15s ease;
    }

    .nav__link:hover {
      color: var(--color-neutral-strong);
    }

    .nav__link:hover::after {
      background: var(--color-neutral-strong);
      transform: scaleX(1);
    }

    .nav-mega {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      background: var(--color-bg-softer);
      border-top: 1px solid rgba(15, 23, 42, 0.04);
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);

      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(4px);
      transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    }

    .nav-mega__inner {
      max-width: var(--max-width-page);
      margin-inline: auto;
      padding: 20px var(--space-4) 24px;
    }

    .nav-mega__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-mega__item + .nav-mega__item {
      margin-top: 6px;
    }

    .nav-mega__link {
      display: block;
      font-size: 15px;
      padding: 4px 0;
      color: var(--color-text-main);
      font-weight: var(--font-weight-medium);
      white-space: nowrap;
    }

    .nav-mega__link:hover {
      color: var(--color-neutral-strong);
      text-decoration: underline;
    }

    .nav-item--has-mega:hover > .nav-mega,
    .nav-item--has-mega:focus-within > .nav-mega {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    .nav-mega::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -14px;
      height: 14px;
      background: transparent;
    }

    /* =========================================
       8. 404 Error
       ========================================= */

    .nf-layout{
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-7);
      align-items: start;
    }

/*    .nf-content{
      max-width: 620px;
    }*/

    .nf-illus{
      justify-self: center;
      margin-top: var(--space-5);
    }

    .notfound-illus{
      display: block;
      width: 100%;
      max-width: 240px;
      height: auto;
    }

    /* Desktop pas vanaf LARGE */
    @media (min-width: 1024px){
      .nf-layout{
        grid-template-columns: minmax(0,1fr) minmax(0,550px);
      }

      .nf-illus{
        justify-self: end;
        margin-top: 0;
      }

      .notfound-illus{
        max-width: 420px;
      }
    }

    @media (max-width: 1023px){
      .nf-illus{
        display: none;
      }
    }

    /* =========================================
       8. FOOTER
       ========================================= */

    .site-footer {
      background: var(--color-bg-soft);
      font-size: var(--font-size-footer);
      color: var(--color-text-soft);
      padding-top: var(--space-6);
      padding-bottom: var(--space-5);
    }

    .footer__cols {
      align-items: flex-start;
      grid-template-columns: 180px minmax(0, 1.5fr) 260px;
    }

    .footer__col-title {
      font-size: 15px;
      font-weight: var(--font-weight-semibold);
      margin-bottom: var(--space-2);
      color: var(--color-text-main);
    }

    .footer__links {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer__links li + li { margin-top: 4px; }

    .footer__links a {
      color: var(--color-text-soft);
    }

    .footer__links a:hover {
      color: var(--color-text-main);
    }

    .footer-track__controls {
      margin-top: var(--space-3);
    }

    .footer-track__input {
      flex: 1 1 0;
      min-width: 0;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border-soft);
      padding: 9px 12px;
      font-size: var(--font-size-footer);
      outline: none;
    }

    .footer-track__submit {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-pill);
      font-size: var(--font-size-lg);
      border: none;
      background: var(--color-primary);
      color: var(--color-text-invert);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.1s ease;
    }

    .footer-track__submit:hover {
      background: var(--color-primary-dark);
      transform: translateY(-1px);
    }

    .footer-bottom {
      border-top: 1px solid var(--color-border-subtle);
      font-size: var(--font-size-xs);
      color: var(--color-text-soft);
      margin-top: var(--space-3);
      padding-top: var(--space-3);
    }

    .footer-payments img {
      height: 22px;
      flex: 0 0 auto;
    }

    .footer-legal a {
      margin-inline: 4px;
      color: var(--color-text-soft);
    }

    .footer-legal a:hover {
      color: var(--color-text-main);
    }

    /* =========================================
       8B. CATEGORY LAYOUT & PRODUCT GRID
       ========================================= */

    /* =========================================
       Subcategorieën – categoriepagina (token)
       ========================================= */

    .category-subcategories {
      margin-block: var(--space-6) var(--space-7);
    }

    .category-subcategories__list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: var(--space-4);
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .category-subcategories__item {
      background: var(--color-surface);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-sm);
      transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
    }

    .category-subcategories__item:hover {
      border-color: var(--color-border-soft);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    .category-subcategories__link {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3);
      height: 100%;
      color: var(--color-text-main);
      text-decoration: none;
    }

    .category-subcategories__image {
      width: 100%;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .category-subcategories__image img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .category-subcategories__name {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.3;
      text-align: center;
      color: var(--color-text-main);
    }

    /* =========================================
       Responsive
       ========================================= */

    @media (max-width: 767px) {
      .category-subcategories {
        margin-block: var(--space-5) var(--space-6);
      }

      .category-subcategories__list {
        gap: var(--space-3);
      }

      .category-subcategories__name {
        font-size: var(--font-size-sm);
      }
    }

    /* =========================================
       Category description (SEO) + toggle
       ========================================= */

    .cat-desc {
      margin-block: var(--space-6);
    }

    .cat-desc__content {
      color: var(--color-text-muted);
      line-height: 1.6;

      /* Default: 2 regels (geen JS nodig om in te klappen) */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      position: relative;
    }

    /* Paragraph spacing binnen description */
    .cat-desc__content p { margin: 0 0 var(--space-3); }
    .cat-desc__content p:last-child { margin-bottom: 0; }

    /* Subtiele fade, maar alleen als we ingeklapt zijn */
    .cat-desc__content::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1.6em;
      background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-bg-page));
    }

    /* Expanded state */
    .cat-desc__content.is-expanded {
      -webkit-line-clamp: unset;
      overflow: visible;
    }

    .cat-desc__content.is-expanded::after {
      display: none;
    }

    /* Toggle button – passend bij uw stijl (subtiel, geen rode underline) */
    .cat-desc__toggle {
      margin-top: var(--space-3);
      padding: 0;
      background: none;
      border: 0;
      cursor: pointer;

      display: inline-flex;
      align-items: center;
      gap: var(--space-2);

      font-family: var(--font-sans);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-main);
    }

    .cat-desc__toggle:hover .cat-desc__label {
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }

    .cat-desc__toggle:focus {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
      border-radius: var(--radius-xs);
    }

    /* Plus/min-icoon: kleiner en “UI-achtig” */
    .cat-desc__icon {
      width: 12px;
      height: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      line-height: 1;
      color: var(--color-text-soft);
    }

    .cat-desc__label {
      color: var(--color-text-soft);
    }

    /* =========================================
       Category
       ========================================= */

    .page-section {
      padding-top: var(--space-5);
      padding-bottom: var(--space-7);
      background: var(--color-bg-page);
    }

    .page-header {
      margin-bottom: var(--space-4);
      padding-bottom: 0; /* géén lijn meer boven filters/sortering */
    }

    .breadcrumb {
      font-size: var(--font-size-xs);
      color: var(--color-text-subtle);
      margin-bottom: var(--space-2);
    }

    .breadcrumb a {
      color: var(--color-text-subtle);
    }

    .breadcrumb a:hover {
      color: var(--color-text-main);
    }

    .breadcrumb__sep {
      margin-inline: 4px;
    }

    .page-title {
      font-size: 26px;
      font-weight: var(--font-weight-semibold);
      margin: 0;
      color: var(--color-text-main);
    }

    .page-subtitle {
      margin-top: var(--space-1);
      font-size: var(--font-size-base);
      color: var(--color-text-soft);
      max-width: 640px;
    }

    /* LAY-OUT: FILTERS + PRODUCTEN */

    .category-main {
      display: flex;
      align-items: flex-start;
      gap: var(--space-6);
      margin-top: var(--space-3); /* filters en kaarten iets los van header */
    }

    .category-filters {
      width: 260px;
      max-width: 280px;
      font-size: var(--font-size-base);
      color: var(--color-text-main);
    }

    .category-products {
      flex: 1 1 0;
      min-width: 0;
      margin-top: var(--space-1); /* top uitlijning dichter bij filters */
    }

    /* FILTERS */

    .filter-panel {
      background: var(--color-surface);
      border-radius: var(--radius-lg);
      border: none;
      padding: var(--space-8) var(--space-2_5) var(--space-3) 0;
      /* links minder padding dan rechts → blok schuift iets naar links */
    }

    .filter-group:not(:last-child) {
      padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .filter-group + .filter-group {
      margin-top: var(--space-2); /* meer ruimte tussen groepen */
    }

    .filter-group__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
      cursor: default;
      padding-top: var(--space-2);
      padding-bottom: var(--space-2);
    }

    .filter-group__title {
      font-size: var(--font-size-base); /* groter */
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-main);
      margin: 0;
    }

    .filter-group__body {
      margin-top: 2px;
      color: var(--color-text-main); /* donkerder tekst */
    }

    .filter-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
      margin-top: 4px;
    }

    .filter-option__label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1_5);
    }

    .filter-option__count {
      font-size: var(--font-size-xs);
      color: var(--color-text-subtle);
    }

    .filter-option input[type="checkbox"] {
      width: 14px;
      height: 14px;
      border-radius: var(--radius-xs);
      border: 1px solid var(--color-border-soft);
      cursor: pointer;
    }

    .filter-colors {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-1_5);
      margin-top: var(--space-2);
      padding-bottom: var(--space-1);
    }

    /* kleurblokjes – geen rondjes, eenvoudiger */
    .filter-color-dot {
      width: 22px;
      height: 22px;
      border-radius: var(--radius-xs);
      border: 1px solid rgba(0, 0, 0, 0.08);
      cursor: pointer;
    }

    .filter-color-dot--orange { background:#f97316; }
    .filter-color-dot--green  { background:#22c55e; }
    .filter-color-dot--blue   { background:#2563eb; }
    .filter-color-dot--lightblue { background:#38bdf8; }
    .filter-color-dot--red    { background:#ef4444; }
    .filter-color-dot--black  { background:#111827; }

    .filter-more {
      margin-top: var(--space-1);
      font-size: var(--font-size-sm); /* groter */
    }

    .filter-more a {
      color: var(--color-accent);
    }

    .filter-more a:hover {
      text-decoration: underline;
    }

    /* ===== Mobile filters overlay ===== */

    .btn-filters{
      display:none;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border:1px solid #e5e7eb;
      border-radius:999px;
      background:#fff;
      color:#111827;
      font-weight:600;
      line-height:1;
    }

    @media (max-width: 991px){
      /* Toon knop naast sorteren */
      .btn-filters{ display:inline-flex; }

      /* Verberg filters op hun originele plek op mobiel (u verplaatst ze naar overlay) */
      .category-filters,
      aside.category-filters,
      .category-aside,
      #column-left,
      #column-right,
      aside#column-left,
      aside#column-right{
        display:none;
      }

      /* Als de filters IN de overlay staan: altijd tonen */
      .filters-overlay .category-filters,
      .filters-overlay aside.category-filters,
      .filters-overlay #column-left,
      .filters-overlay #column-right,
      .filters-overlay aside#column-left,
      .filters-overlay aside#column-right{
        display:block !important;
        width:100%;
        max-width:none;
      }
    }

    /* Overlay container */
    .filters-overlay{
      position:fixed;
      inset:0;
      z-index:9999;
      display:none;
    }

    .filters-overlay.is-open{ display:block; }

    .filters-overlay__backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.45);
      backdrop-filter: blur(2px);
    }

    .filters-overlay__panel{
      position:absolute;
      inset:0;
      background:#fff;
      display:flex;
      flex-direction:column;
    }

    /* Header */
    .filters-overlay__header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 16px;
      border-bottom:1px solid #e5e7eb;
    }

    .filters-overlay__title{
      font-size:16px;
      font-weight:700;
      margin:0;
    }

    /* Close button */
    .filters-overlay__close{
      width:40px;
      height:40px;
      border:0;
      background:transparent;
      cursor:pointer;
      border-radius:10px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .filters-overlay__close::before{
      content:"\00d7"; /* × */
      font-size:26px;
      line-height:1;
      color:#111827;
    }

    /* Body scroll area */
    .filters-overlay__body{
      flex:1 1 auto;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      padding:12px 16px 24px;
    }

    /* Body lock */
    body.is-filters-open{
      overflow:hidden;
      touch-action:none;
    }

    /* SORTERING – echte select */

    .category-products-bar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--space-3);
      margin-bottom: var(--space-3);
      font-size: var(--font-size-xs);
      color: var(--color-text-soft);
    }

    .sort-select {
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border-subtle);
      padding: 6px 34px 6px 14px;
      font-size: var(--font-size-sm);
      color: var(--color-text-main);
      background: var(--color-surface);
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      position: relative;
      background-image: none;
    }

    .sort-select-wrapper {
      position: relative;
      display: inline-block;
    }

    .sort-select-wrapper::after {
      content: "\f078"; /* fa-chevron-down */
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      color: var(--color-text-subtle);
      pointer-events: none;
    }

    /* PRODUCTGRID + CARDS */

    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-5); /* grotere gap tussen kaarten */
    }

    .product-card {
      position: relative;
      background: var(--color-surface);
      border-radius: var(--radius-md); /* kleinere radius */
      border: 1px solid var(--color-border-subtle);
      box-shadow: none; /* geen basis-schaduw */
      padding: var(--space-3);
      font-size: var(--font-size-base);  /* grotere tekst */
      display: flex;
      flex-direction: column;
      overflow: hidden;
      cursor: pointer;
      transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
    }

    .product-card:hover {
      border: 1px solid var(--color-border-soft);
    }

    .product-card__link {
      text-decoration: none;
      color: inherit;
      display: block;
      flex: 1 1 auto; /* alles boven de footer */
    }

    .product-card__image {
      margin-bottom: var(--space-2);
      width: 100%;
      margin-left: 0;
    }

    .product-card__image img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 16px;
      object-fit: contain;
      max-height: 180px;       /* was 180px – nu duidelijk kleiner */
      margin-inline: auto;
    }

    .product-card__sticker {
      position: absolute;
      top: var(--space-3);
      left: var(--space-3);

      display: inline-flex;
      align-items: center;

      padding: 6px 10px;
      border-radius: var(--radius-pill);

      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-semibold);
      line-height: 1;

      background: var(--color-neutral-strong);
      color: var(--color-text-invert);

      pointer-events: none; /* geen gedoe met hover/scroll */
    }

    /* vaste hoogte-balk voor kleuren / badge zodat kaarten gelijk uitlijnen */

    .product-card__color-img {
      width: 17px;
      height: 17px;
      cursor: pointer;
      display: inline-block;

      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      border-radius: 4px;
      border: 0;

      box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.06);
    }

    .product-card__topline {
      min-height: 24px;
      display: flex;
      align-items: center;
      gap: var(--space-1);
      margin-bottom: var(--space-1);
      flex-wrap: wrap;
    }

    .product-card__colors {
      display: inline-flex;
      gap: 4px;
    }

    .product-card__color-dot {
      width: 18px;
      height: 18px;
      border-radius: var(--radius-xs);
      border: 1px solid rgba(0, 0, 0, 0.08);

    }

    .product-card__badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 10px;
      border-radius: 999px;
      background: #111827;
      color: #facc15;
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-medium);
    }

/* =========================================
   Colorway badge (kleur-op-kleur)
   Verwacht:
   <span class="product-card__badge product-card__badge--colorway"
         data-print="black" data-base="transparent">...</span>
   ========================================= */

.product-card__badge--colorway{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

/* ---------- Base (achtergrond) ---------- */
.product-card__badge--colorway[data-base="white"]{
  background: #fff;
  border-color: var(--color-border-subtle);
}

.product-card__badge--colorway[data-base="black"]{
  background: #111;
  border-color: rgba(255,255,255,.18);
}

.product-card__badge--colorway[data-base="red"]{
  background: var(--color-danger);
  border-color: rgba(0,0,0,.08);
}

/* Voeg hier uw andere bases toe indien u ze gebruikt als 'base_key' */
.product-card__badge--colorway[data-base="blue"]{ background: var(--color-accent); border-color: rgba(0,0,0,.08); }
.product-card__badge--colorway[data-base="green"]{ background: var(--color-primary); border-color: rgba(0,0,0,.08); }
.product-card__badge--colorway[data-base="yellow"]{ background: #facc15; border-color: rgba(0,0,0,.10); }
.product-card__badge--colorway[data-base="grey"]{ background: #e5e7eb; border-color: rgba(0,0,0,.10); }
.product-card__badge--colorway[data-base="orange"]{ background: #f97316; border-color: rgba(0,0,0,.10); }
.product-card__badge--colorway[data-base="purple"]{ background: #a855f7; border-color: rgba(0,0,0,.10); }
.product-card__badge--colorway[data-base="brown"]{ background: #8b5e34; border-color: rgba(0,0,0,.10); }
.product-card__badge--colorway[data-base="brown"]{ background: #000; }

/* Transparant = Photoshop checkerboard */
.product-card__badge--colorway[data-base="transparent"]{
  background-color: #eee;
  background-image:
    linear-gradient(45deg, #cfcfcf 25%, transparent 25%),
    linear-gradient(-45deg, #cfcfcf 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cfcfcf 75%),
    linear-gradient(-45deg, transparent 75%, #cfcfcf 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  border-color: rgba(0,0,0,.12);
}

.product-card__badge--colorway[data-base="gold"]{
  background: linear-gradient(
    135deg,
    #7a5c1e 0%,
    #c9a23a 22%,
    #f2d774 45%,
    #c9a23a 68%,
    #7a5c1e 100%
  );
  border-color: rgba(0,0,0,.25);
}

.product-card__badge--colorway[data-base="silver"]{
  background: linear-gradient(
    135deg,
    #6b7280 0%,
    #cfd3d8 30%,
    #f3f4f6 50%,
    #cfd3d8 70%,
    #6b7280 100%
  );
  border-color: rgba(0,0,0,.18);
}

.product-card__badge--colorway[data-print="white"][data-base="transparent"]{
  color: #fff;
  text-shadow:
    0 0 1px rgba(0,0,0,.55),
    0 1px 1px rgba(0,0,0,.35);
}

.product-card__badge--colorway[data-print="gold"][data-base="transparent"]{
  color: #d4af37; /* uw goudkleur */
  text-shadow:
    0 0 1px rgba(255,255,255,.55),
    0 1px 1px rgba(255,255,255,.35);
}

/* ---------- Print (tekstkleur) ---------- */
.product-card__badge--colorway[data-print="black"]{ color:#111; }
.product-card__badge--colorway[data-print="white"]{ color:#fff; }
.product-card__badge--colorway[data-print="red"]{ color: var(--color-danger); }
.product-card__badge--colorway[data-print="blue"]{ color: var(--color-accent); }
.product-card__badge--colorway[data-print="green"]{ color: var(--color-primary-dark); }
.product-card__badge--colorway[data-print="yellow"]{ color:#a16207; } /* donker geel/bruin voor leesbaarheid */
.product-card__badge--colorway[data-print="grey"]{ color:#374151; }
.product-card__badge--colorway[data-print="orange"]{ color:#c2410c; }
.product-card__badge--colorway[data-print="purple"]{ color:#6d28d9; }
.product-card__badge--colorway[data-print="brown"]{ color:#5b3a1e; }

/* Goud/Zilver als "ink" kleur */
.product-card__badge--colorway[data-print="gold"]{ color:#d4af37; }
.product-card__badge--colorway[data-print="silver"]{ color:#9ca3af; }

/* ---------- Combinatie-fixes (alleen waar nodig) ---------- */
/* Wit op wit: dan moet tekst donker */
.product-card__badge--colorway[data-print="white"][data-base="white"]{ color:#111; }

/* Zwart op zwart: tekst wit */
.product-card__badge--colorway[data-print="black"][data-base="black"]{
  color:#fff;
  border-color: rgba(255,255,255,.22);
}

/* Rood op rood: tekst wit */
.product-card__badge--colorway[data-print="red"][data-base="red"]{ color:#fff; }

/* Geel op wit: iets donkerder voor contrast */
.product-card__badge--colorway[data-print="yellow"][data-base="white"]{ color:#7c5a00; }

/* Goud op wit kan flets zijn: geef iets donkerder rand */
.product-card__badge--colorway[data-print="gold"][data-base="white"]{
  border-color: rgba(0,0,0,.12);
}


    .product-card__name {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-main);
      margin: 0;
    }

    .product-card__meta {
      font-size: var(--font-size-base); /* groter */
      color: var(--color-text-soft);
      margin-top: var(--space-1);
      line-height: 1.6;
    }

    .product-card__meta ul {
      list-style: disc;
      padding-left: 18px; /* echte bullets */
      margin: 0;
    }

    .product-card__meta li + li {
      margin-top: 2px;
    }

    .product-card__footer {
      margin-top: auto; /* altijd onderaan */
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--space-2);
      padding-top: var(--space-3);
    }

    .product-card__price-row {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
    }

    .product-card__price-prefix {
      font-size: var(--font-size-sm);
      color: var(--color-text-soft);
    }

    .product-card__price {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--color-neutral-strong);
    }

    .product-card__cta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
    }

    .product-card__plus {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: none;
      background: var(--color-primary);
      color: var(--color-text-invert);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.1s ease;
    }

    .product-card__plus i {
      font-size: 16px;
    }

    .product-card__plus:hover {
      background: var(--color-primary-dark);
      transform: translateY(-1px);
    }

    /* PAGINATIE */

    .category-pagination {
      margin-top: var(--space-4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      font-size: var(--font-size-sm);
      color: var(--color-text-soft);
    }

    .pagination {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .pagination__btn {
      min-width: 32px;
      height: 32px;
      border-radius: var(--radius-sm); /* rechthoekig, geen cirkel */
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: var(--font-size-sm);
      padding-inline: 10px;
    }

    .pagination__btn--active {
      background: var(--color-neutral-strong);
      color: var(--color-text-invert);
      border-color: var(--color-neutral-strong);
    }

    .pagination__btn:hover:not(.pagination__btn--active) {
      background: var(--color-bg-soft);
    }

    .category-pagination__info {
      font-size: var(--font-size-sm);
    }

    /* =========================================
       8C. PRODUCT PAGE
       ========================================= */

    .page-section--product {
      padding-top: var(--space-5);
      padding-bottom: var(--space-7);
    }

    /* BOVENSTE GRID: ±45% beeld, ±55% info */

    .product-main {
      display: grid;
      grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); /* ca. 45/55 */
      gap: var(--space-5);
      align-items: flex-start;
      font-size: var(--font-size-base);
    }

    /* -----------------------------------------
       MEDIAKOLom (links)
       ----------------------------------------- */

    .product-main__media {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    /* hoofdafbeelding – geen border, max 500px, gecentreerd */

    .product-main__image-wrapper {
      padding: var(--space-3) 0;
      border: none;
      background: transparent;
    }

    .product-main__image {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      /* max-height weg; container mag meegroeien */
    }

    .product-main__image img {
      display: block;
      max-width: 100%;
      height: auto;          /* leidend maken */
      max-height: 70vh;      /* optioneel: visueel plafond zonder “afsnijden” */
      object-fit: contain;
    }

    /* thumbs onder de afbeelding */

    .product-main__thumbs {
      display: flex;
      gap: var(--space-2);
    }

    .product-main__thumb {
      flex: 0 0 64px;
      height: 64px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

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

    .product-main__thumb--active {
      border-color: var(--color-accent);
    }

    /* -----------------------------------------
       INFO-KOLOM (rechts)
       ----------------------------------------- */

    .product-main__info {
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-bg-soft);
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      font-size: var(--font-size-base);
    }

    /* labels boven blokken – bold */

    .product-option-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
      margin-bottom: var(--space-5);
    }

    .product-option-group:last-child { margin-bottom: 0; }

    .product-option-label {
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-soft);
      margin-bottom: var(--space-3);
    }

    /* 3) Grote groepen (altijd dezelfde regel) */
    .product-option-group:has(.price-steps),
    .product-option-group:has(.addon-group) {
      margin-bottom: var(--space-6);
    }

    /* ---------- KLEUROPTIE ---------- */

    .product-option-value {
      display: inline-flex;
      align-items: center;
    }

    .product-option-button {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      padding: 6px 14px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      cursor: pointer;
      font-size: var(--font-size-base);
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .product-option-button i {
      font-size: 12px;
      color: var(--color-text-subtle);
    }

    .product-option-button:hover {
      background: var(--color-bg-soft);
    }

    /* ========== PACK TABS (alle schermen) ========== */

    .product-pack-tabs{
      display: inline-flex;
      width: fit-content;            /* content-breed */
      max-width: 100%;
      flex: 0 0 auto;                /* voorkomt full-width in flex parent */
      align-self: flex-start;

      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-pill);
      background: var(--color-surface);
      overflow: hidden;              /* houdt pill netjes */
    }

    .product-pack-tab{
      appearance: none;
      border: 0;
      background: transparent;
      padding: 10px 16px;

      font: inherit;
      font-size: var(--font-size-base);
      line-height: 1;

      color: var(--color-text-main);
      cursor: pointer;
      white-space: nowrap;
      flex: 0 0 auto;

      transition: background 0.12s ease, color 0.12s ease;
    }

    .product-pack-tab + .product-pack-tab{
      border-left: 1px solid var(--color-border-subtle);
    }

    /* hover (niet-active) */
    .product-pack-tab:hover{
      background: var(--color-bg-soft);
    }

    /* active */
    .product-pack-tab--active,
    .product-pack-tab[aria-selected="true"]{
      background: var(--color-neutral-strong);
      color: var(--color-text-invert);
    }

    /* active hover moet IDENTIEK blijven (dus niet wit worden) */
    .product-pack-tab--active:hover,
    .product-pack-tab[aria-selected="true"]:hover{
      background: var(--color-neutral-strong);
      color: var(--color-text-invert);
    }

    /* ========== MOBIEL (≤ 640): 1 rij + horizontale scroll ========== */
    @media (max-width: 640px){
      .product-pack-tabs{
        display: flex;
        width: auto;
        max-width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;       /* Firefox */
      }
      .product-pack-tabs::-webkit-scrollbar{ display: none; }
    }

    /* ---------- STAFFELKORTING ---------- */

    .price-steps {
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-subtle);
      padding: 4px;
      background: var(--color-surface); /* volledig wit */
      list-style: none;
      margin: 0;
    }

    .price-steps li {
      list-style: none;
    }

    .price-steps li + li {
      margin-top: 4px; /* geen lijnen; alleen ruimte */
    }

    /* label = volledige klikbare rij */

    .price-step {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      column-gap: var(--space-2);
      padding: 6px 10px;
      border-radius: var(--radius-md);
      background: var(--color-surface);
      cursor: pointer;
      transition: background 0.12s ease;
    }

    .price-step__radio {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
    }

    .price-step:has(input[type="radio"]:checked) {
      background: var(--color-bg-soft);
    }

    .price-step__radio input {
      width: 14px;
      height: 14px;
      cursor: pointer;
    }

    .price-step__label {
      font-size: var(--font-size-base);
    }

    .price-step__price {
      text-align: right;
      font-size: var(--font-size-base);
    }

    /* korting iets kleiner, gelijk uitgelijnd */

    .price-step__discount {
      min-width: 44px;
      text-align: right;
      font-size: var(--font-size-sm);
      color: var(--color-primary);
      font-weight: var(--font-weight-medium);
    }

    .price-step--active {
      background: var(--color-bg-soft);
    }

    .price-step:hover {
      background: var(--color-bg-soft);
    }

    /* ACCESSOIRES: zelfde patroon als .price-steps/.price-step */
    .addon-group{
      list-style: none;
      margin: 0;
      padding: 0;

      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      background: var(--color-surface);
      overflow: hidden; /* zodat separators & hover netjes binnen radius blijven */
    }

    /* 2) Elke optie is nu een rij (geen eigen border/radius) */
    .addon-group > li{
      margin: 0;
    }

    /* separator tussen rijen */
    .addon-group > li + li{
      border-top: 1px solid var(--color-border-subtle);
    }

    .addon-row{
      display: grid;
      grid-template-columns: auto 56px minmax(0,1fr) auto;
      align-items: center;
      column-gap: var(--space-3);

      padding: 10px 12px;
      background: transparent;
      cursor: pointer;

      transition: background 0.12s ease;
    }

    .addon-row:hover{
      background: var(--color-bg-soft);
    }

    /* checked: zelfde “taal” als hover, maar blijvend */
    .addon-row:has(input:checked){
      background: var(--color-bg-soft);
    }

    /* rest: thumb/typografie zoals u al had */
    .addon-row__check input{ width:16px; height:16px; margin:0; }
    .addon-row__thumb{
      width:56px; height:56px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-bg-softer);
      overflow:hidden;
      display:grid; place-items:center;
    }
    .addon-row__thumb img{ width:100%; height:100%; object-fit:contain; }
    .addon-row__name{ font-weight: var(--font-weight-semibold); color: var(--color-text-main); }
    .addon-row__meta{ font-size: var(--font-size-sm); color: var(--color-text-soft); }
    .addon-row__price{ font-weight: var(--font-weight-semibold); white-space: nowrap; color: var(--color-text-main); }

    /* ---------- COMPATIBILITEIT / TEKSTJE BOVEN QUANTITY ---------- */

    .product-compat {
      color: var(--color-text-soft);
      margin-top: var(--space-3); /* extra ruimte erboven */
      font-size: var(--font-size-base); /* niet te klein */
    }

    .product-compat a {
      color: var(--color-accent);
    }

    .product-compat a:hover {
      text-decoration: underline;
    }

    /* ---------- QUANTITY + PRIJS ---------- */

    .product-quantity-row {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    /* quantity-kiezer */

    .qty-stepper {
      display: inline-flex;
      align-items: stretch;
      border-radius: 999px;
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      overflow: hidden;
    }

    .qty-stepper__btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
    }

    .qty-stepper__input {
      width: 54px;
      height: 40px;
      border: none;
      border-left: 1px solid var(--color-border-subtle);
      border-right: 1px solid var(--color-border-subtle);
      text-align: center;
      font-size: var(--font-size-base);
      appearance: textfield;
    }

    .qty-stepper__input::-webkit-outer-spin-button,
    .qty-stepper__input::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none;
    }

    .qty-stepper__btn:disabled {
      cursor: not-allowed;
      opacity: 0.4;              /* optioneel maar sterk aanbevolen */
    }

    /* prijs naast de quantity */

    .product-main__price > div:first-child {
      font-size: var(--font-size-base); /* 1 rol voor € 1,75 */
    }

    .product-main__price > div:first-child strong {
      font-size: inherit;
    }

    .product-main__price > div:last-child {
      font-size: var(--font-size-sm);   /* excl. btw-regel kleiner */
      color: var(--color-text-soft);
    }

    /* ---------- OP VOORRAAD + CTA ---------- */

    .product-main__cta-row {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      width: 100%;
    }

    /* “Op voorraad” pill links */

    .product-stock {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(34, 197, 94, 0.08);
      font-size: var(--font-size-base);
      color: var(--color-primary-dark);
      flex: 0 0 auto;
    }

    .product-stock__dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--color-primary);
    }

    .product-stock--warning .product-stock__dot {
      background: #f39c12; /* oranje */
    }

    .product-stock--danger .product-stock__dot {
      background: var(--color-danger); /* rood, alleen indien nodig */
    }

    .product-stock--ok      { background: #eef8f0; color: var(--color-primary); }
    .product-stock--warning { background: #fff6e8; color: #f39c12; }
    .product-stock--danger  { background: #ffecec; color: var(--color-danger); }

    /* grote groene knop */

    .btn--add-to-cart {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-1_5);
      min-height: 48px;
      padding-inline: var(--space-4);
      background: var(--color-primary); /* zelfde groen als plus-knop */
      color: var(--color-text-invert);
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font-weight: var(--font-weight-semibold);
      flex: 1 1 auto; /* vult rest van de rij */
    }

    .btn--add-to-cart:hover {
      background: var(--color-primary-dark);
    }

    .btn--add-to-cart i {
      font-size: 18px;
    }

    /* ---------- USP's ---------- */

    .pdp-usps {
      margin-top: var(--space-2);
      margin-bottom: 0;
      list-style: none;
      padding: 0;
    }

    .pdp-usps__item {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-size: var(--font-size-base);
      color: var(--color-text-soft);
      margin-bottom: 4px;
    }

    .pdp-usps__item:last-child {
      margin-bottom: 0;
    }

    .pdp-usps__item i {
      margin-top: 3px;
      font-size: 13px;
      color: var(--color-primary);
    }

    /* -----------------------------------------
       ONDERSTE DEEL: omschrijving + specs
       ----------------------------------------- */

    .product-main__bottom {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
      gap: var(--space-section);
    }

    @media (max-width: 768px) {
      .product-main__bottom {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-section-sm);      /* dit is de “verticale” afstand op mobiel */
      }
    }

    /* typografie & spacing voor beschrijving */

    .product-description h2 {
      font-size: var(--font-size-xl); /* duidelijk groter */
      font-weight: var(--font-weight-semibold);
      margin-top: var(--space-4);
      margin-bottom: var(--space-1_5);
    }

    .product-description h2:first-child {
      margin-top: 0;
    }

    .product-description p {
      margin-top: 0;
      margin-bottom: var(--space-2);
    }

    .product-description ul {
      margin-top: 0;
      margin-bottom: var(--space-2);
      padding-left: 1.2rem;
    }

    /* productspecificaties rechts – tabelstijl */

    .product-specs {
      padding: var(--space-4);
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      font-size: var(--font-size-base);
    }

    .product-specs__title {
      font-weight: var(--font-weight-semibold);
      margin-bottom: var(--space-2);
      font-size: var(--font-size-base);
    }

    .product-specs__rows {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      row-gap: 8px;
      column-gap: var(--space-3);
    }

    .product-specs__label {
      color: var(--color-text-soft);
    }

    .product-specs__value {
      color: var(--color-text-main);
    }

    .product-printers__title {
      font-weight: var(--font-weight-semibold);
      margin-bottom: var(--space-1);
      font-size: var(--font-size-base);
    }

    .product-printers a {
      display: block;
      color: var(--color-accent);
    }

    /* -----------------------------------------
       RESPONSIVE
       ----------------------------------------- */

    @media (max-width: 992px) {
      .page-section--product {
        padding-top: var(--space-4);
        padding-bottom: var(--space-5);
      }

      .product-main {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
      }

      .product-main__info {
        padding: var(--space-3);
      }

      .product-main__bottom {
        grid-template-columns: minmax(0, 1fr);
      }

      /* als specs onder de omschrijving komen: geen card-stijl */
      .product-specs {
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
      }
    }

    @media (max-width: 640px) {
      .product-main__image-wrapper {
        padding: var(--space-3) 0;
      }

      .product-main__cta-row {
        flex-direction: column;
        align-items: stretch;
      }

      .btn--add-to-cart {
        width: 100%;
      }
    }

    /* ==============================
       PRODUCT RAIL
       ============================== */

    .page-section,
    .u-container,
    .info-layout,
    .info-toc {
      overflow: visible !important;
    }

    .product-rail {
      max-width: var(--max-width-page);
      margin-inline: auto;
      margin-top: var(--space-section);
    }

    @media (max-width: 768px) {
      .product-rail {
        margin-top: var(--space-section-sm);
      }
    }

    /* header: titel + pijlen */
    .product-rail__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-3);
    }

    .product-rail__title {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      margin: 0;
    }

    /* pijlen */
    .product-rail__nav {
      display: flex;
      gap: var(--space-2);
    }

    .product-rail__btn {
      width: 36px;
      height: 36px;
      border: 1px solid var(--color-border-subtle);
      border-radius: 50%;
      background: var(--color-surface);
      color: var(--color-text-main);
      cursor: pointer;
      line-height: 1;
    }

    .product-rail__btn:disabled {
      opacity: 0.35;
      cursor: default;
    }

    /* viewport laat hover/shadow door */
    .product-rail__viewport{
      overflow-x: clip;   /* of hidden */
      overflow-y: visible; /* optioneel */
    }

    /* de daadwerkelijke scroller */
    .product-rail__track {
      display: flex;
      gap: var(--space-4);

      overflow-x: auto;
      overflow-y: hidden;

      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;

      padding-bottom: var(--space-3);
    }

    /* cards: exact dezelfde styling als categorie */
    .product-rail__track .product-card {
      flex: 0 0 260px; /* vaste cardbreedte */
    }

    /* optioneel: iets smaller op tablet */
    @media (max-width: 992px) {
      .product-rail__track .product-card {
        flex-basis: 240px;
      }
    }

    /* mobiel: cards blijven cards (géén lijst) */
    @media (max-width: 640px) {
      .product-rail__track .product-card {
        flex-basis: 60%;
      }
    }

    /* 8D Info page layout */
    .info-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: var(--space-8);
      align-items: start;
    }

    .info-main { min-width: 0; }

    /* TOC panel: zelfde “surface/card” gevoel als filter-panel */
    .info-toc .toc-panel {
      background: var(--color-surface);
      border-radius: var(--radius-lg);
      border: 1px solid var(--color-border-subtle);
      box-shadow: 0 6px 18px rgba(0,0,0,.06);
      padding: var(--space-4);
      position: sticky;
      top: 96px; /* match met uw fixed header; pas aan indien nodig */
      max-height: calc(100vh - 120px);
      overflow: auto;
    }

    .toc-title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: var(--space-3);
    }

    .toc-list { list-style: none; padding: 0; margin: 0; }
    .toc-list li { margin: 6px 0; line-height: 1.35; }

    .toc-list a {
      color: var(--color-text);
      text-decoration: none;
    }
    .toc-list a:hover { text-decoration: underline; }
    .toc-list a.is-active { font-weight: 700; text-decoration: underline; }

    /* WYSIWYG spacing (als u nog geen algemene WYSIWYG rules heeft) */
    .wysiwyg p { margin: 0 0 12px; }
    .wysiwyg ul,
    .wysiwyg ol { margin: 0 0 16px 1.25rem; padding-left: 1rem; }
    .wysiwyg li { margin: 4px 0; }

    .info-toc {
      position: sticky;
      top: 96px;           /* uw header offset */
      align-self: start;
    }

    .info-toc .toc-panel {
      position: static;    /* panel zelf niet sticky */
    }

    /* Responsive: TOC onder of uit */
    @media (max-width: 1100px) {
      .info-layout { grid-template-columns: 1fr; }
      .info-toc { display: none; } /* of onder content zetten als u wilt */
    }

    /* =========================================
       8E Account Login (account/login.tpl)
       ========================================= */

    .page-section--account-login .page-header{
      margin-bottom: var(--space-5);
    }

    .alert{
      border-radius: var(--radius-lg);
      padding: 12px 14px;
      border: 1px solid var(--color-border-subtle);
      margin-bottom: var(--space-3);
      background: var(--color-surface);
      color: var(--color-text-main);
    }

    .alert--success{
      background: rgba(34, 197, 94, 0.08);
      border-color: rgba(34, 197, 94, 0.25);
    }

    .alert--warning{
      background: rgba(239, 68, 68, 0.08);
      border-color: rgba(239, 68, 68, 0.25);
    }

    .auth-alert{
      border-radius: var(--radius-md);
      padding: 12px 14px;
      font-size: var(--font-size-sm);
      border: 1px solid transparent;
      margin-bottom: var(--space-3);
    }

    .auth-alert--success{
      background: rgba(34, 197, 94, 0.08);
      border-color: rgba(34, 197, 94, 0.25);
      color: var(--color-primary-dark);
    }

    .auth-alert--error{
      background: rgba(239, 68, 68, 0.08);
      border-color: rgba(239, 68, 68, 0.25);
      color: var(--color-danger);
    }

    .auth-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
      align-items: start;
    }

    @media (max-width: 900px){
      .auth-grid{
        grid-template-columns: 1fr;
      }
    }

    .auth-grid { align-items: stretch; }

    .auth-card {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .auth-card__cta,
    .auth-actions {
      margin-top: auto;
    }

    .auth-card{
      background: var(--color-bg-softer);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
    }

    .auth-card__title{
      margin: 0 0 var(--space-3);
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-main);
    }

    .auth-card__body{
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .auth-card__cta{
      margin-top: var(--space-3);
    }

    .auth-form{
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .auth-field{
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .auth-label{
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-main);
    }

    .auth-input{
      height: 42px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      padding: 0 14px;
      outline: none;
    }

    .auth-input:focus{
      border-color: var(--color-accent);
      box-shadow: 0 0 0 1px var(--color-accent);
      outline: none;
    }

    .auth-links{
      margin-top: -4px;
    }

    .auth-link{
      color: var(--color-accent);
    }

    .auth-link:hover{
      text-decoration: underline;
    }

    .auth-actions{
      margin-top: var(--space-2);
    }

    /* Button variant: primary */
    .btn--primary{
      background: var(--color-primary);
      color: var(--color-text-invert);
      border-color: var(--color-primary);
    }

    .btn--primary:hover{
      background: var(--color-primary-dark);
      border-color: var(--color-primary-dark);
      transform: translateY(-1px);
    }

    /* Input met inline toggle */
    .auth-input-wrap {
      position: relative;
      width: 100%;
    }

    .auth-input-wrap .auth-input{
      padding-right: 52px; /* ruimte voor de icon-badge */
      width: 100%;
    }

    /* Hergebruik .icon-badge, alleen positionering/maat bij login */
    .auth-input-wrap .auth-toggle.icon-badge{
      position: absolute;
      border: none;
      right: 7px;
      top: 50%;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
    }

    /* focus moet consistent blijven: laat input focus leidend zijn */
    .auth-input-wrap .auth-toggle.icon-badge:focus{
      outline: none;
      box-shadow: 0 0 0 2px var(--color-accent);
    }

    /* =========================================
       8F Account Forgotten Password (account/forgotten.tpl)
       ========================================= */

    .page-section--account-forgotten .page-header{
      margin-bottom: var(--space-5);
    }

    /* 1 kolom, netjes gecentreerd zoals de login-cards */
    .page-section--account-forgotten .auth-grid{
      display: grid;
      grid-template-columns: minmax(0, 720px);
      justify-content: center;
      gap: var(--space-5);
    }

    /* Buttons: terug links, verder rechts */
    .page-section--account-forgotten .auth-actions--split{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      margin-top: var(--space-4);
    }

    /* Captcha mag niet de layout kapot duwen */
    .page-section--account-forgotten .auth-card iframe,
    .page-section--account-forgotten .auth-card .g-recaptcha{
      max-width: 100%;
    }

    /* =========================================
       8G Status page
       ========================================= */
/* =========================================
   Status bestelling — pixel-perfect layout
   ========================================= */

.status-page{
  margin-top: var(--space-4);

  /* Pixel-tuning (alleen deze 6 aanpassen als u 1–2px wilt schuiven) */
  --tl-x: 16px;               /* x-positie lijn */
  --marker-size: 14px;        /* bol diameter */
  --marker-ring: 6px;         /* “gat” rondom bol */
  --event-left-pad: 44px;     /* content inspringing t.o.v. bol/lijn */
  --marker-top: 3px;         /* y-positie bol binnen event (maakt verticale uitlijning exact) */
  --events-gap: 32px;         /* afstand tussen events (vertical rhythm) */

  /* Interne rhythm per event */
  --gap-title-time: 6px;
  --gap-time-text: 6px;
  --gap-text-cta: 14px;
}

/* Layout */
.status-page__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 991px){
  .status-page__grid{ grid-template-columns: 1fr; }
}

/* Cards */
.status-card{
  background: var(--color-bg-softer);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.status-card__body{
  padding: var(--space-6);
}

@media (max-width: 640px){
  .status-card__body{ padding: var(--space-5); }
}

/* ========== Form (alleen als $show_form) ========== */

.status-form{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.status-form__intro{
  margin: 0;
  color: var(--color-text-soft);
  line-height: 1.6;
}

.status-form__row{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-3);
  align-items: end;
}

@media (max-width: 767px){
  .status-form__row{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

.status-form__field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-form__label{
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
}

.status-form__input{
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  padding: 0 14px;
  outline: none;
}

.status-form__input:focus{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.status-form__row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.status-form__row > *{
  min-width: 0; /* cruciaal bij grid/flex overflow */
}

/* knop mag niet buiten de grid */
.status-form__row .btn,
.status-form__row button,
.status-form__row input[type="submit"]{
  max-width: 100%;
}

/* ========== Timeline (pixel-perfect) ========== */

.status-timeline{
  position: relative;
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--events-gap);
}

/* Verticale lijn */
.status-timeline::before{
  content: "";
  position: absolute;
  left: var(--tl-x);
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: var(--color-border-subtle);
  border-radius: 2px;
}

/* Event: vaste inspringing zodat marker nooit overlap kan geven */
.status-event{
  position: relative;
  padding-left: var(--event-left-pad);
}

/* Marker: absolute + vaste top => altijd exact verticaal uitgelijnd */
.status-event__marker{
  position: absolute;
  left: var(--tl-x);
  top: var(--marker-top);
  transform: translateX(-50%);
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 999px;
  background: var(--color-border-soft);
  box-shadow: 0 0 0 var(--marker-ring) var(--color-bg-softer);
}

/* Kleuren per status (correcte semantiek) */
.status-event--success .status-event__marker,
.status-event--ok .status-event__marker{
  background: var(--color-primary);          /* groen */
}

.status-event--neutral .status-event__marker{
  background: var(--color-border-soft);      /* grijs */
}

.status-event--info .status-event__marker{
  background: var(--color-accent);           /* accent */
}

.status-event--muted .status-event__marker{
  background: var(--color-text-subtle);      /* lichtgrijs */
}

.status-event--danger .status-event__marker{
  background: var(--color-danger);           /* rood */
}

/* Content */
.status-event__content{ min-width: 0; }

/* Typografie + spacing (100% consistent) */
.status-event__title{
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
  line-height: 1.35;
}

.status-event__time{
  margin: var(--gap-title-time) 0 0 0;
  font-size: var(--font-size-base);
  color: var(--color-text-subtle);           /* subtieler */
  line-height: 1.4;
}

.status-event__text{
  margin: var(--gap-time-text) 0 0 0;
  color: var(--color-text-soft);
  line-height: 1.65;
}

/* CTA */
.status-event__cta{
  margin-top: var(--gap-text-cta);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.status-event__code{
  font-size: var(--font-size-base);
  color: var(--color-text-main);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  padding: 2px 0;
}

/* ========== Buttons ========== */
.btn--pill{ border-radius: var(--radius-pill); }

.btn--accent{
  background: var(--color-danger);
  color: var(--color-text-invert);
  border-color: var(--color-danger);
}

.btn--accent:hover{
  background: #dc2626;
  border-color: #dc2626;
  transform: translateY(-1px);
}

.btn--soft{
  background: rgba(17,24,39,.06);
  border-color: transparent;
  color: var(--color-text-main);
}

.btn--soft:hover{ background: rgba(17,24,39,.10); }

/* ========== Side card (Bestelinformatie) ========== */

.status-side__title{
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
}

.status-side__dl{
  margin: 0;
  display: block;
}

.status-side__dl dt{
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-soft);
  line-height: 1.25;
}

.status-side__dl dd{
  margin: 4px 0 var(--space-3) 0;
  font-size: var(--font-size-base);
  color: var(--color-text-main);
  line-height: 1.6;
}

/* laatste dd mag geen extra bodemruimte toevoegen (symmetrie card padding) */
.status-side__dl dd:last-child{ margin-bottom: 0; }

.status-side__hint{
  margin-top: var(--space-5);
  color: var(--color-text-soft);
  line-height: 1.6;
}

    /* =========================================
       8H. Artikelen
       ========================================= */
/* Artikelcategorie – rustige kaartweergave */

.article-row {
    max-width: var(--max-width-page);
    margin-inline: auto;
    margin-top: var(--space-section);
}

.article-row__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}
.article-category { margin: 0 auto; }
.article-category__title { margin: var(--space-3) 0 var(--space-5); }
.article-category__intro { margin: 0 0 var(--space-6); color: var(--color-text-soft); }

.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.article-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-4);
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.article-card:hover {
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.article-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-softer);
}

.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-card__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-md);
  margin-top: var(--space-2);
  line-height: 1.25;
}

.article-card__title a { text-decoration: none; color: inherit; }
.article-card__title a:hover { text-decoration: underline; text-underline-offset: 2px; }

.article-card__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-2);
}

.article-card__excerpt {
  margin: 0 0 var(--space-3);
  color: var(--color-text-soft);
  line-height: 1.55;
}

.article-card__readmore {
  display: inline-block;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--color-accent);
}

.article-card__readmore:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.row-margin {
  margin-left: var(--space-2_5);
  margin-top: calc(var(--space-6) * -1);
}

/* Responsief: twee kolommen vanaf tablet, drie bij breed */
@media (min-width: 767px) {
  .article-list { grid-template-columns: 1fr 1fr; }
  .article-card { grid-template-columns: 160px 1fr; }
}
@media (min-width: 1100px) {
  .article-list { grid-template-columns: 1fr 1fr 1fr; }
  .article-card { grid-template-columns: 1fr; }
  .article-card__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
  .row-margin { margin-left: 0; }
}

/* --- HARD FIX voor modulekaarten die verticaal gecentreerd blijven --- */

/* 1) Zorg dat theme-wrappers (box/rows) niets centreren */
.article-latest .box,
.article-latest .box-content,
.article-latest .row,
.article-latest .module,
.article-latest .module > div {
  display: block;
  align-items: stretch;
  vertical-align: top;
}

/* 2) UL en LI expliciet als grid/blokken, geen table-cells */
.article-latest .article-list {
  display: grid;
}
.article-latest .article-list > li {
  display: block;
  vertical-align: top;
}

/* 3) Kaart zelf: nooit centreren */
.article-latest .article-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: start;
}

/* 4) Beide grid-children dwingen we naar boven */
.article-latest .article-card > * {
  align-self: start;
}

/* 5) Body: kolomlayout, titel boven, niets duwt naar midden/onder */
.article-latest .article-card__body,
.article-latest .article-card > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
}

/* 6) Excerpt mag NIET “groeien” (dat duwt dingen) */
.article-latest .article-card__excerpt {
  flex: 0 0 auto;
  margin: 0 0 var(--space-3);
}

/* 7) Readmore gewoon onder de excerpt, geen auto-push */
.article-latest .article-card__readmore {
  margin-top: var(--space-2);
}

/* 8) Afbeelding: 3:2 en top aligned */
.article-latest .article-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  align-self: start;
}
.article-latest .article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 9) Desktop kolommen gelijk aan categorie */
@media (min-width: 767px) {
  .article-latest .article-card { grid-template-columns: 160px 1fr; }
}
@media (min-width: 1100px) {
  .article-latest .article-list { grid-template-columns: 1fr 1fr 1fr; }
  .article-latest .article-card { grid-template-columns: 1fr; }
  .article-latest .article-card__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 1099px) {
  .article-latest .article-card:last-child { display:none; }
}

/* =========================
   Article page (detail)
   ========================= */

.article {
  /* Binnen u-container: houd leesbreedte prettig zonder “hard” te wringen */
  max-width: var(--measure-article, 76ch);
  margin-inline: auto;
}

.article-meta {
  margin-top: var(--space-2, 8px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
  color: var(--color-text-muted, currentColor);
  font-size: var(--font-size-sm, 0.95rem);
}

.article-meta__sep {
  opacity: var(--opacity-muted, 0.6);
}

.article-media {
  margin: var(--space-6, 24px) 0;
}

.article-media__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card, 16px);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.10));
  background: var(--color-surface, transparent);
}

/* Content typography */
.article-content {
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-base, 1.65);
}

.article-content p {
  margin: 0 0 var(--space-4, 16px);
}

.article-content h2,
.article-content h3 {
  margin: var(--space-6, 24px) 0 var(--space-3, 12px);
  line-height: var(--line-height-tight, 1.25);
}

.article-content h2 {
  font-size: var(--font-size-xl, 1.35rem);
}

.article-content h3 {
  font-size: var(--font-size-lg, 1.15rem);
}

.article-content a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset, 2px);
}

.article-content ul,
.article-content ol {
  margin: 0 0 var(--space-4, 16px);
  padding-left: var(--space-6, 24px);
}

.article-content li {
  margin: 0 0 var(--space-2, 8px);
}

/* Uw eerdere eis: genummerde lijst met decimal, nette inspringing */
.article-content ol {
  list-style: decimal;
  padding-left: var(--space-6, 24px);
}

.article-content ol li {
  margin-bottom: var(--space-2, 8px);
}

.article-content blockquote {
  margin: var(--space-6, 24px) 0;
  padding: var(--space-4, 16px);
  border-left: 3px solid var(--color-border, rgba(0, 0, 0, 0.14));
  background: var(--color-surface-soft, rgba(0, 0, 0, 0.03));
  border-radius: var(--radius-card, 16px);
}

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


    /* =========================================
       8I Merkenrij
       ========================================= */

.brands-row{ margin:90px 0 40px; }
.brands-note{ margin:0 0 10px; font-size:14px; color:#7b8693; text-align:center; }

.brands-row__list{
  display:flex; gap:16px; list-style:none; margin:0; padding:0;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  align-items:center; scrollbar-width:none;
}
.brands-row__list::-webkit-scrollbar{ display:none; }

.brands-row__list li{
  --w:clamp(80px,8vw,120px);
  --h:clamp(32px,4vw,46px);
  flex:0 0 auto; width:var(--w); height:var(--h);
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px; background:#fff;
  padding:6px 10px; overflow:hidden;
  transition:background-color .2s ease, border-color .2s ease;
}
.brands-row__list li:hover, .brands-row__list li:focus-within{
  background-color:#fafafa; border-color:rgba(0,0,0,.12);
}
.brands-row__list a{ display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; }

.brands-row__list img{
  display:block; margin:0 auto;
  max-height:calc(100% - 8px); max-width:calc(100% - 10px);
  width:auto; height:auto; object-fit:contain;
  filter:grayscale(1) opacity(.9);
  transition:filter .25s ease, transform .25s ease;
}
.brands-row__list li:hover img, .brands-row__list li:focus-within img{ filter:none; }
.brands-row__list li[data-scale="sm"] img{ transform:scale(.92); }
.brands-row__list li[data-darken] img{ filter:grayscale(1) brightness(0) invert(.85); }
.brands-row__list li[data-darken]:hover img, .brands-row__list li[data-darken]:focus-within img{ filter:none; }

@media(max-width:480px){
  .brands-row__list{ gap:12px; }
  .brands-row__list li{ --w:clamp(78px,42vw,110px); --h:clamp(30px,14vw,44px); }
}

/* =========================================
   8J. Account dashboard (account/account.tpl)
   ========================================= */

.page-section--account .page-header{
  margin-bottom: var(--space-5);
}

.account-dashboard{
  display: block;
}

.account-tiles{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 980px){
  .account-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .account-tiles{ grid-template-columns: 1fr; }
}

.account-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);

  min-height: 150px;
  padding: var(--space-6) var(--space-5);

  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);

  text-decoration: none;
  color: var(--color-text-main);

  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.account-tile:hover{
  background: var(--color-bg-softer);
  border-color: var(--color-border-soft);
  transform: translateY(-1px);
}

.account-tile__icon{
  width: 74px;
  height: 74px;
  border-radius: var(--radius-pill);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-header-dark);
}

.account-tile__icon i{
  font-size: 34px;
  opacity: .95;
}

.account-tile__label{
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-soft);
  text-align: center;
}

.account-actions{
  margin-top: var(--space-6);
}

.account-links{
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.account-links__title{
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
  margin-bottom: var(--space-3);
}

.account-links__list{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 14px;
}

.account-links__list a{
  color: var(--color-accent);
  text-decoration: none;
}

.account-links__list a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================
   8K Account Edit (account/edit.tpl)
   ========================================= */

.page-section--account-edit .page-header{
  margin-bottom: var(--space-5);
}

.form-required{
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}

.form-error{
  margin-top: 6px;
  font-size: var(--font-size-base);
  color: var(--color-danger);
}

.form-actions{
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (max-width: 560px){
  .form-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions .btn{
    width: 100%;
  }
}

/* =========================================
   8L Account Address Book (account/address_list.tpl)
   ========================================= */

.page-section--account-addresses .page-header{
  margin-bottom: var(--space-5);
}

.address-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.address-card{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);

  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.address-card__text{
  color: var(--color-text-main);
  line-height: 1.6;
}

.address-card__actions{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.address-actions{
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (max-width: 700px){
  .address-card{
    flex-direction: column;
    align-items: stretch;
  }
  .address-card__actions{
    justify-content: flex-start;
  }
  .address-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .address-actions .btn{
    width: 100%;
  }
}

.address-empty{
  margin-top: var(--space-2);
  color: var(--color-text-soft);
}

/* =========================================
   8M Account Wishlist (account/wishlist.tpl)
   ========================================= */

.page-section--account-wishlist .page-header{
  margin-bottom: var(--space-5);
}

.wishlist-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.wishlist-item{
  display: grid;
  grid-template-columns: 92px 1fr 170px 160px;
  gap: var(--space-4);
  align-items: center;

  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.wishlist-item__img{
  width: 92px;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-page);
}

.wishlist-item__imgph{
  display: block;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-soft);
}

.wishlist-item__name{
  display: inline-block;
  color: var(--color-text-main);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  margin-bottom: 4px;
}

.wishlist-item__name:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wishlist-item__meta{
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  line-height: 1.5;
}

.wishlist-item__meta-label{
  color: var(--color-text-subtle);
}

.wishlist-price{
  text-align: right;
  line-height: 1.2;
}

.wishlist-price__old{
  display: block;
  color: var(--color-text-subtle);
  text-decoration: line-through;
  font-size: var(--font-size-sm);
}

.wishlist-price__new{
  display: block;
  color: var(--color-text-main);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}

.wishlist-item__actions{
  display: flex;
  justify-content: flex-end;
}

.wishlist-empty{
  margin-top: var(--space-2);
  color: var(--color-text-soft);
}

/* Responsive */
@media (max-width: 900px){
  .wishlist-item{
    grid-template-columns: 92px 1fr;
    grid-template-areas:
      "img main"
      "price actions";
    align-items: start;
  }

  .wishlist-item__media{ grid-area: img; }
  .wishlist-item__main{ grid-area: main; }
  .wishlist-item__price{ grid-area: price; }
  .wishlist-item__actions{ grid-area: actions; justify-content: flex-end; }

  .wishlist-price{ text-align: left; }
}

@media (max-width: 560px){
  .wishlist-item{
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "main"
      "price"
      "actions";
  }

  .wishlist-item__actions .btn{
    width: 100%;
  }
}

.wishlist-item__actions{
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

@media (max-width: 560px){
  .wishlist-item__actions{
    flex-direction: column;
    align-items: stretch;
  }
  .wishlist-item__actions .btn{
    width: 100%;
  }
}

/* =========================================
   8N Account Orders (account/order_list.tpl)
   ========================================= */

.page-section--account-orders .page-header{
  margin-bottom: var(--space-5);
}

.order-list-new{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.order-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.order-card__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.order-card__meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.order-card__k{
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  margin-bottom: 2px;
}

.order-card__v{
  display: block;
  color: var(--color-text-main);
  font-weight: var(--font-weight-semibold);
}

.status-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* thumbnails */
.order-card__items{
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.order-thumb{
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-page);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.order-thumb__img{
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

.order-thumb__qty{
  position: absolute;
  right: -8px;
  top: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-header-dark);
  color: var(--color-text-invert);
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  border: 1px solid var(--color-border-subtle);
}

.order-thumb--more{
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
  background: var(--color-bg-soft);
}

/* hover tooltip via data-title */
.order-thumb:hover::after{
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;

  background: var(--color-neutral-strong);
  color: var(--color-text-invert);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
  z-index: 20;
}

.order-thumb:hover::before{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--color-neutral-strong);
  z-index: 21;
}

.order-card__actions{
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

@media (max-width: 900px){
  .order-card__meta{
    grid-template-columns: 1fr;
  }
  .order-card__actions{
    justify-content: stretch;
  }
  .order-card__actions .btn{
    width: 100%;
  }
}

.order-empty{
  margin-top: var(--space-2);
  color: var(--color-text-soft);
}

/* =========================================
   8O Account Order Info (account/order_info.tpl)
   ========================================= */

.page-section--account-order-info .page-header{
  margin-bottom: var(--space-5);
}

.order-info-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.order-info-actions{
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.order-info-blocks{
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.order-info-block{
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.order-info-row + .order-info-row{ margin-top: 10px; }

.order-info-k{
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.order-info-v{
  display: block;
  color: var(--color-text-main);
  font-weight: var(--font-weight-semibold);
}

.order-info-subtitle{
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
  margin-bottom: 8px;
}

.order-info-address{
  color: var(--color-text-soft);
  line-height: 1.6;
}

.order-items{
  margin-top: var(--space-5);
}

.order-items__head{
  display: grid;
  grid-template-columns: 2fr 1fr 90px 130px 130px 160px;
  gap: var(--space-3);
  padding: 12px 10px;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

.order-items__row{
  display: grid;
  grid-template-columns: 2fr 1fr 90px 130px 130px 160px;
  gap: var(--space-3);
  padding: 14px 10px;
  border-bottom: 1px solid var(--color-border-subtle);
  align-items: start;
}

.order-items__title{
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
}

.order-items__opt{
  margin-top: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

.order-items__opt-k{ color: var(--color-text-subtle); }

.u-right{ text-align: right; }

.order-totals{
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}

.order-totals__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.order-totals__k{ color: var(--color-text-soft); }
.order-totals__v{ color: var(--color-text-main); font-weight: var(--font-weight-semibold); }

.order-history{
  margin-top: var(--space-5);
}

.order-history__list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-history__row{
  display: grid;
  grid-template-columns: 120px 180px 1fr;
  gap: var(--space-3);
  padding: 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.order-history__date{ color: var(--color-text-subtle); font-size: var(--font-size-sm); }
.order-history__status{ color: var(--color-text-main); font-weight: var(--font-weight-semibold); }
.order-history__comment{ color: var(--color-text-soft); }

@media (max-width: 980px){
  .order-info-blocks{ grid-template-columns: 1fr; }

  .order-items__head{ display: none; }
  .order-items__row{
    grid-template-columns: 1fr;
  }
  .u-right{ text-align: left; }

  .order-history__row{
    grid-template-columns: 1fr;
  }

  .order-info-head{
    flex-direction: column;
    align-items: stretch;
  }
  .order-info-actions{
    justify-content: flex-start;
  }
}

/* =========================================
   8P Account Loyalty (account/loyalty.tpl)
   ========================================= */

.page-section--account-loyalty .page-header{
  margin-bottom: var(--space-5);
}

.loyalty-layout{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-3);
}

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

.loyalty-col--text{
  color: var(--color-text-soft);
  line-height: 1.7;
}

.loyalty-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.loyalty-table__th{
  text-align: center;
  padding: 12px 10px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border-subtle);
}

.loyalty-table__td{
  text-align: center;
  padding: 14px 10px;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-main);
}

.loyalty-table__tr:first-child .loyalty-table__td{
  border-top: 0;
}

.loyalty-table__tr--current .loyalty-table__td{
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* =========================================
   8Q Account Register (account/register.tpl)
   ========================================= */

.page-section--account-register .page-header{
  margin-bottom: var(--space-5);
}

.auth-text{
  color: var(--color-text-soft);
  line-height: 1.6;
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.auth-divider{
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-6) 0;
}

.recaptcha-wrap{
  display: block;
}

/* =========================================
   8R Register extras (country datalist + VAT + modal)
   ========================================= */

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

.form-hint{
  margin-top: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.vat-msg{
  margin-top: 8px;
  font-size: var(--font-size-sm);
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-soft);
  color: var(--color-text-main);
}
.vat-msg--ok{
  border-color: var(--color-primary);
}
.vat-msg--bad{
  border-color: var(--color-danger);
}

.vatnotice-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  z-index: 999;
}

.vatnotice-modal{
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  z-index: 1000;
  padding: var(--space-6);
}

.vatnotice-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-3);
}

.vatnotice-modal__title{
  margin:0;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
}

.vatnotice-modal__close{
  border: 0;
  background: transparent;
  color: var(--color-text-main);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.vatnotice-modal__text{
  margin-top: var(--space-4);
  color: var(--color-text-soft);
  line-height: 1.6;
}

.vatnotice-modal__actions{
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.vatnotice-modal__dontask{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
}

.page-section--success .page-header{ margin-bottom: var(--space-5); }

.auth-card--success{ text-align: left; }

.success-icon{
  width:56px; height:56px;
  margin:0 0 var(--space-4);
  border-radius:50%;
  background: var(--color-primary);
  color: var(--color-text-invert);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight: var(--font-weight-semibold);
}

.success-content{ color: var(--color-text-soft); line-height:1.7; }

.success-ship__addr{
  margin-top: var(--space-4);
  padding: var(--space-4);
  border:1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  line-height:1.6;
}

.success-no-mail{
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.success-no-mail__title{
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger);
  margin-bottom: 10px;
}

.success-steps{
  margin:0;
  padding-left: 1.25rem;
  color: var(--color-text-soft);
  line-height: 1.7;
}

/* =========================================
   8S. CART (checkout/cart) – nieuwe template
   Scope: alleen .page-section--checkout-cart
   ========================================= */
/* =========================================
   CART (checkout/cart) – nieuwe template
   Scope: alleen .page-section--checkout-cart
   ========================================= */

.page-section--checkout-cart .cart-layout{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 980px){
  .page-section--checkout-cart .cart-layout{
    grid-template-columns: 1fr;
  }
}

/* Links (lijst) */
.page-section--checkout-cart .cart-main{ min-width: 0; }

.page-section--checkout-cart .cart-head{
  display: grid;
  grid-template-columns: 1fr 140px 80px 34px; /* + remove kolom */
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.page-section--checkout-cart .cart-head__qty,
.page-section--checkout-cart .cart-head__total{
  text-align: right;
}

@media (max-width: 767px){
  .page-section--checkout-cart .cart-head{ display: none; }
}

/* List */
.page-section--checkout-cart .cart-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Row */
.page-section--checkout-cart .cart-item-row{
  display: grid;
  grid-template-columns: 1fr 140px 80px 34px; /* + remove kolom */
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  align-items: center;
}

.page-section--checkout-cart .cart-item-row__product{
  display: flex;
  gap: var(--space-3);
  min-width: 0;
}

.page-section--checkout-cart .cart-item-row__img{
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-subtle);
}

.page-section--checkout-cart .cart-item-row__img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-section--checkout-cart .cart-item-row__info{ min-width: 0; }

.page-section--checkout-cart .cart-item-row__name{
  display: block;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.page-section--checkout-cart .cart-item-row__name:hover{ text-decoration: underline; }

.page-section--checkout-cart .cart-item-row__meta{
  margin: var(--space-2) 0 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-section--checkout-cart .cart-item-row__meta-k{ color: var(--color-text-subtle); }

.page-section--checkout-cart .cart-item-row__unit{ margin-top: var(--space-2); }

.page-section--checkout-cart .cart-item-row__stock-warn{
  margin-top: var(--space-1);
  color: var(--color-warning);
  font-size: var(--font-size-sm);
}

/* Qty stepper (zelfde concept als productpagina) */
.page-section--checkout-cart .cart-item-row__qty{ display:flex; justify-content:flex-end; }

.page-section--checkout-cart .cart-qty-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
/* Qty stepper (cart-only classes, zelfde look) */
.page-section--checkout-cart .cart-qty-stepper{
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-page);
  overflow: hidden;
  height: 44px;
}

.page-section--checkout-cart .cart-qty-stepper__btn{
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-main);
}

.page-section--checkout-cart .cart-qty-stepper__btn:hover{
  background: rgba(17,24,39,.06);
}

.page-section--checkout-cart .cart-qty-stepper__input{
  width: 42px;
  height: 44px;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--font-size-base);
  -moz-appearance: textfield;
}

.page-section--checkout-cart .cart-qty-stepper__input::-webkit-outer-spin-button,
.page-section--checkout-cart .cart-qty-stepper__input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.page-section--checkout-cart .cart-qty-stepper__input:focus{
  outline: none;
}

.page-section--checkout-cart .cart-qty-stepper:has(.cart-qty-stepper__input:focus){
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Loading state tijdens AJAX refresh */
.page-section--checkout-cart{
  transition: opacity .12s ease;
}

.page-section--checkout-cart.is-cart-updating{
  opacity: .72;
  pointer-events: none; /* voorkomt dubbelklikken tijdens update */
}

/* Kleine spinner rechts in de checkout-knop tijdens updaten */
.page-section--checkout-cart .cart-summary__btn{
  position: relative;
}

.page-section--checkout-cart.is-cart-updating .cart-summary__btn{
  padding-right: 44px;
}

.page-section--checkout-cart.is-cart-updating .cart-summary__btn::after{
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: cartSpin .7s linear infinite;
}

@keyframes cartSpin{
  to{ transform: rotate(360deg); }
}


.page-section--checkout-cart .cart-qty__update{
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-soft);
  cursor: pointer;
}

.page-section--checkout-cart .cart-qty__update:hover{
  background: rgba(17,24,39,.06);
  border-color: var(--color-border-soft);
}

/* Total */
.page-section--checkout-cart .cart-item-row__total{ text-align: right; }
.page-section--checkout-cart .cart-item-row__total-price{
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* Remove (helemaal rechts) */
.page-section--checkout-cart .cart-item-row__removecol{
  display: flex;
  justify-content: flex-end;
}

.page-section--checkout-cart .cart-item-row__remove{
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  color: var(--color-text-subtle);
  font-size: 22px;
  line-height: 1;
}

.page-section--checkout-cart .cart-item-row__remove:hover{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.25);
  color: var(--color-danger);
}

/* Mobile */
@media (max-width: 767px){
  .page-section--checkout-cart .cart-item-row{
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .page-section--checkout-cart .cart-item-row__qty{
    justify-content: flex-start;
  }

  .page-section--checkout-cart .cart-item-row__total{
    text-align: left;
  }

  .page-section--checkout-cart .cart-item-row__removecol{
    justify-content: flex-start;
  }
}

/* Rechts (summary) */
.page-section--checkout-cart .cart-aside{ position: relative; }

.page-section--checkout-cart .cart-summary{
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-4);
  position: sticky;
  top: var(--space-5);
}

@media (max-width: 980px){
  .page-section--checkout-cart .cart-summary{ position: static; }
}

.page-section--checkout-cart .cart-summary__title{
  margin-bottom: var(--space-3);
}

/* Totals: standaard NIET vet; alleen laatste rij vet */
.page-section--checkout-cart .cart-summary__rows{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.page-section--checkout-cart .cart-summary__row{
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: var(--font-weight-regular);
}

.page-section--checkout-cart .cart-summary__k{ color: var(--color-text-soft); }
.page-section--checkout-cart .cart-summary__v{ color: var(--color-text-main); }

.page-section--checkout-cart .cart-summary__row--grand{
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-subtle);
  font-weight: var(--font-weight-semibold);
}

.page-section--checkout-cart .cart-summary__row--grand .cart-summary__k{
  color: var(--color-text-main);
}

.page-section--checkout-cart .cart-summary__cta{ margin-top: var(--space-4); }
.page-section--checkout-cart .cart-summary__btn{
  width: 100%;
  justify-content: center;
}



    /* =========================================
       Country modal
       ========================================= */

    .country-modal { position: fixed; inset: 0; z-index: 999999; }
    .country-modal__overlay { position:absolute; inset:0; background: rgba(0,0,0,.35); }

    .country-modal__panel {
      position: relative;
      margin: 16px auto;
      width: min(980px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      background: #fff;
      border-radius: 16px;
      padding: 0;                 /* padding gaat naar head/body */
      display: flex;
      flex-direction: column;
      overflow: hidden;           /* body scrollt binnen panel */
    }

    @supports (height: 100dvh){
      .country-modal__panel{
        max-height: calc(100dvh - 32px);
      }
      @media (max-width: 480px){
        .country-modal__panel{
          max-height: calc(100dvh - 16px);
        }
      }
    }

    .country-modal__head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex: 0 0 auto;
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 1;
      padding: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eee;
    }

    .country-modal__title { font-size: 18px; }

    .country-modal__close {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid #ddd;
      background: #fff;
      display: inline-flex;
      align-items:center;
      justify-content:center;
      cursor: pointer;
    }


    .country-modal__search{
      position: relative;
      margin-bottom: var(--space-4);
    }

    .country-modal__search-input{
      width: 100%;
      height: 44px;
      padding: 0 44px 0 18px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-bg-input, #fff);
      font-size: var(--font-size-base);
      color: var(--color-text-main);
    }

    .country-modal__search-input::placeholder{
      color: var(--color-text-soft);
    }

    .country-modal__search-input:focus{
      outline: none;
      border-color: var(--color-brand);
    }

    .country-modal__search-icon{
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-text-soft);
      pointer-events: none;
    }

    .country-modal__body{
      display: flex;
      flex-direction: column;
    }

    /* zoekveld altijd volle breedte */
    .country-modal__search{
      width: 100%;
      max-width: 100%;
      margin-bottom: var(--space-4);
    }

    /* lijst mag daarna z'n eigen layout hebben */
    .country-list{
      /* laat uw bestaande grid / columns intact */
    }

    /* Country modal search — force full width */
.country-modal__search{
  width: 100%;
  max-width: 100%;
  display: block;

  /* cruciaal als een parent grid/columns gebruikt */
  grid-column: 1 / -1;
  justify-self: stretch;
}

.country-modal__search-input{
  width: 100%;
  display: block;
  height: 44px;
  padding: 11px 42px 11px 16px;

  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  outline: none;
}

.country-modal__search-input::placeholder{
  color: var(--color-text-subtle);
}

.country-modal__search-input:focus{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.country-modal__search-icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-text-subtle);
  pointer-events: none;
}

/* als u de icon in dezelfde wrapper absolute wil: */
.country-modal__search{ position: relative; }



    .country-modal__body {
      flex: 1 1 auto;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding: 12px 16px 16px;
    }

    /* De kern: lijst onder elkaar, maar in meerdere kolommen als er ruimte is */
    .country-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 10px 12px;
    }

    .country-list__link{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 12px;
      border:1px solid #e5e7eb;
      border-radius: 12px;
      text-decoration:none;
    }

    .country-list__flag{
      width: 22px;
      height: 22px;
      border-radius: 50%;
      object-fit: cover;
    }

    .country-list__iso{
      font-weight: 700;
      min-width: 28px;
    }

    .country-list__name{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (max-width: 480px){
      .country-modal__panel{
        margin: 8px auto;                    /* kleiner = meer ruimte */
        width: calc(100vw - 16px);           /* iets breder */
        max-height: calc(100vh - 16px);      /* maximale hoogte */
        border-radius: 14px;
      }

      .country-modal__head{
        padding: 12px;                       /* compacter */
        padding-bottom: 10px;
      }

      .country-modal__body{
        padding: 10px 12px 12px;             /* compacter */
      }

      .country-list{
        grid-template-columns: 1fr;          /* 1 kolom = rust + grotere tappables */
        gap: 8px;
      }

      .country-list__link{
        padding: 10px 10px;                  /* iets compacter */
      }
    }

    /* =========================================
       Cookie Consent (v9)
       ========================================= */

    .cc-backdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(2px);
      display: none;
      z-index: 9998;
    }

    .cc-modal{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
      z-index: 9999;
    }

    .cc-card{
      width: min(720px, 92vw);
      background: var(--color-surface);
      /*border: 1px solid var(--color-border-subtle);*/
      border-radius: var(--radius-lg);
      box-shadow: 0 14px 40px rgba(0,0,0,.18);
      overflow: hidden;

      /* voorkomt dat de modal hoger wordt dan het scherm */
      max-height: calc(100vh - 2 * var(--space-4));
      display: flex;
      flex-direction: column;
    }

    .cc-body{
      padding: var(--space-6);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .cc-title{
      margin: 0 0 var(--space-2) 0;
      font-size: 20px;
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-main);
    }

    .cc-desc{
      margin: 0;
      color: var(--color-text-soft);
      line-height: 1.6;
    }

    .cc-actions{
      display: flex;
      gap: var(--space-2);
      padding: var(--space-4) var(--space-6);
      border-top: 1px solid var(--color-border-subtle);
      background: var(--color-bg-softer);
      flex-wrap: wrap;
      justify-content: flex-end;
      flex-shrink: 0;
    }

    .cc-btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-pill);
      padding: 10px 16px;
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      color: var(--color-text-main);
      cursor: pointer;
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-sm);
    }

    .cc-btn:hover{
      background: var(--color-bg-soft);
      border-color: var(--color-border-soft);
    }

    .cc-btn:focus{
      outline: none;
      box-shadow: 0 0 0 1px var(--color-accent);
      border-color: var(--color-accent);
    }

    .cc-btn--primary{
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-text-invert);
    }

    .cc-btn--primary:hover{
      background: var(--color-primary-dark);
      border-color: var(--color-primary-dark);
    }

    .cc-btn--ghost{
      background: transparent;
    }

    .cc-row{
      margin-top: var(--space-4);
      padding-top: var(--space-4);
      border-top: 1px solid var(--color-border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .cc-row__title{
      margin: 0;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
    }

    .cc-row__muted{
      color: var(--color-text-subtle);
    }

    .cc-row__pill{
      color: var(--color-accent);
      font-weight: var(--font-weight-semibold);
      white-space: nowrap;
    }

    /* Switch */
    .cc-switch{
      position: relative;
      width: 46px;
      height: 28px;
      display: inline-block;
      flex: 0 0 auto;
    }

    .cc-switch input{
      position: absolute;
      opacity: 0;
      inset: 0;
      margin: 0;
    }

    .cc-switch__track{
      position: absolute;
      inset: 0;
      border-radius: var(--radius-pill);
      background: var(--color-border-soft);
      border: 1px solid var(--color-border-subtle);
      transition: background .15s ease, border-color .15s ease;
    }

    .cc-switch__dot{
      position: absolute;
      top: 50%;
      left: 4px;
      width: 20px;
      height: 20px;
      transform: translateY(-50%);
      border-radius: var(--radius-pill);
      background: var(--color-surface);
      border: 1px solid var(--color-border-subtle);
      transition: transform .15s ease;
    }

    .cc-switch input:checked ~ .cc-switch__track{
      background: rgba(37, 99, 235, .20);
      border-color: rgba(37, 99, 235, .35);
    }

    .cc-switch input:checked ~ .cc-switch__dot{
      transform: translate(18px, -50%);
    }

    .cc-switch input:focus-visible ~ .cc-switch__track{
      box-shadow: 0 0 0 1px var(--color-accent);
      border-color: var(--color-accent);
    }

    /* Mobiel */
    @media (max-width: 640px){
      .cc-body{ padding: var(--space-5); }
      .cc-actions{ padding: var(--space-3) var(--space-5); }
      .cc-actions{ justify-content: stretch; }
      .cc-actions .cc-btn{ flex: 1 1 auto; }
    }

    /* Extreem lage schermhoogte */
    @media (max-height: 520px){
      .cc-body{ padding: var(--space-4); }
      .cc-actions{ padding: var(--space-3) var(--space-4); }
    }

    /* =========================================
       9. RESPONSIVE
       ========================================= */

    /* Container padding op grote schermen */
    @media (max-width: 1350px) {
      .u-container {
        padding-left: 32px;
        padding-right: 32px;
      }
    }

    /* Productgrid: 3 kolommen tot 1200px (desktop smaller) */
    @media (max-width: 1200px) {
      .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    /* Tablet: filters bovenaan, 2 kolommen grid */
    @media (max-width: 992px) {
      .page-section {
        padding-top: var(--space-4);
        padding-bottom: var(--space-5);
      }

      .category-main {
        flex-direction: column;
        width: 100%;
        max-width: none;
        padding-inline: 0;
      }

      .category-filters,
      .category-products {
        width: 100%;
        max-width: none;
      }

      .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }

      .topbar__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
      }

      .search {
        min-width: 100%;
        margin-inline: 0;
      }

      .footer__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
      }
    }

    /* Mobiel: header/nav-footer layout + 1 kolom grid */
    @media (max-width: 768px) {
      .u-container {
        padding-inline: var(--space-3);
      }

      .site-header__topbar {
        font-size: var(--font-size-sm);
        padding-top: 4px;
        padding-bottom: 4px;
      }

      .topbar__inner {
        flex-wrap: wrap;
        row-gap: 2px;
      }

      .topbar__left {
        width: 100%;
        text-align: center;
        justify-content: center;
      }

      .topbar__right {
        width: 100%;
        justify-content: center;
        column-gap: 16px;
      }

      .header-main__inner {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        column-gap: var(--space-3);
        row-gap: var(--space-3);
      }

      .header-main__menu-toggle {
        display: inline-flex;
        order: 1;
      }

      .site-logo {
        order: 2;
        flex: 1 1 auto;
      }

      .header-main__icons {
        order: 3;
      }

      .search {
        order: 5;
        flex: 0 0 100%;
      }

      .header-main__primary {
        order: 6;
        flex: 0 0 100%;
      }

      .header-main__primary .btn {
        width: 100%;
        justify-content: center;
      }

      .site-header__nav {
        border-top: none;
        border-bottom: none;
        box-shadow: none;
      }

      .nav__inner {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding-block: var(--space-2);
      }

      .site-header__nav.nav--open {
        border-top: 1px solid var(--color-border-subtle);
        border-bottom: 1px solid var(--color-border-subtle);
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
      }

      .site-header__nav.nav--open .nav__inner {
        display: flex;
      }

      .nav__link {
        width: 100%;
      }

      .nav-mega {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        background: transparent;
        border-top: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
      }

      .nav-mega::before { display: none; }

      .nav-mega__inner {
        max-width: none;
        padding: 4px 0 8px;
      }

      .nav-mega__link {
        padding: 4px 0 4px 16px;
        font-size: var(--font-size-sm);
      }

      .footer-track__input {
        flex: 1 1 100%;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .site-header--nav-open .search,
      .site-header--nav-open .header-main__primary {
        display: none;
      }

      .product-printers {
        margin-top: var(--space-section-sm);
        padding-top: 0;
        border-top: none;
      }

    }
@media (max-width: 640px) {

  .category-products .product-card__sticker {
    position: static;          /* terug in flow */
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    margin-top: 4px;
  }

  /* 1 kolom grid (alleen categoriepagina) */
  .category-products .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* lijstweergave + horizontale separator (alleen categoriepagina) */
  .category-products .product-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-7);
    border: none;
    border-bottom: 1px solid var(--color-border-subtle);
    border-radius: 0;
    box-shadow: none;
  }

  /* hover: lijn moet blijven bestaan, geen schaduw/transform (alleen categoriepagina) */
  .category-products .product-card:hover {
    box-shadow: none;
    transform: none;
    border-bottom-color: var(--color-border-subtle);
  }

  /* links + midden samen (alleen categoriepagina) */
  .category-products .product-card__link {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    flex: 1 1 auto;
  }

  /* afbeelding links, verticaal gecentreerd in het vak (alleen categoriepagina) */
  .category-products .product-card__image {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-2);
  }

  .category-products .product-card__image img {
    max-height: 80px;
    width: auto;
    border-radius: 12px;
  }

  /* tekstblok in het midden (alleen categoriepagina) */
  .category-products .product-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* geen gereserveerde ruimte meer (alleen categoriepagina) */
  .category-products .product-card__topline {
    margin-bottom: 0px;
    min-height: 0;
  }

  .category-products .product-card__topline:empty {
    display: none;
    margin-bottom: 0;
  }

  /* prijs + plus-knop rechts (alleen categoriepagina) */
  .category-products .product-card__footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    align-self: stretch;
  }

  .category-products .product-card__price-row {
    margin: 0;
  }

  /* deze twee zijn categoriepagina-specifiek; laat ze staan */
  .category-products-bar {
    justify-content: space-between;
    width: 100%;
  }

  .category-pagination {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobiel: maak de hoofdafbeelding weer een vaste thumbnail links */
@media (max-width: 640px) {
  .product-card {
    display: flex;              /* als dit al zo is, prima */
    align-items: flex-start;
    gap: 16px;                  /* pas aan naar uw tokens als nodig */
  }

  .product-card__image-wrap {
    flex: 0 0 96px;             /* BELANGRIJK: voorkomt mee-resizen */
    width: 96px;
    height: 96px;
  }

  .product-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .product-card__image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;        /* labels blijven netjes in beeld */
  }
}

/* ========== CATEGORY (mobile) – product card topline + price ==========
   Plak onderaan stylesheet.css
====================================================================== */
@media (max-width: 640px){

  /* ---------- KLEUREN: 1 rij + horizontale scroll ---------- */

  .category-products .product-card__topline{
    display: flex;          /* expliciet, zodat u niet afhankelijk bent van eerdere regels */
    flex-wrap: nowrap;      /* NIET wrappen */
    align-items: center;
    gap: 8px;
    overflow: hidden;       /* voorkomt dat kleuren buiten de kaart duwen */
    min-width: 0;
  }

  .category-products .product-card__colors{
    display: flex;          /* override inline-flex */
    flex: 1 1 auto;
    min-width: 0;           /* cruciaal voor overflow binnen flex */
    gap: 6px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .category-products .product-card__colors::-webkit-scrollbar{
    display: none;
  }

  .category-products .product-card__color-swatch,
  .category-products .product-card__color-img{
    flex: 0 0 auto;         /* swatches krimpen niet */
  }


  /* ---------- PRIJS: v.a. niet meer "zweven" bij stacked prices ---------- */

  /* Als prices gestapeld worden, moet v.a. ook in die kolom mee */
  .category-products .product-card__price-row{
    display: flex;            /* expliciet */
    flex-direction: column;   /* v.a. boven de prijs */
    align-items: flex-start;  /* links uitlijnen */
    gap: 2px;
  }

  .category-products .product-card__price-prefix{
    line-height: 1.1;
    margin: 0;
  }

  /* Sale: stack van old/new/current blijft onder elkaar */
  .category-products .price-box[data-has-sale="1"]{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    white-space: normal;
  }
}

/* FIX: mobiele categoriecards – topline mag NIET wrappen, kleuren worden scrollbaar */
@media (max-width: 640px){

  /* Topline: geen wrap, geen “extra hoogte” door 2e rij */
  .category-products .product-card__topline{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: 165px;

    /* dit voorkomt dat hij “ruimte blijft claimen” door te grote contents */
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Kleuren: 1 rij, swipebaar, mag niet de hele card oprekken */
  .category-products .product-card__colors{
    display: flex !important;
    flex-wrap: nowrap !important;

    /* sleutel: laat hem krimpen binnen flex parent */
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
  }
  .category-products .product-card__colors::-webkit-scrollbar{ display:none; }

  /* Swatches: vaste items, nooit “samenpersen” */
  .category-products .product-card__color-swatch{
    flex: 0 0 auto !important;
  }
  .category-products .product-card__color-img{
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
  }
}

/* =========================================
   Special (Aanbiedingen) – extra kolom op brede schermen
   Alleen van toepassing op product/special.tpl (page-section--special)
   ========================================= */

/* =========================================
   AANBIEDINGEN: altijd +1 kolom t.o.v. categorie (boven 640px)
   ========================================= */

/* > 1200px: categorie 4 => aanbiedingen 5 */
@media (min-width: 1201px) {
  .page-section--special .product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* 993–1200px: categorie 3 => aanbiedingen 4 */
@media (min-width: 993px) and (max-width: 1200px) {
  .page-section--special .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 641–992px: categorie 2 => aanbiedingen 3 */
@media (min-width: 641px) and (max-width: 992px) {
  .page-section--special .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px){
  #column-left{ display:none !important; }
}