/* =========================================================
   PEPPERLABZ FULL CART PAGE (/cart/) — v1
   Paste as its own CSS/WPCode snippet. Real page-scoping comes
   from `body.woocommerce-cart` — a class WooCommerce itself adds
   automatically to <body> only on the real cart page — not from
   a WPCode URL condition, so this can never leak onto product
   pages, checkout, or account pages even if a WPCode restriction
   is misconfigured or skipped. If a WPCode page-restriction
   condition is added on top, use exactly ONE condition, same
   rule as pepperlabz-checkout.css.

   This is a SEPARATE interface from the Modern Cart slide-out
   drawer (pepperlabz-cart.css) — different plugin, different
   markup, different selectors (plain WooCommerce
   `.woocommerce-cart-form` table + `.cart-collaterals`, not
   `#moderncart-slide-out`). Do not mix the two files' selectors.

   Palette matches pepperlabz-account.css / pepperlabz-cart.css:
   #111/#fff black-white, #fafafa/#f3f3f4 light neutral surfaces,
   #e4e5e8 borders, #9aa9bd/#6d7280 muted text. Breakpoints match
   the rest of the project: 767px mobile, 1024px tablet — below
   767px this relies on WooCommerce's own built-in
   `shop_table_responsive` row-stacking (data-title attributes
   already in the real markup), just restyled to match, not
   rebuilt.
========================================================= */

/* ---------------------------------------------------------
   1. PAGE SHELL
--------------------------------------------------------- */

body.woocommerce-cart .entry-title {
  color: #111;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------
   2. EMPTY CART STATE
--------------------------------------------------------- */

body.woocommerce-cart .wc-empty-cart-message {
  max-width: 640px;
  margin: 40px auto;
  text-align: center;
}

body.woocommerce-cart .cart-empty.woocommerce-info {
  background: #fafafa;
  border: 1px solid #e4e5e8;
  border-radius: 16px;
  padding: 40px 32px;
  color: #566176;
  font-size: 16px;
  margin: 0 0 24px;
}

body.woocommerce-cart .return-to-shop {
  text-align: center;
  margin: 0;
}

body.woocommerce-cart .return-to-shop .button.wc-backward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: background 0.15s ease;
}

body.woocommerce-cart .return-to-shop .button.wc-backward:hover,
body.woocommerce-cart .return-to-shop .button.wc-backward:focus {
  background: #333;
  color: #fff;
}

/* ---------------------------------------------------------
   3. POPULATED CART — ITEMS TABLE
--------------------------------------------------------- */

body.woocommerce-cart .woocommerce-cart-form__contents {
  background: #fff;
  border: 1px solid #e4e5e8;
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

body.woocommerce-cart .woocommerce-cart-form__contents thead th {
  background: #fafafa;
  color: #566176;
  font-size: 12.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e4e5e8;
  padding: 14px 16px;
}

body.woocommerce-cart .woocommerce-cart-form__cart-item td {
  border-bottom: 1px solid #e4e5e8;
  padding: 18px 16px;
  vertical-align: middle;
}

body.woocommerce-cart .woocommerce-cart-form__cart-item:last-child td {
  border-bottom: none;
}

body.woocommerce-cart .product-thumbnail img {
  border-radius: 12px;
  border: 1px solid #e4e5e8;
  background: #fafafa;
}

/* Product title/strength — must be unmistakable, same requirement as
   the cart drawer: a customer must never have to guess which GLP-3 RT
   strength is in the cart. WooCommerce's own real product title (e.g.
   "GLP-3 RT 20 mg") already carries this. */
body.woocommerce-cart .product-name a {
  color: #111;
  font-weight: 700;
  text-decoration: none;
}

body.woocommerce-cart .product-name a:hover {
  text-decoration: underline;
}

body.woocommerce-cart .product-price .woocommerce-Price-amount,
body.woocommerce-cart .product-subtotal .woocommerce-Price-amount {
  color: #111;
  font-weight: 700;
}

body.woocommerce-cart .product-quantity .quantity {
  display: inline-flex;
  border: 1px solid #e4e5e8;
  border-radius: 999px;
  background: #fafafa;
  overflow: hidden;
}

body.woocommerce-cart .product-quantity input.qty {
  border: none;
  background: transparent;
  text-align: center;
  color: #111;
  font-weight: 700;
  width: 56px;
  padding: 10px 4px;
}

body.woocommerce-cart .product-remove a.remove {
  color: #9aa9bd;
  background: transparent;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}

body.woocommerce-cart .product-remove a.remove:hover {
  color: #fff;
  background: #111;
}

/* ---------------------------------------------------------
   4. COUPON + UPDATE CART ROW
--------------------------------------------------------- */

body.woocommerce-cart .actions {
  background: #fafafa;
  padding: 20px 16px !important;
}

body.woocommerce-cart .coupon {
  display: inline-flex;
  gap: 0;
}

body.woocommerce-cart .coupon #coupon_code {
  border: 1px solid #e4e5e8;
  border-radius: 999px 0 0 999px;
  background: #fff;
  color: #111;
  padding: 12px 18px;
}

body.woocommerce-cart .coupon button[name="apply_coupon"] {
  background: #111;
  color: #fff;
  border: 1px solid #111;
  border-radius: 0 999px 999px 0;
  font-weight: 900;
  padding: 12px 20px;
  transition: background 0.15s ease;
}

body.woocommerce-cart .coupon button[name="apply_coupon"]:hover,
body.woocommerce-cart .coupon button[name="apply_coupon"]:focus {
  background: #333;
  border-color: #333;
}

body.woocommerce-cart button[name="update_cart"] {
  background: #fff;
  color: #111;
  border: 1px solid #e4e5e8;
  border-radius: 999px;
  font-weight: 900;
  padding: 12px 20px;
}

body.woocommerce-cart button[name="update_cart"]:not(:disabled):hover {
  border-color: #111;
}

/* ---------------------------------------------------------
   5. CART TOTALS
--------------------------------------------------------- */

body.woocommerce-cart .cart_totals {
  background: #fff;
  border: 1px solid #e4e5e8;
  border-radius: 16px;
  padding: 24px;
}

body.woocommerce-cart .cart_totals h2 {
  color: #111;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
  border-top: 1px solid #e4e5e8;
  padding: 14px 0;
  color: #566176;
}

body.woocommerce-cart .cart_totals table th {
  font-weight: 700;
  color: #111;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td,
body.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
  color: #111;
  font-weight: 900;
  font-size: 18px;
}

body.woocommerce-cart .shipping-calculator-button {
  color: #566176;
  font-weight: 700;
  text-decoration: underline;
}

body.woocommerce-cart .shipping-calculator-form .input-text,
body.woocommerce-cart .shipping-calculator-form select {
  border: 1px solid #e4e5e8;
  border-radius: 10px;
  background: #fff;
  color: #111;
}

body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
  background: #111;
  color: #fff;
  border-radius: 999px;
  font-weight: 900;
}

/* Primary checkout action — solid black, strong contrast, matching the
   Modern Cart drawer and checkout page. */
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #fff;
  border: 1px solid #111;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 16px 20px;
  margin-top: 20px;
  transition: background 0.15s ease;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus {
  background: #333;
  color: #fff;
}

/* ---------------------------------------------------------
   6. RESPONSIVE
   Below 767px WooCommerce's own shop_table_responsive JS/CSS
   stacks each <td> as a labeled row (using the real data-title
   attributes already in the markup) — restyled here, not
   restructured.
--------------------------------------------------------- */

@media (max-width: 767px) {
  body.woocommerce-cart .woocommerce-cart-form__contents thead {
    display: none;
  }

  body.woocommerce-cart .woocommerce-cart-form__cart-item td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
  }

  body.woocommerce-cart .product-thumbnail {
    justify-content: flex-start;
  }

  body.woocommerce-cart .coupon {
    display: flex;
    width: 100%;
  }

  body.woocommerce-cart .coupon #coupon_code {
    flex: 1;
  }
}

@media (max-width: 1024px) {
  body.woocommerce-cart .cart-collaterals {
    max-width: 100%;
  }
}

/* Conversion Event: free-shipping bar + per-item savings (Phase 8,
   2026-09-13) — real markup added by pepperlabz-event-cart-page.php via
   native WooCommerce hooks, scoped the same way as the rest of this file.
   Gated by plz_flag('event_active') — inert today. */
body.woocommerce-cart .plz-cart-page-shipping-bar {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: #F1F3F5;
  border-radius: 10px;
}

body.woocommerce-cart .plz-cart-page-shipping-msg {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1C1F23;
}

body.woocommerce-cart .plz-cart-page-shipping-unlocked {
  color: #1C1F23;
}

body.woocommerce-cart .plz-cart-page-progress-track {
  height: 6px;
  border-radius: 3px;
  background: #C4CAD1;
  overflow: hidden;
}

body.woocommerce-cart .plz-cart-page-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #79818A, #1C1F23);
  transition: width 0.3s ease;
}

body.woocommerce-cart .plz-cart-page-item-savings {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #79818A;
}