/* Liftaya — cart & checkout brand styling (self-contained; loaded only on those pages). */

:root {
  --max: 1440px;
  --midnight: #1b1214;
  --primary: #ff2d78;
  --primary-dark: #d90048;
  --accent: #ff7eb0;
  --whisper: #fff0f7;
  --kiss: #ffeef5;
  --line: #ffb8d4;
  --cloud: #ffffff;
  --muted: #8a7078;
  --r-sm: 16px;
  --r-md: 28px;
  --r-pill: 999px;
  --shadow: 0 20px 50px rgba(27, 18, 20, 0.08);
  --shadow-lg: 0 28px 60px rgba(27, 18, 20, 0.12);
  --font-display: 'Fraunces', Georgia, serif;
}

/* Page background + title band -------------------------------------------- */
body.woocommerce-cart,
body.woocommerce-checkout { background: #fff !important; }

body.woocommerce-cart .entry-hero.page-hero-section,
body.woocommerce-checkout .entry-hero.page-hero-section {
  background: var(--whisper) !important;
  border-bottom: 1px solid var(--line);
}
body.woocommerce-cart .entry-hero .entry-title,
body.woocommerce-checkout .entry-hero .entry-title {
  font-family: var(--font-display) !important;
  color: var(--midnight) !important;
}

/* Kill the default magenta box: neutralise any palette / inline background
   that sits on the cart/checkout content and its block wrappers. ---------- */
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-cart .wc-block-cart__main,
body.woocommerce-cart .wc-block-cart__sidebar,
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--midnight) !important;
}
body.woocommerce-cart .entry-content [class*="background-color"],
body.woocommerce-checkout .entry-content [class*="background-color"] {
  background-color: transparent !important;
}
/* The magenta box is Kadence's "boxed content" wrapper — strip its bg/shadow. */
body.woocommerce-cart .content-bg,
body.woocommerce-cart .entry-content-wrap,
body.woocommerce-cart .entry.single-entry,
body.woocommerce-cart .content-container,
body.woocommerce-cart .single-entry .entry-content-wrap,
body.woocommerce-checkout .content-bg,
body.woocommerce-checkout .entry-content-wrap,
body.woocommerce-checkout .entry.single-entry,
body.woocommerce-checkout .content-container,
body.woocommerce-checkout .single-entry .entry-content-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Constrain + centre the store content like the rest of the site. --------- */
body.woocommerce-cart .entry-content > *,
body.woocommerce-checkout .entry-content > * {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

/* Order summary / totals → ONE clean white card --------------------------- */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow) !important;
  padding: clamp(1.2rem, 2.2vw, 1.75rem) !important;
}
/* Inner blocks sit flat inside that one card (no nested pills). */
.wc-block-cart__sidebar .wc-block-components-sidebar > *,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Coupon row as a subtle divider, not a floating pill. */
.wc-block-components-totals-coupon,
.wc-block-cart__sidebar .wc-block-components-panel {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0.9rem !important;
  margin-bottom: 0.9rem !important;
}

/* Cart items table on white. */
.wc-block-cart-items,
.wc-block-cart__main { background: #fff !important; }
.wc-block-cart-items__header,
.wc-block-cart-item__total,
.wc-block-components-product-name { color: var(--midnight) !important; }

/* Totals figures + savings accent. */
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount { color: var(--midnight) !important; font-weight: 700; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--primary) !important; font-size: 1.35rem !important;
}

/* Primary store buttons — flat, solid, full-width, modern radius. */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-components-button.contained {
  background: var(--primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  width: 100% !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1rem 1.5rem !important;
  transition: background 0.2s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover { background: var(--primary-dark) !important; }

/* Footer (.footer-main design, mirrored from pdp.css so it styles here too). */
.footer-main { background: var(--midnight); color: rgba(255, 255, 255, 0.75); padding: 2.5rem clamp(1rem, 4vw, 2rem) 1.5rem; font-size: 0.85rem; position: relative; overflow: hidden; }
.footer-grid { display: grid; gap: 2rem; max-width: var(--max); margin: 0 auto 2rem; position: relative; z-index: 1; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-main a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.footer-main a:hover { color: var(--accent); }
.footer-main h4 { margin: 0 0 0.75rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.footer-main ul { list-style: none; margin: 0; padding: 0; }
.footer-main li { margin: 0.35rem 0; }
.footer-bottom { max-width: var(--max); margin: 0 auto; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.75rem; text-align: center; position: relative; z-index: 1; }
.footer-watermark { position: absolute; bottom: -2.5rem; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 22vw, 16rem); line-height: 1; color: rgba(255, 45, 120, 0.08); pointer-events: none; white-space: nowrap; z-index: 0; }