/*
 Theme Name:   Astra Child
 Description:  A child theme for the Astra WordPress Theme.
 Author:       Luxury Hair Care Brand
 Template:     astra
 Version:      1.2.2
 Changelog:
 - v1.2.2: Consolidated all WooCommerce single product and archive styling with definitive, high-specificity selectors to override defaults without !important.
 - v1.2.1: Removed obsolete CSS sections (6.4, 8) related to previous mobile menu attempts.
*/

/* ==========================================================================
   1. FONT IMPORTS
   ========================================================================== */

/* Poppins (for Body) is self-hosted below. */
/* Helvetica Neue Extended (for Headings) is self-hosted below. */
@font-face {
  font-family: "Poppins";
  src:
    url("fonts/Poppins-Light.woff2") format("woff2"),
    url("fonts/Poppins-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src:
    url("fonts/Poppins-LightItalic.woff2") format("woff2"),
    url("fonts/Poppins-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src:
    url("fonts/Poppins-Regular.woff2") format("woff2"),
    url("fonts/Poppins-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src:
    url("fonts/Poppins-Italic.woff2") format("woff2"),
    url("fonts/Poppins-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src:
    url("fonts/Poppins-Medium.woff2") format("woff2"),
    url("fonts/Poppins-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src:
    url("fonts/Poppins-MediumItalic.woff2") format("woff2"),
    url("fonts/Poppins-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Extended";
  src:
    url("fonts/HelveticaNeueLTStd-LtEx.woff2") format("woff2"),
    url("fonts/HelveticaNeueLTStd-LtEx.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Extended";
  src:
    url("fonts/HelveticaNeueLTStd-Ex.woff2") format("woff2"),
    url("fonts/HelveticaNeueLTStd-Ex.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Extended";
  src:
    url("fonts/HelveticaNeueLTStd-MdEx.woff2") format("woff2"),
    url("fonts/HelveticaNeueLTStd-MdEx.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Extended";
  src:
    url("fonts/HelveticaNeueLTStd-BdEx.woff2") format("woff2"),
    url("fonts/HelveticaNeueLTStd-BdEx.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fallback font to prevent CLS during font loading */
@font-face {
  font-family: "Heading-Fallback";
  src: local("Arial");
  size-adjust: 120%;
  ascent-override: 90%;
}

/* ==========================================================================
   2. DESIGN TOKENS (THE SINGLE SOURCE OF TRUTH)
   ========================================================================== */

:root {
  /* Color Palette -- NEW "SOPHISTICATED NEUTRALS" PALETTE */
  --color-background-light: #f5f2ee;
  --color-background-subtle: #e9e5e1;
  --color-text-primary: #2f2c2a;
  --color-accent-burgundy: #640f2f;
  --color-accent-deep-ochre: #a57d2a;
  --color-accent-emerald: #00594e;
  --color-accent-red-sale: #c12b2b;

  /* =====================  TOKENS: FIXES & ADDITIONS  ===================== */
  /* Text on dark surfaces (video overlays, dark banners) */
  --color-text-on-dark: #ffffff;

  /* Overlay surfaces (standardized site-wide) */
  --overlay-surface-soft: rgba(0, 0, 0, 0.24);
  --overlay-surface-strong: rgba(0, 0, 0, 0.48);

  /* Back-compat names used by some sections (alias to overlay tokens) */
  --neutral-overlay-soft: var(--overlay-surface-soft);
  --neutral-overlay-strong: var(--overlay-surface-strong);

  /* Warm neutral ramp (light ↔ dark) for borders, text, and subtle UIs) */
  --color-neutral-200: var(
    --color-background-subtle
  ); /* re-use your existing subtle background */
  --color-neutral-300: #d8d4cf; /* warm light gray (borders, quiet dividers) */
  --color-neutral-600: #5c5753; /* warm mid-dark (muted headings, meta) */
  --color-neutral-700: #3f3b38; /* warm darker neutral (stronger text on light) */

  /* Spacing scale — add the missing XS step (harmonizes with your current scale) */
  --space-xs: 0.5rem;

  /* Optional (line-height tokens – used in typography rules below) */
  --line-height-tight: 1.1;
  --line-height-default: 1.5;
  --line-height-snug: 1.3;
  --line-height-relaxed: 1.6;

  /* Typographic rhythm */
  --space-unit-base: 0.5rem; /* 8px baseline */
  --type-gap-kicker-headline: calc(var(--space-unit-base) * 4); /* 32px */
  --type-gap-headline-subheadline: clamp(
    calc(var(--space-unit-base) * 2.75),
    3vw,
    calc(var(--space-unit-base) * 5)
  ); /* 22px → 40px */
  --type-gap-subheadline-body: clamp(
    calc(var(--space-unit-base) * 2.5),
    3.5vw,
    calc(var(--space-unit-base) * 4.5)
  ); /* 20px → 36px */
  --type-gap-body-cta: clamp(
    calc(var(--space-unit-base) * 3),
    5vw,
    calc(var(--space-unit-base) * 6)
  ); /* 24px → 48px */

  /* Hero typography helpers */
  --font-size-hero-subheadline: calc(var(--font-size-lg) * 0.85);
  --font-size-hero-body: calc(var(--font-size-base) * 1.08);
  --tracking-tight: -0.02em;
  --tracking-button-wide: 0.06em;

  /* Additional grays */
  --color-gray-subtle: #c4c1bd; /* Warm subtle gray for ratings/outlines */

  /* Font Families */
  --font-family-body: "poppins", sans-serif;
  --font-family-heading: "Helvetica Neue Extended", "Heading-Fallback",
    sans-serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Fluid Type Scale (Mobile First) */
  --font-size-base: clamp(0.9375rem, 0.25vw + 0.875rem, 1.0625rem);
  --font-size-sm: clamp(0.875rem, 0.1vw + 0.85rem, 0.9375rem);
  --font-size-xs: clamp(0.8125rem, 0.1vw + 0.79rem, 0.875rem);
  --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);

  /* Spacing Scale */
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 3rem;
  --space-xxl: 4rem;
  --space-xxl2: 8rem;

  /* Borders & Radius */
  --border-radius-sm: 3px;
  --border-radius-md: 1rem;
  --border-width: 1px;
  --border-color: var(--color-background-subtle);

  /* Single Product Image Gallery Thumbnail Heights */
  --thumb-min-h: 75px;
  --thumb-max-h: 152.25px;

  /* Layout */
  --container-width: 1340px;
}

/* ==========================================================================
   3. GLOBAL BASE STYLES (Applying the 60-30-10 Rule)
   ========================================================================== */

body {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-background-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
  text-wrap: balance;
  margin: 0 0 var(--space-md) 0;
  line-height: 1.2;
  letter-spacing: 0em;
}

h1 {
  font-size: var(--font-size-xxl);
}
h2 {
  font-size: var(--font-size-xl);
}
h3 {
  font-size: var(--font-size-lg);
}
h4 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--space-md) 0;
  line-height: 1.6;
}

/* =========================================================
   Section: Global Base - Links
   Purpose: Lighten default link color for header icon usage while preserving accessible states
   ========================================================= */

a {
  color: color-mix(
    in srgb,
    var(--color-accent-burgundy) 70%,
    var(--color-background-light)
  );
  text-decoration: none;
  transition:
    color 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

a:hover,
a:focus {
  color: var(--color-accent-burgundy);
  /*text-decoration: underline;*/
  opacity: 1;
}

a:focus-visible {
  outline: 2px solid var(--color-accent-deep-ochre);
  outline-offset: 2px;
}

/* ==========================================================================
   5. COMPONENT & THEME OVERRIDES
   ========================================================================== */

.entry-header {
  display: none;
}

/* --- WooCommerce Base Overrides --- */
.related.products > h2,
.upsells.products > h2 {
  font-size: var(--font-size-lg);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  letter-spacing: 0;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  margin-bottom: var(
    --space-md
  ); /* Reduces gap to button while maintaining alignment */
  color: var(--color-text-primary);
}

/* =========================================================
   Section: Global UI - Buttons
   Purpose: Unify CTA styling, fix optical centering, provide size variants
   ========================================================= */

.ui-button__control,
:is(
  .woocommerce a.button,
  .woocommerce a.button.alt,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .wp-block-button__link,
  .uagb-button__link,
  .ast-button
) {
  --button-padding-inline: var(--space-lg);
  --button-padding-block-start: calc(
    var(--space-sm) + 0.1875rem
  ); /* Caps compensation pushes label downward */
  --button-padding-block-end: calc(var(--space-sm) - 0.0625rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-sm) / 2);
  padding-inline: var(--button-padding-inline);
  padding-block-start: var(--button-padding-block-start);
  padding-block-end: var(--button-padding-block-end);
  min-height: 3rem; /* >=48px tap target */
  border-radius: var(--border-radius-sm);
  border: none;
  background-color: var(--color-accent-burgundy);
  color: var(--color-background-light);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.6; /* allows multi-line uppercase labels to breathe */
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  box-shadow: 0 2px 6px
    color-mix(in srgb, var(--color-text-primary) 18%, transparent);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.ui-button__control:hover,
:is(
    .woocommerce a.button,
    .woocommerce a.button.alt,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .wp-block-button__link,
    .uagb-button__link,
    .ast-button
  ):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px
    color-mix(in srgb, var(--color-text-primary) 32%, transparent);
  text-decoration: none;
}

.ui-button__control:focus-visible,
:is(
    .woocommerce a.button,
    .woocommerce a.button.alt,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .wp-block-button__link,
    .uagb-button__link,
    .ast-button
  ):focus-visible {
  outline: 2px solid var(--color-accent-deep-ochre);
  outline-offset: 3px;
  box-shadow:
    0 0 0 2px
      color-mix(in srgb, var(--color-accent-deep-ochre) 45%, transparent),
    0 4px 12px color-mix(in srgb, var(--color-text-primary) 32%, transparent);
}

.ui-button__control:active,
:is(
    .woocommerce a.button,
    .woocommerce a.button.alt,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .wp-block-button__link,
    .uagb-button__link,
    .ast-button
  ):active {
  transform: translateY(0);
  box-shadow: 0 2px 6px
    color-mix(in srgb, var(--color-text-primary) 22%, transparent);
}

.ui-button__control:disabled,
.ui-button__control[aria-disabled="true"],
:is(
    .woocommerce a.button,
    .woocommerce a.button.alt,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .wp-block-button__link,
    .uagb-button__link,
    .ast-button
  )[disabled],
:is(
    .woocommerce a.button,
    .woocommerce a.button.alt,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .wp-block-button__link,
    .uagb-button__link,
    .ast-button
  )[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.ui-button__control--compact {
  --button-padding-inline: var(--space-md);
  --button-padding-block-start: calc(var(--space-sm) + 0.0625rem);
  --button-padding-block-end: calc(var(--space-sm) - 0.125rem);
  min-height: 2.75rem; /* 44px tap target for dense layouts */
  font-size: var(--font-size-xs);
  letter-spacing: 0.07em;
}

/* =========================================================
   Section: Global UI - Button Reset
   Purpose: Override Astra base button padding with system tokens
   ========================================================= */

body .woocommerce a.button,
body .woocommerce a.button.alt,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .wp-block-button__link,
body .uagb-button__link,
body .ast-button {
  padding-inline: calc(var(--space-lg) + var(--space-sm));
  padding-block-start: calc(var(--space-sm) + 0.1875rem);
  padding-block-end: calc(var(--space-sm) - 0.0625rem);
  min-height: 3rem;
  line-height: 1.6;
  text-align: center;
  width: fit-content;
}

/* --- Product Grid Alignment Fix (Clean Approach) --- */
.woocommerce ul.products {
  align-items: stretch;
}

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Turn the summary into a flex container that fills the available space */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Ensure correct element order */
.woocommerce ul.products li.product .ast-woo-product-category {
  order: 1;
}
.woocommerce ul.products li.product .ast-loop-product__link {
  order: 2;
}
.woocommerce ul.products li.product .review-rating {
  order: 3;
}
.woocommerce ul.products li.product .price {
  order: 4;
}
.woocommerce ul.products li.product .button {
  order: 5;
}

/* Set minimum height on product titles to account for wrapping */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: flex;
  align-items: flex-start;
  line-height: 1.4; /* Why: Ensures consistent line spacing for titles that wrap. */
  min-height: 2.8em; /* THE FIX: (line-height * 2). Reserves space for exactly two lines of text. */
}

/* Push the button to the bottom */
.woocommerce.archive ul.products li.product .button {
  /*margin-top: auto;*/
}

/* =========================================================
   Section: Products - Grid CTA
   Purpose: Ensure loop buttons honor global padding & full-width layout
   ========================================================= */

.woocommerce ul.products li.product .button {
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: calc(var(--space-lg) + var(--space-sm));
  padding-block-start: calc(var(--space-sm) + 0.1875rem);
  padding-block-end: calc(var(--space-sm) - 0.0625rem);
  line-height: 1.6;
  text-align: center;
}

/* Mobile: Reduce padding and font size to prevent text wrapping */
@media (max-width: 768px) {
  .woocommerce ul.products li.product .button {
    padding-inline: var(--space-sm) !important;
    padding-block-start: calc(var(--space-sm) * 0.75) !important;
    padding-block-end: calc(var(--space-sm) * 0.5) !important;
    font-size: var(--font-size-xs) !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   Section: Products - Thumbnail Spacing
   Purpose: Visual separation between button above and product image
   ========================================================= */

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  /*margin-top: var(--space-xl);*/
}

/* =========================================================
   Section: Cart - Action Buttons
   Purpose: Ensure cart CTAs inherit global padding & alignment
   ========================================================= */

.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button,
.woocommerce-cart .woocommerce input.button,
.woocommerce-cart .woocommerce .button.add_to_cart_button,
.woocommerce table.cart td.actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-lg);
  min-height: 3rem;
  line-height: 1.15;
  text-align: center;
  width: fit-content;
  max-width: 100%;
}

/* =========================================================
   Section: Cart - Coupon Button
   Purpose: Compact styling to match input field height
   ========================================================= */

body.woocommerce-cart form.checkout_coupon .button,
body.woocommerce-cart .coupon .button {
  padding-inline: var(--space-md) !important;
  padding-block-start: calc(var(--space-sm) * 0.75) !important;
  padding-block-end: calc(var(--space-sm) * 0.5) !important;
  min-height: 2.5rem !important;
  line-height: 1.4 !important;
  font-size: var(--font-size-xs) !important;
  letter-spacing: 0.06em !important;
}

/* =========================================================
   Section: Cart - Checkout Button
   Purpose: Full-width styling to match payment buttons (Google Pay, etc.)
   ========================================================= */

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body.woocommerce-cart .cart-collaterals .checkout-button {
  width: 100% !important;
  display: block !important;
  max-width: 100% !important;
}

/* =========================================================
   Section: Cart - Table Header Alignment
   Purpose: Left-align headers to match body content
   ========================================================= */

body.woocommerce-cart table.woocommerce-cart-form__contents thead th,
body.woocommerce-cart table.shop_table_responsive thead th {
  text-align: left !important;
}

/* =========================================================
   Section: Cart - Heading Font Weights
   Purpose: Consistent medium weight for cart section headings
   ========================================================= */

body.woocommerce-cart .entry-content h2 {
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-base);
}

body.woocommerce-cart .cross-sells > h2 {
  font-weight: var(--font-weight-medium) !important;
}

/* =========================================================
   Section: Cart - Main Content Spacing
   Purpose: Add spacing between checkout wrap and cart content
   ========================================================= */

body.woocommerce-cart div.woocommerce {
  margin-top: var(--space-xl) !important;
}

/* =========================================================
   Section: Checkout - Heading Font Weight
   Purpose: Consistent medium weight for checkout headings
   ========================================================= */

body.woocommerce-checkout .entry-content h3 {
  font-weight: var(--font-weight-medium) !important;
}

/* =========================================================
   Section: Order Received - Heading Font Weight
   Purpose: Consistent medium weight for order confirmation headings
   ========================================================= */

.woocommerce-checkout.woocommerce-order-received
  .woocommerce-order
  .woocommerce-order-details
  .woocommerce-order-details__title,
.woocommerce-checkout.woocommerce-order-received
  .woocommerce-order
  .woocommerce-customer-details
  .woocommerce-column__title {
  font-weight: var(--font-weight-medium) !important;
  padding-top: var(--space-md) !important;
}

/* =========================================================
   Section: Cart - Cross-sell Buttons
   Purpose: Reset legacy Astra rule and align CTAs with global system
   ========================================================= */

body.woocommerce-cart
  .cross-sells
  ul.products
  .ast-article-single
  .astra-shop-summary-wrap {
  position: relative;
}

/* EXCEPTION: !important required to override Astra inline styles and theme-level specificity */
body.woocommerce-cart
  .woocommerce
  .cross-sells
  ul.products
  li.ast-article-single
  .astra-shop-summary-wrap
  > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart,
body.woocommerce-cart
  .woocommerce
  .cross-sells
  ul.products
  li.ast-article-single
  .astra-shop-summary-wrap
  .ast-quick-view-button {
  position: absolute !important;
  inset: auto !important;
  right: 0 !important;
  bottom: var(--space-sm) !important;
  width: 100% !important;
  max-width: 180px !important;
  margin-top: var(--space-md) !important;
  padding-inline: var(--space-sm) !important;
  padding-block-start: calc(var(--space-sm) * 0.75) !important;
  padding-block-end: calc(var(--space-sm) * 0.5) !important;
  min-height: 2.5rem !important;
  line-height: 1.4 !important;
  font-size: var(--font-size-xs) !important;
  letter-spacing: 0.06em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  transform: none !important;
}

/* Mobile: Remove absolute positioning, allow button to flow naturally */
@media (max-width: 768px) {
  body.woocommerce-cart
    .woocommerce
    .cross-sells
    ul.products
    li.ast-article-single
    .astra-shop-summary-wrap
    > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart,
  body.woocommerce-cart
    .woocommerce
    .cross-sells
    ul.products
    li.ast-article-single
    .astra-shop-summary-wrap
    .ast-quick-view-button {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: var(--space-sm) !important;
    max-width: 180px !important;
    width: auto !important;
  }
}

/* =========================================================
   Section: Login Screen
   Purpose: Override h2 font-weight
   ========================================================= */

.woocommerce-account .entry-content .woocommerce h2 {
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-md);
  margin-bottom: var(--space-lg);
  padding-inline: var(--space-md);
  padding-block: var(--space-md);
}

header.woocommerce-Address-title h2 {
  font-size: var(--font-size-base) !important;
}
.woocommerce-form-login__rememberme span {
  font-weight: var(--font-weight-medium) !important;
}

p.ast-woo-form-actions,
p.woocommerce-LostPassword {
  font-size: var(--font-size-sm);
}

address,
cite {
  font-style: normal;
  font-size: var(--font-size-sm);
}

.ast-woo-order-date {
  font-weight: 500;
  font-size: var(--font-size-base) !important;
  color: var(--color-accent-burgundy) !important;
}

div.ast-orders-table__cell.ast-orders-table__cell-order-status,
div.ast-orders-table__cell.ast-orders-table__cell-order-total {
  font-size: var(--font-size-sm) !important;
}

mark.order-status,
mark.order-date,
mark.order-number,
td.woocommerce-table__product-name.product-name a,
td.woocommerce-table__product-total.product-total span bdi {
  font-weight: var(--font-weight-medium) !important;
}

/* --- Single Product Page: Title, Price & Meta (v7 - Definitive Specificity) --- */
/* 
 * Why the new selector? 
 * By targeting `.summary.entry-summary`, we create a more specific selector than the 
 * default WooCommerce rule (which only targets `.summary`), guaranteeing our styles win
 * the cascade without !important and regardless of stylesheet load order.
*/
.woocommerce-js div.product .summary.entry-summary .single-product-category {
  display: block;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

.woocommerce-js div.product .summary.entry-summary .product_title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
}

.woocommerce-js div.product .summary.entry-summary p.price {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-light);
  margin-bottom: var(--space-lg);
}

.woocommerce-js div.product .summary.entry-summary p.price ins {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.woocommerce-js div.product .summary.entry-summary p.price del {
  opacity: 0.6;
}

.woocommerce-js div.product .summary.entry-summary .product_meta {
  margin-top: var(--space-lg);
}

/* --- Single Product Page: Product Tabs --- */
.woocommerce-js div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-family-body);
  font-weight: var(
    --font-weight-regular
  ); /* Why: Reduces weight from the theme default for a lighter, more refined feel. */
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  opacity: 0.75; /* Why: De-emphasizes non-active tabs for better focus on the active one. */
  transition:
    opacity 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

/* Style for the active tab to give it prominence */
.woocommerce-js div.product .woocommerce-tabs ul.tabs li.active a {
  font-weight: var(
    --font-weight-medium
  ); /* Why: Makes the active tab slightly bolder to stand out clearly. */
  opacity: 1;
}

/* Style for hover state on non-active tabs */
.woocommerce-js div.product .woocommerce-tabs ul.tabs li:not(.active) a:hover {
  opacity: 1;
  color: var(--color-accent-burgundy);
}

/* --- Single Product Page: Tab Content Typography --- */
.woocommerce-tabs .panel.entry-content {
  font-size: var(--font-size-base);
}

.woocommerce-tabs .panel.entry-content h2 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-light);
  letter-spacing: 0;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.woocommerce-tabs .panel.entry-content h2:first-of-type {
  margin-top: var(--space-sm);
}

.woocommerce-tabs .panel.entry-content .product-description__tagline {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  margin-top: calc(-1 * var(--space-sm));
  margin-bottom: var(--space-lg);
  text-align: left;
  opacity: 0.85;
}

.woocommerce-tabs .panel.entry-content p,
.woocommerce-tabs .panel.entry-content ul,
.woocommerce-tabs .panel.entry-content ol {
  margin-bottom: var(--space-lg);
}

.woocommerce-tabs .panel.entry-content ul,
.woocommerce-tabs .panel.entry-content ol {
  padding-left: var(--space-lg);
}

.woocommerce-tabs .panel.entry-content li {
  margin-bottom: 0; /* THE FIX: Resets the theme's 10px margin. */
  padding-bottom: 0; /* THE FIX: Removes our competing padding rule. */
}

.woocommerce-tabs .panel.entry-content strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* In public/wp-content/themes/astra-child/style.css */

/* --- Single Product Page: Tab Content Typography --- */
.woocommerce-tabs .panel.entry-content {
  font-size: var(--font-size-base);
}

/* 
 * READABILITY ENHANCEMENT: Constrain line length for optimal reading.
 * Why: Lines between 50-75 characters are ideal for readability and reduce
 * cognitive load. This also elevates the luxury feel of the typography.
*/
.woocommerce-tabs .panel.entry-content > * {
  max-width: 70ch; /* ~70 characters max per line */
  /* No margin-inline: auto needed here if the panel itself is not full-width and has padding */
}

.woocommerce-tabs .panel.entry-content h2 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */

/* --- 6.1 Main Menu Links --- */
.main-header-menu .menu-item > .menu-link {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-sm);
  color: var(--color-background-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s ease-in-out;
}
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .menu-item.current-menu-item > .menu-link,
.main-header-menu .menu-item.current-menu-ancestor > .menu-link {
  color: var(
    --color-accent-deep-ochre
  ); /* UPDATED: Changed from --color-accent-burgundy */
  background-color: transparent;
}

/* --- 6.2 Sub-Menu Container & Links --- */
.main-header-menu .sub-menu {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--color-background-light);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: var(--space-sm) 0;
  z-index: 999;
}
.main-header-menu .sub-menu .menu-item .menu-link {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: normal;
  padding: var(--space-sm) var(--space-lg);
  border: none;
  transition: all 0.2s ease-in-out;
}
.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link {
  color: var(--color-background-light);
  background-color: var(--color-accent-burgundy);
  opacity: 1;
}

/* --- 6.3 Cart & Mobile Menu Icons --- */
.ast-header-cart-wrap .ast-cart-icon,
.ast-site-header-cart-li .icon-bag {
  color: var(--color-background-light);
  transition:
    color 0.15s ease-in-out,
    opacity 0.15s ease-in-out;
  opacity: 0.9; /* Default at 90% opacity to match account link */
}

.ast-site-header-cart-li .icon-bag svg {
  fill: currentColor;
  transition: fill 0.15s ease-in-out;
  width: 20px; /* Normalize to 20px */
  height: 20px;
  transform: scale(0.95); /* Reduce bag for lighter visual weight */
}

.ast-header-cart-wrap:hover .ast-cart-icon,
.ast-site-header-cart-li .cart-container:hover .icon-bag,
.ast-site-header-cart-li .cart-container:focus .icon-bag,
.ast-site-header-cart-li .cart-container:focus-visible .icon-bag,
.ast-site-header-cart-li .cart-container:active .icon-bag {
  color: var(--color-accent-deep-ochre);
  opacity: 1; /* Full opacity on hover */
}

/* Remove cart border for clean luxury look */
.ast-site-header-cart.ast-menu-cart-outline .cart-container {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: opacity 0.2s ease-in-out;
}

.ast-menu-cart-outline .ast-cart-menu-wrap .count,
.ast-menu-cart-outline .ast-addon-cart-wrap {
  border: none !important;
  background: transparent !important;
}

.ast-site-header-cart.ast-menu-cart-outline .cart-container:hover,
.ast-site-header-cart.ast-menu-cart-outline .cart-container:focus,
.ast-site-header-cart.ast-menu-cart-outline .cart-container:focus-visible,
.ast-site-header-cart.ast-menu-cart-outline .cart-container:active {
  border: none !important;
  background: transparent !important;
  opacity: 0.85; /* Subtle hover effect */
}

.ast-site-header-cart .astra-icon:after {
  background-color: color-mix(
    in srgb,
    var(--color-accent-deep-ochre) 70%,
    var(--color-background-light)
  );
  border: 1px solid
    color-mix(
      in srgb,
      var(--color-accent-deep-ochre) 30%,
      var(--color-background-light)
    );
  color: var(--color-background-light);
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
  /* Refined badge sizing */
  position: absolute;
  top: 00px !important; /* Optimal vertical position */
  right: -6px !important; /* Optimal horizontal position */
  min-width: 14px !important; /* 14px circle */
  height: 14px !important;
  line-height: 14px !important;
  font-size: 10.5px !important; /* 10-11px range */
  padding: 0 3px !important;
  border-radius: 999px !important; /* Perfect circle */
  text-align: center;
}

/* Cart count badge hover fix - high specificity override */
.ast-site-header-cart .ast-addon-cart-wrap:hover i.astra-icon:after,
.ast-site-header-cart .ast-addon-cart-wrap:focus i.astra-icon:after,
.ast-site-header-cart:hover .ast-addon-cart-wrap i.astra-icon:after,
.ast-site-header-cart-li:hover .astra-icon:after,
.cart-container:hover .astra-icon:after {
  /*
  background-color: var(--color-background-light) !important;
  border-color: var(--color-accent-deep-ochre) !important;
  color: var(--color-accent-deep-ochre) !important;
  */
}

/* Universal backup - catch any cart icon hover */
div[class*="ast-site-header-cart"]:hover .astra-icon:after,
div[class*="ast-site-header-cart"]:focus .astra-icon:after,
div[class*="ast-site-header-cart"]:focus-visible .astra-icon:after {
  /*
  background-color: var(--color-background-light) !important;
  border-color: var(--color-accent-deep-ochre) !important;
  color: var(--color-accent-deep-ochre) !important;
  */
}

/* --- 6.4 Header Mini Cart CTA --- */
.ast-site-header-cart-data
  .woocommerce-mini-cart__buttons
  .ast-continue-shopping {
  display: block;
  width: 100%;
  line-height: 1.15;
  margin-top: var(--space-sm);
  text-align: center;
  white-space: normal; /* allow two-line labels without cramped leading */
}

/* --- 6.5 WooCommerce Shipping Method --- */

/* Make the cell left-aligned (you already have this) */
.woocommerce .cart-collaterals .woocommerce-shipping-totals .shipping td,
.woocommerce .woocommerce-checkout-review-order-table .shipping td {
  text-align: left;
  vertical-align: top;
}

/* Reset the UL in the shipping cell */
.woocommerce .woocommerce-shipping-totals .shipping td ul#shipping_method,
.woocommerce
  .woocommerce-checkout-review-order-table
  .shipping
  td
  ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Beat the legacy LI rule (it’s extremely specific) */
.woocommerce .woocommerce-shipping-totals .shipping td ul#shipping_method > li,
.woocommerce
  .woocommerce-checkout-review-order-table
  .shipping
  td
  ul#shipping_method
  > li {
  padding-left: 0; /* neutralize 22px left pad */
  text-indent: 0; /* neutralize -22px indent */
  margin: 0;
  padding-top: 0.25em;
  padding-bottom: 0.25em;

  /* Modern layout: radio | label */
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 0.5rem;
  align-items: start;
}

.woocommerce ul#shipping_method > li input[type="radio"] {
  grid-column: 1;
  margin-top: 0.2rem;
}
.woocommerce ul#shipping_method > li label {
  grid-column: 2;
  margin: 0;
  font-size: var(--font-size-sm);
}

/* kill the fake hanging-indent */
ul#shipping_method
  li:not(.elementor-widget-woocommerce-cart #shipping_method li) {
  padding-left: 0;
  text-indent: 0;
  line-height: 1.4;
  text-wrap: balance;
  padding-top: 0;
  font-size: var(--font-size-sm);
}

/* Cart/checkout shipping destination */
.woocommerce .woocommerce-shipping-destination {
  font-size: var(--font-size-sm); /* your token */
  line-height: 1.5;
  margin: 0.25rem 0 0.5rem;
}

/* Put the address on the next line */
.woocommerce .woocommerce-shipping-destination strong {
  display: block; /* moves address to its own line */
  margin-top: 0.125rem;
  font-weight: var(--font-weight-medium); /* keep emphasis, can adjust */
}

/* Cart / mini-checkout tables */
.woocommerce-cart table.shop_table thead th,
.woocommerce-checkout-review-order-table thead th {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium); /* medium, not bold */
  letter-spacing: 0.02em; /* tiny tracking for clarity */
  text-transform: none; /* avoid shouty all-caps */
  color: var(--color-neutral-700);
  white-space: nowrap;
}

.ast-modern-checkout
  .woocommerce
  form.woocommerce-checkout
  .woocommerce-billing-fields-custom
  .ast-checkout-form-heading
  .woocommerce-billing-fields__customer-login-label {
  font-weight: var(--font-weight-medium) !important;
}

.woocommerce-js form .form-row label {
  font-weight: var(--font-weight-medium);
}

h3#ship-to-different-address {
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-body);
}

.woocommerce-input-wrapper > strong {
  font-weight: var(--font-weight-medium);
}

.woocommerce .woocommerce-Addresses .woocommerce-Address-title {
  font-size: var(--font-size-sm);
}

.woocommerce-MyAccount-content p {
  max-width: 70ch;
}

/* Wrapper spacing */
.woocommerce .woocommerce-notices-wrapper {
  margin: var(--space-md) 0 var(--space-lg);
}

/* Card look for all notice types */
.woocommerce .woocommerce-notices-wrapper > *,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  background: #fff;
  border: 1px solid var(--color-neutral-200);
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Optional: brand-colored accent line */
.woocommerce .woocommerce-notices-wrapper > * {
  border-left: 4px solid var(--color-accent-burgundy);
}

/* Woo notices: give the icon room + keep it centered */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  position: relative;
  /* left padding = normal padding + icon width */
  padding: var(--space-md) var(--space-lg) var(--space-md)
    calc(var(--space-lg) + 28px);
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--color-neutral-200);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.06);
}

/* position Woo's built-in icon */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
}

/* Put these in your overrides.css (loads after theme/Woo) */

/* Empty/outline stars */
.woocommerce .star-rating::before,
.woocommerce .comment-form-rating .star-rating::before {
  color: var(--color-gray-subtle); /* subtle gray */
}

/* Filled portion */
.woocommerce .star-rating span::before,
.woocommerce .comment-form-rating .star-rating span::before {
  color: var(--color-accent-burgundy); /* your brand */
}

/* Review form interactive stars */
.woocommerce p.stars a {
  color: var(--color-neutral-300);
}
.woocommerce p.stars a:hover,
.woocommerce p.stars a:focus,
.woocommerce p.stars a.active {
  color: var(--color-accent-burgundy);
}

/* Product quantity styling */
.woocommerce td.product-name .product-quantity,
.woocommerce td.product-name strong.product-quantity {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-600);
}

/* Thumbnail image sizing */
.woocommerce td.product-name .ast-product-thumbnail img {
  width: 64px;
  height: auto;
  border-radius: 6px;
}

/* Make the × a hair lighter for a luxe feel */
.woocommerce td.product-name .product-quantity::first-letter {
  opacity: 0.8;
}

/* Adjust vertical alignment of sign-in/account link */
.ast-header-html-2,
.ast-site-header-cart-li {
  margin-top: -0.4rem;
}
/* Adjust horizontal spacing between sign-in/account link and cart */
.site-header-section > * {
  padding: 0 5px;
}

/* Adjust vertical alignment of have an account link? */
.ast-modern-checkout
  .woocommerce
  form.woocommerce-checkout
  .woocommerce-billing-fields-custom
  .ast-checkout-form-heading
  .woocommerce-billing-fields__customer-login-label {
  margin-top: -1.2em !important;
}

/* Cart page mobile fixes */
@media (max-width: 768px) {
  /* Fix overflow on credit card form on mobile */
  fieldset#wc-square-credit-card-credit-card-form {
    padding: 30px 10px;
  }
  /* Normalize padding and alignment on mobile checkout pages */
  #ast-checkout-wrap {
    padding: 4em 0 1.5em 0 !important;
    align-items: flex-start !important;
    justify-content: left !important;
  }
  /* Veritcal space between credit card graphics*/
  #payment > ul > li > label {
    line-height: 35px !important;
  }
  /* Adjust vertical alignment of have an account link? */
  .ast-modern-checkout
    .woocommerce
    form.woocommerce-checkout
    .woocommerce-billing-fields-custom
    .ast-checkout-form-heading
    .woocommerce-billing-fields__customer-login-label {
    margin-top: -1.6em !important;
  }
  /* Line height for terms and conditions */
  .woocommerce-js form .form-row label {
    line-height: 1.2 !important;
  }
}

/* Desktop: Column widths driven by THEAD (table-layout: fixed) */
@media (min-width: 1024px) {
  /* Cart table: 6 columns (remove, thumbnail, name, price, quantity, subtotal) */
  .woocommerce-cart table.shop_table thead th.product-remove {
    width: 6%; /* ~50px at typical widths */
  }
  .woocommerce-cart table.shop_table thead th.product-thumbnail {
    width: 10%; /* ~80px at typical widths */
  }
  .woocommerce-cart table.shop_table thead th.product-name {
    width: 35%; /* product name gets the flex space */
  }
  .woocommerce-cart table.shop_table thead th.product-price {
    width: 13%;
  }
  .woocommerce-cart table.shop_table thead th.product-quantity {
    width: 21%; /* wider to fit quantity controls */
  }
  .woocommerce-cart table.shop_table thead th.product-subtotal {
    width: 15%;
  }

  /* Prevent wrapping in numeric columns */
  .woocommerce-cart table.shop_table td.product-price,
  .woocommerce-cart table.shop_table td.product-quantity,
  .woocommerce-cart table.shop_table td.product-subtotal,
  .woocommerce-checkout-review-order-table td.product-total {
    white-space: nowrap;
  }
}

/* Optional niceties inside the Product cell */
.woocommerce td.product-name .ast-product-name {
  text-wrap: balance; /* prettier wrapping */
  line-height: 1.35;
}

/* === Layout inside the Product cell === */

/* CART (thumb is its own column) */
.woocommerce-cart table.shop_table td.product-name {
  display: block; /* use block, not grid, since thumb is separate */
  text-align: left;
}

/* Hide any thumbnail that appears inside cart product-name (it should be in separate column) */
.woocommerce-cart table.shop_table td.product-name .ast-product-thumbnail {
  display: none;
}

/* Shared table settings */
.woocommerce-cart table.shop_table,
.woocommerce-checkout-review-order-table {
  table-layout: fixed;
  width: 100%;
}

/* Cart: make the product-name cell a real table cell again */
@media (min-width: 769px) {
  .woocommerce-cart table.shop_table td.product-name {
    display: table-cell; /* undo the block rule */
    vertical-align: middle; /* center within the row height */
  }
}

/* =========================================================
   Section: Cart Page - Vertical Alignment
   Purpose: Vertically center the content of ALL cells in each
            product row for consistent alignment.
   ========================================================= */

.woocommerce-cart table.shop_table tr.cart_item td {
  vertical-align: middle;
}

.woocommerce-cart table.shop_table td.product-name {
  vertical-align: middle;
}

body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  label:not(.checkbox):not(.radio):not(.woocommerce-form__label-for-checkbox) {
  opacity: 1 !important;
  margin-top: 0.2rem !important;
  margin-left: 0.5rem;
  padding: 0 !important;
}
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  .select2-container--default
  .select2-selection--single,
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  input[type="email"],
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  input[type="number"],
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  input[type="password"],
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  input[type="reset"],
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  input[type="search"],
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  input[type="tel"],
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  input[type="text"],
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  input[type="url"],
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  select,
body:not(.cartflows-canvas):not(.cartflows-default):not(
    .cartflows-instant-checkout
  )
  .woocommerce
  form
  .form-row
  textarea {
  padding: 1.75rem 1rem !important;
}

/* =========================================================
   Section: Checkout Review Order Table - Precise Product Alignment (Grid)
   Purpose: Create a stable, single-line, three-column layout for the
            product image, name, and quantity, ensuring vertical alignment
            and preventing unwanted wrapping.
   ========================================================= */

/* 1. Define a three-column grid on the table cell.
      - Column 1: For the image (sized to its content).
      - Column 2: For the name (takes all remaining flexible space).
      - Column 3: For the quantity (sized to its content). */
body.woocommerce-checkout
  .woocommerce-checkout-review-order-table
  td.product-name {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center; /* This keeps everything vertically centered */
  gap: var(--space-sm); /* This creates a nice space between columns */
  width: 100%;
}

/* 2. This is the key: it makes the wrapper div 'invisible' to the layout.
      This promotes the thumbnail and product name to be direct children of our grid,
      allowing us to place them in the columns defined above. */
body.woocommerce-checkout
  .woocommerce-checkout-review-order-table
  td.product-name
  .ast-product-image {
  display: contents;
}

/* 3. Ensure the product name stays in its column and can wrap if needed on very long titles. */
body.woocommerce-checkout
  .woocommerce-checkout-review-order-table
  td.product-name
  .ast-product-name {
  text-align: left;
  min-width: 0; /* A critical fix for preventing overflow with long text in a grid */
}

/* 4. Ensure the quantity ('x 1') never wraps onto a new line. */
body.woocommerce-checkout
  .woocommerce-checkout-review-order-table
  td.product-name
  .product-quantity {
  white-space: nowrap;
}

.ast-modern-checkout
  .woocommerce
  #ast-order-review-content
  .woocommerce-checkout-review-order-table
  tbody
  tr
  td.product-name
  .ast-product-image,
.ast-modern-checkout
  .woocommerce
  #order_review
  .woocommerce-checkout-review-order-table
  tbody
  tr
  td.product-name
  .ast-product-image {
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* ==========================================================================
   9. UTILITY & PLUGIN OVERRIDES 
   ========================================================================== */

.has-open-menu .gpay-card-info-animation-container {
  pointer-events: none !important;
}

.custom-menu-is-open {
  overflow: hidden;
}

/* --- 10.2 Mobile Menu Utilities --- */
.custom-mobile-nav__utilities {
  display: flex;
  align-items: center;
  gap: var(
    --space-sm
  ); /* Reduced from --space-md for tighter visual grouping */
  margin-left: auto;
}

.custom-mobile-nav__utility-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-background-light);
  transition: color 0.2s ease-in-out;
}

.custom-mobile-nav__utility-link:hover {
  color: var(--color-accent-deep-ochre);
}

/* WCAG 2.1 AA Focus State - visible outline for keyboard navigation */
.custom-mobile-nav__utility-link:focus-visible {
  outline: 2px solid var(--color-accent-deep-ochre);
  outline-offset: 2px;
  color: var(--color-accent-deep-ochre);
}

.custom-mobile-nav__utility-link svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.custom-mobile-nav__cart-count {
  position: absolute;
  top: 4px; /* Position higher */
  right: 4px; /* Position more to the right */
  min-width: 16px; /* Smaller minimum width */
  height: 16px; /* Smaller height */
  background-color: var(--color-accent-burgundy);
  border: 1px solid
    color-mix(
      in srgb,
      var(--color-accent-deep-ochre) 30%,
      var(--color-background-light)
    );
  color: var(--color-background-light);
  border-radius: 8px; /* Smaller border radius */
  font-size: 9px; /* Smaller font */
  font-weight: var(--font-weight-medium);
  line-height: 16px; /* Match height */
  text-align: center;
  padding: 0 3px; /* Smaller padding */
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle drop shadow only */
}

/* Hover state removed to match desktop behavior */
/*
.custom-mobile-nav__utility-link:hover .custom-mobile-nav__cart-count,
.custom-mobile-nav__utility-link:focus .custom-mobile-nav__cart-count {
  background-color: var(--color-background-light);
  color: color-mix(
    in srgb,
    var(--color-accent-deep-ochre) 85%,
    var(--color-background-light)
  );
  border: 1px solid
    color-mix(
      in srgb,
      var(--color-accent-deep-ochre) 85%,
      var(--color-background-light)
    );
}
*/

/* ==========================================================================
   11. TRUE DECOUPLED MOBILE MENU SYSTEM (v2.7 - Final Polish)
   ========================================================================== */

/* --- 10.1 Trigger & Scaffolding --- */
.custom-mobile-nav-trigger,
.custom-mobile-nav {
  display: none;
}

@media (max-width: 921px) {
  .custom-mobile-nav-trigger,
  .custom-mobile-nav {
    display: block;
  }
}

.custom-mobile-nav-trigger {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  line-height: 1;
  color: var(--color-background-light);
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

body.admin-bar .custom-mobile-nav-trigger {
  top: 52px;
}

.custom-mobile-nav-trigger:hover,
.custom-mobile-nav-trigger:focus {
  color: var(--color-accent-deep-ochre);
  background-color: transparent;
}

.custom-mobile-nav-trigger svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* --- 10.2 Main Container & Overlay --- */
.custom-mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  visibility: hidden;
  pointer-events: none;
}

.custom-mobile-nav.is-active {
  pointer-events: auto;
}

.custom-mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(47, 44, 42, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.custom-mobile-nav.is-active .custom-mobile-nav__overlay {
  opacity: 1;
}

/* --- 10.3 The Panel (Core Visuals & Animation) --- */
.custom-mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(90vw, 340px);
  height: 100%;
  background-color: var(--color-text-primary);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
}

.custom-mobile-nav.is-active .custom-mobile-nav__panel {
  transform: translateX(0);
}

.custom-mobile-nav__header {
  flex-shrink: 0;
  padding: var(--space-md);
  display: flex;
  justify-content: flex-end;
  border-bottom: var(--border-width) solid rgba(245, 242, 238, 0.1);
}

.custom-mobile-nav__close-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--color-background-light);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.custom-mobile-nav__close-btn:hover {
  color: var(--color-accent-deep-ochre);
  transform: scale(1.1);
}

.custom-mobile-nav__close-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* --- 10.4 Menu Body & List Styling --- */
.custom-mobile-nav__body {
  flex-grow: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* FIX 1: Removed top/bottom padding to ensure consistent item height. */
  padding: 0;
}

.custom-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-mobile-nav__item {
  position: relative;
  border-bottom: var(--border-width) solid rgba(245, 242, 238, 0.1);
}

.custom-mobile-nav__list > .custom-mobile-nav__item:first-child {
  border-top: var(--border-width) solid rgba(245, 242, 238, 0.1);
}

/* --- 10.5 Links & Toggle Buttons (Core UX) --- */
.custom-mobile-nav__item--has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.custom-mobile-nav__link {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  letter-spacing: 0.05em;
  color: var(--color-background-light);
  padding: var(--space-md) var(--space-lg);
  display: block;
  width: 100%;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.custom-mobile-nav__item--has-children > .custom-mobile-nav__link {
  flex-grow: 1;
  width: auto;
}

.custom-mobile-nav__link:focus-visible,
.custom-mobile-nav__close-btn:focus-visible,
.custom-mobile-nav__toggle:focus-visible {
  outline: 2px solid var(--color-accent-deep-ochre);
  outline-offset: -2px;
}

.custom-mobile-nav__link:hover,
.custom-mobile-nav__link:focus,
.custom-mobile-nav__item.is-active > .custom-mobile-nav__link {
  color: var(--color-accent-deep-ochre);
  background-color: rgba(245, 242, 238, 0.05);
  text-decoration: none;
}

.custom-mobile-nav__item.is-active > .custom-mobile-nav__link {
  font-weight: var(--font-weight-regular);
}

.custom-mobile-nav__toggle {
  position: relative;
  flex-shrink: 0;
  height: 58px;
  width: 60px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-background-light);
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.custom-mobile-nav__toggle:hover,
.custom-mobile-nav__toggle:focus {
  background-color: transparent;
}

.custom-mobile-nav__toggle::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-accent-deep-ochre);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 0;
}

.custom-mobile-nav__toggle:hover::before,
.custom-mobile-nav__toggle:focus::before {
  opacity: 1;
}

.custom-mobile-nav__toggle::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  transition:
    transform 0.3s ease,
    color 0.2s ease;
}

.custom-mobile-nav__toggle:hover::after,
.custom-mobile-nav__toggle:focus::after {
  color: var(--color-text-primary);
}

/* UX CHOICE: Arrow rotation is now ONLY controlled by the `.is-open` class. */
.custom-mobile-nav__item.is-open > .custom-mobile-nav__toggle::after {
  transform: rotate(90deg);
}

/* --- 10.6 Sub-menu (Accordion Animation) --- */
.custom-mobile-nav__item .sub-menu {
  list-style: none;
  padding: 0 0 0 var(--space-lg);
  margin: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    padding 0.4s ease;
}

/* UX CHOICE: Sub-menu expansion is now ONLY controlled by the `.is-open` class. */
.custom-mobile-nav__item.is-open > .sub-menu {
  max-height: 1000px;
  opacity: 1;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-md);
}

.custom-mobile-nav__item .sub-menu .custom-mobile-nav__link {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: normal;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  color: rgba(245, 242, 238, 0.85);
}

.custom-mobile-nav__item .sub-menu .custom-mobile-nav__link:hover,
.custom-mobile-nav__item .sub-menu .custom-mobile-nav__link:focus,
.custom-mobile-nav__item .sub-menu .is-active > .custom-mobile-nav__link {
  color: var(--color-accent-deep-ochre);
}

/* ==========================================================================
   11. PERFORMANCE & CLS FIXES
   ========================================================================== */

/* --- Single Product Gallery: Main Image --- */
.woocommerce div.product .woocommerce-product-gallery > .flex-viewport {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  background-color: var(--color-background-subtle);
}

.woocommerce
  div.product
  .woocommerce-product-gallery
  .woocommerce-product-gallery__image
  img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* --- Single Product Gallery: Thumbnails --- */
.woocommerce
  div.product
  .ast-single-product-thumbnails
  .woocommerce-product-gallery-thumbnails__wrapper {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.woocommerce
  div.product
  .ast-single-product-thumbnails
  .ast-woocommerce-product-gallery__image {
  flex: 0 0 auto;
  width: calc((100% - (3 * var(--space-sm))) / 4);
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 !important;
  border: 2px solid transparent;
  transition: border-color 0.2s ease-in-out;
}
@media (max-width: 768px) {
  .woocommerce
    div.product
    .ast-single-product-thumbnails
    .ast-woocommerce-product-gallery__image {
    width: calc((100% - (2 * var(--space-sm))) / 3);
  }
}
.woocommerce
  div.product
  .ast-single-product-thumbnails
  .ast-woocommerce-product-gallery__image.flex-active-slide {
  border-color: var(--color-accent-burgundy);
}

/* --- JS-Injected Element Fix (Digital Wallet) --- */
.summary.entry-summary #wc-square-digital-wallet {
  min-height: 48px; /* Standard height of these buttons is ~48px */
  display: flex;
  align-items: center;
}

/* --- Single Product Gallery: Thumbnail Container CLS Fix --- */
/* 
 * Why: On desktop, when more than 4 thumbnails exist, the gallery's JavaScript
 * injects navigation arrows, causing the container height to change and shifting
 * content down. This rule reserves a minimum height for the container before
 * the script runs, eliminating the layout shift.
*/
.woocommerce-js div.product .ast-single-product-thumbnails {
  /* The calculation is: the minimum height of a thumbnail + a spacing unit for the arrows. */
  min-height: calc(
    var(--thumb-min-h) + var(--space-md)
  ); /* Approx. 81px + 16px = 97px */
  max-height: calc(var(--thumb-max-h) + var(--space-md));
}

/* --- 12.1 Sorting Dropdown (Faux-Custom Styling) - v1.1 --- */

/* 
 * THE FIX (Overflow): The toolbar needs a stacking context and a higher z-index
 * to ensure its dropdown menu appears above the product grid below it.
*/
.ast-shop-toolbar-wrap {
  position: relative; /* Creates a stacking context */
  z-index: 5; /* Lifts it above adjacent elements */
}

/* Base wrapper for positioning our custom arrow */
.woocommerce .woocommerce-ordering {
  position: relative;
}

/* 
 * The Core Select Element Styling
 * Why: We remove the default browser appearance to apply our own brand styles.
 * THE FIX (v1.1): Using a more specific selector to guarantee our rule overrides theme defaults.
*/
body.woocommerce .woocommerce-ordering .orderby {
  /* --- Typography & Color --- */
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background-color: var(--color-background-light);
  background-image: none; /* Belt-and-suspenders fix for some browsers */

  /* --- Box Model & Sizing --- */
  padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-md);
  height: auto;
  min-height: 48px; /* Ensures consistent height */
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: none;
  transition: border-color 0.2s ease-in-out;

  /* --- Appearance Reset --- */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* THE FIX (v1.1): Explicitly hide the dropdown arrow on Edge/IE. */
body.woocommerce .woocommerce-ordering .orderby::-ms-expand {
  display: none;
}

/* Interaction States */
body.woocommerce .woocommerce-ordering .orderby:hover,
body.woocommerce .woocommerce-ordering .orderby:focus {
  border-color: var(--color-accent-burgundy);
  outline: none;
}

/* 
 * The Custom Arrow
 * Why: We add our own arrow using a pseudo-element because we removed the
 * native one with `appearance: none`. An inline SVG is the most performant
 * and scalable method.
*/
.woocommerce .woocommerce-ordering::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-md);
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  background-color: var(--color-text-primary);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none; /* Allows clicks to pass through to the select element */
  transition: transform 0.2s ease-in-out;
}

/* Mini Cart Width Override */
.ast-site-header-cart .widget_shopping_cart,
.woocommerce .ast-site-header-cart .widget_shopping_cart {
  min-width: 450px;
}

/* Optional: Rotate arrow on focus/open (visual cue, browser support varies) */
body.woocommerce .woocommerce-ordering .orderby:focus + ::after {
  transform: translateY(-50%) rotate(180deg);
}

/* =========================================================
   Section: Hero - Vitality
   Purpose: Full-bleed video hero with animated headline/subheadline
   ========================================================= */

.hero-vitality {
  position: relative;
  isolation: isolate;
  max-height: 80vh;
  padding-block: clamp(var(--space-xl), 8vh, var(--space-xxl));
  color: var(--color-text-on-dark, #fff);
  overflow: hidden;
}

.hero-vitality__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

.hero-vitality__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: 2550px;
  margin-inline: auto;
  display: block;
}

.hero-vitality__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      115deg,
      color-mix(in srgb, var(--color-accent-burgundy) 32%, rgba(0, 0, 0, 0.36))
        0%,
      color-mix(in srgb, var(--color-accent-burgundy) 26%, rgba(0, 0, 0, 0.28))
        32%,
      color-mix(in srgb, var(--color-accent-deep-ochre) 24%, rgba(0, 0, 0, 0.2))
        65%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      var(--neutral-overlay-strong, rgba(0, 0, 0, 0.48)) 0%,
      transparent 55%
    );
}

@media (min-width: 992px) {
  .hero-vitality__media {
    padding-inline: max((100% - var(--container-width)) / 2, 0px);
  }

  .hero-vitality__video {
    width: min(100%, var(--container-width));
    max-width: var(--container-width);
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .hero-vitality__video {
    object-position: 70% center;
  }
}

.hero-vitality__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: clamp(var(--space-lg), 6vw, var(--space-xxl));
}

.hero-vitality__content {
  display: flex;
  flex-direction: column;
  /* REMOVED: gap to avoid margin+doubling – spacing controlled only by children margins */
}

.hero-vitality .js-animate {
  opacity: 0;
  transform: translateX(40px);
  transition:
    transform 1200ms cubic-bezier(0.33, 1, 0.68, 1),
    opacity 1200ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: var(--hero-vitality-delay, 0ms);
  will-change: transform, opacity;
}

.hero-vitality .js-animate.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.hero-vitality__headline {
  --hero-vitality-delay: 180ms;
  text-wrap: balance;
  max-width: 22ch;
  margin-block-end: var(--type-gap-headline-subheadline);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark, #fff);
}

.hero-vitality__subheadline {
  --hero-vitality-delay: 360ms;
  text-wrap: balance;
  max-width: 60ch;
  font-weight: var(--font-weight-light);
  margin-block-end: var(--type-gap-subheadline-body);
  font-size: var(--font-size-hero-subheadline);
  line-height: var(--line-height-snug);
  color: color-mix(in srgb, var(--color-text-on-dark, #fff) 92%, transparent);
}
@media (max-width: 768px) {
  .hero-vitality__subheadline {
    font-size: var(--font-size-lg);
  }
}

.hero-vitality__body {
  --hero-vitality-delay: 540ms;
  max-width: 70ch;
  margin-block-end: var(--type-gap-body-cta);
  font-size: var(--font-size-hero-body);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: color-mix(in srgb, var(--color-text-on-dark, #fff) 90%, transparent);
}

.hero-vitality__cta {
  --hero-vitality-delay: 780ms;
  min-height: 44px;
  margin-block-start: 0;
  padding-block-end: var(--space-xxl);
}

.hero-vitality__cta-btn,
.hero-vitality__cta-btn:visited,
.hero-hydration__cta-btn,
.hero-hydration__cta-btn:visited,
.hero-shine__cta-btn,
.hero-shine__cta-btn:visited {
  color: var(--color-background-light);
  text-decoration: none !important;
}

.hero-vitality__cta-btn:hover,
.hero-vitality__cta-btn:focus-visible,
.hero-vitality__cta-btn:active,
.hero-hydration__cta-btn:hover,
.hero-hydration__cta-btn:focus-visible,
.hero-hydration__cta-btn:active,
.hero-shine__cta-btn:hover,
.hero-shine__cta-btn:focus-visible,
.hero-shine__cta-btn:active {
  color: var(--color-background-light);
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

.hero-vitality__scroll {
  position: absolute;
  inset-inline: 0;
  bottom: var(--space-xl);
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  color: currentColor;
  margin-inline: auto;
  opacity: 0;
  transform: translateY(-20px);
  animation: hero-vitality-scroll 1200ms cubic-bezier(0.33, 1, 0.68, 1) 960ms
    forwards;
}

@media (hover: hover) {
  .hero-vitality__scroll:hover {
    opacity: 0.9;
  }
}

/* Modifier for contrast safety */
.hero-vitality--boost-overlay .hero-vitality__overlay {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.64) 0%, transparent 55%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-vitality .js-animate,
  .hero-vitality .is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-vitality__scroll {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-vitality-scroll {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  60% {
    opacity: 1;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   Section: Homepage - Hero Hydration
   Purpose: Left-bleed lifestyle hero for Women's Hydration Set
   ========================================================= */

/* Local token definitions to match UX plan specification */
.hero-hydration {
  --hero-hydration-delay: 0ms;
  --space-l: var(--space-lg); /* QA Fix #4: Map plan token to system token */
  --color-text-secondary: var(
    --color-neutral-600
  ); /* QA Fix #2: Define secondary text color */
}

.hero-hydration {
  position: relative;
  isolation: isolate;
  min-height: 70vh;
  background-color: var(--color-background-subtle);
  padding-block: clamp(var(--space-xl), 8vh, var(--space-xxl2));
  margin-block: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.hero-hydration--left-bleed {
  /* Modifier for explicit left-bleed behavior */
}

.hero-hydration__media {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: clamp(480px, 52vw, 750px);
  overflow: hidden;
  z-index: 0;
  transform: translateX(-5%);
}

.hero-hydration__image {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 60% center;
}

.hero-hydration__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: clamp(var(--space-xl), 6vw, var(--space-xxl));
  display: grid;
  grid-template-columns: clamp(420px, 48vw, 680px) 1fr;
  gap: clamp(var(--space-md), 4vw, var(--space-xl));
  align-items: center;
  min-height: inherit;
}

.hero-hydration__content {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  padding-inline: clamp(var(--space-md), 3vw, var(--space-xl));
  max-width: 68ch;
}

/* Child elements with explicit bottom margins per UX cadence */
.hero-hydration__kicker {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(
    --color-text-secondary
  ); /* QA Fix #2: Use secondary color for contrast */
  padding-bottom: var(--space-md);
  padding-left: calc(var(--space-xs) / 2);
}

.hero-hydration__kicker img {
  width: 150px;
}

.hero-hydration__kicker-mark {
  display: inline-flex;
  inline-size: 1em;
  block-size: 1em;
  margin-inline-start: var(--space-xs);
  vertical-align: baseline;
}

.hero-hydration__kicker-mark svg {
  width: 100%;
  height: 100%;
  /* QA Fix #5: Color inherits from parent .hero-hydration__kicker */
}

.hero-hydration__headline {
  --hero-hydration-delay: 0ms;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(
    --font-weight-light
  ); /* QA Fix #3: Uses globally defined token */
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--color-text-primary);
  max-width: 22ch;
  margin: 0 0 var(--type-gap-headline-subheadline) 0; /* Headline → Subheadline */
}

.hero-hydration__subheadline {
  --hero-hydration-delay: 100ms;
  font-family: var(--font-family-body);
  font-size: var(--font-size-hero-subheadline);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-snug);
  text-wrap: balance;
  color: var(--color-text-primary);
  max-width: 60ch;
  margin: 0 0 var(--type-gap-subheadline-body) 0; /* Subheadline → Body */
}

.hero-hydration__body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-hero-body);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  max-width: 70ch;
  margin: 0 0 var(--type-gap-body-cta) 0; /* Body → CTA */
}

.hero-hydration__cta {
  min-height: 44px;
  margin-block-start: 0;
}

/* Animation System - Reused from Hero Vitality pattern */
.hero-hydration .js-animate {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 1200ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 1200ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: var(--hero-hydration-delay, 0ms);
  will-change: transform, opacity;
}

.hero-hydration .js-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .hero-hydration .js-animate,
  .hero-hydration .js-animate.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile Stack - ≤992px */
/* QA Fix #6: Use literal breakpoint value (CSS custom properties unsupported in media queries) */
@media (max-width: 992px) {
  .hero-hydration {
    min-height: auto;
    padding-block-start: 0;
    padding-block-end: var(--space-xl);
    display: block;
  }

  .hero-hydration__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: auto;
    aspect-ratio: 4 / 5;
    transform: none;
  }

  .hero-hydration__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .hero-hydration__container {
    display: block;
    padding-inline: clamp(var(--space-lg), 6vw, var(--space-xxl));
    padding-block-start: var(--space-xl);
    padding-block-end: 0;
  }

  .hero-hydration__content {
    grid-column: auto;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  .hero-hydration__headline {
    font-size: var(--font-size-xl);
  }

  .hero-hydration__subheadline {
    font-size: var(--font-size-lg);
  }

  .hero-hydration__body {
    font-size: var(--font-size-base);
  }

  .hero-hydration__cta {
    margin-block-start: var(--space-md);
  }
}

/* Tablet adjustments - 993px to 1280px */
@media (min-width: 993px) and (max-width: 1280px) {
  .hero-hydration__container {
    grid-template-columns: clamp(400px, 46vw, 580px) 1fr;
    gap: clamp(var(--space-md), 3vw, var(--space-lg));
  }

  .hero-hydration__media {
    width: clamp(460px, 50vw, 680px);
    transform: translateX(-8%);
  }

  .hero-hydration__content {
    padding-inline: var(--space-md) var(--space-lg);
  }
}

/* =========================================================
   Section: Home - Hero 3 Shine
   Purpose: Right-bleed editorial layout with Vogue underlay
   ========================================================= */

.hero-shine {
  position: relative;
  isolation: isolate;
  max-height: none;
  background: linear-gradient(
    135deg,
    color-mix(
        in srgb,
        var(--color-accent-burgundy) 20%,
        var(--color-background-subtle)
      )
      0%,
    color-mix(
        in srgb,
        var(--color-accent-deep-ochre) 24%,
        var(--color-background-light)
      )
      52%,
    var(--color-background-subtle) 100%
  );
  padding-block-start: clamp(var(--space-xxl), 12vh, var(--space-xxl2));
  padding-block-end: 0;
  padding-inline: clamp(var(--space-xl), 7vw, var(--space-xxl));

  overflow: hidden;
}

.hero-shine__media {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  margin-block: auto;
  width: min(75vw, 800px); /* widen ~20% so the portrait feels more immersive */
  aspect-ratio: 11 / 8;
  overflow: hidden;
  z-index: 0;
}

.hero-shine__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero-shine__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr clamp(420px, 48vw, 680px);
  gap: clamp(var(--space-md), 4vw, var(--space-xl));
  align-items: center;
}

.hero-shine__underlay {
  position: absolute;
  inset-block: var(--space-l) var(--space-l);
  inset-inline: var(--space-l) auto;
  inline-size: min(60%, calc(100% - var(--space-l)));
  block-size: calc(100% - var(--space-xl) * 2);
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-accent-burgundy) 20%, transparent) 0%,
    color-mix(in oklab, var(--color-accent-deep-ochre) 20%, transparent) 60%,
    transparent 60%
  );
  border-radius: var(--radius-lg, 12px);
  pointer-events: none;
}

.hero-shine__content {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  padding-inline: clamp(var(--space-md), 3vw, var(--space-xl));
  padding-block-end: var(--space-xxl2);
  max-width: 68ch;
  justify-self: start;
}

.hero-shine__headline {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  max-width: 22ch;
  margin-block-end: var(--type-gap-headline-subheadline);
  color: var(--color-text-primary);
}

.hero-shine__subheadline {
  font-family: var(--font-family-body);
  font-size: var(--font-size-hero-subheadline);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-snug);
  text-wrap: balance;
  max-width: 60ch;
  margin-block-end: var(--type-gap-subheadline-body);
  color: var(--color-text-primary);
}

.hero-shine__body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-hero-body);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  max-width: 70ch; /* Match Hero Hydration copy width */
  margin-block-end: var(--type-gap-body-cta);
  color: var(--color-text-primary);
}

.hero-shine__cta {
  min-height: 44px;
  margin-block-start: 0;
}

.hero-shine__cta-btn {
  /* Semantic hook only */
}

/* Animation System */
.hero-shine .js-animate {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 1200ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 1200ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: var(--hero-shine-delay, 0ms);
  will-change: transform, opacity;
}

.hero-shine .js-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.hero-shine__headline {
  --hero-shine-delay: 0ms;
}

.hero-shine__subheadline {
  --hero-shine-delay: 160ms;
}

.hero-shine__body {
  --hero-shine-delay: 320ms;
}

.hero-shine__cta {
  --hero-shine-delay: 480ms;
}

/* Mobile Stack - ≤992px */
@media (max-width: 992px) {
  .hero-shine {
    max-height: none;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline: clamp(var(--space-lg), 6vw, var(--space-xl));
  }

  .hero-shine__media {
    position: relative;
    inset: auto;
    width: 200%;
    height: auto;
    margin-inline: 0;
    transform: none;
    aspect-ratio: 11 / 8;
    transform: translate(-35%, 10px);
  }

  .hero-shine__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 35% center;
    transform: none;
  }

  .hero-shine__underlay {
    display: none;
  }

  .hero-shine__container {
    /*padding-inline: clamp(var(--space-lg), 6vw, var(--space-xl));*/
    padding-block-start: var(--space-xl);
  }

  .hero-shine__content {
    margin-inline-end: 0;
    width: 100%;
  }

  .hero-shine__headline {
    font-size: var(--font-size-xl);
  }

  .hero-shine__subheadline {
    font-size: var(--font-size-lg);
  }

  .hero-shine__body {
    font-size: var(--font-size-base);
  }

  .hero-shine__container {
    display: block;
  }
}

/* Tablet adjustments - 993px to 1280px */
@media (min-width: 993px) and (max-width: 1280px) {
  .hero-shine__container {
    grid-template-columns: 1fr clamp(400px, 46vw, 580px);
    gap: clamp(var(--space-md), 3vw, var(--space-lg));
  }

  .hero-shine__content {
    padding-inline: var(--space-md) var(--space-lg);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .hero-shine .js-animate,
  .hero-shine .js-animate.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Component: Trust Bar (global, above footer)
   Purpose: Brand credibility line; calm, typographic.
   ========================================================= */
.trustbar {
  background: var(--color-accent-burgundy);
  color: var(--color-background-subtle); /* CORRECTED */
  padding-block: var(--space-md); /* CORRECTED */
}

.trustbar--inverse {
  background: var(--color-neutral-700); /* CORRECTED */
  color: var(--color-text-on-dark); /* CORRECTED */
}

.trustbar__container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.trustbar__line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md); /* CORRECTED: use defined spacing token */
  text-align: center;
  line-height: var(--line-height-default);
  margin: 0;
}

.trustbar__item {
  font-size: var(--font-size-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.trustbar__sep {
  opacity: 0.8;
}

/* Reset Astra footer builder chrome so the trust bar controls spacing */
.site-above-footer-wrap[data-section="section-above-footer-builder"] {
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
}

.site-above-footer-wrap[data-section="section-above-footer-builder"]
  .site-above-footer,
.site-above-footer-wrap[data-section="section-above-footer-builder"]
  .ast-builder-grid-row,
.site-above-footer-wrap[data-section="section-above-footer-builder"]
  .ast-builder-grid-row-container,
.site-above-footer-wrap[data-section="section-above-footer-builder"]
  .site-container {
  padding: 0 !important;
  min-height: 0;
}

/* Mobile stacking */
@media (max-width: 640px) {
  .trustbar {
    padding-block: var(--space-lg);
  }

  .trustbar__line {
    flex-direction: column;
    gap: calc(var(--space-xs) / 2); /* tighten vertical rhythm */
    line-height: 0.5;
  }

  .trustbar__sep {
    display: none;
  }

  .trustbar__item {
    white-space: normal;
    letter-spacing: 0.12em; /* reduce stretch so stacked lines feel closer */
  }
}

/* Utility: accessible visually hidden helper */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   Page: About - Cinematic Hero
   Purpose: Dark, immersive hero matching the homepage, with a
            left-aligned portrait and right-aligned quote.
   ========================================================= */

.about-hero-cinematic {
  position: relative;
  isolation: isolate;
  background-color: #000;
  color: var(--color-text-on-dark, #fff);
  overflow: hidden;
  padding-block: 0;
}

/* Replicates the exact gradient overlay from the homepage hero */
.about-hero-cinematic__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      115deg,
      color-mix(in srgb, var(--color-accent-burgundy) 32%, rgba(0, 0, 0, 0.36))
        0%,
      color-mix(in srgb, var(--color-accent-burgundy) 26%, rgba(0, 0, 0, 0.28))
        32%,
      color-mix(in srgb, var(--color-accent-deep-ochre) 24%, rgba(0, 0, 0, 0.2))
        65%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      var(--neutral-overlay-strong, rgba(0, 0, 0, 0.48)) 0%,
      transparent 55%
    );
}

.about-hero-cinematic__container {
  position: relative;
  z-index: 2;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: clamp(var(--space-lg), 6vw, var(--space-xxl));
  display: grid;
  align-items: center;
  gap: clamp(var(--space-lg), 4vw, var(--space-xl));
  grid-template-columns: 1fr; /* Mobile-first: single column */
}

/* Desktop: Flipped 2-column layout */
@media (min-width: 992px) {
  .about-hero-cinematic__container {
    grid-template-columns: 2fr 3fr; /* Image left (smaller), Text right (larger) */
    min-height: 800px;
  }
}

.about-hero-cinematic__image-wrapper {
  aspect-ratio: 4 / 5;
  background-image: url("/wp-content/uploads/2025/11/mauro-1600.webp"); /* UPDATE PATH IF NEEDED */
  background-size: cover;
  background-position: center;
  min-height: 800px; /* Fallback height */
  align-self: end;
  animation: about-hero-cinematic-image-fade 1400ms ease-out both;
  will-change: opacity, transform;
}

.about-hero-cinematic__content {
  display: flex;
  flex-direction: column;
  gap: var(--type-gap-headline-subheadline);
}

/* Typography mapping to match homepage hero */
.about-hero-cinematic__headline {
  text-wrap: balance;
  max-width: 24ch;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark, #fff);
}

.about-hero-cinematic__body {
  max-width: 70ch;
  font-size: var(--font-size-hero-body);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: color-mix(in srgb, var(--color-text-on-dark, #fff) 90%, transparent);
}

/* Animation mapping to match homepage hero */
@keyframes about-hero-cinematic-slide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes about-hero-cinematic-image-fade {
  from {
    opacity: 0;
    transform: translateY(20px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.about-hero-cinematic .js-animate {
  animation: about-hero-cinematic-slide 1200ms cubic-bezier(0.33, 1, 0.68, 1)
    both;
  animation-delay: var(--hero-delay, 0ms);
}

.about-hero-cinematic__headline {
  --hero-delay: 180ms;
}
.about-hero-cinematic__body {
  --hero-delay: 360ms;
}

@media (max-width: 1170px) {
  .about-hero-cinematic__headline {
    max-width: 28ch;
    font-size: clamp(var(--font-size-lg), 5vw, var(--font-size-xl));
  }

  .about-hero-cinematic__body {
    font-size: clamp(
      calc(var(--font-size-base) * 1.05),
      3.6vw,
      var(--font-size-hero-body)
    );
  }
}

@media (min-width: 992px) and (max-width: 1155px) {
  .about-hero-cinematic__container {
    padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
    grid-template-columns: 2.1fr 2.9fr;
    column-gap: clamp(var(--space-md), 4vw, var(--space-lg));
  }

  .about-hero-cinematic__content {
    max-width: none;
    justify-self: stretch;
    margin-inline-start: clamp(-8vw, -6vw, -2.5rem);
    padding-inline: clamp(var(--space-sm), 3vw, var(--space-lg));
  }

  .about-hero-cinematic__headline {
    max-width: 34ch;
  }
}

/* Mobile layout: keep portrait visible with overlayed text */
@media (max-width: 991px) {
  .about-hero-cinematic {
    padding-bottom: 0;
  }

  .about-hero-cinematic__container {
    display: block;
    position: relative;
    padding-inline: 0;
    max-width: none;
  }

  .about-hero-cinematic__image-wrapper {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 0;
    background-position: calc(50% + 6vw) calc(15% - 4vw);
  }

  .about-hero-cinematic__content {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-xl) clamp(var(--space-md), 6vw, var(--space-xl)) 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.65) 55%,
      rgba(0, 0, 0, 0.9) 100%
    );
    text-align: center;
    align-items: center;
  }
}

/* =========================================================
   Page: About - Story Editorial
   Purpose: Implements the left-bleed image and prose section,
            adapting the hero-hydration pattern.
   ========================================================= */

.about-story-editorial {
  position: relative;
  isolation: isolate;
  background-color: var(--color-background-subtle);
  overflow: hidden;
}

.about-story-editorial__media {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: clamp(384px, 41.6vw, 600px);
  z-index: 0;
  background-image: url("/wp-content/uploads/2025/11/puglia-03.jpg");
  background-size: cover;
  background-position: center;
}

.about-story-editorial__container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: clamp(var(--space-xl), 6vw, var(--space-xxl));
  display: grid;
  /* Defines a grid with a flexible left column and a content column on the right */
  grid-template-columns: clamp(336px, 38.4vw, 544px) 1fr;
  gap: clamp(var(--space-md), 4vw, var(--space-xl));
  align-items: center;
}

.about-story-editorial__content {
  position: relative;
  z-index: 1;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  max-inline-size: 50ch;
  width: 100%;
  margin-inline: auto;
  padding-block: clamp(var(--space-xxl), 12vh, var(--space-xxl2));
}

/* Increase line length on larger screens */
@media (min-width: 1600px) {
  .about-story-editorial__content {
    max-inline-size: 65ch;
  }
}

/* Typography mapping */
.about-story-editorial__headline {
  margin: 0 0 var(--type-gap-headline-subheadline);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--color-text-primary);
}

.about-story-editorial__body {
  display: grid;
  gap: var(--type-gap-subheadline-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-hero-body);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

.about-story-editorial__body p {
  margin: 0;
}

/* Animation: Use the existing base .js-animate styles for a fade-in-up effect */
.about-story-editorial .js-animate {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 1200ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 1200ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: var(--story-delay, 0ms);
  will-change: transform, opacity;
}

.about-story-editorial .js-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-story-editorial__headline.js-animate {
  --story-delay: 150ms;
}
.about-story-editorial__body.js-animate {
  --story-delay: 300ms;
}

/* Responsive stacking for mobile */
@media (max-width: 992px) {
  .about-story-editorial__media {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .about-story-editorial__container {
    display: block;
  }

  .about-story-editorial__content {
    max-inline-size: 100%;
    padding-block-start: var(--space-xl);
    padding-block-end: var(--space-xl);
  }
}

/* Increased padding for smaller mobile screens */
@media (max-width: 959px) {
  .about-story-editorial__content {
    padding-block-start: var(--space-xxl);
    padding-block-end: var(--space-xxl);
  }
}

.ast-desktop
  .ast-menu-hover-style-underline
  > .menu-item:hover
  > .menu-link:before {
  bottom: 15px; /* Adjust this negative value to control the gap (e.g., -3px for smaller, -10px for larger) */
}

/* WooCommerce term description line length constraint */
.term-description {
  max-inline-size: 80ch;
}

.doc {
  padding-block: var(--space-xxl);
}

.doc__container {
  /* Shipping & Returns uses 70ch; Contact uses 64ch (handled by page modifier) */
  max-inline-size: 80ch;
  margin-inline: auto;
  padding-inline: clamp(var(--space-lg), 6vw, var(--space-xxl));
  color: var(--color-text-primary);
}

/* Contact page narrower column */
.doc--contact .doc__container {
  max-inline-size: 70ch;
}

/* Tighten spacing for shipping & returns page */
.doc--shipping-returns .doc__section {
  gap: var(--space-md);
  margin-block: var(--space-lg);
}

/* Titles & headings */
.doc__title {
  margin: 0 0 var(--type-gap-headline-subheadline);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
}

.doc__heading {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  margin-bottom: calc(var(--space-xs) * -1) !important;
}

.doc__subheading {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-tight);
}

.doc__intro,
.doc__meta {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

/* Section grouping */
.doc__section {
  display: grid;
  gap: var(--type-gap-subheadline-body);
  margin-block: var(--space-xl);
}

/* Lists & links */
.doc__list {
  display: grid;
  gap: var(--space-sm);
  padding-left: 1.25rem; /* keep default bullets but improve spacing rhythm */
}

.doc__link {
  color: var(--color-link);
  text-underline-offset: var(--space-2xs);
}

/* Utility: visually hidden (no !important to comply with team rule) */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Contact form wrapper spacing */
.contact-form {
  margin-block: var(--space-xl);
}

.contact-form__embed {
  display: block;
}

/* =========================================================
   Customer Care — Forms (Contact)
   Purpose: Minimal CF7 styles aligned with theme tokens
   ========================================================= */

.wpcf7 form {
  display: grid;
  gap: var(--space-sm);
}

.wpcf7 form > div,
.wpcf7 form > p {
  margin-bottom: 0;
}

.contact-form__row {
  display: grid;
  gap: var(--space-2xs);
}

.wpcf7-form-control {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md, var(--radius-lg));
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--color-neutral-500);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--color-neutral-500) 20%, transparent);
}

.required {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-inline-start: var(--space-2xs);
}

/* Inline validation and responses */
.wpcf7-not-valid-tip {
  margin-block-start: var(--space-2xs);
  font-size: var(--font-size-sm);
  color: var(--color-danger, #c0392b);
}

.wpcf7-response-output {
  margin-block-start: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm, var(--radius-lg));
}

/* Submit button — reuse existing component */
.wpcf7-submit.ui-button__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
}

/* Submitting state */
.wpcf7 form.submitting [type=\"submit\"] {
  opacity: 0.7;
  pointer-events: none;
}

/* Override Astra Pro footer margin-bottom to eliminate gap */
@media (max-width: 544px) {
  .site-above-footer-wrap[data-section="section-above-footer-builder"].ast-footer-row-mobile-stack
    .site-footer-section {
    margin-bottom: 0;
  }
}

@media (max-width: 921px) {
  .site-above-footer-wrap[data-section="section-above-footer-builder"].ast-footer-row-tablet-stack
    .site-footer-section {
    margin-bottom: 0;
  }
}

/* -----------------------------------------
   Contact — Contact Card
   Purpose: White card with controlled spacing,
            normal text rhythm, subtle elevation
   ----------------------------------------- */
.contact-card {
  /* Layout & box */
  display: grid;
  gap: 0;
  padding: var(--space-xl);
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(
    --shadow-subtle,
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.04)
  );
  border: 1px solid color-mix(in srgb, var(--color-neutral-900) 8%, transparent);

  /* Fix browser default italics on <address> and page text color */
  font-style: normal;
  color: var(--color-text-primary);

  /* Ensure the card doesn’t collide with surrounding blocks */
  margin-block: var(--space-xl);
}

/* Tight, confident heading; consistent with doc headings */
.contact-card__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-normal);
  margin-bottom: calc(var(--space-2xs) * -1) !important;
}

/* Normalize paragraph spacing to stop giant gaps */
.contact-card__line {
  margin: 0; /* kill default p margins */
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

/* Override Astra Pro's .entry-content p margin */
.entry-content .contact-card__line {
  margin-bottom: 0;
}

/* Phone link matches site link style with a refined underline */
.contact-card__link {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: var(--space-2xs);
}

.contact-card__link:hover,
.contact-card__link:focus-visible {
  text-decoration-thickness: 2px;
}

/* -----------------------------------------
   Reduce Store page heading font weight
   ----------------------------------------- */

h1.woocommerce-products-header__title.page-title {
  font-weight: var(--font-weight-light);
}

/* ==========================================================================
   Footer: Inner Circle Signup
   ========================================================================== */

.footer-inner-circle {
  padding: 0 clamp(var(--space-lg), 4vw, var(--space-2xl)) var(--space-xl);
  color: var(--color-text-on-dark);
}

.footer-inner-circle__content {
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}

.footer-inner-circle__eyebrow {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.footer-inner-circle__subhead {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--line-height-relaxed);
  text-wrap: balance;
}

.footer-inner-circle .mbm-cm-subscribe-wrap {
  margin-top: 0;
  position: relative;
}

.footer-inner-circle .mbm-cm-input {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .footer-inner-circle {
    padding: var(--space-lg);
  }
}

/* ==========================================================================
   Footer: Brand Column (Column 1)
   ========================================================================== */

.footer-brand {
  color: var(--color-text-on-dark);
  text-align: left;
  padding: 0 clamp(var(--space-lg), 4vw, var(--space-2xl));
}

.footer-brand__logo {
  margin-top: var(--space-xl);
}

.footer-brand__logo img {
  display: block;
  max-width: 207px;
  height: auto;
}

.footer-brand__contact {
  font-style: normal;
}

.footer-brand__address,
.footer-brand__contact-links {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.8);
}

.footer-brand__address {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.02em;
}

.footer-brand__link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.footer-brand__link:hover,
.footer-brand__link:focus {
  color: var(--color-accent-deep-ochre);
}

.footer-brand__link:focus-visible {
  outline: 2px solid var(--color-accent-deep-ochre);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Footer: Navigation Column (Column 2)
   ========================================================================== */

.footer-nav {
  color: var(--color-text-on-dark);
  text-align: left;
  padding: 0 clamp(var(--space-lg), 4vw, var(--space-2xl));
}

.footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-nav__item {
  margin: 0;
  padding: 0;
}

.footer-nav__link {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  display: inline-block;
}

.footer-nav__link:hover,
.footer-nav__link:focus {
  color: var(--color-accent-deep-ochre);
}

.footer-nav__link:focus-visible {
  outline: 2px solid var(--color-accent-deep-ochre);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  
  .footer-brand__logo {
    display:none;
  }

  .footer-brand__logo img {
    max-width: 161px;
  }
}