/*
Theme Name: VG Classic Storefront
Theme URI: https://www.vgclassicframes.com
Template: storefront
Author: VG Classic Frames
Author URI: https://www.vgclassicframes.com
Description: VG Classic Frames & Parts webshop
Version: 2.3.50
Updated: 2026-04-13
*/

/*
  VG Classic Storefront Child Theme - Stylesheet

  Inhoud:
  01. CSS variabelen
  02. Custom fonts (Gunplay, Qwigley, Quicksand)
  03. Globale stijlen
  04. Header
  05. Hoofdnavigatie
  06. Currency switcher
  07. Cart icoon
  08. Footer basis
  09. Productkaarten – grid view
  10. Productkaarten – list view
  11. Productpagina
  12. Add to cart knop
  13. Gerelateerde producten
  14. Responsive grids
  15. Donkere content pagina template
  16. Storefront fixes
  17. WordPress pagina content links
  18. Storefront gele links killen
  19. Grid/list view toggle terugzetten
  20. Grid/List view toggle knoppen
  21. Dropdown navigatie — hover
  22. Currency tooltip
  23. Footer uitgebreid
  24. Mobiel menu — slide-in overlay
  25. Cart overlay — schuift in van rechts (alleen mobiel)
  26. Dark Page template
  27. Gutenberg heading block styles
  28. Gutenberg editor — live preview
  29. Page template achtergrondkleuren
  30. Block styles — gecombineerde heading stijlen
  31. Dark page templates — paginatitel verbergen
  32. Shop pagina padding
  33. Currency tooltip in mobiel menu
  34. Productpagina — achtergrond wisselaar
  35. Productpagina — grid layout & sidebar stijl
  36. Product gallery — Splide slider
  37. Vraag-knop op productpagina
  38. Productpagina — informatietekst valuta & douane
  39. Productpagina — Description heading verbergen
  40. Checkout — phone validatie foutmelding
  41. (vervallen — block checkout koppen)
  42. Cart — lege winkelwagen knop
  43. Notices — "Added to Cart" en "Pending"
  44. (vervallen — block checkout order summary)
  45. Productgalerie — thumbnail grid (5 kolommen, gelijke spacing)
  46. Cart & Checkout — BTW breakdown opmaak
  47. Cart — short description verbergen
  48. Classic checkout — layout, volgorde en opmaak
  49. Cart — betaalmethode-icoontjes verbergen
  50. Classic cart — short description, estimated total, thumbnail fix
*/


/* ============================================
   01. CSS variabelen
   ============================================ */
:root {
  /* ════════════════════════════════════════
     ACHTERGRONDEN — per paginatype
     Pas hier aan om een pagina van kleur te wisselen
     ════════════════════════════════════════ */
  --bg-home:              #000000;   /* Homepage */
  --bg-header:            #000000;   /* Header balk */
  --bg-footer:            #000000;   /* Footer balk */
  --bg-dropdown:          #000000;   /* Navigatie dropdown */
  --bg-category:          #1E1E1E;   /* Categoriepagina's */
  --bg-product:           #1E1E1E;   /* Productpagina's */
  --bg-card:              #1E1E1E;   /* Productkaarten, secties */
  --bg-mobile-menu:       #000000;   /* Mobiel slide-in menu */

  /* ════════════════════════════════════════
     ACHTERGRONDEN — page templates
     ════════════════════════════════════════ */
  --bg-template-black:    #000000;   /* Page Black template */
  --bg-template-dark:     #1E1E1E;   /* Page Dark Grey template */
  --bg-template-medium:   #242833;   /* Page Medium Grey template */

  /* ════════════════════════════════════════
     TEKSTKLEUREN
     ════════════════════════════════════════ */
  --text-light:           #FFFFFF;
  --text-muted:           rgba(255,255,255,0.7);
  --text-dark:            #1E1E1E;   /* Tekst op lichte achtergrond */
  --text-orange:          #FF722F;   /* Koppen, navigatie, accenten */

  /* ════════════════════════════════════════
     ACCENTKLEUREN
     ════════════════════════════════════════ */
  --accent:               #FF722F;   /* Knoppen, borders, iconen */
  --accent-hover:         #CC5A24;   /* Hover staat */

  /* ════════════════════════════════════════
     OVERIGE
     ════════════════════════════════════════ */
  --bg-light:             #FFFFFF;   /* Witte achtergrond (productpagina) */
}


/* ============================================
   02. Custom fonts: Gunplay, Qwigley, Quicksand
   ============================================ */
@font-face {
  font-family: 'Gunplay';
  src: url('fonts/gunplayrg-webfont.woff2') format('woff2'),
       url('fonts/gunplayrg-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Qwigley';
  src: url('fonts/qwigley-regular-webfont.woff2') format('woff2'),
       url('fonts/qwigley-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================
   03. Globale stijlen
   ============================================ */
body {
  background-color: var(--bg-card);
  color: var(--text-light);
  font-family: 'Quicksand', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--text-orange);
}

a:hover {
  color: var(--accent-hover);
}

/* Design constante: alle VG buttons gebruiken altijd Quicksand, nooit Gunplay.
   Gunplay is uitsluitend voor headings en titels.
   Deze regel vangt alle huidige en toekomstige vg-*-btn / vg-*-button classes. */
[class*="vg-"][class*="-btn"],
[class*="vg-"][class*="-button"] {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
}


/* ============================================
   04. Header
   ============================================ */
.site-header {
  background-color: var(--bg-header);
  border-bottom: none;
  padding: 0;
}

/* Eén flex-rij: logo — navigatie — currency+cart */
header#masthead .col-full {
  background-color: var(--bg-header);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  min-height: 80px;
  padding: 0 2rem;
  box-sizing: border-box;
}

/* Logo */
header#masthead .site-branding {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  order: 1;
  float: none;
  width: auto;
  clear: none;
  margin: 0;
}

header#masthead .site-branding .site-title,
header#masthead .site-branding .site-description {
  display: none;
}

/* Logo afbeelding — schaalt mee, nooit groter dan 180px */
header#masthead .site-branding img {
  max-width: 180px;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  header#masthead .site-branding img {
    max-width: 180px;
    width: 100%;
    height: auto;
  }
}

/* Navigatie: neemt beschikbare ruimte in het midden */
header#masthead .main-navigation {
  flex: 1;
  order: 2;
  float: none;
  width: auto;
  clear: none;
  margin: 0;
}

/* Currency switcher + cart rechts */
header#masthead .vg-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  order: 3;
}

header#masthead .site-header-cart {
  display: flex;
  align-items: center;
  float: none;
  width: auto;
  clear: none;
  margin: 0;
}

header#masthead .site-header-cart .cart-contents .count {
  margin-right: 8px;
}

header#masthead .site-search {
  float: none;
  width: auto;
  clear: none;
  margin: 0;
}

/* Hamburgermenu — mobiel */
@media (max-width: 767px) {

  header#masthead .col-full.vg-header-top {
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
  }

  header#masthead .site-branding {
    padding-right: 0;
    flex: 1;
  }

  header#masthead .main-navigation {
    order: 4;
    width: 100%;
    flex: 0 0 100%;
  }

  header#masthead .vg-header-right {
    order: 2;
    margin-left: auto;
  }

  /* Toon hamburgermenu knop */
  header#masthead .menu-toggle {
    display: block;
    order: 3;
  }

/* Forceer hamburgermenu zichtbaar op mobiel */
@media (max-width: 767px) {
  header#masthead .menu-toggle {
    display: block !important;
    background: transparent;
    border: none;
    color: var(--text-orange);
    padding: 0.5rem;
  }

  header#masthead .menu-toggle::before,
  header#masthead .menu-toggle::after,
  header#masthead .menu-toggle span::before {
    background-color: var(--text-orange);
  }

  header#masthead .primary-navigation {
    display: none;
  }

  header#masthead .main-navigation.toggled .primary-navigation {
    display: block;
  }
}

  /* Verberg currency op mobiel in header */
  header#masthead .vg-header-currency {
    display: none;
  }
}
/* ============================================
   05. Hoofdnavigatie
   ============================================ */
.main-navigation {
  background-color: var(--bg-header);
  border: none;
}

.main-navigation ul.nav-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Storefront zet display:block op ul — specifieker selector om te overschrijven */
header#masthead .main-navigation ul.menu {
  display: flex !important;
  justify-content: center;
}

.main-navigation ul li a {
  font-family: 'Gunplay', sans-serif;
  font-size: 25px;
  color: var(--text-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.6rem;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

.main-navigation ul li a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Actieve pagina — wit, geen onderstreping */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a,
.main-navigation ul li.current-menu-parent > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current_page_ancestor > a {
  color: var(--text-light);
  text-decoration: none;
}

/* Dropdown achtergrond */
.main-navigation ul ul {
  background-color: var(--bg-dropdown);
  border: 1px solid rgba(255,255,255,0.08);
}

.main-navigation ul ul li a {
  color: var(--text-orange);
  background-color: var(--bg-header);
  text-decoration: none;
}

.main-navigation ul ul li.current-menu-item > a {
  color: var(--text-light);
  text-decoration: none;
}

/* Dropdown hover */
.main-navigation ul ul li a:hover,
.main-navigation ul ul li a:focus,
.main-navigation ul ul li:hover > a,
.main-navigation ul ul li.focus > a {
  color: var(--accent-hover);
  background-color: var(--bg-header);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.main-navigation a:hover,
.main-navigation a:focus {
  color: var(--accent-hover);
}


/* ============================================
   06. Currency switcher
   ============================================ */
.vg-currency-switcher select {
  background-color: var(--bg-header);
  color: var(--text-orange);
  border: 1px solid var(--accent);
  padding: 4px 24px 4px 8px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  cursor: pointer;
  min-width: 100px;
}

.vg-currency-switcher select option:checked {
  background-color: var(--bg-card);
  color: var(--text-light);
}

.vg-header-currency {
  display: flex;
  align-items: center;
  gap: 4px;
}


/* ============================================
   07. Cart icoon
   ============================================ */
.storefront-handheld-footer-bar .cart-contents,
.site-header-cart .cart-contents {
  color: var(--text-orange);
}

.site-header-cart .widget_shopping_cart {
  display: none !important;
  background-color: var(--bg-header);
  border: 1px solid var(--text-orange);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 2px;
}

.site-header-cart.focus .widget_shopping_cart {
  display: block !important;
}

@media (min-width: 768px) {
  .site-header-cart .widget_shopping_cart {
    width: min(60ch, 80vw) !important; /* 60ch is een fijn leesbare breedte; als dat op een kleiner scherm niet past maximaal 80% van de schermbreedte */
    left: initial !important;
    right: 0 !important;
  }
}

/* Overschrijf de standaard margin van de cart message; zo houden we het consistent met de currency info tooltip */
.site-header-cart .widget_shopping_cart p {
  margin: 0 !important;
}

/* Verberg Storefront standaard cart icoon — ook zonder media query */
.site-header-cart .cart-contents::after {
  display: none; !important
}

/* Eigen cart SVG */
.site-header-cart .cart-contents::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  margin-right: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 640 640' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23FF722F' stroke-width='36' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M64 96H80C124 96 160 132 160 176V432C160 449 174 464 192 464H576'/%3E%3Crect x='208' y='160' width='336' height='224' rx='48'/%3E%3Ccircle cx='208' cy='528' r='48'/%3E%3Ccircle cx='496' cy='528' r='48'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.site-header-cart .cart-contents::after,
.site-header-cart a::after {
  display: none !important;
}

/* ============================================
   08. Footer basis
   ============================================ */
.site-footer {
  background-color: var(--bg-header);
  color: var(--text-muted);
  border-top: none;
}

.site-footer a {
  color: var(--text-muted);
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text-orange);
  text-decoration: underline;
}

.site-footer .widget-title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  color: var(--text-orange);
}

.site-info {
  background-color: var(--bg-header);
  color: var(--text-muted);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.site-info a {
  color: var(--text-muted);
}

.site-info a:hover {
  color: var(--text-orange);
}


/* ============================================
   09. Productkaarten – GRID VIEW
   ============================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  position: relative;
}

.woocommerce ul.products li.product img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background-color: var(--bg-light);
  padding: 0;
  border-radius: 0;
  transition: opacity 0.2s ease;
}

.woocommerce ul.products li.product:hover img {
  opacity: 0.88;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 10px 0 4px 0;
  padding: 0;
  line-height: 1.35;
}

.woocommerce ul.products li.product .price {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-light);
  padding: 0;
  margin: 0 0 8px 0;
}

/* Add to Cart button — verschijnt bij hover */
.woocommerce ul.products li.product .button {
  display: block;
  width: 100%;
  padding: 10px 0;
  background-color: var(--text-orange);
  color: var(--text-light);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  border: none;
  border-radius: 0;
  cursor: pointer;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
}

.woocommerce ul.products li.product:hover .button {
  opacity: 1;
  transform: translateY(0);
}

.woocommerce ul.products li.product .button:hover {
  background-color: var(--accent-hover);
  color: var(--text-light);
}

/* Specs alleen in list view */
.woocommerce ul.products:not(.columns-1) li.product .product-list-specs {
  display: none;
}


/* ============================================
   10. Productkaarten – LIST VIEW
   ============================================ */
.woocommerce ul.products.columns-1 li.product {
  display: grid;
  grid-template-columns: 260px 1fr;
  column-gap: 28px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  width: 100%;
  text-align: left;
  float: none;
}

.woocommerce ul.products.columns-1 li.product .product-list-left {
  grid-column: 1;
  grid-row: 1;
}

.woocommerce ul.products.columns-1 li.product .product-list-left img {
  aspect-ratio: 3 / 2;
  width: 100%;
}

.woocommerce ul.products.columns-1 li.product .product-list-details {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-top: 4px;
}

/* Button altijd zichtbaar in list view */
.woocommerce ul.products.columns-1 li.product .product-list-details .button {
  display: inline-block;
  opacity: 1;
  transform: none;
  transition: background-color 0.2s ease;
  width: auto;
  padding: 10px 24px;
  margin-top: 12px;
}

/* Button buiten wrappers verbergen */
.woocommerce ul.products.columns-1 li.product > a.button {
  display: none;
}

.woocommerce ul.products.columns-1 li.product .product-list-details .woocommerce-loop-product__link {
  width: 100%;
}

/* Producttitel uitlijnen met productfoto */
.woocommerce ul.products.columns-1 li.product .product-list-details .woocommerce-loop-product__link h2 {
  margin-top: -0.5rem;
}

.woocommerce ul.products.columns-1 li.product .woocommerce-loop-product__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  width: 100%;
}

.woocommerce ul.products.columns-1 li.product .product-list-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  flex: 1;
}

.woocommerce ul.products.columns-1 li.product .product-list-specs li {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 1.5px 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.woocommerce ul.products.columns-1 li.product .product-list-specs li::before {
  content: '•';
  color: var(--text-orange);
  flex-shrink: 0;
}

.woocommerce ul.products.columns-1 li.product .price {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
}


/* ============================================
   11. Productpagina
   ============================================ */

/* Volledige pagina wit — body, #page en #content */
body.single-product,
body.single-product.custom-background,
body.single-product #page,
body.single-product #content {
  background-color: var(--bg-light) !important;
}

.single-product .site-main {
  background-color: var(--bg-light);
  color: var(--text-dark);
}

.single-product h1,
.single-product h2 {
  color: var(--text-dark);
}

.single-product .price {
  color: var(--text-dark);
}

.woocommerce-product-gallery img {
  object-fit: contain;
}

/* Additional information tab verbergen */
.single-product .woocommerce-tabs .additional_information_tab,
.single-product li#tab-title-additional_information,
.single-product #tab-additional_information,
.single-product #tab-title-additional_information,
.single-product .woocommerce-product-attributes {
  display: none !important;
}

/* Hele tab navigatie verbergen — alleen description content tonen */
.single-product .woocommerce-tabs .tabs.wc-tabs {
  display: none !important;
}

.single-product .woocommerce-Tabs-panel {
  border: none !important;
  padding: 0 !important;
}

/* Achtergrond fix — product div zelf ook wit */
.single-product div.product {
  background-color: var(--bg-light);
}

body.single-product .content-area,
body.single-product #primary {
  background-color: var(--bg-light);
}

/* SKU, category en tags verbergen */
.single-product .product_meta {
  display: none !important;
}


/* ============================================
   12. Add to cart knop
   ============================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
  background-color: var(--text-orange);
  color: var(--text-light);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  border: none;
  border-radius: 0;
  transition: background-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
  background-color: var(--accent-hover);
  color: var(--text-light);
}

/* Contact for Availability knop */
.vg-contact-btn {
  display: inline-block;
  width: auto;
  padding: 14px 48px;
  background-color: #111 !important;
  color: var(--text-light) !important;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  border: none;
  border-radius: 0;
  text-decoration: none;
}

.vg-contact-btn:hover {
  background-color: #333 !important;
  color: var(--text-light) !important;
}


/* ============================================
   13. Gerelateerde producten
   ============================================ */
.related-repair-parts {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.related-repair-parts__heading {
  font-family: 'Gunplay', sans-serif;
  font-size: 2.4rem;
  color: var(--text-orange);
  margin: 0 0 2rem 0;
}

.related-repair-parts__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 1rem);
  gap: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.related-repair-parts__item {
  scroll-snap-align: start;
}

.related-repair-parts__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.related-repair-parts__link:hover {
  transform: translateY(-4px);
}

.related-repair-parts__image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background-color: var(--bg-light);
  border-radius: 4px;
  margin-bottom: 1rem;
}

.related-repair-parts__image-wrapper img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}

.related-repair-parts__grid::-webkit-scrollbar { height: 8px; }
.related-repair-parts__grid::-webkit-scrollbar-track { background: transparent; }
.related-repair-parts__grid::-webkit-scrollbar-thumb {
  background: rgba(255,114,47,0.4);
  border-radius: 4px;
}
.related-repair-parts__grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255,114,47,0.7);
}

@media screen and (min-width: 750px) {
  .related-repair-parts__grid {
    grid-auto-columns: calc(33.333% - 1.4rem);
  }
}

@media screen and (min-width: 990px) {
  .related-repair-parts__grid {
    grid-auto-columns: calc(25% - 1.5rem);
  }
}


/* ============================================
   14. Responsive grids
   ============================================ */
.two-col-grid   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; }
.three-col-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; }
.four-col-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; }

@media screen and (max-width: 749px) {
  .two-col-grid,
  .three-col-grid,
  .four-col-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}


/* ============================================
   15. Donkere content pagina template
   ============================================ */
.vg-dark-content {
  background-color: var(--bg-card);
  padding: 20px 0 60px 0;
}

.vg-dark-content .page-title {
  font-family: 'Gunplay', sans-serif;
  font-size: 36px;
  text-align: center;
  color: var(--text-orange);
  margin-bottom: 40px;
  margin-top: 0;
}

.vg-dark-content h2 { font-size: 27px; color: var(--text-light); }
.vg-dark-content h3 { font-size: 21.6px; color: var(--text-light); }
.vg-dark-content p  { font-size: 18px; color: var(--text-light); }


/* ============================================
   16. Storefront fixes
   ============================================ */

/* Sidebar verbergen */
#secondary,
.woocommerce #secondary,
.woocommerce-page #secondary,
body.left-sidebar #secondary,
body.right-sidebar #secondary {
  display: none;
}

/* Content altijd fullwidth */
#primary,
.woocommerce #primary,
.woocommerce-page #primary,
body.left-sidebar #primary,
body.right-sidebar #primary {
  width: 100%;
  float: none;
  margin: 0;
}

/* col-full gecentreerd */
.col-full {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

/* Achtergrond fullwidth */
.site-main {
  background-color: var(--bg-card);
}

/* Zoekbalk verbergen */
.widget_product_search { display: none; }

/* Categorie titel */
.woocommerce-products-header__title,
.woocommerce .page-title {
  font-family: 'Gunplay', sans-serif;
  color: var(--text-orange);
  font-size: 2rem;
  letter-spacing: 0.05em;
  margin: 0;
  text-align: center;
}

/* Ruimte rondom categorie titel */
.woocommerce-products-header,
.storefront-full-width-content .woocommerce-products-header {
  padding: 0.5rem 0;
  margin: 0;
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

.woocommerce .woocommerce-breadcrumb a { color: rgba(255,255,255,0.5); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--text-orange); }

/* Sorteerdropdown verbergen */
.woocommerce-ordering {
  display: none;
}


/* ============================================
   17. WordPress pagina content links
   ============================================ */
.entry-content a,
.page-content a,
.woocommerce-page .entry-content a {
  color: var(--text-orange);
}

.entry-content a:hover,
.page-content a:hover {
  color: var(--accent-hover);
}

.vg-category-description a { color: var(--text-orange); }
.vg-category-description a:hover { color: var(--accent-hover); }


/* ============================================
   18. Storefront gele links killen
   Alles oranje of wit, nooit geel
   ============================================ */

/* Globaal alle links oranje */
a,
a:visited {
  color: var(--text-orange);
}

a:hover,
a:focus {
  color: var(--accent-hover);
}

/* Actieve navigatielinks wit */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a,
.main-navigation ul li.current-menu-parent > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current_page_ancestor > a {
  color: var(--text-light) !important;
}

/* Storefront eigen linkkleur overschrijven */
.storefront-full-width-content a,
.site-main a,
.entry-content a,
.page-content a {
  color: var(--text-orange);
}

.storefront-full-width-content a:hover,
.site-main a:hover,
.entry-content a:hover,
.page-content a:hover {
  color: var(--accent-hover);
}

/* Footer links — grijzig, oranje bij hover */
.site-footer a,
.site-footer a:visited,
.site-info a,
.site-info a:visited {
  color: var(--text-muted) !important;
}

.site-footer a:hover,
.site-info a:hover {
  color: var(--text-orange) !important;
  text-decoration: underline;
}


/* ============================================
   19. Grid/list view toggle terugzetten
   ============================================ */
.woocommerce-catalog-ordering,
.storefront-sorting {
  display: flex;
  margin-top: 2rem;
}

.woocommerce ul.products + .woocommerce-catalog-ordering {
  display: flex;
}


/* ============================================
   20. Grid/List view toggle knoppen
   ============================================ */
.vg-view-toggle {
  display: none;
  gap: 8px;
  margin-right: 16px;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .vg-view-toggle {
    display: flex;
  }
}

.vg-view-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.4);
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
}

.vg-view-btn:hover,
.vg-view-btn.active {
  color: var(--text-orange);
  border-color: var(--text-orange);
  background: transparent;
}


/* ============================================
   21. Dropdown navigatie — hover
   ============================================ */

/* Geen visuele focus-randen */
.main-navigation ul li:focus,
.main-navigation ul li.focus,
.main-navigation ul li.focus > a,
.main-navigation ul li > a:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Storefront dropdown pijlen verbergen */
.main-navigation ul li.menu-item-has-children > a .sub-menu-icon,
.main-navigation ul li.menu-item-has-children > a::after,
.main-navigation .dropdown-toggle {
  display: none !important;
}


/* ============================================
   22. Currency tooltip
   ============================================ */
.vg-currency-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--text-orange);
  cursor: default;
  user-select: none;
  height: 1.1rem;
  width: 1.1rem;
}

.vg-currency-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  left: -124px;
  width: 240px;
  background-color: var(--bg-header);
  border: 1px solid var(--text-orange);
  color: var(--text-light);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 2px;
  z-index: 9999;
  pointer-events: none;
}

.vg-currency-info:hover .vg-currency-tooltip {
  display: block;
}


/* ============================================
   23. Footer uitgebreid
   ============================================ */

/* Verberg Storefront standaard footer elementen */
.site-footer .col-full > .widget-area,
.site-footer .col-full > .site-info {
  display: none;
}

.vg-footer-full {
  background-color: var(--bg-header);
  padding: 30px 2rem 40px;
  width: 100%;
  box-sizing: border-box;
}

.vg-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
}

@media (max-width: 900px) {
  .vg-footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.vg-footer-heading {
  font-family: 'Gunplay', sans-serif;
  font-size: 0.85rem;
  color: var(--text-orange);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.2rem 0;
}

.vg-footer-company {
  position: relative;
}

.vg-footer-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vg-footer-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.vg-footer-info-item a {
  color: var(--text-muted);
  text-decoration: none;
}

.vg-footer-info-item a:hover {
  color: var(--text-orange);
}

.vg-footer-motor-logo {
  position: absolute;
  opacity: 0.85;
  pointer-events: none;
}

.vg-footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vg-footer-links ul li a {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.vg-footer-links ul li a:hover {
  color: var(--text-orange);
}

.vg-footer-currency {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 1.2rem;
}

.vg-footer-currency select {
  background-color: var(--bg-header);
  color: var(--text-orange);
  border: 1px solid var(--accent);
  padding: 4px 24px 4px 8px;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.82rem;
}

.vg-footer-payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vg-footer-payment-icons img {
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Google Pay heeft transparante achtergrond — witte kaart toevoegen */
.vg-footer-payment-icons img[alt="Google Pay"] {
  background: #fff;
}

/* iDEAL | Wero is vierkant — op 52px zetten zodat uitlijning klopt met andere iconen */
.vg-footer-payment-icons img[alt="iDEAL | Wero"] {
  width: 52px;
  height: 33px;
  object-fit: contain;
}

.vg-footer-minimal {
  background-color: var(--bg-header);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 16px 2rem;
  width: 100%;
  box-sizing: border-box;
}

.vg-footer-minimal-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vg-footer-copyright {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.vg-footer-minimal-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.vg-footer-minimal-links a {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.vg-footer-minimal-links a:hover {
  color: var(--text-orange);
}

/* ============================================
   24. Mobiel menu — slide-in overlay
   ============================================ */

/* Hamburger knop — sticky, transparant */
.vg-mobile-toggle {
    display: none;
    position: fixed !important;
    top: 1rem;
    left: 1rem;
    z-index: 9998;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.vg-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-orange);
    transition: all 0.3s ease;
}

/* Hamburger in header balk — standaard verborgen, zichtbaar op 768–1024px */
.vg-header-hamburger {
    display: none;
}

/* Fixed hamburger voor < 768px — standaard verborgen */
.vg-mobile-toggle--fixed {
    display: none;
    position: fixed !important;
    top: 1rem;
    left: 1rem;
    z-index: 9998;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.vg-mobile-toggle--fixed span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-orange);
    transition: all 0.3s ease;
}

/* Mobiele cart icoon wrapper — standaard verborgen, zichtbaar op < 768px */
.vg-mobile-cart {
    display: none;
}

/* ── Breakpoint 1: 768px–1024px ─────────────────────────────────────────
   Sticky header balk blijft zichtbaar.
   Navigatie verdwijnt — hamburger links, logo gecentreerd, cart rechts.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Hamburger knop zichtbaar */
    .vg-mobile-toggle {
        display: flex;
    }

    /* Header blijft zichtbaar als sticky balk */
    header#masthead {
        display: block;
        position: sticky;
        top: 0;
        z-index: 9990;
        background-color: var(--bg-header);
    }

    /* Header balk: hamburger links, logo gecentreerd, cart rechts */
    header#masthead .col-full.vg-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 60px;
        padding: 0 1rem;
    }

    /* Navigatie verbergen — zit in hamburger overlay */
    header#masthead .main-navigation {
        display: none;
    }

    /* Logo gecentreerd — absolute positie zodat hij écht centreert */
    header#masthead .site-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    header#masthead .site-branding img {
        max-width: 180px;
    }

    /* Currency selector verbergen — zit in hamburger overlay */
    header#masthead .vg-header-currency {
        display: none;
    }

    /* Cart rechts in header — zichtbaar houden op medium */
    header#masthead .vg-header-right {
        margin-left: auto;
    }

    header#masthead .site-header-cart {
        display: flex !important;
    }

    /* Cart in overlay verbergen op medium — hoort in header balk */
    .vg-mobile-footer .site-header-cart {
        display: none !important;
    }

    /* Hamburger in header balk zichtbaar */
    .vg-header-hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
    }

    /* Tekst wrapt correct */
    .vg-category-description,
    .woocommerce-products-header,
    .site-main,
    #primary {
        overflow-x: hidden;
        word-wrap: break-word;
        max-width: 100%;
    }

    /* Breadcrumbs verbergen */
    .woocommerce-breadcrumb {
        display: none;
    }
}

/* ── Breakpoint 2: < 768px ───────────────────────────────────────────────
   Geen sticky header balk.
   Alleen hamburger (links) en cart (rechts) als fixed overlay iconen.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Header helemaal verbergen */
    header#masthead {
        display: none;
    }

    /* Fixed hamburger zichtbaar op < 768px */
    .vg-mobile-toggle--fixed {
        display: flex;
    }

    /* Mobiele cart zichtbaar als fixed icoon rechts */
    .vg-mobile-cart {
        display: flex;
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 9998;
        padding: 8px;
        background: transparent;
        align-items: center;
        width: auto;
        height: auto;
    }

    .vg-mobile-cart .site-header-cart {
        display: flex !important;
        width: auto !important;
        height: auto !important;
        align-items: center;
    }

    .vg-mobile-cart .cart-contents {
        display: flex !important;
        align-items: center;
        color: var(--text-orange);
        font-family: 'Quicksand', sans-serif;
        font-size: 0.85rem;
        text-decoration: none;
    }
}

/* ============================================
   25. Cart overlay — schuift in van rechts (alleen mobiel)
   ============================================ */
.vg-cart-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vg-cart-overlay.is-open {
    display: block;
    opacity: 1;
}

.vg-cart-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 90vw);
    background-color: var(--bg-mobile-menu);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.vg-cart-overlay.is-open .vg-cart-panel {
    transform: translateX(0);
}

/* Header van cart panel */
.vg-cart-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.vg-cart-panel-title {
    font-family: 'Gunplay', sans-serif;
    font-size: 1rem;
    color: var(--text-orange);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vg-cart-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 4px;
    line-height: 1;
}

.vg-cart-close:hover {
    color: var(--text-orange);
}

/* Scrollbare inhoud */
.vg-cart-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

/* Cart items */
.vg-cart-panel-content .woocommerce-mini-cart {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vg-cart-panel-content .woocommerce-mini-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'Quicksand', sans-serif;
    font-size: 0.85rem;
    color: var(--text-light);
}

.vg-cart-panel-content .woocommerce-mini-cart-item img {
    width: 56px;
    height: 38px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.vg-cart-panel-content .woocommerce-mini-cart-item a:not(.remove) {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
}

.vg-cart-panel-content .woocommerce-mini-cart-item a:not(.remove):hover {
    color: var(--text-orange);
}

.vg-cart-panel-content .remove {
    color: var(--text-muted);
    font-size: 1.1rem;
    text-decoration: none;
    flex-shrink: 0;
    margin-left: auto;
}

.vg-cart-panel-content .remove:hover {
    color: var(--text-orange);
}

.vg-cart-panel-content .woocommerce-mini-cart__total {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.9rem;
    color: var(--text-light);
    padding: 12px 0 0;
    text-align: right;
    margin: 0;
}

/* Lege cart tekst */
.vg-cart-panel-content .woocommerce-mini-cart__empty-message {
    color: var(--text-muted);
    font-family: 'Quicksand', sans-serif;
    font-size: 0.85rem;
}

/* Knoppen onderaan */
.vg-cart-panel-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.vg-cart-panel-btn {
    display: block;
    text-align: center;
    padding: 0.7em 1em;
    border-radius: 2px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    background-color: var(--accent);
    color: #ffffff !important;
    transition: background-color 0.2s ease;
}

.vg-cart-panel-btn:hover {
    background-color: var(--accent-hover);
}

/* Overlay achtergrond */
.vg-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vg-mobile-overlay.is-open {
    display: block;
    opacity: 1;
}

/* Slide-in panel */
.vg-mobile-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 90vw;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg-mobile-menu);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.vg-mobile-overlay.is-open .vg-mobile-panel {
    transform: translateX(0);
}

/* Sluit knop */
.vg-mobile-header {
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
}

.vg-mobile-close {
    background: transparent;
    border: none;
    color: var(--text-orange);
    cursor: pointer;
    padding: 4px;
}

/* Logo */
.vg-mobile-logo {
    padding: 0 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.vg-mobile-logo img {
    max-width: 160px;
    height: auto;
}

/* Navigatie */
.vg-mobile-nav {
    flex: 1;
    padding: 1rem 0;
}

.vg-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vg-mobile-menu li {
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: visible;
}

.vg-mobile-menu li a {
    display: block;
    padding: 0.9rem 3.5rem 0.9rem 1.5rem;
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-orange) !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vg-mobile-menu li a:hover {
    color: var(--text-light) !important;
}

/* Actieve pagina */
.vg-mobile-menu li.current-menu-item > a,
.vg-mobile-menu li.current-menu-ancestor > a {
    color: var(--text-light) !important;
}

/* Submenu toggle pijltje */
.vg-submenu-toggle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--text-orange) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    padding: 0 !important;
    transition: background 0.2s ease;
}

.vg-submenu-toggle:hover {
    background: rgba(255,114,47,0.1) !important;
}

.vg-submenu-toggle svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.vg-submenu-toggle.is-open svg {
    transform: rotate(90deg);
}

/* Submenu */
.vg-mobile-menu .sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: rgba(255,255,255,0.03);
}

.vg-mobile-menu .sub-menu.is-open {
    display: block;
}

.vg-mobile-menu .sub-menu li a {
    padding-left: 2.5rem !important;
    font-size: 0.9rem;
    color: var(--text-muted) !important;
    text-transform: none;
    letter-spacing: 0;
}

.vg-mobile-menu .sub-menu li a:hover {
    color: var(--text-orange) !important;
}

/* Footer: cart + currency */
.vg-mobile-footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: auto;
}

.vg-mobile-footer .site-header-cart {
    display: flex;
    align-items: center;
}

.vg-mobile-footer .site-header-cart .cart-contents {
    color: var(--text-light);
    font-family: 'Quicksand', sans-serif;
    font-size: 0.9rem;
}

.vg-mobile-currency .vg-cs-dropdown {
    left: 0;
    right: auto;
}

/* Verberg Storefront handheld footer balk */
.storefront-handheld-footer-bar {
    display: none;
}

.vg-mobile-menu .sub-menu li a {
    color: var(--text-orange) !important;
}

.vg-mobile-menu .sub-menu li.current-menu-item > a {
    color: var(--text-light) !important;
}
/* ============================================
   26. Dark Page template
   Toevoegen onderaan style.css
   ============================================ */

/* Basis pagina lay-out */
.vg-dark-page {
    background-color: var(--bg-card);
    min-height: 60vh;
}

.vg-page-content {
    background-color: var(--bg-card);
}

.vg-page-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 2rem 5rem;
    color: var(--text-light);
}

/* Reset Storefront's eigen padding op dark pages */
body.vg-page-black .site-main,
body.vg-page-dark-grey .site-main,
body.vg-page-cart-checkout .site-main,
body.vg-page-medium-grey .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.vg-page-black .entry-content,
body.vg-page-dark-grey .entry-content,
body.vg-page-cart-checkout .entry-content,
body.vg-page-medium-grey .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Breadcrumb — alleen tonen op product- en categoriepagina's
   Op alle andere pagina's (inclusief dark pages) verborgen */
.storefront-breadcrumb {
    display: none !important;
}

body.single-product .storefront-breadcrumb,
body.tax-product_cat .storefront-breadcrumb {
    display: block !important;
}

/* Eerste heading bovenaan — margin-top wegnemen */
body.vg-page-black .vg-page-inner .wp-block-heading:first-child,
body.vg-page-dark-grey .vg-page-inner .wp-block-heading:first-child,
body.vg-page-cart-checkout .vg-page-inner .wp-block-heading:first-child,
body.vg-page-medium-grey .vg-page-inner .wp-block-heading:first-child {
    margin-top: 0 !important;
}

/* Standaard tekst op dark page */
.vg-page-inner p,
.vg-page-inner li {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-light);
}

.vg-page-inner a {
    color: var(--text-orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vg-page-inner a:hover {
    color: var(--accent-hover);
}

/* Standaard koppen op dark page — Quicksand */
.vg-page-inner h1,
.vg-page-inner h2,
.vg-page-inner h3,
.vg-page-inner h4,
.vg-page-inner h5,
.vg-page-inner h6 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* ============================================
   27. Gutenberg heading block styles
   .is-style-gunplay   → Gunplay font, accent kleur
   .is-style-quicksand → Quicksand font (default)
   ============================================ */

/* Gunplay stijl */
.vg-page-inner .wp-block-heading.is-style-gunplay,
.entry-content .wp-block-heading.is-style-gunplay {
    font-family: 'Gunplay', sans-serif;
    font-weight: normal;
    color: var(--text-orange);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
}

/* Quicksand stijl (expliciet, is ook de default) */
.vg-page-inner .wp-block-heading.is-style-quicksand,
.entry-content .wp-block-heading.is-style-quicksand {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: var(--text-light);
    text-transform: none;
    letter-spacing: normal;
}

/* Centreren — Gutenberg tekst-uitlijning werkt gewoon door */

/* ============================================
   28. Gutenberg editor — live preview in de editor
   ============================================ */
.editor-styles-wrapper .wp-block-heading.is-style-gunplay {
    font-family: 'Gunplay', sans-serif;
    color: var(--text-orange);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.editor-styles-wrapper .wp-block-heading.is-style-quicksand {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
}

/* ============================================
   29. Page template achtergrondkleuren
   Body class zorgt dat de volledige pagina de kleur krijgt
   ============================================ */
body.vg-page-black,
body.vg-page-black .site-main,
body.vg-page-black .vg-page-content,
body.vg-page-black #page,
body.vg-page-black #content {
    background-color: var(--bg-template-black);
}

body.vg-page-dark-grey,
body.vg-page-dark-grey .site-main,
body.vg-page-dark-grey .vg-page-content,
body.vg-page-dark-grey #page,
body.vg-page-dark-grey #content,
body.vg-page-cart-checkout,
body.vg-page-cart-checkout .site-main,
body.vg-page-cart-checkout .vg-page-content,
body.vg-page-cart-checkout #page,
body.vg-page-cart-checkout #content {
    background-color: var(--bg-template-dark);
}

body.vg-page-medium-grey,
body.vg-page-medium-grey .site-main,
body.vg-page-medium-grey .vg-page-content,
body.vg-page-medium-grey #page,
body.vg-page-medium-grey #content {
    background-color: var(--bg-card);
}

/* ============================================
   30. Block styles — gecombineerde heading stijlen
   ============================================ */

/* Gunplay — Oranje */
.wp-block-heading.is-style-gunplay-orange {
    font-family: 'Gunplay', sans-serif !important;
    font-weight: normal !important;
    color: var(--text-orange) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
}

/* Gunplay — Muted */
.wp-block-heading.is-style-gunplay-muted {
    font-family: 'Gunplay', sans-serif !important;
    font-weight: normal !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
}

/* Quicksand — Wit */
.wp-block-heading.is-style-quicksand-white {
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text-light) !important;
    text-transform: none;
    letter-spacing: normal;
}

/* Quicksand — Oranje */
.wp-block-heading.is-style-quicksand-orange {
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text-orange) !important;
    text-transform: none;
    letter-spacing: normal;
}

/* Quicksand — Muted */
.wp-block-heading.is-style-quicksand-muted {
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: none;
    letter-spacing: normal;
}

/* Paragraph — kleuren */
.wp-block-paragraph.is-style-text-white {
    color: var(--text-light) !important;
}

.wp-block-paragraph.is-style-text-orange {
    color: var(--text-orange) !important;
}

.wp-block-paragraph.is-style-text-muted {
    color: var(--text-muted) !important;
}

/* ============================================
   31. Dark page templates — paginatitel verbergen
   ============================================ */
body.vg-page-black .entry-title,
body.vg-page-dark-grey .entry-title,
body.vg-page-medium-grey .entry-title {
    display: none;
}

/* Cart/checkout paginatitel — handmatig gerenderd via page-cart-checkout.php */
.vg-page-inner .vg-cart-checkout-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    color: var(--text-light);
    font-size: 2rem;
    letter-spacing: normal;
    text-transform: none;
    margin: 2rem 0 1.5rem 0;
    padding: 0;
}

/* ============================================
   31. Categoriepagina achtergrond
   ============================================ */
body.tax-product_cat {
    background-color: var(--bg-category) !important;
}

body.tax-product_cat #page,
body.tax-product_cat #content,
body.tax-product_cat .site-main {
    background-color: var(--bg-category) !important;
}

/* ============================================
   32. Shop pagina padding
   ============================================ */
/* Shop-overzichtspagina: zelfde padding-top als custom page templates */
.woocommerce-shop .site-main {
    padding-top: 1.5rem;
}

/* Ruimte tussen paginatitel en eerste alinea */
.woocommerce-shop h1.page-title {
    margin-bottom: 1.5rem;
}

/* ============================================
   33. Currency tooltip in mobiel menu
   ============================================ */
.vg-currency-info--mobile {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    cursor: pointer;
    color: var(--text-orange);
    font-size: 0.9rem;
    position: relative;
}

.vg-currency-info--mobile .vg-currency-tooltip {
    position: absolute;
	top: initial;
	right: initial;
	bottom: 32px;
	left: -136px; /* De helft van de breedte (240px) plus 16px */
    display: none;
    font-size: 0.9rem;
    white-space: normal;
    word-wrap: break-word;
    border-radius: 2px;
}

.vg-currency-info--mobile:hover .vg-currency-tooltip {
    display: block;
}

/* Wrapper zodat tooltip onder de switcher+icoon valt */
.vg-mobile-currency {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* ============================================
   34. Productpagina — achtergrond wisselaar
   Wordt gestuurd door VG_PRODUCT_BG in functions.php (sectie 00)
   'dark'  → body.vg-product-bg-dark
   'light' → body.vg-product-bg-light
   ============================================ */

/* ── DARK modus ── */
body.vg-product-bg-dark.single-product,
body.vg-product-bg-dark.single-product #page,
body.vg-product-bg-dark.single-product #content,
body.vg-product-bg-dark.single-product .content-area,
body.vg-product-bg-dark.single-product #primary,
body.vg-product-bg-dark.single-product .site-main,
body.vg-product-bg-dark.single-product .vg-product-root {
    background-color: var(--bg-product) !important;
}

body.vg-product-bg-dark .vg-product-root h1.product_title {
    color: var(--text-light) !important;
}

body.vg-product-bg-dark .vg-product-root p.price,
body.vg-product-bg-dark .vg-product-root span.price {
    color: var(--text-orange) !important;
}

body.vg-product-bg-dark .vg-product-root .woocommerce-product-details__short-description,
body.vg-product-bg-dark .vg-product-root .woocommerce-product-details__short-description p,
body.vg-product-bg-dark .vg-product-root .woocommerce-product-details__short-description li {
    color: var(--text-muted) !important;
}

body.vg-product-bg-dark .vg-product-root .product_meta {
    color: var(--text-muted) !important;
    border-top-color: rgba(255,255,255,0.08) !important;
}

body.vg-product-bg-dark .vg-product-root .product_meta a {
    color: var(--text-orange) !important;
}

/* Tabs op donkere achtergrond */
/* ── Tabs wrapper — Storefront override ── */
.single-product .woocommerce-tabs.wc-tabs-wrapper,
.single-product div.product .woocommerce-tabs.wc-tabs-wrapper {
    padding: 0 !important;
    background-color: transparent !important;
    clear: both;
}

.single-product .woocommerce-tabs .panel,
.single-product div.product .woocommerce-tabs .panel {
    background-color: transparent !important;
    padding-left: var(--product-tabs-padding-sides) !important;
    padding-right: var(--product-tabs-padding-sides) !important;
    margin: 0 !important;
}

/* Ruimte tussen foto en summary */
.vg-product-gallery-wrap {
    margin-bottom: var(--product-summary-gap) !important;
}

/* Padding rondom layout */
.vg-product-root {
    padding: var(--product-layout-padding);
}

body.vg-product-bg-dark .woocommerce-tabs ul.tabs {
    background-color: var(--bg-product) !important;
}

body.vg-product-bg-dark .woocommerce-tabs ul.tabs li a {
    color: var(--text-muted) !important;
}

body.vg-product-bg-dark .woocommerce-tabs ul.tabs li.active a {
    color: var(--text-light) !important;
}

body.vg-product-bg-dark .woocommerce-tabs .panel {
    background-color: var(--bg-product) !important;
    color: var(--text-light) !important;
}

body.vg-product-bg-dark .woocommerce-tabs .panel h2,
body.vg-product-bg-dark .woocommerce-tabs .panel h3 {
    color: var(--text-light) !important;
}

body.vg-product-bg-dark .woocommerce-tabs .panel p,
body.vg-product-bg-dark .woocommerce-tabs .panel li {
    color: var(--text-muted) !important;
}

/* ── LIGHT modus ── */
body.vg-product-bg-light.single-product,
body.vg-product-bg-light.single-product #page,
body.vg-product-bg-light.single-product #content,
body.vg-product-bg-light.single-product .site-main,
body.vg-product-bg-light.single-product .vg-product-root {
    background-color: #ffffff !important;
}

body.vg-product-bg-light .vg-product-root h1.product_title {
    color: #1E1E1E !important;
}

body.vg-product-bg-light .vg-product-root p.price,
body.vg-product-bg-light .vg-product-root span.price {
    color: var(--text-orange) !important;
}

body.vg-product-bg-light .vg-product-root .woocommerce-product-details__short-description,
body.vg-product-bg-light .vg-product-root .woocommerce-product-details__short-description p,
body.vg-product-bg-light .vg-product-root .woocommerce-product-details__short-description li {
    color: #444444 !important;
}

body.vg-product-bg-light .vg-product-root .product_meta {
    color: #666666 !important;
    border-top-color: rgba(0,0,0,0.1) !important;
}

body.vg-product-bg-light .vg-product-root .product_meta a {
    color: var(--text-orange) !important;
}

/* Sidebar altijd donker, ongeacht product achtergrond */
.vg-product-sidebar {
    background-color: var(--bg-card);
}

/* ============================================
   35. Productpagina — grid layout & sidebar stijl
   ============================================ */

/* ── Productpagina spacing — pas hier aan ──
   Verander de waarden om padding/marges te testen
   ─────────────────────────────────────────── */
:root {
    --product-tabs-padding-top:    0px;    /* ruimte boven description/tabs blok */
    --product-tabs-padding-sides:  0px;    /* links/rechts padding tabs inhoud */
    --product-summary-gap:         1.5rem; /* ruimte tussen foto en summary */
    --product-layout-padding:      2rem;   /* padding rondom hele product layout */
    --product-content-padding-left: 1rem;  /* ← links uitlijnen: foto, summary én description */
}

/* ── Storefront float-reset ── */
.single-product .woocommerce div.product {
    display: block;
}

.single-product .woocommerce div.product::after {
    display: none;
}

/* ── Hoofd-grid: sidebar | main ── */
.vg-product-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 3rem;
}

/* Sidebar leeg → grid wordt 1 kolom */
.vg-product-layout:has(.vg-product-sidebar:empty) {
    grid-template-columns: 1fr;
}

.vg-product-sidebar:empty {
    display: none;
}

/* ── Kolom 2: foto boven summary ── */
.vg-product-main {
    display: block;
    min-width: 0;
    width: 100%;
}

.vg-product-gallery-wrap {
    width: 100%;
    display: block;
}

/* Reset Storefront float op de gallery */
.single-product .woocommerce div.product div.woocommerce-product-gallery,
.single-product .vg-product-main .woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
    margin-bottom: 2rem;
    display: block;
}

.single-product .woocommerce-product-gallery__wrapper {
    width: 100% !important;
}

.single-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* Reset Storefront float op de summary */
.single-product .woocommerce div.product .entry-summary,
.single-product .vg-product-main .entry-summary {
    float: none !important;
    width: 100% !important;
    clear: none !important;
    padding: 0 !important;
    display: block;
}

/* Tabs wrapper en panels: volle breedte, geen offset */
.single-product .vg-product-main .woocommerce-tabs.wc-tabs-wrapper,
.single-product .vg-product-main div.woocommerce-tabs {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    display: block;
}

/* Tab panels zelfde breedte als entry-summary */
.single-product .vg-product-main .woocommerce-Tabs-panel,
.single-product .vg-product-main .panel.entry-content.wc-tab {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block;
}

/* Verberg WooCommerce flexslider — geen ruimte innemen, thumbnails blijven zichtbaar */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    visibility: hidden !important;
}

/* ── Sidebar ── */
.vg-product-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
}

.vg-sidebar-inner {
    background-color: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 1rem;
}

.vg-sidebar-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-orange);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.vg-sidebar-scroll {
    /* max-height wordt door JS ingesteld op basis van .vg-product-main hoogte */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vg-sidebar-scroll::-webkit-scrollbar {
    display: none;
}

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

.vg-sidebar-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.vg-sidebar-item:last-child {
    border-bottom: none;
}

.vg-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    text-decoration: none;
    color: var(--text-light);
    transition: color 0.15s ease;
}

.vg-sidebar-link:hover {
    color: var(--text-orange);
}

/* Foto 3:2 */
.vg-sidebar-img-wrap {
    flex-shrink: 0;
    width: 90px;
    position: relative;
    padding-top: calc(90px * 2/3);
    overflow: hidden;
    background-color: rgba(255,255,255,0.04);
}

.vg-sidebar-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.vg-sidebar-name {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
    flex: 1;
}

/* ── Pijl knoppen ── */
.vg-sidebar-arrow {
    display: none; /* Standaard verborgen — JS toont ze als er overflow is */
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.35rem 0;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: var(--text-orange);
    cursor: pointer;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.vg-sidebar-arrow--up {
    border-top: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.vg-sidebar-arrow:hover:not(:disabled) {
    color: var(--accent-hover);
}

.vg-sidebar-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

/* ── Product info styling ── */
.single-product .entry-summary h1.product_title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.single-product .entry-summary .product_meta {
    font-size: 0.85rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top-width: 1px;
    border-top-style: solid;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .vg-product-layout {
        grid-template-columns: 1fr;
    }

    .vg-product-sidebar {
        position: static;
        order: 2;
    }

    .vg-product-main {
        order: 1;
    }

    .vg-sidebar-scroll {
        max-height: 260px;
    }

}

@media (max-width: 640px) {
    .vg-product-layout {
        gap: 1.5rem;
    }

    .vg-sidebar-img-wrap {
        width: 70px;
        padding-top: calc(70px * 2/3);
    }
}

/* ============================================
   36. Product gallery — Splide slider
   ============================================ */

/* Verberg pagination bolletjes/balken */
.vg-product-splide .splide__pagination {
    display: none !important;
}

/* ── Chevron pijlen ── */
.vg-product-splide {
    position: relative;
}

.vg-product-splide .splide__arrow {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Splide pijlen — oranje SVG zichtbaar */
.vg-product-splide .splide__arrow svg {
    fill: var(--accent) !important;
    width: 28px !important;
    height: 28px !important;
    color: var(--accent) !important;
}

.vg-product-splide .splide__arrow:hover svg {
    fill: var(--accent-hover) !important;
}

.vg-product-splide .splide__arrow--prev {
    left: 0;
    right: auto;
}

.vg-product-splide .splide__arrow--prev svg {
    transform: scaleX(-1);
}

.vg-product-splide .splide__arrow--next {
    right: 0;
    left: auto;
}

/* Padding tussen foto en thumbnails */
.vg-product-splide {
    margin-bottom: 0.75rem;
}

/* Portrait foto's volledig zichtbaar — hoogte begrensd op img zelf */
.vg-product-splide .splide__slide img {
    width: 100%;
    max-height: 580px;
    object-fit: contain;
    display: block;
}

/* Maximale hoogte slider — voorkomt dat portrait foto's de pagina oprekken */
.vg-product-splide .splide__slide {
    max-height: 580px;
    overflow: hidden;
}

/* ── GLightbox img: volledige breedte zodat zoom correct werkt ── */
.glightbox-container .gslide-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* ── PhotoSwipe lightbox — oranje chevron pijlen ── */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    background-color: transparent !important;
    width: 44px !important;
    height: 44px !important;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    display: none !important;
}

button.pswp__button--arrow--right,
button.pswp__button--arrow--right:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF722F' d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 44px 44px !important;
}

button.pswp__button--arrow--left,
button.pswp__button--arrow--left:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF722F' d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 44px 44px !important;
}

/* ── Storefront product paginering — prev rechts, next links ── */
/* prev krijgt next-gedrag: schuift van rechts naar binnen */
.storefront-product-pagination a[rel="prev"] {
    left: auto !important;
    right: -455px !important;
    transition: right 0.3s ease-in !important;
    flex-direction: row !important;
    padding-left: 0 !important;
    padding-right: 1em !important;
}

.storefront-product-pagination a[rel="prev"]:hover {
    left: auto !important;
    right: 0 !important;
}

.storefront-product-pagination a[rel="prev"] img {
    margin-left: 0 !important;
    margin-right: 1.41575em !important;
}

.storefront-product-pagination a[rel="prev"] .storefront-product-pagination__title {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* next krijgt prev-gedrag: schuift van links naar binnen */
.storefront-product-pagination a[rel="next"] {
    right: auto !important;
    left: -455px !important;
    transition: left 0.3s ease-out !important;
    flex-direction: row-reverse !important;
    padding-right: 0 !important;
    padding-left: 1em !important;
}

.storefront-product-pagination a[rel="next"]:hover {
    right: auto !important;
    left: 0 !important;
}

.storefront-product-pagination a[rel="next"] img {
    margin-right: 0 !important;
    margin-left: 1.41575em !important;
}

.storefront-product-pagination a[rel="next"] .storefront-product-pagination__title {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ============================================
   37. Vraag-knop op productpagina
   Ghost stijl: transparante achtergrond, oranje rand
   ============================================ */
.vg-question-btn {
    display: inline-block;
    width: auto;
    margin-top: 0.75rem;
    padding: 12px 32px;
    background-color: transparent !important;
    color: var(--accent) !important;
    border: 2px solid var(--accent) !important;
    border-radius: 0;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.vg-question-btn:hover {
    background-color: var(--accent) !important;
    color: var(--text-light) !important;
}

/* ============================================
   38. Productpagina — informatietekst valuta & douane
   ============================================ */
.vg-product-info-text {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vg-product-info-currency,
.vg-product-info-customs {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

.vg-product-info-customs strong {
    color: var(--text-light);
}

/* ============================================
   39. Productpagina — Description heading verbergen
   Content blijft in DOM voor SEO, alleen visueel verborgen
   ============================================ */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description > h2:first-child {
    display: none;
}

/* ============================================
   40. Checkout — phone validatie foutmelding
   ============================================ */

/* Phone inline validatie — zelfde stijl als WooCommerce eigen veldfouten */
#vg-phone-error {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.875rem;
    color: var(--text-light);
    margin-top: 4px;
}

#vg-phone-error::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='white'/%3E%3Cpath d='M12 8v4m0 4h.01' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}


    background-color: unset !important;
}

/* Originele SVG verbergen */
.wc-block-components-notice-banner.is-error svg,
.wc-block-store-notice.is-error svg,
.wc-block-components-notice-banner.is-warning svg,
.wc-block-store-notice.is-warning svg {
    display: none !important;
}

/* Custom SVG via pseudo-element — oranje cirkel, wit uitroepteken */
.wc-block-components-notice-banner.is-error::before,
.wc-block-store-notice.is-error::before,
.wc-block-components-notice-banner.is-warning::before,
.wc-block-store-notice.is-warning::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23FF722F'/%3E%3Crect x='11' y='7' width='2' height='2' fill='white'/%3E%3Crect x='11' y='11' width='2' height='6' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 12px;
}

/* ============================================
   42. Cart — lege winkelwagen knop
   ============================================ */

/* "Browse store" knop — breedte beperken */
.wc-block-cart__empty-cart__title ~ a.wp-element-button,
.wc-empty-cart-message + a,
.woocommerce-cart .return-to-shop .wc-backward,
.wp-block-woocommerce-empty-cart-block a.wp-element-button {
    display: inline-block !important;
    width: auto !important;
    padding: 12px 32px !important;
    border-radius: 4px !important;
}

/* ============================================
   43. Notices — "Added to Cart" en "Pending"
   Vervangt WooCommerce groen/blauw door thema-stijl
   ============================================ */

/* "Added to Cart" melding (klassieke WC notice, productpagina) */
.woocommerce-message,
.wc-block-components-notice-banner.is-success,
.wc-block-store-notice.is-success {
    background-color: #1E1E1E !important;
    border-color: var(--text-orange) !important;
    border-width: 1px !important;
    color: var(--text-light) !important;
    box-shadow: none !important;
}

/* Verberg origineel groen vinkje-icoon */
.woocommerce-message::before,
.wc-block-components-notice-banner.is-success svg,
.wc-block-store-notice.is-success svg {
    display: none !important;
}

/* "Pending / info" melding (bijv. thankyou-pagina na PayPal) */
.wc-block-components-notice-banner.is-info,
.wc-block-store-notice.is-info,
.woocommerce-info {
    background-color: #1E1E1E !important;
    border-color: var(--text-orange) !important;
    border-width: 1px !important;
    color: var(--text-light) !important;
    box-shadow: none !important;
}

/* Verberg origineel blauw info-icoon */
.wc-block-components-notice-banner.is-info svg,
.wc-block-store-notice.is-info svg,
.woocommerce-info::before {
    display: none !important;
}

/* ============================================
   45. Productgalerie — thumbnail grid
   WooCommerce berekent width en margin-right dynamisch
   op basis van aantal thumbnails, wat leidt tot ongelijke
   horizontale en verticale spacing. Override naar 5 kolommen
   met consistente gap aan alle kanten.
   ============================================ */

.single-product div.product
.woocommerce-product-gallery
.flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
}

/* Neutraliseer WooCommerce clearfix — display:table op ::before veroorzaakt offset */
.single-product div.product
.woocommerce-product-gallery
.flex-control-thumbs::before,
.single-product div.product
.woocommerce-product-gallery
.flex-control-thumbs::after {
    display: none !important;
}

.single-product div.product
.woocommerce-product-gallery
.flex-control-thumbs li {
    width: calc(20% - 7px) !important; /* 5 kolommen met gap van 8px */
    float: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
}

.single-product div.product
.woocommerce-product-gallery
.flex-control-thumbs li img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Voorkom dat onload handler de active thumbnail buiten zijn li duwt */
.single-product div.product
.woocommerce-product-gallery
.flex-control-thumbs li {
    overflow: hidden !important;
}

/* nth-child clear override — WooCommerce zet clear:both op elke 4n+1,
   dit gooit de eerste thumbnail van elke rij naar links bij flexbox.
   Reset naar 5 kolommen. */
.single-product div.product
.woocommerce-product-gallery
.flex-control-thumbs li:nth-child(4n+1) {
    clear: none !important;
}

/* Active thumbnail — zelfde opacity als de rest, Splide regelt highlighting via JS */
.single-product div.product
.woocommerce-product-gallery
.flex-control-thumbs li img {
    opacity: 0.5 !important;
    transition: opacity 0.2s ease !important;
}

.single-product div.product
.woocommerce-product-gallery
.flex-control-thumbs li img.flex-active {
    opacity: 1 !important;
}

/* ============================================
   46. Cart & Checkout — BTW breakdown opmaak
   Vervangt "Including €X VAT" door opgesplitste
   weergave: excl. bedrag + % + BTW-bedrag
   ============================================ */

.vg-tax-breakdown {
    display: block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    font-family: 'Quicksand', sans-serif;
}

/* ============================================
   47. Cart — short description verbergen
   De korte beschrijving staat als bullet lijst
   onder de productnaam in de block cart.
   ============================================ */

/* Cart pagina — short description bullets verbergen */
.wc-block-cart-item__description,
.wc-block-components-product-details {
    display: none !important;
}

/* Classic checkout order review — short description verbergen */
.woocommerce-checkout-review-order-table .product-name ul,
.woocommerce-checkout-review-order-table .product-name p {
    display: none !important;
}

/* ============================================
   48. Classic checkout — layout, volgorde en opmaak
   Gebaseerd op de werkelijke HTML structuur.
   Volgorde: Contact info → Shipping address → Shipping options
             → Order summary → Payment options → T&C → Buttons
   ============================================ */

/* ── Pagina-breedte ──────────────────────────────────── */
body.woocommerce-checkout .vg-page-inner {
    max-width: 620px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* ── col2-set: één kolom, alleen col-1 (billing) zichtbaar ── */
.woocommerce-checkout #customer_details {
    float: none !important;
    width: 100% !important;
}

.woocommerce-checkout .col2-set {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

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

/* col-2 initieel verborgen via CSS — JS verplaatst en toont hem */
.woocommerce-checkout .col2-set .col-2 {
    display: none;
}

/* ── Koppen (WooCommerce + geïnjecteerde) ────────────── */
.woocommerce-checkout h3,
.woocommerce-checkout .vg-injected-heading {
    font-family: 'Quicksand', sans-serif !important;
    color: var(--accent) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 28px 0 12px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Eerste kop geen margin-top */
.woocommerce-checkout .woocommerce-billing-fields > h3:first-child {
    margin-top: 0 !important;
}

/* ── "Ship to a different address?" toggle ───────────── */
/* col-2 wordt via JS verplaatst naar vlak voor #order_review */
.woocommerce-checkout h3#ship-to-different-address {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 0 0 0 !important;
    padding: 14px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 10px !important;
}

.woocommerce-checkout h3#ship-to-different-address label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 !important;
}

/* Checkbox zelf — oranje accent */
.woocommerce-checkout h3#ship-to-different-address input[type="checkbox"] {
    accent-color: var(--accent) !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* ── Veldstijlen ─────────────────────────────────────── */
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0 !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.95rem !important;
    padding: 9px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: none !important;
}

.woocommerce-checkout label {
    color: rgba(255, 255, 255, 0.65) !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.woocommerce-checkout .required { color: var(--accent) !important; }

/* Dropdown pijl */
.woocommerce-checkout select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    appearance: none !important;
    padding-right: 36px !important;
}

/* Placeholder tekst */
.woocommerce-checkout .input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Field wrapper als flex-grid voor first/last name naast elkaar */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.woocommerce-billing-fields__field-wrapper::after,
.woocommerce-shipping-fields__field-wrapper::after {
    display: none !important;
}

/* form-row-first en form-row-last naast elkaar */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    flex: 0 0 calc(50% - 6px) !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Brede velden nemen volle breedte */
.woocommerce-checkout .form-row-wide {
    flex: 0 0 100% !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Foutmeldingen */
.woocommerce-checkout .woocommerce-error {
    background: rgba(255, 60, 60, 0.08) !important;
    border: 1px solid rgba(255, 80, 80, 0.35) !important;
    border-left: 3px solid #ff5555 !important;
    color: #ff8888 !important;
    padding: 10px 14px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.88rem !important;
    list-style: none !important;
    margin-bottom: 16px !important;
}

.woocommerce-checkout .woocommerce-invalid input.input-text {
    border-color: #ff5555 !important;
}

/* ── Order notes ─────────────────────────────────────── */
.woocommerce-additional-fields {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.woocommerce-additional-fields h3 {
    display: none !important;
}
.woocommerce-additional-fields textarea {
    min-height: 72px !important;
    resize: vertical !important;
}

/* ── Order review heading verbergen (vervangen door geïnjecteerde kop) ── */
#order_review_heading {
    display: none !important;
}

/* ── "Please check your order" melding ───────────────── */
.vg-checkout-review-notice {
    display: none !important;
}

/* ── Order summary container — geen achtergrond/border ── */
#order_review.woocommerce-checkout-review-order {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Order summary tabel — wél achtergrond/border ───── */
.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: 'Quicksand', sans-serif !important;
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    margin-bottom: 0 !important;
}

.woocommerce-checkout-review-order-table thead { display: none !important; }

/* Product rijen */
.woocommerce-checkout-review-order-table tbody tr.cart_item td {
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    vertical-align: middle !important;
    background-color: transparent !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
}

/* product-name td pakt alle beschikbare ruimte, prijs krimpt naar inhoud */
.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name {
    width: auto !important;
}
.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total {
    width: 1% !important;
    white-space: nowrap !important;
    padding-left: 24px !important;
}

.woocommerce-checkout-review-order-table .product-total {
    text-align: right !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Footer rijen */
.woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout-review-order-table tfoot tr td {
    padding: 9px 20px !important;
    border-bottom: none !important;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
}

.woocommerce-checkout-review-order-table tfoot tr td {
    width: 1% !important;
    white-space: nowrap !important;
    text-align: right !important;
    padding-left: 24px !important;
}

/* Scheidingslijn vóór subtotaal */
.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 12px !important;
}

/* Totaal rij */
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--accent) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    padding-top: 12px !important;
    padding-bottom: 16px !important;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount {
    color: var(--accent) !important;
}

/* ── Order summary short description verbergen ───────── */
.woocommerce-checkout-review-order-table .product-name ul,
.woocommerce-checkout-review-order-table .product-name p {
    display: none !important;
}

/* ── Product blok (eigen div, los van tabel) ─────────── */
.vg-order-products {
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
}

.vg-order-product-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vg-order-product-price {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    color: #ffffff;
    font-size: 0.88rem;
}

/* ── Thumbnail (via JS) ───────────────────────────────── */
.vg-order-thumb-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 72px;
    height: 48px;
    margin-right: 12px;
    vertical-align: middle;
}
.vg-order-thumb-wrap img {
    width: 72px !important;
    height: 48px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #111 !important;
    border: 1px solid rgba(255, 114, 47, 0.2) !important;
    border-radius: 3px !important;
    display: block !important;
}
.vg-order-qty-badge {
    position: absolute;
    top: -5px; right: -5px;
    background: var(--accent);
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vg-order-product-info {
    flex: 1 1 0;
    min-width: 0;
}
.vg-order-product-name {
    display: block;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}
.vg-order-unit-price {
    display: block;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.42);
    margin-top: 2px;
}

/* ── Payment blok — via JS verplaatst na order tabel ─── */
#payment.woocommerce-checkout-payment {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* "Payment options" kop via ::before */
#payment.woocommerce-checkout-payment::before {
    content: 'Payment options';
    display: block;
    font-family: 'Quicksand', sans-serif;
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 28px 0 12px;
}

#payment ul.payment_methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
}

#payment ul.payment_methods li.wc_payment_method {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 3px !important;
    margin: 0 0 8px !important;
    padding: 12px 16px !important;
    background: #1a1a1a !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.88rem !important;
    color: #ffffff !important;
    transition: border-color 0.2s ease !important;
}

/* Geselecteerde methode */
#payment ul.payment_methods li.wc_payment_method:has(input:checked) {
    border-color: var(--accent) !important;
    background: rgba(255, 114, 47, 0.05) !important;
}

#payment ul.payment_methods li input[type="radio"] {
    accent-color: var(--accent) !important;
    width: 15px !important;
    height: 15px !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

#payment ul.payment_methods li label {
    color: #ffffff !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

#payment ul.payment_methods li label img.mollie-gateway-icon {
    height: 18px !important;
    width: auto !important;
}

#payment .payment_box {
    margin: 8px 0 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 3px !important;
    padding: 10px 14px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.82rem !important;
}

/* ── WooCommerce eigen T&C — verbergen ───────────────── */
.woocommerce-terms-and-conditions-wrapper {
    display: none !important;
}

/* ── Onze T&C checkbox ───────────────────────────────── */
#vg-terms-wrap {
    padding: 20px 0 0 !important;
    margin: 0 !important;
}

/* Checkbox + eerste regel naast elkaar */
.vg-terms-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.vg-terms-row input[type="checkbox"] {
    margin-top: 4px !important;
    flex-shrink: 0 !important;
    accent-color: var(--accent) !important;
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
}

.vg-terms-label {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.vg-terms-label a {
    color: var(--accent) !important;
    text-decoration: underline !important;
}

/* Non-EU tekst als eigen alinea onder de checkbox-rij */
#vg-shipping-part {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.65) !important;
    line-height: 1.5 !important;
    margin: 6px 0 0 25px !important;
    padding: 0 !important;
}

#vg-terms-error {
    color: var(--accent);
    font-family: 'Quicksand', sans-serif;
    font-size: 0.82rem;
    margin: 5px 0 0 25px;
    display: none;
}

/* ── Place order balk ────────────────────────────────── */
.form-row.place-order {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

.vg-checkout-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 20px 0 32px !important;
    margin: 0 !important;
}

.vg-return-to-cart {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.42);
    text-decoration: none;
}

.vg-return-to-cart:hover {
    color: rgba(255, 255, 255, 0.75);
}

#place_order {
    background-color: var(--accent) !important;
    color: #ffffff !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 11px 32px !important;
    cursor: pointer !important;
    display: inline-block !important;
    width: auto !important;
    float: none !important;
    align-self: flex-end !important;
}

#place_order:hover {
    background-color: var(--accent-hover) !important;
}

/* ============================================
   49. Cart — betaalmethode-icoontjes verbergen
   (staan al in de footer, dus dubbel in de cart)
   ============================================ */
.wc-block-components-payment-method-icons {
    display: none;
}

/* ============================================
   50. Classic cart — short description, estimated total, thumbnail
   ============================================ */

/* Short description verbergen in block cart */
.wc-block-components-product-metadata__description {
    display: none !important;
}

/* "Estimated total" in block cart — zelfde grootte als overige regels */
.wc-block-components-totals-footer-item {
    font-size: 0.95rem !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--accent) !important;
}

/* Classic cart thumbnail — proportioneel i.p.v. vierkant bijgesneden */
.woocommerce-checkout-review-order-table .cart_item td.product-name img {
    width: 80px !important;
    height: 54px !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 1px solid rgba(255, 114, 47, 0.2) !important;
    border-radius: 3px !important;
    background: #111 !important;
}

/* "Proceed to Checkout" knop — streep verbergen
   Algemene <a> selector zet text-decoration op knoppen die als <a> gerenderd worden */
a.wc-block-cart__submit-button {
    text-decoration: none !important;
}