/* ============================================================
   Age Fiercely — site chrome (header + footer)
   Maps the "Homepage V2.5" mockup onto native GeneratePress
   navigation-as-header + a GenerateBlocks footer element.
   Loaded sitewide (see functions.php: af-chrome enqueue).
   Fonts (Playfair Display / Roboto / Dancing Script) are already
   loaded by GeneratePress Customizer → Typography.
   ============================================================ */
:root {
  --af-gold: #A88C61;
  --af-gold-soft: #C2A87F;
  --af-tan: #B39A74;
  --af-slate: #424B5A;
  --af-slate-soft: #5A6473;
  --af-brick: #870303;
  --af-bg-warm: #FBF8F3;
  --af-hairline: #E9E1D2;
  --af-hairline-soft: #F1ECE2;
  --af-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --af-radius-btn: 999px;
  --af-max: 1280px;
  --af-gutter: clamp(20px, 4vw, 56px);
}

/* Smooth-scroll for in-page anchor links (e.g. the hero CTA buttons).
   scroll-padding-top keeps the target clear of the ~72px sticky header so
   anchored sections don't land hidden behind it. Honour reduced-motion. */
html {
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ──────────────────────────────────────────────
   HEADER — GeneratePress navigation-as-header
   ────────────────────────────────────────────── */

/* One-bar layout: logo left, menu pushed right */
/* All header rules target .main-navigation (NOT the mobile bar) so they apply
   identically to the original nav AND GeneratePress's sticky CLONE, which does
   not carry id="site-navigation". */

.main-navigation:not(.mobile-header-navigation) .inside-navigation {
  max-width: var(--af-max);
  margin: 0 auto;
  padding: 10px var(--af-gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}
/* GeneratePress zeroes .inside-navigation padding once the nav has branding
   (.main-navigation.has-branding .inside-navigation.grid-container{padding:0}),
   which collapsed the bar onto the 44px logo. Restore the V2.5 mockup's 14px
   vertical rhythm (~72px bar) with matching specificity + the mobile-bar guard. */
.main-navigation.has-branding:not(.mobile-header-navigation) .inside-navigation.grid-container,
.main-navigation.has-branding.grid-container:not(.mobile-header-navigation) .inside-navigation:not(.grid-container) {
  padding-top: 10px;
  padding-bottom: 10px;
}
.main-navigation:not(.mobile-header-navigation) .navigation-branding { margin-right: auto; }
.main-navigation:not(.mobile-header-navigation) .navigation-branding .site-logo img,
.main-navigation:not(.mobile-header-navigation) .navigation-branding img.header-image {
  /* The wordmark PNG is a thin tan script; small sizes read as illegible.
     80px on load for readability; the sticky clone shrinks it to 70px below. */
  height: 80px;
  width: auto;
}
/* Sticky/cloned header: shrink the logo a touch on scroll. */
.main-navigation.navigation-stick .navigation-branding .site-logo img,
.main-navigation.navigation-clone .navigation-branding .site-logo img,
.main-navigation.navigation-stick .navigation-branding img.header-image,
.main-navigation.navigation-clone .navigation-branding img.header-image {
  height: 70px;
}

/* Cart icon is not part of the V2.5 mockup — hide the WooCommerce menu-bar item */
.main-navigation .menu-bar-items { display: none; }

/* Default state (interior pages): frosted-white sticky bar */
.main-navigation:not(.mobile-header-navigation) {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--af-hairline-soft);
}

/* Interior/default header is position:static by default, so its z-index was
   inert and the dropdown panels were painted THROUGH by positioned page content
   (e.g. the WooCommerce product title/price and sale badge on single-product
   pages). Form a stacking context so the panels sit above the page body. Home
   (absolute) and the sticky clone (fixed) already stack, so exclude them. */
.main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) {
  position: relative;
  z-index: 100;
}

/* Top-level nav links */
.main-navigation:not(.mobile-header-navigation) .main-nav > ul {
  display: flex;
  align-items: center;
  gap: 28px;
}
.main-navigation:not(.mobile-header-navigation) .main-nav > ul > li > a {
  font-family: var(--af-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--af-slate);
  padding: 10px 0;
  line-height: 1;
}
.main-navigation:not(.mobile-header-navigation) .main-nav > ul > li > a:hover,
.main-navigation:not(.mobile-header-navigation) .main-nav > ul > li.sfHover > a {
  color: var(--af-gold);
}
/* GeneratePress ships the dropdown caret (.dropdown-menu-toggle) baseline-aligned
   and ~15px tall — taller than the 12.5px nav text — so Programs▾ / About▾ rendered
   ~2px taller and sat 1px higher than the plain links, throwing off the row. Cap it
   to the text height and centre it vertically so every top-level item aligns. */
.main-navigation:not(.mobile-header-navigation) .main-nav > ul > li > a .dropdown-menu-toggle {
  display: inline-flex;
  align-items: center;
  height: 12.5px;
  /* GP ships the toggle with padding:0 20px 0 10px, which floated the caret
     ~15px off its word and pushed the next item 20px further away — making the
     row read as unbalanced. Zero it so the caret hugs its label and the 28px
     gaps stay even. translateY nudges it onto the uppercase optical centre. */
  padding: 0;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 0;
  transform: translateY(-1px);
}
.main-navigation:not(.mobile-header-navigation) .main-nav > ul > li > a .gp-icon { font-size: 11px; }

/* Face HIIT — brick accent (extra specificity to beat GP nav text color) */
.main-navigation .main-nav ul li.face-hiit > a { color: var(--af-brick); }
.main-navigation .main-nav ul li.face-hiit > a:hover { color: var(--af-brick); opacity: .8; }

/* Account pill (desktop) — ONE pill, always the LAST item in the row.
   Both account items carry `.my-courses`: 196328 "Account" -> /my-account/,
   visible to everyone, and 196327 "Courses" -> /my-courses/, logged-in only
   and ordered last. So `:last-child` resolves to Courses for a logged-in
   visitor and to Account for a logged-out one, while the other account item
   falls back to the plain top-level link style. Exactly one CTA in the nav in
   either state — 2026-09-09, after opening My Account to all users put two
   identical pills side by side and broke the row. Full measurements:
   captures/2026-09-09/nav-crowding/FINDINGS.md.

   The selector must out-specify the top-level `.main-nav > ul > li > a` rule
   (0,3,3) — otherwise that rule's `padding:10px 0` wins and the pill collapses
   to zero horizontal padding, hugging the text. `> ul > li.my-courses:last-child`
   gives (0,5,3). Padding 8px 16px matches the V2.5 mockup. */
.main-navigation:not(.mobile-header-navigation) .main-nav > ul > li.my-courses:last-child > a {
  border: 1px solid var(--af-hairline);
  border-radius: var(--af-radius-btn);
  padding: 8px 16px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease;
}
/* Ghost pill → tan fill on hover, mirroring the site's .btn--tan:hover so the
   one real CTA in the nav reads as a button (the plain links just shift to gold).
   The tan fill + white text also reads cleanly over the transparent home hero. */
.main-navigation:not(.mobile-header-navigation) .main-nav > ul > li.my-courses:last-child > a:hover {
  background: var(--af-tan);
  border-color: var(--af-tan);
  color: #fff;
  text-shadow: none;
  box-shadow: 0 8px 24px -10px rgba(154, 130, 96, 0.55);
}

/* Account items — mobile. GeneratePress stacks the menu full-width, so the pill
   border stretched edge-to-edge and read as a broken box. Inset it and centre
   the label so it reads as a deliberate account button.

   No `:last-child` here on purpose: the stacked menu has no width pressure, so
   BOTH account items keep the button treatment and stay equally findable. */
.mobile-header-navigation .main-nav li.my-courses {
  /* GP forces list items to a fixed full width; reset to auto so the side
     margins actually inset the button instead of overflowing the viewport. */
  width: auto;
  margin: 12px 20px 6px;
}
.mobile-header-navigation .main-nav li.my-courses > a {
  border: 1px solid var(--af-hairline);
  border-radius: var(--af-radius-btn);
  text-align: center;
  padding: 14px 20px;
  line-height: 1;
}
.mobile-header-navigation .main-nav li.my-courses > a:hover {
  border-color: var(--af-gold);
  color: var(--af-gold);
}

/* Dropdown panels (Programs ▾, About ▾): clean white card, dark links */
.main-navigation:not(.mobile-header-navigation) .main-nav ul ul.sub-menu {
  background: #fff;
  border: 1px solid var(--af-hairline-soft);
  border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(66, 75, 90, 0.35);
  padding: 8px;
  min-width: 240px;
}
/* Reset GeneratePress' default cool-grey divider between sub-menu rows —
   the V2.5 card is clean (hover-highlight only, no divider lines). */
.main-navigation:not(.mobile-header-navigation) .main-nav ul ul.sub-menu li { border: 0; }
.main-navigation:not(.mobile-header-navigation) .main-nav ul ul.sub-menu li a {
  color: var(--af-slate);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 8px;
}
.main-navigation:not(.mobile-header-navigation) .main-nav ul ul.sub-menu li a:hover {
  background: var(--af-bg-warm);
  color: var(--af-gold);
}

/* ── HERO PAGES: transparent header floating over the hero ──
   Targets the ORIGINAL nav (not the sticky clone). The clone keeps the
   default solid-frosted look, giving transparent-over-hero → solid-on-scroll.
   Applies to the homepage (body.home) and the Connect page (body.page-contact-2,
   the slug body class emitted by add_slug_body_class() in functions.php). A page
   opting in must also be set to Layout → Content Container → Full Width, or the
   hero stays boxed inside the site container and the floating nav overlaps it. */
body.page-contact-2 .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick),
body.home .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) {
  position: absolute;
  /* top:auto = the nav's static (in-flow) position, so anything rendered on
     generate_before_header (e.g. the Top Bar promo element) pushes it down
     instead of being covered. Also absorbs the admin bar's html margin. */
  top: auto;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0) 100%);
  /* background-origin defaults to padding-box while painting covers the border
     box, so with background-repeat:repeat the 1px transparent bottom border
     below shows the tile's start colour (rgba(0,0,0,.45)) as a dark hairline.
     border-box makes the gradient span the border box instead. */
  background-origin: border-box;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.page-contact-2 .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) .main-nav > ul > li > a,
body.home .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) .main-nav > ul > li > a {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
body.page-contact-2 .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) .main-nav ul li.face-hiit > a,
body.home .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) .main-nav ul li.face-hiit > a {
  color: #F1C7B8;
}
body.page-contact-2 .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) li.my-courses:last-child > a,
body.home .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) li.my-courses:last-child > a {
  border-color: rgba(255, 255, 255, 0.5);
}
/* On the home hero the nav links carry a white text-shadow; the pill inherits it
   and it shows through the tan hover fill. Drop it on hover (this selector
   out-specifies the home text-shadow rule, which otherwise ties and wins). */
body.page-contact-2 .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) .main-nav > ul > li.my-courses:last-child > a:hover,
body.home .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) .main-nav > ul > li.my-courses:last-child > a:hover {
  text-shadow: none;
}
/* logo PNG is thin tan script — it vanishes over the bright top of the hero.
   Render it white (matching the nav links) with a soft shadow for lift.
   brightness(0) flattens the tan to black, invert(1) flips it to white;
   transparent pixels keep their alpha. */
body.page-contact-2 .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) .site-logo img,
body.home .main-navigation:not(.mobile-header-navigation):not(.navigation-clone):not(.navigation-stick) .site-logo img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 5px rgba(0, 0, 0, 0.55));
}

/* Stuck / cloned sticky state is always solid-frosted (overrides home transparent) */
.main-navigation.navigation-stick,
.main-navigation.navigation-clone {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--af-hairline-soft);
}

/* ── Tablet + small-laptop band (769–1120px) ──
   GeneratePress' hamburger doesn't take over until ≤768px, so between there and
   full desktop the 80px logo + horizontal nav have to be squeezed to stay on one
   line. This band used to stop at 984px, which was correct when the second
   top-level item was "Programs". Renaming it to "Yoga For Life Online"
   (2026-07-27) added ~110px to the row and pushed the natural wrap point up to
   ~1078px, so 985–1078px rendered a broken two-row bar (149px tall) with the
   menu dropped below the logo — visible on iPad Pro portrait (1024px) and any
   half-width laptop window.

   Two changes: the band now runs to 1120px (the wrap point plus ~40px headroom),
   and every value interpolates with clamp() instead of stepping. The old single
   step also meant one pixel of resize took the logo 80px → 48px and the bar
   100px → 68px; that cliff is gone, and 769px still lands on exactly the old
   floor values (48px / 14px / 11px / 0.08em) so the mobile edge is unchanged.

   Each clamp is linear in vw across 769→1120px (span 351px):
     slope = (max - min) / 351 * 100vw,  intercept = min - slope/100 * 769
   Letter-spacing is in px, not em, so it interpolates independently of the
   font-size clamp (0.08em @ 11px = 0.88px; 0.18em @ 12.5px = 2.25px).

   Re-measured 2026-09-09 on staging after the account items became "Account"
   (plain link) + "Courses" (pill): the natural one-row width is ~1073px, back
   under this 1120px ceiling, so the ceiling stands. It did NOT stand for the
   two-pill state that preceded it — that measured ~1165px and rendered a
   150px-tall two-row bar across 1121-1165px.

   If a nav label changes again, re-measure the natural one-row width and move
   the 1120px ceiling — that number is the load-bearing part of this block. */
@media (min-width: 769px) and (max-width: 1120px) {
  .main-navigation:not(.mobile-header-navigation) .inside-navigation { flex-wrap: nowrap; }
  .main-navigation:not(.mobile-header-navigation) .navigation-branding .site-logo img,
  .main-navigation:not(.mobile-header-navigation) .navigation-branding img.header-image {
    height: clamp(48px, 9.12vw - 22.1px, 80px);
  }
  .main-navigation:not(.mobile-header-navigation) .main-nav > ul {
    gap: clamp(14px, 3.99vw - 16.7px, 28px);
    flex-wrap: nowrap;
  }
  .main-navigation:not(.mobile-header-navigation) .main-nav > ul > li > a {
    font-size: clamp(11px, 0.427vw + 7.71px, 12.5px);
    letter-spacing: clamp(0.88px, 0.39vw - 2.12px, 2.25px);
    white-space: nowrap;
  }
  .main-navigation:not(.mobile-header-navigation) .main-nav > ul > li.my-courses:last-child > a {
    padding: clamp(6px, 0.57vw + 1.62px, 8px) clamp(12px, 1.14vw + 3.23px, 16px);
  }
}

/* Mobile header bar tweaks */
.mobile-header-navigation .navigation-branding img,
.mobile-header-navigation .site-logo img { height: 38px; width: auto; }

/* ──────────────────────────────────────────────
   FOOTER — GenerateBlocks "AF Footer" element
   (hooked into generate_footer, sitewide)
   ────────────────────────────────────────────── */
.site-footer { background: var(--af-bg-warm); }

.af-footer {
  background: var(--af-bg-warm);
  padding: 64px 0 36px;
  border-top: 1px solid var(--af-hairline-soft);
}
.af-footer-inner {
  max-width: var(--af-max);
  margin: 0 auto;
  padding: 0 var(--af-gutter);
}
.af-footer .ft-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.af-footer .ft-brand .ft-logo img,
.af-footer .ft-brand img.ft-logo { height: 46px; width: auto; } /* GB 2.4 puts className on the img */
.af-footer .legal {
  font-size: 12px;
  color: var(--af-slate-soft);
  line-height: 1.55;
  margin-top: 18px;
  max-width: 320px;
}
.af-footer .ft-h {
  font-family: var(--af-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--af-slate);
  margin: 0 0 16px;
}
.af-footer .ft-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.af-footer .ft-links li { margin: 0; }
.af-footer .ft-links a {
  font-size: 14.5px;
  color: var(--af-slate-soft);
  text-decoration: none;
}
.af-footer .ft-links a:hover { color: var(--af-gold); }

.af-footer .ft-bottom {
  max-width: var(--af-max);
  margin: 0 auto;
  padding: 24px var(--af-gutter) 0;
  border-top: 1px solid var(--af-hairline-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--af-slate-soft);
}
.af-footer .ft-bottom p { margin: 0; }
.af-footer .ft-bottom a { color: var(--af-slate-soft); text-decoration: none; }
.af-footer .ft-bottom a:hover { color: var(--af-gold); }

@media (max-width: 880px) {
  .af-footer .ft-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .af-footer .ft-grid { grid-template-columns: 1fr; gap: 28px; }
  .af-footer .ft-bottom { flex-direction: column; align-items: flex-start; }
}

/* ──────────────────────────────────────────────
   SINGLE PRODUCT — WooCommerce product template
   Karin's 2026-09-08 request: price beside the CTA, Age Fiercely typography,
   and an even rhythm down the summary column. Applies to every single product
   page (body.single-product), not to the shop/category grids or the related
   products strip further down the same page.

   The price MOVE itself is done in PHP (sadiefunctions-woocommerce.php re-hooks
   woocommerce_template_single_price from priority 10 to 25) so DOM order and
   visual order stay identical. Everything below is presentation only.
   ────────────────────────────────────────────── */

/* --- Summary column rhythm ------------------------------------------------
   WooCommerce/GP hand the summary children a mix of inherited margins
   (title 0, price 0/33.75px, form 0/36px), so the gaps between title, credit
   line, description, price and CTA were all different sizes. Zero them and set
   one rhythm from the top down; the pair rules below tune specific joints. */
body.single-product div.product .summary.entry-summary > * {
  margin-top: 0;
  margin-bottom: 0;
}
body.single-product div.product .summary.entry-summary > * + * {
  margin-top: 24px;
}

/* Product title — Playfair, fluid so it stops wrapping awkwardly on phones
   (it was a fixed 42px at every width). */
body.single-product div.product .summary.entry-summary h1.product_title {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--af-slate);
}
/* Title sits closer to whatever follows it than the default rhythm. */
body.single-product div.product .summary.entry-summary h1.product_title + * {
  margin-top: 16px;
}
/* …except on the products with no short description (the memberships), where
   the price follows the title directly and needs the full gap. */
body.single-product div.product .summary.entry-summary h1.product_title + p.price {
  margin-top: 24px;
}

/* --- Short description ---------------------------------------------------- */
body.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description {
  font-size: 17.5px;
  line-height: 1.7;
  /* GP's WooCommerce CSS colours this block --contrast (#222) while the rest of
     the page body is --brand-primary (#424B5A). Bring it onto the brand slate. */
  color: var(--af-slate);
}
body.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description p {
  margin: 0 0 14px;
}
body.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description > *:last-child {
  margin-bottom: 0;
}

/* The credit / session line. 69 of the 90 products with a short description
   open with a centred bold lead ("10 Sessions with Sadie Nardini", "8 Lessons /
   with Judy Heany"). It is authored two ways — an inline text-align:center (64
   products) or Gutenberg's .has-text-align-center (5) — so both are matched.
   Keying on the centring rather than :first-child alone leaves the 21 products
   whose description opens with ordinary body copy untouched.
   The authored centring is deliberate, so it is preserved — this only gives the
   line its own weight, colour and breathing room instead of reading as a stray
   bold paragraph. */
body.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description > *:first-child[style*="text-align: center"],
body.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description > *:first-child.has-text-align-center {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--af-gold);
  margin: 0 0 18px;
}
body.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description > *:first-child[style*="text-align: center"] strong,
body.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description > *:first-child.has-text-align-center strong {
  font-weight: 600;
}

/* --- Purchase block: price + CTA -----------------------------------------
   The price is now the last thing before the button. A hairline above it and a
   tight gap below bind the two into one purchase group, and separate them from
   the description without adding a heavy box. */
body.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description + p.price {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--af-hairline-soft);
}
body.single-product div.product .summary.entry-summary p.price {
  font-family: var(--af-sans);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--af-slate);
}
/* Sale products (15 of 103): strike the old price back, put the live price in
   the same red as the Add to Cart button so the saving reads at a glance. */
body.single-product div.product .summary.entry-summary p.price del {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--af-slate-soft);
  opacity: 0.75;
  margin-right: 0.45em;
  text-decoration-thickness: 1px;
}
body.single-product div.product .summary.entry-summary p.price ins {
  text-decoration: none;
  color: var(--brand-accent, #9C5151);
}
body.single-product div.product .summary.entry-summary p.price .woocommerce-Price-currencySymbol {
  font-size: 0.72em;
  font-weight: 500;
  vertical-align: 0.14em;
  margin-right: 0.04em;
}

/* Cart form sits right under the price. */
body.single-product div.product .summary.entry-summary p.price + form.cart {
  margin-top: 18px;
}
body.single-product div.product .summary.entry-summary form.cart {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* WooCommerce puts a clearfix on this form (::before/::after with content:" ";
   display:table). In a flex container those pseudo-elements each become a flex
   ITEM, so the row-gap above pushed the button 14px off the column's left edge.
   The form no longer relies on the clearfix, so take them out of the flow.
   (The quantity box needs no styling here: style-overrides.css line 194 hides
   div.quantity on every single-product form site-wide.) */
body.single-product div.product .summary.entry-summary form.cart::before,
body.single-product div.product .summary.entry-summary form.cart::after {
  display: none;
}

/* Add to Cart — the AF pill. style-overrides.css sets 22px here while the
   related-products buttons on the same page are 30px; both become the site's
   999px pill token. Selector carries enough classes to beat that rule. */
body.single-product .woocommerce div.product form.cart button.button.alt.single_add_to_cart_button,
body.single-product div.product form.cart button.button.alt.single_add_to_cart_button {
  border-radius: var(--af-radius-btn);
  padding: 15px 40px;
  min-width: 220px;
  font-family: var(--af-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  transition: transform .25s ease, background-color .2s ease, box-shadow .25s ease;
}
body.single-product div.product form.cart button.button.alt.single_add_to_cart_button:hover,
body.single-product div.product form.cart button.button.alt.single_add_to_cart_button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(135, 3, 3, 0.55);
}

/* --- Summary → tabs ------------------------------------------------------
   The form's trailing 36px margin plus the tabs' own offset left a vague gap
   under the CTA. Make the separation deliberate. */
body.single-product div.product .summary.entry-summary {
  padding-bottom: 8px;
}
body.single-product div.product .woocommerce-tabs {
  margin-top: 56px;
}

/* --- Phones ---------------------------------------------------------------
   Full-width CTA so the primary action is thumb-sized, and the quantity box
   keeps its natural width beside it. */
@media (max-width: 768px) {
  body.single-product div.product .summary.entry-summary {
    margin-top: 26px;
  }
  body.single-product div.product .summary.entry-summary .woocommerce-product-details__short-description + p.price {
    margin-top: 24px;
    padding-top: 22px;
  }
  body.single-product div.product form.cart button.button.alt.single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 28px;
  }
  body.single-product div.product .woocommerce-tabs {
    margin-top: 40px;
  }
}