/* ==========================================================================
   Merevo — checkout & winkelmand
   Shopify-achtige indeling: mobiel één kolom met de samenvatting
   inklapbaar bovenaan, desktop twee kolommen met sticky samenvatting rechts.
   Laadt uitsluitend op cart/checkout (zie merevo_assets()).
   ========================================================================== */

/* ---------- Checkout-only header ----------
   Shopify toont op de checkout een kale header: logo gecentreerd, geen menu,
   geen afleiding. Onze .site-header wordt daarvoor omgezet. */
.merevo-checkout .site-header{position:static;border-bottom:1px solid var(--line)}
.merevo-checkout .site-header .header-inner{justify-content:center;height:72px}
.merevo-checkout .site-header .main-nav,
.merevo-checkout .site-header .header-actions{display:none}
.merevo-checkout .site-header .brand .brand-logo,
.woocommerce-page.merevo-checkout .site-header .brand .brand-logo{height:56px}
.merevo-checkout .site-header .brand-text{font-size:1.35rem}
.merevo-checkout .site-footer{margin-top:0;background:transparent;color:var(--muted);border-top:1px solid var(--line);padding:24px 0}
.merevo-checkout .site-footer .footer-grid,
.merevo-checkout .site-footer .footer-bottom > span:last-child{display:none}
.merevo-checkout .site-footer .footer-bottom{border-top:0;margin-top:0;padding-top:0;font-size:.8rem}

/* De breadcrumb/paginakop van Woo is op checkout overbodig. */
.merevo-checkout .page-hero,
.merevo-checkout .woocommerce-breadcrumb{display:none}

/* ---------- Layout ---------- */
.wc-block-checkout,
.wp-block-woocommerce-checkout{max-width:1100px;margin:0 auto;padding:0}
.wc-block-components-main{padding:0}

.wc-block-checkout__form,
.wc-block-checkout__main{padding:0}

/* ---------- Typografie & koppen ---------- */
.wc-block-components-title,
.wc-block-components-checkout-step__title{
  font-size:1.05rem !important;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 4px;
}
.wc-block-components-checkout-step__description{
  color:var(--muted);font-size:.88rem;margin-bottom:14px;
}
.wc-block-components-checkout-step{
  padding:0 0 26px;border:0;
}
.wc-block-components-checkout-step__container{padding:0}
.wc-block-components-checkout-step__heading{margin:0 0 10px}

/* ---------- Velden ---------- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-select__container,
.wc-block-components-combobox-control input.components-combobox-control__input{
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  background:#fff !important;
  min-height:52px;
  font-size:1rem !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-select select:focus{
  outline:0;
  border-color:var(--brand) !important;
  box-shadow:0 0 0 2px rgba(29,75,63,.18) !important;
}
.wc-block-components-text-input label,
.wc-block-components-select label{color:var(--muted)}
.wc-block-components-text-input.is-active label{color:var(--ink-2)}

/* Adresvelden naast elkaar op desktop (Shopify doet dat met voor-/achternaam). */
@media (min-width:600px){
  .wc-block-components-address-form__first_name,
  .wc-block-components-address-form__last_name{width:calc(50% - 8px);display:inline-block;vertical-align:top}
  .wc-block-components-address-form__first_name{margin-right:16px}
  .wc-block-components-address-form__postcode{width:calc(38% - 8px);display:inline-block;margin-right:16px;vertical-align:top}
  .wc-block-components-address-form__city{width:62%;display:inline-block;vertical-align:top}
}

/* ---------- Keuzeblokken (verzending & betaling) ---------- */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option{
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:10px;
  padding:16px 16px 16px 46px;
  background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
  min-height:56px;
}
.wc-block-components-radio-control__option:last-child{margin-bottom:0}
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:checked){
  border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand);
}
.wc-block-components-radio-control__input{left:16px;width:20px;height:20px}
.wc-block-components-radio-control__input:checked{border-color:var(--brand);background:var(--brand)}
.wc-block-components-radio-control__input:checked::before{background:#fff}
.wc-block-components-radio-control__label{font-weight:600;font-size:.95rem}
.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description{color:var(--muted);font-size:.88rem;font-weight:400}

/* ---------- Ordersamenvatting ---------- */
/* Eén kader om de samenvatting. Let op: op de checkout dragen sidebar en
   totals-block dezelfde classes — beide stylen geeft een dubbele rand. */
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar .wc-block-components-sidebar{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
}
/* Binnenliggende panelen hebben zelf geen kader nodig. */
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{
  border:0;background:transparent;padding:0;
}
.wc-block-components-order-summary__content{margin:0}
.wc-block-components-order-summary-item{
  padding:14px 0;border-bottom:1px solid var(--line);
}
.wc-block-components-order-summary-item:last-child{border-bottom:0}
.wc-block-components-order-summary-item__image img{
  border-radius:var(--radius);background:#fff;border:1px solid var(--line);
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name{
  font-weight:600;color:var(--ink);font-size:.92rem;
  hyphens:none;overflow-wrap:anywhere;
}
.wc-block-components-product-metadata{color:var(--muted);font-size:.84rem}
/* Woo laat de metadata standaard afkappen op één regel ("Diepgro en");
   de variant moet volledig leesbaar zijn. */
.wc-block-components-product-metadata__description,
.wc-block-components-product-details{
  display:block;overflow:visible;text-overflow:clip;white-space:normal;
}
.wc-block-components-product-details__name{font-weight:400}
.wc-block-components-order-summary-item__image{width:56px;flex:0 0 56px}
.wc-block-components-order-summary-item__total-price{white-space:nowrap;padding-left:10px}
.wc-block-components-totals-item{padding:8px 0;font-size:.95rem}
.wc-block-components-totals-item__label{color:var(--ink-2)}
.wc-block-components-totals-footer-item{
  border-top:1px solid var(--line);margin-top:10px;padding-top:16px;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  font-size:1.05rem;font-weight:700;color:var(--ink);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:1.35rem;font-weight:700;color:var(--ink);
}
.wc-block-components-totals-footer-item__description{color:var(--muted);font-size:.82rem}

/* ---------- Knoppen ---------- */
.wc-block-components-checkout-place-order-button{
  background:var(--brand) !important;
  border-radius:var(--radius) !important;
  min-height:56px;
  font-size:1rem !important;
  font-weight:600 !important;
  width:100%;
}
.wc-block-components-checkout-place-order-button:hover:not(:disabled){background:var(--brand-dark) !important}
.wc-block-components-button:not(.is-link){border-radius:var(--radius)}

/* Express-betaalknoppen (Apple Pay / iDEAL via Mollie) bovenaan, zoals Shopify. */
.wp-block-woocommerce-checkout-express-payment-block{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 16px;
  margin-bottom:22px;
}
.wc-block-components-express-payment__title-container{margin-bottom:12px}
.wc-block-components-express-payment-continue-rule{
  color:var(--muted);font-size:.82rem;margin:20px 0;
}

/* ---------- Meldingen ---------- */
.wc-block-components-notice-banner{
  border-radius:var(--radius);
  border-width:1px;
  align-items:flex-start;
}
.wc-block-components-notice-banner.is-error{border-color:#d63638;background:#fef7f7}
.wc-block-components-notice-banner.is-info{border-color:var(--brand);background:var(--bg-2)}

/* ---------- Vertrouwensregel onder de bestelknop ---------- */
.merevo-trust{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
  margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  color:var(--muted);font-size:.82rem;list-style:none;
}
.merevo-trust li{display:flex;align-items:center;gap:6px}
.merevo-trust svg{width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:1.8;flex:0 0 15px}

/* ---------- Winkelmand ---------- */
.wc-block-cart__submit-button{
  background:var(--brand) !important;min-height:56px;border-radius:var(--radius) !important;
  font-weight:600;font-size:1rem;
}
.wc-block-cart__submit-button:hover{background:var(--brand-dark) !important}
.wc-block-cart-items__header{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.wc-block-cart-item__image img{border-radius:var(--radius);border:1px solid var(--line)}
.wc-block-components-product-name{font-weight:600;color:var(--ink)}
.wc-block-cart-item__wrap{padding:18px 0}

/* ---------- Mobiel ---------- */
@media (max-width:781px){
  /* Samenvatting bovenaan, zoals Shopify's inklapbare orderbalk.
     Geen vaste hoogte: de uitklapknop moet volledig zichtbaar blijven. */
  .wc-block-checkout__sidebar{
    margin-bottom:22px;padding:4px 16px;
    position:static !important;overflow:visible;
  }
  .wc-block-components-checkout-order-summary__title{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:14px 0;margin:0;
  }
  .wc-block-components-checkout-order-summary__title-text{font-size:1rem}
  .wc-block-components-panel__button{padding:14px 0;min-height:52px}
}

/* ---------- Desktop: twee kolommen, sticky samenvatting ----------
   Woo's eigen sidebar-layout geeft de samenvatting maar ~247px, waardoor
   productnamen in drie regels breken. We zetten er een grid overheen met
   een ruimere rechterkolom (Shopify hanteert daar ongeveer 40%). */
@media (min-width:782px){
  .wc-block-components-sidebar-layout.wc-block-checkout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,400px);
    gap:0 56px;
    align-items:start;
  }
  .wc-block-checkout__main{
    width:auto !important;max-width:none !important;
    padding-right:0;grid-column:1;
  }
  .wc-block-checkout__sidebar{
    width:auto !important;max-width:none !important;
    grid-column:2;position:sticky;top:24px;
  }
  .wc-block-checkout__form{max-width:none}
}

/* "Verder winkelen"-knop in de lege/gevulde winkelmand kwam net onder de
   44px-tapdoelrichtlijn uit. */
.wc-block-cart .wp-block-button__link,
.wc-block-cart__empty-cart__title + * .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link{
  min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:var(--radius);
}