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

@supports (-webkit-touch-callout: none) {
  .form-control,
  .form-control[type="password"],
  .form-control[type="email"],
  .form-control[type="text"],
  .form-control[type="search"],
  .form-control[type="tel"],
  .form-control[type="number"],
  select.form-control,
  textarea.form-control {
    font-size: 16px;
    transform: scale(0.9375);
    transform-origin: left center;
    width: 100%;
    max-width: calc(100% / 0.9375);
    flex: 1 1 auto;
    min-width: 0;
  }
}


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

    .notice{
      padding: var(--space-4);
      border-radius: var(--radius-lg);
      font-size: var(--font-size-base);
      line-height: 1.5;
      border: 1px solid var(--color-border-subtle);
      background: var(--color-bg-soft);
      color: var(--color-text-main);
      margin-bottom: var(--space-5);
    }

    /* Success */
    .notice--success{
      background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-page));
      border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border-subtle));
    }

    /* Error / warning */
    .notice--error{
      background: color-mix(in srgb, var(--color-danger) 6%, var(--color-bg-page));
      border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border-subtle));
    }

    /* Info / attention */
    .notice--info{
      background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-page));
      border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border-subtle));
    }

    .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;
      margin-top: var(--space-4);
      margin-bottom: var(--space-8);
    }

    .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(1px);
    }

    .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);
    }

/* Alleen de LPS pagination-buttons, niet de OpenCart wrapper */
.category-pagination .pagination__list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.category-pagination{
  width: 100%;
}

.category-pagination__info{
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}




    .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{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .category-pagination__info{
      margin-left: auto;
      text-align: right;
      color: var(--color-text-soft);
      font-size: var(--font-size-sm);
    }

    .category-pagination__info {
      font-size: var(--font-size-sm);
    }
/* LPS pagination layout fix */
#content .category-pagination{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100% !important;
  clear: both;
}

#content .category-pagination .pagination{
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

#content .category-pagination__info{
  margin-left: auto !important;
  text-align: right;
  white-space: nowrap;
}


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

    /* Tabs verbergen zonder display:none (blijft meetbaar) */
    .product-pack-tabs.is-adaptive-hidden{
      position: absolute;
      left: 0;
      right: 0;            /* constraint = containerbreedte */
      top: 0;
      visibility: hidden;
      pointer-events: none;
      height: 0;
      overflow: hidden;
    }

    /* Select wrapper verbergen mag wél met display:none */
    .product-pack-select-wrapper.is-adaptive-hidden{
      display: none;
    }

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

    .product-pack-select-wrapper{ position: relative; width: 100%; }
    .product-pack-select{
      width: 100%;
      height: 44px;
      padding: 0 44px 0 14px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border-subtle);
      background: var(--color-surface);
      font-size: var(--font-size-base);
      appearance: none;
    }
    .product-pack-select-wrapper::after{
      content: "\f078";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      color: var(--color-text-subtle);
      pointer-events: none;
    }
    .product-pack-tabs.is-hidden{ display:none; }
    .product-pack-select-wrapper.is-hidden{ 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;
      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;
    }

    /* Container (optioneel): zet cart + favorite netjes naast elkaar */
    .product-info .cart,
    #product .cart,
    .product-options .cart {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* Ronde favorietenknop */
    .btn--favorite {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      border: 1px solid #d9d9d9;
      background: #ffffff;
      cursor: pointer;

      padding: 0;
      line-height: 1;
    }

    /* Icoon in het midden */
    .btn--favorite i {
      font-size: 18px;
    }

    /* Hover/active */
    .btn--favorite:hover {
      border-color: #bfbfbf;
    }

    .btn--favorite:active {
      transform: translateY(1px);
    }

    /* Toegankelijke focus-ring */
    .btn--favorite:focus,
    .btn--favorite:focus-visible {
      outline: 2px solid #111;
      outline-offset: 2px;
    }

    /* Disabled (als je dit ooit zet) */
    .btn--favorite:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn--favorite.is-active {
      border-color: #111;
    }

    .btn--favorite.is-active i {
      color: #e00000;
    }

    /* Floating wishlist feedback */
    .floating-wishlist-alert {
      position: fixed;
      top: var(--space-5);              /* 20px */
      right: var(--space-5);
      z-index: 9999;

      max-width: 360px;
      padding: var(--space-3_5) var(--space-4);

      background: var(--color-primary);
      color: var(--color-text-invert);

      border-radius: var(--radius-md);
      box-shadow: 0 14px 40px rgba(0,0,0,.18);

      font-family: var(--font-sans);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;

      opacity: 0;
      transform: translateY(-10px);
      transition:
        opacity .25s ease,
        transform .25s ease;
    }

    .floating-wishlist-alert.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .floating-wishlist-alert.is-error {
      background: #b00020;
    }

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


/* =========================================
   BT — vaste productkaartbreedte, rechts vult rest
   - Wrap voorkomt overflow bij 3/4 kaarten
   - Bij krapte gaat summary naar nieuwe regel
   ========================================= */

.bt{
  width: 100%;
  margin-top: var(--space-5);
  padding: var(--space-4);

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

  display: flex;
  flex-wrap: wrap;                 /* ✅ essentieel */
  gap: var(--space-5);
  align-items: stretch;
}

/* PRODUCTEN: mogen wrappen, maar kaarten blijven vaste breedte */
.bt__products{
  display: flex;
  flex-wrap: wrap;                 /* ✅ essentieel */
  align-items: stretch;
  gap: var(--space-4);

  flex: 1 1 auto;                  /* ✅ mag krimpen/groeien */
  min-width: 0;
}

/* vaste breedte per kaart */
.bt__card{
  --bt-card-w: 260px;
  width: var(--bt-card-w);
  flex: 0 0 var(--bt-card-w);

  position: relative;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Link */
.bt__card-link{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

/* Afbeelding tile */
.bt__thumb{
  width: 150px;
  height: 150px;

  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-page);

  display: grid;
  place-items: center;
  overflow: hidden;
}

.bt__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
  display: block;
}

/* Titel */
.bt__title{
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--color-text-main);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

  min-height: calc(3 * 1.3em);
}

.bt__meta{
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  font-weight: var(--font-weight-medium);
}

/* Qty badge */
.bt__badge{
  position: absolute;
  top: 12px;
  left: 12px;

  padding: 6px 10px;
  border-radius: var(--radius-xs);
  background: var(--color-danger);
  color: var(--color-text-invert);

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

/* Separator: vaste breedte, centre, maar wrap-friendly */
.bt__sep{
  width: 56px;
  flex: 0 0 56px;

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

  /* belangrijk: separator mag NIET aan het begin van een nieuwe regel hangen */
}

/* plus */
.bt__plus{
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);

  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-page);
  color: var(--color-text-main);

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

  font-size: 20px;
  font-weight: var(--font-weight-semibold);
}

/* RECHTS: vult rest als er ruimte is, anders hele breedte op nieuwe regel */
.bt__right{
  flex: 1 1 340px;                 /* ✅ kan mee schalen */
  min-width: 340px;

  background: var(--color-bg-page);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Typo/prijzen */
.bt__right-head{ display: grid; gap: var(--space-3); }

.bt__label{
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

.bt__right-prices{
  display: grid;
  gap: 6px;
}

.bt__old{
  opacity: .65;
  text-decoration: line-through;
  color: var(--color-text-soft);
}

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

.bt__right-save{
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bt__save-value{
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
}

/* Button: primary pill */
.bt__btn{
  width: 100%;
  min-height: 48px;

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

  padding: 12px 18px;
  border-radius: var(--radius-pill);

  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-invert);

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

  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

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

/* Als summary naar beneden gaat, maak hem full width (netjes) */
@media (max-width: 1200px){
  .bt__right{
    flex: 1 1 100%;
    min-width: 0;
  }
}



    /* -----------------------------------------
       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)
       ========================================= */

/* =========================================
   Account Reorder Lookup
   ========================================= */

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

.page-section--account-reorder-lookup .auth-grid{
  display: grid;
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
  gap: var(--space-5);
}


    .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-5);
    }

    .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-sm);
  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 (footer)
   - Echte infinite via scrollLeft (JS)
   - Viewport blijft scrollbaar voor user
   - Fade links/rechts
   ========================= */

.brands-row{
  position: relative;
  margin: 90px 0 40px;
}

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

/* Viewport: altijd scrollbaar */
.brands-row__viewport{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;

  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 70px,
    black calc(100% - 70px),
    transparent 100%
  );
}

.brands-row__viewport::-webkit-scrollbar{
  display: none;
}

/* Space tussen de UL-kopieën (infinite scroll safe) */
.brands-row .brands-row__track > .brands-row__list{
  padding-right: 16px !important;
}


/* Track: alleen layout, geen transform-animatie meer */
.brands-row__track{
  display: flex;
  width: max-content;
  gap: 0;
}

/* Lijsten: identiek */
.brands-row__list{
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;

  gap: 16px;

  width: max-content;
  flex: 0 0 auto;
}

/* Tegels */
.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%;
}

/* Logo’s: rustig standaard */
.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;

  opacity: .55;
  filter: grayscale(1);
  transition: opacity .2s ease, filter .2s ease, transform .25s ease;
}

.brands-row__list li:hover img,
.brands-row__list li:focus-within img{
  opacity: 1;
  filter: grayscale(0);
}

.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);
  opacity: .55;
}

.brands-row__list li[data-darken]:hover img,
.brands-row__list li[data-darken]:focus-within img{
  filter: none;
  opacity: 1;
}

/* Mobiel tweaks */
@media (max-width: 480px){
  .brands-row__list{ gap: 12px; }
  .brands-row__list li{
    --w: clamp(78px, 42vw, 110px);
    --h: clamp(30px, 14vw, 44px);
  }
  .brands-row__viewport{
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black 50px,
      black calc(100% - 50px),
      transparent 100%
    );
  }
}

/* ===============================
   Compat Tool
   =============================== */

.compat-tool{
  margin-top: var(--space-section-sm);
}

.compat-tool__inner{
  background: var(--color-bg-softer);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: none;
}

/* ---------- ROW ---------- */

.compat-tool__row{
  display:flex;
  align-items:center;
  gap: var(--space-5);
}

/* Titel optisch gecentreerd t.o.v. input */
.compat-tool__title{
  margin:0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);

  flex: 0 0 220px;

  display:flex;
  align-items:center;
  min-height:46px;
  line-height: 1.15;
}

/* ---------- SEARCH ---------- */

.compat-tool__search{
  position:relative;
  flex:1;
}

.compat-tool__input{
  width:100%;
  height:46px;

  padding: 0 46px 0 16px;

  border-radius: var(--radius-pill);
  border:1px solid var(--color-border-subtle);

  background: var(--color-surface);
  color: var(--color-text-main);

  font-size: var(--font-size-base);

  outline:none;
}

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

/* Vergrootglas */
.compat-tool__icon{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);

  width:20px;
  height:20px;

  pointer-events:none;

  background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
  center no-repeat;
}

/* ---------- RESULTS ---------- */

.compat-tool__results{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 12px);

  list-style:none;
  margin:0;
  padding:6px 0;

  background: var(--color-surface);

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

  box-shadow:0 18px 50px rgba(0,0,0,.08);

  display:none;
  max-height:320px;
  overflow:auto;

  z-index:50;
}

.compat-tool__results li{
  padding:10px 14px;
  cursor:pointer;
}

.compat-tool__results li:hover,
.compat-tool__results li.active{
  background: var(--color-bg-softer);
}

.compat-tool__results li.is-empty{
  cursor: default;
  color: var(--color-text-soft);
}

/* ---------- CHIPS ---------- */

.compat-tool__chips{
  margin-top: var(--space-4);

  display:flex;
  align-items:center;
  gap: var(--space-4);
  flex-wrap:wrap;
}

.compat-tool__chips-label{
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

.compat-tool__chips-row{
  display:flex;
  gap: var(--space-2);
  flex-wrap:wrap;
}

/* subtiele chips (bg + border, geen shadow) */
.compat-chip{
  height:34px;
  padding:0 16px;

  border-radius: var(--radius-pill);
  border:1px solid var(--color-border-subtle);

  background: var(--color-bg-soft);

  cursor:pointer;

  font-size: var(--font-size-sm);
  color: var(--color-text-main);
}

.compat-chip:hover{
  background: var(--color-surface);
  border-color: var(--color-border-soft);
}

.compat-chip:focus{
  outline: none;
}

.compat-chip:focus-visible{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* ---------- MOBILE ---------- */

@media (max-width:768px){
  .compat-tool__row{
    flex-direction:column;
    align-items:stretch;
    gap: var(--space-3);
  }

  .compat-tool__title{
    flex:auto;
    min-height: auto;
  }
}

/* =========================================
   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: var(--font-size-base);
  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,.45);
  backdrop-filter: blur(1px);
  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; }

/* =========================================
   8T. CONTACT PAGE (information/contact.tpl)
   ========================================= */

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

.contact-layout{
  display: grid;
  grid-template-columns: minmax(0, 1290px);
  justify-content: center;
}

/* ===============================
   Contact – Quick actions block
   =============================== */

.contact-quick{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0 var(--space-6);
}

@media (max-width: 768px){
  .contact-quick{
    grid-template-columns: 1fr;
  }
}

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

.contact-quick__title{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.contact-quick__desc{
  margin: 0;
}

/* Mini form */
.contact-quick__form{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: end;
}

.contact-quick__fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 480px){
  .contact-quick__form{
    grid-template-columns: 1fr;
  }
  .contact-quick__fields{
    grid-template-columns: 1fr;
  }
}

.contact-quick__submit{
  height: 100%;
  padding-inline: var(--space-4);
  font-size: 18px;
}

/* Action buttons */
.contact-quick__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.contact-quick__btn{
  white-space: nowrap;
}

/* ===============================
   Kleine quality-of-life tweaks
   =============================== */


/* Zorgt dat inputs netjes aansluiten bij bestaande stijl */
.contact-quick .contact-input{
  width: 100%;
}


.contact-card{
  background: var(--color-bg-soft);
  /*border: 1px solid var(--color-border-subtle);*/
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.contact-title{
  margin: 0 0 var(--space-4);
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
}

.contact-form{
  margin-top: var(--space-4);
}

.contact-fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 820px){
  .contact-fields{
    grid-template-columns: 1fr;
  }
}

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

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

.contact-input,
.contact-textarea,
#onderwerp{
  width: 100%;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  padding: 11px 14px;
  outline: none;
  color: var(--color-text-main);
  font-size: var(--font-size-base);
}

.contact-textarea{
  border-radius: var(--radius-md);
  min-height: 140px;
  resize: vertical;
}

.contact-input:focus,
.contact-textarea:focus,
#onderwerp:focus{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

#onderwerp{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  background-image: none;
}

/* select chevron */
.contact-card{
  position: relative;
}
.contact-card #onderwerp{
  background-color: var(--color-surface);
}
.contact-card #onderwerp{
  background-image: none;
}
.contact-card .contact-select-wrap{
  position: relative;
}
.contact-card .contact-select-wrap::after{
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--color-text-subtle);
  pointer-events: none;
}

/* fallback: als #onderwerp niet in wrapper zit, alsnog pijltje tonen via parent */
.contact-card:has(#onderwerp)::after{
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: calc(var(--space-5) + 14px);
  top: 86px; /* visueel: net onder de titel; als u 1–2px wilt tunen */
  font-size: 12px;
  color: var(--color-text-subtle);
  pointer-events: none;
}

/* error mapping (oude class) */
span.error{
  display: block;
  margin-top: 6px;
  font-size: var(--font-size-base);
  color: var(--color-danger);
}

.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);
}

/* live status banner -> gebruikt .notice */
.contact-live-status{
  margin-top: var(--space-3);
}
.contact-live-status.is-hidden{
  display: none;
}

/* onderwerp-infoblokken (contact-hidden-*) */
.contact-hidden{
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-page));
  color: var(--color-text-main);

  display: none; /* JS zet op flex */
  gap: var(--space-3);
  align-items: flex-start;
}

.contact-hidden p{
  margin: 0 0 var(--space-2);
  color: var(--color-text-soft);
  line-height: 1.6;
}

.contact-hidden p:last-child{
  margin-bottom: 0;
}

.contact-hidden i.hgi{
  font-size: 20px;
  color: var(--color-accent);
  margin-top: 2px;
}

/* upload */
.contact-upload{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}

@media (max-width: 560px){
  .contact-upload{
    grid-template-columns: 1fr;
  }
}

.contact-input--file{
  background: var(--color-bg-soft);
}

.contact-upload__btn{
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.contact-upload__input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* submit rij */
.contact-submit{
  min-height: 48px;
}

/* recaptcha tekst */
.recaptcha{
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

.recaptcha a {
  margin-left: var(--space-3);
  text-decoration: underline;
}

.recaptcha a:hover {
  text-decoration: none;
}

.grecaptcha-badge { visibility: hidden; }

/* native select chevron UIT – definitief */
.contact-card select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.contact-extra{
  margin-top: var(--space-6);
}

.contact-extra__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

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

@media (min-width: 920px){
  .contact-extra__grid{
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: start;
  }
}

.contact-extra__title{
  margin: 0 0 var(--space-2);
}

.contact-extra__intro{
  margin: 0 0 var(--space-4);
}

.contact-channels{
  display: grid;
  gap: var(--space-2);
}

.contact-channel{
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.contact-channel:hover{
  border-color: var(--color-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.contact-channel__icon{
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-primary);
  font-size: 18px;
}

.contact-channel__text{
  min-width: 0;
}

.contact-channel__title{
  display: block;
  font-weight: 700;
  line-height: 1.2;
}

.contact-channel__sub{
  display: block;
  margin-top: 2px;
  color: var(--color-text-soft);
  line-height: 1.25;
  word-break: break-word;
}

.contact-channel__chev{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--color-text-soft);
  font-size: 12px;
}

.company-dl{
  margin: 0;
  padding: 0;
}

.company-dl__row{
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border-subtle);
}

.company-dl__row:first-child{
  border-top: 0;
  padding-top: 0;
}

.company-dl__dt{
  margin: 0;
  font-weight: 700;
}

.company-dl__dd{
  margin: 0;
  color: var(--color-text);
}

.company-dl__note{
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

/* =========================================================
   Cart – stock status + insufficient stock highlighting
   ========================================================= */

.cart-item-row__stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text-soft);
}

.cart-item-row__stock .dot {
  display: inline-block;            /* essentieel: anders geen zichtbaar bolletje */
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--color-border-soft); /* fallback */
}

/* Status colors (gebruik tokens die u WEL heeft) */
.cart-item-row__stock .dot--ok {
  background: var(--color-primary);     /* success = primary in uw tokens */
}

.cart-item-row__stock .dot--warning {
  background: var(--color-warning);
}

.cart-item-row__stock .dot--danger {
  background: var(--color-danger);
}

.page-section--checkout-cart .cart-head{
  display: grid;
  grid-template-columns: 1fr 140px 65px 36px; /* + 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 65px 36px; /* + 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: 52px;
  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;
}

.cart-popup__vat-hint{
  margin-bottom: 6px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.35;
  font-weight: 400;
  padding: 0 16px 12px 16px;
}


.cart-summary__note{
  margin-top: var(--space-3);
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.cart-item-row__stock-hint{
  margin-top: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
}

.cart-item.not-enough-stock .cart-item-row__stock-hint{
  color: color-mix(in srgb, var(--color-danger) 75%, var(--color-text-main));
}


/* Item highlight for insufficient stock */
.not-enough-stock {
  position: relative;
  background: color-mix(in srgb, var(--color-danger) 6%, var(--color-bg-page)) !important;
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, var(--color-border-subtle)) !important;
  border-radius: var(--radius-md);
  padding: var(--space-3);
}


.shipping-progress{
  margin: 0 0 var(--space-7);
  background: var(--color-bg-softer);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.shipping-progress__msg{
  font-size: var(--font-size-base);
  line-height: 1.35;
  margin: 0 0 var(--space-3);
}

.shipping-progress__bar{
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: visible;
}

.shipping-progress__fill{
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary, #22c55e);
}

.shipping-progress__marker{
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.shipping-progress__marker-inner{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(34, 197, 94, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.shipping-progress__marker-inner i{
  font-size: 12px;
  color: #111827;
}


/* =========================================
   Cart remove modal
   ========================================= */

.cart-remove-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.cart-remove-modal.is-open{
  display: block;
}

.cart-remove-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
}

.cart-remove-modal__panel{
  position: relative;
  width: min(600px, calc(100vw - 32px));
  margin: 12vh auto 0;
  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;
}

.cart-remove-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.cart-remove-modal__title{
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
}

.cart-remove-modal__close{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--color-text-main);
}

.cart-remove-modal__close:hover{
  background: var(--color-bg-soft);
}

.cart-remove-modal__body{
  padding: var(--space-4);
}

.cart-remove-modal__text{
  margin: 0;
  color: var(--color-text-soft);
  line-height: 1.6;
}

.cart-remove-modal__actions{
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* optioneel: body lock */
html.is-modal-open,
html.is-modal-open body{
  overflow: hidden;
}



@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 */
/* Mobile: product op rij 1, controls (qty + totaal + remove) op rij 2 */
@media (max-width: 767px){

  .page-section--checkout-cart .cart-item-row{
    /* qty | (ruimte) | remove  */
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: start;
  }

  /* Product altijd volle breedte bovenaan */
  .page-section--checkout-cart .cart-item-row__product{
    grid-column: 1 / -1;
    padding-right: 36px; /* ruimte voor het × */
  }

  /* Controls regel: qty links */
  .page-section--checkout-cart .cart-item-row__qty{
    justify-content: flex-start;
  }

  /* Totaal: in de middenkolom, maar rechts uitlijnen = “helemaal rechts naast input” */
  .page-section--checkout-cart .cart-item-row__total{
    text-align: right;
    align-self: center;
  }

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

  .page-section--checkout-cart .cart-item-row{
    position: relative;
  }

  .page-section--checkout-cart .cart-item-row__removecol{
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
  }

}

/* 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: 767px){
  .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 / Language modal: echte overlay modal */
/* =========================
   Country / Language modal
   ========================= */

.country-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.country-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.country-modal__panel{
  position: relative;
  width: min(980px, calc(100% - 32px));
  max-height: calc(100vh - 80px);
  margin: 40px auto;
  background: var(--color-surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.country-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.country-modal__title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
}

.country-modal__title-icon{
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-subtle);
  opacity: .75;
  transform: translateY(1px);
}

.country-modal__close{
  border: 1px solid rgba(0,0,0,.12);
  background: var(--color-surface);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
}

.country-modal__close:hover,
.country-modal__close:focus-visible{
  background: var(--color-bg-soft);
  color: var(--color-text-main);
}

.country-modal__body{
  padding: 16px;
  overflow: auto;
}

.country-modal__footer{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.country-modal__btn{
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,.12);
  background: var(--color-surface);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
}

.country-modal__btn--primary{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* =========================
   Locale picker
   ========================= */

.locale-picker{
  display: block;
  margin-bottom: 16px;
}

/* Label: meer "form label", minder headline */
.locale-picker__label{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);

  margin-bottom: 8px;
}

.locale-picker__label-icon{
  font-size: 12px;
  line-height: 1;
  color: var(--color-text-subtle);
  opacity: .7;
  transform: translateY(1px);
}

.locale-picker__control{
  position: relative;
}

/* Input: iets compacter + minder hard contrast */
.locale-picker__input{
  width: 100%;
  padding: 9px 40px 9px 12px;
  border: 1px solid rgba(17,24,39,.14);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-main);
}

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

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

.locale-picker__icon{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .45;
  pointer-events: none;
}

/* List: iets strakker */
.locale-picker__list{
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 12px;
  background: var(--color-surface);
}

/* Item: compacter en rustiger */
.locale-item{
  width: 100%;
  display: grid;
  grid-template-columns: 22px 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-main);
}

.locale-item:hover{
  background: rgba(17,24,39,.03);
}

.locale-item__flag{
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
}

.locale-item__code{
  font-weight: 700;
  font-size: 12px;
  opacity: .7;
  letter-spacing: .02em;
}

.locale-item__name{
  font-size: 14px;
}

/* Hint */
.locale-picker__hint{
  margin-top: 8px;
  font-size: 13px;
  color: #b91c1c;
}


    /* =========================================
       Cookie Consent (v9)
       ========================================= */

    .cc-backdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(1px);
      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)
   ========================================= */

@media (min-width: 1201px){
  .product-grid{
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  /* Special pagina niet forceren naar 5, maar zelfde logica */
  .page-section--special .product-grid, .page-section--search .product-grid{
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* 993–1200px: categorie 3 => aanbiedingen 4 */
@media (min-width: 993px) and (max-width: 1200px) {
  .page-section--special .product-grid, .page-section--search .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, .page-section--search .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px){
  #column-left{ display:none !important; }
}


/* Desktop / wanneer cart rechts staat */
@media (min-width: 981px) {
  .cart-aside {
    position: sticky !important;
    top: 20px; /* of headerhoogte */
    align-self: flex-start;
  }
}

/* Tablet + mobiel: nooit sticky */
@media (max-width: 980px) {
  .cart-aside {
    position: static;
  }
}

#nwa_list_container{
  display: none !important;
}


.text-columns {
  column-count: 1;
  column-gap: 48px;
}

@media (min-width: 1024px) {
  .text-columns {
    column-count: 2;
  }
}

/* Voorkom dat koppen halverwege kolommen breken */
.text-columns h2 {
  break-inside: avoid;
}


/* =========================================
   NAV mega dropdown: niet full-width + hover-bridge (desktop)
   ========================================= */
@media (min-width: 769px){

  /* Alleen items met dropdown moeten een position-anchor zijn */
  .nav-item--has-mega{
    position: relative;
  }

  /* Dropdown: compact paneel (niet full width) */
  .nav-item--has-mega > .nav-mega{
    left: 0;
    right: auto;
    width: min(320px, calc(100vw - 32px));
    top: calc(100% + 10px);

    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);

    transform: none;
    z-index: 80;
  }

  /* Binnenkant hoeft niet aan page-max-width te hangen bij compact dropdown */
  .nav-item--has-mega > .nav-mega .nav-mega__inner{
    max-width: none;
    padding: 14px 16px 16px;
  }

  /* Hover-bridge: voorkomt dat dropdown sluit als u naar beneden beweegt */
  .nav-item--has-mega::after{
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    top: 100%;
    height: 28px;               /* groot genoeg om de gap altijd te overbruggen */
    background: transparent;
  }

  /* De oude bridge op het paneel zelf mag weg (kan blijven, maar is dan dubbel) */
  .nav-item--has-mega > .nav-mega::before{
    display: none;
  }
}


.home-hero-tiles{
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.home-hero-tiles__layout{
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

/* expliciete plaatsing */
.home-hero-tile--big{
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 320px;
}

.home-hero-tile--top{
  grid-column: 2;
  grid-row: 1;
  min-height: 152px;
}

.home-hero-tile--bottom{
  grid-column: 2;
  grid-row: 2;
  min-height: 152px;
}

/* tile basis */
.home-hero-tile{
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  text-decoration: none;
  color: #fff;
  min-width: 0;
}

/* bg laag */
.home-hero-tile__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* shade boven bg: licht/premium maar leesbaar */
.home-hero-tile__shade{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 380px at 20% 35%, rgba(0,0,0,0.38), rgba(0,0,0,0.00) 70%),
    linear-gradient(90deg,
      rgba(0,0,0,0.34) 0%,
      rgba(0,0,0,0.18) 26%,
      rgba(0,0,0,0.06) 52%,
      rgba(0,0,0,0.00) 68%
    );
}

/* small tiles: iets meer contrast, omdat het vlak kleiner is */
.home-hero-tile--small .home-hero-tile__shade{
  background:
    radial-gradient(700px 260px at 18% 35%, rgba(0,0,0,0.44), rgba(0,0,0,0.00) 70%),
    linear-gradient(90deg,
      rgba(0,0,0,0.40) 0%,
      rgba(0,0,0,0.22) 28%,
      rgba(0,0,0,0.08) 56%,
      rgba(0,0,0,0.00) 72%
    );
}

/* content */
.home-hero-tile__content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
  max-width: 78%;
}

/* leesbaarheid stabiliseren zonder “paneel” */
.home-hero-tile__kicker,
.home-hero-tile__title,
.home-hero-tile__sub,
.home-hero-tile__link{
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.home-hero-tile__kicker{
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  opacity: 0.95;
}

.home-hero-tile__title{
  display: block;
  font-size: 30px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.home-hero-tile__title--sm{
  font-size: 22px;
}

.home-hero-tile__sub{
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  opacity: 0.95;
}

.home-hero-tile__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: rgba(17,24,39,0.85);
  border: 1px solid rgba(255,255,255,0.18);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  margin-top: var(--space-2);
}

.home-hero-tile__link{
  display: inline-flex;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.95;
  margin-top: var(--space-1);
}

.home-hero-tile:hover .home-hero-tile__bg{
  transform: scale(1.03);
  transition: transform 180ms ease;
}

/* Tablet */
@media (max-width: 1024px){
  .home-hero-tiles__layout{
    grid-template-columns: 1.6fr 1fr;
  }

  .home-hero-tile__content{
    max-width: 92%;
    padding: var(--space-5);
  }

  .home-hero-tile--big{
    min-height: 300px;
  }

  .home-hero-tile--top,
  .home-hero-tile--bottom{
    min-height: 140px;
  }

  .home-hero-tile__title{
    font-size: 26px;
  }
}

/* Mobiel: alleen grote tile */
@media (max-width: 768px){
  .home-hero-tiles__layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .home-hero-tile--small{
    display: none;
  }

  .home-hero-tile--big{
    grid-column: auto;
    grid-row: auto;
    min-height: 220px;
  }

  .home-hero-tile__content{
    max-width: 100%;
    padding: var(--space-4);
  }

  .home-hero-tile__title{
    font-size: 22px;
  }
}



/* =========================================
   Status form — ALLEEN mobiel stacken
   Desktop blijft exact zoals het is
   ========================================= */

@media (max-width: 640px){

  .status-form__row{
      display:flex;
      flex-direction:column;
      gap:12px;
  }

  .status-form__field,
  .status-form__input,
  .status-form__btn{
      width:100%;
      flex:none;
  }

}


/* =========================================
   FIX: mobiel header logo duwt iconen buiten beeld
   Doel:
   - Logo mag krimpen/wrappen
   - Iconen blijven altijd zichtbaar
   - Search op eigen rij
   ========================================= */

@media (max-width: 640px){

  /* 2 kolommen: logo | iconen, en search eronder */
  .header-main__inner{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-column-gap: var(--space-3);
    grid-row-gap: var(--space-3);
    align-items: center;
  }

  /* Search neemt volledige breedte op rij 2 */
  .search{
    grid-column: 1 / -1;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
  }

  /* Logo mag krimpen en wrappen (niet meer forceren op 1 regel) */
  .site-logo{
    white-space: normal;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.1;
    font-size: 22px; /* iets compacter op mobiel */
  }

  /* Iconen rechts uitlijnen, nooit buiten beeld */
  .header-main__icons{
    justify-self: end;
    min-width: 0;
    white-space: nowrap;
  }

  /* Optional: iconen iets compacter op mobiel */
  .icon-badge{
    width: 36px;
    height: 36px;
  }
}

/* Extra safety: laat het logo ook op iets bredere schermen kunnen krimpen */
.site-logo{
  min-width: 0;
  max-width: 100%;
}

/* =========================================
   FIX: mini-cart tekst loopt door en overflowt op mobiel
   ========================================= */
@media (max-width: 640px){

  /* Producttitel mag altijd wrappen */
  .cart-item__name{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
  }

  /* Totals: label mag wrappen, waarde blijft rechts en op 1 regel */
  .cart-total{
    align-items: flex-start;
    gap: 12px;
  }
  .cart-total__label{
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .cart-total__value{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Als er losse tekstregels/p's in totals staan, ook laten wrappen */
  .cart__totals p,
  .cart__totals .cart__note,
  .cart__totals .cart__text{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* =========================================
   FIX: kleine btw / zakelijke melding overflow
   Oorzaak: flex-item zonder min-width:0
   ========================================= */

@media (max-width: 640px){

  /* De tekst zelf: altijd mogen wrappen */
  .cart-popup__vat-hint{
    display: block;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
  }

  /* Als de hint in een flex/grid rij zit: laat het element krimpen */
  .cart-popup__vat-hint,
  .cart-popup__vat-hint *{
    min-width: 0;
  }

  /* Extra safety: vaak zit dit in een container die zelf overflowt */
  .cart-popup__totals,
  .cart-popup__summary,
  .cart-popup__content{
    min-width: 0;
  }
}