/* ==========================================================================
   woocommerce.css — headless cart/checkout/account + notice resets
   Read: hard-won-lessons "Headless cart/checkout/account — three CSS gotchas"
   ========================================================================== */

/* ---------- kill WC's default ::before notice icons (they render as boxes) ---------- */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.wc-block-components-notice-banner::before{content:none !important}

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  padding:12px 18px !important;
  border-radius:var(--radius) !important;
  border:0 !important;
  background:var(--peach-soft) !important;
  color:var(--ink) !important;
  font-family:var(--font-heading) !important;
  font-weight:500 !important;
  font-size:13.5px !important;
  margin:14px 0 !important;
}
.woocommerce-message{border-left:3px solid var(--sage) !important}
.woocommerce-error{background:#fff0ec !important;border-left:3px solid #c85c48 !important;color:#7a2a1a !important}

/* ---------- headless wrapper (used by templates/headless-*.php) ---------- */
.ly-headless{max-width:var(--container);margin:0 auto;padding:36px var(--gutter) 60px}
.ly-headless h1{margin:0 0 .25em}
.ly-headless__eyebrow{margin-bottom:8px}
.ly-headless > .woocommerce{margin-top:24px}

/* ---------- CART page ---------- */
.ly-headless.ly-cart .woocommerce{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:980px){.ly-headless.ly-cart .woocommerce{grid-template-columns:1.6fr 1fr;align-items:start}}

.woocommerce-cart form.woocommerce-cart-form{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:0 2px 8px rgba(140,116,106,.06)}
.woocommerce-cart .shop_table{width:100%;border-collapse:separate;border-spacing:0}
.woocommerce-cart .shop_table th{text-align:left;font-family:var(--font-heading);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-soft);padding:10px 12px;border-bottom:1px solid rgba(140,116,106,.10)}
.woocommerce-cart .shop_table td{padding:14px 12px;vertical-align:middle;border-bottom:1px solid rgba(140,116,106,.06)}
.woocommerce-cart .product-thumbnail img{width:76px;height:76px;object-fit:cover;border-radius:12px}
.woocommerce-cart .product-name a{font-family:var(--font-heading);font-weight:600;color:var(--ink);font-size:13.5px}
.woocommerce-cart .product-price,.woocommerce-cart .product-subtotal{color:var(--ink);font-weight:600}
.woocommerce-cart .quantity input.qty{width:60px;padding:6px;border:1.5px solid rgba(140,116,106,.20);border-radius:8px;text-align:center}
.woocommerce-cart .product-remove a.remove{color:var(--fg-soft);font-size:22px;text-decoration:none}
.woocommerce-cart .product-remove a.remove:hover{color:#c85c48;background:transparent}

/* WC's residual floats + widths — nuke them */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cross-sells{
  width:100% !important;float:none !important
}
.cart_totals{background:var(--peach-soft);border-radius:var(--radius);padding:22px;box-shadow:none}
.cart_totals h2{margin:0 0 14px;font-size:18px}
.cart_totals table.shop_table{width:100%}
.cart_totals table.shop_table th{padding:8px 0;color:var(--fg-soft);font-size:12.5px}
.cart_totals table.shop_table td{padding:8px 0;text-align:right;color:var(--ink);font-weight:600}
.cart_totals .order-total .amount{font-size:20px}
.wc-proceed-to-checkout{margin-top:14px}
.wc-proceed-to-checkout .checkout-button{
  display:flex !important;width:100% !important;min-width:100% !important;
  background:var(--mocha-dark) !important;color:#fff !important;
  padding:14px 20px !important;border-radius:var(--radius-pill) !important;
  font-family:var(--font-heading) !important;font-weight:600 !important;
  text-align:center;justify-content:center;
}
.wc-proceed-to-checkout .checkout-button:hover{background:var(--ink) !important}

.coupon{display:flex;gap:8px;margin-top:12px}
.coupon input[type=text]{flex:1;padding:10px 12px;border:1.5px solid rgba(140,116,106,.20);border-radius:var(--radius-pill);font-size:13.5px}
.coupon .button{padding:10px 16px;border-radius:var(--radius-pill);background:#fff;border:1.5px solid var(--mocha-dark);color:var(--mocha-dark);font-family:var(--font-heading);font-weight:600;font-size:13px}

/* ---------- CHECKOUT ---------- */
.ly-headless.ly-checkout form.checkout{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:980px){.ly-headless.ly-checkout form.checkout{grid-template-columns:1.4fr 1fr;align-items:start}}
#customer_details .col2-set,#customer_details .col-1,#customer_details .col-2{
  width:100% !important;float:none !important
}
#customer_details .col2-set{display:grid;gap:24px}
@media (min-width:640px){#customer_details .col2-set{grid-template-columns:1fr 1fr}}
.woocommerce-billing-fields,.woocommerce-shipping-fields,.woocommerce-additional-fields,#order_review_heading,#order_review{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:0 2px 8px rgba(140,116,106,.06);margin-bottom:20px}
#order_review_heading{margin-bottom:0;padding-bottom:0}
#order_review{padding-top:20px;position:sticky;top:80px}
.woocommerce form .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.woocommerce form .form-row label{font-family:var(--font-heading);font-weight:500;font-size:12.5px;color:var(--fg-soft)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{
  padding:11px 14px;border:1.5px solid rgba(140,116,106,.20);border-radius:12px;font-size:14px;background:#fff;width:100%
}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,.woocommerce form .form-row select:focus{outline:none;border-color:var(--mocha-dark)}

#place_order{
  display:flex !important;width:100% !important;min-width:100% !important;
  background:var(--mocha-dark) !important;color:#fff !important;
  padding:14px 20px !important;border-radius:var(--radius-pill) !important;
  font-family:var(--font-heading) !important;font-weight:600 !important;
  text-align:center;justify-content:center;
}
#place_order:hover{background:var(--ink) !important}

.wc_payment_methods{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.wc_payment_method{border:1.5px solid rgba(140,116,106,.15);border-radius:12px;padding:12px 14px;background:#fff}
.wc_payment_method label{cursor:pointer;font-family:var(--font-heading);font-weight:500;color:var(--ink)}

/* ---------- ACCOUNT ---------- */
.ly-headless.ly-account .woocommerce{display:grid;gap:32px}
@media (min-width:768px){
  .ly-headless.ly-account .woocommerce-MyAccount-navigation{grid-column:1 !important}
  .ly-headless.ly-account .woocommerce-MyAccount-content{grid-column:2 !important}
  .ly-headless.ly-account .woocommerce.logged-in{grid-template-columns:240px 1fr}
}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.woocommerce-MyAccount-navigation ul li a{display:block;padding:10px 14px;border-radius:12px;font-family:var(--font-heading);font-weight:500;font-size:13.5px;color:var(--ink);transition:background .15s var(--ease)}
.woocommerce-MyAccount-navigation ul li.is-active a,.woocommerce-MyAccount-navigation ul li a:hover{background:var(--peach-soft);color:var(--mocha-dark)}
.woocommerce-MyAccount-content{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:0 2px 8px rgba(140,116,106,.06)}

/* login/register forms — SCOPED :not(.logged-in) so it doesn't bleed into dashboard */
.woocommerce-account:not(.logged-in) .ly-headless.ly-account .woocommerce{max-width:900px;margin:0;grid-template-columns:1fr}
.woocommerce-account:not(.logged-in) .u-columns{display:grid;gap:24px}
@media (min-width:768px){.woocommerce-account:not(.logged-in) .u-columns{grid-template-columns:1fr 1fr}}
.woocommerce-account:not(.logged-in) .u-column1,.woocommerce-account:not(.logged-in) .u-column2{background:#fff;padding:24px;border-radius:var(--radius);box-shadow:0 2px 8px rgba(140,116,106,.06)}

/* ly-login-balance: login + registratie gebalanceerd naast elkaar */
.woocommerce-account:not(.logged-in) .u-columns{grid-template-columns:1fr 1fr!important;gap:28px;align-items:stretch}
.woocommerce-account:not(.logged-in) .u-column1,.woocommerce-account:not(.logged-in) .u-column2{margin:0}
@media(max-width:768px){.woocommerce-account:not(.logged-in) .u-columns{grid-template-columns:1fr!important}}

/* ly-login-order: Login links, Registreren rechts (stond omgekeerd) + gecentreerd */
.woocommerce-account:not(.logged-in) .ly-headless.ly-account .woocommerce{margin:0 auto!important}
.woocommerce-account:not(.logged-in) .u-columns{direction:ltr!important;grid-auto-flow:column}
.woocommerce-account:not(.logged-in) .u-column1{grid-column:1!important;order:1!important}
.woocommerce-account:not(.logged-in) .u-column2{grid-column:2!important;order:2!important}

/* ly-login-mobile-stack: op mobiel Login + Registreren netjes ONDER elkaar (win over grid-auto-flow:column) */
@media(max-width:768px){
	.woocommerce-account:not(.logged-in) .u-columns{grid-template-columns:1fr!important;grid-auto-flow:row!important;gap:20px}
	.woocommerce-account:not(.logged-in) .u-column1,
	.woocommerce-account:not(.logged-in) .u-column2{grid-column:1/-1!important;width:auto!important;max-width:100%!important}
	.woocommerce-account:not(.logged-in) .u-column1{order:1!important}
	.woocommerce-account:not(.logged-in) .u-column2{order:2!important}
}