/* ═══════════════ bijpip — mobile-fixes.css ═══════════════
   Laag 6, als LAATSTE ingeladen. Alleen echte correcties die nergens
   anders horen. Dit is de enige laag waar !important mag staan — en elke
   regel hier moet een reden hebben die in het commentaar staat, zodat een
   dode regel later te herkennen is.
   ═════════════════════════════════════════════════════════════ */

/* Horizontaal schuiven blokkeren zonder sticky te slopen:
   overflow-x:clip maakt géén scrollcontainer, hidden wel (§51). */
html, body {
  overflow-x: hidden;   /* vangnet voor oud Safari */
  overflow-x: clip;
}

/* Omdat html clipt, stopt scroll-lock op body met propageren:
   lock op html zelf wanneer een paneel open staat. */
html:has(.bijpip-sc.is-open),
html:has(.bijpip-search-overlay.is-open),
html:has(.mobile-nav.is-open) {
  overflow: hidden;
}

/* Kinderen die werkelijk overlopen: nooit alleen wegclippen. */
.shop, .grid, .slider, .pd, .pd__info, .footer__top, .usp,
.bijpip-archive__main, .bijpip-wcpage .woocommerce {
  min-width: 0;
}
.slider { scrollbar-width: none; }
.slider::-webkit-scrollbar { display: none; }

/* Admin-bar: WordPress zet html{margin-top} en maakt de bar alleen
   onder 783px fixed. De gemeten --bijpip-hdr-bottom vangt de rest op. */
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* Woo's eigen wrappers die we niet kunnen verwijderen mogen het grid
   niet breken (§56). */
.bijpip-wcpage .woocommerce-notices-wrapper:empty { display: none; }

/* Een gesloten lade/overlay mag nooit kliks opvangen. */
[hidden] { display: none !important; }

/* Mobiel: filterlade echt bruikbaar maken. */
@media (max-width: 900px) {
  .filters.is-open {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
}

/* Elke img met een CSS aspect-ratio heeft height:auto nodig, anders maken
   WP's width/height-attributen de box definitief en wordt de ratio
   stilzwijgend genegeerd (§60). */
.bijpip-sc__thumb img,
.bijpip-sc__up img,
.cat-card__img,
.tile__media img,
.pg__frame img,
.pg__thumb img,
.markt-card__media img,
.story__media img,
.about__visual img,
.footer__visual img,
.mega__visual img {
  height: auto;
}

/* Knoppen die de hele kolom moeten vullen: flex-shrink haalt width:100%
   alleen onderuit, min-width:100% niet (§28). */
.pd__atc,
.bijpip-sc__actions .btn,
.bijpip-wcpage .wc-proceed-to-checkout a.checkout-button,
.bijpip-wcpage #place_order {
  min-width: 100%;
}

/* Tikdoelen minimaal 44 px op touch. */
@media (hover: none) {
  .bijpip-wish-btn,
  .slider-arrow,
  .bijpip-sc__qty button,
  .bijpip-sc__rm {
    min-width: 44px;
    min-height: 44px;
  }
  .bijpip-sc__qty button { width: 44px; height: 44px; }
}

/* ═══════════════ Feedback Marinka okt 2026 ═══════════════
   Staat hier (laag 6, laatst geladen) zodat het de conceptlagen
   zonder !important overstemt. Zie inc/image-format.php. */

/* 1-3. Beeldformaat per categorie in elke productkaart (shop, categorie,
   homepage-carrousels, "Dit past er mooi bij", verlanglijst).
   ansicht = staand 3:4 cover (ongewijzigd), wens = 1:1 cover,
   contain = niets afsnijden op een lichte vlakte. */
.product-card--fmt-wens .product-card__media { aspect-ratio: 1 / 1; }
.product-card--fmt-contain .product-card__media { background: var(--cream); }
.product-card--fmt-contain .product-card__media img {
  inset: 5%;
  width: 90%;
  height: 90%;
  object-fit: contain;
}

/* Zelfde regels voor de PDP-galerij, via body-class bijpip-fmt-*. */
body.bijpip-pdp.bijpip-fmt-wens .pg__thumb,
body.bijpip-pdp.bijpip-fmt-wens .pg__frame img,
body.bijpip-pdp.bijpip-fmt-wens .pg__frames { aspect-ratio: 1 / 1; }
body.bijpip-pdp.bijpip-fmt-contain .pg__stage,
body.bijpip-pdp.bijpip-fmt-contain .pg__thumb { background: var(--cream); }
body.bijpip-pdp.bijpip-fmt-contain .pg__frame img,
body.bijpip-pdp.bijpip-fmt-contain .pg__thumb img { object-fit: contain; }

/* 5. "Dit past er mooi bij" (#erbij): op desktop een rij kleine kaarten
   (6 per rij, 5 op smalle desktop) die met de pijltjes verder schuift.
   Onder 900px blijft alles zoals het was. */
@media (min-width: 901px) {
  #erbij .slider {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  #erbij .slider > .product-card {
    flex: 0 0 calc((100% - 4 * var(--gap)) / 5);
    min-width: 0;
    scroll-snap-align: start;
  }
  #erbij .product-card h3 { font-size: 14px; }
  #erbij .product-card .atc { font-size: 11px; }
}
@media (min-width: 1200px) {
  #erbij .slider > .product-card { flex-basis: calc((100% - 5 * var(--gap)) / 6); }
}

/* 7. Paginering: bijpip_pagination() print een kale <ul> zonder
   .page-numbers, dus de regels in woocommerce.css raakten hem niet en
   stond hij als opsomming onder elkaar. Nu een horizontale rij. */
.bijpip-pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.bijpip-pagination li { list-style: none; margin: 0; padding: 0; }
.bijpip-pagination li::marker { content: none; }
.bijpip-pagination span.page-numbers.dots { border-color: transparent; }

/* 9. USP "Op markten en fairs" is een link naar de agenda. */
.usp__item--link { color: inherit; text-decoration: none; }
.usp__item--link:hover p { color: var(--wine); }


/* ═══════════════ Mobiel/PDP-fixes 22-10-2026 (Joey) ═══════════════
   Back-ups: *.bak-20261022-voor-mobiel-pdp-fixes */

/* 1. Mobiele filterlade (shop, categorie, sale).
   global.css verborg de filters met ".js .filters", maar het thema zet de
   klasse "bijpip-js" op <html>, niet "js". Daardoor stond alles open en was
   de knop nooit te zien. shop.js bouwt de kop met sluitknop + de scrim. */
.filters__drawer-head, .filters-scrim { display: none; }
@media (max-width: 900px) {
  .bijpip-js .toolbar__filters-toggle { display: flex; }
  .bijpip-js .filters {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    width: min(88vw, 380px);
    margin: 0;
    padding: 0 20px 28px;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 0 40px rgb(0 0 0 / 0.14);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 0.32s var(--ease, ease), visibility 0s linear 0.32s;
  }
  .bijpip-js .filters.is-open {
    transform: none;
    visibility: visible;
    margin-bottom: 0;
    transition: transform 0.32s var(--ease, ease), visibility 0s;
  }
  body.admin-bar.bijpip-js .filters { top: 46px; }
  .bijpip-js .filters__drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -20px 18px;
    padding: 12px 12px 12px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .filters__drawer-title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .filters__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  .bijpip-js .filters-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgb(44 44 44 / 0.42);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .bijpip-js .filters-scrim.is-on { opacity: 1; }
  .bijpip-js .filters-scrim[hidden] { display: none !important; }
  html.bijpip-filters-open { overflow: hidden; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .bijpip-js .filters, .bijpip-js .filters.is-open, .bijpip-js .filters-scrim { transition: none; }
}

/* 2. PDP: WooCommerce's eigen variatieprijs + voorraad (olijfgroen) weg.
   De prijs staat al bovenaan (#pdPrice), in de knop en in de aantal-tegels;
   de voorraad staat als .pd__stock onder de knop. .single_variation zelf
   blijft in de DOM, WooCommerce's variatiescript heeft hem nodig. */
body.bijpip-pdp .single_variation .woocommerce-variation-price,
body.bijpip-pdp .single_variation .woocommerce-variation-availability { display: none; }
body.bijpip-pdp .single_variation:not(:has(.woocommerce-variation-description *)) { display: none !important; }
/* "In winkelwagen ·" zonder bedrag: dan ook geen losse punt. */
body.bijpip-pdp .pd__atc-total:has(#atcTotal:empty) { display: none; }

/* 4. PDP: "In winkelwagen" + vierkante hartjesknop op één rij, zelfde hoogte. */
body.bijpip-pdp .pd__buy .pd__atc-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}
body.bijpip-pdp .pd__atc-row .pd__atc {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
body.bijpip-pdp .pd__atc-row .pd__wish {
  flex: 0 0 56px;
  width: 56px;
  min-width: 56px;
  min-height: 52px;
  height: auto;
  padding: 0;
  border: 1px solid var(--wine);
  color: var(--wine);
  background: #fff;
  cursor: pointer;
}
body.bijpip-pdp .pd__atc-row .pd__wish svg { width: 22px; height: 22px; }
body.bijpip-pdp .pd__atc-row .pd__wish.is-on { background: var(--blush); }
body.bijpip-pdp .pd__atc-row .pd__wish.is-on svg { fill: currentColor; }
/* Notitie direct onder de knoprij (de form- en .pd__buy-marges gaven ~50px lucht). */
body.bijpip-pdp .pd__info form.buy-form,
body.bijpip-pdp .pd__info form.buy-form .pd__buy { margin-bottom: 0; }
body.bijpip-pdp .pd__wish-note { font-size: 11.5px; margin: 10px 0 16px; }

/* 3. Favorieten in de mobiele header: hartje met teller naast zoeken en
   winkelwagen (header.css verborg .pm-action--wish onder 900px). */
@media (max-width: 899px) {
  .pm-scope .pm-action--wish { display: inline-flex; }
  .pm-scope .pm-action b.bijpip-wish-count { top: 1px; right: 0; }
}
/* Verwijderknop op de verlanglijstpagina (wishlist.js). */
.wl-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.wl-remove:hover { color: var(--wine); }

/* 5. "Dit past er mooi bij" (#erbij) op mobiel: horizontale slider met
   ca. 2 kaarten in beeld en een stukje van de derde. global.js bedient de
   pijlen al (scrollBy op de kaartbreedte). */
@media (max-width: 900px) {
  #erbij .slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 0;
    padding-bottom: 6px;
  }
  #erbij .slider > .product-card {
    flex: 0 0 calc((100% - 24px) / 2.3);
    min-width: 0;
    scroll-snap-align: start;
  }
  #erbij .product-card h3 { font-size: 14px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  #erbij .slider > .product-card { flex-basis: calc((100% - 36px) / 3.3); }
}

/* ═══════════════ Footer + PDP-galerij 22-10-2026 (Joey) ═══════════════
   Back-ups: *.bak-20261022-voor-footer-galerij */

/* 6. PDP-galerij als slider. shortcodes.css zette de slider-stand op
   ".js .pg__frames", maar het thema zet "bijpip-js" op <html>; ".js" bestaat
   niet, dus stonden alle foto's groot onder elkaar en waren teller en
   pijltjes nooit zichtbaar. Nu: één rij foto's met scroll-snap (swipen op
   touch), product.js houdt duimnagels, teller en pijlen in sync.
   Het formaat per categorie blijft van de bijpip-fmt-*-regels hierboven:
   die zetten de verhouding op het <img>, de rij neemt die hoogte over. */
body.bijpip-pdp .pg.pg--single { grid-template-columns: minmax(0, 1fr); }
body.bijpip-pdp .pg__main { min-width: 0; }
.bijpip-js body.bijpip-pdp .pg__frames {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bijpip-js body.bijpip-pdp .pg__frames::-webkit-scrollbar { display: none; }
.bijpip-js body.bijpip-pdp .pg__frame {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.bijpip-js body.bijpip-pdp .pg__frame img { display: block; }
.bijpip-js body.bijpip-pdp .pg__ui {
  display: flex;
  position: absolute;
  z-index: 3;
  left: 12px;
  right: 12px;
  bottom: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
body.bijpip-pdp .pg__thumb { cursor: pointer; }
/* Labels (Nieuw/Sale) op de hoofdfoto: de absolute .pg__flags kromp tot 0px
   breed, waardoor "NIEUW" letter voor letter onder elkaar stond. */
body.bijpip-pdp .pg__flags { width: max-content; max-width: calc(100% - 24px); }
body.bijpip-pdp .pg__flags .badge { white-space: nowrap; }
@media (min-width: 641px) {
  /* Duimnagelkolom nooit hoger dan de hoofdfoto: daarna scrollt hij zelf. */
  body.bijpip-pdp .pg--multi .pg__thumbs {
    height: 0;
    min-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
  }
  body.bijpip-pdp .pg--multi .pg__thumbs::-webkit-scrollbar { display: none; }
  body.bijpip-pdp .pg__thumb { flex: 0 0 auto; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  /* Eén kolom: de galerij niet schermbreed (een foto van 1000px hoog). */
  body.bijpip-pdp .pg { max-width: 680px; }
}
@media (max-width: 640px) {
  /* Mobiel: swipen + duimnagels eronder; pijltjes overbodig, teller blijft. */
  .bijpip-js body.bijpip-pdp .pg__ui .slider-nav { display: none; }
  body.bijpip-pdp .pg--multi .pg__thumbs { padding-top: 2px; }
}
@media (hover: none) {
  .bijpip-js body.bijpip-pdp .pg__hint { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .bijpip-js body.bijpip-pdp .pg__frames { scroll-behavior: auto; }
}

/* 7. Footer met linkkolommen: merk | Winkel | Klantenservice | Over Bij Pip
   | nieuwsbrief. De paginalagen (components.css, shortcodes.css, ...) zetten
   .footer__top per body-class op 4 kolommen; de extra klasse
   .footer__top--cols wint daar zonder !important van. */
.footer .footer__top.footer__top--cols {
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.8fr)) minmax(0, 1.35fr);
  gap: 40px;
}
.footer__about { font-size: 13.5px; color: var(--muted); line-height: 1.65; max-width: 300px; margin: 0 0 18px; }
.footer__contact { font-style: normal; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.55; }
.footer__contact a { transition: color 0.25s; }
.footer__contact a:hover { color: var(--wine); }
.footer__brand .footer__logo { display: block; }
@media (max-width: 1100px) {
  .footer .footer__top.footer__top--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
  .footer .footer__top--cols .footer__brand,
  .footer .footer__top--cols .footer__col--newsletter { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer .footer__top.footer__top--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .footer .footer__top--cols .footer__col a { padding: 4px 0; }
  .footer .footer__top--cols .footer__col { gap: 6px; }
}

/* Homepage 22-10-2026: compacte full-width marktbanner en sliders tot de rechterrand. */
body.bijpip-home .markt-banner.band-self {
  width: 100%;
  max-width: none;
}
/* De concept-image helper zet inline height:auto; daarom hier !important. */
body.bijpip-home .markt-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
body.bijpip-home .markt-banner__content {
  position: relative;
  inset: auto;
  min-height: 420px;
  padding: 40px var(--pad);
}
body.bijpip-home .markt-banner__content h2 {
  color: #fff;
  font-size: clamp(32px, 3.5vw, 48px);
}
body.bijpip-home .markt-banner .verkooppunten {
  margin-top: 16px;
  padding-top: 16px;
}
/* Linker uitlijning blijft gelijk; alleen de productrij loopt verder door.
   Percentages gebruiken de paginabreedte zonder de browser-scrollbar. */
body.bijpip-home .section.home-carousel {
  padding-left: max(var(--pad), calc((100% - var(--band)) / 2));
  padding-right: 0;
}
body.bijpip-home .home-carousel > .band {
  max-width: none;
}
body.bijpip-home .home-carousel .section-head,
body.bijpip-home .home-carousel .section-head__sub {
  max-width: var(--band);
  width: calc(100% - var(--pad));
}
body.bijpip-home .home-carousel .slider {
  width: 100%;
}
@media (max-width: 640px) {
  body.bijpip-home .markt-banner__content {
    min-height: 0;
    padding-block: 36px;
  }
}

/* PDP 22-10: Woo price markup and one continuous purchase row. */
body.bijpip-pdp .pd__price #pdPrice {
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
}
body.bijpip-pdp .pd__price #pdPrice span {
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
body.bijpip-pdp .pd__price #pdPrice del {
  color: var(--muted);
  font-size: 18px;
  text-decoration: line-through;
  margin-right: 8px;
}
body.bijpip-pdp .pd__price #pdPrice ins {
  color: var(--wine);
  text-decoration: none;
  border: 0;
  background: none;
}
body.bijpip-pdp .pd__buy { flex-wrap: nowrap; }
body.bijpip-pdp .pd__buy > .quantity {
  flex: 0 0 auto;
  height: 52px;
}
body.bijpip-pdp .pd__buy > .quantity button,
body.bijpip-pdp .pd__buy > .quantity input { height: 100%; }
body.bijpip-pdp .pd__buy .pd__atc-row {
  flex: 1 1 0;
  width: auto;
}
body.bijpip-pdp .pd__atc-row .pd__atc {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 4px;
  padding: 12px;
  min-height: 52px;
}
@media (max-width: 640px) {
  body.bijpip-pdp .pd__buy,
  body.bijpip-pdp .pd__buy .pd__atc-row { gap: 6px; }
  body.bijpip-pdp .pd__buy > .quantity button { width: 32px; }
  body.bijpip-pdp .pd__buy > .quantity input { width: 30px; }
  body.bijpip-pdp .pd__atc-row .pd__wish {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
  }
  body.bijpip-pdp .pd__atc-row .pd__atc {
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 8px 6px;
  }
}


/* 22-10-2026 - Marinka: footer logo clearly smaller, the same on every page
   (on shop/category pages WooCommerce img rules blew it up to ~300px). */
.footer img.footer__logo {
  width: 96px !important;
  max-width: 96px !important;
  height: auto !important;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .footer img.footer__logo { width: 84px !important; max-width: 84px !important; }
}


/* ═══ 27-10-2026: accentwoord in koppen NOOIT cursief (Joey) ═══
   Vangnet over de hele site, ook voor nieuwe templates (bv. /set-samenstellen):
   het gekleurde accentwoord (<em>/<i>) in koppen en titels blijft gekleurd,
   maar staat recht. !important zodat ook specifiekere pagina-regels en
   inline styles hier niet meer overheen gaan. Citaten, handtekeningen en
   blockquotes (geen koppen) blijven bewust cursief. */
:is(h1, h2, h3, h4, h5, h6, [class*="title"], [class*="__heading"], .page-head) :is(em, i, cite, var, dfn),
:is(h1, h2, h3, h4, h5, h6) [class*="accent"]{
  font-style: normal !important;
}

/* ═══ 02-11-2026 - kleine productfoto's nooit vervormd/bijgesneden (Marinka) ═══
   De kleine thumbs ("Maak het compleet", "Ook verkrijgbaar als ...",
   kassakoopjes, winkelwagen, mini-cart, checkout, live-zoeken, marktkaart
   homepage) laden nu het onbijgesneden formaat 'medium' i.p.v. de vierkante
   crops (100x100 / 600x600). Hier: hele foto tonen (contain) op wit.
   "html body" zodat dit ook boven livegang.css (laadt later) wint. */
html body .bp-up__img,
html body .bp-kk__img,
html body .bijpip-sc__thumb,
html body .cart-row__media { background: #fff; }
html body .bp-up__img img,
html body .bp-kk__img img,
html body .pd__other img,
html body .bijpip-sc__thumb img,
html body .bijpip-sc__up img,
html body .bijpip-wcpage--cart .woocommerce-cart-form__contents td.product-thumbnail img,
html body .cart-row__media img,
html body .minilist__row img,
html body .bpls-product img,
html body.bijpip-home .markt-card__product img {
  object-fit: contain !important;
  object-position: 50% 50%;
  background: #fff;
  transform: none;
}
/* PDP-galerijthumbs: zelfde kader als voorheen, maar nu de hele foto. */
html body.bijpip-pdp .pg__thumb { background: #fff; }
html body.bijpip-pdp .pg__thumb img:not(.bp-inset) { object-fit: contain; }
/* 3-11-2026, wens Marinka: nergens meer schuingedrukte letters. */
body, body *, body *::before, body *::after { font-style: normal !important; }