/* =========================================================================
   Bee Sunnah — design tokens & custom utilities
   1:1 overgenomen uit het Lovable/React-ontwerp (src/styles.css)
   ========================================================================= */

:root {
  --radius: 0.625rem;

  --cream: oklch(0.985 0.005 90);
  --gold: oklch(0.74 0.115 75);
  --gold-soft: oklch(0.88 0.07 80);
  --dark-cocoa: oklch(0.22 0.04 50);
  --forest: oklch(0.34 0.06 150);

  --background: var(--cream);
  --foreground: oklch(0.18 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0 0);
  --primary: var(--gold);
  --primary-foreground: oklch(0.18 0 0);
  --secondary: var(--forest);
  --secondary-foreground: var(--cream);
  --muted: oklch(0.95 0.01 80);
  --muted-foreground: oklch(0.45 0.02 60);
  --accent: var(--gold-soft);
  --accent-foreground: oklch(0.18 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.9 0.01 80);
  --input: oklch(0.9 0.01 80);
  --ring: var(--gold);
}

/* ---- Preflight-compensatie ---------------------------------------------
   De Tailwind-build draait met corePlugins.preflight:false (zie tailwind.config.js)
   om WooCommerce-styling niet te overschrijven. Daardoor ontbreken twee resets die
   de border-utilities nodig hebben:

   1. border-style — Tailwind emit alleen `border-bottom-width:1px` e.d.; de
      browser-default border-style is `none`, dus élke border-utility in dit thema
      was onzichtbaar (filterbalk, zoekveld, trust-bar, productkaarten).
   2. border-width:0 — nodig omdat border-style:solid anders de UA-default breedte
      (medium ≈ 3px) op de overige drie zijden zichtbaar maakt.

   Universele selector = specificiteit 0,0,0, dus élke utility-class (.border-b) en
   elke WooCommerce-regel wint hiervan. Puur een bodem, geen override.
   ------------------------------------------------------------------------ */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border);
}

/* Formuliercontrols erven de UA-font niet automatisch zonder preflight; zonder
   dit renderen knoppen en inputs in het systeemfont i.p.v. DM Sans. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---- Basis -------------------------------------------------------------- */
/* text-size-adjust hoort bij de Tailwind-preflight, die hier uitstaat. Zonder
   deze regel past mobiel Chrome "font boosting" toe: tekst in een volle-breedte
   blok (het mobiele menu) werd fors opgeschaald t.o.v. de opgegeven grootte. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Links erven de kleur van hun context i.p.v. het browser-standaardblauw, en
   dragen geen onderstreping. (De Tailwind-preflight met a{color:inherit;
   text-decoration:inherit} zit niet in deze build, waardoor header-icoontjes en
   footerlinks anders blauw werden en élke link — logo, menu, producttitels op de
   kaarten — onderstreept stond.) Lopende tekst is de uitzondering: .bs-prose a
   zet de onderstreping verderop bewust terug. */
a { color: inherit; text-decoration: none; }

/* Het hidden-attribuut moet altijd verbergen — ook op elementen met een
   display-utility zoals .flex of .bs-cart-count, die anders van display:none wonnen.
   Fixt de verborgen verlanglijst-kaarten en de lege badge-cirkel bij het hart. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  letter-spacing: -0.01em;
}

/* ---- Honingraat-achtergrond -------------------------------------------- */
.honeycomb-bg {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'><g fill='none' stroke='%23C9A24E' stroke-width='1.4' stroke-linejoin='round'><path d='M40 17.32 L30 34.64 L10 34.64 L0 17.32 L10 0 L30 0 Z'/><path d='M70 0 L60 17.32 L40 17.32 L30 0'/><path d='M70 34.64 L60 51.96 L40 51.96 L30 34.64 L40 17.32 L60 17.32 Z'/></g></svg>");
  background-size: 60px 34.64px;
}

/* Verhaalblok: de foto zit in een groene honingraat-lijst, met het bijschrift
   op diezelfde groene ondergrond eronder in plaats van eroverheen.

   Eerder stond het bijschrift over de foto. Zonder foto viel dat mee (het vlak
   was toch een donker verloop), maar op een lichte foto stond "Karpaten ·
   Roemenië" in wit krijt over de bomen. Nu heeft de tekst zijn eigen groene
   strook en blijft de foto ongemoeid. */
.bs-story-frame {
  background-color: var(--forest);
  /* Zelfde raat als .honeycomb-bg, maar met een zachtere lijn: over bosgroen
     is het volle goud te schreeuwerig. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'><g fill='none' stroke='%23C9A24E' stroke-opacity='0.32' stroke-width='1.4' stroke-linejoin='round'><path d='M40 17.32 L30 34.64 L10 34.64 L0 17.32 L10 0 L30 0 Z'/><path d='M70 0 L60 17.32 L40 17.32 L30 0'/><path d='M70 34.64 L60 51.96 L40 51.96 L30 34.64 L40 17.32 L60 17.32 Z'/></g></svg>");
  background-size: 60px 34.64px;
  padding: .85rem;
}

.bs-story-caption {
  padding: 1rem .75rem .5rem;
}

/* Lichte sluier onderaan de foto zodat hij niet hard afgesneden op de groene
   lijst botst, maar er in overloopt. */
.bs-story-veil {
  background:
    linear-gradient(to top,
      color-mix(in oklch, var(--forest) 55%, transparent) 0%,
      color-mix(in oklch, var(--forest) 18%, transparent) 25%,
      transparent 55%);
}

/* ---- Knoppen ------------------------------------------------------------ */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: oklch(0.18 0 0);
  padding: 0.9rem 1.75rem; border-radius: 999px;
  font-weight: 500; letter-spacing: 0.01em;
  transition: all 0.25s ease;
  box-shadow: 0 6px 20px -8px oklch(0.74 0.115 75 / 0.6);
  cursor: pointer; border: none; text-decoration: none;
}
.btn-gold:hover { background: oklch(0.68 0.12 70); transform: translateY(-1px); color: oklch(0.18 0 0); }

.btn-gold-outline {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--gold);
  border: 1.5px solid var(--gold);
  padding: 0.7rem 1.4rem; border-radius: 999px;
  font-weight: 500; transition: all 0.25s ease;
  cursor: pointer; text-decoration: none;
}
.btn-gold-outline:hover { background: var(--gold); color: var(--foreground); }

/* =========================================================================
   WooCommerce — knoppen, formulieren en notices in de huisstijl
   ========================================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
  background: var(--gold) !important;
  color: oklch(0.18 0 0) !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  padding: 0.9rem 1.75rem !important;
  border: none !important;
  box-shadow: 0 6px 20px -8px oklch(0.74 0.115 75 / 0.6);
  transition: all 0.25s ease;
  text-transform: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover {
  background: oklch(0.68 0.12 70) !important;
  transform: translateY(-1px);
}

/* Quantity / inputs */
.woocommerce form .form-row input.input-text,
.woocommerce .quantity input.qty,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

/* Prijzen */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
  color: var(--gold);
  font-family: "Playfair Display", serif;
}

/* Notices in huisstijl */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--gold) !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--gold) !important; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--card);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--gold); }

/* Related / upsell titels */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
}

/* Sale-badge */
.woocommerce span.onsale {
  background: var(--gold);
  color: var(--foreground);
  border-radius: 999px;
}

/* =========================================================================
   Header — sticky balk, icoonknoppen en badges
   (stond eerder als inline <style> in header.php)
   ========================================================================= */
#bs-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklch, var(--background) 90%, transparent);
  backdrop-filter: blur(8px);
  transition: box-shadow .3s ease;
}
#bs-header.bs-scrolled { box-shadow: 0 4px 20px -12px rgba(0, 0, 0, .2); }

#bs-search-toggle,
#bs-menu-toggle { background: transparent; border: 0; cursor: pointer; color: inherit; }

.bs-cart-count {
  position: absolute; top: -2px; right: -2px;
  width: 1.25rem; height: 1.25rem;
  border-radius: 999px;
  background: var(--gold); color: var(--foreground);
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* Skip-link: alleen zichtbaar zodra hij focus krijgt. */
.bs-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--gold); color: var(--foreground);
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}
.bs-skip-link:focus { left: 0; }

/* =========================================================================
   Filterbalk op het shop-archief (categorie- en merk-chips)
   (stond eerder als inline <style> middenin de <body> van archive-product.php)
   ========================================================================= */
.bs-chip {
  display: inline-block;
  font-size: .75rem; font-weight: 500; line-height: 1.2;
  padding: .375rem .875rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: color-mix(in oklch, var(--foreground) 80%, transparent);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bs-chip:hover { border-color: color-mix(in oklch, var(--gold) 55%, var(--border)); }
.bs-chip.bs-chip--active { background: var(--gold); color: var(--foreground); border-color: var(--gold); }

.bs-filter-label {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  margin-right: .25rem;
  color: var(--muted-foreground);
}

/* =========================================================================
   Kleine helpers voor het hoofdmenu (header)
   ========================================================================= */
/* wp_nav_menu rendert <li>-items; Tailwind preflight staat uit, dus reset
   de lijst-opmaak hier zelf (anders verschijnen er bolletjes vóór de items).
   Let op: géén `padding: 0` op .bs-nav zelf. theme.css laadt ná de
   Tailwind-build en heeft dezelfde specificiteit (0,1,0), dus die reset won van
   de `px-6 py-4`-utilities op de mobiele nav — de links plakten tegen de
   schermrand. De reset is alleen nodig voor een echte <ul>. */
.bs-nav { list-style: none; margin: 0; }
.bs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: inherit; }
.bs-nav li { list-style: none; margin: 0; padding: 0; }
.bs-nav li::marker { content: none; }

/* De onderstreping is al site-breed weg via de `a`-basisregel hierboven; goud
   bij hover is het enige bedoelde signaal in de navigatie. */
.bs-nav a { color: var(--foreground); transition: color .2s ease; }
.bs-nav a:hover,
.bs-nav .current-menu-item > a,
.bs-nav .current_page_item > a { color: var(--gold); }

/* ---- Mobiel uitklapmenu -------------------------------------------------
   Volle-breedte rijen in plaats van een stapel losse tekstlinks: elk item is
   een tikdoel van ~48px met een scheidingslijn, en de actieve pagina krijgt een
   gouden accentrand. */
#bs-mobile-menu { display: none; box-shadow: 0 14px 28px -22px rgba(0, 0, 0, .45); }
#bs-mobile-menu.open { display: block; animation: bs-menu-in .2s ease-out; }

@keyframes bs-menu-in {
  from { opacity: 0; transform: translateY(-.5rem); }
  to   { opacity: 1; transform: none; }
}

.bs-mobile-nav { display: flex; flex-direction: column; padding: .25rem 0; }

.bs-mobile-nav a {
  display: block;
  padding: .875rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 65%, transparent);
  transition: background-color .15s ease, color .15s ease;
}
.bs-mobile-nav > :last-child a { border-bottom: 0; }
.bs-mobile-nav a:hover,
.bs-mobile-nav a:focus-visible { background: var(--muted); }

.bs-mobile-nav .current-menu-item > a,
.bs-mobile-nav .current_page_item > a {
  color: var(--gold);
  box-shadow: inset 3px 0 0 var(--gold);
}

/* Account-blok onder de menulinks: zelfde rijen, maar met een kopje erboven en
   een zwaardere scheiding zodat het losstaat van de navigatie. */
.bs-mobile-account {
  border-top: 1px solid var(--border);
  padding-top: .5rem;
}
.bs-mobile-account-label {
  display: block;
  padding: .75rem 1.5rem .25rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* Icoonwissel op de hamburgerknop: theme.js zet al aria-expanded, dus de CSS
   kan daar rechtstreeks op sturen zonder extra class. */
#bs-menu-toggle .bs-icon-close { display: none; }
#bs-menu-toggle[aria-expanded="true"] .bs-icon-menu { display: none; }
#bs-menu-toggle[aria-expanded="true"] .bs-icon-close { display: block; }

@media (prefers-reduced-motion: reduce) {
  #bs-mobile-menu.open { animation: none; }
}

/* Het mobiele menu mag nooit op desktop blijven staan: .open (ID-specificiteit)
   versloeg anders de `md:hidden`-utility, waardoor het menu zichtbaar bleef als je
   het op mobiel opende en daarna het venster verbreedde. */
@media (min-width: 768px) {
  #bs-mobile-menu,
  #bs-mobile-menu.open { display: none; }
}

/* Footer-linklijsten: zonder preflight houden ze bolletjes en UA-inspringing. */
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================================================================
   Productraster — WooCommerce ul.products als CSS-grid
   Compacter, tot 4 kaarten per rij op brede schermen.
   ========================================================================= */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
.woocommerce ul.products li.product::before { display: none; }

/* WooCommerce voegt een clearfix-::before/::after toe aan ul.products. In een
   CSS-grid tellen die pseudo-elementen als griditems en laten ze de eerste
   kolom leeg. Uitschakelen zodat de kaarten netjes vanaf links vullen. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none !important; display: none !important; }

/* Productkaart-titels zijn links; zonder Tailwind-reset worden die blauw.
   Forceer de tekstkleur (donker), met goud bij hover. */
.woocommerce ul.products li.product h2 a,
.woocommerce ul.products li.product h2 a:visited,
main#primary article h2 a,
main#primary article h3 a {
  color: var(--foreground);
  text-decoration: none;
}
.woocommerce ul.products li.product h2 a:hover,
main#primary article h2 a:hover,
main#primary article h3 a:hover { color: var(--gold); }

/* Compactere "In winkelwagen"-knop binnen de productkaart (de standaard
   .btn-gold/WooCommerce-knop is te groot voor het smallere 4-koloms raster).
   `.bs-card-cart` staat er los bij omdat de kaart op de homepage buiten
   `.woocommerce ul.products` valt en die selector daar dus niet greep. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.bs-card-cart {
  padding: 0.5rem 1.1rem !important;
  font-size: 0.8rem !important;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 4px 14px -8px oklch(0.74 0.115 75 / 0.6);
}

/* Kaartvoet: prijs links, knop rechts — maar alleen zolang ze naast elkaar
   passen. Op mobiel staan de kaarten in twee kolommen van ~170px; daar was de
   knop (white-space: nowrap) breder dan de ruimte die overbleef en schoof hij
   dwars over de prijs heen. Vandaar `flex-wrap`: past de knop niet, dan zakt
   hij naar een eigen regel in plaats van de prijs te overlappen. */
.bs-card-foot { flex-wrap: wrap; }

@media (max-width: 640px) {
  .bs-card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .bs-card-foot .bs-card-cart { width: 100%; }
}

/* De prijs mag krimpen zodat de knop op één regel past; hij is korter dan de
   knop en anders duwt de langste van de twee de kaart uit model. */
.bs-card-price { min-width: 0; }
.bs-card-price .bs-price-from {
  display: inline-block;
  margin-right: .15em;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* =========================================================================
   Pagina-inhoud (block editor / the_content) — leesbare typografie
   ========================================================================= */
.bs-prose { color: var(--foreground); line-height: 1.75; }
.bs-prose h2 { font-family: "Playfair Display", serif; font-size: 2rem; margin: 2rem 0 1rem; }
.bs-prose h3 { font-family: "Playfair Display", serif; font-size: 1.5rem; margin: 1.5rem 0 .75rem; }
.bs-prose p { margin: 0 0 1.25rem; color: var(--muted-foreground); }
.bs-prose a { color: var(--gold); text-decoration: underline; }
.bs-prose ul, .bs-prose ol { margin: 0 0 1.25rem 1.25rem; color: var(--muted-foreground); }
.bs-prose img { border-radius: var(--radius); }

/* Tabellen in lopende tekst (verwerkingsdoelen in de privacyverklaring).
   De wrapper scrollt in plaats van de pagina: een tabel van drie kolommen
   past op 360px niet, en een horizontaal schuivende pagina maakt de rest van
   de tekst onleesbaar. min-width dwingt af dat de kolommen niet tot één
   letter per regel worden samengeknepen voordat het scrollen begint. */
.bs-table-scroll { overflow-x: auto; margin: 0 0 1.25rem; -webkit-overflow-scrolling: touch; }
.bs-prose table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .95rem; }
.bs-prose th, .bs-prose td { text-align: left; vertical-align: top; padding: .75rem .9rem; border-bottom: 1px solid var(--border); }
.bs-prose th { font-weight: 600; color: var(--foreground); background: color-mix(in oklch, var(--gold) 8%, transparent); }
.bs-prose td { color: var(--muted-foreground); }
.bs-prose tbody tr:last-child th, .bs-prose tbody tr:last-child td { border-bottom: 0; }

/* Single-product gallery & tabs in de huisstijl */

/* WooCommerce' eigen twee-koloms floatlayout uitschakelen.
   woocommerce-layout.css zet vanaf 620px (38.75em):
       div.product div.images  { float: left;  width: 48% }
       div.product div.summary { float: right; width: 46.42857% }
   single-product.php plaatst gallerij en samenvatting al elk in hun eigen
   CSS-grid-kolom (`grid lg:grid-cols-2`). Die 48% kwam daar dus bovenop: beide
   vulden nog maar de helft van hun kolom. Zichtbaar als een onnodig kleine
   productfoto met een gat ernaast, en een titel die over drie regels brak.
   !important is nodig — WooCommerce' selector is specifieker dan deze. */
.bs-gallery .woocommerce-product-gallery,
.product > .summary.entry-summary {
	width: 100% !important;
	float: none !important;
}

.bs-gallery .woocommerce-product-gallery { margin: 0 !important; }
.bs-gallery .woocommerce-product-gallery__image img { border-radius: 1rem; box-shadow: 0 20px 60px -30px rgba(0,0,0,.35); }

/* Naast de samenvatting oogde de foto op desktop wat te dominant: hij vulde zijn
   hele gridkolom, terwijl de tekst ernaast pas halverwege begon. Een lichte
   inhouding (88%) laat de verhouding kloppen zonder de foto klein te maken.
   Alleen vanaf lg — daaronder staat de gallerij boven de tekst en mag hij
   de volle breedte houden. */
@media (min-width: 1024px) {
	.bs-gallery { max-width: 88%; }
}

/* Gallerij-thumbnails: WooCommerce geeft ze een float-grid met eigen breedtes.
   Een rustig flex-rijtje past beter bij de kaartstijl en houdt ze klikbaar. */
.bs-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: .75rem 0 0;
	padding: 0;
	list-style: none;
}
.bs-gallery .flex-control-thumbs li { width: auto; float: none; margin: 0; list-style: none; }
.bs-gallery .flex-control-thumbs img {
	width: 5rem; height: 5rem;
	object-fit: cover;
	border-radius: .5rem;
	opacity: .65;
	cursor: pointer;
	transition: opacity .2s ease, box-shadow .2s ease;
}
.bs-gallery .flex-control-thumbs img:hover,
.bs-gallery .flex-control-thumbs img.flex-active { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
.bs-product-tabs .woocommerce-Tabs-panel h2 { font-family: "Playfair Display", serif; }
.bs-product-tabs .panel { color: var(--muted-foreground); line-height: 1.75; }

/* Producttabs (Beschrijving / Aanvullende informatie / Beoordelingen).
   WooCommerce' eigen frontend-CSS en -JS worden hier niet geladen, dus stond
   de tablijst er als kale opsomming bij en verschenen alle panelen onder
   elkaar. Vormgeving en schakelen doet het thema nu zelf; theme.js zet
   `.bs-tabs-ready` op de wrapper. Zonder JS blijft alles zichtbaar — dan is
   het lelijk maar wel volledig, in plaats van onbereikbaar. */
.bs-product-tabs .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--border);
}
.bs-product-tabs .wc-tabs li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bs-product-tabs .wc-tabs li a {
	display: block;
	padding: 0 0 .875rem;
	margin-bottom: -1px;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--muted-foreground);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.bs-product-tabs .wc-tabs li a:hover { color: var(--foreground); }
.bs-product-tabs .wc-tabs li.active a,
.bs-product-tabs .wc-tabs li a[aria-selected="true"] {
	color: var(--foreground);
	border-bottom-color: var(--gold);
}
.bs-product-tabs .wc-tabs li a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: .25rem;
}

/* Alleen verbergen zodra JS het schakelen heeft overgenomen. */
.bs-product-tabs.bs-tabs-ready .wc-tab[hidden] { display: none; }

/* De paneelkop herhaalt het tabblad ("Beschrijving" boven de tab
   "Beschrijving"); overbodig zodra de tabs zichtbaar zijn. */
.bs-product-tabs.bs-tabs-ready .woocommerce-Tabs-panel > h2:first-child {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Attributentabel in "Aanvullende informatie" — zonder WooCommerce-CSS een
   kale tabel zonder lijnen. */
.bs-product-tabs .shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}
.bs-product-tabs .shop_attributes th,
.bs-product-tabs .shop_attributes td {
	padding: .875rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--border);
}
.bs-product-tabs .shop_attributes th {
	width: 34%;
	padding-right: 1.5rem;
	font-weight: 500;
	color: var(--foreground);
}
.bs-product-tabs .shop_attributes td p { margin: 0; }

@media (max-width: 640px) {
	.bs-product-tabs .wc-tabs {
		flex-wrap: nowrap;
		gap: 1.5rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.bs-product-tabs .wc-tabs::-webkit-scrollbar { display: none; }
	.bs-product-tabs .shop_attributes th { width: 42%; padding-right: 1rem; }
}

/* Social-links in de footer — hover-stijl (verving de inline onmouseover/onmouseout) */
.bs-social-link:hover { background: var(--gold); color: var(--foreground); border-color: transparent; }