/*
 * Cart reskin (Birthday Banner Studio).
 *
 * Loaded only on is_cart() (see includes/site-birthdaybanner.php, "Cart
 * page reskin" enqueue). Targets WooCommerce's own classic cart markup
 * (.woocommerce-cart-form, .cart-collaterals, .cart_totals, ...) the same
 * way checkout-birthdaybanner.css targets checkout's -- see that file's
 * header comment for why (mikken op WooCommerce's eigen structuur, niet
 * fighten met wrapper divs + !important).
 *
 * Banner-preview-card + extras-fieldset component styles are shared with
 * Checkout via bb-order-shared.css.
 */

.woocommerce-cart {
  font-family: var(--bb-font-body);
  color: var(--bb-body);
}

/* Same reasoning as checkout-birthdaybanner.css: the site-wide floating
   "Create Your Banner" pill only opt-outs near a #hero element, which the
   cart page (page.php, no hero) never has -- hide it outright so it
   doesn't sit fixed over the cart table / checkout button. */
body.woocommerce-cart .bb-float-cta {
  display: none;
}

body.woocommerce-cart {
  background: var(--bb-surface-blue);
}

.woocommerce-cart article > h1 {
  position: relative;
  padding: 26px 28px;
  margin: 0 0 20px;
  border-radius: var(--bb-radius-card);
  background:
    radial-gradient(circle at 6% 30%, #FCB83033 0, transparent 42%),
    radial-gradient(circle at 94% 75%, #4F82C333 0, transparent 46%),
    linear-gradient(135deg, #4F82C314, #F15A5514, #FCB83014);
  overflow: hidden;
}

/* --- Two-column layout: cart form (preview + extras + items) beside the
   totals/checkout sidebar. Targets WooCommerce's own shortcode wrapper
   (.woocommerce, printed around [woocommerce_cart]'s output) as a grid,
   rather than adding a wrapper div of our own -- the checkout page's build
   notes warn a custom wrapper around WC's own structural divs breaks its
   float-clearfix; this avoids that class of bug the same way. */
body.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: start;
  gap: 26px;
}
/* WooCommerce also prints a (usually empty) .woocommerce-notices-wrapper as
   a THIRD child of the same .woocommerce container -- without this it
   claims the grid's first cell, pushing .woocommerce-cart-form into column
   2 and wrapping .cart-collaterals onto its own row below. Span it full
   width instead so the two real columns stay side by side. */
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}
body.woocommerce-cart .woocommerce > .woocommerce-cart-form {
  grid-column: 1;
}
body.woocommerce-cart .woocommerce > .cart-collaterals {
  grid-column: 2;
}
@media (max-width: 900px) {
  body.woocommerce-cart .woocommerce {
    grid-template-columns: 1fr;
  }
  body.woocommerce-cart .woocommerce > .woocommerce-cart-form,
  body.woocommerce-cart .woocommerce > .cart-collaterals {
    grid-column: 1;
  }
}

/* --- Cart items table --- */

.woocommerce-cart-form {
  min-width: 0;
}
table.shop_table.cart {
  width: 100%;
  border-collapse: collapse;
  background: var(--bb-white);
  border: 1.5px solid rgba(0, 0, 0, .12);
  border-radius: var(--bb-radius-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
table.shop_table.cart th,
table.shop_table.cart td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bb-border);
  font-size: 13.5px;
  text-align: left;
}
table.shop_table.cart thead th {
  font-family: var(--bb-font-heading);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bb-muted);
}
table.shop_table.cart tr:last-child td { border-bottom: none; }
table.shop_table.cart td.product-remove,
table.shop_table.cart th.product-remove {
  width: 36px;
}
table.shop_table.cart td.product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .1);
}
table.shop_table.cart td.product-quantity .quantity input.qty {
  width: 64px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(0, 0, 0, .14);
  font-family: var(--bb-font-body);
  font-size: 14px;
}
table.shop_table.cart td.actions .button {
  border-radius: 999px;
  padding: 12px 22px;
}

/* Same dl.variation label-layout fix as checkout-birthdaybanner.css (WC's
   own float-left dt/dd fights the narrow product cell here too). */
table.shop_table.cart td.product-name dl.variation dt,
table.shop_table.cart td.product-name dl.variation dd {
  float: none;
  clear: none;
  margin: 0;
  display: inline;
}
table.shop_table.cart td.product-name dl.variation dt {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--bb-muted);
}
table.shop_table.cart td.product-name dl.variation dd p {
  display: inline;
  margin: 0;
}

/* --- Totals / checkout sidebar --- */

.cart-collaterals {
  min-width: 0;
}
/* WooCommerce core's own woocommerce-layout.css ships
   `.woocommerce .cart-collaterals .cart_totals, .woocommerce-page
   .cart-collaterals .cart_totals { float: right; width: 48%; }` -- three
   classes deep (0,3,0), which beats a plain `.cart_totals` (0,1,0)
   regardless of stylesheet load order. That's what was actually winning:
   confirmed via getComputedStyle on a live page, float:"right",
   width:"182.4px" == 48% of the 380px grid column below shrinking the
   sidebar and floating it to that column's right edge, leaving a big gap
   on its left. Matching WC's own selector here (rather than reaching for
   !important) is the same "target WC's own structure" approach this
   stylesheet already uses elsewhere. Our grid (.woocommerce {
   grid-template-columns: 1fr 380px }, above) already places
   .cart-collaterals in that column -- .cart_totals just needs to fill it
   plainly, not float within it. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
}
.cart_totals {
  position: sticky;
  top: 24px;
  background: var(--bb-white);
  border: 1.5px solid rgba(0, 0, 0, .12);
  border-radius: var(--bb-radius-card);
  box-shadow: var(--sh-card);
  padding: 22px 24px 24px;
  box-sizing: border-box;
}
.cart_totals h2 {
  font-size: 17px;
  margin: 0 0 14px;
}
.cart_totals table.shop_table {
  width: 100%;
  border-collapse: collapse;
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--bb-border);
  font-size: 13.5px;
  text-align: left;
}
.cart_totals table.shop_table th { color: var(--bb-muted); font-weight: 600; }
.cart_totals table.shop_table td { text-align: right; }
.cart_totals .order-total th,
.cart_totals .order-total td {
  border-bottom: none;
  font-size: 16px;
  font-weight: 700;
  padding-top: 14px;
}
#shipping_method { list-style: none; margin: 0; padding: 0; }
#shipping_method li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* "Proceed to Checkout" button -- restyled to .bb-btn.bb-btn-primary look
   via the woocommerce/cart/proceed-to-checkout-button.php template
   override, which already outputs those classes; this just makes sure it
   spans the sidebar's full width and sits below the totals table. */
.wc-proceed-to-checkout {
  margin-top: 18px;
}
.wc-proceed-to-checkout .checkout-button {
  display: flex;
  width: 100%;
}

.woocommerce-cart .woocommerce-form-coupon .form-row {
  margin: 0 0 10px;
}
.woocommerce-cart .woocommerce-form-coupon .button {
  border-radius: 999px;
}