@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   AIRNIEUWS.NL — site.css
   Aviation spotters community · WordPress theme stylesheet
   Structure: [1] Base Variables  [2] Reset & Globals
              [3] Typography      [4] Layout
              [5] Navigation      [6] Components
              [7] Flight Log      [8] Media / Photo
              [9] Members Area    [10] Shop
              [11] Utilities      [12] Animations
              [13] Responsive
   ============================================================ */


/* ============================================================
   [1] BASE VARIABLES — Design tokens
   ============================================================ */

   :root {

    /* --- Palette: lichte basis (site-breed) --- */
    --clr-page:         #f1f5f9;   /* body / hoofdachtergrond */
    --clr-sky-black:    #f1f5f9;   /* legacy naam: zelfde als page (was donker) */
    --clr-cockpit:      #ffffff;   /* secties / kaarten */
    --clr-fuselage:     #f8fafc;   /* iets grijzer dan wit */
    --clr-panel:        #ffffff;   /* verhoogde vlakken */
    --clr-border:       #e2e8f0;   /* scheiding */
    --clr-border-light: #cbd5e1;   /* sterkere rand */
  
    /* Accent — runway amber + afterburner orange */
    --clr-amber:        #f59e0b;   /* runway center-line amber */
    --clr-amber-dim:    #b45309;   /* dimmed amber */
    --clr-amber-glow:   rgba(245, 158, 11, 0.12);
    --clr-orange:       #ea580c;   /* afterburner / alert */
    --clr-orange-glow:  rgba(234, 88, 12, 0.15);
  
    /* ICAO / instrument greens */
    --clr-green:        #22c55e;   /* arrival / active */
    --clr-green-dim:    rgba(34, 197, 94, 0.12);
    --clr-cyan:         #06b6d4;   /* ADS-B / data */
    --clr-cyan-dim:     rgba(6, 182, 212, 0.12);
    --clr-red:          #ef4444;   /* departure / alert */
    --clr-red-dim:      rgba(239, 68, 68, 0.12);
  
    /* Text scale */
    --txt-primary:      #0f172a;
    --txt-secondary:    #475569;
    --txt-muted:        #64748b;
    --txt-link:         #2563eb;
    --txt-link-hover:   #1d4ed8;
  
    /* --- Spacing --- */
    --sp-1:   4px;
    --sp-2:   8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
  
    /* --- Typography --- */
    --font-display:  'Barlow Condensed', 'Oswald', sans-serif;  /* callsigns, headings */
    --font-body:     'DM Sans', 'Nunito Sans', sans-serif;       /* readable body */
    --font-mono:     'JetBrains Mono', 'Fira Code', monospace;  /* ICAO codes, data */
  
    --fs-xs:    0.70rem;
    --fs-sm:    0.825rem;
    --fs-base:  1rem;
    --fs-md:    1.125rem;
    --fs-lg:    1.375rem;
    --fs-xl:    1.75rem;
    --fs-2xl:   2.25rem;
    --fs-3xl:   3rem;
    --fs-4xl:   4rem;
  
    --fw-normal:  400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   900;
  
    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-base:   1.6;
    --lh-loose:  1.8;
  
    --ls-tight:  -0.03em;
    --ls-normal:  0;
    --ls-wide:    0.05em;
    --ls-wider:   0.12em;
    --ls-widest:  0.2em;
  
    /* --- Radii --- */
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:  12px;
    --r-xl:  16px;
    --r-2xl: 24px;
    --r-full: 9999px;
  
    /* --- Shadows (licht thema) --- */
    --shadow-sm:   0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.08);
    --shadow-md:   0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.06);
    --shadow-lg:   0 12px 32px rgba(15,23,42,0.1), 0 4px 8px rgba(15,23,42,0.06);
    --shadow-xl:   0 24px 64px rgba(15,23,42,0.12);
    --shadow-amber: 0 0 20px rgba(245,158,11,0.2), 0 0 6px rgba(245,158,11,0.1);
    --shadow-glow:  0 0 24px rgba(6,182,212,0.12);
  
    /* --- Transitions --- */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:   120ms;
    --dur-base:   220ms;
    --dur-slow:   380ms;
    --dur-xslow:  600ms;
  
    /* --- Layout --- */
    --max-w-site:   1380px;
    --max-w-content: 960px;
    --max-w-narrow:  680px;
    --sidebar-w:    300px;
    --nav-h:         64px;
    --airnieuws-global-bar-h: 48px;
  
    /* --- Z-index --- */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    500;
    --z-toast:    999;
  }
  
  
  /* ============================================================
     [2] RESET & GLOBALS
     ============================================================ */
  
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    tab-size: 2;
  }
  
  body {
    background-color: var(--clr-page);
    color: var(--txt-primary);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-normal);
    min-height: 100vh;
    overflow-x: hidden;
    /* Subtiel grid op lichte achtergrond */
    background-image:
      linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
  }
  
  /* Scrollbar */
  ::-webkit-scrollbar               { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track         { background: var(--clr-fuselage); }
  ::-webkit-scrollbar-thumb         { background: var(--clr-border-light); border-radius: var(--r-full); }
  ::-webkit-scrollbar-thumb:hover   { background: var(--clr-amber-dim); }
  
  /* Selection */
  ::selection {
    background: var(--clr-amber-glow);
    color: var(--txt-primary);
  }
  
  img, video, svg { display: block; max-width: 100%; }
  a { color: var(--txt-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
  a:hover { color: var(--txt-link-hover); }
  
  button { cursor: pointer; border: none; background: none; font: inherit; }
  
  input, textarea, select {
    font: inherit;
    color: inherit;
    background: transparent;
  }
  
  ul, ol { list-style: none; }
  
  hr {
    border: none;
    border-top: 1px solid var(--clr-border);
    margin: var(--sp-8) 0;
  }
  
  /* ============================================================
     [3] TYPOGRAPHY
     ============================================================ */
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-wide);
    color: var(--txt-primary);
    text-transform: uppercase;
  }
  
  h1 { font-size: var(--fs-4xl); letter-spacing: var(--ls-wider); font-weight: var(--fw-black); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-2xl); }
  h4 { font-size: var(--fs-xl);  }
  h5 { font-size: var(--fs-lg);  font-weight: var(--fw-semi); }
  h6 { font-size: var(--fs-md);  font-weight: var(--fw-semi); letter-spacing: var(--ls-widest); }
  
  p {
    color: var(--txt-secondary);
    line-height: var(--lh-base);
  }

  /* Max-width alleen op redactionele tekst, niet op WC-formulieren/tabellen */
  .hero__subtitle,
  .shop-hero__sub,
  .single-product__excerpt p,
  .thankyou-hero__sub,
  .shop-empty__text,
  .entry-content p,
  .page-content p {
    max-width: 68ch;
  }
  
  p + p { margin-top: var(--sp-4); }
  
  /* Callsign / ICAO — zonder globale `code` (lege Elementor-<code>-tags werden cyaan “blokjes”) */
  .icao, .callsign {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wider);
    color: var(--clr-cyan);
    background: var(--clr-cyan-dim);
    padding: 2px 6px;
    border-radius: var(--r-sm);
  }

  /* Inline <code> alleen waar bedoeld */
  .article-content code,
  .page-content .elementor-widget-text-editor code,
  .entry-content .elementor-widget-text-editor code {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wider);
    color: var(--clr-cyan);
    background: var(--clr-cyan-dim);
    padding: 2px 6px;
    border-radius: var(--r-sm);
  }

  code:empty {
    display: none;
  }
  
  /* Section label — overlined small caps */
  .label {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--clr-amber);
  }
  
  .label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--clr-amber);
    vertical-align: middle;
    margin-right: var(--sp-2);
    margin-bottom: 1px;
  }
  
  blockquote {
    border-left: 3px solid var(--clr-amber);
    padding-left: var(--sp-5);
    margin: var(--sp-6) 0;
    color: var(--txt-secondary);
    font-style: italic;
  }
  
  strong { font-weight: var(--fw-semi); color: var(--txt-primary); }
  em     { color: var(--clr-amber); font-style: normal; }
  small  { font-size: var(--fs-xs); color: var(--txt-muted); }
  
  
  /* ============================================================
     [4] LAYOUT
     ============================================================ */
  
  .container {
    width: 100%;
    max-width: var(--max-w-site);
    margin-inline: auto;
    padding-inline: var(--sp-6);
  }
  
  .container--narrow  { max-width: var(--max-w-content); }
  .container--reading { max-width: var(--max-w-narrow); }

  /* --- Aanmelden (inloggen + registreren) — twee kaarten, beperkte breedte --- */
  .aanmelden-page .aanmelden-hero .container {
    max-width: 42rem;
  }

  .aanmelden-page .container.section--sm {
    max-width: 46rem;
  }

  .aanmelden-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
    align-items: stretch;
    margin-top: var(--sp-2);
  }

  .aanmelden-split--login-only {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-inline: auto;
  }

  .aanmelden-card {
    background: var(--clr-panel);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6) var(--sp-6);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  }

  .aanmelden-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    margin: 0 0 var(--sp-2);
    color: var(--txt-primary);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--clr-border);
  }

  .aanmelden-card .form-group {
    margin-bottom: var(--sp-4);
  }

  .aanmelden-card .form-actions {
    margin-top: var(--sp-2);
  }

  .aanmelden-card .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .aanmelden-login-form-wrap form {
    margin: 0;
  }

  .aanmelden-login-form-wrap form p {
    margin: 0 0 var(--sp-4);
  }

  .aanmelden-login-form-wrap form p.login-remember {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
  }

  .aanmelden-login-form-wrap label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--txt-secondary);
    margin-bottom: var(--sp-2);
  }

  .aanmelden-login-form-wrap input.input,
  .aanmelden-login-form-wrap input[type="text"],
  .aanmelden-login-form-wrap input[type="password"] {
    width: 100%;
    box-sizing: border-box;
  }

  .aanmelden-login-form-wrap .button.button-primary,
  .aanmelden-login-form-wrap input[type="submit"] {
    width: 100%;
    margin-top: var(--sp-1);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-md);
    font-weight: var(--fw-semi);
    cursor: pointer;
  }

  .aanmelden-login-form-wrap p#nav,
  .aanmelden-login-form-wrap .login-lost-password {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-sm);
  }

  @media (max-width: 720px) {
    .aanmelden-split:not(.aanmelden-split--login-only) {
      grid-template-columns: 1fr;
    }
  }

  /* --- Dank voor lidmaatschap --- */
  .dank-lid-page .aanmelden-hero .container,
  .dank-lid-page .dank-lid-page__inner {
    max-width: 46rem;
  }

  /* Extra ademruimte t.o.v. schermrand (hero + kaart) */
  .dank-lid-page .aanmelden-hero .container,
  .dank-lid-page .dank-lid-page__inner.container {
    padding-inline: clamp(1.35rem, 5vw, 2.75rem);
  }

  .dank-lid-card {
    background: var(--clr-panel);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    padding: var(--sp-8) clamp(1.35rem, 5vw, 2.75rem);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  }

  .dank-lid-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    margin: 0 0 var(--sp-5);
    color: var(--txt-primary);
  }

  .dank-lid-steps {
    margin: 0 0 var(--sp-6);
    padding: 0 var(--sp-2) 0 1.5rem;
    color: var(--txt-secondary);
    line-height: var(--lh-loose);
    font-size: var(--fs-base);
  }

  .dank-lid-steps li {
    margin-bottom: var(--sp-4);
    padding-left: var(--sp-2);
  }

  .dank-lid-steps li::marker {
    color: var(--clr-amber);
    font-weight: var(--fw-bold);
  }

  .dank-lid-steps strong {
    display: block;
    color: var(--txt-primary);
    font-weight: var(--fw-bold);
    margin-bottom: var(--sp-1);
  }

  .dank-lid-benefits {
    margin: var(--sp-8) 0 0;
    padding: var(--sp-6) clamp(1.125rem, 4vw, 2rem);
    border-radius: var(--r-lg);
    border: 1px solid rgba(245, 158, 11, 0.22);
    background: linear-gradient(
      160deg,
      rgba(245, 158, 11, 0.1) 0%,
      rgba(255, 255, 255, 0.35) 42%,
      var(--clr-panel) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  .dank-lid-benefits__title {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    margin: 0 0 var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--clr-amber);
  }

  .dank-lid-benefits__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .dank-lid-benefits__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--clr-border);
    background: rgba(255, 255, 255, 0.72);
    color: var(--txt-primary);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  }

  .dank-lid-benefits__list li:hover {
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
  }

  .dank-lid-benefits__check {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.08rem;
    border-radius: 50%;
    background: var(--clr-amber);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2 6.4 11l6.1-6.1' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.85rem 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  .dank-lid-benefits__text {
    flex: 1;
    min-width: 0;
  }

  .dank-lid-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--clr-border);
  }

  .dank-lid-actions__main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .dank-lid-actions__btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 2.75rem;
  }

  .dank-lid-actions__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--txt-muted);
    border-bottom: 1px solid transparent;
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }

  .dank-lid-actions__link:hover {
    color: var(--clr-amber);
    border-bottom-color: rgba(245, 158, 11, 0.45);
  }

  .dank-lid-note {
    margin: var(--sp-6) 0 0;
    padding: var(--sp-6) clamp(1.25rem, 4vw, 2.25rem);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--txt-muted);
    background: rgba(15, 23, 42, 0.03);
    border-radius: var(--r-md);
    border-left: 3px solid var(--clr-border);
  }

  @media (max-width: 540px) {
    .dank-lid-actions__main {
      grid-template-columns: 1fr;
    }
  }
  
  /* --- Page wrapper --- */
  .site-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
  }
  
  .site-main {
    flex: 1;
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Eerste blok onder header: nav-hoogte als padding zodat content
     niet onder de fixed header verdwijnt.
     Uitgesloten: WooCommerce-pagina's — die regelen hun eigen offset
     via .shop-hero, .sub-nav, .page-header-compact en .myaccount-auth-section. */
  body:not(.woocommerce):not(.woocommerce-page):not(.woocommerce-account)
  .site-main > *:first-child {
    padding-top: var(--nav-h);
  }

  /* Twee vaste headers: globale balk (#airnieuws-top-header) + #site-header */
  body.airnieuws-has-global-top-bar .site-header#site-header {
    top: var(--airnieuws-global-bar-h);
  }

  body.airnieuws-has-global-top-bar:not(.woocommerce):not(.woocommerce-page):not(.woocommerce-account)
  .site-main > *:first-child {
    padding-top: calc(var(--airnieuws-global-bar-h) + var(--nav-h));
  }

  body.airnieuws-has-global-top-bar.woocommerce .shop-hero,
  body.airnieuws-has-global-top-bar.woocommerce-page .shop-hero,
  body.airnieuws-has-global-top-bar.woocommerce-account .sub-nav,
  body.airnieuws-has-global-top-bar.woocommerce-account .page-header-compact,
  body.airnieuws-has-global-top-bar.woocommerce-page .page-header-compact,
  body.airnieuws-has-global-top-bar.woocommerce-cart .shop-wrap,
  body.airnieuws-has-global-top-bar.woocommerce-checkout .shop-wrap,
  body.airnieuws-has-global-top-bar.woocommerce-cart .sub-nav,
  body.airnieuws-has-global-top-bar.woocommerce-checkout .sub-nav,
  body.airnieuws-has-global-top-bar.woocommerce .myaccount-auth-section {
    padding-top: calc(var(--airnieuws-global-bar-h) + var(--nav-h));
  }

  /* WC-pagina's: alleen de .shop-hero en page-headers krijgen de nav-offset */
  body.woocommerce .shop-hero,
  body.woocommerce-page .shop-hero,
  body.woocommerce-account .sub-nav,
  body.woocommerce-account .page-header-compact,
  body.woocommerce-page .page-header-compact,
  body.woocommerce-cart .shop-wrap,
  body.woocommerce-checkout .shop-wrap,
  /* cart/checkout zonder shop-wrap: sub-nav is eerste blok onder header */
  body.woocommerce-cart .sub-nav,
  body.woocommerce-checkout .sub-nav,
  body.woocommerce .myaccount-auth-section {
    padding-top: var(--nav-h);
  }

  #main {
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .content-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  
  /* --- Content + Sidebar grid --- */
  .content-grid {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-w);
    gap: var(--sp-8);
    align-items: start;
  }
  
  /* --- Section spacing (compact: minder boven/onderruimte) --- */
  .section          { padding-block: var(--sp-8); }
  .section--sm      { padding-block: var(--sp-4); }
  .section--lg      { padding-block: var(--sp-12); }
  
  /* --- Flex helpers --- */
  .flex             { display: flex; }
  .flex-center      { display: flex; align-items: center; justify-content: center; }
  .flex-between     { display: flex; align-items: center; justify-content: space-between; }
  .flex-gap-2       { gap: var(--sp-2); }
  .flex-gap-4       { gap: var(--sp-4); }
  .flex-gap-6       { gap: var(--sp-6); }
  
  /* --- Grid helpers --- */
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
  
  /* --- Hero layout --- */
  .hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(
      160deg,
      #ffffff 0%,
      var(--clr-page) 55%,
      rgba(226, 232, 240, 0.6) 100%
    );
  }
  
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: var(--z-below);
    overflow: hidden;
  }
  
  .hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(255,255,255,0.92) 0%,
      rgba(241,245,249,0.85) 45%,
      transparent 100%
    );
  }
  
  .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
    filter: saturate(0.75) brightness(1.05);
  }
  
  .hero__content {
    position: relative;
    z-index: var(--z-base);
    max-width: 680px;
  }
  
  .hero__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    color: var(--clr-amber);
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
  }
  
  .hero__title {
    font-size: clamp(var(--fs-3xl), 6vw, var(--fs-4xl));
    font-weight: var(--fw-black);
    line-height: 0.95;
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--sp-5);
    color: var(--txt-primary);
  }
  
  .hero__title em {
    display: block;
    color: var(--clr-amber);
    -webkit-text-stroke: 0px;
  }
  
  .hero__subtitle {
    font-size: var(--fs-md);
    color: var(--txt-secondary);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-8);
    max-width: 52ch;
  }
  
  /* Runway decorative line */
  .runway-line {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
  }
  
  .runway-line::before {
    content: '';
    width: 48px;
    height: 3px;
    background: repeating-linear-gradient(
      90deg,
      var(--clr-amber) 0,
      var(--clr-amber) 8px,
      transparent 8px,
      transparent 14px
    );
  }
  
  
  /* ============================================================
     [5] NAVIGATION
     ============================================================ */
  
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    z-index: var(--z-sticky);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--clr-border);
    transition: box-shadow var(--dur-base) var(--ease-out);
  }
  
  .site-header.scrolled {
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    border-bottom-color: var(--clr-border-light);
  }
  
  .nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(var(--sp-3), 2.5vw, var(--sp-8));
    min-height: var(--nav-h);
    width: 100%;
  }


  .nav__account {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    padding: 4px;
    padding-left: var(--sp-3);
    border-radius: var(--r-lg);
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid var(--clr-border);
  }

  .nav__account .btn--sm {
    white-space: nowrap;
  }

  .nav__btn-invoer {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }
  
  /* Logo */
  .nav__logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    flex-shrink: 0;
  }
  
  .nav__logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: var(--shadow-amber);
    flex-shrink: 0;
  }
  
  .nav__logo-text {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--txt-primary);
    line-height: 1;
  }
  
  .nav__logo-text span {
    color: var(--clr-amber);
  }
  
  /* Nav links — gecentreerd in middelste kolom */
  .nav__links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: var(--sp-2);
    column-gap: var(--sp-1);
    min-width: 0;
  }
  
  .nav__link {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--txt-secondary);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-md);
    transition: color var(--dur-fast), background var(--dur-fast);
    position: relative;
  }
  
  .nav__link:hover,
  .nav__link.active {
    color: var(--txt-primary);
    background: var(--clr-fuselage);
  }
  
  .nav__link.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background: var(--clr-amber);
    border-radius: var(--r-full);
  }
  
  /* Nav member badge */
  .nav__badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--clr-amber-glow);
    color: var(--clr-amber);
    border: 1px solid rgba(245,158,11,0.3);
    padding: 2px 5px;
    border-radius: var(--r-sm);
    vertical-align: middle;
    margin-left: 4px;
  }
  
  /* Nav right: actions */
  .nav__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex-shrink: 0;
  }
  
  /* Mobile hamburger */
  .nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--sp-2);
  }
  
  .nav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--txt-secondary);
    border-radius: var(--r-full);
    transition: transform var(--dur-base), opacity var(--dur-base), background var(--dur-base);
  }
  
  /* Sub-nav / breadcrumbs bar */
  .sub-nav {
    background: var(--clr-fuselage);
    border-bottom: 1px solid var(--clr-border);
    padding-block: var(--sp-3);
  }
  
  .breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    letter-spacing: var(--ls-wide);
    color: var(--txt-muted);
  }
  
  .breadcrumbs a { color: var(--txt-secondary); }
  .breadcrumbs a:hover { color: var(--clr-amber); }
  .breadcrumbs__sep { color: var(--txt-muted); }
  .breadcrumbs__current { color: var(--clr-amber); }
  
  
  /* ============================================================
     [6] COMPONENTS — Buttons, Cards, Badges, Forms, etc.
     ============================================================ */
  
  /* --- BUTTONS --- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition:
      background var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      transform var(--dur-fast) var(--ease-spring);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
  }
  
  .btn:hover   { transform: translateY(-1px); }
  .btn:active  { transform: translateY(0); }
  
  /* Primary — amber */
  .btn--primary {
    background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
    color: #0d0d0d;
    border-color: var(--clr-amber);
  }
  
  .btn--primary:hover {
    box-shadow: var(--shadow-amber);
    color: #000;
  }
  
  /* Secondary — outline */
  .btn--secondary {
    background: transparent;
    color: var(--txt-primary);
    border-color: var(--clr-border-light);
  }
  
  .btn--secondary:hover {
    background: var(--clr-panel);
    border-color: var(--clr-amber);
    color: var(--clr-amber);
  }
  
  /* Ghost */
  .btn--ghost {
    background: transparent;
    color: var(--txt-secondary);
    border-color: transparent;
  }
  
  .btn--ghost:hover {
    color: var(--txt-primary);
    background: var(--clr-panel);
  }
  
  /* Danger */
  .btn--danger {
    background: var(--clr-red-dim);
    color: var(--clr-red);
    border-color: rgba(239,68,68,0.3);
  }
  
  .btn--danger:hover {
    background: var(--clr-red);
    color: white;
    box-shadow: 0 0 16px rgba(239,68,68,0.4);
  }
  
  /* Sizes */
  .btn--xs  { font-size: 10px; padding: var(--sp-1) var(--sp-3); }
  .btn--sm  { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-4); }
  .btn--lg  { font-size: var(--fs-md); padding: var(--sp-4) var(--sp-8); }
  .btn--xl  { font-size: var(--fs-lg); padding: var(--sp-5) var(--sp-10); }
  .btn--full { width: 100%; }
  
  /* Icon button */
  .btn--icon {
    padding: var(--sp-2);
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
  }
  
  
  /* --- CARDS --- */
  .card {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition:
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }
  
  .card:hover {
    border-color: var(--clr-border-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  
  .card--elevated {
    background: var(--clr-panel);
    border-color: var(--clr-border-light);
  }
  
  .card--amber:hover {
    border-color: rgba(245,158,11,0.4);
    box-shadow: 0 4px 24px rgba(245,158,11,0.1);
  }
  
  .card__header {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
  }
  
  .card__title {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--txt-primary);
  }
  
  .card__body    { padding: var(--sp-6); }
  .card__footer  {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--clr-border);
    background: rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* Stat card */
  .card-stat {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    position: relative;
    overflow: hidden;
  }
  
  .card-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--clr-amber), transparent);
  }
  
  .card-stat__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--txt-muted);
    margin-bottom: var(--sp-2);
  }
  
  .card-stat__value {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-black);
    line-height: 1;
    color: var(--txt-primary);
  }
  
  .card-stat__delta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    margin-top: var(--sp-2);
  }
  
  .card-stat__delta--up   { color: var(--clr-green); }
  .card-stat__delta--down { color: var(--clr-red); }
  
  
  /* --- BADGES / TAGS --- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    border: 1px solid transparent;
  }
  
  .badge::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }
  
  .badge--arrival  { color: var(--clr-green); background: var(--clr-green-dim); border-color: rgba(34,197,94,0.2); }
  .badge--departure{ color: var(--clr-red);   background: var(--clr-red-dim);   border-color: rgba(239,68,68,0.2); }
  .badge--amber    { color: var(--clr-amber);  background: var(--clr-amber-glow); border-color: rgba(245,158,11,0.2); }
  .badge--cyan     { color: var(--clr-cyan);   background: var(--clr-cyan-dim);   border-color: rgba(6,182,212,0.2); }
  .badge--neutral  { color: var(--txt-muted);  background: var(--clr-panel);      border-color: var(--clr-border); }
  .badge--member   { color: var(--clr-amber);  background: var(--clr-amber-glow); border-color: rgba(245,158,11,0.3); }
  
  /* Without dot indicator */
  .badge--nodot::before { display: none; }
  
  
  /* --- FORMS --- */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
  }
  
  .form-label {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--txt-secondary);
  }
  
  .form-label.required::after {
    content: ' *';
    color: var(--clr-amber);
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    background: var(--clr-cockpit);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-md);
    color: var(--txt-primary);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    padding: var(--sp-3) var(--sp-4);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
    width: 100%;
    outline: none;
  }
  
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    border-color: var(--clr-amber);
    box-shadow: 0 0 0 3px var(--clr-amber-glow);
  }
  
  .form-input::placeholder  { color: var(--txt-muted); }
  
  /* Mono inputs for ICAO / registration codes */
  .form-input--mono {
    font-family: var(--font-mono);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
  }
  
  .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fa3bc' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
  }
  
  .form-select option {
    background: var(--clr-fuselage);
    color: var(--txt-primary);
  }
  
  .form-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: var(--lh-base);
  }
  
  .form-hint {
    font-size: var(--fs-xs);
    color: var(--txt-muted);
  }
  
  .form-error {
    font-size: var(--fs-xs);
    color: var(--clr-red);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
  }
  
  /* Alleen voor generieke layout-rijen (o.a. homepage); niet voor
     WooCommerce p.form-row — die krijgt anders label | input naast elkaar. */
  .form-row:not(.woocommerce-form-row) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-5);
  }

  /* WooCommerce address-field form-rows: undo the grid above */
  .woocommerce-address-fields .form-row,
  .woocommerce-address-fields__field-wrapper .form-row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none;
  }
  
  /* Checkbox / Radio */
  .form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    cursor: pointer;
  }
  
  .form-check__input {
    width: 16px;
    height: 16px;
    min-width: 16px;
    background: var(--clr-cockpit);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--r-sm);
    accent-color: var(--clr-amber);
    cursor: pointer;
    margin-top: 2px;
  }
  
  .form-check__label {
    font-size: var(--fs-sm);
    color: var(--txt-secondary);
    cursor: pointer;
    line-height: var(--lh-snug);
  }
  
  
  /* --- SEARCH BAR --- */
  .search-bar {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .search-bar__icon {
    position: absolute;
    left: var(--sp-4);
    color: var(--txt-muted);
    pointer-events: none;
    font-size: 14px;
  }
  
  .search-bar__input {
    background: var(--clr-cockpit);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-full);
    color: var(--txt-primary);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wide);
    padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-10);
    width: 100%;
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  }
  
  .search-bar__input:focus {
    border-color: var(--clr-amber);
    box-shadow: 0 0 0 3px var(--clr-amber-glow);
  }
  
  .search-bar__input::placeholder { color: var(--txt-muted); }
  
  
  /* --- ALERTS / NOTICES --- */
  .alert {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    border-left: 3px solid;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
  }
  
  .alert--info    { background: var(--clr-cyan-dim); border-color: var(--clr-cyan); color: var(--clr-cyan); }
  .alert--success { background: var(--clr-green-dim); border-color: var(--clr-green); color: var(--clr-green); }
  .alert--warning { background: var(--clr-amber-glow); border-color: var(--clr-amber); color: var(--clr-amber); }
  .alert--error   { background: var(--clr-red-dim); border-color: var(--clr-red); color: var(--clr-red); }
  
  .alert__icon { flex-shrink: 0; font-size: 16px; }
  .alert__body { color: var(--txt-secondary); }
  .alert__title { font-weight: var(--fw-semi); margin-bottom: 4px; }
  
  
  /* --- DIVIDERS --- */
  .divider {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    color: var(--txt-muted);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    font-family: var(--font-mono);
    margin: var(--sp-6) 0;
  }
  
  .divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--clr-border);
  }
  
  
  /* --- TABS --- */
  .tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: var(--sp-8);
  }
  
  .tab-btn {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--txt-muted);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-md) var(--r-md) 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    transition: color var(--dur-fast), background var(--dur-fast);
    cursor: pointer;
    position: relative;
    bottom: -1px;
  }
  
  .tab-btn:hover { color: var(--txt-secondary); }
  
  .tab-btn.active {
    color: var(--clr-amber);
    background: var(--clr-fuselage);
    border-color: var(--clr-border);
    border-bottom-color: var(--clr-fuselage);
  }
  
  
  /* --- PAGINATION --- */
  .pagination {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    justify-content: center;
    margin-top: var(--sp-8);
  }
  
  .page-btn {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--txt-secondary);
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-4);
    min-width: 36px;
    text-align: center;
    transition: all var(--dur-fast);
    cursor: pointer;
  }
  
  .page-btn:hover  { border-color: var(--clr-amber); color: var(--clr-amber); }
  .page-btn.active { background: var(--clr-amber); color: #000; font-weight: var(--fw-bold); border-color: var(--clr-amber); }
  .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  
  
  /* --- TOOLTIP --- */
  .tooltip {
    position: relative;
    cursor: help;
  }
  
  .tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--clr-panel);
    color: var(--txt-primary);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast), transform var(--dur-fast);
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-md);
  }
  
  .tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  
  
  /* --- MODAL --- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8,12,18,0.85);
    backdrop-filter: blur(8px);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base);
  }
  
  .modal-overlay.open {
    opacity: 1;
    pointer-events: all;
  }
  
  .modal {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--r-xl);
    width: 100%;
    max-width: 560px;
    box-shadow: var(--shadow-xl);
    transform: translateY(16px) scale(0.98);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  
  .modal-overlay.open .modal {
    transform: translateY(0) scale(1);
  }
  
  .modal__header {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .modal__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
  }
  
  .modal__close {
    width: 32px; height: 32px;
    border-radius: var(--r-md);
    color: var(--txt-muted);
    display: flex; align-items: center; justify-content: center;
    transition: color var(--dur-fast), background var(--dur-fast);
    font-size: 18px;
  }
  .modal__close:hover { color: var(--txt-primary); background: var(--clr-panel); }
  
  .modal__body   { padding: var(--sp-6); }
  .modal__footer { padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--clr-border); display: flex; gap: var(--sp-3); justify-content: flex-end; }
  
  
  /* ============================================================
     [7] FLIGHT LOG — Core data component
     ============================================================ */
  
  /* Flight table */
  .flight-table-wrap {
    overflow-x: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--clr-border);
  }
  
  .flight-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
  }
  
  .flight-table thead tr {
    background: var(--clr-panel);
    border-bottom: 1px solid var(--clr-border-light);
  }
  
  .flight-table th {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--txt-muted);
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
  }
  
  .flight-table th:hover   { color: var(--txt-secondary); }
  .flight-table th.sorted  { color: var(--clr-amber); }
  
  .flight-table th.sorted::after {
    content: ' ↓';
    font-size: 9px;
  }
  
  .flight-table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--clr-border);
    vertical-align: middle;
    color: var(--txt-secondary);
    white-space: nowrap;
  }
  
  .flight-table tbody tr {
    transition: background var(--dur-fast);
  }
  
  .flight-table tbody tr:hover {
    background: var(--clr-panel);
  }
  
  .flight-table tbody tr:last-child td { border-bottom: none; }
  
  /* Registration cell — callsign style */
  .flight-table .col-reg {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    color: var(--clr-amber);
  }
  
  /* Aircraft type cell */
  .flight-table .col-type {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--clr-cyan);
  }
  
  /* ICAO airport cell */
  .flight-table .col-icao {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--txt-secondary);
  }
  
  /* Flight number cell */
  .flight-table .col-flight {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--txt-muted);
  }
  
  /* Date cell */
  .flight-table .col-date {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--txt-muted);
  }
  
  /* --- Movement type badge --- */
  .movement {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
  }
  
  .movement--arrival {
    color: var(--clr-green);
    background: var(--clr-green-dim);
    border-color: rgba(34,197,94,0.2);
  }
  
  .movement--departure {
    color: var(--clr-red);
    background: var(--clr-red-dim);
    border-color: rgba(239,68,68,0.2);
  }
  
  .movement--arrival::before  { content: '▲ '; font-size: 6px; }
  .movement--departure::before{ content: '▼ '; font-size: 6px; }
  
  /* --- Live tracker widget --- */
  .tracker-card {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  
  .tracker-card__header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  
  /* Pulse indicator — live data */
  .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-green);
    box-shadow: 0 0 0 0 rgba(34,197,94,0.4);
    animation: pulse-green 2s infinite;
    flex-shrink: 0;
  }
  
  .live-dot--amber {
    background: var(--clr-amber);
    box-shadow: 0 0 0 0 rgba(245,158,11,0.4);
    animation: pulse-amber 2s infinite;
  }
  
  /* --- Log entry form card --- */
  .log-form {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
  }
  
  .log-form__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--txt-primary);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--clr-border);
  }
  
  /* --- Aircraft profile card --- */
  .aircraft-card {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
  }
  
  .aircraft-card:hover {
    border-color: rgba(245,158,11,0.3);
    box-shadow: 0 4px 16px rgba(245,158,11,0.08);
  }
  
  .aircraft-card__reg {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-wide);
    color: var(--clr-amber);
    line-height: 1;
  }
  
  .aircraft-card__type {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--clr-cyan);
    margin-top: var(--sp-1);
  }
  
  .aircraft-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
  }
  
  
  /* ============================================================
     [8] MEDIA / PHOTO SECTION
     ============================================================ */
  
  /* Photo grid */
  .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-4);
  }
  
  /* Masonry-ish: vary heights */
  .photo-grid--masonry {
    columns: 3;
    column-gap: var(--sp-4);
  }
  
  .photo-grid--masonry .photo-item {
    break-inside: avoid;
    margin-bottom: var(--sp-4);
  }
  
  /* Photo item */
  .photo-item {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--clr-panel);
    border: 1px solid var(--clr-border);
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  
  .photo-item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-raised);
  }
  
  .photo-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: filter var(--dur-slow);
  }
  
  .photo-item:hover img {
    filter: brightness(0.75) saturate(1.2);
  }
  
  /* Photo overlay info */
  .photo-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(8,12,18,0.9) 0%,
      rgba(8,12,18,0.3) 50%,
      transparent 100%
    );
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity var(--dur-base);
  }
  
  .photo-item:hover .photo-item__overlay { opacity: 1; }
  
  .photo-item__reg {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-wider);
    color: var(--clr-amber);
    line-height: 1;
  }
  
  .photo-item__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--txt-secondary);
    margin-top: 4px;
  }
  
  /* Pending approval badge */
  .photo-item__status {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
  }
  
  /* Photo detail / lightbox */
  .photo-detail {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--r-xl);
    overflow: hidden;
  }
  
  .photo-detail__image {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    background: var(--clr-sky-black);
  }
  
  .photo-detail__caption {
    padding: var(--sp-5) var(--sp-6);
    border-top: 1px solid var(--clr-border);
  }
  
  .photo-detail__caption-text {
    font-size: var(--fs-sm);
    color: var(--txt-secondary);
    font-style: italic;
    line-height: var(--lh-base);
  }
  
  /* Upload zone */
  .upload-zone {
    border: 2px dashed var(--clr-border-light);
    border-radius: var(--r-lg);
    padding: var(--sp-12);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-base), background var(--dur-base);
    background: transparent;
  }
  
  .upload-zone:hover,
  .upload-zone.dragover {
    border-color: var(--clr-amber);
    background: var(--clr-amber-glow);
  }
  
  .upload-zone__icon {
    font-size: 32px;
    margin-bottom: var(--sp-3);
    color: var(--txt-muted);
  }
  
  .upload-zone__text {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--txt-secondary);
    margin-bottom: var(--sp-2);
  }
  
  .upload-zone__hint {
    font-size: var(--fs-xs);
    color: var(--txt-muted);
    font-family: var(--font-mono);
  }
  
  
  /* ============================================================
     [9] MEMBERS AREA
     ============================================================ */
  
  /* Member card */
  .member-card {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
  }
  
  .member-card:hover {
    border-color: var(--clr-border-light);
    box-shadow: var(--shadow-sm);
  }
  
  .member-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: #000;
    overflow: hidden;
  }
  
  .member-avatar img { width: 100%; height: 100%; object-fit: cover; }
  
  .member-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--txt-primary);
  }
  
  .member-card__role {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--txt-muted);
    letter-spacing: var(--ls-wide);
    margin-top: 2px;
  }
  
  .member-card__stats {
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
  }
  
  .member-card__stat-val {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    color: var(--clr-amber);
    line-height: 1;
  }
  
  .member-card__stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--ls-widest);
    color: var(--txt-muted);
    text-transform: uppercase;
  }
  
  /* Members-only gate */
  .members-gate {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-xl);
    padding: var(--sp-12) var(--sp-8);
    text-align: center;
    max-width: 480px;
    margin-inline: auto;
  }
  
  .members-gate__icon {
    font-size: 40px;
    margin-bottom: var(--sp-4);
  }
  
  .members-gate__title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-bottom: var(--sp-3);
  }
  
  .members-gate__text {
    color: var(--txt-secondary);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-6);
    max-width: 36ch;
    margin-inline: auto;
  }
  
  /* Dashboard grid */
  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-8);
  }
  
  
  /* ============================================================
     [10] SHOP
     ============================================================ */
  
  /* Product card */
  .product-card {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
  }
  
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--clr-border-light);
  }
  
  .product-card__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--clr-panel);
  }
  
  .product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow);
  }
  
  .product-card:hover .product-card__image img {
    transform: scale(1.05);
    filter: brightness(1.1);
  }
  
  .product-card__body {
    padding: var(--sp-5);
  }
  
  .product-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--txt-primary);
    margin-bottom: var(--sp-2);
  }
  
  .product-card__price {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    color: var(--clr-amber);
  }
  
  .product-card__price--sale {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
  }
  
  .product-card__price-old {
    font-size: var(--fs-sm);
    color: var(--txt-muted);
    text-decoration: line-through;
    font-weight: var(--fw-normal);
  }
  
  .product-card__footer {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--clr-border);
  }
  
  /* Cart badge on nav */
  .cart-badge {
    position: relative;
    display: inline-flex;
  }
  
  .cart-badge__count {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    background: var(--clr-amber);
    color: #000;
    font-size: 9px;
    font-weight: var(--fw-black);
    font-family: var(--font-mono);
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
  }
  
  
  /* ============================================================
     [11] SIDEBAR WIDGETS
     ============================================================ */
  
  .sidebar { display: flex; flex-direction: column; gap: var(--sp-5); }
  
  .widget {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  
  .widget__title {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--txt-muted);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-panel);
  }
  
  .widget__body { padding: var(--sp-5); }
  
  /* Recent spotting widget */
  .widget-spotting-list { display: flex; flex-direction: column; gap: 2px; }
  
  .widget-spot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--clr-border);
    font-size: var(--fs-xs);
    transition: background var(--dur-fast);
  }
  
  .widget-spot:last-child { border-bottom: none; }
  .widget-spot:hover { background: var(--clr-panel); }
  
  .widget-spot__reg {
    font-family: var(--font-mono);
    color: var(--clr-amber);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
  }
  
  .widget-spot__icao {
    font-family: var(--font-mono);
    color: var(--txt-muted);
    letter-spacing: var(--ls-wide);
  }
  
  
  /* ============================================================
     [12] FOOTER
     ============================================================ */
  
  .site-footer {
    background: var(--clr-fuselage);
    border-top: 1px solid var(--clr-border);
    padding-block: var(--sp-6);
    margin-top: 0;
  }
  
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--sp-8);
    margin-bottom: var(--sp-10);
  }

  /* Alleen menu-kolommen (geen brandingkolom) */
  .footer-grid--nav-only {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
  }

  .site-footer--compact {
    padding-block: var(--sp-8);
  }
  
  .footer-brand__logo {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--txt-primary);
    margin-bottom: var(--sp-3);
    line-height: 0;
    text-decoration: none;
  }

  .footer-brand__logo-img {
    display: block;
    height: auto;
    max-height: calc(48px * 1.2);
    width: auto;
    max-width: min(calc(260px * 1.2), calc(85vw * 1.2));
  }
  
  .footer-brand__desc {
    font-size: var(--fs-sm);
    color: var(--txt-secondary);
    line-height: var(--lh-base);
    max-width: 30ch;
  }
  
  .footer-col__heading {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--clr-amber);
    margin-bottom: var(--sp-4);
  }
  
  .footer-col__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  
  .footer-col__link {
    font-size: var(--fs-sm);
    color: var(--txt-secondary);
    transition: color var(--dur-fast);
  }
  
  .footer-col__link:hover { color: var(--clr-amber); }
  
  .footer-bottom {
    padding-top: var(--sp-6);
    border-top: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--txt-muted);
    letter-spacing: var(--ls-wide);
  }
  
  .footer-callsign {
    color: var(--clr-amber);
    letter-spacing: var(--ls-widest);
  }
  
  
  /* ============================================================
     [13] UTILITIES
     ============================================================ */
  
  /* Text */
  .text-primary   { color: var(--txt-primary) !important; }
  .text-secondary { color: var(--txt-secondary) !important; }
  .text-muted     { color: var(--txt-muted) !important; }
  .text-amber     { color: var(--clr-amber) !important; }
  .text-cyan      { color: var(--clr-cyan) !important; }
  .text-green     { color: var(--clr-green) !important; }
  .text-red       { color: var(--clr-red) !important; }
  .text-center    { text-align: center; }
  .text-right     { text-align: right; }
  .text-mono      { font-family: var(--font-mono) !important; }
  .text-display   { font-family: var(--font-display) !important; }
  .text-upper     { text-transform: uppercase; }
  .text-wide      { letter-spacing: var(--ls-wider); }
  
  /* Spacing */
  .mt-4  { margin-top: var(--sp-4); }
  .mt-6  { margin-top: var(--sp-6); }
  .mt-8  { margin-top: var(--sp-8); }
  .mb-4  { margin-bottom: var(--sp-4); }
  .mb-6  { margin-bottom: var(--sp-6); }
  .mb-8  { margin-bottom: var(--sp-8); }
  .mx-auto { margin-inline: auto; }
  
  /* Display */
  .hidden         { display: none !important; }
  .sr-only        { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .overflow-x     { overflow-x: auto; }
  
  /* Visual */
  .rounded      { border-radius: var(--r-md); }
  .rounded-lg   { border-radius: var(--r-lg); }
  .rounded-full { border-radius: var(--r-full); }
  .shadow       { box-shadow: var(--shadow-md); }
  .border       { border: 1px solid var(--clr-border); }
  
  /* Amber glow highlight */
  .highlight-amber {
    background: var(--clr-amber-glow);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: var(--r-md);
    padding: var(--sp-4);
  }
  
  /* Glassmorphism panel */
  .glass {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.06);
  }
  
  
  /* ============================================================
     [14] ANIMATIONS
     ============================================================ */
  
  @keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  }
  
  @keyframes pulse-amber {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
  }
  
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slide-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  
  @keyframes radar-sweep {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  
  /* Skeleton loading */
  .skeleton {
    background: linear-gradient(90deg,
      var(--clr-panel) 25%,
      var(--clr-border-light) 50%,
      var(--clr-panel) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--r-md);
  }
  
  /* Staggered entry (use with .fade-in) */
  .anim-fade  { animation: fade-in var(--dur-slow) var(--ease-out) both; }
  .anim-slide { animation: slide-up var(--dur-slow) var(--ease-out) both; }
  
  .anim-delay-1 { animation-delay: 80ms; }
  .anim-delay-2 { animation-delay: 160ms; }
  .anim-delay-3 { animation-delay: 240ms; }
  .anim-delay-4 { animation-delay: 320ms; }
  .anim-delay-5 { animation-delay: 400ms; }
  
  
  /* ============================================================
     [15] RESPONSIVE
     ============================================================ */
  
  /* --- Tablet ≤ 1024px --- */
  @media (max-width: 1024px) {
    :root {
      --nav-h: 60px;
    }
  
    .content-grid {
      grid-template-columns: 1fr;
    }
  
    .sidebar { order: 2; }
  
    .footer-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
  }
  
  /* --- Mobile ≤ 768px --- */
  @media (max-width: 768px) {
    :root {
      --nav-h: 56px;
      --airnieuws-global-bar-h: 44px;
    }
  
    .container { padding-inline: var(--sp-4); }
  
    h1 { font-size: var(--fs-3xl); }
    h2 { font-size: var(--fs-2xl); }
  
    /* Nav mobile: klassieke header-regel (logo | acties), menu als overlay */
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--sp-3);
      min-height: var(--nav-h);
    }

    .nav__links {
      position: fixed;
      top: var(--nav-h);
      left: 0;
      right: 0;
      background: var(--clr-cockpit);
      border-bottom: 1px solid var(--clr-border);
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding: var(--sp-4);
      gap: var(--sp-1);
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
      transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base);
      z-index: calc(var(--z-sticky) - 1);
    }
  
    .nav__links.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: all;
    }
  
    .nav__link { padding: var(--sp-3) var(--sp-4); }
  
    .nav__toggle { display: flex; }
  
    .nav__toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--clr-amber); }
    .nav__toggle.active span:nth-child(2) { opacity: 0; }
    .nav__toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--clr-amber); }
  
    /* Grids */
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
  
    /* Photo grid */
    .photo-grid { grid-template-columns: repeat(2, 1fr); }
    .photo-grid--masonry { columns: 2; }
  
    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .footer-bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }
  
    /* Flight table — horizontal scroll */
    .flight-table-wrap { border-radius: var(--r-md); }
  
    /* Hero (niet de homepage-stacked variant: die heeft vaste viewport-hoogte) */
    .hero:not(.hero--stacked) { min-height: 360px; }
    .hero__title { font-size: var(--fs-2xl); }
  
    .section { padding-block: var(--sp-10); }
  }
  
  /* --- Small mobile ≤ 480px --- */
  @media (max-width: 480px) {
    .grid-4 { grid-template-columns: 1fr; }
    .photo-grid { grid-template-columns: 1fr; }
    .photo-grid--masonry { columns: 1; }
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  
    .btn--xl { font-size: var(--fs-base); padding: var(--sp-4) var(--sp-6); }
  }
  
  /* --- Print --- */
  @media print {
    body {
      background: white;
      color: black;
      background-image: none;
    }
  
    .site-header, .site-footer, .sidebar, .nav__toggle { display: none; }
    .content-grid { grid-template-columns: 1fr; }
  
    .flight-table th, .flight-table td { color: black; border-color: #ccc; }
    .col-reg, .col-type, .col-icao { color: black; background: none; }
  }
  
  
  /* ============================================================
     AIRNIEUWS.NL — home-extra.css
     Extra stijlen specifiek voor home.php
     Importeert site.css niet — werkt als aanvulling.
     ============================================================ */
  
  
  /* ============================================================
     HERO — Extra details
     ============================================================ */
  
     .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-3);
      align-items: center;
    }
    
    /* Achtergrond placeholder (als geen hero image ingesteld) */
    .hero__bg-placeholder {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 80% 40%, rgba(245,158,11,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 20% 70%, rgba(6,182,212,0.08) 0%, transparent 50%),
        linear-gradient(180deg, #ffffff 0%, var(--clr-page) 100%);
    }
    
    /* Decoratieve runway onderaan de hero */
    .hero__runway {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: repeating-linear-gradient(
        90deg,
        var(--clr-amber)    0,
        var(--clr-amber)    32px,
        transparent         32px,
        transparent         48px
      );
      opacity: 0.5;
    }

    /* Homepage: stacked hero — alleen beeld in viewport-hoogte, geen tekst op de foto */
    .hero.hero--stacked {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      min-height: 0;
      overflow: visible;
      /* Anders bedekt de gradient de .hero__bg (z-index -1) en zie je geen foto */
      background: transparent;
    }

    .hero.hero--stacked .hero__visual {
      position: relative;
      z-index: 0;
      isolation: isolate;
      flex-shrink: 0;
      width: 100%;
      min-height: 100vh;
      height: 100vh;
      min-height: 100dvh;
      height: 100dvh;
      overflow: hidden;
    }

    body.admin-bar .hero.hero--stacked .hero__visual {
      min-height: calc(100vh - 32px);
      height: calc(100vh - 32px);
      min-height: calc(100dvh - 32px);
      height: calc(100dvh - 32px);
    }

    @media screen and (max-width: 782px) {
      body.admin-bar .hero.hero--stacked .hero__visual {
        min-height: calc(100vh - 46px);
        height: calc(100vh - 46px);
        min-height: calc(100dvh - 46px);
        height: calc(100dvh - 46px);
      }
    }

    .hero.hero--stacked .hero__runway {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
    }

    .hero.hero--stacked .hero__bg {
      z-index: 0;
    }

    .hero.hero--stacked .hero__bg::after {
      display: none;
    }

    .hero.hero--stacked .hero__bg img {
      opacity: 1;
      filter: saturate(1) brightness(1);
    }

    .hero.hero--stacked.hero--photo-bg .hero__bg img {
      filter: saturate(1.02) brightness(1.02);
    }

    /* Grens hero/content — voor scroll-logica (nul hoogte, geen layout-shift) */
    .airnieuws-home-hero-scrollmark {
      height: 0;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      overflow: hidden;
      pointer-events: none;
      visibility: hidden;
    }

    /* Foto van de maand: fotograaf — fixed; hoge z-index (Elementor/footer-lagen); --home-pinned = ook na append naar body */
    .hero__fotograaf-badge--home-pinned {
      position: fixed;
      right: max(30px, env(safe-area-inset-right, 0px));
      bottom: max(30px, env(safe-area-inset-bottom, 0px));
      z-index: 9999;
      max-width: min(18.5rem, calc(100vw - var(--sp-10)));
      padding: var(--sp-3) var(--sp-4);
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
      border-radius: var(--r-md);
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: opacity 0.22s ease, visibility 0.22s ease;
    }

    .hero__fotograaf-badge--home-pinned.hero__fotograaf-badge--hero-offscreen {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .hero__fotograaf-badge--home-pinned .hero__fotograaf-badge-label {
      display: block;
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      color: #fff;
      line-height: 1.25;
      margin-bottom: var(--sp-1);
      opacity: 0.95;
    }

    .hero__fotograaf-badge--home-pinned .hero__fotograaf-badge-name {
      display: block;
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      font-weight: var(--fw-semibold);
      color: #fff;
      line-height: 1.35;
      word-break: break-word;
    }

    .hero__fotograaf-badge--home-pinned .hero__fotograaf-badge-details {
      margin-top: var(--sp-2);
      padding-top: var(--sp-2);
      border-top: 1px solid rgba(255, 255, 255, 0.28);
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
    }

    .hero__fotograaf-badge--home-pinned .hero__fotograaf-badge-detail {
      display: block;
      font-size: 10px;
      line-height: 1.35;
    }

    .hero__fotograaf-badge--home-pinned .hero__fotograaf-badge-detail-label {
      display: block;
      font-family: var(--font-display);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.88);
      font-size: 9px;
      margin-bottom: 2px;
    }

    .hero__fotograaf-badge--home-pinned .hero__fotograaf-badge-detail-value {
      display: block;
      font-family: var(--font-body);
      color: #fff;
      font-weight: var(--fw-medium);
      word-break: break-word;
    }

    @media (min-width: 768px) {
      .hero__fotograaf-badge--home-pinned {
        padding: var(--sp-3) var(--sp-5);
        max-width: min(20rem, calc(100vw - var(--sp-12)));
      }
      .hero__fotograaf-badge--home-pinned .hero__fotograaf-badge-label {
        font-size: var(--fs-xs);
      }
      .hero__fotograaf-badge--home-pinned .hero__fotograaf-badge-name {
        font-size: var(--fs-base);
      }
      .hero__fotograaf-badge--home-pinned .hero__fotograaf-badge-detail {
        font-size: var(--fs-xs);
      }
      .hero__fotograaf-badge--home-pinned .hero__fotograaf-badge-detail-label {
        font-size: 10px;
      }
    }

    /* Homepage zonder kolommen: leeg <main> neemt geen verticale ruimte */
    .site-main.site-main--home-minimal:empty {
      margin: 0;
      padding: 0;
      min-height: 0;
      flex: 0 0 auto;
    }
    
    
    /* ============================================================
       STATS BAR
       ============================================================ */
    
    .stats-bar {
      background: var(--clr-fuselage);
      border-bottom: 1px solid var(--clr-border);
      position: relative;
      z-index: var(--z-raised);
    }
    
    .stats-bar::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--clr-amber), transparent);
      opacity: 0.4;
    }
    
    .stats-bar__grid {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    
    .stats-bar__grid::-webkit-scrollbar { display: none; }
    
    .stats-bar__item {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-4) var(--sp-6);
      flex-shrink: 0;
    }
    
    .stats-bar__item--cta {
      gap: var(--sp-2);
      margin-left: auto;
    }
    
    .stats-bar__value {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      font-weight: var(--fw-black);
      color: var(--clr-amber);
      line-height: 1;
      letter-spacing: var(--ls-tight);
    }
    
    .stats-bar__label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      line-height: var(--lh-snug);
      letter-spacing: var(--ls-wide);
    }
    
    .stats-bar__label small {
      display: block;
      font-size: 9px;
      color: var(--txt-muted);
      opacity: 0.7;
      margin-top: 1px;
    }
    
    .stats-bar__live {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--clr-green);
      letter-spacing: var(--ls-wide);
    }
    
    .stats-bar__divider {
      width: 1px;
      background: var(--clr-border);
      align-self: stretch;
      margin-block: var(--sp-3);
      flex-shrink: 0;
    }
    
    
    /* ============================================================
       HOME LAYOUT GRID
       ============================================================ */
    
    .home-grid {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: var(--sp-8);
      align-items: start;
    }
    
    .home-main  { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-10); }
    .home-sidebar { display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
    
    
    /* ============================================================
       HOME SECTION HEADERS
       ============================================================ */
    
    .home-section { }
    
    .home-section__header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: var(--sp-5);
      gap: var(--sp-4);
    }
    
    .home-section__title {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      line-height: 1.1;
      margin-top: var(--sp-1);
    }
  
    /* Hoofdcontent home: titels volgen globale tekstkleur */
    .home-main .home-section__title,
    .home-main .home-section .label {
      color: var(--txt-primary);
    }
    .home-main .home-section .label {
      opacity: 0.85;
    }
    
    .home-section--compact .home-section__title {
      font-size: var(--fs-lg);
    }
    
    .home-search {
      margin-bottom: var(--sp-4);
    }
    
    
    /* ============================================================
       FLIGHT TABLE EXTRAS
       ============================================================ */
    
    /* Klikbare registratielink in tabel */
    .reg-link {
      color: var(--clr-amber);
      text-decoration: none;
      font-family: var(--font-mono);
      letter-spacing: var(--ls-wider);
      transition: color var(--dur-fast), text-shadow var(--dur-fast);
    }
    
    .reg-link:hover {
      color: #fbbf24;
      text-shadow: 0 0 8px rgba(245,158,11,0.4);
    }
    
    /* Footer onder de tabel */
    .table-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--sp-4);
      flex-wrap: wrap;
      gap: var(--sp-3);
    }
    
    
    /* ============================================================
       FOTO GRID — Homepage variant
       ============================================================ */
    
    .photo-grid--home {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-3);
    }
    
    /* Eerste foto groter (feature foto) */
    .photo-grid--home .photo-item:first-child {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
    }
    
    .photo-grid--home .photo-item:first-child img {
      aspect-ratio: 16 / 9;
    }
    
    /* Foto CTA bar */
    .foto-cta {
      display: flex;
      align-items: center;
      gap: var(--sp-4);
      margin-top: var(--sp-4);
      padding-top: var(--sp-4);
      border-top: 1px solid var(--clr-border);
    }
    
    /* Geen foto's placeholder */
    .no-fotos {
      margin-bottom: var(--sp-4);
    }
    
    
    /* ============================================================
       TOP SPOT RANGLIJST
       ============================================================ */
    
    .topspot-grid {
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
    }
    
    .topspot-item {
      display: grid;
      grid-template-columns: 28px 1fr auto auto;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-3) var(--sp-4);
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-md);
      transition: border-color var(--dur-fast), background var(--dur-fast);
    }
    
    .topspot-item:hover {
      border-color: rgba(245,158,11,0.3);
      background: var(--clr-panel);
    }
    
    .topspot-rank {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      letter-spacing: var(--ls-wide);
    }
    
    .topspot-item:nth-child(1) .topspot-rank { color: var(--clr-amber); font-weight: var(--fw-bold); }
    .topspot-item:nth-child(2) .topspot-rank { color: var(--txt-secondary); }
    .topspot-item:nth-child(3) .topspot-rank { color: #c97820; }
    
    .topspot-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    
    .topspot-reg {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--clr-amber);
      text-decoration: none;
      transition: color var(--dur-fast);
      white-space: nowrap;
    }
    
    .topspot-reg:hover { color: #fbbf24; }
    
    .topspot-type {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--clr-cyan);
      letter-spacing: var(--ls-wide);
    }
    
    .topspot-bar-wrap {
      width: 80px;
      height: 4px;
      background: var(--clr-border);
      border-radius: var(--r-full);
      overflow: hidden;
    }
    
    .topspot-bar {
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--clr-amber), var(--clr-orange));
      border-radius: var(--r-full);
      transition: width 0.8s var(--ease-out);
    }
    
    .topspot-bar.bar--animate {
      width: var(--bar-w);
    }
    
    .topspot-count {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--txt-secondary);
      white-space: nowrap;
      min-width: 32px;
      text-align: right;
    }
    
    
    /* ============================================================
       SIDEBAR WIDGETS — Extra
       ============================================================ */
    
    /* Invoer widget accent */
    .widget--invoer {
      border-color: rgba(245,158,11,0.25);
      background: linear-gradient(
        180deg,
        rgba(245,158,11,0.04) 0%,
        var(--clr-fuselage) 40%
      );
    }
    
    .widget--invoer .widget__title {
      color: var(--clr-amber);
      border-bottom-color: rgba(245,158,11,0.2);
    }
    
    /* Join widget */
    .widget--join {
      border-color: rgba(6,182,212,0.2);
    }
    
    .widget--join .widget__title {
      background: var(--clr-cyan-dim);
      color: var(--clr-cyan);
      border-bottom-color: rgba(6,182,212,0.2);
    }
    
    .widget-join__text {
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
      line-height: var(--lh-base);
    }
    
    /* Archief zoekwidget */
    .widget--search .widget__title {
      background: var(--clr-panel);
    }
    
    /* Quick form spacing */
    .quick-form .form-group {
      margin-bottom: var(--sp-4);
    }
    
    .quick-form .form-row .form-group {
      margin-bottom: 0;
    }
    
    
    /* ============================================================
       TYPE DISTRIBUTION BAR CHART
       ============================================================ */
    
    .type-dist {
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
    }
    
    .type-dist__row {
      display: grid;
      grid-template-columns: 58px 1fr 28px;
      align-items: center;
      gap: var(--sp-3);
    }
    
    .type-dist__label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-secondary);
      letter-spacing: var(--ls-wide);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .type-dist__bar-wrap {
      height: 6px;
      background: var(--clr-border);
      border-radius: var(--r-full);
      overflow: hidden;
    }
    
    .type-dist__bar {
      height: 100%;
      width: 0;
      background: var(--bar-color, var(--clr-amber));
      border-radius: var(--r-full);
      transition: width 0.9s var(--ease-out) 0.1s;
    }
    
    .type-dist__bar.bar--animate {
      width: var(--bar-w);
    }
    
    .type-dist__val {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--txt-muted);
      text-align: right;
    }
    
    
    /* ============================================================
       RESPONSIVE — home-extra overrides
       ============================================================ */
    
    @media (max-width: 1100px) {
      .home-grid {
        grid-template-columns: 1fr 260px;
        gap: var(--sp-6);
      }
    }
    
    @media (max-width: 900px) {
      .home-grid {
        grid-template-columns: 1fr;
      }
    
      .home-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    
      /* Widget die vol moet blijven op mobile */
      .widget--invoer,
      .widget--join {
        grid-column: 1 / -1;
      }
    
      .photo-grid--home {
        grid-template-columns: repeat(2, 1fr);
      }
    
      .photo-grid--home .photo-item:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
      }
    
      .stats-bar__item { padding: var(--sp-3) var(--sp-4); }
      .stats-bar__value { font-size: var(--fs-xl); }
    }
    
    @media (max-width: 640px) {
      .home-sidebar {
        grid-template-columns: 1fr;
      }
    
      .stats-bar__grid {
        justify-content: flex-start;
      }
    
      .stats-bar__divider { display: none; }
    
      .stats-bar__item--cta { display: none; }
    
      .topspot-item {
        grid-template-columns: 24px 1fr auto;
      }
      .topspot-bar-wrap { display: none; }
    
      .photo-grid--home {
        grid-template-columns: 1fr;
      }
    
      .photo-grid--home .photo-item:first-child {
        grid-column: auto;
      }
    
      .table-footer {
        flex-direction: column;
        align-items: flex-start;
      }
    }
    
    @media (max-width: 480px) {
      .hero__actions {
        flex-direction: column;
        align-items: flex-start;
      }
    
      .hero__actions .btn {
        width: 100%;
        justify-content: center;
      }
    
      .home-section__header {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  
  
  /* ============================================================
     HELLO ELEMENTOR — header & footer volledige breedte
     Overschrijft theme-containers zodat header/footer edge-to-edge zijn
     ============================================================ */
  
  /* Theme/page wrappers: geen max-width, geen extra boven/onderruimte */
  body .site,
  body #page,
  body .elementor-page .site,
  body .elementor-page #page {
    max-width: 100% !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Header/footer altijd zichtbaar op WooCommerce (geen display:none van andere templates) */
  body.woocommerce .site-wrap .site-header,
  body.woocommerce-page .site-wrap .site-header,
  body.woocommerce-account .site-wrap .site-header {
    display: block !important;
    visibility: visible !important;
  }

  /* Archief slider (page-slider.php): header & footer expliciet tonen */
  body.page-template-page-slider-php .site-wrap .site-header,
  body.page-template-page-slider-php .site-wrap .site-footer,
  body.airnieuws-archief-slider .site-wrap .site-header,
  body.airnieuws-archief-slider .site-wrap .site-footer {
    display: block !important;
    visibility: visible !important;
  }

  .airnieuws-slider-page {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .airnieuws-slider-page .slider-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Onze header en footer altijd volledige breedte */
  .site-header,
  .site-footer,
  #site-header,
  header.site-header,
  footer.site-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Break uit Hello Elementor / Block containers */
  .elementor-location-header,
  .elementor-location-footer,
  .elementor-section-wrap .elementor-section:has(.site-header),
  .elementor-section-wrap .elementor-section:has(.site-footer),
  .e-con:has(.site-header),
  .e-con:has(.site-footer),
  .elementor-container:has(.site-header),
  .elementor-container:has(.site-footer) {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Binnen header/footer mag .container wel gecentreerd blijven */
  .site-header .container,
  .site-footer .container {
    width: 100% !important;
    max-width: var(--max-w-site, 1380px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--sp-6, 24px) !important;
    padding-right: var(--sp-6, 24px) !important;
  }
  
  /* ============================================================
     WOOCOMMERCE — Één bron voor layout (overschrijft Hello Elementor)
     Content boxed (--max-w-site); wrappers volle breedte.
     ============================================================ */
  body.woocommerce-page .site,
  body.woocommerce-page #page,
  body.woocommerce .site,
  body.woocommerce #page,
  body.woocommerce-page .site-main,
  body.woocommerce-page #main,
  body.woocommerce .site-main,
  body.woocommerce #main,
  body.woocommerce-page .content-area,
  body.woocommerce .content-area {
    max-width: 100% !important;
    width: 100% !important;
  }
  body.woocommerce-page .site-main,
  body.woocommerce-page #main,
  body.woocommerce .site-main,
  body.woocommerce #main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  body.woocommerce-page .woocommerce,
  body.woocommerce .woocommerce,
  .shop-wrap,
  .shop-layout,
  .woocommerce-cart-form,
  .woocommerce-checkout {
    max-width: 100% !important;
    width: 100% !important;
  }
  body.woocommerce-page .woocommerce > *:first-child,
  body.woocommerce .woocommerce > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Boxed content (zelfde breedte als header) */
  body.woocommerce-page .shop-wrap .container,
  body.woocommerce-page .shop-hero .container,
  body.woocommerce-page .page-header-compact .container,
  body.woocommerce .shop-wrap .container,
  body.woocommerce .shop-hero .container,
  body.woocommerce-account .myaccount-section .container,
  body.woocommerce-account .page-header-compact .container,
  body.woocommerce-account .sub-nav .container,
  body.woocommerce-account .shop-wrap .container,
  body.woocommerce-page .cart-section .container,
  body.woocommerce-cart .shop-wrap .container,
  body.woocommerce-checkout .shop-wrap .container {
    max-width: var(--max-w-site, 1380px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* ============================================================
     AIRNIEUWS.NL — 404.css
     Voeg toe aan het einde van site.css
     Concept: verlaten luchthaven — flip-bord 404, radar, nacht
     ============================================================ */
  
  
  /* ── Page wrapper ────────────────────────────────────────── */
  
  .page-404 {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--clr-sky-black);
      padding: var(--sp-12) var(--sp-6);
  }
  
  
  /* ── Achtergrond: radar + grid ───────────────────────────── */
  
  .e404-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
  }
  
  /* Subtiel perspectief-grid */
  .e404-grid {
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(rgba(6,182,212,.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(6,182,212,.04) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
  }
  
  /* Radar cirkel-systeem */
  .e404-radar {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(640px, 90vw);
      aspect-ratio: 1;
  }
  
  .e404-radar__ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(6,182,212,.1);
      transform: scale(1);
      animation: radar-expand 3.6s ease-out infinite;
  }
  
  .e404-radar__ring--2 { animation-delay: 1.2s; }
  .e404-radar__ring--3 { animation-delay: 2.4s; }
  
  @keyframes radar-expand {
      0%   { transform: scale(.1); opacity: .5; }
      100% { transform: scale(1);  opacity: 0; }
  }
  
  /* Sweep-lijn */
  .e404-radar__sweep {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(
          from 0deg,
          transparent 0deg,
          transparent 310deg,
          rgba(6,182,212,.06) 330deg,
          rgba(6,182,212,.18) 350deg,
          rgba(6,182,212,.06) 360deg
      );
      animation: radar-rotate 4s linear infinite;
  }
  
  @keyframes radar-rotate {
      to { transform: rotate(360deg); }
  }
  
  /* Centerpunt */
  .e404-radar__center {
      position: absolute;
      top: 50%; left: 50%;
      width: 6px; height: 6px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: var(--clr-cyan);
      box-shadow: 0 0 12px var(--clr-cyan), 0 0 24px rgba(6,182,212,.4);
      animation: center-pulse 2s ease-in-out infinite;
  }
  
  @keyframes center-pulse {
      0%, 100% { box-shadow: 0 0 8px var(--clr-cyan),  0 0 16px rgba(6,182,212,.3); }
      50%       { box-shadow: 0 0 20px var(--clr-cyan), 0 0 40px rgba(6,182,212,.6); }
  }
  
  
  /* ── Vliegtuigsilhouet ───────────────────────────────────── */
  
  .e404-plane {
      position: absolute;
      top: 18%;
      right: 8%;
      width: min(340px, 38vw);
      color: var(--clr-amber);
      opacity: .18;
      transform: translateX(60px);
      animation: plane-drift 12s ease-in-out infinite alternate;
  }
  
  @keyframes plane-drift {
      0%   { transform: translateX(60px)  translateY(0px);  opacity: .12; }
      50%  { transform: translateX(80px)  translateY(-8px); opacity: .2; }
      100% { transform: translateX(100px) translateY(4px);  opacity: .1; }
  }
  
  
  /* ── Hoofd-content wrapper ───────────────────────────────── */
  
  .e404-wrap {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 680px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-10);
      text-align: center;
  }
  
  
  /* ── Flip-bord: 404 ──────────────────────────────────────── */
  
  .e404-board {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-3);
  }
  
  .e404-board__frame {
      display: flex;
      gap: var(--sp-3);
  }
  
  .e404-board__cell {
      width: clamp(72px, 14vw, 120px);
      aspect-ratio: .78 / 1;
      background: var(--clr-panel);
      border: 1px solid var(--clr-border-light);
      border-radius: var(--r-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      box-shadow:
          inset 0 1px 0 rgba(255,255,255,.04),
          0 8px 32px rgba(0,0,0,.6),
          0 0 0 1px rgba(245,158,11,.08);
  }
  
  /* Horizontale middenlijn — split-flap effect */
  .e404-board__cell::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      top: 50%;
      height: 1px;
      background: rgba(0,0,0,.5);
      z-index: 2;
  }
  
  /* Top-half schaduw */
  .e404-board__cell::before {
      content: '';
      position: absolute;
      inset: 0 0 50% 0;
      background: rgba(0,0,0,.2);
      z-index: 1;
      pointer-events: none;
  }
  
  .e404-board__char {
      font-family: var(--font-display);
      font-size: clamp(48px, 9vw, 88px);
      font-weight: var(--fw-black);
      letter-spacing: -.02em;
      line-height: 1;
      color: var(--clr-amber);
      text-shadow: 0 0 32px rgba(245,158,11,.4);
      position: relative;
      z-index: 3;
      animation: flip-in var(--dur-xslow) var(--ease-out) var(--delay, 0s) both;
  }
  
  @keyframes flip-in {
      0%   { opacity: 0; transform: rotateX(-90deg) scale(.8); }
      60%  { transform: rotateX(12deg); }
      100% { opacity: 1; transform: rotateX(0deg) scale(1); }
  }
  
  .e404-board__label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-widest);
      color: var(--txt-muted);
      text-transform: uppercase;
      background: var(--clr-panel);
      border: 1px solid var(--clr-border);
      padding: var(--sp-1) var(--sp-5);
      border-radius: var(--r-full);
  }
  
  
  /* ── Content blok ────────────────────────────────────────── */
  
  .e404-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-5);
      animation: slide-up var(--dur-slow) var(--ease-out) .4s both;
  }
  
  /* Eyebrow */
  .e404-eyebrow {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-widest);
      color: var(--clr-amber);
      text-transform: uppercase;
      max-width: none;
  }
  
  .e404-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--clr-red);
      box-shadow: 0 0 8px var(--clr-red);
      animation: blink-dot 1.4s ease-in-out infinite;
      flex-shrink: 0;
  }
  
  @keyframes blink-dot {
      0%, 100% { opacity: 1; }
      50%       { opacity: .2; }
  }
  
  /* Hoofdtitel */
  .e404-title {
      font-family: var(--font-display);
      font-size: clamp(var(--fs-3xl), 7vw, 72px);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-tight);
      text-transform: uppercase;
      line-height: .95;
      color: var(--txt-primary);
      margin: 0;
  }
  
  .e404-title br + * ,
  .e404-title {
      background: linear-gradient(160deg, var(--txt-primary) 40%, var(--txt-secondary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }
  
  /* Subtekst */
  .e404-sub {
      font-size: var(--fs-md);
      color: var(--txt-secondary);
      line-height: var(--lh-base);
      max-width: 46ch;
      text-align: center;
  }
  
  
  /* ── ICAO-stijl status display ───────────────────────────── */
  
  .e404-status {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      padding: var(--sp-4) var(--sp-6);
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
  }
  
  .e404-status::before {
      content: '';
      display: block;
      height: 2px;
      background: linear-gradient(90deg, var(--clr-red), transparent);
      border-radius: var(--r-full);
      margin-bottom: var(--sp-2);
  }
  
  .e404-status__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-wide);
  }
  
  .e404-status__key {
      color: var(--txt-muted);
      text-transform: uppercase;
      flex-shrink: 0;
  }
  
  .e404-status__val {
      color: var(--clr-cyan);
      font-weight: var(--fw-medium);
      text-align: right;
  }
  
  .e404-status__val--red {
      color: var(--clr-red);
  }
  
  .e404-status__val--blink {
      color: var(--clr-amber);
      animation: blink-val 1.8s step-end infinite;
  }
  
  @keyframes blink-val {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0; }
  }
  
  
  /* ── Actieknoppen ────────────────────────────────────────── */
  
  .e404-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: var(--sp-3);
  }
  
  
  /* ── Responsive ──────────────────────────────────────────── */
  
  @media (max-width: 600px) {
      .e404-wrap       { gap: var(--sp-8); }
      .e404-board__frame { gap: var(--sp-2); }
  
      .e404-actions {
          flex-direction: column;
          width: 100%;
      }
      .e404-actions .btn {
          width: 100%;
          justify-content: center;
      }
  
      .e404-plane { display: none; }
  
      .e404-status { max-width: 100%; }
  }
  
  @media (prefers-reduced-motion: reduce) {
      .e404-radar__ring,
      .e404-radar__sweep,
      .e404-radar__center,
      .e404-plane,
      .e404-board__char,
      .e404-content,
      .e404-dot,
      .e404-status__val--blink {
          animation: none !important;
          opacity: 1 !important;
          transform: none !important;
      }
  }
  
  
  /* ============================================================
     AIRNIEUWS.NL — single.css
     Voeg toe aan het einde van site.css
     Stijlen voor single.php — artikel / nieuwsbericht
     ============================================================ */
  
  
  /* ── Page wrapper ────────────────────────────────────────── */
  
  .single-wrap {
      padding-bottom: var(--sp-20);
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     ARTICLE HERO
  ═══════════════════════════════════════════════════════════ */
  
  .article-hero {
      position: relative;
      padding-top: calc(var(--nav-h) + var(--sp-12));
      padding-bottom: var(--sp-12);
      overflow: hidden;
      background: linear-gradient(160deg, var(--clr-cockpit) 0%, var(--clr-sky-black) 100%);
      margin-bottom: var(--sp-10);
  }
  
  /* Foto achtergrond */
  .article-hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
  }
  
  .article-hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .18;
      filter: saturate(.5) brightness(.6);
  }
  
  .article-hero__bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
          to bottom,
          rgba(8,12,18,.4) 0%,
          rgba(8,12,18,.75) 60%,
          var(--clr-sky-black) 100%
      );
  }
  
  /* Decoratieve amber-lijn bovenaan */
  .article-hero::before {
      content: '';
      position: absolute;
      top: var(--nav-h);
      left: 0; right: 0;
      height: 2px;
      background: repeating-linear-gradient(
          90deg,
          var(--clr-amber) 0,
          var(--clr-amber) 24px,
          transparent 24px,
          transparent 36px
      );
      opacity: .35;
      z-index: 1;
  }
  
  .article-hero__inner {
      position: relative;
      z-index: 1;
      max-width: 800px;
  }
  
  .article-hero__breadcrumb {
      margin-bottom: var(--sp-5);
  }
  
  .article-hero__cats {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2);
      margin-bottom: var(--sp-4);
  }
  
  .article-hero__title {
      font-family: var(--font-display);
      font-size: clamp(var(--fs-2xl), 5vw, 52px);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-tight);
      text-transform: uppercase;
      line-height: 1.0;
      color: var(--txt-primary);
      margin-bottom: var(--sp-6);
  }
  
  
  /* ── Article meta bar ────────────────────────────────────── */
  
  .article-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--sp-3);
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-wide);
      color: var(--txt-muted);
  }
  
  .article-meta__author {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
  }
  
  .article-meta__avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid var(--clr-border-light);
      object-fit: cover;
      flex-shrink: 0;
  }
  
  .article-meta__name {
      color: var(--txt-secondary);
      font-weight: var(--fw-medium);
  }
  
  .article-meta__sep     { color: var(--clr-border-light); }
  .article-meta__date    { color: var(--txt-secondary); }
  .article-meta__read    { color: var(--clr-amber); }
  .article-meta__updated { color: var(--txt-muted); font-style: italic; }
  
  
  /* ═══════════════════════════════════════════════════════════
     CONTENT GRID
  ═══════════════════════════════════════════════════════════ */
  
  .single-grid {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: var(--sp-10);
      align-items: start;
  }
  
  .single-main  { min-width: 0; }
  .single-sidebar {
      position: sticky;
      top: calc(var(--nav-h) + var(--sp-6));
      display: flex;
      flex-direction: column;
      gap: var(--sp-5);
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     SHARE BAR (bovenaan artikel)
  ═══════════════════════════════════════════════════════════ */
  
  .article-share {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      margin-bottom: var(--sp-6);
      padding-bottom: var(--sp-5);
      border-bottom: 1px solid var(--clr-border);
  }
  
  .article-share__label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-muted);
      margin-right: var(--sp-2);
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     ARTICLE BODY — Typografie & content
  ═══════════════════════════════════════════════════════════ */
  
  .article-content {
      font-size: var(--fs-md);
      line-height: var(--lh-loose);
      color: var(--txt-secondary);
  }
  
  /* Headings binnen content */
  .article-content h2 {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin: var(--sp-10) 0 var(--sp-4);
      padding-top: var(--sp-6);
      border-top: 1px solid var(--clr-border);
      position: relative;
  }
  
  .article-content h2::before {
      content: '';
      position: absolute;
      top: -1px; left: 0;
      width: 48px; height: 2px;
      background: var(--clr-amber);
  }
  
  .article-content h3 {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin: var(--sp-8) 0 var(--sp-3);
  }
  
  .article-content h4 {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      color: var(--txt-primary);
      margin: var(--sp-6) 0 var(--sp-3);
      text-transform: uppercase;
      letter-spacing: var(--ls-wide);
  }
  
  /* Paragrafen */
  .article-content p {
      max-width: 72ch;
      color: var(--txt-secondary);
      margin-bottom: var(--sp-5);
  }
  
  /* Lead paragraaf (eerste na h1) */
  .article-content > p:first-child {
      font-size: var(--fs-lg);
      color: var(--txt-primary);
      line-height: var(--lh-snug);
      font-weight: var(--fw-medium);
      border-left: 3px solid var(--clr-amber);
      padding-left: var(--sp-5);
      margin-bottom: var(--sp-8);
  }
  
  /* Links */
  .article-content a {
      color: var(--clr-amber);
      text-decoration: underline;
      text-decoration-color: rgba(245,158,11,.3);
      text-underline-offset: 3px;
      transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
  }
  
  .article-content a:hover {
      color: #fbbf24;
      text-decoration-color: var(--clr-amber);
  }
  
  /* Lijsten */
  .article-content ul,
  .article-content ol {
      padding-left: var(--sp-6);
      margin-bottom: var(--sp-5);
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
  }
  
  .article-content ul { list-style: none; }
  .article-content ol { list-style: decimal; }
  .article-content ol li { color: var(--txt-secondary); padding-left: var(--sp-2); }
  
  .article-content ul li {
      color: var(--txt-secondary);
      padding-left: var(--sp-5);
      position: relative;
  }
  
  .article-content ul li::before {
      content: '›';
      position: absolute;
      left: 0;
      color: var(--clr-amber);
      font-weight: var(--fw-bold);
      font-family: var(--font-display);
  }
  
  /* Blockquote */
  .article-content blockquote {
      background: var(--clr-fuselage);
      border-left: 3px solid var(--clr-amber);
      border-radius: 0 var(--r-md) var(--r-md) 0;
      padding: var(--sp-5) var(--sp-6);
      margin: var(--sp-8) 0;
      font-size: var(--fs-lg);
      font-style: italic;
      color: var(--txt-primary);
      position: relative;
  }
  
  .article-content blockquote::before {
      content: '"';
      position: absolute;
      top: -8px; left: var(--sp-5);
      font-family: var(--font-display);
      font-size: 64px;
      color: var(--clr-amber);
      opacity: .2;
      line-height: 1;
  }
  
  .article-content blockquote cite {
      display: block;
      margin-top: var(--sp-3);
      font-size: var(--fs-xs);
      font-style: normal;
      font-family: var(--font-mono);
      color: var(--txt-muted);
      letter-spacing: var(--ls-wide);
  }
  
  /* Code inline: zie algemene .article-content code boven (dubbele regel verwijderd) */
  
  /* Code blok */
  .article-content pre {
      background: var(--clr-panel);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      padding: var(--sp-5) var(--sp-6);
      overflow-x: auto;
      margin: var(--sp-6) 0;
  }
  
  .article-content pre code {
      background: none;
      padding: 0;
      color: var(--txt-primary);
      font-size: var(--fs-sm);
      line-height: var(--lh-loose);
  }
  
  /* Afbeeldingen */
  .article-content img {
      width: 100%;
      height: auto;
      border-radius: var(--r-lg);
      border: 1px solid var(--clr-border);
      margin: var(--sp-6) 0;
  }
  
  .article-content figure {
      margin: var(--sp-8) 0;
  }
  
  .article-content figcaption {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      text-align: center;
      margin-top: var(--sp-3);
      letter-spacing: var(--ls-wide);
  }
  
  /* Horizontale lijn */
  .article-content hr {
      border: none;
      border-top: 1px solid var(--clr-border);
      margin: var(--sp-10) 0;
      position: relative;
  }
  
  .article-content hr::after {
      content: '✈';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--clr-sky-black);
      padding: 0 var(--sp-3);
      color: var(--clr-amber);
      opacity: .5;
      font-size: var(--fs-sm);
  }
  
  /* Tabel in content */
  .article-content table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--fs-sm);
      margin: var(--sp-6) 0;
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid var(--clr-border);
  }
  
  .article-content th {
      background: var(--clr-panel);
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-muted);
      padding: var(--sp-3) var(--sp-4);
      text-align: left;
      border-bottom: 1px solid var(--clr-border-light);
  }
  
  .article-content td {
      padding: var(--sp-3) var(--sp-4);
      border-bottom: 1px solid var(--clr-border);
      color: var(--txt-secondary);
      vertical-align: middle;
  }
  
  .article-content tr:last-child td { border-bottom: none; }
  .article-content tbody tr:hover    { background: var(--clr-panel); }
  
  
  /* ── Pagina-links ─────────────────────────────────────────── */
  
  .article-pages {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      margin: var(--sp-8) 0;
      flex-wrap: wrap;
  }
  
  .article-pages__label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      letter-spacing: var(--ls-wide);
      margin-right: var(--sp-2);
  }
  
  
  /* ── Tags ────────────────────────────────────────────────── */
  
  .article-tags {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--sp-2);
      margin-top: var(--sp-8);
      padding-top: var(--sp-6);
      border-top: 1px solid var(--clr-border);
  }
  
  .article-tags__label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-muted);
      margin-right: var(--sp-2);
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     AUTEUR CARD
  ═══════════════════════════════════════════════════════════ */
  
  .author-card {
      display: flex;
      gap: var(--sp-5);
      align-items: flex-start;
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      padding: var(--sp-6);
      margin-top: var(--sp-8);
      position: relative;
      overflow: hidden;
  }
  
  .author-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--clr-amber), transparent);
  }
  
  .author-card__avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 2px solid var(--clr-border-light);
      object-fit: cover;
      flex-shrink: 0;
  }
  
  .author-card__body {
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
      min-width: 0;
  }
  
  .author-card__role { margin-bottom: var(--sp-1); }
  
  .author-card__name {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
  }
  
  .author-card__bio {
      font-size: var(--fs-sm);
      color: var(--txt-muted);
      line-height: var(--lh-base);
      max-width: 52ch;
      margin-top: var(--sp-2);
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     VORIGE / VOLGENDE NAVIGATIE
  ═══════════════════════════════════════════════════════════ */
  
  .article-nav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-4);
      margin-top: var(--sp-10);
      padding-top: var(--sp-6);
      border-top: 1px solid var(--clr-border);
  }
  
  .article-nav__item {
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
      padding: var(--sp-5);
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      text-decoration: none;
      transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-fast);
  }
  
  .article-nav__item:hover {
      border-color: rgba(245,158,11,.35);
      background: var(--clr-panel);
      transform: translateY(-2px);
  }
  
  .article-nav__item--next {
      text-align: right;
  }
  
  .article-nav__dir {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--clr-amber);
  }
  
  .article-nav__title {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      line-height: var(--lh-snug);
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     SIDEBAR: INHOUDSOPGAVE
  ═══════════════════════════════════════════════════════════ */
  
  .toc-items {
      list-style: none;
      display: flex;
      flex-direction: column;
      padding: var(--sp-3) 0;
  }
  
  .toc-item { border-left: 2px solid var(--clr-border); }
  .toc-item--h3 { border-left-color: transparent; }
  
  .toc-link {
      display: block;
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-wide);
      color: var(--txt-muted);
      padding: var(--sp-2) var(--sp-4);
      text-decoration: none;
      transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
      line-height: var(--lh-snug);
  }
  
  .toc-item--h3 .toc-link { padding-left: var(--sp-8); font-size: 10px; }
  
  .toc-link:hover          { color: var(--txt-secondary); background: var(--clr-panel); }
  .toc-link--active        { color: var(--clr-amber) !important; }
  
  .toc-item:has(.toc-link--active) {
      border-left-color: var(--clr-amber);
  }
  
  
  /* ── Sidebar: sociale deel-knoppen ───────────────────────── */
  
  .share-stack {
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
  }
  
  .share-btn {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      text-decoration: none;
      padding: var(--sp-3) var(--sp-4);
      border-radius: var(--r-md);
      border: 1px solid var(--clr-border);
      background: transparent;
      color: var(--txt-secondary);
      cursor: pointer;
      transition: all var(--dur-fast);
      width: 100%;
  }
  
  .share-btn:hover           { background: var(--clr-panel); color: var(--txt-primary); border-color: var(--clr-border-light); }
  .share-btn--x:hover        { border-color: rgba(255,255,255,.2); color: var(--txt-primary); }
  .share-btn--fb:hover       { border-color: rgba(59,130,246,.4); color: #60a5fa; }
  .share-btn--copy:hover     { border-color: rgba(245,158,11,.3); color: var(--clr-amber); }
  
  /* Recente berichten in sidebar */
  .widget-recent__title {
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--txt-secondary);
      text-decoration: none;
      line-height: var(--lh-snug);
      display: block;
      transition: color var(--dur-fast);
  }
  
  .widget-recent__title:hover { color: var(--clr-amber); }
  
  
  /* ═══════════════════════════════════════════════════════════
     GERELATEERDE BERICHTEN
  ═══════════════════════════════════════════════════════════ */
  
  .related-section {
      padding-top: var(--sp-16);
      border-top: 1px solid var(--clr-border);
      margin-top: var(--sp-16);
  }
  
  .related-section__header {
      margin-bottom: var(--sp-6);
  }
  
  .related-section__title {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin-top: var(--sp-1);
  }
  
  .related-card__img-wrap {
      display: block;
      overflow: hidden;
      aspect-ratio: 16 / 9;
  }
  
  .related-card__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow);
  }
  
  .related-card:hover .related-card__img {
      transform: scale(1.04);
      filter: brightness(1.1);
  }
  
  .related-card__title {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      line-height: var(--lh-snug);
      margin-bottom: var(--sp-2);
  }
  
  .related-card__title a {
      color: var(--txt-primary);
      text-decoration: none;
      transition: color var(--dur-fast);
  }
  
  .related-card__title a:hover { color: var(--clr-amber); }
  
  .related-card__excerpt {
      font-size: var(--fs-sm);
      color: var(--txt-muted);
      line-height: var(--lh-base);
      max-width: none;
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     COMMENTS (WordPress standaard override)
  ═══════════════════════════════════════════════════════════ */
  
  .article-comments {
      margin-top: var(--sp-12);
      padding-top: var(--sp-8);
      border-top: 1px solid var(--clr-border);
  }
  
  .article-comments .comments-title,
  .article-comments .comment-reply-title {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin-bottom: var(--sp-6);
  }
  
  .article-comments .comment {
      padding: var(--sp-5);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      background: var(--clr-fuselage);
      margin-bottom: var(--sp-4);
  }
  
  .article-comments .comment-author .fn {
      font-family: var(--font-display);
      font-weight: var(--fw-bold);
      color: var(--txt-primary);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      font-style: normal;
  }
  
  .article-comments .comment-meta {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      letter-spacing: var(--ls-wide);
      margin-bottom: var(--sp-3);
  }
  
  .article-comments .comment-content p {
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
  }
  
  .article-comments .comment-form input,
  .article-comments .comment-form textarea {
      background: var(--clr-cockpit);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-md);
      color: var(--txt-primary);
      padding: var(--sp-3) var(--sp-4);
      width: 100%;
      font-family: var(--font-body);
      font-size: var(--fs-base);
      outline: none;
      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
      margin-bottom: var(--sp-4);
  }
  
  .article-comments .comment-form input:focus,
  .article-comments .comment-form textarea:focus {
      border-color: var(--clr-amber);
      box-shadow: 0 0 0 3px var(--clr-amber-glow);
  }
  
  .article-comments .comment-form label {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-secondary);
      display: block;
      margin-bottom: var(--sp-2);
  }
  
  .article-comments #submit {
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
      color: #0d0d0d;
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      padding: var(--sp-3) var(--sp-8);
      border: none;
      border-radius: var(--r-md);
      cursor: pointer;
      width: auto;
      transition: box-shadow var(--dur-base), transform var(--dur-fast);
  }
  
  .article-comments #submit:hover {
      box-shadow: var(--shadow-amber);
      transform: translateY(-1px);
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════════════════════ */
  
  @media (max-width: 1024px) {
      .single-grid {
          grid-template-columns: 1fr 240px;
          gap: var(--sp-8);
      }
  }
  
  @media (max-width: 860px) {
      .single-grid {
          grid-template-columns: 1fr;
      }
  
      .single-sidebar {
          position: static;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
      }
  
      /* TOC en share naast elkaar */
      .widget--toc { grid-column: 1 / -1; }
  
      .article-hero__title {
          font-size: clamp(var(--fs-xl), 6vw, var(--fs-3xl));
      }
  
      .related-grid { grid-template-columns: 1fr 1fr !important; }
  }
  
  @media (max-width: 600px) {
      .article-hero {
          padding-top: calc(var(--nav-h) + var(--sp-8));
          padding-bottom: var(--sp-8);
      }
  
      .article-nav {
          grid-template-columns: 1fr;
      }
  
      .single-sidebar {
          grid-template-columns: 1fr;
      }
  
      .article-meta { gap: var(--sp-2); }
      .article-meta__sep { display: none; }
      .article-meta { flex-direction: column; align-items: flex-start; }
  
      .related-grid { grid-template-columns: 1fr !important; }
  
      .article-content > p:first-child {
          font-size: var(--fs-base);
      }
  }
  
  @media (prefers-reduced-motion: reduce) {
      .related-card__img,
      .article-nav__item,
      .share-btn { transition: none; }
  }
  
  /* ============================================================
     AIRNIEUWS.NL — over-ons.css
     Voeg toe aan het einde van site.css
     Stijlen voor page-over-ons.php
     ============================================================ */
  
  
  /* ── Page wrapper ────────────────────────────────────────── */
  
  .over-wrap {
      padding-bottom: 0;   /* over-cta-section heeft eigen padding — geen dubbele ruimte */
  }

  /* Hello Elementor voegt na .over-wrap een lege .page-content toe met eigen padding */
  body:has(.over-wrap) .page-content:not(:has(.over-wrap)) {
      padding: 0 !important;
      margin: 0 !important;
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     PAGE HERO
  ═══════════════════════════════════════════════════════════ */
  
  .over-hero {
      position: relative;
      padding-top: calc(var(--nav-h) + var(--sp-16));
      padding-bottom: var(--sp-16);
      overflow: hidden;
      background: var(--clr-cockpit);
  }
  
  /* Achtergrond: diagonale lijn-structuur als logboek-papier */
  .over-hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
          linear-gradient(160deg, #ffffff 0%, var(--clr-page) 70%);
  }
  
  .over-hero__noise {
      position: absolute;
      inset: 0;
      background-image:
          repeating-linear-gradient(
              0deg,
              transparent,
              transparent 28px,
              rgba(245,158,11,.03) 28px,
              rgba(245,158,11,.03) 29px
          );
      opacity: 1;
  }

  /* Logo als diagonaal watermerk over de hele hero (30%); inset groter i.v.m. rotatie + overflow clip */
  .over-hero__watermark {
      position: absolute;
      z-index: 0;
      pointer-events: none;
      user-select: none;
      inset: -30%;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0.3;
      transform: rotate(-22deg);
      transform-origin: center center;
  }

  @media (max-width: 600px) {
      .over-hero__watermark {
          inset: -35%;
          transform: rotate(-18deg);
      }
  }

  @media (prefers-reduced-motion: reduce) {
      .over-hero__watermark {
          transform: rotate(-14deg);
      }
  }
  
  /* Grote achtergrond-tekst '1972' */
  .over-hero__bg::after {
      content: '1972';
      position: absolute;
      right: -40px;
      bottom: -60px;
      font-family: var(--font-display);
      font-size: clamp(160px, 25vw, 320px);
      font-weight: var(--fw-black);
      letter-spacing: -.05em;
      color: transparent;
      -webkit-text-stroke: 1px rgba(245,158,11,.06);
      line-height: 1;
      pointer-events: none;
      user-select: none;
  }
  
  .over-hero .container {
      position: relative;
      z-index: 1;
  }

  .over-hero__inner {
      position: relative;
      z-index: 1;
      max-width: 760px;
  }
  
  .over-hero__eyebrow {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-widest);
      color: var(--txt-muted);
      text-transform: uppercase;
      margin-bottom: var(--sp-5);
      max-width: none;
  }
  
  .over-hero__year {
      color: var(--clr-amber);
      font-weight: var(--fw-bold);
  }
  
  .over-hero__divider { color: var(--clr-border-light); }
  
  .over-hero__title {
      font-family: var(--font-display);
      font-size: clamp(var(--fs-3xl), 8vw, 80px);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-tight);
      text-transform: uppercase;
      line-height: 0.92;
      color: var(--txt-primary);
      margin-bottom: var(--sp-6);
  }
  
  .over-hero__title em {
      color: var(--clr-amber);
      font-style: normal;
      display: block;
  }
  
  .over-hero__sub {
      font-size: var(--fs-lg);
      color: var(--txt-secondary);
      line-height: var(--lh-base);
      max-width: 52ch;
      font-weight: var(--fw-medium);
  }
  
  /* Runway decoratie onderaan hero */
  .over-hero__runway {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: repeating-linear-gradient(
          90deg,
          var(--clr-amber)    0, var(--clr-amber)    24px,
          transparent         24px, transparent       36px
      );
      opacity: .3;
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     GEDEELDE SECTIE-STIJLEN
  ═══════════════════════════════════════════════════════════ */
  
  .over-section {
      padding-block: var(--sp-16);
  }
  
  .over-section__header {
      margin-bottom: var(--sp-10);
  }
  
  .over-section__title {
      font-family: var(--font-display);
      font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-tight);
      text-transform: uppercase;
      color: var(--txt-primary);
      line-height: 1.0;
      margin-top: var(--sp-2);
  }
  
  /* Secties met lichte achtergrond: titels volgen globale tekstkleur */
  .over-section:has(#team-title) .over-section__title,
  .over-section:has(#team-title) .over-section__header .label,
  .over-section:has(#status-title) .over-section__title,
  .over-section:has(#status-title) .over-section__header .label {
      color: var(--txt-primary);
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     INTRO SECTIE
  ═══════════════════════════════════════════════════════════ */
  
  .over-section--intro {
      border-top: 1px solid var(--clr-border);
  }
  
  .over-intro-grid {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: var(--sp-12);
      align-items: start;
  }
  
  .over-intro__text .over-section__title {
      font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
      margin-bottom: var(--sp-6);
  }
  
  .over-intro__lead {
      font-size: var(--fs-lg);
      color: var(--txt-primary);
      font-weight: var(--fw-medium);
      line-height: var(--lh-snug);
      border-left: 3px solid var(--clr-amber);
      padding-left: var(--sp-5);
      margin-bottom: var(--sp-6);
      max-width: 58ch;
  }
  
  /* Stats blok rechts */
  .over-intro__stats {
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
      position: sticky;
      top: calc(var(--nav-h) + var(--sp-6));
  }
  
  .over-stat {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      padding: var(--sp-5) var(--sp-6);
      position: relative;
      overflow: hidden;
      transition: border-color var(--dur-base);
  }
  
  .over-stat:hover {
      border-color: rgba(245,158,11,.3);
  }
  
  .over-stat::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 100%;
      background: linear-gradient(to bottom, var(--clr-amber), transparent);
  }
  
  .over-stat__num {
      display: block;
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      font-weight: var(--fw-black);
      color: var(--clr-amber);
      line-height: 1;
      letter-spacing: var(--ls-tight);
  }
  
  .over-stat__label {
      display: block;
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      margin-top: var(--sp-1);
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     TIJDLIJN
  ═══════════════════════════════════════════════════════════ */
  
  .over-timeline-section {
      background: var(--clr-fuselage);
      border-top: 1px solid var(--clr-border);
      border-bottom: 1px solid var(--clr-border);
  }
  
  .over-timeline {
      position: relative;
      max-width: 780px;
      display: flex;
      flex-direction: column;
      gap: 0;
  }
  
  /* Verticale lijn */
  .over-timeline::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      left: 94px;
      width: 1px;
      background: linear-gradient(
          to bottom,
          transparent,
          var(--clr-border-light) 10%,
          var(--clr-border-light) 90%,
          transparent
      );
  }
  
  /* Tijdlijn item */
  .timeline-item {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: var(--sp-8);
      padding: var(--sp-8) 0;
      border-bottom: 1px solid var(--clr-border);
  }
  
  .timeline-item:last-child { border-bottom: none; }
  
  /* Highlight item (2026) */
  .timeline-item--highlight {
      background: linear-gradient(
          90deg,
          rgba(245,158,11,.04) 0%,
          transparent 60%
      );
      margin: 0 calc(-1 * var(--sp-6));
      padding-inline: var(--sp-6);
      border-radius: var(--r-lg);
      border-color: rgba(245,158,11,.15);
  }
  
  /* Marker: jaar + dot */
  .timeline-item__marker {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      padding-right: var(--sp-5);
      position: relative;
      padding-top: 4px;
  }
  
  .timeline-item__year {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--clr-amber);
      letter-spacing: var(--ls-wide);
      white-space: nowrap;
      margin-bottom: var(--sp-2);
  }
  
  .timeline-item__dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--clr-border-light);
      border: 2px solid var(--clr-panel);
      position: absolute;
      right: -5px;
      top: 6px;
      z-index: 1;
      transition: background var(--dur-base), box-shadow var(--dur-base);
  }
  
  .timeline-item__dot--amber {
      background: var(--clr-amber);
      box-shadow: 0 0 12px rgba(245,158,11,.5);
  }
  
  .timeline-item__dot--red {
      background: var(--clr-red);
      box-shadow: 0 0 8px rgba(239,68,68,.3);
  }
  
  .timeline-item:hover .timeline-item__dot {
      background: var(--clr-amber);
  }
  
  /* Tijdlijn content */
  .timeline-item__body {
      padding-bottom: var(--sp-2);
  }
  
  .timeline-item__title {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin-bottom: var(--sp-3);
      line-height: var(--lh-snug);
  }
  
  .timeline-item--highlight .timeline-item__title {
      color: var(--clr-amber);
  }
  
  .timeline-item__text {
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
      line-height: var(--lh-base);
      max-width: 56ch;
      margin-bottom: var(--sp-4);
  }
  
  .timeline-item__text a {
      color: var(--clr-amber);
      text-decoration: underline;
      text-decoration-color: rgba(245,158,11,.3);
      text-underline-offset: 3px;
  }
  
  .timeline-item__text strong { color: var(--txt-primary); }
  
  
  /* ═══════════════════════════════════════════════════════════
     TEAM GRID
  ═══════════════════════════════════════════════════════════ */
  
  .team-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-5);
  }
  
  .team-card {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      padding: var(--sp-6);
      display: flex;
      gap: var(--sp-5);
      align-items: flex-start;
      transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
      position: relative;
      overflow: hidden;
  }
  
  .team-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--clr-amber), transparent);
      opacity: 0;
      transition: opacity var(--dur-base);
  }
  
  .team-card:hover {
      border-color: rgba(245,158,11,.25);
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
  }
  
  .team-card:hover::before { opacity: 1; }
  
  /* Avatar initialen */
  .team-card__avatar {
      width: 56px;
      height: 56px;
      border-radius: var(--r-lg);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-wide);
      color: #000;
  }
  
  .team-card__avatar--wp { background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange)); }
  .team-card__avatar--hw { background: linear-gradient(135deg, var(--clr-cyan), #0284c7); color: #fff; }
  .team-card__avatar--hd { background: linear-gradient(135deg, var(--clr-green), #16a34a); color: #fff; }
  .team-card__avatar--al { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; }
  
  .team-card__body {
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
      min-width: 0;
  }
  
  .team-card__role { margin-bottom: var(--sp-1); }
  
  .team-card__name {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
  }
  
  .team-card__bio {
      font-size: var(--fs-sm);
      color: var(--txt-muted);
      line-height: var(--lh-base);
      margin-top: var(--sp-2);
      max-width: none;
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     DSC SECTIE
  ═══════════════════════════════════════════════════════════ */
  
  .over-dsc-section {
      background: linear-gradient(160deg, var(--clr-cockpit) 0%, var(--clr-sky-black) 100%);
      border-top: 1px solid var(--clr-border);
      border-bottom: 1px solid var(--clr-border);
  }
  
  .over-dsc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-12);
      align-items: center;
  }
  
  .over-dsc__text p {
      color: var(--txt-secondary);
      margin-bottom: var(--sp-5);
  }
  
  .over-dsc__text strong { color: var(--txt-primary); }
  
  /* DSC decoratieve card */
  .dsc-card {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border-light);
      border-radius: var(--r-xl);
      padding: var(--sp-6);
      box-shadow: var(--shadow-lg);
      position: relative;
      overflow: hidden;
  }
  
  .dsc-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--clr-amber), var(--clr-orange), transparent);
  }
  
  .dsc-card__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--sp-4);
  }
  
  .dsc-card__icao {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      color: var(--clr-amber);
      background: var(--clr-amber-glow);
      padding: var(--sp-1) var(--sp-3);
      border-radius: var(--r-sm);
      border: 1px solid rgba(245,158,11,.2);
  }
  
  .dsc-card__title {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: var(--fw-black);
      text-transform: uppercase;
      letter-spacing: var(--ls-wide);
      color: var(--txt-primary);
      margin-bottom: var(--sp-5);
      line-height: var(--lh-snug);
  }
  
  .dsc-card__items {
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
  }
  
  .dsc-card__item {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      font-family: var(--font-mono);
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
      padding: var(--sp-2) var(--sp-3);
      border-radius: var(--r-md);
      border: 1px solid var(--clr-border);
      transition: border-color var(--dur-fast), background var(--dur-fast);
  }
  
  .dsc-card__item:hover {
      border-color: rgba(245,158,11,.25);
      background: var(--clr-panel);
  }
  
  .dsc-card__icon { font-size: 16px; }
  
  
  /* ═══════════════════════════════════════════════════════════
     PARTNERS SECTIE
  ═══════════════════════════════════════════════════════════ */
  
  .partners-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: var(--sp-6);
      margin-bottom: var(--sp-6);
  }
  
  .partner-card {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
  }
  
  .partner-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
  }
  
  /* Featured partner (Ploko) */
  .partner-card--featured {
      border-color: rgba(245,158,11,.3);
      background: linear-gradient(
          160deg,
          rgba(245,158,11,.04) 0%,
          var(--clr-fuselage) 50%
      );
      position: relative;
  }
  
  .partner-card--featured::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--clr-amber), var(--clr-orange));
  }
  
  .partner-card__header {
      padding: var(--sp-5) var(--sp-6);
      border-bottom: 1px solid var(--clr-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
  }
  
  .partner-card__logo-wrap {
      display: flex;
      align-items: center;
  }
  
  .partner-card__logo-text {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-wider);
      color: var(--txt-primary);
      text-transform: uppercase;
  }
  
  .partner-card--featured .partner-card__logo-text { color: var(--clr-amber); }
  .partner-card__logo-text span { color: var(--txt-muted); }
  
  .partner-card__body {
      padding: var(--sp-6);
      flex: 1;
  }
  
  .partner-card__name {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin-bottom: var(--sp-3);
  }
  
  .partner-card__desc {
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
      line-height: var(--lh-base);
      margin-bottom: var(--sp-4);
      max-width: none;
  }
  
  .partner-link {
      color: var(--clr-amber);
      text-decoration: underline;
      text-decoration-color: rgba(245,158,11,.35);
      text-underline-offset: 3px;
      font-weight: var(--fw-medium);
      transition: color var(--dur-fast);
  }
  
  .partner-link:hover { color: #fbbf24; }
  
  .partner-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2);
  }
  
  .partner-card__footer {
      padding: var(--sp-4) var(--sp-6);
      border-top: 1px solid var(--clr-border);
      background: rgba(0,0,0,.15);
  }
  
  /* Partner CTA onderaan */
  .partner-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-5);
      padding: var(--sp-5) var(--sp-6);
      background: var(--clr-panel);
      border: 1px dashed var(--clr-border-light);
      border-radius: var(--r-lg);
  }
  
  .partner-cta__text {
      font-family: var(--font-mono);
      font-size: var(--fs-sm);
      color: var(--txt-muted);
      letter-spacing: var(--ls-wide);
      max-width: none;
      margin: 0;
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     STATUS SECTIE
  ═══════════════════════════════════════════════════════════ */
  
  .status-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
  }
  
  .status-card {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      padding: var(--sp-6);
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
      position: relative;
      overflow: hidden;
      transition: border-color var(--dur-base), transform var(--dur-base);
  }
  
  .status-card:hover {
      transform: translateY(-2px);
  }
  
  .status-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
  }
  
  .status-card--archive::before { background: linear-gradient(90deg, var(--clr-cyan), transparent); }
  .status-card--register::before { background: linear-gradient(90deg, var(--clr-amber), transparent); }
  .status-card--new::before { background: linear-gradient(90deg, var(--clr-green), transparent); }
  
  .status-card--archive:hover  { border-color: rgba(6,182,212,.3); }
  .status-card--register:hover { border-color: rgba(245,158,11,.3); }
  .status-card--new:hover      { border-color: rgba(34,197,94,.3); }
  
  .status-card__icon {
      font-size: 28px;
      line-height: 1;
  }
  
  .status-card__title {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
  }
  
  .status-card__text {
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
      line-height: var(--lh-base);
      flex: 1;
      max-width: none;
  }
  
  .status-card .btn {
      align-self: flex-start;
      margin-top: auto;
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     SOCIAL / CONTACT CTA
  ═══════════════════════════════════════════════════════════ */
  
  .over-cta-section {
      padding-block: var(--sp-16);
      background: linear-gradient(160deg, var(--clr-cockpit) 0%, var(--clr-sky-black) 100%);
      border-top: 1px solid var(--clr-border);
      text-align: center;
  }
  
  .over-cta-inner {
      max-width: 640px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-4);
  }
  
  .over-cta__title {
      font-family: var(--font-display);
      font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl));
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-tight);
      text-transform: uppercase;
      color: var(--txt-primary);
      line-height: 1.05;
      margin-top: var(--sp-2);
  }
  
  .over-cta__sub {
      font-size: var(--fs-md);
      color: var(--txt-secondary);
      line-height: var(--lh-base);
      max-width: 44ch;
      text-align: center;
  }
  
  .over-cta__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-3);
      justify-content: center;
      margin-top: var(--sp-3);
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════════════════════ */
  
  @media (max-width: 1024px) {
      .over-intro-grid   { grid-template-columns: 1fr 240px; }
      .partners-grid     { grid-template-columns: 1fr 1fr; }
      .status-grid       { grid-template-columns: repeat(3, 1fr); }
  }
  
  @media (max-width: 860px) {
      .over-intro-grid {
          grid-template-columns: 1fr;
      }
      .over-intro__stats {
          position: static;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
      }
      .over-dsc-grid     { grid-template-columns: 1fr; }
      .team-grid         { grid-template-columns: 1fr; }
      .partners-grid     { grid-template-columns: 1fr; }
      .status-grid       { grid-template-columns: 1fr; }
  }
  
  @media (max-width: 640px) {
      .over-hero__title { font-size: clamp(var(--fs-2xl), 10vw, var(--fs-3xl)); }
  
      .over-timeline::before { left: 72px; }
  
      .timeline-item {
          grid-template-columns: 80px 1fr;
          gap: var(--sp-5);
      }
  
      .timeline-item--highlight {
          margin-inline: calc(-1 * var(--sp-4));
          padding-inline: var(--sp-4);
      }
  
      .over-intro__stats { grid-template-columns: 1fr 1fr; }
  
      .over-cta__actions { flex-direction: column; width: 100%; }
      .over-cta__actions .btn { width: 100%; justify-content: center; }
  
      .partner-cta { flex-direction: column; text-align: center; }
  }
  
  @media (prefers-reduced-motion: reduce) {
      .team-card,
      .over-stat,
      .status-card,
      .partner-card { transform: none !important; transition: none; }
  }
  
  /* ============================================================
     AIRNIEUWS.NL — woocommerce.css
     Aviation Spotters Shop · WooCommerce stylesheet
     Layout (boxed, volle breedte): zie boven “WOOCOMMERCE — Één bron voor layout”.
     Hieronder: alleen component-styling (geen layout-!important).
  
     Structuur:
       [1]  Shop Hero & Page Headers
       [2]  Shop Layout (sidebar + grid)
       [3]  Product Archive / Grid
       [4]  Product Card
       [5]  Single Product
       [6]  Product Tabs
       [7]  Reviews
       [8]  Cart
       [9]  Checkout
       [10] Order Details / Thank You
       [11] My Account
       [12] Notices
       [13] WooCommerce Core Overrides
       [14] Pagination
       [15] Responsive
     ============================================================ */
  
  
  /* ============================================================
     [1] SHOP HERO & PAGE HEADERS
     ============================================================ */
  
  /* Verberg standaard WooCommerce-breadcrumb (bovenste); we tonen eigen breadcrumb in shop-hero */
  body.woocommerce-page .woocommerce-breadcrumb,
  .post-type-archive-product .woocommerce-breadcrumb {
    display: none !important;
  }
  
  /* Geen extra ruimte boven shop-content (wrapper van WooCommerce) */
  .post-type-archive-product .woocommerce > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .shop-hero {
      position: relative;
      padding-block: var(--sp-5) var(--sp-4);
      overflow: hidden;
      background: linear-gradient(160deg, var(--clr-cockpit) 0%, var(--clr-sky-black) 70%);
      border-bottom: 1px solid var(--clr-border);
  }
  
  .shop-hero__bg {
      position: absolute;
      inset: 0;
      z-index: var(--z-below);
      background-image:
          repeating-linear-gradient(
              0deg,
              transparent,
              transparent 47px,
              rgba(6,182,212,0.03) 47px,
              rgba(6,182,212,0.03) 48px
          ),
          repeating-linear-gradient(
              90deg,
              transparent,
              transparent 47px,
              rgba(6,182,212,0.03) 47px,
              rgba(6,182,212,0.03) 48px
          );
  }
  
  .shop-hero__inner {
      position: relative;
      z-index: var(--z-base);
      max-width: 760px;
  }
  
  .shop-hero__title {
      font-family: var(--font-display);
      font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-tight);
      text-transform: uppercase;
      color: var(--txt-primary);
      line-height: 0.95;
      margin-top: var(--sp-2);
      margin-bottom: var(--sp-2);
  }
  
  .shop-hero__sub {
      font-size: var(--fs-md);
      color: var(--txt-secondary);
      line-height: var(--lh-base);
      max-width: 56ch;
      margin-top: var(--sp-3);
  }
  
  .shop-hero__runway {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: repeating-linear-gradient(
          90deg,
          var(--clr-amber) 0,
          var(--clr-amber) 24px,
          transparent 24px,
          transparent 40px
      );
      opacity: 0.5;
  }
  
  /* Compact page header — cart, checkout, account (één definitie) */
  .page-header-compact {
      padding-block: var(--sp-6) var(--sp-5);
      background: linear-gradient(180deg, var(--clr-cockpit) 0%, var(--clr-sky-black) 100%);
      border-bottom: 1px solid var(--clr-border);
  }
  .page-header-compact__title {
      font-family: var(--font-display);
      font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl));
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-tight);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin-top: var(--sp-2);
      line-height: 1.1;
  }
  .page-header-compact__title em { color: var(--clr-amber); font-style: normal; }
  .page-header-compact--success {
      background: linear-gradient(160deg, #ecfdf5 0%, var(--clr-page) 100%);
      border-bottom-color: rgba(34, 197, 94, 0.25);
  }

  /* Leden-endpoint: minder lucht onder vaste header, geen eyebrow / geen “accent”-tekens */
  .page-header-compact--air-leden {
      padding-block: var(--sp-3) var(--sp-2);
  }
  .page-header-compact--air-leden .page-header-compact__title {
      margin-top: 0;
  }
  .woocommerce-account .page-header-compact--air-leden ~ .myaccount-section {
      padding-block: var(--sp-4) var(--sp-16);
  }

  /* Standalone ledenpagina: minder top-ruimte (geen dubbele nav-offset), vlakke achtergrond
     i.p.v. raster (voorkomt kleine “blokjes” bij lijnen), compacte titelzone */
  body.airnieuws-leden-page:not(.woocommerce):not(.woocommerce-page):not(.woocommerce-account) .site-main > *:first-child {
      padding-top: 0;
  }
  body.airnieuws-has-global-top-bar:not(.woocommerce):not(.woocommerce-page):not(.woocommerce-account).airnieuws-leden-page .site-main > *:first-child {
      padding-top: var(--airnieuws-global-bar-h);
  }
  /* Geen raster / “blokjes”: body + wrappers effen (Elementor-secties kunnen eigen kleur houden) */
  html:has(body.airnieuws-leden-page) {
      background-color: var(--clr-page);
  }
  body.airnieuws-leden-page {
      background-image: none;
      background-size: auto;
      background-color: var(--clr-page);
  }
  body.airnieuws-leden-page .site-wrap,
  body.airnieuws-leden-page #page,
  body.airnieuws-leden-page .site,
  body.airnieuws-leden-page .site-main {
      background-image: none;
      background-color: var(--clr-page);
  }
  body.airnieuws-leden-page:not(.woocommerce-account) .site-main > .page-header {
      padding: var(--sp-2) 0 var(--sp-2);
      border-bottom: 1px solid var(--clr-border);
      margin-bottom: var(--sp-2);
      text-align: right;
  }
  body.airnieuws-leden-page:not(.woocommerce-account) .site-main > .page-header .entry-title {
      margin: 0 0 0 auto;
      max-width: none;
      width: 100%;
      text-align: right;
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 3.2vw, 2rem);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-tight);
      color: #0a0a0a;
  }

  body.airnieuws-leden-page.elementor-page .elementor-location-content > .elementor-section:first-child .elementor-widget-heading:first-child .elementor-heading-title {
      text-align: right;
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 3.2vw, 2rem);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-tight);
      color: #0a0a0a;
  }
  body.airnieuws-leden-page:not(.woocommerce-account) .site-main > .page-content {
      padding-block: var(--sp-2) var(--sp-4);
  }
  body.airnieuws-leden-page .airnieuws-leden-tabs,
  body.airnieuws-leden-page .airnieuws-leden-tabs * {
      -webkit-tap-highlight-color: rgba(234, 88, 12, 0.2);
  }
  
  
  /* ============================================================
     [2] SHOP LAYOUT
     ============================================================ */
  
  .shop-wrap {
      padding-block: 0 var(--sp-10);
  }
  .shop-layout {
      padding-block: var(--sp-8) var(--sp-10);
  }
  .shop-layout__inner {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: var(--sp-8);
      align-items: start;
  }
  
  /* Cart grid children — min-width: 0 voorkomt overflow buiten grid-kolom */
  .cart-main {
      min-width: 0;
      width: 100%;
  }


  /* Productkolom neemt beschikbare ruimte, geen extra marge */
  .shop-main {
      min-width: 0;
      width: 100%;
  }
  
  /* ── SHOP SIDEBAR ── */
  .shop-sidebar {
      position: sticky;
      top: calc(var(--nav-h) + var(--sp-6));
      display: flex;
      flex-direction: column;
      gap: var(--sp-5);
  }
  
  .widget--shop {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      overflow: hidden;
  }
  
  .widget--shop .widget__title {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      padding: var(--sp-4) var(--sp-5);
      border-bottom: 1px solid var(--clr-border);
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      color: var(--txt-primary);
      background: var(--clr-panel);
  }
  
  .widget__title-icon {
      color: var(--clr-amber);
      font-size: var(--fs-xs);
  }
  
  .widget--shop .widget__body {
      padding: var(--sp-4) var(--sp-5);
  }
  
  /* Categorie lijst */
  .shop-cat-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
  }
  
  .shop-cat-list__item {
      /* sublijst inspringen */
  }
  
  .shop-cat-list__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-2);
      padding: var(--sp-2) var(--sp-3);
      border-radius: var(--r-md);
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
      transition: background var(--dur-fast), color var(--dur-fast);
      text-decoration: none;
  }
  
  .shop-cat-list__link:hover {
      background: var(--clr-panel);
      color: var(--txt-primary);
  }
  
  .shop-cat-list__link.active {
      background: var(--clr-amber-glow);
      color: var(--clr-amber);
      font-weight: var(--fw-semi);
  }
  
  .shop-cat-list__count {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      background: var(--clr-panel);
      padding: 1px 6px;
      border-radius: var(--r-full);
      flex-shrink: 0;
  }
  
  .shop-cat-list--sub {
      margin-left: var(--sp-4);
      border-left: 2px solid var(--clr-border);
      padding-left: var(--sp-2);
      margin-top: 2px;
  }
  
  /* Tag cloud */
  .shop-tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2);
  }
  
  .shop-tag {
      font-size: var(--fs-xs);
      cursor: pointer;
      transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }
  
  .shop-tag:hover {
      background: var(--clr-amber-glow);
      border-color: rgba(245,158,11,0.3);
      color: var(--clr-amber);
  }
  
  /* ── SHOP TOOLBAR (resultaten + sortering) ── */
  .shop-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      padding: var(--sp-3) var(--sp-4);
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      margin-bottom: var(--sp-4);
  }
  
  .shop-toolbar__results {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      letter-spacing: var(--ls-wide);
  }
  
  /* WooCommerce result count override */
  .woocommerce-result-count {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      letter-spacing: var(--ls-wide);
      margin: 0;
  }
  
  /* Ordering select */
  .woocommerce-ordering,
  .shop-toolbar__sorting {
      display: flex;
      align-items: center;
  }
  
  .woocommerce-ordering select,
  .shop-toolbar__sorting select {
      background: var(--clr-panel);
      border: 1px solid var(--clr-border-light);
      border-radius: var(--r-md);
      padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-3);
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-semi);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fa3bc' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right var(--sp-3) center;
      transition: border-color var(--dur-fast);
  }
  
  .woocommerce-ordering select:hover,
  .shop-toolbar__sorting select:hover {
      border-color: var(--clr-amber);
  }
  
  
  /* ============================================================
     [3] PRODUCT ARCHIVE / GRID
     ============================================================ */
  
  /* WooCommerce voegt automatisch .columns-X toe aan ul.products.
     Die zetten width/float op li.product — dat overschrijven we volledig. */
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: var(--sp-5) !important;
      list-style: none !important;
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      float: none !important;
      clear: both !important;
      /* Geen gecentreerde enkele kaart (WC/Elementor soms justify-items:center) */
      justify-items: start !important;
      justify-content: start !important;
      align-items: start !important;
      /* WC: woocommerce-layout.css zet text-align:center op productlijsten */
      text-align: left !important;
      place-items: start !important;
  }
  
  /* Alle columns-X varianten neutraliseren */
  .woocommerce ul.products.columns-1,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  
  /* li.product: reset WC floats/widths, laat grid het afhandelen */
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  ul.products li.product {
      width: 100% !important;
      max-width: 100% !important;
      float: none !important;
      clear: none !important;
      margin: 0 !important;
      justify-self: start !important;
      text-align: left !important;
      place-self: start !important;
  }
  
  /* Onze eigen productkaart klasse (extra specificiteit) */
  .products.shop-products-grid {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: var(--sp-5);
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      justify-items: start !important;
      justify-content: start !important;
      align-items: start !important;
      text-align: left !important;
      place-items: start !important;
  }
  
  .shop-products-grid--related {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: var(--sp-5);
  }
  
  /* Winkel-archief: hogere specificiteit dan late WC/Elementor-styles */
  body.woocommerce-page .shop-layout .shop-main ul.products,
  body.woocommerce-shop .shop-layout .shop-main ul.products,
  body.post-type-archive-product .shop-layout .shop-main ul.products,
  body.tax-product_cat .shop-layout .shop-main ul.products {
      text-align: left !important;
      justify-content: start !important;
      justify-items: start !important;
      place-items: start !important;
  }
  
  body.woocommerce-page .shop-layout .shop-main ul.products li.product,
  body.woocommerce-shop .shop-layout .shop-main ul.products li.product,
  body.post-type-archive-product .shop-layout .shop-main ul.products li.product,
  body.tax-product_cat .shop-layout .shop-main ul.products li.product {
      text-align: left !important;
      justify-self: start !important;
      place-self: start !important;
  }
  
  
  /* ============================================================
     [4] PRODUCT CARD
     ============================================================ */
  
  .shop-product-card {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      overflow: hidden;
      display: flex !important;
      flex-direction: column;
      width: 100% !important;
      min-width: 0;
      align-self: start;
      transition:
          border-color var(--dur-base) var(--ease-out),
          transform var(--dur-base) var(--ease-out),
          box-shadow var(--dur-base) var(--ease-out);
      position: relative;
  }
  
  .shop-product-card:hover {
      border-color: var(--clr-border-light);
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
  }
  
  /* Thumbnail */
  .shop-product-card__thumb {
      position: relative;
      aspect-ratio: 4/3;
      overflow: hidden;
      background: var(--clr-panel);
  }
  
  .shop-product-card__thumb-link {
      display: block;
      width: 100%;
      height: 100%;
  }
  
  .shop-product-card__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow);
  }
  
  .shop-product-card:hover .shop-product-card__img {
      transform: scale(1.05);
      filter: brightness(0.85);
  }
  
  /* No image placeholder */
  .shop-product-card__no-img {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--clr-panel) 0%, var(--clr-fuselage) 100%);
      font-size: 48px;
      opacity: 0.3;
      transition: opacity var(--dur-base);
  }
  
  .shop-product-card:hover .shop-product-card__no-img {
      opacity: 0.5;
  }
  
  /* Badges */
  .shop-product-card__badges {
      position: absolute;
      top: var(--sp-3);
      left: var(--sp-3);
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
      z-index: var(--z-raised);
  }
  
  /* Sale badge */
  .badge--sale {
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
      color: #000;
      padding: 2px 8px;
      border-radius: var(--r-sm);
  }
  
  /* Green badge */
  .badge--green {
      background: var(--clr-green-dim);
      color: var(--clr-green);
      border: 1px solid rgba(34,197,94,0.3);
  }
  
  /* Quick add overlay */
  .shop-product-card__overlay {
      position: absolute;
      inset: 0;
      background: rgba(8,12,18,0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity var(--dur-base) var(--ease-out);
      backdrop-filter: blur(4px);
  }
  
  .shop-product-card:hover .shop-product-card__overlay {
      opacity: 1;
  }
  
  /* Card body */
  .shop-product-card__body {
      padding: var(--sp-4) var(--sp-5);
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
      flex: 1;
      text-align: left;
  }
  
  .shop-product-card__cat {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-wider);
      color: var(--clr-cyan);
      text-transform: uppercase;
  }
  
  .shop-product-card__title {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      line-height: var(--lh-snug);
      margin: 0;
  }
  
  .shop-product-card__title a {
      color: var(--txt-primary);
      text-decoration: none;
      transition: color var(--dur-fast);
  }
  
  .shop-product-card__title a:hover {
      color: var(--clr-amber);
  }
  
  /* Rating */
  .shop-product-card__rating .star-rating {
      font-size: 12px;
      color: var(--clr-amber);
  }
  
  /* Prijs */
  .shop-product-card__price {
      margin-top: auto;
      padding-top: var(--sp-3);
      border-top: 1px solid var(--clr-border);
  }
  
  .shop-product-card__price .price,
  .shop-product-card__price .woocommerce-Price-amount {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      color: var(--clr-amber);
      letter-spacing: var(--ls-normal);
  }
  
  .shop-product-card__price .price del,
  .shop-product-card__price del {
      font-size: var(--fs-sm);
      color: var(--txt-muted);
      margin-right: var(--sp-2);
      font-weight: var(--fw-normal);
      text-decoration: line-through;
      text-decoration-color: currentColor;
      -webkit-text-decoration-color: currentColor;
  }

  .shop-product-card__price .price del .woocommerce-Price-amount,
  .shop-product-card__price .price del .woocommerce-Price-amount bdi,
  .shop-product-card__price del .woocommerce-Price-amount,
  .shop-product-card__price del .woocommerce-Price-amount bdi {
      text-decoration: line-through;
      text-decoration-color: currentColor;
      -webkit-text-decoration-color: currentColor;
  }
  
  .shop-product-card__price .price ins,
  .shop-product-card__price ins {
      text-decoration: none;
      color: var(--clr-amber);
  }

  /* Verwijder UA-onderstreping / doorhalen op actuele prijs (bdi/span) */
  .shop-product-card__price .price ins *,
  .shop-product-card__price ins * {
      text-decoration: none;
  }
  
  
  /* ============================================================
     [5] SINGLE PRODUCT
     ============================================================ */
  
  .single-product-section {
      padding-block: var(--sp-10) var(--sp-16);
  }
  
  .single-product-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-12);
      align-items: start;
  }
  
  /* ── GALLERY ── */
  .single-product__gallery .woocommerce-product-gallery {
      position: sticky;
      top: calc(var(--nav-h) + var(--sp-6));
  }
  
  .single-product__gallery .woocommerce-product-gallery__image img,
  .single-product__gallery .flex-control-thumbs li img {
      border-radius: var(--r-lg);
      border: 1px solid var(--clr-border);
  }
  
  .single-product__gallery .woocommerce-product-gallery__image--placeholder {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80px;
      opacity: 0.2;
  }
  
  .single-product__gallery .flex-control-nav {
      display: flex;
      gap: var(--sp-2);
      margin-top: var(--sp-3);
  }
  
  .single-product__gallery .flex-control-nav li {
      width: 72px;
      height: 72px;
  }
  
  .single-product__gallery .flex-control-nav li img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.6;
      cursor: pointer;
      transition: opacity var(--dur-fast), border-color var(--dur-fast);
      border: 2px solid var(--clr-border);
  }
  
  .single-product__gallery .flex-control-nav li.flex-active img,
  .single-product__gallery .flex-control-nav li img:hover {
      opacity: 1;
      border-color: var(--clr-amber);
  }
  
  /* ── SUMMARY ── */
  .single-product__summary {
      padding-top: var(--sp-4);
  }
  
  .single-product__meta-row {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      flex-wrap: wrap;
      margin-bottom: var(--sp-4);
  }
  
  .single-product__cat.label {
      color: var(--clr-cyan);
  }
  
  .single-product__cat.label::before {
      background: var(--clr-cyan);
  }
  
  .single-product__title {
      font-family: var(--font-display);
      font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl));
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-tight);
      text-transform: uppercase;
      color: var(--txt-primary);
      line-height: var(--lh-tight);
      margin-bottom: var(--sp-4);
  }
  
  /* Rating */
  .single-product__rating {
      margin-bottom: var(--sp-4);
  }
  
  .single-product__rating .star-rating {
      color: var(--clr-amber);
      font-size: 16px;
  }
  
  /* Prijs */
  .single-product__price-wrap {
      padding: var(--sp-5);
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      margin-bottom: var(--sp-5);
  }
  
  .single-product__price-wrap .price {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      font-weight: var(--fw-black);
      color: var(--clr-amber);
      letter-spacing: var(--ls-normal);
  }
  
  .single-product__price-wrap .price del {
      font-size: var(--fs-lg);
      color: var(--txt-muted);
      margin-right: var(--sp-2);
      font-weight: var(--fw-normal);
      text-decoration: line-through;
      text-decoration-color: currentColor;
      -webkit-text-decoration-color: currentColor;
  }

  .single-product__price-wrap .price del .woocommerce-Price-amount,
  .single-product__price-wrap .price del .woocommerce-Price-amount bdi {
      text-decoration: line-through;
      text-decoration-color: currentColor;
      -webkit-text-decoration-color: currentColor;
  }
  
  .single-product__price-wrap .price ins {
      text-decoration: none;
      color: var(--clr-amber);
  }

  .single-product__price-wrap .price ins * {
      text-decoration: none;
  }
  
  /* Korte omschrijving */
  .single-product__excerpt {
      margin-bottom: var(--sp-6);
      padding-bottom: var(--sp-5);
      border-bottom: 1px solid var(--clr-border);
  }
  
  .single-product__excerpt p {
      font-size: var(--fs-md);
      line-height: var(--lh-base);
      color: var(--txt-secondary);
  }
  
  /* Add to cart */
  .single-product__add-to-cart {
      margin-bottom: var(--sp-5);
  }
  
  .single-product__add-to-cart form.cart {
      display: flex;
      align-items: center;
      gap: var(--sp-4);
  }
  
  .single-product__add-to-cart .quantity {
      display: flex;
      align-items: center;
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border-light);
      border-radius: var(--r-md);
      overflow: hidden;
  }
  
  .single-product__add-to-cart .quantity input[type="number"] {
      width: 56px;
      text-align: center;
      background: transparent;
      border: none;
      color: var(--txt-primary);
      font-family: var(--font-mono);
      font-size: var(--fs-md);
      font-weight: var(--fw-semi);
      padding: var(--sp-3) 0;
      -moz-appearance: textfield;
  }
  
  .single-product__add-to-cart .quantity input::-webkit-outer-spin-button,
  .single-product__add-to-cart .quantity input::-webkit-inner-spin-button {
      -webkit-appearance: none;
  }
  
  /* Add to cart button WooCommerce */
  .single-product__add-to-cart .single_add_to_cart_button,
  button.single_add_to_cart_button {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
      color: #0d0d0d;
      border: none;
      border-radius: var(--r-md);
      padding: var(--sp-4) var(--sp-8);
      cursor: pointer;
      transition:
          box-shadow var(--dur-base),
          transform var(--dur-fast) var(--ease-spring);
  }
  
  .single-product__add-to-cart .single_add_to_cart_button:hover,
  button.single_add_to_cart_button:hover {
      box-shadow: var(--shadow-amber);
      transform: translateY(-1px);
  }
  
  /* Product meta */
  .single-product__product-meta {
      padding-top: var(--sp-4);
      border-top: 1px solid var(--clr-border);
  }
  
  .woocommerce-product-details__short-description p,
  .product_meta span {
      font-size: var(--fs-sm);
      color: var(--txt-muted);
      font-family: var(--font-mono);
      letter-spacing: var(--ls-wide);
  }
  
  .product_meta a {
      color: var(--clr-amber);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: rgba(245,158,11,0.3);
  }
  
  /* Related products */
  .related-products-section {
      padding-block: var(--sp-10) var(--sp-16);
      border-top: 1px solid var(--clr-border);
      background: linear-gradient(0deg, var(--clr-sky-black) 0%, var(--clr-cockpit) 100%);
  }
  
  
  /* ============================================================
     [6] PRODUCT TABS
     ============================================================ */
  
  .single-product__tabs-wrap {
      margin-top: var(--sp-12);
      padding-top: var(--sp-8);
      border-top: 1px solid var(--clr-border);
  }
  
  /* WooCommerce tabs */
  .woocommerce-tabs .wc-tabs,
  .tabs.wc-tabs {
      display: flex;
      gap: 0;
      border-bottom: 2px solid var(--clr-border);
      margin-bottom: var(--sp-8);
      list-style: none;
      padding: 0;
  }
  
  .woocommerce-tabs .wc-tabs li,
  .tabs.wc-tabs li {
      position: relative;
  }
  
  .woocommerce-tabs .wc-tabs li a,
  .tabs.wc-tabs li a {
      display: block;
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      color: var(--txt-muted);
      padding: var(--sp-3) var(--sp-6);
      text-decoration: none;
      transition: color var(--dur-fast);
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
  }
  
  .woocommerce-tabs .wc-tabs li a:hover,
  .tabs.wc-tabs li a:hover {
      color: var(--txt-primary);
  }
  
  .woocommerce-tabs .wc-tabs li.active a,
  .tabs.wc-tabs li.active a {
      color: var(--clr-amber);
      border-bottom-color: var(--clr-amber);
  }
  
  /* Tab panels */
  .woocommerce-tabs .panel,
  .woocommerce-tab-panels .panel {
      display: none;
  }
  
  .woocommerce-tabs .panel.active,
  .woocommerce-tab-panels .panel.active {
      display: block;
      animation: fadeIn var(--dur-base) var(--ease-out);
  }
  
  .woocommerce-product-details__short-description,
  .woocommerce-Tabs-panel {
      color: var(--txt-secondary);
      line-height: var(--lh-loose);
      font-size: var(--fs-base);
  }
  
  .woocommerce-Tabs-panel h2 {
      font-size: var(--fs-xl);
      margin-bottom: var(--sp-5);
  }
  
  .woocommerce-Tabs-panel p {
      max-width: 72ch;
      margin-bottom: var(--sp-4);
  }
  
  /* Attributes tabel in beschrijving */
  .woocommerce-product-attributes {
      width: 100%;
      border-collapse: collapse;
  }
  
  .woocommerce-product-attributes th,
  .woocommerce-product-attributes td {
      padding: var(--sp-3) var(--sp-4);
      border-bottom: 1px solid var(--clr-border);
      font-size: var(--fs-sm);
      text-align: left;
  }
  
  .woocommerce-product-attributes th {
      font-family: var(--font-mono);
      letter-spacing: var(--ls-wide);
      color: var(--txt-muted);
      width: 180px;
      background: var(--clr-panel);
  }
  
  .woocommerce-product-attributes td {
      color: var(--txt-primary);
  }
  
  
  /* ============================================================
     [7] REVIEWS
     ============================================================ */
  
  .woocommerce-Reviews {
      max-width: 720px;
  }
  
  .woocommerce-Reviews-title {
      font-size: var(--fs-xl);
      margin-bottom: var(--sp-6);
  }
  
  /* Comment list */
  .woocommerce-Reviews .commentlist {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--sp-8);
      display: flex;
      flex-direction: column;
      gap: var(--sp-5);
  }
  
  .woocommerce-Reviews .comment_container {
      display: flex;
      gap: var(--sp-4);
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      padding: var(--sp-5) var(--sp-6);
  }
  
  .woocommerce-Reviews .comment_container img.avatar {
      width: 48px;
      height: 48px;
      border-radius: var(--r-full);
      border: 2px solid var(--clr-border-light);
      flex-shrink: 0;
  }
  
  .woocommerce-Reviews .comment-text {
      flex: 1;
      min-width: 0;
  }
  
  .woocommerce-Reviews .meta {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      margin-bottom: var(--sp-3);
  }
  
  .woocommerce-Reviews .woocommerce-review__author {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
  }
  
  .woocommerce-Reviews .woocommerce-review__dash {
      color: var(--txt-muted);
  }
  
  .woocommerce-Reviews .woocommerce-review__published-date {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      letter-spacing: var(--ls-wide);
  }
  
  .woocommerce-Reviews .star-rating {
      color: var(--clr-amber);
      font-size: 13px;
  }
  
  .woocommerce-Reviews .description p {
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
      line-height: var(--lh-base);
      max-width: none;
  }
  
  /* Review formulier */
  #review_form_wrapper .comment-form {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      padding: var(--sp-6) var(--sp-8);
      margin-top: var(--sp-6);
  }
  
  #review_form_wrapper .comment-reply-title {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin-bottom: var(--sp-5);
  }
  
  #review_form_wrapper .comment-form-rating label {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-secondary);
      display: block;
      margin-bottom: var(--sp-2);
  }
  
  #review_form_wrapper .stars a {
      color: var(--clr-amber);
      font-size: 24px;
  }
  
  #review_form_wrapper .comment-form-comment label,
  #review_form_wrapper .comment-form-author label,
  #review_form_wrapper .comment-form-email label {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-secondary);
      display: block;
      margin-bottom: var(--sp-2);
  }
  
  #review_form_wrapper .comment-form input[type="text"],
  #review_form_wrapper .comment-form input[type="email"],
  #review_form_wrapper .comment-form textarea {
      width: 100%;
      background: var(--clr-panel);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-md);
      padding: var(--sp-3) var(--sp-4);
      color: var(--txt-primary);
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      margin-bottom: var(--sp-4);
      transition: border-color var(--dur-fast);
      resize: vertical;
  }
  
  #review_form_wrapper .comment-form input:focus,
  #review_form_wrapper .comment-form textarea:focus {
      outline: none;
      border-color: var(--clr-amber);
      box-shadow: 0 0 0 3px var(--clr-amber-glow);
  }
  
  #review_form_wrapper .comment-form .form-submit {
      margin-top: var(--sp-4);
  }
  
  #review_form_wrapper .comment-form #submit {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
      color: #0d0d0d;
      border: none;
      border-radius: var(--r-md);
      padding: var(--sp-3) var(--sp-8);
      cursor: pointer;
      transition: box-shadow var(--dur-base), transform var(--dur-fast);
  }
  
  #review_form_wrapper .comment-form #submit:hover {
      box-shadow: var(--shadow-amber);
      transform: translateY(-1px);
  }
  
  
  /* ============================================================
     [8] CART
     ============================================================ */
  
  .cart-section {
      padding-block: var(--sp-6) var(--sp-12);
  }
  .cart-layout {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: var(--sp-6);
      align-items: start;
  }
  
  /* Cart table */
  .cart-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }
  
  .cart-table,
  .shop-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      overflow: hidden;
  }
  
  .cart-table thead tr,
  .shop-table thead tr {
      background: var(--clr-panel);
      border-bottom: 2px solid var(--clr-border);
  }
  
  .cart-table th,
  .shop-table th {
      padding: var(--sp-4) var(--sp-5);
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-muted);
      text-align: left;
      white-space: nowrap;
  }
  
  .cart-table td,
  .shop-table td {
      padding: var(--sp-4) var(--sp-5);
      border-bottom: 1px solid var(--clr-border);
      color: var(--txt-secondary);
      font-size: var(--fs-sm);
      vertical-align: middle;
  }
  
  .cart-table__row:last-child td {
      border-bottom: none;
  }
  
  .cart-table__img {
      width: 64px;
      height: 64px;
      object-fit: cover;
      border-radius: var(--r-md);
      border: 1px solid var(--clr-border);
  }
  
  .cart-table__product-name {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      text-decoration: none;
      transition: color var(--dur-fast);
  }
  
  .cart-table__product-name:hover {
      color: var(--clr-amber);
  }
  
  .cart-table__remove {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: var(--r-full);
      background: var(--clr-red-dim);
      color: var(--clr-red);
      border: 1px solid rgba(239,68,68,0.2);
      font-size: 18px;
      line-height: 1;
      text-decoration: none;
      transition: background var(--dur-fast), transform var(--dur-fast);
  }
  
  .cart-table__remove:hover {
      background: var(--clr-red);
      color: white;
      transform: scale(1.1);
  }
  
  /* Price cells */
  .cart-table .product-price,
  .cart-table .product-subtotal {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--clr-amber);
      letter-spacing: var(--ls-normal);
  }
  
  /* Quantity input */
  .cart-table .quantity {
      display: inline-flex;
      align-items: center;
      background: var(--clr-panel);
      border: 1px solid var(--clr-border-light);
      border-radius: var(--r-md);
      overflow: hidden;
  }
  
  .cart-table .qty {
      width: 52px;
      text-align: center;
      background: transparent;
      border: none;
      color: var(--txt-primary);
      font-family: var(--font-mono);
      font-size: var(--fs-base);
      font-weight: var(--fw-semi);
      padding: var(--sp-2) var(--sp-1);
      -moz-appearance: textfield;
  }
  
  .cart-table .qty::-webkit-outer-spin-button,
  .cart-table .qty::-webkit-inner-spin-button {
      -webkit-appearance: none;
  }
  
  /* Cart actions row */
  .cart-table__actions td {
      background: var(--clr-panel);
  }
  
  .cart-actions-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      flex-wrap: wrap;
  }
  
  .coupon {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
  }
  
  .coupon .form-input {
      width: 200px;
  }
  
  /* Cart sidebar — totals */
  .cart-sidebar {
      position: sticky;
      top: calc(var(--nav-h) + var(--sp-6));
  }
  
  /* WooCommerce cart totals override */
  .cart_totals h2 {
      display: none; /* We gebruiken widget title */
  }
  
  .cart_totals table.shop_table {
      border: none;
      background: transparent;
      border-radius: 0;
  }
  
  .cart_totals table.shop_table th {
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      padding: var(--sp-3) var(--sp-4);
      background: transparent;
  }
  
  .cart_totals table.shop_table td {
      padding: var(--sp-3) var(--sp-4);
      text-align: right;
      color: var(--txt-primary);
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-normal);
  }
  
  .cart_totals table.shop_table tr.order-total th,
  .cart_totals table.shop_table tr.order-total td {
      border-top: 2px solid var(--clr-border);
      padding-top: var(--sp-4);
  }
  
  .cart_totals table.shop_table tr.order-total td {
      color: var(--clr-amber);
      font-size: var(--fs-xl);
  }
  
  /* Checkout button */
  .cart_totals .wc-proceed-to-checkout {
      margin-top: var(--sp-5);
  }
  
  .cart_totals .wc-proceed-to-checkout .checkout-button,
  a.checkout-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      text-decoration: none;
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
      color: #0d0d0d;
      border: none;
      border-radius: var(--r-md);
      padding: var(--sp-4) var(--sp-6);
      transition: box-shadow var(--dur-base), transform var(--dur-fast);
      cursor: pointer;
  }
  
  .cart_totals .wc-proceed-to-checkout .checkout-button:hover,
  a.checkout-button:hover {
      box-shadow: var(--shadow-amber);
      transform: translateY(-1px);
      color: #000;
  }
  
  
  /* ============================================================
     [9] CHECKOUT
     ============================================================ */
  
  .checkout-section {
      padding-block: var(--sp-6) var(--sp-12);
  }
  .checkout-layout {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: var(--sp-6);
      align-items: start;
  }

  /* form-checkout.php gebruikt cart-layout + checkout-layout: sidebar-breedte als checkout */
  .cart-layout.checkout-layout {
      grid-template-columns: 1fr 380px;
      gap: var(--sp-8);
  }

  /* Formuliervelden in widget--shop (zelfde visueel als eerdere checkout-block) */
  .checkout-section .checkout-main .widget--shop {
      margin-bottom: var(--sp-5);
  }

  .checkout-section .checkout-main .widget--shop .woocommerce-billing-fields > h3,
  .checkout-section .checkout-main .widget--shop .woocommerce-shipping-fields > h3,
  .checkout-section .checkout-main .widget--shop .woocommerce-additional-fields > h3 {
      display: none;
  }

  .checkout-section .checkout-main .cart-continue {
      margin-bottom: var(--sp-5);
  }
  .checkout-steps {
      display: flex;
      gap: 0;
      margin-bottom: var(--sp-6);
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      overflow: hidden;
  }
  
  .checkout-step {
      flex: 1;
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-4) var(--sp-5);
      border-right: 1px solid var(--clr-border);
      opacity: 0.4;
      transition: opacity var(--dur-base);
  }
  
  .checkout-step:last-child {
      border-right: none;
  }
  
  .checkout-step--active {
      opacity: 1;
      background: var(--clr-amber-glow);
  }
  
  .checkout-step__num {
      font-family: var(--font-mono);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      color: var(--clr-amber);
      line-height: 1;
  }
  
  .checkout-step__label {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      color: var(--txt-primary);
  }
  
  /* Checkout grid children — min-width: 0 voorkomt tabeloverflow */
  .checkout-main,
  .checkout-sidebar {
      min-width: 0;
  }

  /* Checkout blokken */
  .checkout-block {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      overflow: hidden;
      margin-bottom: var(--sp-5);
  }
  
  .checkout-block__header {
      padding: var(--sp-4) var(--sp-6);
      border-bottom: 1px solid var(--clr-border);
      background: var(--clr-panel);
  }
  
  .checkout-block__title {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      display: flex;
      align-items: center;
      gap: var(--sp-2);
  }
  
  .checkout-block__body {
      padding: var(--sp-5) var(--sp-6);
  }
  
  /* WooCommerce form fields */
  .checkout-block .woocommerce-input-wrapper,
  .woocommerce-form-row .woocommerce-input-wrapper {
      width: 100%;
  }
  
  .checkout-section .woocommerce-form-row,
  .checkout-section form.checkout .form-row.woocommerce-form-row {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: var(--sp-4);
  }
  
  .checkout-block label,
  .woocommerce-form-row label {
      display: block;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-secondary);
      margin-bottom: var(--sp-2);
  }
  
  .checkout-block input[type="text"],
  .checkout-block input[type="email"],
  .checkout-block input[type="tel"],
  .checkout-block input[type="password"],
  .checkout-block select,
  .checkout-block textarea,
  .woocommerce-checkout input[type="text"],
  .woocommerce-checkout input[type="email"],
  .woocommerce-checkout input[type="tel"],
  .woocommerce-checkout select,
  .woocommerce-checkout textarea.input-text {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      background: var(--clr-panel);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-md);
      padding: var(--sp-3) var(--sp-4);
      color: var(--txt-primary);
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  }

  .checkout-section textarea#order_comments,
  .woocommerce-checkout textarea#order_comments {
      min-height: 120px;
      resize: vertical;
      line-height: var(--lh-base, 1.5);
  }
  
  .checkout-block input:focus,
  .checkout-block select:focus,
  .checkout-block textarea:focus,
  .woocommerce-checkout input:focus,
  .woocommerce-checkout select:focus,
  .woocommerce-checkout textarea.input-text:focus {
      outline: none;
      border-color: var(--clr-amber);
      box-shadow: 0 0 0 3px var(--clr-amber-glow);
  }
  
  /* Form row 2-col — CSS grid vervangt de fragiele inline-block+margin-math.
     WC's eigen float reset blijft nodig als fallback voor oudere plugins. */
  .woocommerce-form-row--first,
  .woocommerce-form-row--last {
      float: none !important;
      display: block;
      width: 100%;
      margin: 0 0 var(--sp-4) 0;
  }

  /* 2-koloms grid op brede schermen via parent wrapper.
     WooCommerce plaatst --first en --last als siblings; we koppelen ze via
     een :has-selector op de parent zodat het grid pas actief is als beide
     aanwezig zijn. */
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  #customer_details .woocommerce-address-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--sp-4);
      row-gap: var(--sp-4);
      align-items: start;
  }

  /* Velden die de volle breedte nodig hebben (postcode + stad rij wordt
     al gesplitst door WC; overige velden standaard full-width) */
  .woocommerce-billing-fields__field-wrapper .form-row,
  .woocommerce-shipping-fields__field-wrapper .form-row,
  #customer_details .woocommerce-address-fields__field-wrapper .form-row,
  .woocommerce-additional-fields__field-wrapper .form-row {
      margin-bottom: 0; /* grid gap regelt spacing */
  }

  .woocommerce-form-row--wide,
  p.form-row.notes,
  p.form-row.form-row-wide {
      grid-column: 1 / -1;
  }

  /* Clearfix na de float-rij (WC's .clear span) */
  .woocommerce-form-row--first + .woocommerce-form-row--last + .clear,
  .woocommerce-EditAccountForm .clear {
      display: block;
      clear: both;
  }
  
  /* Checkbox */
  .checkout-block .woocommerce-form__label-for-checkbox,
  .checkout-section .checkout-main .widget--shop .woocommerce-form__label-for-checkbox {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      cursor: pointer;
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      text-transform: none;
      letter-spacing: 0;
      font-weight: var(--fw-normal);
      color: var(--txt-secondary);
  }
  
  .checkout-block input[type="checkbox"],
  .checkout-section .checkout-main .widget--shop input[type="checkbox"] {
      width: 16px;
      height: 16px;
      border: 2px solid var(--clr-border-light);
      border-radius: var(--r-sm);
      background: var(--clr-panel);
      cursor: pointer;
      accent-color: var(--clr-amber);
  }
  
  /* Login prompt */
  .checkout-login-prompt {
      padding: var(--sp-4) var(--sp-5);
      background: var(--clr-cyan-dim);
      border: 1px solid rgba(6,182,212,0.2);
      border-radius: var(--r-lg);
      margin-bottom: var(--sp-6);
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
  }
  
  /* Order review tabel */
  .checkout-order-review table.shop_table,
  .woocommerce-checkout-review-order-table {
      border: none;
      background: transparent;
      border-radius: 0;
  }
  
  .checkout-order-review .cart_item td,
  .woocommerce-checkout-review-order-table .cart_item td {
      padding: var(--sp-3) var(--sp-4);
      border-bottom: 1px solid var(--clr-border);
      font-size: var(--fs-sm);
      vertical-align: middle;
  }
  
  .checkout-order-review .cart-subtotal td,
  .checkout-order-review .order-total td {
      font-family: var(--font-display);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-normal);
      color: var(--clr-amber);
  }
  
  /* Payment methods */
  #payment .wc_payment_methods {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
  }
  
  #payment .wc_payment_method {
      background: var(--clr-panel);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      overflow: hidden;
      transition: border-color var(--dur-fast);
  }
  
  #payment .wc_payment_method:has(input:checked) {
      border-color: var(--clr-amber);
      background: var(--clr-amber-glow);
  }
  
  #payment .wc_payment_method label {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-4) var(--sp-5);
      cursor: pointer;
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      font-weight: var(--fw-semi);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
  }
  
  #payment .wc_payment_method input[type="radio"] {
      accent-color: var(--clr-amber);
  }
  
  #payment .payment_box {
      padding: var(--sp-4) var(--sp-5);
      border-top: 1px solid var(--clr-border);
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
      background: var(--clr-fuselage);
  }
  
  /* Place order button */
  #payment #place_order,
  .woocommerce #payment #place_order {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
      color: #0d0d0d;
      border: none;
      border-radius: var(--r-md);
      padding: var(--sp-5) var(--sp-6);
      cursor: pointer;
      margin-top: var(--sp-5);
      transition: box-shadow var(--dur-base), transform var(--dur-fast);
  }
  
  #payment #place_order:hover {
      box-shadow: var(--shadow-amber);
      transform: translateY(-1px);
  }

  /* ============================================================
     [9b] CHECKOUT — form-reset, waardebon (kleuren = globaal licht thema)
     ============================================================ */

  body.woocommerce-checkout .cart-section.checkout-section {
      padding-block: var(--sp-6) var(--sp-12);
  }

  body.woocommerce-checkout .checkout-login-prompt {
      background: rgba(6, 182, 212, 0.08);
      border-color: rgba(6, 182, 212, 0.25);
      color: var(--txt-secondary);
  }

  /* Waardebon onder "Terug naar winkelwagen" */
  body.woocommerce-checkout .checkout-coupon-slot {
      margin-bottom: var(--sp-6);
      max-width: 100%;
  }

  body.woocommerce-checkout .checkout-coupon-slot .woocommerce-form-coupon-toggle {
      margin: 0;
  }

  body.woocommerce-checkout .checkout-coupon-slot .checkout_coupon {
      margin-top: var(--sp-3);
      padding: var(--sp-4);
      background: var(--clr-panel);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
  }

  /* Formuliervelden: WC float-layout uitschakelen (label boven veld) */
  body.woocommerce-checkout .woocommerce form.checkout .form-row.woocommerce-form-row {
      float: none !important;
      width: 100% !important;
      clear: both !important;
  }

  body.woocommerce-checkout .woocommerce form.checkout .form-row.woocommerce-form-row label {
      float: none !important;
      width: 100% !important;
      display: block !important;
      text-align: left !important;
  }

  body.woocommerce-checkout .woocommerce form.checkout .woocommerce-input-wrapper {
      float: none !important;
      width: 100% !important;
      display: block !important;
  }

  body.woocommerce-checkout .col2-set,
  body.woocommerce-checkout .col2-set .col-1,
  body.woocommerce-checkout .col2-set .col-2 {
      float: none !important;
      width: 100% !important;
  }

  @media (max-width: 640px) {
      body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
      body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
      body.woocommerce-checkout #customer_details .woocommerce-address-fields__field-wrapper,
      body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
          grid-template-columns: 1fr;
      }
  }
  
  
  /* ============================================================
     [10] ORDER DETAILS / THANK YOU
     ============================================================ */
  
  /* Thank you hero */
  .thankyou-hero {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-4);
  }
  
  .thankyou-hero__icon {
      width: 72px;
      height: 72px;
      background: var(--clr-green-dim);
      border: 2px solid rgba(34,197,94,0.3);
      border-radius: var(--r-full);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: var(--clr-green);
      margin-bottom: var(--sp-3);
  }
  
  .thankyou-hero__sub {
      font-size: var(--fs-md);
      color: var(--txt-secondary);
      max-width: 52ch;
      text-align: center;
      margin: 0 auto;
  }
  
  /* Order overview stats */
  .thankyou-section {
      padding-block: var(--sp-8) var(--sp-16);
  }
  
  .thankyou-overview {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--sp-4);
      margin-bottom: var(--sp-8);
  }
  
  .thankyou-stat {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      padding: var(--sp-4) var(--sp-5);
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
  }
  
  .thankyou-stat__label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-muted);
  }
  
  .thankyou-stat__value {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      color: var(--txt-primary);
      text-transform: uppercase;
  }
  
  .thankyou-stat__value--price {
      color: var(--clr-amber);
      font-size: var(--fs-xl);
  }
  
  /* Order details / customer details */
  .thankyou-order-details,
  .thankyou-customer-details {
      margin-bottom: var(--sp-6);
  }
  
  /* Order details table */
  .order-details-table {
      border: none;
      background: transparent;
      border-radius: 0;
      overflow: visible;
  }
  
  .order-details-table th {
      padding: var(--sp-3) var(--sp-4);
      background: transparent;
      color: var(--txt-muted);
  }
  
  .order-details-table td {
      padding: var(--sp-4) var(--sp-4);
      border-bottom: 1px solid var(--clr-border);
  }
  
  .order-details-table tfoot tr:last-child td {
      border-bottom: none;
  }
  
  .order-item__name {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      text-decoration: none;
      transition: color var(--dur-fast);
  }
  
  .order-item__name:hover {
      color: var(--clr-amber);
  }
  
  .order-item__sku {
      margin-top: var(--sp-2);
  }
  
  .order-item__qty {
      font-family: var(--font-mono);
      font-size: var(--fs-base);
      color: var(--txt-primary);
      background: var(--clr-panel);
      padding: 2px 8px;
      border-radius: var(--r-sm);
      border: 1px solid var(--clr-border);
  }
  
  .order-total-label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-wide);
      color: var(--txt-muted);
  }
  
  .order-total-value {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--txt-primary);
      text-align: right;
  }
  
  .order-total-value--grand {
      font-size: var(--fs-xl);
      color: var(--clr-amber);
  }
  
  /* Thank you actions */
  .thankyou-actions {
      display: flex;
      align-items: center;
      gap: var(--sp-4);
      flex-wrap: wrap;
      margin-top: var(--sp-8);
      padding-top: var(--sp-8);
      border-top: 1px solid var(--clr-border);
  }
  
  
  /* ============================================================
     [11] MY ACCOUNT — volledig herschreven
     ============================================================ */

  /* ══════════════════════════════════════════════════════════
     WooCommerce My Account — CSS volledig herschreven
     Werkt ALTIJD: met én zonder my-account.php template-override.
     Stylt WC's eigen native output (.woocommerce-MyAccount-*)
     ÉN onze custom markup (.myaccount-nav / .myaccount-layout).
     ══════════════════════════════════════════════════════════ */


  /* ── 0. WC wrapper: NOOIT display:contents gebruiken ──────
     display:contents breekt floats, widths en positionering
     van alle child-elementen (formuliervelden, nav, content). */

  .woocommerce-account .woocommerce {
      display: block;          /* reset — flex op container-niveau regelt de layout */
  }


  /* ── 1. WC native layout grid ─────────────────────────────
     WC rendert ALTIJD:
       .woocommerce-MyAccount-navigation  (links)
       .woocommerce-MyAccount-content     (rechts)
     als siblings inside .woocommerce.
     We zetten die direct om naar een grid.                   */

  /* Container die nav + woocommerce-content naast elkaar zet.
     .myaccount-layout (nav) en .woocommerce (content) zijn siblings
     binnen .myaccount-section .container — flex maakt ze naast elkaar.
     NB: Hello Elementor injecteert .page-header + .page-content + .woocommerce
     tussen .container en .myaccount-layout. .myaccount-layout is de werkelijke
     parent van beide kolommen en krijgt daarom de flex. */

  /* Verberg Hello Elementor's eigen page-header — my-account.php
     heeft zijn eigen .page-header-compact */
  .woocommerce-account .site-main > .page-header {
      display: none !important;
  }

  /* .page-content en .woocommerce zijn doorgangswrappers — volle breedte */
  .woocommerce-account .page-content,
  .woocommerce-account .myaccount-section .woocommerce {
      width: 100%;
  }

  /* .myaccount-layout is de directe parent van .myaccount-nav
     én .myaccount-content — hier zit de flex */
  .myaccount-section .container {
      width: 100%;
  }

  .myaccount-layout {
      display: flex !important;
      gap: var(--sp-8);
      align-items: start;
      width: 100%;
  }

  /* Nav: vaste breedte */
  .myaccount-layout > .myaccount-nav {
      flex: 0 0 260px;
      width: 260px;
  }

  /* Content: vult de rest */
  .myaccount-layout > .myaccount-content {
      flex: 1;
      min-width: 0;
  }

  /* WC legt .woocommerce-MyAccount-navigation standaard als
     float:left (25%) neer. Reset dat en maak een proper grid. */
  .woocommerce-account .woocommerce-MyAccount-navigation {
      float: none !important;
      width: auto !important;
      /* Verberg WC's default nav ALLEEN als onze .myaccount-nav
         aanwezig is (template override geladen) */
  }

  /* Als onze custom nav WEL aanwezig is → verberg WC's nav */
  .myaccount-nav ~ * .woocommerce-MyAccount-navigation,
  .myaccount-layout .woocommerce-MyAccount-navigation {
      display: none !important;
  }

  /* Als onze custom nav NIET aanwezig is (template override mislukt)
     → style WC's eigen nav als fallback */
  .woocommerce-account:not(:has(.myaccount-nav)) .woocommerce-MyAccount-navigation {
      display: block !important;
      width: 260px !important;
      flex-shrink: 0;
  }

  /* Maak de .woocommerce wrapper een grid als er geen custom layout is */
  .woocommerce-account:not(:has(.myaccount-layout)) .woocommerce {
      display: grid !important;
      grid-template-columns: 260px 1fr;
      gap: var(--sp-8);
      align-items: start;
      padding-block: var(--sp-8) var(--sp-12);
  }

  /* Fallback nav styling (WC default .woocommerce-MyAccount-navigation) */
  .woocommerce-account:not(:has(.myaccount-nav)) .woocommerce-MyAccount-navigation {
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      overflow: hidden;
      position: sticky;
      top: calc(var(--nav-h) + var(--sp-5));
  }

  .woocommerce-account:not(:has(.myaccount-nav)) .woocommerce-MyAccount-navigation ul {
      padding: var(--sp-2) 0;
      list-style: none;
      margin: 0;
  }

  .woocommerce-account:not(:has(.myaccount-nav)) .woocommerce-MyAccount-navigation li a {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-3) var(--sp-5);
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      color: var(--txt-secondary);
      text-decoration: none;
      border-left: 3px solid transparent;
      transition: background var(--dur-fast), color var(--dur-fast);
  }

  .woocommerce-account:not(:has(.myaccount-nav)) .woocommerce-MyAccount-navigation li a:hover {
      background: var(--clr-panel);
      color: var(--txt-primary);
  }

  .woocommerce-account:not(:has(.myaccount-nav)) .woocommerce-MyAccount-navigation li.is-active a,
  .woocommerce-account:not(:has(.myaccount-nav)) .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a {
      background: var(--clr-amber-glow);
      color: var(--clr-amber);
      border-left-color: var(--clr-amber);
  }

  /* WC content wrapper — reset WC's float + width */
  .woocommerce-MyAccount-content {
      float: none !important;
      width: auto !important;
      padding: var(--sp-8) !important;   /* was 0 — dit veroorzaakte content-tegen-rand */
      background: transparent !important;
      border: none !important;
  }

  /* Fallback content card als onze .myaccount-content er niet is */
  .woocommerce-account:not(:has(.myaccount-content)) .woocommerce-MyAccount-content {
      background: var(--clr-fuselage) !important;
      border: 1px solid var(--clr-border) !important;
      border-radius: var(--r-xl) !important;
      padding: var(--sp-8) !important;
      min-height: 320px;
  }


  /* ── 2. Layout grid (custom my-account.php) ───────────────── */

  .myaccount-section {
      padding-block: var(--sp-10) var(--sp-16);
  }

  /* .myaccount-layout is nu een flex-child (zie container boven).
     Geen eigen grid nodig — enkel sticky nav erin. */
  .myaccount-layout {
      /* flex: 0 0 260px al gezet op container-niveau */
  }


  /* ── 3. Sidebar navigatie (custom) ───────────────────────── */

  .myaccount-nav {
      position: sticky;
      top: calc(var(--nav-h) + var(--sp-5));
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--shadow-md);
  }

  .myaccount-nav::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--clr-amber), var(--clr-orange));
  }

  .myaccount-nav__profile {
      display: flex;
      align-items: center;
      gap: var(--sp-4);
      padding: var(--sp-5) var(--sp-5) var(--sp-4);
      border-bottom: 1px solid var(--clr-border);
  }

  .myaccount-nav__avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-black);
      color: #000;
      flex-shrink: 0;
      letter-spacing: 0;
      box-shadow: 0 2px 8px rgba(245,158,11,0.35);
  }

  .myaccount-nav__profile-info { min-width: 0; }

  .myaccount-nav__profile-name {
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .myaccount-nav__profile-role {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--clr-amber);
      margin-top: 2px;
  }

  .myaccount-nav__list {
      padding: var(--sp-2) 0;
      list-style: none;
  }

  .myaccount-nav__link {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-3) var(--sp-5);
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      color: var(--txt-secondary);
      text-decoration: none;
      transition: background var(--dur-fast), color var(--dur-fast);
      border-left: 3px solid transparent;
  }

  .myaccount-nav__link:hover {
      background: var(--clr-panel);
      color: var(--txt-primary);
  }

  .myaccount-nav__item.is-active > .myaccount-nav__link,
  .myaccount-nav__item.woocommerce-MyAccount-navigation-link--is-active > .myaccount-nav__link,
  .myaccount-nav__link[aria-current="page"] {
      background: var(--clr-amber-glow);
      color: var(--clr-amber);
      border-left-color: var(--clr-amber);
  }

  .myaccount-nav__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      background: var(--clr-panel);
      border-radius: var(--r-md);
      flex-shrink: 0;
      transition: background var(--dur-fast);
  }

  .myaccount-nav__item.is-active > .myaccount-nav__link .myaccount-nav__icon,
  .myaccount-nav__link[aria-current="page"] .myaccount-nav__icon {
      background: rgba(245,158,11,0.2);
  }

  .myaccount-nav__icon svg { display: block; }

  .myaccount-nav__label { flex: 1; }

  .myaccount-nav__dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--clr-amber);
      margin-left: auto;
      flex-shrink: 0;
  }

  .myaccount-nav__item--logout {
      border-top: 1px solid var(--clr-border);
      margin-top: var(--sp-2);
      padding-top: var(--sp-2);
  }

  .myaccount-nav__link--logout { color: var(--txt-muted); }

  .myaccount-nav__link--logout:hover {
      color: var(--clr-red) !important;
      background: var(--clr-red-dim) !important;
  }


  /* ── 4. Content area ─────────────────────────────────────── */

  .myaccount-content {
      flex: 1;
      min-width: 0;
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-xl);
      padding: var(--sp-8);
      min-height: 320px;
      box-shadow: var(--shadow-md);
  }

  /* Headers binnen content */
  .myaccount-content h2,
  .myaccount-content .woocommerce-column__title,
  .woocommerce-MyAccount-content h2,
  .woocommerce-MyAccount-content .woocommerce-column__title {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin-bottom: var(--sp-5);
      padding-bottom: var(--sp-4);
      border-bottom: 1px solid var(--clr-border);
  }

  .myaccount-content h3,
  .woocommerce-MyAccount-content h3 {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin-bottom: var(--sp-4);
  }

  /* Dashboard tekst */
  .woocommerce-MyAccount-content > p,
  .myaccount-content .woocommerce-MyAccount-content > p {
      color: var(--txt-secondary);
      font-size: var(--fs-sm);
      line-height: var(--lh-base);
      max-width: 64ch;
      margin-bottom: var(--sp-3);
  }

  .woocommerce-MyAccount-content > p a,
  .myaccount-content .woocommerce-MyAccount-content > p a {
      color: var(--clr-amber);
      text-decoration: underline;
      text-underline-offset: 3px;
  }

    /* ── 5. WooCommerce notices ──────────────────────────────── */

  .myaccount-content .woocommerce-message,
  .myaccount-content .woocommerce-error,
  .myaccount-content .woocommerce-info {
      list-style: none;
      background: var(--clr-panel);
      border-top: 3px solid var(--clr-amber);
      border-radius: var(--r-md);
      padding: var(--sp-4) var(--sp-5);
      margin-bottom: var(--sp-5);
      color: var(--txt-secondary);
      font-size: var(--fs-sm);
  }

  .myaccount-content .woocommerce-error {
      border-top-color: var(--clr-red);
  }

  .myaccount-content .woocommerce-info {
      border-top-color: var(--clr-cyan);
  }


  /* ── 6. WooCommerce formulier-velden ─────────────────────── */

  /* Herstel de witte achtergrond + lichte styling van WC */
  .woocommerce-account .woocommerce-form-row,
  .woocommerce-account p.form-row {
      margin-bottom: var(--sp-4);
  }

  .woocommerce-account .woocommerce-form-row label,
  .woocommerce-account p.form-row label {
      display: block;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-secondary);
      margin-bottom: var(--sp-2);
  }

  .woocommerce-account .woocommerce-form-row label .required,
  .woocommerce-account p.form-row label .required {
      color: var(--clr-amber);
      text-decoration: none;
  }

  /* Input / select / textarea */
  .woocommerce-account .woocommerce-form-row input.input-text,
  .woocommerce-account p.form-row input.input-text,
  .woocommerce-account .woocommerce-form-row input[type="text"],
  .woocommerce-account .woocommerce-form-row input[type="email"],
  .woocommerce-account .woocommerce-form-row input[type="password"],
  .woocommerce-account .woocommerce-form-row input[type="tel"],
  .woocommerce-account .woocommerce-form-row select {
      display: block;
      width: 100%;
      background: var(--clr-cockpit) !important;
      border: 1px solid var(--clr-border-light) !important;
      border-radius: var(--r-md) !important;
      color: var(--txt-primary) !important;
      font-family: var(--font-body);
      font-size: var(--fs-base);
      padding: var(--sp-3) var(--sp-4) !important;
      outline: none;
      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
      box-shadow: none !important;
  }

  .woocommerce-account .woocommerce-form-row input:focus,
  .woocommerce-account p.form-row input:focus,
  .woocommerce-account .woocommerce-form-row select:focus {
      border-color: var(--clr-amber) !important;
      box-shadow: 0 0 0 3px var(--clr-amber-glow) !important;
  }

  /* Wachtwoord-show toggle knop (WC injecteert dit) */
  .woocommerce-account .show-password-input,
  .woocommerce-account .woocommerce-password-strength {
      color: var(--txt-muted);
  }

  /* Rij met twee kolommen op account-pagina's — CSS grid, zelfde aanpak als checkout */
  .woocommerce-account .woocommerce-form-row--first,
  .woocommerce-account .woocommerce-form-row--last {
      float: none !important;
      display: block;
      width: 100%;
      margin: 0 0 var(--sp-4) 0;
  }

  /* Fieldset wachtwoordwijziging */
  .woocommerce-account fieldset,
  .woocommerce-EditAccountForm fieldset {
      background: var(--clr-panel);
      border: 1px solid var(--clr-border) !important;
      border-radius: var(--r-lg) !important;
      padding: var(--sp-6) !important;
      margin-top: var(--sp-6);
      margin-bottom: var(--sp-6);
  }

  .woocommerce-account fieldset legend,
  .woocommerce-EditAccountForm legend {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--clr-amber);
      background: var(--clr-panel);
      padding: 0 var(--sp-3);
  }

  /* Opslaan-knop */
  .woocommerce-account .woocommerce-Button,
  .woocommerce-account button[type="submit"],
  .woocommerce-account input[type="submit"] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display) !important;
      font-size: var(--fs-sm) !important;
      font-weight: var(--fw-bold) !important;
      letter-spacing: var(--ls-wider) !important;
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange)) !important;
      color: #0d0d0d !important;
      border: none !important;
      border-radius: var(--r-md) !important;
      padding: var(--sp-3) var(--sp-8) !important;
      cursor: pointer;
      transition: box-shadow var(--dur-base), transform var(--dur-fast);
      margin-top: var(--sp-2);
  }

  .woocommerce-account .woocommerce-Button:hover,
  .woocommerce-account button[type="submit"]:hover,
  .woocommerce-account input[type="submit"]:hover {
      box-shadow: 0 0 20px rgba(245,158,11,0.35), 0 0 6px rgba(245,158,11,0.15) !important;
      transform: translateY(-1px);
  }


  /* ── 7. Bestellingen-tabel ───────────────────────────────── */

  .woocommerce-orders-table {
      width: 100%;
      border-collapse: collapse;
  }

  .woocommerce-orders-table thead {
      background: var(--clr-panel);
  }

  .woocommerce-orders-table th {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-muted);
      padding: var(--sp-3) var(--sp-4);
      border-bottom: 2px solid var(--clr-border);
      text-align: left;
  }

  .woocommerce-orders-table td {
      padding: var(--sp-4);
      border-bottom: 1px solid var(--clr-border);
      color: var(--txt-secondary);
      font-size: var(--fs-sm);
      vertical-align: middle;
  }

  .woocommerce-orders-table tr:last-child td {
      border-bottom: none;
  }

  .woocommerce-orders-table .order-number a {
      font-family: var(--font-mono);
      color: var(--clr-cyan);
      text-decoration: underline;
      text-underline-offset: 3px;
  }

  .woocommerce-orders-table .woocommerce-button.button {
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      background: var(--clr-panel);
      color: var(--txt-secondary);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-sm);
      padding: 4px var(--sp-3);
      text-decoration: none;
      transition: color var(--dur-fast), border-color var(--dur-fast);
  }

  .woocommerce-orders-table .woocommerce-button.button:hover {
      color: var(--clr-amber);
      border-color: var(--clr-amber);
  }

  /* Order-status badges */
  .woocommerce-orders-table mark.order-status,
  mark.order-status {
      background: transparent;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: var(--r-sm);
      border: 1px solid;
  }

  mark.order-status.status-completed    { color: var(--clr-green); background: var(--clr-green-dim); border-color: rgba(34,197,94,0.2); }
  mark.order-status.status-processing   { color: var(--clr-cyan);  background: var(--clr-cyan-dim);  border-color: rgba(6,182,212,0.2); }
  mark.order-status.status-pending      { color: var(--clr-amber); background: var(--clr-amber-glow); border-color: rgba(245,158,11,0.2); }
  mark.order-status.status-cancelled,
  mark.order-status.status-failed       { color: var(--clr-red);   background: var(--clr-red-dim);   border-color: rgba(239,68,68,0.2); }
  mark.order-status.status-on-hold      { color: var(--txt-muted); background: var(--clr-panel);     border-color: var(--clr-border); }


  /* ── 8. Adressen ─────────────────────────────────────────── */

  /* Overzicht: twee gelijkwaardige kaarten naast elkaar, zelfde hoogte */
  .woocommerce-Addresses {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: var(--sp-5);
      width: 100%;
      clear: both;
  }

  /* WC-core floats volledig uit */
  .woocommerce-account .woocommerce-Addresses,
  .woocommerce-account .woocommerce-Addresses::after {
      float: none !important;
      clear: none !important;
  }

  .woocommerce-Address {
      float: none !important;
      clear: none !important;
      width: auto !important;
      min-width: 0;
      display: flex;
      flex-direction: column;
      background: var(--clr-panel);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      padding: var(--sp-5) var(--sp-6);
      box-sizing: border-box;
      transition: border-color 0.18s, box-shadow 0.18s;
  }

  .woocommerce-Address:hover {
      border-color: var(--clr-amber);
      box-shadow: 0 0 0 3px rgba(245,158,11,.08);
  }

  .woocommerce-Address-title,
  .woocommerce-Address-title.title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-3);
      margin: 0 0 var(--sp-4) 0;
      padding-bottom: var(--sp-4);
      border-bottom: 1px solid var(--clr-border);
  }

  .woocommerce-Address-title h3 {
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      line-height: 1.2;
  }

  .woocommerce-Address-title a,
  .woocommerce-Address-title a.edit,
  .woocommerce-Address-title .btn {
      flex-shrink: 0;
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium, 500);
      letter-spacing: var(--ls-wide);
      color: var(--clr-amber);
      text-decoration: none;
      white-space: nowrap;
      background: none;
      border: none;
      padding: 0;
      line-height: 1;
  }

  .woocommerce-Address-title a:hover,
  .woocommerce-Address-title a.edit:hover,
  .woocommerce-Address-title .btn:hover {
      color: var(--txt-primary);
  }

  .woocommerce-Address address {
      flex: 1;
      font-style: normal;
      color: var(--txt-secondary);
      font-size: var(--fs-sm);
      line-height: 1.7;
      margin: 0;
  }

  address {
      font-style: normal;
      color: var(--txt-secondary);
      font-size: var(--fs-sm);
      line-height: var(--lh-loose);
  }

  .myaccount-address--empty {
      display: block;
      font-size: var(--fs-sm);
      color: var(--txt-muted);
      border: 1.5px dashed var(--clr-border);
      border-radius: var(--r-md);
      padding: var(--sp-4) var(--sp-5);
      text-align: center;
      margin-top: var(--sp-2);
  }

  /* Leden-item nav */
  .myaccount-nav__item--leden .myaccount-nav__label {
      color: var(--clr-amber);
  }
  .myaccount-nav__item--leden .myaccount-nav__icon svg {
      color: var(--clr-amber);
  }
  .myaccount-nav__item--leden:hover .myaccount-nav__label,
  .myaccount-nav__item--leden:hover .myaccount-nav__icon svg {
      color: var(--txt-primary);
  }

  /* Adres-bewerken-form: velden in twee kolommen */
  .woocommerce-account .edit-address-form {
      max-width: 100%;
  }

  .woocommerce-account .edit-address-form .woocommerce-address-fields__field-wrapper {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--sp-5);
      row-gap: var(--sp-4);
      align-items: start;
      width: 100%;
      margin-bottom: var(--sp-6);
  }

  .woocommerce-account .edit-address-form .woocommerce-address-fields__field-wrapper .form-row,
  .woocommerce-account .edit-address-form .woocommerce-address-fields__field-wrapper p {
      float: none !important;
      clear: none !important;
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      min-width: 0;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box;
  }

  .woocommerce-account .edit-address-form .woocommerce-address-fields__field-wrapper .form-row-wide,
  .woocommerce-account .edit-address-form .woocommerce-address-fields__field-wrapper p.form-row-wide {
      grid-column: 1 / -1;
  }

  .woocommerce-account .edit-address-form label {
      float: none !important;
      display: block !important;
      width: auto !important;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--txt-secondary);
      margin-bottom: var(--sp-2);
  }

  .woocommerce-account .edit-address-form input.input-text,
  .woocommerce-account .edit-address-form input[type="text"],
  .woocommerce-account .edit-address-form input[type="email"],
  .woocommerce-account .edit-address-form input[type="tel"],
  .woocommerce-account .edit-address-form select {
      display: block;
      width: 100% !important;
      box-sizing: border-box;
      background: var(--clr-cockpit) !important;
      border: 1px solid var(--clr-border-light) !important;
      border-radius: var(--r-md) !important;
      color: var(--txt-primary) !important;
      font-family: var(--font-body);
      font-size: var(--fs-base);
      padding: var(--sp-3) var(--sp-4) !important;
      outline: none;
      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
      box-shadow: none !important;
      margin: 0 !important;
  }

  .woocommerce-account .edit-address-form input:focus,
  .woocommerce-account .edit-address-form select:focus {
      border-color: var(--clr-amber) !important;
      box-shadow: 0 0 0 3px var(--clr-amber-glow) !important;
  }

  .woocommerce-account .edit-address-form .woocommerce-input-wrapper,
  .woocommerce-account .edit-address-form .woocommerce-InputWrapper {
      float: none !important;
      display: block !important;
      width: 100% !important;
      min-width: 0;
  }

  .woocommerce-account .edit-address-form label .required {
      color: var(--clr-amber);
      text-decoration: none;
      margin-left: 2px;
  }


  /* ── 9. Dashboard ────────────────────────────────────────── */

  .myaccount-dashboard__header {
      margin-bottom: var(--sp-8);
      padding-bottom: var(--sp-6);
      border-bottom: 1px solid var(--clr-border);
  }

  .myaccount-dashboard__title {
      font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl));
      margin-top: var(--sp-2);
      margin-bottom: var(--sp-3);
  }

  .myaccount-dashboard__title em { color: var(--clr-amber); }

  .myaccount-dashboard__sub {
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
  }

  .myaccount-dashboard__sub a { color: var(--clr-amber); text-decoration: underline; text-underline-offset: 3px; }

  /* Stats-rij */
  .myaccount-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-4);
      margin-bottom: var(--sp-8);
  }

  .myaccount-stat {
      background: var(--clr-panel);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      padding: var(--sp-5) var(--sp-6);
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
  }

  .myaccount-stat__value {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      font-weight: var(--fw-black);
      color: var(--clr-amber);
      letter-spacing: var(--ls-tight);
      line-height: 1;
  }

  .myaccount-stat__label {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-muted);
  }

  /* Sectie-header: titel + link */
  .myaccount-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--sp-4);
  }

  .myaccount-section-title {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--txt-primary);
      margin-bottom: var(--sp-5);
      padding-bottom: var(--sp-4);
      border-bottom: 1px solid var(--clr-border);
  }

  /* Als titel in een flex .myaccount-section-header zit → geen eigen bottom-margin */
  .myaccount-section-header .myaccount-section-title {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
  }

  .myaccount-section-link {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-wide);
      color: var(--clr-amber);
      text-decoration: none;
      text-transform: uppercase;
      transition: color var(--dur-fast);
  }

  .myaccount-section-link:hover { color: var(--txt-primary); }

  .myaccount-recent { margin-bottom: var(--sp-8); }

  /* Snelle acties */
  .myaccount-quick-links {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-4);
      margin-top: var(--sp-6);
  }

  .myaccount-quick-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-3);
      padding: var(--sp-5) var(--sp-4);
      background: var(--clr-panel);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      text-decoration: none;
      color: var(--txt-secondary);
      text-align: center;
      transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }

  .myaccount-quick-link:hover {
      background: var(--clr-amber-glow);
      border-color: rgba(245,158,11,0.3);
      color: var(--clr-amber);
  }

  .myaccount-quick-link__icon {
      font-size: 22px;
      line-height: 1;
      color: var(--txt-muted);
      transition: color var(--dur-fast);
  }

  .myaccount-quick-link:hover .myaccount-quick-link__icon { color: var(--clr-amber); }

  .myaccount-quick-link__label {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
  }

  /* Back-link (view-order) */
  .myaccount-back-link {
      margin-bottom: var(--sp-5);
  }

  /* Intro-tekst (edit-address overzicht) */
  .myaccount-intro {
      color: var(--txt-secondary);
      font-size: var(--fs-sm);
      margin-bottom: var(--sp-6);
  }

  /* Paginering bestellingen */
  .account-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-4);
      margin-top: var(--sp-6);
  }

  .account-pagination__info {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      letter-spacing: var(--ls-wide);
      color: var(--txt-muted);
  }


  /* ── 10. Login / Register pagina ─────────────────────────── */

  .myaccount-auth-section {
      padding-block: var(--sp-10) var(--sp-16);
  }

  .myaccount-auth-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-8);
      align-items: start;
      max-width: 900px;
      margin: 0 auto;
  }

  /* Als registratie uit staat → login gecentreerd */
  .myaccount-auth-layout:has(.myaccount-auth-panel:only-child) {
      grid-template-columns: minmax(auto, 480px);
      justify-content: center;
  }

  .myaccount-auth-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      margin-bottom: var(--sp-5);
      flex-wrap: wrap;
  }

  .myaccount-auth-forgot {
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      text-decoration: none;
      transition: color var(--dur-fast);
  }

  .myaccount-auth-forgot:hover { color: var(--clr-amber); }

  .myaccount-auth-hint {
      font-size: var(--fs-sm);
      color: var(--txt-muted);
      background: var(--clr-panel);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-md);
      padding: var(--sp-3) var(--sp-4);
      margin-bottom: var(--sp-4);
  }

  .myaccount-auth-privacy {
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      line-height: var(--lh-base);
      margin-bottom: var(--sp-5);
  }

  .myaccount-auth-privacy a { color: var(--clr-amber); text-decoration: underline; text-underline-offset: 3px; }

  .myaccount-auth-shop-note {
      color: var(--txt-secondary);
      line-height: var(--lh-loose);
      margin: 0 0 var(--sp-5);
      font-size: var(--fs-sm);
  }

  .myaccount-auth-shop-note strong {
      color: var(--txt-primary);
      font-weight: var(--fw-bold);
  }

  a.myaccount-auth-register-btn {
      display: inline-block;
      text-align: center;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: var(--sp-6);
  }

  .myaccount-word-lid-promo {
      margin-top: var(--sp-2);
      padding-top: var(--sp-5);
      border-top: 1px solid var(--clr-border);
  }

  .myaccount-word-lid-promo__label {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-widest);
      text-transform: uppercase;
      color: var(--clr-amber);
      margin: 0 0 var(--sp-3);
  }

  .myaccount-word-lid-promo__card {
      display: flex;
      align-items: center;
      gap: var(--sp-5);
      padding: var(--sp-4) var(--sp-5);
      border-radius: var(--r-lg);
      border: 1px solid rgba(245, 158, 11, 0.35);
      background: linear-gradient(
          145deg,
          rgba(245, 158, 11, 0.08) 0%,
          var(--clr-panel) 55%
      );
      text-decoration: none;
      color: inherit;
      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  }

  .myaccount-word-lid-promo__card:hover {
      border-color: var(--clr-amber);
      box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
  }

  .myaccount-word-lid-promo__logo-wrap {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 88px;
      height: 88px;
      border-radius: var(--r-md);
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--clr-border);
  }

  .myaccount-word-lid-promo__logo {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: var(--sp-2);
      display: block;
  }

  .myaccount-word-lid-promo__body {
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
      min-width: 0;
  }

  .myaccount-word-lid-promo__title {
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      color: var(--txt-primary);
      letter-spacing: var(--ls-tight);
  }

  .myaccount-word-lid-promo__text {
      font-size: var(--fs-sm);
      color: var(--txt-secondary);
      line-height: var(--lh-snug);
  }

  .myaccount-word-lid-promo__cta {
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-wide);
      color: var(--clr-amber);
      margin-top: var(--sp-2);
  }

  @media (max-width: 520px) {
      .myaccount-word-lid-promo__card {
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
      }

      .myaccount-word-lid-promo__logo-wrap {
          width: 72px;
          height: 72px;
      }
  }
  
  
  /* ============================================================
     [12] NOTICES
     ============================================================ */
  
  .shop-notice {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--sp-6);
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
  }
  
  .shop-notice li {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-3);
      padding: var(--sp-4) var(--sp-5);
      border-radius: var(--r-lg);
      font-size: var(--fs-sm);
      line-height: var(--lh-base);
  }
  
  .shop-notice__icon {
      flex-shrink: 0;
      font-size: 16px;
      margin-top: 1px;
  }
  
  .shop-notice--error li {
      background: var(--clr-red-dim);
      border: 1px solid rgba(239,68,68,0.25);
      color: #fca5a5;
  }
  
  .shop-notice--error .shop-notice__icon {
      color: var(--clr-red);
  }
  
  .shop-notice--success li {
      background: var(--clr-green-dim);
      border: 1px solid rgba(34,197,94,0.25);
      color: #86efac;
  }
  
  .shop-notice--success .shop-notice__icon {
      color: var(--clr-green);
  }
  
  .shop-notice--info li {
      background: var(--clr-cyan-dim);
      border: 1px solid rgba(6,182,212,0.25);
      color: #67e8f9;
  }
  
  .shop-notice--info .shop-notice__icon {
      color: var(--clr-cyan);
  }
  
  /* WooCommerce native notice classes (geen @extend — gewone CSS) */
  .woocommerce-error {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--sp-6);
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
  }
  .woocommerce-error li {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-3);
      padding: var(--sp-4) var(--sp-5);
      border-radius: var(--r-lg);
      font-size: var(--fs-sm);
      line-height: var(--lh-base);
      background: var(--clr-red-dim);
      border: 1px solid rgba(239,68,68,0.25);
      color: #fca5a5;
  }
  .woocommerce-message,
  .woocommerce-info {
      padding: var(--sp-4) var(--sp-5);
      border-radius: var(--r-lg);
      margin-bottom: var(--sp-6);
      font-size: var(--fs-sm);
      display: flex;
      align-items: center;
      gap: var(--sp-3);
  }
  
  .woocommerce-message {
      background: var(--clr-green-dim);
      border: 1px solid rgba(34,197,94,0.25);
      color: #86efac;
  }
  
  .woocommerce-info {
      background: var(--clr-cyan-dim);
      border: 1px solid rgba(6,182,212,0.25);
      color: #67e8f9;
  }
  
  /* Empty cart / shop state */
  .shop-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-5);
      padding: var(--sp-16) var(--sp-8);
      text-align: center;
  }
  
  .shop-empty__icon {
      font-size: 80px;
      opacity: 0.15;
  }
  
  .shop-empty__title {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-tight);
      text-transform: uppercase;
      color: var(--txt-primary);
  }
  
  .shop-empty__text {
      font-size: var(--fs-md);
      color: var(--txt-secondary);
      max-width: 42ch;
  }
  
  
  /* ============================================================
     [13] WOOCOMMERCE CORE OVERRIDES
     ============================================================ */
  
  /* Star ratings */
  .star-rating {
      overflow: hidden;
      position: relative;
      height: 1em;
      line-height: 1;
      font-size: 14px;
      width: 5.4em;
      font-family: star;
      display: inline-block;
  }
  
  .star-rating::before {
      content: "\53\53\53\53\53";
      opacity: 0.25;
      float: left;
      top: 0;
      left: 0;
      position: absolute;
      color: var(--clr-amber);
  }
  
  .star-rating span {
      overflow: hidden;
      float: left;
      top: 0;
      left: 0;
      position: absolute;
      padding-top: 1.5em;
  }
  
  .star-rating span::before {
      content: "\53\53\53\53\53";
      top: 0;
      position: absolute;
      left: 0;
      color: var(--clr-amber);
  }
  
  /* Price */
  .woocommerce-Price-amount,
  .price .woocommerce-Price-currencySymbol {
      font-family: var(--font-display);
  }
  
  /* Sale flash */
  .onsale {
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: var(--fw-black);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
      color: #000;
      padding: 3px 10px;
      border-radius: var(--r-sm);
      position: absolute;
      top: var(--sp-3);
      left: var(--sp-3);
      z-index: var(--z-raised);
  }
  
  /* WooCommerce loading overlay */
  .blockUI.blockOverlay {
      background: rgba(8,12,18,0.6) !important;
      backdrop-filter: blur(4px);
  }
  
  /* Add to cart button in loop */
  .woocommerce-loop-product__link,
  .added_to_cart {
      text-decoration: none;
  }
  
  .woocommerce ul.products li.product .button,
  .woocommerce-loop-add-to-cart-btn {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
      color: #000;
      border: none;
      border-radius: var(--r-md);
      padding: var(--sp-2) var(--sp-5);
      text-decoration: none;
      cursor: pointer;
      transition: box-shadow var(--dur-base), transform var(--dur-fast);
  }
  
  .woocommerce ul.products li.product .button:hover {
      box-shadow: var(--shadow-amber);
      transform: translateY(-1px);
      color: #000;
  }
  
  /* Added to cart check */
  .woocommerce ul.products li.product .added {
      background: var(--clr-green-dim);
      color: var(--clr-green);
      border: 1px solid rgba(34,197,94,0.3);
  }
  
  .woocommerce ul.products li.product .added::before {
      content: "✓ ";
  }
  
  /* Back to top / continue shopping */
  .return-to-shop a {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wider);
      text-transform: uppercase;
      color: var(--txt-secondary);
      text-decoration: none;
      padding: var(--sp-3) var(--sp-5);
      border: 1px solid var(--clr-border-light);
      border-radius: var(--r-md);
      transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  }
  
  .return-to-shop a:hover {
      color: var(--clr-amber);
      border-color: var(--clr-amber);
      background: var(--clr-amber-glow);
  }
  
  /* Forgot password link */
  .woocommerce-LostPassword a,
  .lost_password a {
      font-size: var(--fs-xs);
      color: var(--txt-muted);
      text-decoration: underline;
      text-underline-offset: 3px;
  }
  
  
  /* ============================================================
     [14] PAGINATION
     ============================================================ */
  
  .woocommerce-pagination {
      display: flex;
      justify-content: center;
      margin-top: var(--sp-12);
  }
  
  .woocommerce-pagination ul.page-numbers {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .woocommerce-pagination ul.page-numbers li a,
  .woocommerce-pagination ul.page-numbers li span {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 40px;
      padding: 0 var(--sp-3);
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      background: var(--clr-fuselage);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-md);
      color: var(--txt-secondary);
      text-decoration: none;
      transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }
  
  .woocommerce-pagination ul.page-numbers li a:hover {
      background: var(--clr-panel);
      border-color: var(--clr-amber);
      color: var(--clr-amber);
  }
  
  .woocommerce-pagination ul.page-numbers li span.current {
      background: var(--clr-amber-glow);
      border-color: var(--clr-amber);
      color: var(--clr-amber);
      font-weight: var(--fw-black);
  }
  
  .woocommerce-pagination ul.page-numbers li span.dots {
      background: transparent;
      border-color: transparent;
      color: var(--txt-muted);
  }
  
  
  /* ============================================================
     [15] RESPONSIVE
     ============================================================ */
  
  @media (max-width: 1200px) {
      .woocommerce ul.products,
      .woocommerce-page ul.products,
      ul.products,
      .products.shop-products-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
  
      .shop-products-grid--related {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
  
      .thankyou-overview {
          grid-template-columns: repeat(3, 1fr);
      }
  }
  
  @media (max-width: 1024px) {
      .shop-layout__inner {
          grid-template-columns: 220px 1fr;
          gap: var(--sp-6);
      }
  
      .single-product-layout {
          grid-template-columns: 1fr;
          gap: var(--sp-8);
      }
  
      .single-product__gallery .woocommerce-product-gallery {
          position: static;
      }
  
      .cart-layout {
          grid-template-columns: 1fr 300px;
      }
  
      .checkout-layout {
          grid-template-columns: 1fr 360px;
      }
  
      .myaccount-layout {
          grid-template-columns: 220px 1fr;
      }
  }
  
  @media (max-width: 860px) {
      .shop-layout__inner {
          grid-template-columns: 1fr;
      }
  
      .shop-sidebar {
          position: static;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
      }
  
      .cart-layout {
          grid-template-columns: 1fr;
      }
  
      .cart-sidebar {
          position: static;
      }
  
      .checkout-layout {
          grid-template-columns: 1fr;
      }

      /* Checkout formuliervelden: 2-koloms grid → 1 kolom op smalle schermen */
      .woocommerce-billing-fields__field-wrapper,
      .woocommerce-shipping-fields__field-wrapper,
      #customer_details .woocommerce-address-fields__field-wrapper,
      .woocommerce-additional-fields__field-wrapper {
          grid-template-columns: 1fr;
      }

      /* Login/register naast elkaar → gestacked */
      .myaccount-auth-layout {
          grid-template-columns: 1fr;
      }

      /* Dashboard stats → 2 kolommen */
      .myaccount-stats {
          grid-template-columns: 1fr 1fr;
      }

      /* Snelle acties → 2 kolommen */
      .myaccount-quick-links {
          grid-template-columns: 1fr 1fr;
      }

      /* Adressen → 1 kolom */
      .woocommerce-Addresses {
          grid-template-columns: 1fr;
      }

      /* ── My Account: nav boven content (flex column) ── */
      .myaccount-layout {
          flex-direction: column !important;
          gap: var(--sp-4);
      }

      /* Nav: volle breedte, niet meer sticky */
      .myaccount-layout > .myaccount-nav {
          flex: none;
          width: 100%;
      }

      /* Content: volle breedte */
      .myaccount-layout > .myaccount-content {
          width: 100%;
      }

      /* WC native fallback ook 1 kolom */
      .woocommerce-account:not(:has(.myaccount-layout)) .woocommerce {
          grid-template-columns: 1fr !important;
      }

      .woocommerce-account:not(:has(.myaccount-nav)) .woocommerce-MyAccount-navigation {
          position: static !important;
          width: 100% !important;
      }

      .woocommerce-account:not(:has(.myaccount-nav)) .woocommerce-MyAccount-navigation ul {
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto;
          padding: var(--sp-2);
      }

      .woocommerce-account:not(:has(.myaccount-nav)) .woocommerce-MyAccount-navigation li a {
          white-space: nowrap;
          border-left: none !important;
          border-bottom: 2px solid transparent;
          border-radius: var(--r-md);
      }

      /* Form rows: 1 kolom op mobiel */
      .woocommerce-account .woocommerce-form-row--first,
      .woocommerce-account .woocommerce-form-row--last,
      .woocommerce-form-row--first,
      .woocommerce-form-row--last {
          display: block !important;
          width: 100% !important;
          margin: 0 0 var(--sp-4) 0 !important;
      }

      /* account-fields-row: 2 kolommen → 1 kolom */
      .account-fields-row {
          grid-template-columns: 1fr;
      }

      .myaccount-nav {
          position: static;
          border-radius: var(--r-lg);
      }

      .myaccount-nav__profile {
          padding: var(--sp-3) var(--sp-4);
      }

      /* Mobiel: nav als horizontale scroll-rij */
      .myaccount-nav__list {
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto;
          overscroll-behavior-x: contain;
          gap: 0;
          padding: var(--sp-2);
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
      }

      .myaccount-nav__list::-webkit-scrollbar { display: none; }

      .myaccount-nav__item {
          flex-shrink: 0;
      }

      .myaccount-nav__item--logout {
          border-top: none;
          border-left: 1px solid var(--clr-border);
          margin-top: 0;
          padding-top: 0;
          padding-left: var(--sp-2);
          margin-left: auto;
      }

      .myaccount-nav__link {
          border-left: none !important;
          border-bottom: 2px solid transparent;
          border-radius: var(--r-md);
          padding: var(--sp-2) var(--sp-3);
          flex-direction: column;
          justify-content: center;
          gap: var(--sp-1);
          font-size: 9px;
          text-align: center;
          min-width: 64px;
      }

      .myaccount-nav__item.is-active > .myaccount-nav__link,
      .myaccount-nav__link[aria-current="page"] {
          border-bottom-color: var(--clr-amber) !important;
          border-left: none !important;
      }

      .myaccount-nav__icon {
          width: 32px;
          height: 32px;
          margin: 0 auto;
      }

      .myaccount-nav__dot { display: none; }

      .woocommerce-Addresses {
          grid-template-columns: 1fr;
      }

      .thankyou-overview {
          grid-template-columns: repeat(2, 1fr);
      }

      .checkout-steps {
          display: none;
      }
  }
  
  @media (max-width: 640px) {
      .woocommerce ul.products,
      .woocommerce-page ul.products,
      ul.products,
      .products.shop-products-grid {
          grid-template-columns: 1fr !important;
          gap: var(--sp-4);
      }
  
      .shop-products-grid--related {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
  
      .shop-toolbar {
          flex-direction: column;
          align-items: flex-start;
          gap: var(--sp-3);
      }
  
      .woocommerce-form-row--first,
      .woocommerce-form-row--last {
          width: 100%;
          margin: 0;
      }
  
      .cart-table th:not(.product-name):not(.product-subtotal) {
          display: none;
      }
  
      .cart-table td {
          display: table-cell;
      }
  
      /* Responsive cart table — toon labels */
      .cart-table td[data-title]::before {
          content: attr(data-title) ": ";
          font-family: var(--font-mono);
          font-size: var(--fs-xs);
          letter-spacing: var(--ls-wide);
          color: var(--txt-muted);
          text-transform: uppercase;
          display: block;
          margin-bottom: var(--sp-1);
      }
  
      .cart-actions-row {
          flex-direction: column;
          align-items: stretch;
      }
  
      .coupon {
          flex-direction: column;
      }
  
      .coupon .form-input {
          width: 100%;
      }
  
      .thankyou-overview {
          grid-template-columns: 1fr 1fr;
      }
  
      .thankyou-actions {
          flex-direction: column;
      }
  
      .thankyou-actions .btn {
          width: 100%;
          justify-content: center;
      }
  
      .myaccount-content {
          padding: var(--sp-5) var(--sp-4) !important;
      }

      /* account-fields-row: altijd 1 kolom op kleine schermen */
      .account-fields-row {
          grid-template-columns: 1fr;
          gap: 0;
      }

      /* account-form-footer: knoppen gestapeld */
      .account-form-footer {
          flex-direction: column;
          align-items: stretch;
          gap: var(--sp-3);
      }

      .account-form-footer .btn {
          width: 100%;
          justify-content: center;
      }

      /* Dashboard stats: 1 kolom */
      .myaccount-stats {
          grid-template-columns: 1fr;
      }

      /* Snelle acties: 1 kolom */
      .myaccount-quick-links {
          grid-template-columns: 1fr;
      }

      /* Bestellingen tabel: verberg minder belangrijke kolommen */
      .woocommerce-orders-table th:nth-child(2),
      .woocommerce-orders-table td:nth-child(2) {
          display: none;
      }

      /* myaccount-section: minder padding */
      .myaccount-section {
          padding-block: var(--sp-4) var(--sp-8);
      }

      .woocommerce-account .woocommerce-form-row--first,
      .woocommerce-account .woocommerce-form-row--last {
          display: block;
          width: 100%;
          margin: 0;
      }

      .woocommerce-Addresses {
          grid-template-columns: 1fr;
      }

      .woocommerce-account .edit-address-form .woocommerce-address-fields__field-wrapper {
          grid-template-columns: 1fr !important;
      }
  
      .shop-sidebar {
          grid-template-columns: 1fr;
      }
  }
  
  @media (max-width: 480px) {
      .products.shop-products-grid {
          grid-template-columns: 1fr;
      }
  
      .shop-products-grid--related {
          grid-template-columns: repeat(2, 1fr);
      }
  
      .single-product__add-to-cart form.cart {
          flex-direction: column;
          align-items: stretch;
      }
  }
  
  @media (prefers-reduced-motion: reduce) {
      .shop-product-card,
      .single-product__gallery,
      .thankyou-hero__icon {
          transition: none !important;
          transform: none !important;
      }
  
      .shop-product-card__img {
          transform: none !important;
      }
  }

  /* ============================================================
   NAVIGATIE — dynamisch menu (aanvulling op site.css §5)
   Plak dit ONDERAAN het [5] NAVIGATION-blok in site.css,
   of importeer als apart nav-dynamic.css bestand.
   ============================================================ */


/* ── Desktop dropdown ──────────────────────────────────────── */

/* Elk top-level li als positie-anker */
.nav__links > li {
    position: relative;
}

/* Dropdown-lijst (verborgen by default) */
.nav__dropdown {
    display: none;                          /* JS voegt .expanded toe op mobile */
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 210px;
    background: var(--clr-panel);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--r-lg);
    padding: var(--sp-2) 0;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
    /* Smooth verschijnen */
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
    pointer-events: none;
}

/* Desktop hover: dropdown tonen */
@media (min-width: 901px) {
    .nav__links > li.has-children:hover > .nav__dropdown,
    .nav__links > li.has-children:focus-within > .nav__dropdown {
        display: block;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Verberg mobile sub-toggle op desktop */
    .nav__sub-toggle {
        display: none;
    }

    /* Verberg de inline chevron-svg op desktop niet — laat die staan als visuele hint */
    .nav__chevron {
        display: inline-flex;
        align-items: center;
        margin-left: var(--sp-1);
        color: var(--txt-muted);
        transition: transform var(--dur-base) var(--ease-out);
    }

    .nav__links > li.has-children:hover > .nav__link .nav__chevron,
    .nav__links > li.has-children:focus-within > .nav__link .nav__chevron {
        transform: rotate(180deg);
    }
}

/* Sub-menu links */
.nav__link--sub {
    display: flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--txt-secondary);
    white-space: nowrap;
    border-radius: 0;
    transition: background var(--dur-fast), color var(--dur-fast), padding-left var(--dur-fast);
}

.nav__link--sub:hover {
    background: var(--clr-border);
    color: var(--txt-primary);
    padding-left: calc(var(--sp-5) + 4px);     /* kleine indent bij hover */
}

/* ── Active states (desktop + mobiel) ─────────────────────── */

/* Actieve pagina zelf */
.nav__link.current-page {
    color: var(--clr-amber);
    background: var(--clr-amber-glow);
}

.nav__link.current-page::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background: var(--clr-amber);
    border-radius: var(--r-full);
}

/* Parent waarvan een child actief is — subtiel onderscheid */
.nav__link.current-parent {
    color: var(--txt-primary);
    background: var(--clr-panel);
}

.nav__link.current-parent::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background: var(--clr-border-light);   /* grijs ipv amber: minder nadruk */
    border-radius: var(--r-full);
}

/* Actieve subpagina-link */
.nav__link--sub.current-page {
    color: var(--clr-amber);
    background: var(--clr-amber-glow);
    border-left: 2px solid var(--clr-amber);
    padding-left: calc(var(--sp-5) - 2px);
}

/* Sublink waarvan item parent is van actieve pagina */
.nav__link--sub.current-parent {
    color: var(--txt-primary);
}


/* ── Mobiele hamburger ─────────────────────────────────────── */

@media (max-width: 900px) {

    /* Verberg nav__links by default op mobiel */
    .nav__links {
        display: none;
        position: fixed;
        top: var(--nav-h);
        right: 0;
        bottom: 0;
        width: min(320px, 90vw);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--clr-cockpit);
        border-left: 1px solid var(--clr-border-light);
        padding: var(--sp-4) 0 var(--sp-8);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: var(--z-sticky);
        /* Slide in van rechts */
        transform: translateX(100%);
        transition: transform var(--dur-slow) var(--ease-out);
    }

    .nav__links.open {
        display: flex;
        transform: translateX(0);
    }

    /* Top-level items */
    .nav__links > li {
        border-bottom: 1px solid var(--clr-border);
    }

    /* Top-level links als rij: link + toggle naast elkaar */
    .nav__links > li > .nav__link {
        display: flex;
        align-items: center;
        padding: var(--sp-4) var(--sp-6);
        font-size: var(--fs-base);
        border-radius: 0;
        width: 100%;
    }

    /* Verberg inline-chevron; sub-toggle knop wordt gebruikt */
    .nav__chevron {
        display: none;
    }

    /* Sub-toggle knop (ingebracht via JS) */
    .nav__sub-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        color: var(--txt-muted);
        cursor: pointer;
        flex-shrink: 0;
        transition: color var(--dur-fast), background var(--dur-fast);
        margin-left: auto;
        padding: 0;
        border-left: 1px solid var(--clr-border);
    }

    .nav__sub-toggle:hover,
    .nav__sub-toggle.active {
        color: var(--clr-amber);
        background: var(--clr-amber-glow);
    }

    .nav__sub-toggle svg {
        transition: transform var(--dur-base) var(--ease-out);
    }

    .nav__sub-toggle.active svg {
        transform: rotate(180deg);
    }

    /* Wrapper: link + toggle zitten naast elkaar */
    .nav__links > li.has-children {
        display: flex;
        flex-direction: column;
    }

    .nav__links > li.has-children > .nav__link {
        flex: 1;
    }

    /* Rij: link + sub-toggle inline */
    .nav__links > li.has-children {
        position: relative;
    }

    /* Maak de link + toggle als flex-rij */
    .nav__links > li.has-children {
        display: grid;
        grid-template-columns: 1fr 44px;
        grid-template-rows: auto auto;
    }

    .nav__links > li.has-children > .nav__link {
        grid-column: 1;
        grid-row: 1;
    }

    .nav__sub-toggle {
        grid-column: 2;
        grid-row: 1;
        height: 100%;
        min-height: 44px;
    }

    /* Dropdown op mobiel: uitklapbaar (accordeon) */
    .nav__dropdown {
        position: static;
        display: none;                  /* verborgen by default */
        min-width: 0;
        background: var(--clr-fuselage);
        border: none;
        border-top: 1px solid var(--clr-border);
        border-radius: 0;
        padding: var(--sp-2) 0;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .nav__dropdown.expanded {
        display: block;
    }

    .nav__link--sub {
        padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-8);
        font-size: var(--fs-sm);
        border-radius: 0;
    }

    /* Active sublink op mobiel */
    .nav__link--sub.current-page {
        border-left: 3px solid var(--clr-amber);
        padding-left: calc(var(--sp-8) - 3px);
    }

    /* Hamburger: toon toggle-knop */
    .nav__toggle {
        display: flex;
    }

    /* Verberg actie-knoppen op smal scherm (optioneel) */
    .nav__actions .btn--sm {
        display: none;
    }
}


/* ── Overlay achter mobiel menu ────────────────────────────── */

.nav__overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sticky) - 1);
    background: rgba(8, 12, 18, 0.65);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
}

.nav__overlay.visible {
    display: block;
    opacity: 1;
}

/* Vergrendel body-scroll als menu open */
body.nav-open {
    overflow: hidden;
}


/* ── Hamburger animatie ────────────────────────────────────── */

.nav__toggle {
    display: none;                  /* standaard verborgen; tonen op mobiel */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: var(--sp-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-md);
    background: transparent;
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.nav__toggle:hover {
    border-color: var(--clr-border-light);
    background: var(--clr-panel);
}

.nav__toggle span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--txt-secondary);
    border-radius: var(--r-full);
    transform-origin: center;
    transition:
        transform var(--dur-base) var(--ease-out),
        opacity var(--dur-base),
        background var(--dur-fast);
}

.nav__toggle:hover span {
    background: var(--txt-primary);
}

/* Animeer naar × wanneer actief */
.nav__toggle.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.nav__toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav__toggle.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================================
   ZOEKPAGINA & ZOEKRESULTATEN — Airnieuws.nl
   Plak onderaan site.css (of importeer als search.css).
   Gebruikt uitsluitend de bestaande CSS-variabelen.
   ============================================================ */


/* ── Hulpklasse: screenreader-only ──────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  ZOEK HERO (page-zoeken.php)                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

.search-hero {
    position: relative;
    min-height: 58vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--clr-cockpit);
    padding-block: var(--sp-20) var(--sp-16);
}

/* Radar-achtergrond */
.search-hero__bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.radar-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid;
}

.radar-ring--1 {
    width: 440px; height: 440px;
    border-color: rgba(245,158,11,0.06);
}
.radar-ring--2 {
    width: 700px; height: 700px;
    border-color: rgba(245,158,11,0.04);
}
.radar-ring--3 {
    width: 980px; height: 980px;
    border-color: rgba(245,158,11,0.025);
}

/* Radar sweep — subtiele animatie */
.radar-sweep {
    position: absolute;
    width: 490px; height: 490px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(245,158,11,0.12) 0deg,
        transparent 50deg
    );
    animation: radar-spin 6s linear infinite;
    transform-origin: center;
}

@keyframes radar-spin {
    to { transform: rotate(360deg); }
}

/* Fade-out van boven en onder */
.search-hero__bg::before,
.search-hero__bg::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 180px;
    pointer-events: none;
    z-index: 1;
}
.search-hero__bg::before {
    top: 0;
    background: linear-gradient(to bottom, var(--clr-cockpit), transparent);
}
.search-hero__bg::after {
    bottom: 0;
    background: linear-gradient(to top, var(--clr-cockpit), transparent);
}

/* Content */
.search-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.search-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--clr-amber);
    margin-bottom: var(--sp-5);
    max-width: none;
}

/* Pulserend statusdotje */
.search-hero__dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--clr-amber);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(245,158,11,0.6);
    animation: dot-pulse 2s ease-out infinite;
}

@keyframes dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

.search-hero__title {
    font-family: var(--font-display);
    font-size: clamp(var(--fs-2xl), 6vw, var(--fs-4xl));
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--txt-primary);
    margin-bottom: var(--sp-5);
}

.search-hero__title em {
    color: var(--clr-amber);
    font-style: normal;
    display: block;
}

.search-hero__sub {
    font-size: var(--fs-md);
    color: var(--txt-secondary);
    margin-bottom: var(--sp-10);
    max-width: 52ch;
    margin-inline: auto;
}


/* ── Zoekformulier (hero) ────────────────────────────────────── */

.search-hero__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    align-items: center;
}

.search-hero__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 680px;
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--r-full);
    transition:
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
    box-shadow: var(--shadow-md);
}

.search-hero__input-wrap:focus-within {
    border-color: var(--clr-amber);
    box-shadow: 0 0 0 3px var(--clr-amber-glow), var(--shadow-lg);
}

.search-hero__icon {
    position: absolute;
    left: var(--sp-5);
    color: var(--txt-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.search-hero__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--txt-primary);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-5) + 20px + var(--sp-3));
    border-radius: var(--r-full);
    min-width: 0;
}

.search-hero__input::placeholder { color: var(--txt-muted); }

/* Wis-knop */
.search-hero__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--clr-panel);
    border: 1px solid var(--clr-border);
    color: var(--txt-muted);
    cursor: pointer;
    margin-right: var(--sp-2);
    flex-shrink: 0;
    transition: color var(--dur-fast), background var(--dur-fast);
}

.search-hero__clear:hover {
    color: var(--clr-red);
    background: var(--clr-red-dim);
    border-color: rgba(239,68,68,0.3);
}

/* Zoekknop binnenin de balk */
.search-hero__submit {
    border-radius: var(--r-full);
    margin: 4px;
    flex-shrink: 0;
}


/* ── Filtercategorieën ───────────────────────────────────────── */

.search-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;
}

/* Als <label> — gebruikt op zoekpagina */
.search-cat {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--txt-muted);
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-full);
    padding: var(--sp-1) var(--sp-4);
    cursor: pointer;
    text-decoration: none;
    transition:
        color var(--dur-fast),
        background var(--dur-fast),
        border-color var(--dur-fast);
    -webkit-user-select: none;
    user-select: none;
}

.search-cat:hover {
    color: var(--txt-primary);
    border-color: var(--clr-border-light);
    background: var(--clr-panel);
}

.search-cat--active,
.search-cat input:checked ~ * {
    color: var(--clr-amber);
    background: var(--clr-amber-glow);
    border-color: rgba(245,158,11,0.4);
}

.search-cat__icon { font-style: normal; }

/* Compact variant op resultatenpagina */
.search-cats--compact {
    justify-content: flex-start;
}

.search-cats--compact .search-cat {
    padding: 3px var(--sp-3);
}


/* ── Suggesties-sectie ───────────────────────────────────────── */

.search-suggest-section {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-16);
}

.search-suggest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    align-items: start;
}

.search-suggest-block {
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
}

.search-suggest-block__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--txt-muted);
    margin-bottom: var(--sp-4);
    max-width: none;
}

/* Chips */
.search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
}

.search-chips__empty {
    font-size: var(--fs-xs);
    color: var(--txt-muted);
    font-family: var(--font-mono);
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--txt-secondary);
    background: var(--clr-panel);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-full);
    padding: 4px var(--sp-3);
    text-decoration: none;
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.search-chip:hover {
    color: var(--clr-amber);
    border-color: rgba(245,158,11,0.35);
    background: var(--clr-amber-glow);
}

.search-chip--recent {
    color: var(--clr-cyan);
    background: var(--clr-cyan-dim);
    border-color: rgba(6,182,212,0.2);
}

.search-chip--recent:hover {
    color: var(--clr-amber);
    border-color: rgba(245,158,11,0.35);
    background: var(--clr-amber-glow);
}

/* Shortcuts */
.search-shortcuts {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    list-style: none;
}

.search-shortcut {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--clr-panel);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--txt-secondary);
    transition:
        color var(--dur-fast),
        border-color var(--dur-fast),
        background var(--dur-fast),
        transform var(--dur-fast);
}

.search-shortcut:hover {
    color: var(--txt-primary);
    border-color: var(--clr-amber);
    background: var(--clr-amber-glow);
    transform: translateX(3px);
}

.search-shortcut__icon {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-border);
    border-radius: var(--r-md);
    font-size: 14px;
    flex-shrink: 0;
    transition: background var(--dur-fast);
}

.search-shortcut:hover .search-shortcut__icon {
    background: rgba(245,158,11,0.15);
}

.search-shortcut span strong {
    display: block;
    font-size: var(--fs-sm);
    font-family: var(--font-display);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--txt-primary);
    line-height: 1.2;
}

.search-shortcut span small {
    display: block;
    font-size: var(--fs-xs);
    color: var(--txt-muted);
    margin-top: 2px;
}

.search-shortcut > svg {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--txt-muted);
    transition: color var(--dur-fast), transform var(--dur-fast);
}

.search-shortcut:hover > svg {
    color: var(--clr-amber);
    transform: translateX(2px);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  RESULTATENTEMPLATE (search.php)                            ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Compact hero/zoekbalk bovenaan ─────────────────────────── */

.search-results-hero {
    background: var(--clr-cockpit);
    border-bottom: 1px solid var(--clr-border);
    padding-block: var(--sp-6) var(--sp-5);
}

.search-results-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Zoekbalk compact */
.search-results-form__wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--r-full);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    max-width: 600px;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.search-results-form__wrap:focus-within {
    border-color: var(--clr-amber);
    box-shadow: 0 0 0 3px var(--clr-amber-glow);
}

.search-results-form__wrap > svg {
    color: var(--txt-muted);
    flex-shrink: 0;
}

.search-results-form__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--txt-primary);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    min-width: 0;
}

.search-results-form__input::placeholder { color: var(--txt-muted); }

/* Meta-rij */
.search-results-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-family: var(--font-mono);
    color: var(--txt-muted);
}

.search-results-meta strong {
    color: var(--clr-amber);
    font-weight: var(--fw-bold);
}

.search-results-meta em {
    color: var(--txt-primary);
    font-style: normal;
}

.search-results-meta__time {
    color: var(--txt-muted);
    font-size: var(--fs-xs);
}

.search-results-meta__count--none em {
    color: var(--clr-amber);
}


/* ── Resultatenlijst ─────────────────────────────────────────── */

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Staggered reveal via CSS animation-delay */
.search-result {
    opacity: 0;
    transform: translateY(12px);
    animation: result-in var(--dur-slow) var(--ease-out) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes result-in {
    to { opacity: 1; transform: none; }
}

.search-result__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-6);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition:
        border-color var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
    cursor: pointer;
}

.search-result__inner:hover,
.search-result__inner:focus-visible {
    border-color: var(--clr-amber);
    background: var(--clr-panel);
    box-shadow: 0 4px 20px rgba(245,158,11,0.08);
    transform: translateX(3px);
    outline: none;
}

.search-result__inner:focus-visible {
    box-shadow: 0 0 0 3px var(--clr-amber-glow), 0 4px 20px rgba(245,158,11,0.08);
}

/* Thumbnail */
.search-result__thumb {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--clr-panel);
    border: 1px solid var(--clr-border);
}

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

/* Body */
.search-result__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Meta-rij */
.search-result__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.search-result__cat {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--txt-muted);
    letter-spacing: var(--ls-wide);
}

.search-result__date {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--txt-muted);
    letter-spacing: var(--ls-wide);
}

/* Titel */
.search-result__title {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--txt-primary);
    line-height: var(--lh-tight);
    transition: color var(--dur-fast);
}

.search-result__inner:hover .search-result__title {
    color: var(--clr-amber);
}

/* Excerpt */
.search-result__excerpt {
    font-size: var(--fs-sm);
    color: var(--txt-muted);
    line-height: var(--lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 72ch;
}

/* URL breadcrumb */
.search-result__url {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--clr-cyan);
    opacity: 0.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 56ch;
    letter-spacing: var(--ls-wide);
}

/* Pijl rechts */
.search-result__arrow {
    display: flex;
    align-items: center;
    color: var(--txt-muted);
    flex-shrink: 0;
    align-self: center;
    margin-left: var(--sp-2);
    transition: color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}

.search-result__inner:hover .search-result__arrow {
    color: var(--clr-amber);
    transform: translateX(4px);
}


/* ── Paginering ──────────────────────────────────────────────── */

.search-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    justify-content: center;
    align-items: center;
    margin-top: var(--sp-10);
}

.search-pagination .page-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
}

.search-pagination .page-btn a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.search-pagination .page-btn--dots {
    color: var(--txt-muted);
    background: transparent;
    border-color: transparent;
}


/* ── Geen resultaten ─────────────────────────────────────────── */

.search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-16) var(--sp-4);
}

.search-empty__icon {
    width: 88px; height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border-light);
    border-radius: 50%;
    color: var(--txt-muted);
    margin-bottom: var(--sp-6);
}

.search-empty__title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--txt-primary);
    margin-bottom: var(--sp-3);
}

.search-empty__text {
    font-size: var(--fs-md);
    color: var(--txt-secondary);
    max-width: 52ch;
    margin-bottom: var(--sp-6);
}

.search-empty__text strong { color: var(--clr-amber); }

.search-empty__tips {
    list-style: none;
    text-align: left;
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: 480px;
    width: 100%;
}

.search-empty__tips li {
    font-size: var(--fs-sm);
    color: var(--txt-secondary);
    padding-left: var(--sp-5);
    position: relative;
}

.search-empty__tips li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--clr-amber);
    font-family: var(--font-mono);
}

.search-empty__tips code {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--ls-wider);
    color: var(--clr-cyan);
    background: var(--clr-cyan-dim);
    padding: 1px 5px;
    border-radius: var(--r-sm);
}

.search-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media (max-width: 860px) {
    .search-suggest-grid {
        grid-template-columns: 1fr 1fr;
    }

    .search-suggest-grid > :last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .search-hero {
        padding-block: var(--sp-16) var(--sp-12);
        min-height: unset;
    }

    .search-hero__title {
        font-size: var(--fs-2xl);
    }

    .search-hero__submit {
        display: none; /* kleine schermen: Enter volstaat */
    }

    .search-suggest-grid {
        grid-template-columns: 1fr;
    }

    .search-result__inner {
        flex-wrap: wrap;
        padding: var(--sp-4) var(--sp-4);
    }

    .search-result__arrow {
        display: none;
    }

    .search-result__thumb {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }

    .search-results-hero {
        padding-block: var(--sp-4);
    }

    .search-empty {
        padding: var(--sp-10) var(--sp-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .radar-sweep,
    .search-hero__dot {
        animation: none;
    }

    .search-result {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   AIRNIEUWS.NL — shop-overrides.css
   Moderne spacing & layout verbeteringen voor de winkel
   Enqueue NA site.css zodat deze regels winnen
   ============================================================ */


/* ============================================================
   [1] SHOP HERO — meer ademruimte, imposanter
   ============================================================ */

   .shop-hero {
    padding-block: calc(var(--nav-h) + var(--sp-12)) var(--sp-10) !important;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.shop-hero__inner {
    max-width: 860px;
}

.shop-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    color: var(--clr-amber);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.shop-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 2px;
    background: var(--clr-amber);
    flex-shrink: 0;
}

.shop-hero__title {
    font-size: clamp(var(--fs-3xl), 7vw, 5rem) !important;
    margin-bottom: var(--sp-3) !important;
    margin-top: 0 !important;
    line-height: 0.9 !important;
}

.shop-hero__sub {
    font-size: var(--fs-base);
    color: var(--txt-secondary);
    margin-top: var(--sp-3) !important;
    max-width: 52ch;
    line-height: var(--lh-base);
}

/* Decoratieve diagonale streep rechts in hero */
.shop-hero::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(245, 158, 11, 0.03) 40%,
        rgba(234, 88, 12, 0.05) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.shop-hero__runway {
    height: 2px !important;
    opacity: 0.6 !important;
}


/* ============================================================
   [2] SHOP LAYOUT — ruimere sectie-padding
   ============================================================ */

.shop-wrap {
    padding-block: var(--sp-10) var(--sp-20) !important;
}

.shop-layout {
    padding-block: var(--sp-10) var(--sp-16) !important;
}

.shop-layout__inner {
    gap: var(--sp-10) !important;
    grid-template-columns: 240px 1fr !important;
    align-items: start;
}


/* ============================================================
   [3] SIDEBAR — ruimer & meer karakter
   ============================================================ */

.shop-sidebar {
    gap: var(--sp-6) !important;
}

.widget--shop {
    border-radius: var(--r-2xl) !important;
    border-color: var(--clr-border-light) !important;
    background: linear-gradient(
        160deg,
        var(--clr-fuselage) 0%,
        var(--clr-cockpit) 100%
    ) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

.widget--shop .widget__title {
    padding: var(--sp-5) var(--sp-6) !important;
    background: rgba(255,255,255,0.02) !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
}

.widget--shop .widget__body {
    padding: var(--sp-5) var(--sp-6) !important;
}

.shop-cat-list__link {
    padding: var(--sp-3) var(--sp-4) !important;
    border-radius: var(--r-lg) !important;
    font-size: var(--fs-sm) !important;
    transition:
        background var(--dur-fast),
        color var(--dur-fast),
        transform var(--dur-fast) !important;
}

.shop-cat-list__link:hover {
    transform: translateX(4px);
}

.shop-cat-list__link.active {
    background: var(--clr-amber-glow) !important;
    color: var(--clr-amber) !important;
    border-left: 2px solid var(--clr-amber);
}

.shop-cat-list__count {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--clr-border) !important;
    font-size: 10px !important;
    min-width: 22px;
    text-align: center;
}

/* Prijsfilter */
.widget_price_filter .price_slider_wrapper {
    padding: var(--sp-2) 0;
}

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

.widget_price_filter .price_slider_amount .button {
    background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange)) !important;
    color: #000 !important;
    border: none !important;
    border-radius: var(--r-md) !important;
    padding: var(--sp-2) var(--sp-4) !important;
    font-family: var(--font-display) !important;
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: var(--ls-wider) !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: opacity var(--dur-fast);
}

.widget_price_filter .price_slider_amount .button:hover {
    opacity: 0.85;
}

.widget_price_filter .price_label {
    font-family: var(--font-mono) !important;
    font-size: var(--fs-xs) !important;
    color: var(--txt-secondary) !important;
}


/* ============================================================
   [4] SHOP TOOLBAR — moderne strook
   ============================================================ */

.shop-toolbar {
    padding: var(--sp-4) var(--sp-6) !important;
    margin-bottom: var(--sp-8) !important;
    background: var(--clr-fuselage) !important;
    border: 1px solid var(--clr-border-light) !important;
    border-radius: var(--r-xl) !important;
    gap: var(--sp-6) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.shop-toolbar__results,
.woocommerce-result-count {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    color: var(--txt-muted) !important;
}

/* Sorteermenu */
.woocommerce-ordering select,
.shop-toolbar__sorting select {
    padding: var(--sp-3) var(--sp-10) var(--sp-3) var(--sp-4) !important;
    border-radius: var(--r-lg) !important;
    font-size: var(--fs-xs) !important;
    background-color: var(--clr-panel) !important;
    border-color: var(--clr-border-light) !important;
    letter-spacing: 0.1em !important;
    transition:
        border-color var(--dur-fast),
        box-shadow var(--dur-fast) !important;
}

.woocommerce-ordering select:focus,
.shop-toolbar__sorting select:focus {
    outline: none;
    border-color: var(--clr-amber) !important;
    box-shadow: 0 0 0 3px var(--clr-amber-glow);
}


/* ============================================================
   [5] PRODUCT GRID — meer lucht tussen kaarten
   ============================================================ */

.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
    gap: var(--sp-6) !important;
}

.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6,
.products.shop-products-grid {
    gap: var(--sp-6) !important;
}


/* ============================================================
   [6] PRODUCT CARD — ruimer, moderner, meer depth
   ============================================================ */

.shop-product-card {
    border-radius: var(--r-2xl) !important;
    border-color: var(--clr-border) !important;
    background: linear-gradient(
        180deg,
        var(--clr-fuselage) 0%,
        var(--clr-cockpit) 100%
    ) !important;
    transition:
        border-color var(--dur-base) var(--ease-out),
        transform var(--dur-slow) var(--ease-spring),
        box-shadow var(--dur-base) var(--ease-out) !important;
}

.shop-product-card:hover {
    border-color: rgba(245, 158, 11, 0.25) !important;
    transform: translateY(-6px) !important;
    box-shadow:
        0 20px 48px rgba(15,23,42,0.1),
        0 0 0 1px rgba(245,158,11,0.12),
        0 4px 8px rgba(15,23,42,0.06) !important;
}

/* Thumbnail: taller = meer impact */
.shop-product-card__thumb {
    aspect-ratio: 3/2 !important;
    background: var(--clr-fuselage) !important;
}

/* Subtiele amber gloed overlay bij hover */
.shop-product-card__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(15,23,42,0.12) 0%,
        transparent 50%
    );
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--dur-base);
}

.shop-product-card:hover .shop-product-card__thumb::after {
    opacity: 0.6;
}

/* Card body: ruimer */
.shop-product-card__body {
    padding: var(--sp-6) var(--sp-6) var(--sp-5) !important;
    gap: var(--sp-3) !important;
    text-align: left !important;
}

.shop-product-card__cat {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    color: var(--clr-amber) !important;
    opacity: 0.7;
}

.shop-product-card__title {
    font-size: var(--fs-lg) !important;
    letter-spacing: var(--ls-normal) !important;
    line-height: var(--lh-snug) !important;
}

/* Prijs-balk */
.shop-product-card__price {
    padding-top: var(--sp-4) !important;
    margin-top: var(--sp-1) !important;
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.shop-product-card__price .price,
.shop-product-card__price .woocommerce-Price-amount {
    font-size: var(--fs-xl) !important;
}

/* Prijs: doorhaallijn zelfde kleur als tekst (geen zwarte streep); actuele prijs zonder decoratie */
.shop-product-card__price .price del,
.shop-product-card__price del {
    text-decoration: line-through !important;
    text-decoration-color: currentColor !important;
    -webkit-text-decoration-color: currentColor !important;
}

.shop-product-card__price .price del .woocommerce-Price-amount,
.shop-product-card__price .price del .woocommerce-Price-amount bdi,
.shop-product-card__price del .woocommerce-Price-amount,
.shop-product-card__price del .woocommerce-Price-amount bdi {
    text-decoration: line-through !important;
    text-decoration-color: currentColor !important;
    -webkit-text-decoration-color: currentColor !important;
}

.shop-product-card__price .price ins,
.shop-product-card__price ins,
.shop-product-card__price .price ins *,
.shop-product-card__price ins * {
    text-decoration: none !important;
}

/* Add-to-cart knop in kaart (WC default .button) */
.shop-product-card .button,
.woocommerce ul.products li.product .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sp-2) !important;
    width: 100% !important;
    padding: var(--sp-4) var(--sp-5) !important;
    margin-top: var(--sp-4) !important;
    background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange)) !important;
    color: #060a0f !important;
    border: none !important;
    border-radius: var(--r-xl) !important;
    font-family: var(--font-display) !important;
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-black) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition:
        opacity var(--dur-fast),
        transform var(--dur-fast) var(--ease-spring),
        box-shadow var(--dur-fast) !important;
    cursor: pointer;
}

.shop-product-card .button:hover,
.woocommerce ul.products li.product .button:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(245,158,11,0.3) !important;
    color: #060a0f !important;
}

/* Sale badge */
.badge--sale,
.woocommerce ul.products li.product .onsale {
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    font-weight: var(--fw-black) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange)) !important;
    color: #000 !important;
    padding: 3px 10px !important;
    border-radius: var(--r-full) !important;
    border: none !important;
    min-height: unset !important;
    min-width: unset !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    top: var(--sp-3) !important;
    left: var(--sp-3) !important;
    right: auto !important;
}

/* Geen standaard WC cirkel-onsale */
.woocommerce ul.products li.product .onsale {
    border-radius: var(--r-full) !important;
    font-size: 10px !important;
}


/* ============================================================
   [7] WC DEFAULT KAART — styling voor li.product zonder custom class
   (native WooCommerce archive template)
   ============================================================ */

.woocommerce ul.products li.product {
    background: linear-gradient(180deg, var(--clr-fuselage) 0%, var(--clr-cockpit) 100%);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-2xl) !important;
    overflow: hidden;
    transition:
        border-color var(--dur-base),
        transform var(--dur-slow) var(--ease-spring),
        box-shadow var(--dur-base);
    padding: 0 !important;
    width: 100% !important;
}

.woocommerce ul.products li.product:hover {
    border-color: rgba(245, 158, 11, 0.25);
    transform: translateY(-6px);
    box-shadow:
        0 20px 48px rgba(0,0,0,0.5),
        0 0 0 1px rgba(245,158,11,0.1);
}

/* Product afbeelding wrapper */
.woocommerce ul.products li.product a img {
    display: block;
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow);
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.04);
    filter: brightness(0.85);
}

/* Tekst/body deel in WC default */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    padding: var(--sp-6) var(--sp-6) var(--sp-2) !important;
    font-family: var(--font-display) !important;
    font-size: var(--fs-lg) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: var(--ls-wide) !important;
    text-transform: uppercase !important;
    color: var(--txt-primary) !important;
    line-height: var(--lh-snug) !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product .price {
    display: block !important;
    padding: 0 var(--sp-6) var(--sp-6) !important;
    font-family: var(--font-display) !important;
    font-size: var(--fs-xl) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--clr-amber) !important;
    letter-spacing: var(--ls-normal) !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product .price del {
    font-size: var(--fs-sm) !important;
    color: var(--txt-muted) !important;
    font-weight: var(--fw-normal) !important;
    margin-right: var(--sp-2) !important;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    color: var(--clr-amber) !important;
}

/* Category label boven titel */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .posted_in {
    padding: 0 var(--sp-6);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--clr-amber);
    opacity: 0.7;
    text-transform: uppercase;
    display: block;
    margin-top: var(--sp-4);
}


/* ============================================================
   [8] TOOLBAR — native WC classes (als shop-toolbar niet aanwezig is)
   ============================================================ */

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
    float: none !important;
    margin: 0 !important;
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
    float: none !important;
    margin: 0 !important;
}

/* Wrapper voor result count + ordering — geven we flex-rij */
.woocommerce .woocommerce-result-count + .woocommerce-ordering,
.woocommerce-page .woocommerce-result-count + .woocommerce-ordering {
    margin: 0 !important;
}

/* Als archive-product.php geen eigen toolbar wrappt: WC injecteert beiden los */
/* Geef de woocommerce-container padding boven de grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
    margin-top: var(--sp-2) !important;
}

/* Toolbar rij: resultaten links, sortering rechts */
.shop-toolbar,
.woocommerce .woocommerce-products-header + .woocommerce {
    margin-bottom: var(--sp-6);
}


/* ============================================================
   [9] PAGINERING — moderner
   ============================================================ */

.woocommerce nav.woocommerce-pagination,
.shop-pagination {
    margin-top: var(--sp-12) !important;
    padding-top: var(--sp-8) !important;
    border-top: 1px solid var(--clr-border) !important;
}

.woocommerce nav.woocommerce-pagination ul {
    border: none !important;
    display: flex !important;
    gap: var(--sp-2) !important;
    list-style: none !important;
    padding: 0 !important;
    justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
    margin: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--r-lg) !important;
    background: var(--clr-fuselage) !important;
    border: 1px solid var(--clr-border) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--fs-xs) !important;
    color: var(--txt-secondary) !important;
    transition: all var(--dur-fast) !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--clr-panel) !important;
    border-color: var(--clr-amber) !important;
    color: var(--clr-amber) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange)) !important;
    border-color: transparent !important;
    color: #000 !important;
    font-weight: var(--fw-bold) !important;
}


/* ============================================================
   [10] LEGE WINKEL — centered + ruim
   ============================================================ */

.shop-empty,
.woocommerce .woocommerce-info {
    padding: var(--sp-20) var(--sp-6) !important;
    text-align: center;
}

.woocommerce .woocommerce-info {
    background: var(--clr-fuselage) !important;
    border: 1px solid var(--clr-border-light) !important;
    border-radius: var(--r-2xl) !important;
    border-top: none !important;
    color: var(--txt-secondary) !important;
    font-family: var(--font-body) !important;
    font-size: var(--fs-base) !important;
    padding: var(--sp-8) var(--sp-8) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}

.woocommerce .woocommerce-info::before {
    color: var(--clr-amber) !important;
}


/* ============================================================
   [11] RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .shop-layout__inner {
        grid-template-columns: 200px 1fr !important;
        gap: var(--sp-8) !important;
    }
}

@media (max-width: 768px) {
    .shop-hero {
        padding-block: calc(var(--nav-h) + var(--sp-10)) var(--sp-8) !important;
    }

    .shop-layout__inner {
        grid-template-columns: 1fr !important;
    }

    .shop-sidebar {
        position: static !important;
    }

    .shop-layout {
        padding-block: var(--sp-8) var(--sp-12) !important;
    }

    .shop-product-card__body {
        padding: var(--sp-5) var(--sp-5) var(--sp-4) !important;
    }
}

/* Bekijk product link in card body */
.shop-product-card__view-link {
    display: block;
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: transparent;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--r-xl);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: var(--txt-secondary) !important;
    text-decoration: none !important;
    transition:
        border-color var(--dur-fast),
        color var(--dur-fast),
        background var(--dur-fast);
}

.shop-product-card__view-link:hover {
    border-color: var(--clr-amber);
    color: var(--clr-amber) !important;
    background: var(--clr-amber-glow);
}

/* ── ORDERS FILTER TABS ── */
.orders-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
}

.orders-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    border: 1px solid var(--clr-border);
    background: var(--clr-fuselage);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--txt-secondary);
    text-decoration: none;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
    cursor: pointer;
}

.orders-filter-tab:hover {
    border-color: var(--clr-amber);
    color: var(--clr-amber);
}

.orders-filter-tab.active {
    background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
    border-color: transparent;
    color: #000;
}

.orders-filter-tab__count {
    background: rgba(0,0,0,0.2);
    border-radius: var(--r-full);
    padding: 1px 7px;
    font-size: 10px;
    font-weight: var(--fw-black);
    min-width: 20px;
    text-align: center;
}

/* Status-kleur accenten per tab */
.orders-filter-tab--completed { border-color: rgba(34,197,94,0.3); }
.orders-filter-tab--completed:hover,
.orders-filter-tab--completed.active { background: #16a34a; border-color: transparent; color: #fff; }

.orders-filter-tab--cancelled,
.orders-filter-tab--failed    { border-color: rgba(239,68,68,0.3); }
.orders-filter-tab--cancelled:hover,
.orders-filter-tab--failed:hover { border-color: #ef4444; color: #ef4444; }

.orders-filter-tab--pending,
.orders-filter-tab--on-hold   { border-color: rgba(245,158,11,0.3); }

/* ============================================================
   AIRNIEUWS.NL — cart-overrides.css
   Winkelwagen layout & stijlen
   Enqueue NA site.css zodat deze regels winnen
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   CART PAGE HEADER
══════════════════════════════════════════════════════════ */

.cart-page-header {
    padding-block: var(--sp-10) var(--sp-8);
    border-bottom: 1px solid var(--clr-border);
    background:
        linear-gradient(180deg, rgba(245,158,11,0.04) 0%, transparent 100%);
}

.cart-page-header__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-6);
    flex-wrap: wrap;
}

.cart-page-header__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: var(--sp-3);
    background: linear-gradient(135deg, var(--clr-amber), var(--clr-orange));
    border-radius: var(--r-full);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    color: #000;
    vertical-align: middle;
    line-height: 1;
}

/* ── Checkout Progress Tracker ── */

.checkout-progress {
    display: flex;
    align-items: center;
    gap: 0;
}

.checkout-progress__step {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    border: 1px solid var(--clr-border);
    background: var(--clr-fuselage);
    opacity: 0.45;
    transition: opacity var(--dur-fast), border-color var(--dur-fast);
}

.checkout-progress__step--active {
    opacity: 1;
    border-color: var(--clr-amber);
    background: var(--clr-amber-glow);
}

/* Stap afgerond (bv. winkelwagen op afrekenpagina) */
.checkout-progress__step--complete {
    opacity: 0.85;
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.08);
}
.checkout-progress__step--complete .checkout-progress__num {
    color: var(--clr-green);
}

.checkout-progress__num {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-wider);
    color: var(--clr-amber);
}

.checkout-progress__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--txt-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.checkout-progress__line {
    width: 28px;
    height: 1px;
    background: var(--clr-border);
    flex-shrink: 0;
    margin: 0 var(--sp-1);
}

@media (max-width: 600px) {
    .checkout-progress { display: none; }
}


/* ══════════════════════════════════════════════════════════
   CART LAYOUT — 2-kolom grid
══════════════════════════════════════════════════════════ */

.cart-section {
    padding-block: var(--sp-10);
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-8);
    align-items: start;
}

@media (max-width: 1024px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }
    .cart-sidebar {
        order: -1;
    }
}


/* ══════════════════════════════════════════════════════════
   CART ITEMS — Strakke rijen
══════════════════════════════════════════════════════════ */

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--clr-border);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--clr-fuselage);
}

/* Desktop column header */
.cart-items__header {
    display: grid;
    grid-template-columns: 88px 1fr 100px 100px 100px 40px;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3) var(--sp-5);
    background: var(--clr-panel);
    border-bottom: 1px solid var(--clr-border);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--txt-muted);
}

@media (max-width: 768px) {
    .cart-items__header { display: none; }
}


/* ── Single cart row ── */

.cart-item {
    display: grid;
    grid-template-columns: 88px 1fr 100px 100px 100px 40px;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-5);
    border-bottom: 1px solid var(--clr-border);
    transition: background var(--dur-fast);
}

.cart-item:last-of-type {
    border-bottom: none;
}

.cart-item:hover {
    background: var(--clr-panel);
}

@media (max-width: 768px) {
    .cart-item {
        grid-template-columns: 72px 1fr 40px;
        grid-template-rows: auto auto auto;
        gap: var(--sp-3);
        padding: var(--sp-4);
    }
    .cart-item__price,
    .cart-item__subtotal { display: none; }
    .cart-item__qty  { grid-column: 2; }
    .cart-item__remove { grid-column: 3; grid-row: 1; }
}

/* Thumbnail */
.cart-item__thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--clr-panel);
    border: 1px solid var(--clr-border);
    flex-shrink: 0;
}

.cart-item__thumb-link {
    display: block;
    width: 100%;
    height: 100%;
}

.cart-item__img,
.cart-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-base) var(--ease-out);
}

.cart-item:hover .cart-item__img,
.cart-item:hover .cart-item__thumb img {
    transform: scale(1.04);
}

.cart-item__sale-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 9px;
    padding: 2px 5px;
}

/* Info block */
.cart-item__info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.cart-item__name {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--txt-primary);
    text-decoration: none;
    line-height: 1.25;
    transition: color var(--dur-fast);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-item__name:hover {
    color: var(--clr-amber);
}

.cart-item__sku {
    font-size: var(--fs-xs);
    color: var(--txt-muted);
    letter-spacing: var(--ls-wider);
}

.cart-item__backorder {
    margin-top: var(--sp-1);
}

/* Mobile price (shown inline under name on small screens) */
.cart-item__price-mobile {
    display: none;
    font-size: var(--fs-sm);
    color: var(--clr-amber);
    font-weight: var(--fw-semi);
    margin-top: var(--sp-1);
}

@media (max-width: 768px) {
    .cart-item__price-mobile { display: block; }
}

/* Price / subtotal cells */
.cart-item__price,
.cart-item__subtotal {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--txt-primary);
}

.cart-item__subtotal {
    font-weight: var(--fw-bold);
    color: var(--clr-amber);
}

/* Quantity input override — strak in grid */
.cart-item__qty .quantity {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--clr-panel);
    width: fit-content;
}

.cart-item__qty input[type="number"].qty,
.cart-item__qty .qty {
    width: 44px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--txt-primary);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-align: center;
    -moz-appearance: textfield;
    padding: 0;
}

.cart-item__qty input[type="number"].qty::-webkit-inner-spin-button,
.cart-item__qty input[type="number"].qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.cart-item__qty-fixed {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--txt-secondary);
    padding: 0 var(--sp-4);
}

/* Remove button */
.cart-item__remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    background: transparent;
    border: 1px solid transparent;
    color: var(--txt-muted);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--dur-fast),
        border-color var(--dur-fast),
        color var(--dur-fast);
}

.cart-item__remove-btn:hover {
    background: var(--clr-red-dim);
    border-color: var(--clr-red);
    color: var(--clr-red);
}


/* ══════════════════════════════════════════════════════════
   CART ACTIONS BAR
══════════════════════════════════════════════════════════ */

.cart-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-xl);
}

/* Kortingscode */
.cart-coupon {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
    min-width: 220px;
    max-width: 380px;
}

.cart-coupon__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--txt-muted);
}

.cart-coupon__icon {
    color: var(--clr-amber);
}

.cart-coupon__row {
    display: flex;
    gap: var(--sp-2);
}

.cart-coupon__input {
    flex: 1;
    height: 40px;
    min-width: 0;
}

/* Continue link */
.cart-continue {
    margin-top: var(--sp-4);
}

.cart-continue__link {
    font-size: var(--fs-sm);
    color: var(--txt-secondary);
    text-decoration: none;
    transition: color var(--dur-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.cart-continue__link:hover {
    color: var(--clr-amber);
}


/* ══════════════════════════════════════════════════════════
   CART SIDEBAR
══════════════════════════════════════════════════════════ */

.cart-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    position: sticky;
    top: var(--sp-6);
}

/* Cart Summary widget override */
.cart-summary {
    border-radius: var(--r-xl);
    overflow: hidden;
    /* widget already handles background, border */
}

.cart-summary__body {
    padding: 0 !important; /* override widget__body default; WC totals has its own padding */
}

/* WooCommerce cart totals table inside sidebar */
.cart-summary .cart_totals table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.cart-summary .cart_totals table.shop_table th,
.cart-summary .cart_totals table.shop_table td {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--clr-border);
    vertical-align: middle;
}

.cart-summary .cart_totals table.shop_table th {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--txt-muted);
    text-align: left;
    white-space: nowrap;
}

.cart-summary .cart_totals table.shop_table td {
    text-align: right;
    color: var(--txt-primary);
    font-weight: var(--fw-semi);
}

.cart-summary .cart_totals .order-total th,
.cart-summary .cart_totals .order-total td {
    border-bottom: none;
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
}

.cart-summary .cart_totals .order-total th {
    color: var(--txt-primary);
    font-size: var(--fs-sm);
}

.cart-summary .cart_totals .order-total td {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    color: var(--clr-amber);
    letter-spacing: -0.01em;
}

/* Coupon/discount row in totals */
.cart-summary .cart_totals .cart-discount td {
    color: var(--clr-green);
}

/* Shipping row */
.cart-summary .cart_totals .shipping td {
    color: var(--txt-secondary);
}

/* WC checkout button inside cart_totals — hide (we have our own) */
.cart-summary .cart_totals .wc-proceed-to-checkout {
    display: none !important;
}

/* Summary footer CTA */
.cart-summary__footer {
    padding: var(--sp-5);
    border-top: 1px solid var(--clr-border);
    background: var(--clr-panel);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.cart-summary__checkout-btn {
    font-size: var(--fs-sm);
    justify-content: center;
    letter-spacing: var(--ls-wider);
}

.cart-summary__secure {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--txt-muted);
    margin: 0;
}


/* ── Payment methods strip ── */

.cart-payment-methods {
    padding: var(--sp-4) var(--sp-5);
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-xl);
}

.cart-payment-methods__label {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--txt-muted);
    margin: 0 0 var(--sp-3);
}

.cart-payment-methods__icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.cart-payment-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--sp-3);
    border: 1px solid var(--clr-border-light);
    border-radius: 6px;
    background: var(--clr-panel);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--txt-secondary);
    letter-spacing: 0.06em;
}


/* ── USP list ── */

.cart-usps {
    list-style: none;
    margin: 0;
    padding: var(--sp-4) var(--sp-5);
    background: var(--clr-fuselage);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.cart-usp {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.cart-usp__icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background: var(--clr-green-dim);
    color: var(--clr-green);
    font-size: 11px;
    font-weight: var(--fw-black);
    flex-shrink: 0;
}

.cart-usp__text {
    font-size: var(--fs-sm);
    color: var(--txt-secondary);
}


/* ══════════════════════════════════════════════════════════
   EMPTY CART STATE
   (WC renders .woocommerce-cart-form--empty)
══════════════════════════════════════════════════════════ */

.woocommerce-cart .cart-section .shop-empty,
.cart-empty-state {
    padding: var(--sp-20) 0;
    text-align: center;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — tablet tweaks
══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .cart-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .cart-coupon {
        max-width: 100%;
    }
    .cart-page-header__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   CART & CHECKOUT BLOCK LAYOUT FIX
   ============================================================
   De winkelwagen-pagina is een gewone WP-pagina met een
   WooCommerce Blocks cart erin (niet via woocommerce.php /
   cart/cart.php). Hello Elementor rendert:
     .site-main
       ├── .page-header  ← dubbele titel, verbergen
       └── .page-content
             └── .wp-block-woocommerce-cart.alignwide
                   ├── .wp-block-woocommerce-filled-cart-block
                   │     ├── .wp-block-woocommerce-cart-items-block
                   │     │     └── .wc-block-cart-items
                   │     │           └── .wc-block-cart-items__row  (per product)
                   │     │                 ├── .wc-block-components-product-image
                   │     │                 ├── .wc-block-cart-item__product
                   │     │                 ├── .wc-block-cart-item__quantity
                   │     │                 └── .wc-block-cart-item__total
                   │     └── .wp-block-woocommerce-cart-totals-block
                   │           └── .wc-block-cart__totals
                   └── .wp-block-woocommerce-empty-cart-block
   ============================================================ */

/* ── 1. Verberg Hello Elementor's auto-gegenereerde page-header ──
   (ook varianten die niet direct child zijn, of andere wrappers) ── */
body.woocommerce-cart .site-main > .page-header:not(.page-header-compact),
body.woocommerce-checkout .site-main > .page-header:not(.page-header-compact),
body.woocommerce-cart #site-main.site-main > .page-header:not(.page-header-compact),
body.woocommerce-checkout #site-main.site-main > .page-header:not(.page-header-compact),
body.woocommerce-cart .site-main > header.page-header:not(.page-header-compact),
body.woocommerce-checkout .site-main > header.page-header:not(.page-header-compact) {
    display: none !important;
}

/* ── 2. .page-content: zelfde centering + padding als .container ── */
body.woocommerce-cart .site-main > .page-content,
body.woocommerce-checkout .site-main > .page-content {
    width: 100%;
    max-width: var(--max-w-site, 1380px);
    margin-inline: auto;
    padding-inline: var(--sp-6, 1.5rem);
    padding-block: var(--sp-8, 2rem) var(--sp-16, 4rem);
    box-sizing: border-box;
}

/* ── 3. Block cart root: geen alignwide overflow ── */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
    max-width: 100% !important;
    margin-inline: 0 !important;
    width: 100% !important;
}

/* ── 4. Filled-cart: 2-kolom layout (items | totals) ── */
.wp-block-woocommerce-filled-cart-block {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: var(--sp-8, 2rem) !important;
    align-items: start !important;
}

@media (max-width: 1024px) {
    .wp-block-woocommerce-filled-cart-block {
        grid-template-columns: 1fr !important;
    }
}

/* ── 5. Cart items block: volle breedte linkerkolom ── */
.wp-block-woocommerce-cart-items-block {
    min-width: 0;
}

/* ── 6. Cart items container: card-stijl met border ── */
.wc-block-cart-items {
    border: 1px solid var(--clr-border, rgba(255,255,255,0.08));
    border-radius: var(--r-xl, 12px);
    overflow: hidden;
    background: var(--clr-fuselage, #161b22);
}

/* ── 7. Cart rij: grid met vaste afbeeldingskolom ── */
.wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 80px 1fr auto auto !important;
    gap: var(--sp-4, 1rem) !important;
    align-items: center !important;
    padding: var(--sp-5, 1.25rem) !important;
    border-bottom: 1px solid var(--clr-border, rgba(255,255,255,0.08));
}

.wc-block-cart-items__row:last-child {
    border-bottom: none !important;
}

/* ── 8. Productafbeelding: vaste 80×80 thumbnail ── */
.wc-block-cart-items__row .wc-block-components-product-image {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 80px !important;
    overflow: hidden;
    border-radius: var(--r-lg, 8px);
    border: 1px solid var(--clr-border, rgba(255,255,255,0.08));
    flex-shrink: 0;
    background: var(--clr-panel, #1e2530);
}

.wc-block-cart-items__row .wc-block-components-product-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.wc-block-cart-items__row .wc-block-components-product-image img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: cover !important;
    display: block;
    border-radius: 0;
}

/* ── 9. Product info kolom ── */
.wc-block-cart-item__product {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1, 0.25rem);
}

.wc-block-components-product-name,
.wc-block-components-product-name a {
    font-family: var(--font-display, inherit);
    font-size: var(--fs-md, 0.9375rem);
    font-weight: var(--fw-bold, 700);
    color: var(--txt-primary, #f1f5f9);
    text-decoration: none;
    line-height: 1.3;
}

.wc-block-components-product-name a:hover {
    color: var(--clr-amber, #f59e0b);
}

/* Prijs onder naam */
.wc-block-components-product-price {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--txt-secondary, #94a3b8);
}

.wc-block-components-product-price del {
    opacity: 0.5;
    margin-right: var(--sp-1, 0.25rem);
}

.wc-block-components-product-price ins {
    text-decoration: none;
    color: var(--clr-amber, #f59e0b);
    font-weight: var(--fw-semi, 600);
}

/* ── 10. Quantity kolom ── */
.wc-block-cart-item__quantity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
}

.wc-block-components-quantity-selector {
    display: flex !important;
    align-items: center;
    border: 1px solid var(--clr-border-light, rgba(255,255,255,0.12)) !important;
    border-radius: var(--r-xl, 9999px) !important;
    overflow: hidden;
    background: var(--clr-panel, #1e2530);
    width: fit-content;
}

.wc-block-components-quantity-selector__input {
    width: 44px !important;
    height: 36px !important;
    border: none !important;
    background: transparent !important;
    color: var(--txt-primary, #f1f5f9) !important;
    font-family: var(--font-display, inherit);
    font-size: var(--fs-sm, 0.875rem) !important;
    font-weight: var(--fw-bold, 700) !important;
    text-align: center;
    padding: 0 !important;
    -moz-appearance: textfield;
}

.wc-block-components-quantity-selector__button {
    width: 32px !important;
    height: 36px !important;
    border: none !important;
    background: transparent !important;
    color: var(--txt-muted, #64748b) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.wc-block-components-quantity-selector__button:hover {
    color: var(--clr-amber, #f59e0b) !important;
    background: var(--clr-amber-glow, rgba(245,158,11,0.08)) !important;
}

/* Verwijder link */
.wc-block-cart-item__remove-link {
    font-size: var(--fs-xs, 0.75rem);
    color: var(--txt-muted, #64748b) !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}

.wc-block-cart-item__remove-link:hover {
    color: var(--clr-red, #ef4444) !important;
}

/* ── 11. Subtotaal kolom ── */
.wc-block-cart-item__total {
    font-family: var(--font-display, inherit);
    font-size: var(--fs-md, 0.9375rem);
    font-weight: var(--fw-bold, 700);
    color: var(--clr-amber, #f59e0b);
    text-align: right;
    white-space: nowrap;
}

/* ── 12. Totalen sidebar: card-stijl ── */
.wp-block-woocommerce-cart-totals-block {
    position: sticky;
    top: calc(var(--nav-h, 70px) + var(--sp-4, 1rem));
}

.wc-block-cart__totals-title {
    font-family: var(--font-display, inherit);
    font-size: var(--fs-lg, 1.125rem);
    font-weight: var(--fw-black, 900);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider, 0.08em);
    color: var(--txt-primary, #f1f5f9);
    padding: var(--sp-5, 1.25rem);
    border-bottom: 1px solid var(--clr-border, rgba(255,255,255,0.08));
    margin: 0;
}

.wc-block-components-totals-wrapper {
    background: var(--clr-fuselage, #161b22);
    border: 1px solid var(--clr-border, rgba(255,255,255,0.08));
    border-radius: var(--r-xl, 12px);
    overflow: hidden;
}

.wc-block-components-totals-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3, 0.75rem) var(--sp-5, 1.25rem);
    border-bottom: 1px solid var(--clr-border, rgba(255,255,255,0.08));
    font-size: var(--fs-sm, 0.875rem);
}

.wc-block-components-totals-item:last-child {
    border-bottom: none;
}

.wc-block-components-totals-item__label {
    color: var(--txt-secondary, #94a3b8);
    font-weight: var(--fw-medium, 500);
}

.wc-block-components-totals-item__value {
    color: var(--txt-primary, #f1f5f9);
    font-weight: var(--fw-semi, 600);
    font-family: var(--font-display, inherit);
}

/* Totaalregel: groter + amber */
.wc-block-components-totals-footer-item {
    padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem) !important;
    background: var(--clr-panel, #1e2530);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: var(--fs-md, 0.9375rem);
    font-weight: var(--fw-bold, 700);
    color: var(--txt-primary, #f1f5f9);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: var(--fs-xl, 1.25rem);
    font-weight: var(--fw-black, 900);
    color: var(--clr-amber, #f59e0b);
}

/* Korting in groen */
.wc-block-components-totals-discount .wc-block-components-totals-item__value {
    color: var(--clr-green, #22c55e) !important;
}

/* ── 13. Coupon input ── */
.wc-block-components-totals-coupon__form {
    padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
    border-bottom: 1px solid var(--clr-border, rgba(255,255,255,0.08));
    display: flex;
    gap: var(--sp-2, 0.5rem);
}

.wc-block-components-totals-coupon__input .wc-block-components-text-input input,
.wc-block-components-totals-coupon__input input {
    background: var(--clr-panel, #1e2530) !important;
    border: 1px solid var(--clr-border-light, rgba(255,255,255,0.12)) !important;
    border-radius: var(--r-md, 6px) !important;
    color: var(--txt-primary, #f1f5f9) !important;
    font-size: var(--fs-sm, 0.875rem) !important;
    padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem) !important;
    height: 40px;
    width: 100%;
}

.wc-block-components-totals-coupon__input input:focus {
    border-color: var(--clr-amber, #f59e0b) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--clr-amber-glow, rgba(245,158,11,0.15)) !important;
}

.wc-block-components-totals-coupon__button,
.wc-block-components-button.wc-block-components-totals-coupon__button {
    background: var(--clr-amber, #f59e0b) !important;
    color: #000 !important;
    border: none !important;
    border-radius: var(--r-md, 6px) !important;
    font-family: var(--font-display, inherit);
    font-size: var(--fs-sm, 0.875rem) !important;
    font-weight: var(--fw-black, 900) !important;
    padding: 0 var(--sp-4, 1rem) !important;
    height: 40px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}

.wc-block-components-totals-coupon__button:hover {
    background: var(--clr-orange, #ea580c) !important;
}

/* ── 14. Checkout button ── */
.wc-block-cart__submit-container {
    padding: var(--sp-5, 1.25rem);
}

.wc-block-cart__submit.wc-block-components-button {
    background: linear-gradient(135deg, var(--clr-amber, #f59e0b), var(--clr-orange, #ea580c)) !important;
    color: #000 !important;
    border: none !important;
    border-radius: var(--r-full, 9999px) !important;
    font-family: var(--font-display, inherit);
    font-size: var(--fs-md, 0.9375rem) !important;
    font-weight: var(--fw-black, 900) !important;
    letter-spacing: var(--ls-wide, 0.04em) !important;
    text-transform: uppercase;
    padding: var(--sp-4, 1rem) var(--sp-6, 1.5rem) !important;
    width: 100%;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

.wc-block-cart__submit.wc-block-components-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ── 15. Express payment (PayPal etc) ── */
.wc-block-cart__payment-method-icons {
    padding: 0 var(--sp-5, 1.25rem) var(--sp-4, 1rem);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2, 0.5rem);
    justify-content: center;
}

/* ── 16. Lege winkelwagen ── */
.wp-block-woocommerce-empty-cart-block {
    padding: var(--sp-20, 5rem) 0;
    text-align: center;
}

.wp-block-woocommerce-empty-cart-block h2 {
    font-family: var(--font-display, inherit);
    font-size: var(--fs-2xl, 1.5rem);
    font-weight: var(--fw-black, 900);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider, 0.08em);
    color: var(--txt-primary, #f1f5f9);
    margin-bottom: var(--sp-4, 1rem);
}

/* ── 17. Mobiel ── */
@media (max-width: 768px) {
    body.woocommerce-cart .site-main > .page-content,
    body.woocommerce-checkout .site-main > .page-content {
        padding-inline: var(--sp-4, 1rem);
    }

    .wc-block-cart-items__row {
        grid-template-columns: 64px 1fr auto !important;
        grid-template-rows: auto auto;
        gap: var(--sp-3, 0.75rem) !important;
        padding: var(--sp-4, 1rem) !important;
    }

    .wc-block-cart-item__total {
        grid-column: 3;
        grid-row: 1;
    }

    .wc-block-cart-item__quantity {
        grid-column: 2;
        grid-row: 2;
    }

    .wc-block-cart-items__row .wc-block-components-product-image,
    .wc-block-cart-items__row .wc-block-components-product-image img {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }
}

/* =============================================================================
   Airnieuws homepage — foto-slider (layout + marquee)
   Staat in site.css zodat het altijd meelaadt; losse foto-slider.css kan ontbreken
   of door cache/concat niet worden toegepast.
   ============================================================================= */
.home-foto-slider-section .airnieuws-foto-slider__marquee-viewport {
  overflow: hidden;
}

.home-foto-slider-section .airnieuws-foto-slider__marquee-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  align-items: stretch !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation-name: airnieuws-home-fs-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  will-change: transform;
}

.home-foto-slider-section .airnieuws-foto-slider--dir-rtl .airnieuws-foto-slider__marquee-inner {
  animation-direction: reverse;
}

@keyframes airnieuws-home-fs-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.home-foto-slider-section ul.airnieuws-foto-slider__track--marquee {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  align-items: stretch !important;
  gap: var(--afs-gap, 16px);
  margin: 0 !important;
  padding-block: 0 !important;
  padding-inline-start: 0 !important;
  padding-inline-end: var(--afs-gap, 16px) !important;
  list-style: none !important;
  overflow: visible;
}

.home-foto-slider-section .airnieuws-foto-slider__slide {
  flex-shrink: 0 !important;
  list-style: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-foto-slider-section .airnieuws-foto-slider__marquee-inner {
    animation: none !important;
    transform: none !important;
  }

  .home-foto-slider-section .airnieuws-foto-slider__marquee-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    mask-image: none;
    -webkit-mask-image: none;
  }
}