/*
Theme Name: StudioLeb
Theme URI: https://studioleb.nl
Author: StudioLeb
Description: Het eigen thema van StudioLeb. Donker, glas, Lora voor de koppen. WooCommerce-pagina's houden hun eigen werking en krijgen alleen deze opmaak.
Version: 0.1
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: studioleb
*/

/* ── de kleuren, doorgerekend op contrast ──────────────────
   crème op java is 14,88:1 · cerulean op java 8,87:1
   wijnrood is een vlakkleur, nooit tekst op donker (1,14:1) */
:root{
  --creme:#F5EFC6; --java:#231815; --wijn:#4D0E12;
  --blauw:#A5BCD6; --aarde:#4A2E27;
  --ink:var(--creme);
  --ink-2:rgba(245,239,198,.72);
  --ink-3:rgba(245,239,198,.46);
  --glas:rgba(74,46,39,.42);
  --glas-rand:rgba(245,239,198,.16);
  --schaduw:0 24px 60px -20px rgba(10,6,5,.7);
  --serif:"Lora",Georgia,serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --soepel:cubic-bezier(.32,.72,0,1);
  --pad:clamp(16px,4vw,44px);
}

*{box-sizing:border-box}
body{margin:0;background:var(--java);color:var(--ink);font-family:var(--ui);
     line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.7rem,4vw,2.6rem)}
h2{font-size:clamp(1.3rem,2.6vw,1.8rem)}
a{color:var(--blauw);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blauw);outline-offset:3px;border-radius:8px}
img{max-width:100%;height:auto}

.glas{background:var(--glas);border:1px solid var(--glas-rand);
      box-shadow:var(--schaduw);
      -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}

.kaft{padding:clamp(18px,3vw,30px) var(--pad) 0}
.merknaam{font-family:var(--serif);font-size:1.25rem;color:var(--ink);text-decoration:none}
.raam{padding:clamp(20px,4vh,40px) var(--pad) 150px;max-width:1180px;margin:0 auto}
.kaart{border-radius:24px;padding:clamp(20px,3vw,38px)}

/* ── knoppen ───────────────────────────────────────────────
   Eén vorm voor alles wat WooCommerce aan knoppen uitdeelt, anders staat er op
   elke pagina een andere. */
.kn,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 26px;border-radius:999px;border:1px solid var(--glas-rand);
  background:transparent;color:var(--ink);font-weight:500;font-size:.94rem;
  font-family:var(--ui);line-height:1;text-decoration:none;cursor:pointer;
  transition:transform .4s var(--soepel),background .3s}
.kn:hover,.woocommerce .button:hover,.woocommerce a.button:hover{
  background:rgba(245,239,198,.12);transform:translateY(-2px)}
.kn-vol,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button:not(.is-link){
  background:var(--blauw);border-color:var(--blauw);color:var(--java)}
.kn-vol:hover,.woocommerce .button.alt:hover,.woocommerce #place_order:hover{
  background:#B9CCE0;color:var(--java)}

/* ── formulieren ──────────────────────────────────────────── */
.woocommerce form .form-row{margin:0 0 16px;display:block}
.woocommerce form .form-row label,
.woocommerce-form label,
.wc-block-components-text-input label{
  display:block;margin-bottom:6px;font-size:.82rem;color:var(--ink-2)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-input-wrapper input,
.wc-block-components-text-input input,
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=search],textarea,select{
  width:100%;min-height:48px;padding:12px 15px;border-radius:14px;
  border:1px solid var(--glas-rand);background:rgba(35,24,21,.55);
  color:var(--ink);font-family:var(--ui);font-size:.94rem}
textarea{min-height:120px;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,textarea:focus,select:focus{border-color:var(--blauw);outline:none}
.woocommerce form .form-row .required{color:var(--blauw);text-decoration:none}

/* select2 gebruikt WooCommerce voor het land — die tekent zijn eigen vakje */
.select2-container--default .select2-selection--single{
  min-height:48px;border-radius:14px;border:1px solid var(--glas-rand);
  background:rgba(35,24,21,.55)}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink);line-height:48px;padding-left:15px}
.select2-dropdown{background:#2b1d19;border:1px solid var(--glas-rand);color:var(--ink)}

/* ── meldingen ──────────────────────────────────────────────
   Elke melding, van WooCommerce of van ons, als donker glas met crème tekst:
   een fout, een bevestiging, een tip. Het soort zie je aan het streepje links
   en het rondje met het icoon. WooCommerce gaf de blokmeldingen een lichtroze
   vlak, en daar stond onze crème tekst onleesbaar op. Dit staat in style.css
   en niet in binnen.css, omdat de voorpagina dezelfde meldingen toont in het
   accountvenster en het mandje. De kleuren vallen terug op wijn als een
   pagina de thema-kleuren niet kent. */
body .wc-block-components-notice-banner,
body .woocommerce-message,body .woocommerce-info,body .woocommerce-error,
body .woocommerce-notice,
.melding{
  position:relative;display:flex;align-items:flex-start;gap:12px;
  margin:0 0 18px;padding:14px 16px!important;list-style:none;
  border-radius:16px;border:1px solid rgba(255,255,255,.22);
  border-left:4px solid var(--soort,rgba(245,239,198,.6));
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),
             rgba(var(--java-rgb,51,15,18),.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  color:var(--creme,#F5EFC6)!important;font-size:.9rem;line-height:1.5;
  box-shadow:0 14px 34px -18px rgba(10,6,5,.8)}
body .wc-block-components-notice-banner.is-error,
body .woocommerce-error,
.melding.is-error{--soort:var(--fout,#F0A8A0)}
body .wc-block-components-notice-banner.is-success,
body .woocommerce-message,
.melding.is-success{--soort:var(--blauw,#D8C7A8)}
body .wc-block-components-notice-banner.is-warning{--soort:#E8C987}
body .wc-block-components-notice-banner.is-info,
body .woocommerce-info,
.melding.is-info{--soort:rgba(245,239,198,.6)}
body .wc-block-components-notice-banner.is-error,
body .wc-block-components-notice-banner.is-success,
body .wc-block-components-notice-banner.is-warning,
body .wc-block-components-notice-banner.is-info{
  background-color:rgba(var(--java-rgb,51,15,18),.86);border-color:rgba(255,255,255,.22);
  border-left-color:var(--soort)}
/* het rondje met het icoon */
body .wc-block-components-notice-banner>svg{
  flex:none;width:22px;height:22px;padding:3px;border-radius:50%;
  background-color:var(--soort)!important;fill:var(--java,#330F12)}
/* de tekst, de links en het kruisje */
body .wc-block-components-notice-banner .wc-block-components-notice-banner__content,
body .wc-block-components-notice-banner .wc-block-components-notice-banner__content *{color:var(--creme,#F5EFC6)}
body .wc-block-components-notice-banner .wc-block-components-notice-banner__summary{font-weight:600}
body .wc-block-components-notice-banner a,
body .woocommerce-message a:not(.button),body .woocommerce-info a:not(.button),
body .woocommerce-error a:not(.button),.melding a{
  color:var(--creme,#F5EFC6)!important;text-decoration:underline;text-underline-offset:3px}
body .wc-block-components-notice-banner>.wc-block-components-button{
  color:var(--creme,#F5EFC6)!important;opacity:.75;background:transparent!important;
  border:0!important;min-height:0!important;box-shadow:none!important;padding:0!important}
body .wc-block-components-notice-banner>.wc-block-components-button svg{fill:currentColor}
body .wc-block-components-notice-banner>.wc-block-components-button:hover{opacity:1;transform:none;filter:none}
body .wc-block-components-notice-banner .wc-forward{color:var(--creme,#F5EFC6)!important}
/* de klassieke meldingen: hun icoon is een letterteken van WooCommerce */
body .woocommerce-message,body .woocommerce-info,body .woocommerce-error{
  display:block;padding-left:46px!important}
body .woocommerce-message::before,body .woocommerce-info::before,body .woocommerce-error::before{
  color:var(--soort);top:15px;left:16px}
body .woocommerce-error li{margin:0;padding:0;list-style:none}
body .woocommerce-message .button,body .woocommerce-info .button,body .woocommerce-error .button{
  float:right;margin:-4px 0 0 14px;min-height:36px;padding:7px 15px;font-size:.82rem}
.melding{display:block;margin:4px 0 14px}
.melding p{margin:0;color:inherit}
.melding p+p{margin-top:6px}

/* ── tabellen: mandje, bestellingen, totalen ──────────────── */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes{
  width:100%;border-collapse:collapse;border:0;margin:0 0 24px}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:14px 12px;border:0;border-bottom:1px solid rgba(245,239,198,.12);
  text-align:left;vertical-align:middle}
.woocommerce table.shop_table th{font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th{font-weight:600}
.woocommerce .order-total .amount,
.woocommerce .cart-subtotal .amount{font-family:var(--serif);font-size:1.2rem}
.woocommerce .quantity input.qty{width:78px;text-align:center}

/* ── de winkel ────────────────────────────────────────────── */
.woocommerce ul.products{display:grid;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(12px,2vw,20px)}
.woocommerce ul.products li.product{background:rgba(74,46,39,.34);border-radius:20px;
  border:1px solid var(--glas-rand);padding:16px;margin:0;text-align:left}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif);font-size:1.05rem;margin:8px 0 4px}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{color:var(--ink);font-family:var(--serif);font-size:1.3rem}
.woocommerce div.product .product_title{margin-bottom:.2em}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{color:var(--ink-2);font-size:.85rem}

/* ── mijn account ─────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation{
  float:none;width:auto;margin-bottom:26px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:inline-block;padding:9px 15px;border-radius:999px;font-size:.86rem;
  text-decoration:none;color:var(--ink);border:1px solid var(--glas-rand)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--blauw);border-color:var(--blauw);color:var(--java)}
.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto}

/* ── afrekenen ────────────────────────────────────────────── */
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{
  border:0;padding:0;margin:0 0 18px;list-style:none}
.woocommerce-checkout #payment ul.payment_methods li{
  padding:13px 15px;border:1px solid var(--glas-rand);border-radius:14px;margin-bottom:8px}
.woocommerce-checkout #payment div.payment_box{
  background:rgba(35,24,21,.5);color:var(--ink-2);font-size:.86rem;border-radius:12px}
.woocommerce-checkout #payment div.payment_box::before{display:none}
#add_payment_method #payment div.form-row, .woocommerce-checkout #payment div.form-row{padding:0}

/* ── de balk onderin ──────────────────────────────────────── */
.balk{position:fixed;left:50%;bottom:clamp(12px,2vh,20px);z-index:70;
      transform:translateX(-50%);display:flex;align-items:center;gap:5px;
      padding:8px;border-radius:26px}
.balk .bk{position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:11px 17px;border-radius:18px;color:var(--ink);text-decoration:none;
  font-size:.88rem;transition:background .3s}
.balk .bk:hover{background:rgba(245,239,198,.12)}
.balk .telling{min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--blauw);color:var(--java);font-size:.66rem;font-weight:700;
  display:inline-grid;place-items:center;line-height:1}

@media(max-width:560px){
  .balk .bk{padding:10px 12px;font-size:.8rem}
}

/* ── de balk op de andere pagina's: dezelfde als op de voorpagina ──
   Een kopie van de balk uit ruimte.css, die hier niet geladen wordt. Alles hangt
   aan .los, zodat de balk op de voorpagina er niets van merkt. De kleuren zijn
   die van het standaardthema, wijn. */
.balk.los{gap:5px;padding:9px;overflow:visible;
  background:rgba(77,14,18,.44);border:1px solid rgba(255,255,255,.26);
  box-shadow:0 2px 8px rgba(10,6,5,.30),0 22px 60px -22px rgba(10,6,5,.75);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6)}
.balk.los::before,.balk.los::after{display:none}
.balk.los .veeg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.balk.los .veeg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(163deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 34%,
             transparent 62%)}
.balk.los .bk{display:grid;place-items:center;width:56px;height:56px;flex:none;padding:0;
  border-radius:18px;color:#F5EFC6;
  transition:transform .34s var(--soepel),background .35s}
.balk.los .bk:hover{background:rgba(245,239,198,.12);transform:scale(1.055)}
.balk.los .bk:active{transform:scale(1.02)}
.balk.los .bk[aria-current="true"]{background:#D8C7A8;color:#330F12}
.balk.los .bk svg{width:24px;height:24px}
.balk.los .streep{width:1px;height:30px;background:rgba(245,239,198,.2);flex:none;margin-inline:4px}
.balk.los .tip{position:absolute;bottom:calc(100% + 13px);left:50%;
  transform:translateX(-50%) translateY(7px) scale(.94);
  background:#F5EFC6;color:#330F12;font-size:.74rem;font-weight:600;
  padding:7px 12px;border-radius:11px;white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .22s,transform .3s var(--soepel)}
.balk.los .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#F5EFC6}
.balk.los .bk:hover .tip,.balk.los .bk:focus-visible .tip{opacity:1;
  transform:translateX(-50%) translateY(0) scale(1)}
.balk.los .telling{position:absolute;top:6px;right:6px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:#D8C7A8;color:#330F12;
  font-size:.6rem;font-weight:700;display:grid;place-items:center;line-height:1}
@media(hover:none){.balk.los .tip{display:none}}
@media(max-width:820px){
  .balk.los .bk.breed{display:none}
  .balk.los .bk{width:clamp(40px,12vw,50px);height:clamp(40px,12vw,50px);border-radius:15px}
  .balk.los .bk svg{width:22px;height:22px}
  .balk.los{gap:clamp(2px,.8vw,5px);padding:clamp(6px,1.6vw,9px)}
  .balk.los .streep{margin-inline:2px}
}
@media(max-width:400px){.balk.los .bk.krap-weg{display:none}}
@media(max-width:640px) and (orientation:portrait){
  .balk.los{gap:2px;padding:6px;border-radius:22px}
  .balk.los .bk{width:44px;height:44px;border-radius:14px}
  .balk.los .bk svg{width:20px;height:20px}
  .balk.los .bk:hover{transform:none}
  .balk.los .bk.breed,.balk.los .bk.krap-weg{display:grid}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ── WooCommerce-blokken ───────────────────────────────────
   Het mandje en het afrekenen zijn hier blokpagina's en geen shortcodes —
   nagemeten op de site. Die blokken tekenen hun eigen vakken en gaan uit van
   een lichte achtergrond; zonder deze regels staat er zwarte tekst op zwart. */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__submit-container,
.wc-block-components-product-name,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__description,
.wc-block-components-checkout-step__description{color:var(--ink)}
.wc-block-components-checkout-step__title{font-family:var(--serif);font-weight:500}
.wc-block-components-checkout-step__description,
.wc-block-components-order-summary-item__individual-price,
.wc-block-components-product-metadata{color:var(--ink-2)}

.wc-block-checkout__form,
.wc-block-components-checkout-step{border-color:rgba(245,239,198,.14)}
.wc-block-components-sidebar,
.wc-block-components-panel,
.wc-block-components-order-summary{
  background:rgba(35,24,21,.42);border:1px solid var(--glas-rand);
  border-radius:18px;padding:16px}
.wc-block-components-totals-wrapper{border-top-color:rgba(245,239,198,.14)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--serif);font-size:1.3rem}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__select,
.wc-block-components-combobox input{
  background:rgba(35,24,21,.55)!important;color:var(--ink)!important;
  border:1px solid var(--glas-rand)!important;border-radius:14px!important;
  min-height:48px;padding:12px 15px}
.wc-block-components-text-input label,
.wc-block-components-select__label,
.wc-block-components-combobox label{color:var(--ink-3)!important}
.wc-block-components-text-input.is-active label{color:var(--ink-2)!important}
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label{color:var(--ink)}
.wc-block-components-radio-control__option{
  border-color:rgba(245,239,198,.14);color:var(--ink)}
.wc-block-components-radio-control-accordion-option{
  border:1px solid var(--glas-rand);border-radius:14px;margin-bottom:8px}

.wc-block-cart-items__row,
.wc-block-components-order-summary-item{
  border-bottom:1px solid rgba(245,239,198,.12)}
.wc-block-cart-item__remove-link{color:var(--ink-3)}
.wc-block-components-quantity-selector{
  border:1px solid var(--glas-rand);border-radius:12px}
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button{color:var(--ink);background:transparent}


/* ── de winkel rechtgezet ──────────────────────────────────
   WooCommerce zet zelf een breedte en een float op elke tegel (22,05% en
   consorten). Binnen een grid worden die breedtes alsnog toegepast op de cel,
   en dan staat elke producttitel woord voor woord onder elkaar. */
.woocommerce ul.products li.product{
  width:auto!important;float:none!important;margin:0!important;clear:none!important;
  display:flex;flex-direction:column;position:relative}
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products li.product a img{
  width:100%;height:auto;margin:0 0 12px;border-radius:14px;display:block}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.02rem;line-height:1.25;margin:0 0 6px;overflow-wrap:break-word}
.woocommerce ul.products li.product .button{
  margin-top:auto;width:100%;white-space:normal;padding:11px 16px;min-height:44px}

/* het "Aanbieding!"-vaantje: wijnrood vlak met crème erop, niet dat olijfgroen */
.woocommerce span.onsale{
  position:absolute;top:10px;right:10px;left:auto;margin:0;
  min-width:0;min-height:0;padding:5px 11px;border-radius:999px;
  background:var(--wijn);color:var(--creme);line-height:1.4;
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* van-voor prijzen: de oude prijs mag zacht, de nieuwe geen streep eronder */
.woocommerce del{opacity:.5;text-decoration:line-through;font-size:.86em}
.woocommerce ins{background:transparent;text-decoration:none;font-weight:600;color:var(--ink)}
.woocommerce ul.products li.product .price{margin:0 0 12px;display:block}

/* aantal resultaten links, sortering rechts, en niet over de volle breedte */
.woocommerce .woocommerce-result-count{float:left;margin:0 0 20px}
.woocommerce .woocommerce-ordering{float:right;margin:0 0 20px}
.woocommerce .woocommerce-ordering select{width:auto;min-width:210px}
.woocommerce ul.products{clear:both}

/* ── de winkelpagina's staan in dezelfde ruimte ─────────────
   Niet echt een andere pagina, maar een venster in dezelfde wereld: hetzelfde
   beeld van de studio erachter, gedempt, met de inhoud op glas erop. */
.podium-stil{position:fixed;inset:0;z-index:-2;
  background:url(assets/img/poster.jpg) center/cover no-repeat fixed}
.podium-stil::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(35,24,21,.86),rgba(35,24,21,.93))}
body{background:var(--java)}

.kaart{border-radius:28px}
.kaft{position:relative;z-index:1}
.raam{position:relative;z-index:1}

/* De lege plaatjes van WooCommerce zijn lichte vierkanten en die schreeuwen op
   een donkere pagina. Weg ermee tot er echte productfoto's zijn. */
.woocommerce ul.products li.product img[src*="woocommerce-placeholder"],
.woocommerce div.product img[src*="woocommerce-placeholder"]{display:none}

/* de kruisverkoop onderaan het mandje */
.woocommerce .cross-sells h2,
.woocommerce .cart_totals h2,
.woocommerce-cart .wc-block-cart__empty-cart__title{
  font-family:var(--serif);font-weight:500}
.wc-block-cart__empty-cart__title,
.wc-block-components-title{color:var(--ink)}

/* ── het lege mandje en de kruisverkoop ────────────────────
   WooCommerce zet hier een blok neer dat op een lichte pagina is bedacht:
   een groot wit vlak per product en een verdrietig gezicht op crème. */
.wc-block-cart__empty-cart__title{font-family:var(--serif);font-weight:500;color:var(--ink)}
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{opacity:.5}
.wc-empty-cart-message,.cart-empty{color:var(--ink-2)}

.woocommerce .cross-sells,
.wc-block-cart__submit-container{margin-top:28px}
.woocommerce .cross-sells h2{font-size:1.3rem;margin-bottom:16px}
.woocommerce .cross-sells ul.products li.product,
.wp-block-woocommerce-cart-cross-sells-block li.product{
  background:var(--glas);border:1px solid var(--glas-rand);border-radius:20px;
  padding:16px;box-shadow:var(--schaduw);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}

/* Een product zonder eigen foto krijgt een stukje van de studio, zodat er geen
   wit gat in de tegel staat. */
.woocommerce ul.products li.product a:first-child{
  display:block;border-radius:14px;overflow:hidden;
  background:url(assets/img/poster.jpg) center/cover no-repeat;
  min-height:clamp(90px,12vw,140px);margin-bottom:12px;
  box-shadow:inset 0 0 0 1px rgba(245,239,198,.12)}
.woocommerce ul.products li.product a:first-child img{display:block;margin:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price{padding:0 2px}

/* ── de accountpagina: geen kaders om de formulieren ───────
   WooCommerce tekent standaard een grijs kader met afronding om het inlog- en
   het registratieformulier. Op een donkere pagina zijn dat twee losse dozen
   die niets toevoegen — de kaart eromheen is de omlijsting al. */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password{
  border:0;padding:0;margin:0 0 8px;border-radius:0;background:transparent}
.woocommerce #customer_login .col-1,
.woocommerce #customer_login .col-2{border:0;padding:0;box-shadow:none}
.woocommerce #customer_login.u-columns{display:grid;gap:clamp(22px,4vw,46px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));float:none;width:auto}
.woocommerce #customer_login .col-1,
.woocommerce #customer_login .col-2{float:none;width:auto}
.woocommerce #customer_login h2{font-size:1.2rem;margin-bottom:14px}