/* WooCommerce-specific styling — relies on tokens defined in style.css */

.woocommerce-page .site-main{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter) 96px; }

/* Archive / shop header */
.shop-header{ padding:40px 0 32px; }
.shop-header .breadcrumb{ margin-bottom:16px; }
.shop-header__row{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.woocommerce-products-header__title.page-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(30px, 4vw, 44px);
  margin:0;
}
.shop-header .result-count{ font-size:13px; color:var(--navy-a55); margin:0; }

.woocommerce-result-count,
.woocommerce-ordering{
  font-size:13px;
  color:var(--ink);
}
.woocommerce-ordering select{
  border:none;
  border-bottom:1px solid rgba(20,43,74,0.3);
  padding:0 0 6px;
  background:transparent;
}
.woocommerce-notices-wrapper{ max-width:var(--container); margin:24px auto 0; padding:0 var(--gutter); }
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  background:#fff;
  border:1px solid var(--gray);
  border-left:3px solid var(--blue);
  padding:16px 20px;
  font-size:14px;
  list-style:none;
}
.woocommerce-error{ border-left-color:var(--red); }

/* Layout: sidebar + grid */
.shop-layout{ display:flex; gap:56px; align-items:flex-start; }
.shop-layout__sidebar{ width:280px; flex-shrink:0; }
.shop-layout__main{ flex:1; min-width:0; }
.shop-layout.is-ajax-loading .shop-layout__main,
.shop-layout.is-ajax-loading .shop-layout__sidebar{ opacity:.45; pointer-events:none; transition:opacity .15s ease; }
.filter-card{
  background:#fff;
  border:1px solid var(--gray);
  border-radius:10px;
  padding:28px;
  box-shadow:0 4px 16px rgba(0,0,0,0.04);
}
/* The shop grid shares .products-grid with the homepage, but has less
   room to work with next to the filter sidebar — 3 columns instead of 4
   keeps cards from feeling cramped. */
@media (min-width:961px){
  .shop-layout__main .products-grid,
  .shop-layout__main ul.products{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}
@media (min-width:901px){
  .shop-layout__sidebar{ position:sticky; top:24px; }
}
@media (max-width:900px){
  .shop-layout{ flex-direction:column; }
  .shop-layout__sidebar{ width:100%; }
}

.shop-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:36px; padding-bottom:20px; border-bottom:1px solid var(--gray);
}
.woocommerce-ordering,
.woocommerce-result-count{
  display:flex; align-items:center; margin:0;
}

/* Widget styling (Filter by price / attribute / rating) */
.widget{ margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid var(--gray); }
.widget:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
.widget-title{
  font-family:var(--font-display);
  font-size:16px; color:var(--ink);
  margin:0 0 20px; font-weight:500;
}
.widget ul{ display:flex; flex-direction:column; gap:14px; }
.widget ul li{ font-size:13px; }
.widget ul li a{ color:var(--ink); }
input[type="checkbox"],
input[type="radio"]{ accent-color:var(--navy); width:15px; height:15px; }
.widget_layered_nav_filters ul{ flex-direction:row; flex-wrap:wrap; gap:10px; }
.widget_layered_nav_filters ul li a{
  border:1px solid var(--gray); border-radius:999px; padding:6px 14px; font-size:12px;
}
.widget_price_filter .price_slider{ margin-bottom:16px; }
.widget_price_filter .price_slider_amount{ font-size:12px; color:var(--navy-a60); }
.widget_price_filter .price_slider_amount button{
  float:right;
  border:1px solid var(--navy); border-radius:999px; padding:6px 16px;
  font-size:11px; text-transform:uppercase; letter-spacing:1px;
}
.widget_price_filter .ui-slider{ background:var(--gray); height:2px; border:none; }
.widget_price_filter .ui-slider .ui-slider-range{ background:var(--navy); }
.widget_price_filter .ui-slider .ui-slider-handle{
  width:12px; height:12px; border-radius:50%; background:var(--navy); border:none; top:-5px;
}
.reset_variations, .woocommerce-widget-layered-nav-list__item--chosen a{ color:var(--red); }

/* Pagination */
.woocommerce-pagination ul.page-numbers{
  display:flex; justify-content:center; align-items:center; gap:22px; list-style:none;
  margin-top:56px;
}
.woocommerce-pagination .page-numbers{ font-size:13px; color:var(--ink); opacity:0.6; }
.woocommerce-pagination .page-numbers.current{ opacity:1; font-weight:700; border-bottom:1.5px solid var(--navy); padding-bottom:2px; }

/* Single product — .product-hero is an explicit wrapper opened/closed in
   inc/woocommerce-setup.php around just the gallery + summary, so tabs
   and "You Might Also Like" (separate hook callbacks that fire after it)
   are guaranteed to land outside it, in normal document flow, with no
   grid-placement ambiguity to fight. */
.product-hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:64px;
  padding-top:48px;
  align-items:start;
}
@media (max-width:900px){
  .product-hero{ grid-template-columns:1fr; gap:32px; padding-top:24px; }
}

/* Gallery — plain CSS grid, looks right whether or not the flexslider JS enhances it.
   Clicking a thumbnail (assets/js/product-page.js) swaps the big image's own
   src to that thumbnail's full-size source; the thumbnails themselves never
   move, so :first-child is always the fixed "big image" slot. */
.woocommerce-product-gallery{ position:relative; }
.woocommerce-product-gallery__wrapper{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin:0; padding:0; list-style:none;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image{ margin:0; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child{
  grid-column:1 / -1;
  /* Matches the product photos' actual upload dimensions (640x736) —
     see the matching comment on .product-card__media in style.css. */
  aspect-ratio:640/736;
  overflow:hidden;
  background:var(--paper);
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img{
  width:100%; height:100%; object-fit:cover;
  object-position:center top;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child:hover img{
  transform:scale(1.06);
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child){
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--paper);
  cursor:pointer;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child)::after{
  content:"";
  position:absolute; inset:0;
  border:1.5px solid transparent;
  transition:border-color .15s ease;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child):hover::after,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.is-active-thumb::after{
  border-color:var(--navy);
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) img{
  width:100%; height:100%; object-fit:cover;
  object-position:center top;
}
/* If FlexSlider's JS *does* enhance the gallery, don't fight its own markup */
.woocommerce-product-gallery.flex-viewport ~ .flex-control-nav,
.woocommerce-product-gallery .flex-control-thumbs{
  display:flex; gap:10px; margin:10px 0 0; padding:0; list-style:none;
}
.woocommerce-product-gallery .flex-control-thumbs li{ width:calc(25% - 8px); aspect-ratio:1/1; }
.woocommerce-product-gallery .flex-control-thumbs img{ width:100%; height:100%; object-fit:cover; object-position:center top; cursor:pointer; }

@media (max-width:600px){
  .woocommerce-product-gallery__wrapper{ grid-template-columns:repeat(3, 1fr); gap:6px; }
  .woocommerce-product-gallery .flex-control-thumbs li{ width:calc(33.33% - 6px); }
}

/* Summary / buy box */
.product .summary{ padding-top:8px; }
@media (min-width:901px){
  .product .summary{ position:sticky; top:24px; }
}
.product .product_title{
  font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3vw,38px); margin:0 0 16px; line-height:1.15;
}
.product p.price{ font-size:22px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.product p.stock{ font-size:13px; font-weight:600; margin:0 0 8px; }
.product p.stock.in-stock{ color:#1e5c2c; }
/* Genuinely sold out (Product data → Inventory → Stock status) — separate
   from "Coming Soon" below, which is its own independent flag. */
.product p.stock.out-of-stock{
  display:inline-block;
  background:var(--red); color:#fff;
  padding:10px 20px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
}
/* "Coming Soon" — Product data → General → Coming Soon checkbox
   (inc/woocommerce-setup.php), shown in place of the add-to-cart form. */
.gamedress-coming-soon-badge{
  display:inline-block;
  background:var(--maroon); color:#fff;
  padding:10px 20px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  margin:0 0 8px;
}
.product .woocommerce-product-details__short-description{ color:var(--navy-a82); line-height:1.8; margin:20px 0 28px; }

.product form.cart{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  margin-top:28px; padding-top:28px; border-top:1px solid var(--gray);
}
/* For variable products, quantity + button live nested inside this wrapper
   (not as direct children of form.cart), so form.cart's own flex rules
   above don't reach them — without this they stack instead of sitting
   side by side. */
.woocommerce-variation-add-to-cart{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.product table.variations{ width:100%; margin-bottom:8px; }
.product table.variations td{ padding:0; border:none; }
.product table.variations label{
  font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--navy-a60); display:block; margin-bottom:8px;
}
/* The real <select> is kept for WooCommerce's own logic but hidden from
   view — assets/js/product-page.js renders .size-swatches next to it. */
.product table.variations td.value{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.product .reset_variations{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--red);
}

.size-swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.size-swatch{
  min-width:48px; height:48px; padding:0 16px;
  border:1.5px solid var(--gray); background:#fff; color:var(--ink);
  font-size:13px; font-weight:600; text-transform:uppercase;
  border-radius:4px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.size-swatch:hover{ border-color:var(--navy); }
.size-swatch.is-active{ border-color:var(--navy); background:var(--navy); color:#fff; }
.size-swatch.is-disabled,
.size-swatch:disabled{
  color:var(--navy-a55); border-color:var(--gray); cursor:not-allowed;
  background:repeating-linear-gradient(-45deg, #fff, #fff 4px, var(--paper) 4px, var(--paper) 8px);
}

.woocommerce-variation-price .price{ font-size:20px; }
.single_variation_wrap{ margin-top:24px; }
.woocommerce-variation-availability{ margin-top:8px; font-size:13px; color:var(--navy-a60); }

/* Quantity stepper (assets/js/product-page.js adds the buttons) */
.product .quantity{ display:flex; align-items:stretch; border:1px solid var(--gray); }
.product .quantity input{
  width:52px; text-align:center; border:none; padding:15px 4px; background:#fff;
  -moz-appearance:textfield;
}
.product .quantity input::-webkit-outer-spin-button,
.product .quantity input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-step{
  width:38px; flex-shrink:0;
  font-size:16px; color:var(--ink);
  background:var(--warm-white);
}
.qty-step:hover{ background:var(--paper); }

.single_add_to_cart_button,
a.single_add_to_cart_button{
  background:var(--red) !important; color:#fff !important; border:none !important;
  border-radius:999px !important; padding:16px 44px !important;
  font-size:12px !important; font-weight:600 !important; letter-spacing:1.5px !important; text-transform:uppercase !important;
  opacity:1 !important;
  transition:background .15s ease, transform .15s ease;
}
.single_add_to_cart_button:hover{ background:#c22f28 !important; transform:translateY(-1px); }
.single_add_to_cart_button.disabled,
.single_add_to_cart_button[disabled]{
  background:var(--gray) !important; color:var(--navy-a55) !important; cursor:not-allowed; transform:none !important;
}

/* Trust row (inc/woocommerce-setup.php: gamedress_product_trust_row) */
.product-trust-row{
  display:flex; flex-direction:column; gap:12px;
  margin:28px 0 0; padding:24px 0 0;
  border-top:1px solid var(--gray);
  list-style:none;
}
.product-trust-row li{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--navy-a82);
}

.product .product_meta{
  margin-top:32px; padding-top:24px; border-top:1px solid var(--gray);
  font-size:12px; color:var(--navy-a55); display:flex; gap:20px; flex-wrap:wrap;
}
.product .product_meta a{ color:var(--navy-a55); }
.woocommerce-tabs{ margin-top:80px; }
.woocommerce-tabs ul.tabs{
  display:flex; gap:36px; border-bottom:1px solid var(--gray); margin-bottom:32px; list-style:none; padding:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.woocommerce-tabs ul.tabs li{ flex-shrink:0; }
.woocommerce-tabs ul.tabs li{ padding:0; }
.woocommerce-tabs ul.tabs li a{
  font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--navy-a55);
  padding-bottom:14px; display:inline-block; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.woocommerce-tabs ul.tabs li.active a{ color:var(--ink); border-bottom-color:var(--navy); }
.woocommerce-tabs .panel{ max-width:760px; }
table.shop_attributes{ width:100%; border-collapse:collapse; }
table.shop_attributes th{
  text-align:left; width:180px; padding:14px 16px 14px 0;
  font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--navy-a55); font-weight:600;
  border-bottom:1px solid var(--gray);
}
table.shop_attributes td{
  padding:14px 0; font-size:14px; color:var(--ink);
  border-bottom:1px solid var(--gray);
}
table.shop_attributes td p{ margin:0; }
.related.products{ margin-top:112px; padding-top:64px; border-top:1px solid var(--gray); }
.related.products > h2{ font-family:var(--font-display); font-weight:500; font-size:30px; margin-bottom:40px; }

/* Shared "fancy" card look across every functional page (cart, checkout,
   account, and the shop filter card above) */
.filter-card,
.woocommerce-cart-form,
.cart-collaterals .cart_totals,
#customer_details .col-1,
#customer_details .col-2,
#order_review,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content{
  background:#fff;
  border:1px solid var(--gray);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
}

/* Cart */
.woocommerce-cart-form{ padding:8px 28px; margin-bottom:32px; }
table.shop_table{ width:100%; border-collapse:collapse; }
table.shop_table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--navy-a55); padding:0 0 16px; border-bottom:1px solid var(--gray); }
table.shop_table td{ padding:20px 12px 20px 0; border-bottom:1px solid var(--gray); font-size:14px; }
table.shop_table tr:last-child td{ border-bottom:none; }
.product-remove a{ color:var(--red); font-size:18px; }
.cart-collaterals .cart_totals{
  padding:32px; max-width:400px; margin-left:auto;
  border-top:3px solid var(--navy);
}
.cart_totals h2{ font-family:var(--font-display); font-size:22px; font-weight:500; margin-bottom:16px; }
.checkout-button, button.checkout{
  background:var(--navy) !important; color:#fff !important; border:none !important;
  border-radius:999px !important; padding:16px 32px !important; width:100%;
  font-size:12px !important; font-weight:600 !important; letter-spacing:1.5px !important; text-transform:uppercase !important;
}

/* Checkout */
#customer_details{ display:flex; gap:32px; flex-wrap:wrap; }
#customer_details .col-1, #customer_details .col-2{ flex:1 1 320px; width:auto; padding:32px; }
#customer_details h3{
  font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--ink);
  margin:0 0 24px;
}
.form-row label{ font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:var(--navy-a60); margin-bottom:6px; display:block; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; border:1px solid var(--gray); background:#fff; padding:12px 14px;
}
#order_review{ padding:32px; border-top:3px solid var(--navy); }
#order_review_heading{
  font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--ink); margin:0 0 20px;
}

/* -----------------------------------------------------------
   Order received / "Thank you" page — WooCommerce core's classic
   checkout/thankyou.php template, completely unstyled by default once
   woocommerce_enqueue_styles is disabled. Class names here are WC's own
   stable, long-standing markup (not something this theme controls).
----------------------------------------------------------- */
.woocommerce-order{ max-width:760px; margin:0 auto; }
.woocommerce-order .woocommerce-notice{
  background:#eaf5ec; color:#1e5c2c; border:1px solid #bfe3c6;
  border-radius:10px; padding:18px 22px; margin:0 0 32px;
  font-size:15px; font-weight:500;
}
.woocommerce-order-overview{
  display:flex; flex-wrap:wrap; gap:20px 32px;
  list-style:none; margin:0 0 40px; padding:24px 28px;
  background:#fff; border:1px solid var(--gray); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
}
.woocommerce-order-overview li{
  font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:var(--navy-a55);
}
.woocommerce-order-overview li strong{
  display:block; margin-top:4px; font-size:15px; text-transform:none; letter-spacing:normal;
  font-family:var(--font-body); color:var(--ink); font-weight:600;
}
.woocommerce-order-details__title,
.woocommerce-column__title{
  font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--ink);
  margin:0 0 20px;
}
.woocommerce-order-details{
  background:#fff; border:1px solid var(--gray); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
  padding:32px; margin-bottom:32px;
}
.woocommerce-order-details table.shop_table,
.woocommerce-order-details table.woocommerce-table{
  width:100%; border-collapse:collapse;
}
.woocommerce-order-details th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:var(--navy-a55); padding:0 0 16px; border-bottom:1px solid var(--gray);
}
.woocommerce-order-details td{
  padding:16px 12px 16px 0; border-bottom:1px solid var(--gray); font-size:14px;
}
.woocommerce-order-details tfoot tr:last-child th,
.woocommerce-order-details tfoot tr:last-child td{
  border-bottom:none; font-size:17px; font-weight:700;
}
/* Same class of bug found earlier on the My Account nav/content and the
   WC Blocks checkout: the two address blocks aren't direct children of
   .woocommerce-customer-details — WC wraps them in an intermediate
   .col2-set section first, so the flex rules have to go there instead
   (targeting the outer section left it with a single child and no actual
   side-by-side layout, which is why both boxes rendered narrow and
   stacked with empty space beside them). */
.woocommerce-customer-details .col2-set{
  display:flex; flex-wrap:wrap; gap:24px;
}
.woocommerce-customer-details .woocommerce-column{
  flex:1 1 280px;
  background:#fff; border:1px solid var(--gray); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
  padding:28px;
}
.woocommerce-customer-details address{
  font-style:normal; font-size:14px; line-height:1.8; color:var(--navy-a82);
}
.woocommerce-order-overview img{ vertical-align:middle; margin-right:4px; }
@media (max-width:640px){
  .woocommerce-order-overview{ padding:20px; gap:16px 24px; }
  .woocommerce-order-details{ padding:20px; }
  .woocommerce-customer-details .woocommerce-column{ padding:20px; }
}

/* My account — nav and content weren't a side-by-side layout at all
   before (WooCommerce's own default stylesheet used to handle that, and
   it's disabled here); scoped to the account page via its body class so
   this doesn't affect other regular pages. */
.woocommerce-account .entry-content,
.woocommerce-account .entry-content > .woocommerce{
  display:flex !important; align-items:flex-start; gap:32px; flex-wrap:wrap;
}
.woocommerce-MyAccount-navigation{ flex:0 0 220px !important; padding:12px; }
.woocommerce-MyAccount-navigation ul{ display:flex; flex-direction:column; gap:2px; }
.woocommerce-MyAccount-navigation a{
  display:block; padding:12px 16px; font-size:14px; border-radius:8px; transition:background .15s ease;
}
.woocommerce-MyAccount-navigation a:hover{ background:var(--warm-white); }
.woocommerce-MyAccount-navigation .is-active a{ background:var(--navy); color:#fff; font-weight:600; }
.woocommerce-MyAccount-content{ flex:1 1 400px !important; min-width:0; margin-top:0; padding:32px; }
.woocommerce-MyAccount-navigation.is-ajax-loading,
.woocommerce-MyAccount-navigation.is-ajax-loading ~ .woocommerce-MyAccount-content{
  opacity:.45; pointer-events:none; transition:opacity .15s ease;
}
.woocommerce-form-row input{ border:1px solid var(--gray); padding:12px 14px; width:100%; }
@media (max-width:700px){
  .woocommerce-account .entry-content{ flex-direction:column; }
  .woocommerce-MyAccount-navigation{ flex-basis:auto; width:100%; }
}

/* -----------------------------------------------------------
   WooCommerce Blocks compatibility (Cart/Checkout Blocks)
   ---------------------------------------------------------
   If your Cart/Checkout pages use the "Cart" / "Checkout" WooCommerce
   BLOCKS instead of the [woocommerce_cart] / [woocommerce_checkout]
   shortcodes, none of the classic selectors above apply — Blocks render
   completely different markup. This section is a best-effort pass at
   that markup so it isn't left unstyled; for full parity with the rest
   of the site, switching those two pages to the classic shortcodes is
   the more reliable fix.
----------------------------------------------------------- */
/*
   The real fix, found by inspecting the live checkout markup directly:
   WooCommerce gives its "main + sidebar" layout component a stable class,
   .wc-block-components-sidebar-layout — but on Checkout (unlike Cart) it
   ALSO stamps the generic .wc-block-checkout class onto BOTH that inner
   layout element AND its own outer block wrapper. Targeting
   .wc-block-cart/.wc-block-checkout (as before) therefore matched twice
   on Checkout: the outer wrapper became a grid with only one child (a
   dead, empty second column — the persistent gap on the right), and the
   inner layout element became a SECOND, nested grid squeezed inside the
   outer grid's first column, which is what kept shrinking the actual
   cards. Targeting .wc-block-components-sidebar-layout directly hits
   exactly one element on both Cart and Checkout, with no nesting.
*/
.wc-block-components-sidebar-layout{
  color:var(--ink);
  display:grid !important;
  grid-template-columns:1fr 380px !important;
  gap:32px !important;
  align-items:start !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
.wc-block-components-sidebar-layout > *{ min-width:0; }
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{
  width:100% !important; max-width:none !important;
  /* Neutralize WooCommerce's own block-level display on the OUTER
     wrapper specifically (verified live: without this it can still
     apply its own grid/flex here, wasting half the width on an empty
     second "column" with nothing in it beside the real layout below). */
  display:block !important;
}
/* WC's own default styles give these a narrow max-width, meant for the
   centered single-column (stacked) layout — that's what was leaving a
   tiny, off-center card inside our much wider grid column. Forcing
   width:100%/max-width:none makes each card fill its grid track instead. */
.wc-block-components-main, .wc-block-cart__main, .wc-block-checkout__main{
  background:#fff; border:1px solid var(--gray); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
  padding:28px;
  grid-column:1;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
.wc-block-components-sidebar, .wc-block-cart__sidebar, .wc-block-checkout__sidebar{
  background:#fff; border:1px solid var(--gray); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
  padding:28px; border-top:3px solid var(--navy);
  grid-column:2;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  /* The grid `gap` above already spaces the two cards; this margin is
     dropped in the stacked (mobile) layout below instead of double-adding. */
  margin-left:0;
}
@media (max-width:800px){
  .wc-block-components-sidebar-layout{
    grid-template-columns:1fr !important;
  }
  .wc-block-components-main, .wc-block-cart__main, .wc-block-checkout__main,
  .wc-block-components-sidebar, .wc-block-cart__sidebar, .wc-block-checkout__sidebar{
    grid-column:1;
  }
  .wc-block-components-sidebar, .wc-block-cart__sidebar, .wc-block-checkout__sidebar{
    margin-left:0; margin-top:32px;
  }
}
/* The coupon/subtotal/total block renders with its own border by default,
   which nests an extra "box within a box" look inside the sidebar card —
   drop that inner border in favor of a plain top divider. */
.wc-block-components-totals-wrapper{
  border:none !important;
  background:transparent !important;
  padding:16px 0 0 !important;
  margin-top:16px !important;
  border-top:1px solid var(--gray) !important;
}
.wc-block-components-checkout-step{
  background:#fff; border:1px solid var(--gray); border-radius:12px;
  padding:24px; margin-bottom:20px;
}
.wc-block-components-panel{ border-color:var(--gray); }
.wc-block-components-totals-item, .wc-block-components-totals-footer-item{ color:var(--ink); }
.wc-block-components-product-name{ color:var(--ink); font-weight:500; }
.wc-block-components-formatted-money-amount{ color:var(--ink); font-weight:600; }
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button{
  background:var(--navy) !important; color:#fff !important; border-radius:999px !important;
  font-weight:600 !important; letter-spacing:0.5px !important;
  width:100% !important; max-width:none !important; box-sizing:border-box !important;
  padding:14px 24px !important; white-space:nowrap !important;
}
.wc-block-components-button:not(.is-link):hover{ background:var(--red) !important; }

/* Shipping/payment notices ("No shipping options...", "No payment
   methods...") — these appear whenever WooCommerce has no matching
   shipping zone or no payment gateway enabled for the order; that's a
   store-settings issue (WooCommerce → Settings → Shipping / Payments),
   not something CSS can fix. Just bring their look in line with the
   rest of the card language. */
.wc-block-components-notice-banner{
  border-radius:10px !important;
  font-size:13.5px; line-height:1.6;
}
.wc-block-components-notice-banner.is-error{ border-color:#f3c3bf !important; }
.wc-block-components-notice-banner.is-warning{ border-color:#f0dca3 !important; }