/* ===========================================================================
   BKK by XYZ — Cart & Checkout redesign.
   Two-column, branded (black / off-white / red), simplified for fast checkout.
   =========================================================================== */
:root{
  --bw-bg:#08080B; --bw-panel:#13131C; --bw-p2:#191922; --bw-ink:#F5F3EC;
  --bw-mut:#9A9AA8; --bw-faint:#6A6A78; --bw-red:#FF2D2D; --bw-line:rgba(255,255,255,0.09);
}
body.woocommerce-cart, body.woocommerce-checkout{ background:var(--bw-bg); color:var(--bw-ink); }
body.woocommerce-cart .site-main, body.woocommerce-checkout .site-main,
body.woocommerce-cart main, body.woocommerce-checkout main,
body.woocommerce-cart .page-content, body.woocommerce-checkout .page-content{ background:transparent; }

/* width + spacing */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce{ max-width:1180px; margin:0 auto; padding:clamp(24px,4vw,52px) clamp(16px,4vw,40px) clamp(60px,8vw,100px); }
.woocommerce-cart .entry-title, .woocommerce-checkout .entry-title,
.woocommerce-cart h1.entry-title{ font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; font-size:clamp(32px,5vw,60px); color:var(--bw-ink); margin-bottom:24px; }
body.woocommerce-cart .entry-title, body.woocommerce-checkout .entry-title{ padding-top:clamp(40px,7vh,84px); }

/* headings */
.woocommerce-cart h2, .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout #ship-to-different-address label{
  font-family:'Archivo','Arial Narrow',sans-serif !important; font-stretch:125%; font-weight:800 !important; text-transform:uppercase; letter-spacing:0.01em; color:var(--bw-ink) !important; font-size:18px !important;
}

/* ---------- fields ---------- */
.woocommerce form .form-row label, .woocommerce-checkout label, .woocommerce-cart label{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--bw-faint); margin-bottom:7px; display:block;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-checkout input.input-text, .woocommerce-checkout textarea, .woocommerce-checkout select,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce #coupon_code{
  width:100% !important; background:var(--bw-p2) !important; border:1px solid var(--bw-line) !important; border-radius:12px !important;
  padding:13px 15px !important; color:var(--bw-ink) !important; font-family:'Space Grotesk',sans-serif !important; font-size:14px !important; outline:none !important; box-shadow:none !important; min-height:48px;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce-checkout input:focus, .woocommerce-checkout textarea:focus, .woocommerce-checkout select:focus{ border-color:var(--bw-red) !important; }
.woocommerce input::placeholder{ color:var(--bw-faint) !important; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--bw-ink) !important; line-height:46px !important; padding:0 !important; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{ top:12px !important; }
.select2-dropdown{ background:var(--bw-p2) !important; border:1px solid var(--bw-line) !important; color:var(--bw-ink); }
.select2-results__option{ color:var(--bw-ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--bw-red) !important; color:#08080B !important; }
.woocommerce form .form-row{ margin-bottom:14px; }

/* ---------- buttons ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #place_order,
.woocommerce-cart .actions .button, .woocommerce button.button.alt, .woocommerce a.button.alt{
  font-family:'Space Mono',monospace !important; font-size:13px !important; letter-spacing:0.08em !important; text-transform:uppercase !important; font-weight:700 !important;
  color:#08080B !important; background:var(--bw-red) !important; border:0 !important; border-radius:100px !important; padding:15px 28px !important; cursor:pointer; box-shadow:0 12px 34px rgba(255,45,45,0.22) !important; transition:transform .2s !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce #place_order:hover, .woocommerce button.button.alt:hover{ transform:translateY(-2px); background:var(--bw-red) !important; color:#08080B !important; }
/* secondary (update cart / apply coupon) = outline */
.woocommerce-cart .actions button[name="update_cart"], .woocommerce .coupon button.button{
  color:var(--bw-ink) !important; background:transparent !important; border:1px solid var(--bw-line) !important; box-shadow:none !important;
}
.woocommerce-cart .actions button[name="update_cart"]:hover, .woocommerce .coupon button.button:hover{ border-color:var(--bw-red) !important; color:var(--bw-red) !important; transform:none; }
#place_order{ width:100%; text-align:center; font-size:14px !important; padding:18px !important; }

/* ---------- panels / tables ---------- */
.woocommerce table.shop_table{ background:var(--bw-panel); border:1px solid var(--bw-line) !important; border-radius:18px !important; border-collapse:separate !important; overflow:hidden; color:var(--bw-ink); }
.woocommerce table.shop_table th{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--bw-faint); border:0; padding:16px 18px; }
.woocommerce table.shop_table td{ border-top:1px solid var(--bw-line) !important; padding:16px 18px; color:var(--bw-ink); }
.woocommerce table.shop_table tbody tr:first-child td{ border-top:0 !important; }
.woocommerce table.shop_table .product-thumbnail img{ width:60px; height:60px; object-fit:cover; border-radius:10px; border:1px solid var(--bw-line); }
.woocommerce table.shop_table a{ color:var(--bw-ink); text-decoration:none; }
.woocommerce table.shop_table a:hover{ color:var(--bw-red); }
.woocommerce .cart_item .product-name, .woocommerce-checkout #order_review .product-name{ font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:800; text-transform:uppercase; font-size:14px; }
.woocommerce .amount, .woocommerce .woocommerce-Price-amount{ color:var(--bw-ink); font-weight:700; }
.woocommerce .product-remove a.remove{ color:var(--bw-red) !important; border:1px solid var(--bw-line); background:transparent !important; }
.woocommerce table.cart td.actions{ background:transparent; }

/* totals + order review */
.woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading{ margin-bottom:14px; }
.woocommerce .cart_totals table, .woocommerce-checkout #order_review .shop_table{ background:var(--bw-panel); }
.woocommerce .order-total .amount, .woocommerce .cart-subtotal .amount{ color:var(--bw-red); font-size:18px; }
.woocommerce-checkout #payment{ background:var(--bw-panel) !important; border:1px solid var(--bw-line); border-radius:18px; padding:8px 18px 18px; margin-top:14px; }
.woocommerce-checkout #payment ul.payment_methods{ border:0 !important; background:transparent; }
.woocommerce-checkout #payment div.payment_box{ background:var(--bw-p2) !important; color:var(--bw-mut); border-radius:12px; }
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:var(--bw-p2) !important; }
.woocommerce-checkout #payment .wc-terms-and-conditions, .woocommerce-checkout #payment label{ color:var(--bw-mut); }

/* coupon */
.woocommerce .coupon{ display:flex; gap:10px; align-items:center; }
.woocommerce .coupon #coupon_code{ max-width:240px; min-height:46px; }

/* notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error{ background:var(--bw-panel) !important; border-top:3px solid var(--bw-red) !important; color:var(--bw-ink) !important; border-radius:12px; padding:14px 18px !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ display:none !important; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a{ color:var(--bw-red) !important; }

/* ===================== TWO-COLUMN LAYOUTS ===================== */
/* checkout: details (left) + sticky order summary (right) */
.woocommerce-checkout form.checkout.woocommerce-checkout{ display:grid; grid-template-columns:1.08fr 0.92fr; gap:clamp(20px,3vw,40px); align-items:start; }
.woocommerce-checkout #customer_details{ grid-column:1; grid-row:1 / span 2; width:auto !important; float:none !important; }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2{ width:auto !important; float:none !important; }
.woocommerce-checkout #order_review_heading{ grid-column:2; grid-row:1; margin:0; }
.woocommerce-checkout #order_review{ grid-column:2; grid-row:2; width:auto !important; float:none !important; position:sticky; top:24px; background:var(--bw-panel); border:1px solid var(--bw-line); border-radius:18px; padding:20px; }
.woocommerce-checkout #order_review .shop_table{ border:0 !important; }

/* cart: items (left) + sticky totals (right) */
.woocommerce-cart .woocommerce{ display:grid; grid-template-columns:1.5fr 0.5fr; gap:clamp(20px,3vw,36px); align-items:start; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{ grid-column:1 / -1; }
.woocommerce-cart form.woocommerce-cart-form{ grid-column:1; margin:0; }
.woocommerce-cart .cart-collaterals{ grid-column:2; width:auto !important; float:none !important; }
.woocommerce-cart .cart-collaterals .cart_totals{ width:100% !important; float:none !important; position:sticky; top:24px; }
.woocommerce-cart .cart-collaterals .cross-sells{ display:none; } /* declutter */

/* responsive */
@media (max-width:860px){
  .woocommerce-checkout form.checkout.woocommerce-checkout{ grid-template-columns:1fr; }
  .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review{ grid-column:1; grid-row:auto; position:static; }
  .woocommerce-cart .woocommerce{ grid-template-columns:1fr; }
  .woocommerce-cart form.woocommerce-cart-form, .woocommerce-cart .cart-collaterals{ grid-column:1; }
  .woocommerce-cart .cart-collaterals .cart_totals{ position:static; }
}