/* ═══════════════════════════════════════════════════════════════
   StudioLeb. — binnen
   De pagina's buiten de voorpagina: winkelwagen, afrekenen, bestelling
   ontvangen, Mijn account, wachtwoord vergeten, de juridische pagina's en de
   404. Ze horen eruit te zien als de voorpagina: hetzelfde glas, dezelfde
   kleuren van het gekozen thema, Lora voor de koppen, dezelfde knoppen.

   Dit bestand laadt alleen op die pagina's, ná style.css en ná de opmaak van
   WooCommerce. Alles hangt aan body.binnen (header.php), zodat het de blokken
   van WooCommerce overstemt zonder overal !important te hoeven zetten. De
   voorpagina laadt dit niet en verandert er dus niet door.
   ═══════════════════════════════════════════════════════════════ */

/* ── de kleuren: dezelfde als in ruimte.css ─────────────────
   Wijn is de standaard. Kies je in het accountvenster een ander thema, dan
   zet een regeltje in header.php `data-thema` op <html> voordat er iets
   getekend wordt, net als op de voorpagina. */
:root{
  --ink-rgb:245,239,198;
  --java-rgb:51,15,18;
  --creme:#F5EFC6; --java:#330F12; --wijn:#4D0E12;
  --blauw:#D8C7A8; --aarde:#4D0E12; --blauw-rgb:216,199,168;
  --ink:var(--creme);
  --ink-2:rgba(var(--ink-rgb),.72);
  --ink-3:rgba(var(--ink-rgb),.45);
  --glas:rgba(77,14,18,.44);
  --glas-rand:rgba(255,255,255,.26);
  --lijn:rgba(var(--ink-rgb),.14);
  --vak:rgba(var(--java-rgb),.55);
  --schaduw:0 2px 8px rgba(10,6,5,.30), 0 22px 60px -22px rgba(10,6,5,.75);
  --fout:#F0A8A0; --fout-rgb:240,168,160;
}
:root[data-thema="java"]{
  --java:#231815; --aarde:#4A2E27; --blauw:#A5BCD6; --blauw-rgb:165,188,214;
  --java-rgb:35,24,21; --glas:rgba(28,18,16,.42)}
:root[data-thema="aarde"]{
  --java:#3A241E; --aarde:#5A3A32; --blauw:#A5BCD6; --blauw-rgb:165,188,214;
  --java-rgb:58,36,30; --glas:rgba(90,58,50,.46)}
:root[data-thema="nacht"]{
  --java:#140C0A; --aarde:#2A1B16; --blauw:#A5BCD6; --blauw-rgb:165,188,214;
  --java-rgb:20,12,10; --glas:rgba(20,12,10,.5)}

body.binnen{background:var(--java);color:var(--ink)}
body.binnen .podium-stil::after{
  background:linear-gradient(rgba(var(--java-rgb),.80),rgba(var(--java-rgb),.92))}
body.binnen a{color:var(--blauw)}
body.binnen h1,body.binnen h2,body.binnen h3,body.binnen h4,
body.binnen .wc-block-components-title,
body.binnen .wc-block-components-checkout-step__title{
  font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:0}

/* ── het glas ───────────────────────────────────────────── */
/* De balk onderin heeft zijn eigen glas (style.css, .balk.los) en moet vast
   onderin blijven staan: die doet hier niet mee. */
body.binnen .glas:not(.balk){position:relative;overflow:hidden;background:var(--glas);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid var(--glas-rand);box-shadow:var(--schaduw)}
body.binnen .glas:not(.balk)::before{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(163deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 34%,
             transparent 62%)}
body.binnen .kaart{border-radius:28px;padding:clamp(20px,3.4vw,40px)}
body.binnen .kaart>*{position:relative}
body.binnen .kaart>h1{font-size:clamp(1.8rem,4.4vw,2.8rem);margin:0 0 .6em}

/* Een vlak binnen het glas: de samenvatting, de totalen, een adres. Lichter
   dan de kaart zelf, zodat het er als een tweede laag op ligt. */
body.binnen .wc-block-components-sidebar,
body.binnen .wc-block-checkout__sidebar .wc-block-components-order-summary,
body.binnen .wc-block-components-panel,
body.binnen .woocommerce-Address,
body.binnen .woocommerce-customer-details address,
body.binnen .woocommerce-order-overview,
body.binnen .woocommerce-MyAccount-content>.woocommerce-info,
body.binnen fieldset{
  background:rgba(var(--ink-rgb),.05);border:1px solid var(--lijn);border-radius:18px}

/* ── knoppen ────────────────────────────────────────────────
   Eén hoofdknop, zoals op de voorpagina: een vol vlak in de accentkleur van
   het thema met donkere tekst. Wat minder belangrijk is, krijgt glas. */
body.binnen .kn,
body.binnen .woocommerce .button,
body.binnen .woocommerce button.button,
body.binnen .woocommerce a.button,
body.binnen .woocommerce input.button,
body.binnen .woocommerce-Button,
body.binnen .woocommerce-button,
body.binnen .wc-block-components-button:not(.is-link),
body.binnen .wp-element-button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 26px;border-radius:999px;
  border:1px solid var(--blauw);background:var(--blauw);color:var(--java);
  font-family:var(--ui);font-size:.95rem;font-weight:600;line-height:1.1;
  text-decoration:none;box-shadow:0 10px 26px -14px rgba(10,6,5,.8);cursor:pointer;
  transition:transform .34s var(--soepel),filter .3s,background .3s}
body.binnen .kn:hover,
body.binnen .woocommerce .button:hover,
body.binnen .woocommerce-Button:hover,
body.binnen .woocommerce-button:hover,
body.binnen .wc-block-components-button:not(.is-link):hover,
body.binnen .wp-element-button:hover{
  background:var(--blauw);color:var(--java);filter:brightness(1.08);transform:translateY(-2px)}
body.binnen .wc-block-components-button:not(.is-link) .wc-block-components-button__text{color:inherit}
body.binnen .wc-block-components-button:disabled,
body.binnen .button:disabled,
body.binnen .button.disabled{opacity:.5;transform:none;filter:none}

/* de kleine knoppen in tabellen (Bekijk, Betalen, Annuleren) */
body.binnen .woocommerce .woocommerce-orders-table a.button,
body.binnen .woocommerce .woocommerce-MyAccount-downloads a.button,
body.binnen .woocommerce .woocommerce-table--order-downloads a.button,
body.binnen .woocommerce .order-again a.button{
  min-height:38px;padding:8px 16px;font-size:.82rem;font-weight:500;
  background:rgba(var(--ink-rgb),.08);border-color:var(--glas-rand);color:var(--ink);
  box-shadow:none;margin:2px 4px 2px 0}
body.binnen .woocommerce .woocommerce-orders-table a.button:hover{background:rgba(var(--ink-rgb),.16);color:var(--ink);filter:none}

/* tekstknoppen: wijzigen, verwijderen, waardebon */
body.binnen .wc-block-components-button.is-link,
body.binnen .wc-block-cart-item__remove-link,
body.binnen .woocommerce-Address-title .edit{color:var(--ink-2);text-decoration:underline;
  text-underline-offset:3px;background:transparent;border:0;box-shadow:none}

/* ── invoervelden ──────────────────────────────────────────── */
body.binnen input[type=text],body.binnen input[type=email],body.binnen input[type=password],
body.binnen input[type=tel],body.binnen input[type=number],body.binnen input[type=search],
body.binnen input[type=url],body.binnen input[type=date],body.binnen textarea,body.binnen select,
body.binnen .woocommerce form .form-row .input-text,
body.binnen .wc-block-components-text-input input,
body.binnen .wc-block-components-textarea{
  background:var(--vak)!important;color:var(--ink)!important;
  border:1px solid var(--glas-rand)!important;border-radius:14px!important;
  box-shadow:none!important;font-family:var(--ui)}
body.binnen input:focus,body.binnen textarea:focus,body.binnen select:focus,
body.binnen .wc-block-components-text-input input:focus{
  border-color:var(--blauw)!important;outline:none;
  box-shadow:0 0 0 3px rgba(var(--blauw-rgb),.22)!important}
body.binnen input::placeholder,body.binnen textarea::placeholder{color:var(--ink-3)}
body.binnen .wc-block-components-text-input label,
body.binnen .woocommerce form .form-row label,
body.binnen .woocommerce-form label{color:var(--ink-2)!important}
body.binnen .wc-block-components-text-input.is-active label{color:var(--ink-3)!important}
body.binnen .woocommerce form .form-row .required,
body.binnen .wc-block-components-text-input .required{color:var(--blauw)}
/* het oogje bij een wachtwoord */
body.binnen .show-password-input,
body.binnen .wc-block-components-text-input .wc-block-components-text-input__password-toggle,
body.binnen .woocommerce form .show-password-input{color:var(--ink-2);background:transparent}
body.binnen .show-password-input::after{color:var(--ink-2)}
/* WooCommerce tekent het oogje als een donker plaatje: omgekeerd wordt het crème. */
body.binnen .show-password-input::before{filter:invert(1) brightness(1.6);opacity:.75}

/* Land/regio: een keuzelijst die WooCommerce zelf een wit vlak geeft. */
body.binnen .wc-blocks-components-select .wc-blocks-components-select__container{
  background:var(--vak);border:1px solid var(--glas-rand);border-radius:14px;box-shadow:none}
body.binnen .wc-blocks-components-select .wc-blocks-components-select__select{
  background:transparent!important;border:0!important;color:var(--ink)!important;
  box-shadow:none!important}
body.binnen .wc-blocks-components-select .wc-blocks-components-select__label{color:var(--ink-3)}
body.binnen .wc-blocks-components-select .wc-blocks-components-select__expand{fill:var(--ink-2)}
body.binnen .wc-blocks-components-select__select option{background:var(--java);color:var(--ink)}
/* het land in Mijn account (select2) */
body.binnen .select2-container--default .select2-selection--single{
  background:var(--vak);border:1px solid var(--glas-rand);border-radius:14px;min-height:50px}
body.binnen .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink);line-height:48px;padding-left:15px}
body.binnen .select2-dropdown{background:var(--java);border-color:var(--glas-rand);color:var(--ink)}
body.binnen .select2-results__option--highlighted[aria-selected],
body.binnen .select2-container--default .select2-results__option--highlighted[data-selected]{
  background:var(--blauw);color:var(--java)}

/* ── vinkjes en rondjes ──────────────────────────────────────
   Een donker vakje met een rand van glas. Aangevinkt vult het zich met de
   accentkleur; het vinkje zelf is dan donker. */
body.binnen .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox],
body.binnen input[type=checkbox]:not(.wc-block-components-checkbox__input){
  -webkit-appearance:none;appearance:none;width:22px;height:22px;min-width:22px;margin:0;
  border:1px solid rgba(var(--ink-rgb),.4);border-radius:7px;background:var(--vak);
  display:inline-grid;place-content:center;cursor:pointer;vertical-align:middle;
  transition:background .2s,border-color .2s}
body.binnen .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked,
body.binnen input[type=checkbox]:not(.wc-block-components-checkbox__input):checked{
  background:var(--blauw);border-color:var(--blauw)}
body.binnen .wc-block-components-checkbox .wc-block-components-checkbox__mark{
  fill:var(--java);width:16px;height:16px;margin-left:3px;margin-top:3px}
/* een gewoon vinkje (Mijn account, onthouden) tekent zijn vinkje zelf */
body.binnen input[type=checkbox]:not(.wc-block-components-checkbox__input)::after{
  content:"";width:11px;height:6px;border:2px solid var(--java);border-top:0;border-right:0;
  transform:rotate(-45deg) translate(1px,-1px);opacity:0}
body.binnen input[type=checkbox]:not(.wc-block-components-checkbox__input):checked::after{opacity:1}
body.binnen .wc-block-components-checkbox__label{color:var(--ink);line-height:1.5}
body.binnen .wc-block-components-checkbox__label a{color:var(--blauw)}
body.binnen .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input{
  border-color:var(--fout);box-shadow:0 0 0 3px rgba(var(--fout-rgb),.22)}

body.binnen .wc-block-components-radio-control__input,
body.binnen input[type=radio]{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;min-width:22px;
  border:1px solid rgba(var(--ink-rgb),.45)!important;border-radius:50%;
  background:var(--vak)!important;display:inline-grid;place-content:center;cursor:pointer}
body.binnen .wc-block-components-radio-control__input:checked::before,
body.binnen input[type=radio]:checked::before{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--blauw);
  position:static;transform:none;display:block}
body.binnen .wc-block-components-radio-control__input:checked{border-color:var(--blauw)!important}

/* De betaalkeuze: elke methode een eigen glazen regel. De gekozen krijgt de
   rand in de accentkleur. Wat Stripe in zijn eigen venster tekent (kaart,
   bank voor iDEAL) neemt deze kleuren zelf over van de velden hierboven. */
body.binnen .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option,
body.binnen .wc-block-components-radio-control-accordion-option{
  border:1px solid var(--glas-rand)!important;border-radius:16px;margin:0 0 8px;
  background:rgba(var(--ink-rgb),.04);box-shadow:none!important}
body.binnen .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.binnen .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted{
  border-color:var(--blauw)!important;box-shadow:0 0 0 1px var(--blauw) inset!important;
  background:rgba(var(--blauw-rgb),.08)}
body.binnen .wc-block-components-radio-control--highlight-checked::after{display:none}
body.binnen .wc-block-components-radio-control__label,
body.binnen .wc-block-components-radio-control__option{color:var(--ink)}
body.binnen .wc-block-components-radio-control__description,
body.binnen .wc-block-components-radio-control__secondary-label,
body.binnen .wc-block-components-radio-control-accordion-content{color:var(--ink-2)}
body.binnen .wc-block-components-radio-control-accordion-content{padding-bottom:16px}
/* de betaalmethoden in de klassieke afrekenpagina en bij een openstaande bestelling */
body.binnen #payment{background:transparent}
body.binnen #payment ul.payment_methods{border:0;padding:0}
body.binnen #payment ul.payment_methods li{
  border:1px solid var(--glas-rand);border-radius:16px;padding:14px 16px;margin:0 0 8px;
  background:rgba(var(--ink-rgb),.04);color:var(--ink)}
body.binnen #payment div.payment_box{background:rgba(var(--java-rgb),.5);color:var(--ink-2);border-radius:12px}
body.binnen #payment div.payment_box::before{display:none}

/* ── de stappen van afrekenen ───────────────────────────────── */
body.binnen .wc-block-components-checkout-step{border:0}
body.binnen .wc-block-components-checkout-step__heading{margin-bottom:14px}
body.binnen .wc-block-components-checkout-step__title{font-size:1.4rem}
body.binnen .wc-block-components-checkout-step__description,
body.binnen .wc-block-components-address-form__address_2-toggle,
body.binnen .wc-block-components-checkout-step__heading-content a{color:var(--ink-2)}
body.binnen .wc-block-checkout__terms,
body.binnen .wc-block-checkout__terms span{color:var(--ink-2)}
body.binnen .wc-block-components-express-payment--checkout{
  border-color:var(--lijn)}
body.binnen .wc-block-components-express-payment__title-container::before,
body.binnen .wc-block-components-express-payment__title-container::after{border-color:var(--lijn)}
body.binnen .wc-block-components-express-payment__title{color:var(--ink-2)}
body.binnen .wc-block-components-express-payment-continue-rule,
body.binnen .wc-block-components-express-payment-continue-rule::before,
body.binnen .wc-block-components-express-payment-continue-rule::after{color:var(--ink-3);border-color:var(--lijn)}
body.binnen .wc-block-components-validation-error,
body.binnen .wc-block-components-validation-error p{color:var(--fout)}
body.binnen .has-error input,body.binnen .has-error select{border-color:var(--fout)!important}
body.binnen .wc-block-components-checkout-place-order-button{width:100%}
body.binnen .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button{color:var(--ink-2)}
body.binnen .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button svg{fill:var(--ink-2)}

/* ── samenvatting en totalen ────────────────────────────────── */
/* Het besteloverzicht bij afrekenen: één vlak, niet een vlak in een vlak.
   style.css gaf de samenvatting zelf nog een bruin vak van vóór de
   themakleuren; hier wordt de buitenste omlijsting het vlak. */
body.binnen .checkout-order-summary-block-fill{
  background:rgba(var(--ink-rgb),.05);border:1px solid var(--lijn)!important;
  border-radius:18px!important;padding:4px 16px}
body.binnen .checkout-order-summary-block-fill .wc-block-components-order-summary,
body.binnen .wc-block-checkout__sidebar .checkout-order-summary-block-fill .wc-block-components-order-summary{
  background:transparent;border:0;border-radius:0;padding:0}
body.binnen .wc-block-components-order-summary .wc-block-components-order-summary-item__description{
  padding-left:12px}
body.binnen .wc-block-components-sidebar,
body.binnen .wc-block-checkout__sidebar .wc-block-components-order-summary{padding:18px}
body.binnen .wc-block-components-sidebar .wc-block-components-panel,
body.binnen .wc-block-components-sidebar .wc-block-components-order-summary{
  background:transparent;border:0;padding:0}
body.binnen .wc-block-components-totals-wrapper,
body.binnen .wc-block-components-order-summary-item,
body.binnen .wc-block-cart-items__row,
body.binnen .wc-block-cart-items,
body.binnen .wc-block-cart-items th,
body.binnen .wc-block-cart__totals-title{border-color:var(--lijn)!important}
body.binnen .wc-block-components-totals-item__label,
body.binnen .wc-block-components-totals-item__value,
body.binnen .wc-block-components-product-name,
body.binnen .wc-block-components-order-summary-item__total-price,
body.binnen .wc-block-cart-item__total,
body.binnen .wc-block-components-formatted-money-amount,
body.binnen .wc-block-components-panel__button{color:var(--ink)}
body.binnen .wc-block-components-totals-item__description,
body.binnen .wc-block-components-product-metadata,
body.binnen .wc-block-components-product-details,
body.binnen .wc-block-cart-items__header,
body.binnen .wc-block-cart__totals-title,
body.binnen .wc-block-components-order-summary-item__individual-prices,
body.binnen .wc-block-cart-item__prices{color:var(--ink-2)!important}
body.binnen .wc-block-cart-items__header,
body.binnen .wc-block-cart__totals-title{font-size:.7rem!important;letter-spacing:.16em;
  text-transform:uppercase;font-family:var(--ui)!important;font-weight:600}
body.binnen .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.binnen .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--serif);font-size:1.35rem;font-weight:500}
body.binnen .wc-block-components-panel__button,
body.binnen .wc-block-components-panel__button-icon{color:var(--ink);fill:var(--ink)}
body.binnen .wc-block-components-product-name{font-family:var(--serif);font-size:1.05rem;
  text-decoration:none;font-weight:500}
/* het gekozen moment en de andere gegevens onder een product */
body.binnen .wc-block-components-product-details__name{color:var(--ink-3)}
body.binnen .wc-block-components-product-details__value{color:var(--ink)}

/* Het aantal in de winkelwagen. Bij een sessie of een nachttoeslag staat dat
   vast, maar WooCommerce tekent er een kadertje met plus en min omheen. */
body.binnen .wc-block-components-quantity-selector{
  border:1px solid var(--glas-rand);border-radius:12px;background:var(--vak)}
body.binnen .wc-block-components-quantity-selector::after{border:0}
body.binnen .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
  background:transparent!important;border:0!important;color:var(--ink)!important;box-shadow:none!important}
body.binnen .wc-block-components-quantity-selector__button{color:var(--ink-2);background:transparent}

/* ── T2: geen lege fotovakken ───────────────────────────────
   Onze producten hebben geen foto. WooCommerce zet dan een grijs vak met een
   bergje neer. Weg ermee: de naam, het moment en de prijs krijgen de ruimte. */
body.binnen .wc-block-cart-item__image,
body.binnen .wc-block-cart-items__header-image,
body.binnen .woocommerce td.product-thumbnail,
body.binnen .woocommerce th.product-thumbnail{display:none!important}
body.binnen .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row{
  grid-template-columns:1fr auto!important}
body.binnen .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product{
  grid-column:1/2!important;padding:0!important}
body.binnen .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{
  grid-column:2/3!important}
body.binnen .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity{
  grid-column:1/3!important}
body.binnen .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product{padding-left:0!important}
/* In de samenvatting van afrekenen zit het aantal ín het fotovak. Het fotovak
   wordt een klein label met alleen het aantal: 3× voor drie uur toeslag. */
body.binnen .wc-block-components-order-summary .wc-block-components-order-summary-item__image{
  width:auto;min-width:0;margin-top:2px;padding:0}
body.binnen .wc-block-components-order-summary .wc-block-components-order-summary-item__image>img{display:none}
body.binnen .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity{
  position:static;transform:none;background:rgba(var(--ink-rgb),.1);
  border:1px solid var(--lijn);border-radius:99px;min-height:24px;min-width:34px}
body.binnen .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span{
  color:var(--ink);font-size:.78rem;font-weight:600}
body.binnen .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span[aria-hidden]::after{content:"×"}

/* ── T3: de balk mag niets afdekken ────────────────────────
   Op een telefoon zet WooCommerce de knop Doorgaan naar afrekenen nog een keer
   vast onderin beeld. Die viel precies onder onze balk, zodat totaal en knop
   niet te zien en niet aan te tikken waren. De gewone knop bij het totaal
   blijft staan; deze tweede is niet nodig. En onderaan elke pagina komt
   genoeg ruimte voor de balk, ook boven de thuisbalk van een iPhone. */
body.binnen .wc-block-cart .wc-block-cart__submit-container--sticky{display:none!important}
body.binnen .raam{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
body.binnen .balk{bottom:calc(clamp(12px,2vh,20px) + env(safe-area-inset-bottom,0px))}

/* ── de lege winkelwagen ─────────────────────────────────────
   Zonder "Nieuw in de winkel": dat zijn producten met lege fotovakken, en
   kopen doe je hier bij de pakketten. De balk brengt je daar. */
body.binnen .wp-block-woocommerce-empty-cart-block .wp-block-separator,
body.binnen .wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title),
body.binnen .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new,
body.binnen .wp-block-woocommerce-empty-cart-block .wc-block-grid,
body.binnen .wp-block-woocommerce-empty-cart-block [data-block-name="woocommerce/product-new"]{display:none!important}
body.binnen .wc-block-cart__empty-cart__title{font-family:var(--serif);font-size:1.4rem;
  color:var(--ink);text-align:left;margin:0}
body.binnen .wc-block-cart__empty-cart__title.with-empty-cart-icon::before{display:none}
body.binnen .leeg-verder{margin:22px 0 0}

/* ── meldingen binnen de blokken ────────────────────────────── */
body.binnen .wc-block-components-notices{margin-bottom:6px}

/* ── tabellen: bestellingen, details, de juridische pagina's ── */
body.binnen table,
body.binnen .woocommerce table.shop_table,
body.binnen .wp-block-table table{
  width:100%;border-collapse:separate;border-spacing:0;margin:0 0 24px;
  border:1px solid var(--lijn)!important;border-radius:16px;overflow:hidden;
  background:rgba(var(--ink-rgb),.04)}
body.binnen table th,body.binnen table td,
body.binnen .woocommerce table.shop_table th,
body.binnen .woocommerce table.shop_table td,
body.binnen .wp-block-table th,body.binnen .wp-block-table td{
  border:0!important;border-bottom:1px solid var(--lijn)!important;
  padding:12px 15px;text-align:left;color:var(--ink);vertical-align:top}
body.binnen table tr:last-child>td,
body.binnen table tfoot tr:last-child>*{border-bottom:0!important}
body.binnen table th,
body.binnen .woocommerce table.shop_table th,
body.binnen .wp-block-table thead th{
  font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2)}
body.binnen table tfoot th{text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink-2)}
body.binnen table tfoot tr:last-child td,body.binnen table tfoot tr:last-child th{
  font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
body.binnen .wp-block-table{margin:0 0 24px;overflow-x:auto}
body.binnen .wp-block-table thead{border:0}
body.binnen .wp-block-table figcaption{color:var(--ink-3)}
/* op een telefoon wordt elke bestelling een eigen blok */
@media(max-width:768px){
  body.binnen .woocommerce table.shop_table_responsive tr,
  body.binnen .woocommerce-page table.shop_table_responsive tr{
    display:block;border-bottom:1px solid var(--lijn)}
  body.binnen .woocommerce table.shop_table_responsive tr td,
  body.binnen .woocommerce-page table.shop_table_responsive tr td{
    border-bottom:0!important;padding:8px 15px;background:transparent!important}
  body.binnen .woocommerce table.shop_table_responsive tr td::before{color:var(--ink-3);
    font-weight:500;font-size:.78rem}
  body.binnen .woocommerce table.shop_table_responsive tbody tr:first-child td:first-child{border-top:0}
}

/* ── de juridische pagina's en andere gewone pagina's ────────── */
/* Een leesbare regelbreedte voor tekstpagina's. Winkelwagen, afrekenen en
   Mijn account zijn ook pagina's, maar die hebben de volle breedte nodig voor
   hun twee kolommen: die herken je aan woocommerce-page op body. */
body.binnen:not(.woocommerce-page) .kaart.page{max-width:820px;margin:0 auto}
body.binnen .kaart.page h2{font-size:1.5rem;margin:1.6em 0 .5em}
body.binnen .kaart.page h3{font-size:1.2rem;margin:1.5em 0 .45em}
body.binnen .kaart.page p,body.binnen .kaart.page li{color:var(--ink-2);line-height:1.65}
body.binnen .kaart.page strong{color:var(--ink);font-weight:600}

/* ── Mijn account ───────────────────────────────────────────── */
/* T9: terug naar de ruimte, met het accountvenster open (page.php). Een glazen
   pil zoals de tabbladen eronder, met een pijltje zodat je ziet dat hij
   terugbrengt. */
body.binnen .terug-studio{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:0 0 18px;
  padding:8px 16px 8px 11px;border-radius:999px;font-size:.86rem;text-decoration:none;
  color:var(--ink);background:rgba(var(--ink-rgb),.06);border:1px solid var(--glas-rand);
  transition:background .3s}
body.binnen .terug-studio:hover{background:rgba(var(--ink-rgb),.14)}
body.binnen .terug-studio svg{width:17px;height:17px;flex:none}
body.binnen .woocommerce-account .woocommerce{display:block}
body.binnen .woocommerce-MyAccount-navigation{float:none;width:auto;margin:0 0 24px}
body.binnen .woocommerce-MyAccount-navigation ul{
  display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
body.binnen .woocommerce-MyAccount-navigation li{margin:0;padding:0;border:0}
body.binnen .woocommerce-MyAccount-navigation li a{
  display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;
  font-size:.86rem;text-decoration:none;color:var(--ink);
  background:rgba(var(--ink-rgb),.06);border:1px solid var(--glas-rand);
  transition:background .3s}
body.binnen .woocommerce-MyAccount-navigation li a:hover{background:rgba(var(--ink-rgb),.14)}
body.binnen .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--blauw);border-color:var(--blauw);color:var(--java);font-weight:600}
body.binnen .woocommerce-MyAccount-content{float:none;width:auto;color:var(--ink-2)}
body.binnen .woocommerce-MyAccount-content strong{color:var(--ink)}
body.binnen .woocommerce-MyAccount-content>p:first-of-type{color:var(--ink)}
body.binnen .woocommerce-MyAccount-content mark{background:transparent;color:var(--ink);font-weight:600}
/* adressen: twee glazen vlakken naast elkaar, op een telefoon onder elkaar */
body.binnen .woocommerce-Addresses,
body.binnen .woocommerce .col2-set.addresses{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.binnen .woocommerce-Addresses::before,body.binnen .woocommerce-Addresses::after{display:none}
body.binnen .woocommerce-Address{float:none!important;width:auto!important;padding:18px 20px;margin:0}
body.binnen .woocommerce .woocommerce-Address .woocommerce-Address-title{display:flex;align-items:baseline;
  justify-content:space-between;gap:10px;width:100%;margin:0 0 8px;padding:0;text-align:left}
body.binnen .woocommerce .woocommerce-Address .woocommerce-Address-title::before,
body.binnen .woocommerce .woocommerce-Address .woocommerce-Address-title::after{display:none}
body.binnen .woocommerce-Addresses+form,body.binnen .woocommerce-EditAccountForm{margin-top:18px}
body.binnen .woocommerce .woocommerce-Address-title h2,
body.binnen .woocommerce .woocommerce-Address-title h3{font-size:1.15rem;margin:0;padding:0;float:none;text-align:left}
body.binnen .woocommerce-Address-title .edit{float:none;font-size:.82rem}
body.binnen address{font-style:normal;line-height:1.6;color:var(--ink-2)}
@media(max-width:640px){
  body.binnen .woocommerce-Addresses,
  body.binnen .woocommerce .col2-set.addresses{grid-template-columns:1fr}
}
/* inloggen en registreren naast elkaar, als twee vlakken */
body.binnen .woocommerce .col2-set#customer_login{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px)}
body.binnen .woocommerce .col2-set#customer_login::before,
body.binnen .woocommerce .col2-set#customer_login::after{display:none}
body.binnen .woocommerce .col2-set#customer_login>div{float:none;width:auto}
@media(max-width:768px){
  body.binnen .woocommerce .col2-set#customer_login{grid-template-columns:1fr}
}
body.binnen .woocommerce form.login,
body.binnen .woocommerce form.register,
body.binnen .woocommerce form.lost_reset_password,
body.binnen .woocommerce form.checkout_coupon{
  border:0;padding:0;margin:0 0 20px;border-radius:0;background:transparent}
body.binnen .woocommerce form .form-row{padding:0;margin:0 0 16px}
body.binnen .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:9px;
  color:var(--ink-2);margin:0 0 14px}
body.binnen .woocommerce-form-login .woocommerce-form-login__submit{float:none;margin:0 0 14px;width:100%}
body.binnen .woocommerce-LostPassword a,
body.binnen .lost_password a{color:var(--ink-2)}
body.binnen .woocommerce-privacy-policy-text p{font-size:.8rem;color:var(--ink-3)}
/* accountgegevens: het blok Wachtwoord wijzigen */
body.binnen fieldset{padding:16px 18px 4px;margin:10px 0 22px}
body.binnen legend{font-family:var(--serif);font-size:1.1rem;color:var(--ink);padding:0 6px}
body.binnen .woocommerce form .form-row-first,
body.binnen .woocommerce form .form-row-last{width:calc(50% - 7px)}
@media(max-width:640px){
  body.binnen .woocommerce form .form-row-first,
  body.binnen .woocommerce form .form-row-last{width:100%;float:none}
}
body.binnen .woocommerce form .form-row em,
body.binnen .woocommerce-input-wrapper .description{color:var(--ink-3);font-size:.8rem}
body.binnen .woocommerce-pagination .button{min-height:42px}

/* ── bestelling ontvangen en een bestelling bekijken ───────── */
body.binnen .woocommerce-thankyou-order-received,
body.binnen .woocommerce-order>p:first-child{
  font-family:var(--serif);font-size:clamp(1.3rem,3vw,1.8rem);color:var(--ink);line-height:1.3}
/* T8: het overzicht bovenaan. Eerst waren dit vakken van gelijke breedte, en
   een lang mailadres liep dan door het totaal ernaast heen. Nu krijgt elk
   gegeven de breedte die het nodig heeft (op een laptop één rij), en op een
   telefoon of tablet staan ze per twee met het mailadres over de hele breedte.
   Past een woord dan nog niet, dan breekt het af in plaats van eroverheen te
   lopen. De lijntjes tussen de vakken zijn een schaduw links en boven: aan de
   rand van het vlak valt die weg, hoe de vakken ook over de rijen vallen. */
body.binnen ul.woocommerce-order-overview{
  display:flex;flex-wrap:wrap;gap:0;
  list-style:none;margin:0 0 26px;padding:0;overflow:hidden}
body.binnen ul.woocommerce-order-overview::before,
body.binnen ul.woocommerce-order-overview::after{display:none}
body.binnen ul.woocommerce-order-overview li{
  flex:1 1 auto;min-width:0;float:none;margin:0;padding:14px 16px;border:0;
  box-shadow:-1px 0 0 var(--lijn),0 -1px 0 var(--lijn);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
body.binnen ul.woocommerce-order-overview li strong{
  display:block;margin-top:6px;font-family:var(--serif);font-size:1.02rem;line-height:1.35;
  letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
@media(max-width:980px){
  body.binnen ul.woocommerce-order-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.binnen ul.woocommerce-order-overview li.email{grid-column:1/-1}
}
@media(max-width:640px){
  body.binnen ul.woocommerce-order-overview li{padding:13px 14px}
}
/* Het mailadres en het adres onder de bestelling (ook bij Mijn account,
   bestelling bekijken): lange woorden breken af. Niet in de tabelcellen, want
   dan knijpt de tabel de bedragen samen tot ze over twee regels staan. */
body.binnen .woocommerce-customer-details address,
body.binnen .woocommerce-customer-details p{overflow-wrap:anywhere}
body.binnen .woocommerce-order-details__title,
body.binnen .woocommerce-column__title,
body.binnen .woocommerce-customer-details h2{font-size:1.35rem;margin:28px 0 12px}
body.binnen .woocommerce-customer-details address{padding:16px 18px}
body.binnen .woocommerce-customer-details .woocommerce-customer-details--phone,
body.binnen .woocommerce-customer-details .woocommerce-customer-details--email{
  padding-left:0;margin:6px 0 0}
body.binnen .woocommerce-customer-details .woocommerce-customer-details--phone::before,
body.binnen .woocommerce-customer-details .woocommerce-customer-details--email::before{display:none}
body.binnen .wc-item-meta{list-style:none;margin:6px 0 0;padding:0;font-size:.86rem;color:var(--ink-2)}
body.binnen .wc-item-meta li{margin:0}
body.binnen .wc-item-meta .wc-item-meta-label{color:var(--ink-3);font-weight:500}
body.binnen .wc-item-meta p{display:inline;margin:0}
body.binnen .order-status,body.binnen mark.order-status{background:transparent;color:var(--ink)}
body.binnen .woocommerce-order-details .product-quantity{color:var(--ink-2)}

/* ── wachtwoord vergeten en de 404 ──────────────────────────── */
body.binnen form.lost_reset_password>p:first-child{color:var(--ink-2)}
body.binnen .woocommerce-form-row--first,
body.binnen .lost_reset_password .woocommerce-form-row{width:100%;float:none}
body.binnen .kaart.niet-gevonden p{color:var(--ink-2)}

/* ── a SketchLeb website. ───────────────────────────────────────
   De handtekening onder de kaart, in de letter en kleur van de kleine tekst,
   niet opvallender. Alleen een zacht streepje eronder laat zien dat het een
   link is. Hij staat nog binnen .raam (footer.php), dus boven de ruimte voor
   de balk: die dekt hem nooit af. */
body.binnen .ondertekend{margin:22px 0 0;text-align:center;font-size:.79rem;color:var(--ink-2)}
body.binnen .handtekening{color:inherit;text-decoration:underline;
  text-decoration-color:rgba(var(--ink-rgb),.28);text-underline-offset:3px;
  transition:color .3s,text-decoration-color .3s}
body.binnen .handtekening:hover{color:var(--ink);text-decoration-color:currentColor}

/* telefoon: de kaart tot tegen de randen, met ruimte voor de duim */
@media(max-width:640px){
  body.binnen .kaart{border-radius:24px;padding:22px 18px}
  body.binnen .wc-block-components-sidebar,
  body.binnen .wc-block-checkout__sidebar .wc-block-components-order-summary{padding:14px}
}