/* ====================================================================
 * lldc-premium-checkout.css — Phase WC-6 brand polish for the
 * WooCommerce shop / cart / checkout / product / thank-you pages.
 *
 *   THIS FILE LIVES IN THE Next.js REPO ONLY AS A REFERENCE ASSET.
 *   IT IS NOT IMPORTED BY NEXT. UPLOAD IT TO THE WORDPRESS SIDE.
 *
 * Two ways to deploy on WP:
 *
 *   A.  Drop this file at wp-content/mu-plugins/assets/
 *       lldc-premium-checkout.css. The companion mu-plugin
 *       (lldc-premium-checkout.php) enqueues it on WC pages only.
 *
 *   B.  Appearance → Customizer → Additional CSS (paste this whole
 *       file). Faster for first-look testing, scoped to the active
 *       theme; rolls back by emptying the textarea.
 *
 * RULES THIS SHEET FOLLOWS
 *   · Every selector is scoped to `body.lldc-premium`. The mu-plugin's
 *     body_class filter adds that class on exactly the WC customer
 *     surfaces (shop, cart, checkout, product, account, order-received)
 *     — so this file cannot bleed into the WP blog / About / contact.
 *   · No `display:none` on anything legally required (Terms link,
 *     totals row, tax line, payment-method block, refund link, validation).
 *   · No `!important` except on layout/visibility resets where the
 *     theme/Divi/Storefront baseline would otherwise fight us.
 *   · Mobile-first; min-width media queries layer in desktop polish.
 *   · Buttons keep WC's stock class names so payment-plugin overrides
 *     still work; we only repaint the surface.
 *   · Dark premium theme — matches the LL-DC storefront's deep-navy
 *     palette (app/globals.css `--ink-900` / `--brand-500` etc.) so
 *     the cross-origin handoff into WC reads as the same brand.
 *
 * ROLLBACK: rename the companion mu-plugin (option A), or clear
 * Additional CSS (option B). No data is touched; no shortcodes
 * are altered; no template files are modified.
 * ==================================================================== */

/* --------------------------------------------------------------------
 * 1. Brand tokens — keep in one place so colour/typography swaps
 *    happen in a single edit. Values mirror the Next.js storefront's
 *    `--ink-*` / `--brand-*` / `--brand-glow` CSS variables so the
 *    round-trip looks consistent.
 * -------------------------------------------------------------------- */
body.lldc-premium {
  /* Brand palette */
  --lldc-brand-300: #5eead4;
  --lldc-brand-500: #14b8a6;       /* primary action teal */
  --lldc-brand-600: #0d9488;
  --lldc-brand-700: #0f766e;
  --lldc-cyan-400:  #22d3ee;       /* signal cyan, used on nodes/glow */
  --lldc-brand-glow:        rgba(20, 184, 166, 0.35);
  --lldc-brand-glow-strong: rgba(34, 211, 238, 0.45);

  /* Surface palette — dark navy, mirrors order-page bg `#04070f` */
  --lldc-bg:        #04070f;
  --lldc-bg-soft:   #0b0f19;       /* `--ink-900` from globals.css */
  --lldc-surface:   rgba(255, 255, 255, 0.04);
  --lldc-surface-2: rgba(255, 255, 255, 0.06);
  --lldc-border:    rgba(255, 255, 255, 0.10);
  --lldc-border-strong: rgba(255, 255, 255, 0.16);

  /* Text palette */
  --lldc-text:    #e9f1fb;         /* matches storefront body text */
  --lldc-ink:     #ffffff;         /* headings */
  --lldc-muted:   rgba(255, 255, 255, 0.55);
  --lldc-faint:   rgba(255, 255, 255, 0.40);

  /* Geometry */
  --lldc-radius:    14px;
  --lldc-radius-sm: 10px;
  --lldc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
  --lldc-shadow-md: 0 12px 36px -10px rgba(0, 0, 0, 0.48);
  --lldc-shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                      0 12px 36px -10px rgba(0, 0, 0, 0.48);
}

/* --------------------------------------------------------------------
 * 2. Page surface — deep navy with an ambient gradient wash. The
 *    `::before` pseudo-element approximates the storefront's
 *    AmbientBackground (three radial-gradient blobs in chrome.tsx)
 *    using a single fixed layer so it's free of layout impact.
 * -------------------------------------------------------------------- */
body.lldc-premium {
  background-color: var(--lldc-bg);
  color: var(--lldc-text);
  font-family:
    "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sit content below the fixed mini-header (height ~64px) so the
     theme's own header isn't visually cropped. Bottom padding
     leaves room for the mini-footer. */
  padding-top: 64px;
  padding-bottom: 96px;
}

body.lldc-premium::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 720px at 50% -120px,
      rgba(20, 184, 166, 0.18), transparent 70%),
    radial-gradient(560px 560px at -20% 40%,
      rgba(15, 118, 110, 0.16), transparent 70%),
    radial-gradient(620px 620px at 110% 100%,
      rgba(34, 211, 238, 0.10), transparent 70%);
  filter: blur(20px);
}

body.lldc-premium > * {
  position: relative; /* keep content above the ::before wash */
}

/* --------------------------------------------------------------------
 * 3. Hide non-commerce chrome that the WP theme bolts onto WC pages.
 *    Scope is `body.lldc-premium` — the mu-plugin only adds that
 *    class to WC customer pages, so this can never bleed onto the
 *    blog homepage, About page, etc.
 *
 *    What we hide:
 *      · Default theme sidebar block (Storefront / TwentyTwentyFour /
 *        Astra / Divi all use one of these container classnames).
 *      · Recent Posts / Recent Comments / Archives / Meta / Search
 *        widgets when they happen to live in the WC-page sidebar.
 *      · WP Armour admin spam-test box (only visible to logged-in
 *        admins; we keep it hidden during customer testing too).
 *
 *    What we DO NOT hide:
 *      · WC's own checkout, cart, product blocks (HTML structure).
 *      · Stripe / payment-method radio list.
 *      · Terms-and-Conditions checkbox + link.
 *      · Order totals, tax line, refund-policy link.
 *      · Any required validation / error messaging.
 * -------------------------------------------------------------------- */
body.lldc-premium #secondary,
body.lldc-premium .widget-area,
body.lldc-premium aside.sidebar,
body.lldc-premium #sidebar {
  display: none !important;
}

body.lldc-premium .wpa-notice,
body.lldc-premium .wp-armour-notice {
  display: none !important;
}

/* Make the main content area span the full container width when
   the sidebar is gone. Most themes use one of these ID/class names
   for the WC content column. */
body.lldc-premium #primary,
body.lldc-premium #content,
body.lldc-premium main.site-main {
  width: 100% !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  padding: 32px 16px;
}

@media (min-width: 768px) {
  body.lldc-premium #primary,
  body.lldc-premium #content,
  body.lldc-premium main.site-main {
    padding: 56px 32px;
  }
}

/* --------------------------------------------------------------------
 * 4. Typography — quiet, premium hierarchy. Heading colors lift to
 *    near-white; body text uses --lldc-text.
 * -------------------------------------------------------------------- */
body.lldc-premium h1,
body.lldc-premium h2,
body.lldc-premium h3,
body.lldc-premium h4 {
  color: var(--lldc-ink);
  font-weight: 600;
  letter-spacing: -0.015em;
}

body.lldc-premium h1 {
  font-size: clamp(1.875rem, 1rem + 2vw, 2.5rem);
  margin: 0 0 0.6em;
}

body.lldc-premium h2 {
  font-size: 1.25rem;
  margin: 1.75em 0 0.85em;
}

body.lldc-premium p,
body.lldc-premium li {
  color: var(--lldc-text);
  line-height: 1.55;
}

body.lldc-premium a {
  color: var(--lldc-brand-300);
  text-decoration: none;
  transition: color 0.15s ease;
}
body.lldc-premium a:hover {
  color: var(--lldc-cyan-400);
}

/* --------------------------------------------------------------------
 * 5. Buttons — one consistent visual treatment for every WC button.
 *    Stripe-plugin buttons inherit from .button / .checkout-button
 *    so they pick this up automatically. Primary = teal fill with
 *    brand-glow shadow; secondary = glass outline.
 * -------------------------------------------------------------------- */
body.lldc-premium .button,
body.lldc-premium button.button,
body.lldc-premium .checkout-button,
body.lldc-premium #place_order,
body.lldc-premium .single_add_to_cart_button {
  background: linear-gradient(135deg,
    var(--lldc-brand-500) 0%,
    var(--lldc-brand-600) 100%);
  color: #ffffff;
  border: 1px solid var(--lldc-brand-500);
  border-radius: var(--lldc-radius);
  padding: 0.95em 1.5em;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px -10px var(--lldc-brand-glow);
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
  min-height: 44px; /* WCAG mobile tap target */
  cursor: pointer;
}

body.lldc-premium .button:hover,
body.lldc-premium button.button:hover,
body.lldc-premium .checkout-button:hover,
body.lldc-premium #place_order:hover,
body.lldc-premium .single_add_to_cart_button:hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 36px -8px var(--lldc-brand-glow-strong);
  color: #ffffff;
  transform: translateY(-1px);
}

body.lldc-premium .button:focus-visible,
body.lldc-premium #place_order:focus-visible,
body.lldc-premium .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--lldc-cyan-400);
  outline-offset: 2px;
}

/* Secondary buttons (Continue shopping, Apply coupon, Update cart) —
   glass outline on dark. */
body.lldc-premium .button.alt-secondary,
body.lldc-premium .actions .button[name="update_cart"],
body.lldc-premium .button[name="apply_coupon"] {
  background: var(--lldc-surface);
  color: var(--lldc-text);
  border: 1px solid var(--lldc-border);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
body.lldc-premium .button.alt-secondary:hover,
body.lldc-premium .actions .button[name="update_cart"]:hover,
body.lldc-premium .button[name="apply_coupon"]:hover {
  border-color: var(--lldc-brand-500);
  color: var(--lldc-brand-300);
  background: var(--lldc-surface-2);
  filter: none;
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------
 * 6. Glass cards — wrap WC's structural blocks in the storefront's
 *    glass-premium surface so checkout, cart totals, and account
 *    content all read as part of the same visual system.
 * -------------------------------------------------------------------- */
body.lldc-premium .woocommerce-checkout-review-order,
body.lldc-premium .woocommerce-checkout #order_review,
body.lldc-premium .cart_totals,
body.lldc-premium .woocommerce-MyAccount-content,
body.lldc-premium .woocommerce-order,
body.lldc-premium .woocommerce-customer-details,
body.lldc-premium .woocommerce-Address {
  background: var(--lldc-surface);
  border: 1px solid var(--lldc-border);
  border-radius: var(--lldc-radius);
  box-shadow: var(--lldc-shadow-glow);
  backdrop-filter: blur(18px);
  padding: 24px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  body.lldc-premium .woocommerce-checkout-review-order,
  body.lldc-premium .woocommerce-checkout #order_review,
  body.lldc-premium .cart_totals,
  body.lldc-premium .woocommerce-MyAccount-content {
    padding: 32px;
  }
}

/* --------------------------------------------------------------------
 * 7. Tables (cart + order summary + my-orders) — quiet rows on dark
 *    glass; teal-emphasized totals.
 * -------------------------------------------------------------------- */
body.lldc-premium table.shop_table,
body.lldc-premium table.woocommerce-orders-table {
  border: 1px solid var(--lldc-border);
  border-radius: var(--lldc-radius);
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--lldc-text);
}

body.lldc-premium table.shop_table th,
body.lldc-premium table.woocommerce-orders-table th {
  background: var(--lldc-surface-2);
  color: var(--lldc-ink);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--lldc-border);
}

body.lldc-premium table.shop_table td,
body.lldc-premium table.woocommerce-orders-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--lldc-border);
  color: var(--lldc-text);
  background: transparent;
}

body.lldc-premium table.shop_table tr:last-child td {
  border-bottom: none;
}

/* Totals emphasis — teal-tinted total amount, near-white subtotal */
body.lldc-premium .order-total .amount,
body.lldc-premium tr.order-total .amount {
  color: var(--lldc-cyan-400);
  font-size: 1.375rem;
  font-weight: 600;
}
body.lldc-premium .cart-subtotal .amount,
body.lldc-premium .shipping .amount,
body.lldc-premium .tax-rate .amount {
  color: var(--lldc-text);
  font-weight: 500;
}

/* --------------------------------------------------------------------
 * 8. Form fields — dark glass inputs with teal focus ring.
 *    Untouched: required-field markers, validation messages,
 *    error highlights (those stay WC default red so users see them).
 * -------------------------------------------------------------------- */
body.lldc-premium .form-row input.input-text,
body.lldc-premium .form-row textarea,
body.lldc-premium .form-row select,
body.lldc-premium input[type="text"],
body.lldc-premium input[type="email"],
body.lldc-premium input[type="tel"],
body.lldc-premium input[type="number"],
body.lldc-premium input[type="password"],
body.lldc-premium textarea,
body.lldc-premium select {
  background: var(--lldc-surface);
  color: var(--lldc-text);
  border: 1px solid var(--lldc-border);
  border-radius: var(--lldc-radius-sm);
  padding: 12px 14px;
  font-size: 0.95rem;
  min-height: 44px;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

body.lldc-premium .form-row input.input-text::placeholder,
body.lldc-premium textarea::placeholder,
body.lldc-premium input::placeholder {
  color: var(--lldc-faint);
}

body.lldc-premium .form-row input.input-text:focus,
body.lldc-premium .form-row textarea:focus,
body.lldc-premium .form-row select:focus,
body.lldc-premium input:focus,
body.lldc-premium textarea:focus,
body.lldc-premium select:focus {
  outline: none;
  border-color: var(--lldc-brand-500);
  background: var(--lldc-surface-2);
  box-shadow: 0 0 0 3px var(--lldc-brand-glow);
}

body.lldc-premium .form-row label,
body.lldc-premium label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lldc-muted);
  letter-spacing: 0.01em;
}

/* Required asterisk stays visible in brand teal */
body.lldc-premium .required {
  color: var(--lldc-brand-300);
  text-decoration: none;
}

/* --------------------------------------------------------------------
 * 9. Single-product page — keep focus on the purchase decision.
 *    SKU/categories metadata stays VISIBLE for legal/inventory
 *    reasons but is quieter.
 * -------------------------------------------------------------------- */
body.lldc-premium.single-product .product_meta,
body.lldc-premium .product_meta {
  font-size: 0.75rem;
  color: var(--lldc-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--lldc-border);
}

body.lldc-premium .summary .price {
  color: var(--lldc-ink);
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

body.lldc-premium .woocommerce-product-gallery {
  background: var(--lldc-surface);
  border: 1px solid var(--lldc-border);
  border-radius: var(--lldc-radius);
  padding: 12px;
  box-shadow: var(--lldc-shadow-sm);
}

/* --------------------------------------------------------------------
 * 10. Notices (success / info / error) — brand-tone on dark.
 * -------------------------------------------------------------------- */
body.lldc-premium .woocommerce-message,
body.lldc-premium .woocommerce-info {
  background: var(--lldc-surface-2);
  border: 1px solid var(--lldc-border);
  border-left: 3px solid var(--lldc-brand-500);
  color: var(--lldc-text);
  padding: 14px 18px;
  border-radius: var(--lldc-radius-sm);
  box-shadow: var(--lldc-shadow-sm);
}

body.lldc-premium .woocommerce-error {
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-left: 3px solid #dc2626;
  color: #fecaca;
  padding: 14px 18px;
  border-radius: var(--lldc-radius-sm);
}

/* --------------------------------------------------------------------
 * 11. Order received / thank-you page — confident confirmation surface.
 * -------------------------------------------------------------------- */
body.lldc-premium .woocommerce-thankyou-order-received {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--lldc-ink);
  margin-bottom: 0.75em;
}

body.lldc-premium .woocommerce-order-overview {
  background: var(--lldc-surface);
  border: 1px solid var(--lldc-border);
  border-radius: var(--lldc-radius);
  padding: 22px 26px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
  box-shadow: var(--lldc-shadow-glow);
}

body.lldc-premium .woocommerce-order-overview li {
  border: none;
  padding: 0;
  font-size: 0.78rem;
  color: var(--lldc-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.lldc-premium .woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  color: var(--lldc-ink);
  font-size: 1.0625rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* --------------------------------------------------------------------
 * 12. My-Account dashboard — navigation tabs + content area.
 * -------------------------------------------------------------------- */
body.lldc-premium .woocommerce-MyAccount-navigation {
  margin-bottom: 16px;
}
body.lldc-premium .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.lldc-premium .woocommerce-MyAccount-navigation ul li {
  margin: 0;
}
body.lldc-premium .woocommerce-MyAccount-navigation ul li a {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--lldc-surface);
  border: 1px solid var(--lldc-border);
  color: var(--lldc-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
body.lldc-premium .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--lldc-surface-2);
  color: var(--lldc-brand-300);
  border-color: var(--lldc-border-strong);
}
body.lldc-premium .woocommerce-MyAccount-navigation ul li.is-active a,
body.lldc-premium .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a {
  background: var(--lldc-brand-500);
  border-color: var(--lldc-brand-500);
  color: #ffffff;
}

/* Order-status pill on My-Account orders table */
body.lldc-premium .woocommerce-orders-table .order-status,
body.lldc-premium mark.order-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--lldc-surface-2);
  border: 1px solid var(--lldc-border);
  color: var(--lldc-text);
}

/* --------------------------------------------------------------------
 * 13. LL-DC mini-header — fixed glass strip injected by the mu-plugin
 *     via wp_body_open. Only ever rendered when body.lldc-premium is
 *     set, so this CSS is naturally co-scoped.
 * -------------------------------------------------------------------- */
body.lldc-premium .lldc-mini-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: rgba(4, 7, 15, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--lldc-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 8px 24px -10px rgba(0, 0, 0, 0.5);
}

body.lldc-premium .lldc-mini-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.lldc-premium .lldc-mini-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.lldc-premium .lldc-mini-mark {
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.35));
}

body.lldc-premium .lldc-mini-header__wordmark {
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  color: var(--lldc-ink);
}

body.lldc-premium .lldc-mini-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--lldc-surface);
  border: 1px solid var(--lldc-border);
  color: var(--lldc-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
body.lldc-premium .lldc-mini-header__back:hover {
  background: var(--lldc-surface-2);
  border-color: var(--lldc-border-strong);
  color: var(--lldc-brand-300);
}

/* --------------------------------------------------------------------
 * 14. LL-DC mini-footer — quiet legal-link strip injected via wp_footer.
 * -------------------------------------------------------------------- */
body.lldc-premium .lldc-mini-footer {
  margin-top: 56px;
  padding: 24px 20px;
  border-top: 1px solid var(--lldc-border);
  background: rgba(4, 7, 15, 0.6);
}

body.lldc-premium .lldc-mini-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.8125rem;
  color: var(--lldc-muted);
}

body.lldc-premium .lldc-mini-footer__copy {
  letter-spacing: 0.02em;
}

body.lldc-premium .lldc-mini-footer__nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

body.lldc-premium .lldc-mini-footer__nav a {
  color: var(--lldc-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
body.lldc-premium .lldc-mini-footer__nav a:hover {
  color: var(--lldc-brand-300);
}

/* --------------------------------------------------------------------
 * 15. Mobile polish — stack table cells, tighten spacing.
 * -------------------------------------------------------------------- */
@media (max-width: 640px) {
  body.lldc-premium {
    padding-top: 56px;
  }

  body.lldc-premium .lldc-mini-header__inner {
    padding: 10px 14px;
  }
  body.lldc-premium .lldc-mini-header__back span:last-child {
    display: none; /* keep only the arrow on small screens */
  }

  body.lldc-premium .lldc-mini-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  body.lldc-premium table.shop_table thead {
    display: none;
  }
  body.lldc-premium table.shop_table td {
    display: block;
    text-align: right;
    padding: 10px 14px;
    position: relative;
  }
  body.lldc-premium table.shop_table td::before {
    content: attr(data-title);
    float: left;
    font-weight: 500;
    color: var(--lldc-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------------------
 * 16. Active-theme chrome neutralisation (Phase 1 staging hotfix).
 *
 *     When the host WP theme renders its own header/footer/wrapper on
 *     WC pages, they stack with our LL-DC mini-chrome and leak the old
 *     "WordPress feel" — old logo+nav below our mini-header, old
 *     footer below ours, and a white wrapper background that hides
 *     cart text on dark.
 *
 *     We neutralise that — but only inside `body.lldc-premium`, which
 *     the mu-plugin only adds to WC customer surfaces. Blog / About /
 *     contact / any non-WC page is *not* affected.
 *
 *     Selector strategy:
 *       · `:not(.lldc-mini-header)` / `:not(.lldc-mini-footer)`
 *         guards prevent us from accidentally hiding our own injected
 *         chrome (which lives at `body > header.lldc-mini-header` and
 *         `body > footer.lldc-mini-footer`).
 *       · The named ID/class catalogue covers the most-used WP themes
 *         and page-builders: Twenty Twenty-*, Astra, Storefront,
 *         GeneratePress, Divi, Elementor, Hello Elementor.
 *       · A defence-in-depth `> header` / `> footer` direct-child
 *         selector catches themes that put chrome at the body root
 *         (the named selectors handle themes that wrap in `#page`).
 *
 *     What we DO NOT hide:
 *       · WC's own forms, tables, notices, payment-method blocks.
 *       · Terms checkbox, refund-policy link, tax/totals rows.
 *       · The submit / place-order button.
 *       · Validation messages (`.woocommerce-error` etc.).
 * -------------------------------------------------------------------- */

/* 16a. Hide the theme's own site header on WC premium pages. */
body.lldc-premium > header:not(.lldc-mini-header),
body.lldc-premium #masthead,
body.lldc-premium header.site-header,
body.lldc-premium .site-header:not(.lldc-mini-header),
body.lldc-premium #site-header,
body.lldc-premium #main-header,
body.lldc-premium .global-header,
body.lldc-premium [data-elementor-type="header"] {
  display: none !important;
}

/* 16b. Hide the theme's own site footer on WC premium pages. */
body.lldc-premium > footer:not(.lldc-mini-footer),
body.lldc-premium #colophon,
body.lldc-premium footer.site-footer,
body.lldc-premium .site-footer:not(.lldc-mini-footer),
body.lldc-premium #site-footer,
body.lldc-premium #main-footer,
body.lldc-premium [data-elementor-type="footer"] {
  display: none !important;
}

/* 16c. Neutralise the theme's white page-wrapper background so our
   deep-navy body shows through. We use `transparent` (not navy) so a
   theme wrapping content in a colored card still has its own colour
   visible — but the overall page reads as LL-DC dark. */
body.lldc-premium #page,
body.lldc-premium .site,
body.lldc-premium .site-content,
body.lldc-premium #content,
body.lldc-premium #page-container,
body.lldc-premium #et-main-area,
body.lldc-premium .wp-site-blocks,
body.lldc-premium .ast-container,
body.lldc-premium .container,
body.lldc-premium .woocommerce {
  background: transparent !important;
  box-shadow: none !important;
}

/* 16d. WooCommerce's `.blockUI` AJAX-loading overlay defaults to a
   white 60%-opacity wash that's near-invisible on light themes and
   reads as a bright flash on our dark surface. Re-tone it so the
   spinner remains visible without breaking the dark aesthetic.
   Only the visual weight changes — the overlay still blocks
   interaction, still releases when WC resolves the AJAX call. */
body.lldc-premium .blockUI.blockOverlay {
  background: rgba(4, 7, 15, 0.55) !important;
}

/* --------------------------------------------------------------------
 * 17. Reduced motion — respect the user's OS preference. The mini-mark's
 *     subtle drop-shadow is decorative, drop the glow for opt-out users.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.lldc-premium .lldc-mini-mark {
    filter: none;
  }
  body.lldc-premium .button,
  body.lldc-premium #place_order,
  body.lldc-premium .single_add_to_cart_button {
    transition: none;
  }
  body.lldc-premium .button:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------
 * 18. Divi-specific overrides (staging hotfix — confirmed via DevTools).
 *
 *     Active theme on the live WordPress is Divi
 *     (`body.et_divi_theme.et_pb_pagebuilder_layout`). Divi renders its
 *     own header (#main-header, #top-header), navigation
 *     (#et-top-navigation, .et_menu_container), logo (.logo_container),
 *     footer (#main-footer, #footer-widgets, #footer-bottom), and
 *     wraps every page in Divi Builder primitives (.et_pb_section,
 *     .et_pb_row, .et_pb_column, .et_pb_module) — each with default
 *     white backgrounds.
 *
 *     The generic §16 catalogue covered #main-header / #main-footer /
 *     #et-main-area, but Divi has additional chrome layers and the
 *     Builder wrappers paint white over our deep-navy body. This block
 *     specifically targets the Divi names not (or only partially)
 *     covered by §16.
 *
 *     Scoped to `body.lldc-premium`, so blog / About / any non-WC
 *     page keeps the full Divi chrome.
 *
 *     What this DOES NOT touch:
 *       · WooCommerce shortcode output — cart / checkout / forms /
 *         tables / notices / payment / terms / buttons remain
 *         visible. They are typically rendered *inside* Divi Builder
 *         wrappers, so 18d only neutralises the wrappers' visuals
 *         (`background`, `box-shadow`, `border-color`) and never
 *         touches `display`.
 *       · The mu-plugin mini-header / mini-footer — their `lldc-*`
 *         class names are not matched by any selector below.
 * -------------------------------------------------------------------- */

/* 18a. Hide Divi header chrome on WC premium pages.
   `#main-header` is already in §16a; repeated here for explicit
   coverage and joined by Divi's secondary top bar, primary nav,
   logo, search, mobile-nav, and full-width header modules. */
body.lldc-premium #top-header,
body.lldc-premium #main-header,
body.lldc-premium .et_menu_container,
body.lldc-premium .logo_container,
body.lldc-premium #et-top-navigation,
body.lldc-premium .et_search_form_container,
body.lldc-premium #et_top_search,
body.lldc-premium .et_mobile_nav_menu,
body.lldc-premium .et_header_style_default,
body.lldc-premium .et_pb_menu,
body.lldc-premium .et_pb_fullwidth_header {
  display: none !important;
}

/* 18b. Hide Divi footer chrome. */
body.lldc-premium #main-footer,
body.lldc-premium #footer-widgets,
body.lldc-premium #footer-bottom,
body.lldc-premium #footer-info,
body.lldc-premium .bottom-nav,
body.lldc-premium .et_pb_widget_area {
  display: none !important;
}

/* 18c. Hide Divi sidebar. */
body.lldc-premium #sidebar,
body.lldc-premium .et_right_sidebar #sidebar,
body.lldc-premium .et_left_sidebar #sidebar {
  display: none !important;
}

/* 18d. Neutralise Divi wrappers — keep them VISIBLE (cart/checkout
   content lives inside them) but transparent so our deep-navy body
   shows through. We override background, box-shadow, and any white
   border/divider strokes Divi applies to its Builder primitives.
   Divi sometimes uses both `background` and `background-color`, so
   we kill both explicitly. */
body.lldc-premium #page-container,
body.lldc-premium #et-main-area,
body.lldc-premium #main-content,
body.lldc-premium .et-l,
body.lldc-premium .et_builder_inner_content,
body.lldc-premium .et_pb_section,
body.lldc-premium .et_pb_row,
body.lldc-premium .et_pb_column,
body.lldc-premium .et_pb_module,
body.lldc-premium .et_pb_post_content,
body.lldc-premium .et_pb_text,
body.lldc-premium .et_pb_with_background,
body.lldc-premium article.et_pb_post,
body.lldc-premium .single-product div.product {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 18e. Loosen Divi's Builder side-padding/max-width on the content
   container so cart and checkout cards span the LL-DC content width
   (1080px) instead of the narrower Divi default. */
body.lldc-premium #main-content .container,
body.lldc-premium #et-main-area .container,
body.lldc-premium .et_pb_section .et_pb_row {
  max-width: 1080px !important;
  width: 100% !important;
}

/* 18f. Divi enforces dark body text on its layout primitives by
   default; ensure text inside wrappers reads as our LL-DC near-white
   so cart / checkout copy is legible on the dark surface. */
body.lldc-premium .et_pb_section,
body.lldc-premium .et_pb_row,
body.lldc-premium .et_pb_column,
body.lldc-premium .et_pb_module,
body.lldc-premium .et_pb_text,
body.lldc-premium #main-content,
body.lldc-premium .entry-content {
  color: var(--lldc-text);
}

/* 18g. Divi's `.et_pb_pagebuilder_layout` body class can apply its
   own background. We've already set body bg in §2; this is an
   explicit re-assert to win against Divi's body-level rules without
   adding `!important` to §2 (which would over-strengthen the base). */
body.lldc-premium.et_pb_pagebuilder_layout,
body.lldc-premium.et_divi_theme {
  background-color: var(--lldc-bg) !important;
}