/* ==========================================================================
   Bridle2Fit · productpagina (borden Product, MProduct, Halsband, Cadeaubon,
   MCadeaubon, Browband). Hoofdstuk 3a.2, 4.1, 4.3, 4.5 en 7.
   Mobiel: carrousel met puntjes, keuzes eronder, sticky koopbalk.
   Tablet: galerij boven, keuzes eronder, allebei volle breedte.
   Desktop: miniaturen links, foto, en rechts een kolom van 460 px.
   ========================================================================== */

/* ---------- Opbouw ---------- */

.b2f-product__top{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  padding-bottom:var(--b2f-section-y);
}
@media (min-width:1100px){
  .b2f-product__top{
    grid-template-columns:minmax(0,1fr) 460px;
    gap:56px;
    align-items:start;
    padding-top:28px;
  }
}

/* ---------- Galerij ---------- */

.b2f-gallery{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  /* Mobiel loopt de foto door tot de rand (bord MProduct). */
  margin-inline:calc(-1 * var(--b2f-gutter));
}
.b2f-gallery__stage{position:relative;aspect-ratio:1 / 1}
.b2f-gallery__track{
  display:flex;
  height:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.b2f-gallery__track::-webkit-scrollbar{display:none}
.b2f-gallery__track:focus{outline:none}
.b2f-gallery__slide{
  flex:0 0 100%;
  height:100%;
  scroll-snap-align:start;
}
.b2f-gallery__slide .b2f-product-img{padding:20px}
.b2f-gallery__thumbs{display:none}
.b2f-gallery__dots{display:flex;justify-content:center;gap:8px;padding:2px 0}
.b2f-gallery__dot{
  width:6px;
  height:6px;
  border-radius:var(--b2f-radius-round);
  background:var(--b2f-line);
  transition:background var(--b2f-dur) var(--b2f-ease);
}
.b2f-gallery__dot.is-active{background:var(--b2f-gold-deep)}

@media (min-width:768px){
  .b2f-gallery{margin-inline:0}
  .b2f-gallery__slide .b2f-product-img{padding:40px}
}

@media (min-width:1100px){
  .b2f-gallery{
    flex-direction:row;
    gap:20px;
    position:sticky;
    top:calc(var(--b2f-header-h) + var(--wp-admin--admin-bar--height, 0px) + 24px);
  }
  .b2f-gallery__stage{flex:1 1 auto;min-width:0}
  .b2f-gallery__track{overflow-x:hidden}
  .b2f-gallery__dots{display:none}
  .b2f-gallery__thumbs{
    display:flex;
    flex-direction:column;
    gap:12px;
    flex-shrink:0;
    margin:0;
    padding:0;
    list-style:none;
  }
  .b2f-gallery__thumb{
    display:block;
    width:88px;
    height:88px;
    padding:0;
    border:0;
    background:var(--b2f-stone);
    outline:1px solid var(--b2f-line);
    outline-offset:-1px;
    cursor:pointer;
  }
  .b2f-gallery__thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:multiply;
    padding:6px;
  }
  .b2f-gallery__thumb[aria-current="true"]{outline:1.5px solid var(--b2f-charcoal);outline-offset:-1.5px}
  .b2f-gallery__thumb:focus-visible{outline:2px solid var(--b2f-focus);outline-offset:2px}
}

/* ---------- Samenvatting ---------- */

.b2f-product__summary{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}
.b2f-product__label{
  margin-bottom:-8px;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--b2f-gold-deep);
}
.b2f-product__summary .product_title{
  font-size:var(--b2f-fs-hero-page);
  font-weight:400;
  line-height:1.08;
  letter-spacing:.02em;
  text-wrap:balance; /* "Kopstuk HP-2" blijft bij elkaar, niet "HP-" en "2". */
}
.b2f-product__summary > .price{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
  margin-top:-6px;
  font-size:22px;
  letter-spacing:.02em;
}
@media (min-width:1100px){
  .b2f-product__summary > .price{font-size:26px}
}
.b2f-product__summary .price del{color:var(--b2f-muted);font-size:.75em}
.b2f-product__summary .price ins{text-decoration:none}
.b2f-product__summary .woocommerce-price-suffix{font-size:13px}
.woocommerce-product-details__short-description{font-size:15.5px;line-height:1.7;color:var(--b2f-muted)}
.woocommerce-product-details__short-description > *{margin:0}
.woocommerce-product-details__short-description > * + *{margin-top:.8em}

/* ---------- Keuzes (hoofdstuk 5.0) ---------- */
/* De tabel van WooCommerce blijft een tabel in de HTML, want het script van
   variation-swatches-woo rekent erop. Hier wordt het een stapel rijen: elke rij
   een streep erboven, het kopje links, de gekozen waarde rechts. */

table.variations,
table.variations tbody,
table.variations tr,
table.variations th,
table.variations td{display:block;width:100%;padding:0;border:0;text-align:left}
table.variations{margin:0;border-collapse:collapse}
table.variations tr{
  position:relative;
  padding:14px 0 18px;
  border-top:1px solid var(--b2f-line);
}
table.variations th.label{margin-bottom:12px;font-weight:400}
body table.variations th.label label{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:4px 12px;
  padding-right:0;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--b2f-muted);
}
/* De gekozen waarde zet de plugin achter het kopje. */
body table.variations .cfvsw-selected-label{
  margin-left:auto;
  font-size:13.5px;
  letter-spacing:0;
  text-transform:none;
  color:var(--b2f-charcoal);
}
table.variations .cfvsw-selected-label::before{content:none}
/* Bij de maat staat de link naar de maattabel rechts naast het kopje. */
table.variations tr:has(.b2f-attr__help) th.label label{padding-right:200px}
table.variations tr:has(.b2f-attr__help) .cfvsw-selected-label{margin-left:12px}
.b2f-attr__help{
  position:absolute;
  top:4px;
  right:0;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:13px;
  color:var(--b2f-muted);
  text-decoration:underline;
  text-decoration-color:var(--b2f-line);
  text-underline-offset:5px;
}

/* Zonder de plugin: de keuzelijst van WooCommerce in de vorm van een veld. */
table.variations select{
  width:100%;
  min-height:54px;
  padding:0 40px 0 14px;
  border:1px solid var(--b2f-line);
  background:var(--b2f-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233C3B3F' stroke-width='2'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  color:var(--b2f-charcoal);
  font:inherit;
  font-size:16px;
  -webkit-appearance:none;
  appearance:none;
}

/* ---------- De knoppen van variation-swatches-woo ---------- */
/* Eerst via de eigen custom properties van de plugin. Alleen waar de plugin
   een style-attribuut zet (afmetingen, ronde hoeken, rand, marge, display) is
   !important nodig: tegen een style-attribuut wint niets anders. Alle
   !important-regels hieronder hebben die reden en blijven binnen
   table.variations. Haal je ze weg, dan krijgen de knoppen weer de maten uit
   de plugininstellingen. */

table.variations{
  --cfvsw-swatches-border-color:var(--b2f-gold-deep);
  --cfvsw-swatches-border-color-hover:var(--b2f-greige);
  --cfvsw-swatches-border-width:1px;
  --cfvsw-swatches-font-size:14px;
  --cfvsw-swatches-label-font-size:11.5px;
}
/* De eigen uitgrijs-laag en het kruisje van de plugin; het thema doet dat met
   een gestreepte rand en doorgehaalde tekst. */
table.variations .cfvsw-swatches-option::before{content:none}

table.variations .cfvsw-swatches-container{display:flex;flex-wrap:wrap;gap:10px}
table.variations .cfvsw-swatches-option{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:46px !important;
  min-height:46px !important;
  margin:0 !important;
  padding:0 22px;
  border:1px solid var(--b2f-line) !important;
  border-radius:var(--b2f-radius) !important;
  background:transparent;
  color:var(--b2f-charcoal);
  font-size:14px;
  line-height:1.2;
  cursor:pointer;
  box-shadow:none;
  transition:border-color var(--b2f-dur) var(--b2f-ease);
}
table.variations .cfvsw-swatches-option:hover{border-color:var(--b2f-greige) !important}
table.variations .cfvsw-swatch-inner{font-size:inherit;color:inherit;text-transform:none}
/* Gekozen: rand diep goud plus een binnenrand (hoofdstuk 4.3). */
table.variations .cfvsw-swatches-option.cfvsw-selected-swatch{
  border-color:var(--b2f-gold-deep) !important;
  box-shadow:inset 0 0 0 1px var(--b2f-gold-deep);
}
/* Bestaat niet in deze combinatie: gestreept en doorgehaald, niet alleen grijs. */
table.variations .cfvsw-swatches-option.cfvsw-swatches-disabled,
table.variations .cfvsw-swatches-option.cfvsw-swatches-out-of-stock{
  border-style:dashed !important;
  color:var(--b2f-greige);
  text-decoration:line-through;
  cursor:not-allowed;
  opacity:1;
  filter:none;
}
table.variations .cfvsw-swatches-option:focus-visible{outline:2px solid var(--b2f-focus);outline-offset:2px}

/* Kleur en kleur padding als rondje: 34 px in een raakvlak van 44 px. De kleur
   komt uit de plugin (als die is ingesteld) of uit de leertokens. */
table.variations [swatches-attr="attribute_pa_kleur"],
table.variations [swatches-attr="attribute_pa_kleur-padding"]{gap:8px}
table.variations [swatches-attr="attribute_pa_kleur"] .cfvsw-swatches-option,
table.variations [swatches-attr="attribute_pa_kleur-padding"] .cfvsw-swatches-option{
  width:44px;
  height:44px;
  min-width:44px !important;
  min-height:44px !important;
  padding:0;
  border:0 !important;
  border-radius:var(--b2f-radius-round) !important;
  box-shadow:none;
}
table.variations [swatches-attr="attribute_pa_kleur"] .cfvsw-swatches-option::after,
table.variations [swatches-attr="attribute_pa_kleur-padding"] .cfvsw-swatches-option::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:var(--b2f-radius-round);
  background:var(--b2f-swatch-gloss, none), var(--b2f-swatch, var(--b2f-stone));
  outline:1px solid var(--b2f-line);
  outline-offset:3px;
  box-shadow:inset 0 0 0 1px rgba(23,22,27,.12);
  transition:outline-color var(--b2f-dur) var(--b2f-ease);
}
/* Als label ingesteld: de naam blijft voor schermlezers en in de tooltip van de plugin. */
table.variations [swatches-attr="attribute_pa_kleur"] .cfvsw-label-option .cfvsw-swatch-inner,
table.variations [swatches-attr="attribute_pa_kleur-padding"] .cfvsw-label-option .cfvsw-swatch-inner{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
/* Als kleur ingesteld (hoofdstuk 7.5): de plugin wint. Het binnenste van de
   plugin wordt het rondje, met de kleur die Bridle2Fit in de plugin koos. Het
   thema tekent dan geen eigen kleur; alleen de ring bij hover en gekozen. Heeft
   een term in de plugin (nog) geen kleur, dan vult de terugvalkleur het binnenste. */
table.variations [swatches-attr="attribute_pa_kleur"] .cfvsw-swatches-option:not(.cfvsw-label-option)::after,
table.variations [swatches-attr="attribute_pa_kleur-padding"] .cfvsw-swatches-option:not(.cfvsw-label-option)::after{
  background:none;
  box-shadow:none;
}
table.variations [swatches-attr="attribute_pa_kleur"] .cfvsw-swatches-option:not(.cfvsw-label-option) .cfvsw-swatch-inner,
table.variations [swatches-attr="attribute_pa_kleur-padding"] .cfvsw-swatches-option:not(.cfvsw-label-option) .cfvsw-swatch-inner{
  position:absolute;
  inset:5px;
  width:auto !important;
  height:auto !important;
  border:0;
  border-radius:var(--b2f-radius-round) !important;
  background-color:var(--b2f-swatch, transparent);
  background-image:var(--b2f-swatch-gloss, none);
  box-shadow:inset 0 0 0 1px rgba(23,22,27,.12);
}
table.variations [swatches-attr="attribute_pa_kleur"] .cfvsw-swatches-option:hover::after,
table.variations [swatches-attr="attribute_pa_kleur-padding"] .cfvsw-swatches-option:hover::after{outline-color:var(--b2f-greige)}
table.variations [swatches-attr="attribute_pa_kleur"] .cfvsw-selected-swatch::after,
table.variations [swatches-attr="attribute_pa_kleur-padding"] .cfvsw-selected-swatch::after{outline:1.5px solid var(--b2f-gold-deep)}
table.variations [swatches-attr="attribute_pa_kleur"] .cfvsw-swatches-disabled,
table.variations [swatches-attr="attribute_pa_kleur-padding"] .cfvsw-swatches-disabled,
table.variations [swatches-attr="attribute_pa_kleur"] .cfvsw-swatches-out-of-stock,
table.variations [swatches-attr="attribute_pa_kleur-padding"] .cfvsw-swatches-out-of-stock{opacity:.35}
table.variations [swatches-attr="attribute_pa_kleur"] .cfvsw-swatches-disabled::after,
table.variations [swatches-attr="attribute_pa_kleur-padding"] .cfvsw-swatches-disabled::after{outline-style:dashed}

/* Tooltip van de plugin in de huisstijl. body ervoor, want de plugin zet zijn
   kleuren in een style-blok dat na het thema laadt. */
body .cfvsw-tooltip{background:var(--b2f-graphite);color:var(--b2f-warm-white);font-family:var(--b2f-font);border-radius:0}
body .cfvsw-tooltip::before{background:var(--b2f-graphite)}

.reset_variations{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:-10px;
  font-size:13px;
  color:var(--b2f-muted);
  text-decoration:underline;
  text-underline-offset:5px;
}

/* ---------- Prijs van de variatie en voorraad ---------- */

.single_variation_wrap{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.woocommerce-variation:empty{display:none}
.woocommerce-variation-price .price{font-size:18px}
.woocommerce-variation-description{font-size:13.5px;color:var(--b2f-muted)}

/* Leveringsbelofte (hoofdstuk 5.1a): één regel met een groene stip. */
.b2f-promise,
.stock{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:13.5px;
  color:var(--b2f-muted);
}
.b2f-promise::before,
.stock::before{
  content:"";
  flex-shrink:0;
  width:8px;
  height:8px;
  border-radius:var(--b2f-radius-round);
  background:var(--b2f-ok);
}
/* Met de hand op uitverkocht of op nabestelling: een neutraal label met een
   grijze stip en de tekst van WooCommerce (bord Toestanden, hoofdstuk 5.1a).
   Geen rood, dat is alleen voor fouten. Bridle2Fit houdt geen voorraad bij,
   dus "op voorraad" en "nog twee" komen niet voor. */
.stock.out-of-stock,
.stock.available-on-backorder{
  align-self:flex-start;
  gap:9px;
  min-height:30px;
  padding:0 12px;
  background:var(--b2f-neutral-bg);
  color:var(--b2f-muted);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.stock.out-of-stock::before,
.stock.available-on-backorder::before{width:7px;height:7px;background:var(--b2f-neutral)}

/* ---------- Aantal en de knop ---------- */

form.cart:not(.variations_form),
.variations_button{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:12px;
}
form.cart{margin:0}
form.cart.variations_form{display:block}
/* De velden van de cadeaubon-plugin staan voor het aantal; die krijgen de volle breedte. */
form.cart > :not(.quantity):not(.single_add_to_cart_button):not(input[type="hidden"]),
.variations_button > :not(.quantity):not(.single_add_to_cart_button):not(input[type="hidden"]){flex:1 1 100%}



/* De knop van WooCommerce in de vorm van .b2f-btn--gold (hoofdstuk 4.1). */
.single_add_to_cart_button{
  flex:1 1 220px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:56px;
  padding:10px 28px;
  border:0;
  border-radius:var(--b2f-radius);
  background:var(--b2f-gold);
  color:var(--b2f-graphite);
  font:600 var(--b2f-fs-button)/1.25 var(--b2f-font);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  transition:filter var(--b2f-dur) var(--b2f-ease);
}
.single_add_to_cart_button::after{
  content:"";
  flex-shrink:0;
  width:18px;
  height:18px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.single_add_to_cart_button:hover{filter:brightness(1.08)}
.single_add_to_cart_button:focus-visible{outline:2px solid var(--b2f-gold-deep);outline-offset:2px}
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed;filter:none}
.single_add_to_cart_button.loading{opacity:.7;cursor:progress}
@media (min-width:768px){
  .single_add_to_cart_button{white-space:nowrap;line-height:1.1;padding-block:0}
}

/* ---------- Zekerheden onder de knop ---------- */

.b2f-assurance{padding:20px 0;border-top:1px solid var(--b2f-line);border-bottom:1px solid var(--b2f-line)}

/* ---------- Uitklappers ---------- */

.b2f-accordion__item{border-bottom:1px solid var(--b2f-line)}
.b2f-assurance + .b2f-accordion .b2f-accordion__item:first-child{border-top:0}
.b2f-accordion__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:60px;
  padding:8px 0;
  font-size:15.5px;
  list-style:none;
  cursor:pointer;
}
.b2f-accordion__head::-webkit-details-marker{display:none}
.b2f-accordion__icon{
  position:relative;
  flex-shrink:0;
  width:14px;
  height:14px;
}
.b2f-accordion__icon::before,
.b2f-accordion__icon::after{
  content:"";
  position:absolute;
  left:0;
  top:6.5px;
  width:14px;
  height:1.2px;
  background:var(--b2f-gold-deep);
  transition:transform var(--b2f-dur) var(--b2f-ease);
}
.b2f-accordion__icon::after{transform:rotate(90deg)}
.b2f-accordion__item[open] .b2f-accordion__icon::after{transform:rotate(0)}
.b2f-accordion__body{padding:4px 0 22px;font-size:14px;line-height:1.65;color:var(--b2f-muted)}
.b2f-accordion__body > h2:first-child{display:none} /* WooCommerce zet de tabnaam er nog eens boven. */
.b2f-accordion__body p{margin:0 0 .8em}

/* Specificaties: label links, waarde rechts. */
.woocommerce-product-attributes{width:100%;border-collapse:collapse;font-size:14px}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td{padding:5px 0;vertical-align:top}
.woocommerce-product-attributes th{padding-right:20px;font-weight:400;text-align:left;color:var(--b2f-muted)}
.woocommerce-product-attributes td{text-align:right;color:var(--b2f-charcoal)}
.woocommerce-product-attributes td p{margin:0}

/* Beoordelingen, als ze aan staan. */
.woocommerce-Reviews .comment-form input:not([type="checkbox"]):not([type="submit"]),
.woocommerce-Reviews .comment-form textarea{
  width:100%;
  min-height:54px;
  padding:12px 14px;
  border:1px solid var(--b2f-line);
  background:var(--b2f-paper);
  font:inherit;
}

/* ---------- Onder het product ---------- */

.b2f-product__story > *:first-child{margin-top:0}

.b2f-related{padding-block:var(--b2f-section-y)}
.b2f-related__head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:8px 24px;
  margin-bottom:28px;
}
.b2f-related ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
@media (min-width:1100px){
  .b2f-related ul.products{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  .b2f-related__head{margin-bottom:36px}
}

/* ---------- Frontriem-configurator (bord Browband, hoofdstuk 7.2) ---------- */
/* Volle breedte, geen zijmarge, geen max-width. Boven en onder sluit graphite aan. */

.b2f-is-configurator .b2f-crumbs{background:var(--b2f-graphite);color:var(--b2f-muted-dark);--b2f-focus:var(--b2f-gold)}
.b2f-is-configurator .b2f-crumbs__item:last-child{color:var(--b2f-warm-white)}
.b2f-is-configurator .b2f-crumbs__sep{color:var(--b2f-line-dark)}

.b2f-product__about{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  padding-block:var(--b2f-section-y);
}
@media (min-width:1100px){
  .b2f-product__about{grid-template-columns:minmax(0,1fr) 420px;gap:96px;align-items:start}
}
.b2f-speccard{
  padding:28px;
  border:1px solid var(--b2f-line);
  background:var(--b2f-paper);
}
.b2f-speccard__title{
  margin-bottom:12px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--b2f-muted);
}
.b2f-speccard .woocommerce-product-attributes tr{border-top:1px solid var(--b2f-line)}
.b2f-speccard .woocommerce-product-attributes th,
.b2f-speccard .woocommerce-product-attributes td{padding:13px 0}