/*
 * Mobile layout and contrast fixes from the 13 Nov 2026 audit (finding 8).
 * Loaded after the other theme CSS. Rules use body.ga-skin plus ids so they win
 * over the theme's own !important rules without editing the 100 KB style.css.
 */

/* ------------------------------------------------------------------
   1. Hero: stop the text column growing wider than the screen.
   The eyebrow line never wrapped, so it set the column's minimum width
   (443px on a 375px phone) and the right side was clipped.
------------------------------------------------------------------- */
/* The 0.9 line-height cut the bottoms off letters like y and g in the headline. */
body.ga-skin #ga-hero-headline {
  line-height: 1.08 !important;
}

@media (max-width: 540px) {
  body.ga-skin #ga-hero-content {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.ga-skin .ga-hero-eyebrow span {
    white-space: normal !important;
    letter-spacing: 0.18em !important;
  }

  body.ga-skin .ga-hero-eyebrow-line--right {
    display: none !important;
  }

  body.ga-skin #ga-hero-headline .ga-hl-1,
  body.ga-skin #ga-hero-headline .ga-hl-2 {
    font-size: clamp(34px, 11.5vw, 68px) !important;
    overflow-wrap: anywhere;
  }

  body.ga-skin #ga-hero-sub {
    overflow-wrap: break-word;
  }
}

/* ------------------------------------------------------------------
   2. Basket, checkout, account: reclaim side space and fix the coupon box.
   Three stacked wrappers added about 40px per side before the content.
------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.ga-skin:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) #primary {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.ga-skin.woocommerce-cart .coupon {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    float: none !important;
    width: 100% !important;
  }

  body.ga-skin.woocommerce-cart .coupon #coupon_code,
  body.ga-skin.woocommerce-cart .coupon .button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ------------------------------------------------------------------
   3. Dark theme text contrast.
   The dark skin sets a black background but not a light text colour on
   product pages, so Astra's slate text (about 1.4 to 1.9 : 1) showed through.
   Light mode (.ga-light) is left alone.
------------------------------------------------------------------- */
html:not(.ga-light) body.ga-skin:not(.ga-light) {
  --ga-text: #d6d2c4;
  --ga-head: #f4efe0;
  --ga-link: #e0bf62;
}

html:not(.ga-light) body.ga-skin:not(.ga-light).single-product :is(.woocommerce-Tabs-panel, .entry-summary, .related, .upsells, .up-sells) :is(p:not(.price), li, strong, b, em, label, legend, td, th, dd, dt, .single-product-category, a.minus, a.plus) {
  color: var(--ga-text) !important;
}

html:not(.ga-light) body.ga-skin:not(.ga-light).single-product :is(.woocommerce-Tabs-panel, .related, .upsells, .up-sells) :is(h2, h3, h4) {
  color: var(--ga-head) !important;
}

html:not(.ga-light) body.ga-skin:not(.ga-light).single-product .woocommerce-Tabs-panel a,
html:not(.ga-light) body.ga-skin:not(.ga-light).single-product :is(.single-product-category, .product_meta) a {
  color: var(--ga-link) !important;
}

/* Category tiles are light cards; the faint gold "32 Products" count is darkened. */
body.ga-skin mark.count {
  color: #7a5c10 !important;
  background: transparent !important;
}

/* Quantity - / + buttons and the Description / Additional information / Reviews tabs. */
html:not(.ga-light) body.ga-skin:not(.ga-light) .quantity :is(a.minus, a.plus, .minus, .plus),
html:not(.ga-light) body.ga-skin:not(.ga-light).single-product .woocommerce-tabs ul.tabs li a {
  color: var(--ga-text) !important;
}

html:not(.ga-light) body.ga-skin:not(.ga-light).woocommerce-cart a.shipping-calculator-button {
  color: var(--ga-link) !important;
}