/*
Theme Name: A-Trip Studio
Theme URI: https://atripstudio.nl
Author: A-Trip Studio
Description: Het eigen thema van A-Trip Studio. 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: a-trip-studio
*/

/* ── 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)}
.voet{padding:0 var(--pad) 120px;color:var(--ink-3);font-size:.82rem;text-align:center}
.voet p{margin:.2em 0}

/* ── 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 ────────────────────────────────────────────── */
.woocommerce-message,.woocommerce-info,.woocommerce-error,
.wc-block-components-notice-banner{
  border-radius:16px;padding:14px 18px;margin:0 0 22px;list-style:none;
  border:1px solid var(--glas-rand);background:rgba(74,46,39,.5);color:var(--ink)}
.woocommerce-message{border-left:3px solid var(--blauw)}
.woocommerce-error{border-left:3px solid #C98A8A}

/* ── 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}
}
@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}

.wc-block-components-notice-banner{color:var(--ink)}
.wc-block-components-notice-banner.is-error{border-left:3px solid #C98A8A}
.wc-block-components-notice-banner.is-success{border-left:3px solid var(--blauw)}

/* ── 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}