/* Saasveld · woocommerce/base — reset, knoppen, page-mains, micro-interacties, focus */

/* Saasveld — WooCommerce (klassiek) + FAK-picker. Mobiel-first, conform mockup. */

/* Border-box reset: WooCommerce's eigen CSS (die we bewust uitzetten) leverde dit voorheen.
   Zonder deze reset tellen padding/border NIET mee in width%, waardoor float-kolommen
   (o.a. de checkout #order_review) overflowen en onder elkaar vallen. */
.woocommerce,.woocommerce *,.woocommerce *::before,.woocommerce *::after,
.saasveld-shop *,.saasveld-single *,.saasveld-cartpage *,.saasveld-checkoutpage *{box-sizing:border-box}

/* Basisknop voor ALLE WooCommerce-knoppen (.button). WC's eigen knopstyling is uit;
   we geven een consistente gevulde knop. Specifiekere regels (product-card, checkout,
   quantity) winnen hierna op specificity. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce .button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{display:inline-block;background:var(--wp--preset--color--primary);color:#fff;border:0;border-radius:var(--wp--custom--radius--button);padding:.7rem 1.2rem;font-weight:700;font-size:.95rem;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;transition:background .15s ease,opacity .15s ease}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce .button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--wp--preset--color--primary-hover);color:#fff}
.woocommerce .button:disabled,.woocommerce .button.disabled,.woocommerce button.button:disabled{opacity:.5;cursor:not-allowed}
/* Secundaire knop-variant (bv. "Verder winkelen") */
.woocommerce .button.wc-backward,.woocommerce a.button.wc-backward{background:var(--wp--preset--color--surface-muted);color:var(--wp--preset--color--ink)}
.woocommerce .button.wc-backward:hover{background:var(--wp--preset--color--line);color:var(--wp--preset--color--ink)}

/* WC-pagina-mains krijgen horizontale ademruimte (constrained layout voegt zelf geen padding toe). */
.saasveld-shop,.saasveld-single,.saasveld-cartpage,.saasveld-checkoutpage{padding-inline:clamp(1rem,3vw,2rem);box-sizing:border-box}
/* Minder loze witruimte bovenaan WC-pagina's: de main had margin-top 24 + padding-top 24 (48px
   dood boven de breadcrumb). Aanzienlijk inkorten → content hoger, beter voor conversie. */
main.saasveld-shop,main.saasveld-single,main.saasveld-cartpage,main.saasveld-checkoutpage{margin-top:0;padding-top:1rem}

/* Titel + content op dezelfde boxed breedte (1200, via de constrained main).
   De titel laten we mét rust (constrained → 1200 gecentreerd). Alleen de WC-CONTENT
   krijgt max-width:none zodat die de volledige 1200-kolom vult (de geneste post-content-
   layout beperkt .woocommerce anders tot de smalle default-contentSize). NIET de titel:
   dát maakte 'm juist full-width/links (bug #31). */
.woocommerce-cart main .woocommerce,
.woocommerce-checkout main .woocommerce,
.woocommerce-account main .woocommerce{max-width:none}
/* ============ MICRO-INTERACTIES (polish; reduced-motion gerespecteerd via theme.css) ============ */
/* Kaart-beeld subtiele zoom bij hover (desktop) */
.woocommerce ul.products li.product a img{transition:transform .45s cubic-bezier(.2,.6,.2,1)}
@media (hover:hover){ .woocommerce ul.products li.product:hover a img{transform:scale(1.06)} }
/* Vloeiende knop-hover + lichte "druk"-feedback */
.woocommerce .button,.single_add_to_cart_button,.checkout-button,#place_order,.wp-element-button,.saasveld-mobile-cta__order{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .08s ease,box-shadow .18s ease}
.woocommerce .button:active,.single_add_to_cart_button:active,.checkout-button:active,#place_order:active{transform:translateY(1px) scale(.99)}
/* Laad-spinner tijdens AJAX-toevoegen (WC-CSS staat uit → eigen spinner) */
@keyframes sv-spin{to{transform:rotate(360deg)}}
.single_add_to_cart_button.loading,.woocommerce ul.products li.product .button.loading,.checkout-button.loading{position:relative;color:transparent !important;pointer-events:none;opacity:1}
.single_add_to_cart_button.loading::after,.woocommerce ul.products li.product .button.loading::after,.checkout-button.loading::after{content:"";position:absolute;top:50%;left:50%;width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:sv-spin .6s linear infinite}
/* Qty-stepper knoppen feedback */
.saasveld-qty-btn{transition:background .15s ease,transform .08s ease}
.saasveld-qty-btn:active{transform:scale(.88)}
/* Categorie-tab actief-schaal + vloeiend */
.saasveld-tabs a{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
/* "Toegevoegd"-link op de card: subtiele fade-in */
@keyframes sv-fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.woocommerce ul.products li.product .added_to_cart{animation:sv-fadein .25s ease}
/* Aanbieding-badges (patterns) */
.saasveld-badge{display:inline-block;background:var(--wp--preset--color--sale);color:#fff;border-radius:var(--wp--custom--radius--pill);padding:.15rem .6rem;font-size:.75rem;font-weight:600}
/* Lege add-to-cart-melding (html geleegd via filter) niet tonen */
.woocommerce-message:empty,.woocommerce-info:empty,.woocommerce-notices-wrapper:empty,li.woocommerce-message:blank{display:none}

/* ---------- WooCommerce meldingen (error/success/info) als nette banners ---------- */
.woocommerce-error,.woocommerce-message,.woocommerce-info{list-style:none;margin:0 0 1.25rem;padding:.85rem 1rem .85rem 2.6rem;border-radius:var(--wp--custom--radius--card);border:1px solid transparent;font-size:.92rem;line-height:1.45;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem}
.woocommerce-error>li,.woocommerce-message>li,.woocommerce-info>li{list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0}
.woocommerce-error::before,.woocommerce-message::before,.woocommerce-info::before{position:absolute;left:.95rem;top:.85rem;font-size:1rem;line-height:1.45}
.woocommerce-error{background:#fdecec;border-color:#f3c3c1;color:#8a1c1c}
.woocommerce-error::before{content:"⚠"}
.woocommerce-message{background:#e9f6ea;border-color:#b7e0bb;color:#1b5e20}
.woocommerce-message::before{content:"✓"}
.woocommerce-info{background:var(--wp--preset--color--surface-muted);border-color:var(--wp--preset--color--line);color:var(--wp--preset--color--ink)}
.woocommerce-info::before{content:"ℹ"}
/* Knop binnen een melding (bv. "Bekijk winkelwagen"): compact, rechts */
.woocommerce-error .button,.woocommerce-message .button,.woocommerce-info .button{flex:0 0 auto;margin-left:auto;padding:.4rem .9rem;font-size:.85rem}
/* Coupon-fout mag de actie-rij niet breken: meldingen altijd op eigen volle regel. */
.saasveld-cartpage .actions .woocommerce-error,.saasveld-cartpage .actions .woocommerce-message,.saasveld-cartpage .actions .woocommerce-info{flex:1 1 100%;order:99}
/* ---------- Focus states (a11y) ---------- */
.saasveld-picker__type:focus-visible,.saasveld-picker__branch:focus-visible,.saasveld-picker__day:focus-visible,.saasveld-picker__time:focus-visible,.saasveld-qty-btn:focus-visible,.saasveld-tabs a:focus-visible{outline:3px solid var(--wp--preset--color--primary);outline-offset:2px}