/* ============================================================
   mbs — mobile-fixes.css
   LAATSTE laag. Alleen correcties die per se ná alle andere lagen
   moeten vallen. Elke regel hieronder heeft een reden erboven —
   verdwijnt de oorzaak, dan gaat de regel weg (les § 54).
   ============================================================ */

/* ── horizontaal scrollen blokkeren ─────────────────────────
   global.css (concept) zet overflow-x:hidden op body. hidden maakt van
   body een scroll-container en sloopt daarmee elke position:sticky.
   clip doet hetzelfde zonder scroll-container; hidden blijft eronder
   staan voor oud Safari (les § 51). */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip}

/* Zodra html clipt, stopt scroll-lock op body met werken:
   ook op html vergrendelen. */
html:has(> body.is-locked),
html:has(> body.is-searching){overflow:hidden}

/* clip verbergt alleen het gevolg — dit is de oorzaak: */
.wrap,.woowrap,main,section,.card,.card__body,.prose,.entry-content{min-width:0}
.prose,.entry-content,.card__title,.scart__info strong,.woocommerce td.product-name{
  overflow-wrap:anywhere;
}

/* ── aanraakvlakken ─────────────────────────────────────── */
@media (hover:none){
  .icon-btn,.qty__btn,.scart__x,.crumbs a{min-width:44px;min-height:44px}
  .card__quick{opacity:1;transform:none}
}

/* ── winkelwagentabel op smal scherm ────────────────────── */
@media (max-width:760px){
  .woocommerce table.shop_table.woocommerce-cart-form__contents{table-layout:auto!important}
  .woocommerce-cart-form__contents thead{display:none}
  .woocommerce-cart-form__contents,
  .woocommerce-cart-form__contents tbody,
  .woocommerce-cart-form__contents tr{display:block;width:100%}
  .woocommerce-cart-form__contents tr.cart_item{
    display:grid!important;
    grid-template-columns:88px 1fr;
    grid-template-areas:
      'thumb name'
      'thumb qty'
      'thumb sub';
    gap:4px 16px;align-items:start;
    padding:22px 0;border-bottom:1px solid var(--line-soft);position:relative;
  }
  .woocommerce-cart-form__contents tr.cart_item td{
    display:block;border:0!important;padding:0!important;width:auto!important;max-width:none!important;
  }
  .woocommerce-cart-form__contents td.product-thumbnail{grid-area:thumb}
  .woocommerce-cart-form__contents td.product-thumbnail img{width:88px!important;min-width:88px!important;max-width:88px!important;height:118px!important}
  .woocommerce-cart-form__contents td.product-name{grid-area:name}
  .woocommerce-cart-form__contents td.product-price{display:none!important}
  .woocommerce-cart-form__contents td.product-quantity{grid-area:qty;margin-top:8px!important}
  .woocommerce-cart-form__contents td.product-subtotal{grid-area:sub;text-align:left!important;margin-top:8px!important}
  .woocommerce-cart-form__contents td.product-remove{position:absolute;top:20px;right:0;grid-area:unset}
  .woocommerce-cart-form__contents tr:has(td.actions){display:block!important}
  .woocommerce-cart-form__contents td.actions{padding-top:20px!important}
  .woocommerce-cart-form__contents td.actions .coupon{flex-wrap:wrap}
  .woocommerce-cart-form__contents td.actions .coupon .input-text{width:100%}
  .woowrap .woocommerce td.actions .button{width:100%}
}

/* ── afrekenen op smal scherm ───────────────────────────── */
@media (max-width:640px){
  .woocommerce-checkout #order_review{padding:20px}
  .woowrap{padding-bottom:60px}
  .pagehead{padding:34px 0 22px}
}

/* ── zoekpaneel ─────────────────────────────────────────── */
/* Eén breakpoint voor kop-zoekveld én icoon: twee losse queries lieten
   eerder een band van 600–900px over met géén van beide (les § 49). */
@media (max-width:900px){
  .search-overlay__panel{padding-top:20px}
}

/* ── beweging uit ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-rv]{opacity:1!important;transform:none!important}
}

/* ── vangnet voor scroll-reveal ─────────────────────────────
   [data-rv] is in het concept onzichtbaar tot .in erbij komt. Draait het
   script niet (JS-fout, blocker), dan blijft de halve pagina leeg. Daarom
   verbergt .js-anim op <html> pas ná het starten van het script; global.js
   zet die klasse en heeft bovendien een garantie-timer. */
html:not(.js-anim) [data-rv]{opacity:1!important;transform:none!important}

/* ── voorraadmelding op mobiel ─────────────────────────────
   De algemene PDP-stijl verbergt .woocommerce-variation-availability.
   Desktop kreeg eerder een :has()-override via Custom CSS; op mobiel kan
   dat in Safari/caching onbetrouwbaar uitpakken. Daarom hier een eenvoudige,
   veilige mobiele override zonder :has(). */
@media (max-width:900px){
  body.single-product .woocommerce-variation-availability{display:block!important}
  body.single-product .woocommerce-variation-availability>p.stock{display:none!important}
  body.single-product .cwginstock-subscribe-form{display:block!important;width:100%!important;max-width:100%!important;margin-top:16px!important}
  body.single-product .cwginstock-subscribe-form__form{grid-template-columns:1fr!important}
  body.single-product .cwginstock-subscribe-form .cwgstock_button{width:100%!important}
}