/*
 * Global non-Tailwind CSS.
 * Loaded on all pages.
 * Keep it minimal.
 */

:root {
  --color-primary: #1d8691;
  --color-primary-dark: #166a73;
  --color-primary-light: #e6f4f5;
  --color-bg: #f9fafb;
  --color-text: #1a1a1a;
  /* Flat white — was a pale-mint gradient; switched to a clean white shop
     background because white cards had almost no tonal separation (~1.1:1
     contrast) against the previous #eef6f7-family tint. Kept the variable
     name since it's still the single background value the Shop hero uses. */
  --gradient-hero: #ffffff;

  /* The site's button gradient, matched exactly to the live CSS: deep teal
     into light cyan at 340deg, white label, 50px radius. Defined here rather
     than on .fpx-home so the theme chrome (the mobile drawer CTA) and the
     front page share one source of truth.

     Contrast note, recorded once so it is not rediscovered: white on the
     #56CCF2 end measures 1.86:1 and on the #148D9F end 3.93:1, both under
     the 4.5 AA minimum. The deep-to-light combination is a deliberate brand
     decision by the site owner and is what the live site ships. Exits if an
     audit ever forces it: a dark label (#0b3a44 gives 5.81:1+ on these
     stops) or darkening the light stop — #128091 at 4.64:1 is the ceiling
     for a white label. Do not quietly "fix" this; it is a choice. */
  --brand-grad: linear-gradient(340deg, #148d9f 30%, #56ccf2 100%);
  --brand-ink: #ffffff;

  /* The two brand colours on their own, and a soft wash of both for hover
     and "you are here" fills (header, drawer). Text on the wash stays
     --color-primary-dark: #56ccf2 is too light to read as small text. */
  --brand-deep: #148d9f;
  --brand-light: #56ccf2;
  --brand-grad-soft: linear-gradient(135deg, rgba(20, 141, 159, 0.1) 0%, rgba(86, 204, 242, 0.18) 100%);
  /* Same two stops, run left to right with the deep teal behind the label.
     --brand-grad's 340deg angle turns a short pill almost entirely cyan,
     which left white nav text unreadable ("Home"). Pills of any width now
     look alike. */
  --brand-grad-pill: linear-gradient(100deg, #56ccf2 0%, #148d9f 62%);
}

/* overflow-x is intentionally on html only, not body: adding it to body
   too makes body an overflow-clipping ancestor, which per spec breaks
   `position: sticky` on descendants like .site-header — it would just
   scroll away with the page instead of pinning to the viewport. */
html {
  overflow-x: hidden;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*
 * Neutral baseline for every <button> inside the WooCommerce content
 * (.fpx-woo): no browser/WooCommerce padding, radius, background, border or
 * shadow. Components (e.g. the quantity stepper from quantity-selector.js)
 * build their own look on top of this.
 */
.fpx-woo button {
  padding: 0 !important;
  border-radius: 0 !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit;
}

/*
 * The quantity stepper's number input stays plain (no fill, radius or
 * border); other form fields (checkout, etc.) keep their own styling.
 */
.fpx-woo .quantity input.qty {
  background-color: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
}

#fpx-content {
  min-height: 50vh; /* Basic structure requirement */
}

/* Screen reader text (WordPress standard) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/*
 * Header, navigation, mobile menu, and footer structural styles.
 * Loaded on ALL pages — no Tailwind here.
 */

/* ── Site header ──────────────────────────────────────────────────── */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #eef0f2;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform 0.3s ease, box-shadow 0.25s ease;
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
}

/* ── Container ────────────────────────────────────────────────────── */
.fpx-container {
  width: 100%;
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header inner row ─────────────────────────────────────────────── */
/* No transition on height: animating it forces a layout recalc on every
   frame, which combined with the sticky header's backdrop-filter blur
   caused visible shaking right as the compact/normal state toggled.
   The height change now snaps instantly; box-shadow/transform on
   .site-header stay smoothly animated for the rest of the scroll polish. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* min-height, not height: if the nav wraps to a second row the header
     grows to contain it rather than clipping it. */
  min-height: 4.25rem; /* 68px — normal/top-of-page state */
  gap: 1rem;
}
/* Compact state once scrolled past the top — subtly shorter, not a
   dramatic shrink; toggled by the existing `.is-scrolled` class already
   set in mobile-menu.js's scroll listener. */
.site-header.is-scrolled .header-inner {
  min-height: 3.75rem; /* 60px */
}

/* ── Logo ─────────────────────────────────────────────────────────── */
.site-branding__link {
  font-family: "Glory", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--brand-deep);
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-logo {
  width: 168px !important;
  height: auto !important;
  display: block;
  object-fit: contain;
}

/* ── Desktop navigation ───────────────────────────────────────────── */
.main-navigation {
  flex: 1;
  min-width: 0; /* load-bearing — see the breakpoint note below */
  display: flex;
  justify-content: center;
}
/* Direct child only — a nested `.sub-menu` (dropdown) needs its own,
   different layout (block column, not a flex row); see below. Without this
   scoping, dropdown children (e.g. Cart/Checkout under Shop) rendered as
   extra always-visible top-level items instead of a hover dropdown. */
.main-navigation > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px; /* was 2px; widened 2026-09-25 so the pills don't crowd */
  /* wrap, not nowrap: a menu too wide for its row grows the header instead
     of widening the document. See the breakpoint note below. */
  flex-wrap: wrap;
  justify-content: center;
}
.main-navigation li {
  position: relative;
}
.main-navigation a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
  position: relative;
}
/* Underline marker (2026-09-27, replaces the filled gradient pill, which
   read as a button and competed with the real CTAs). ::before, because
   dropdown parents already use ::after for their chevron. */
.main-navigation a::before {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 1px;
  height: 3px;
  border-radius: 3px;
  background-image: var(--brand-grad-pill);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.main-navigation a:hover {
  color: var(--color-primary-dark);
  background-color: transparent;
}
.main-navigation a:hover::before {
  transform: scaleX(1);
  opacity: 0.45;
}
/* Current page: teal text + full-strength gradient underline. */
.main-navigation li.current-menu-item > a {
  color: var(--color-primary-dark);
  background-color: transparent;
}
.main-navigation li.current-menu-item > a::before {
  transform: scaleX(1);
  opacity: 1;
}
@media (min-width: 1024px) and (max-width: 1419px) {
  .main-navigation a::before {
    left: 0.55rem;
    right: 0.55rem;
  }
}

/* Dropdown submenu (e.g. Shop > Cart / Checkout) — hidden until hover/focus. */
.main-navigation .menu-item-has-children > a::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.6;
}
.main-navigation .sub-menu {
  display: block;
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.main-navigation .sub-menu li {
  width: 100%;
}
.main-navigation .sub-menu a {
  width: 100%;
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
}
.main-navigation li.menu-item-has-children:hover > .sub-menu,
.main-navigation li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* The header must never be able to push the document wider than the window,
   whatever the menu contains. Three rules do that, and all three matter:

   1. `min-width: 0` on .main-navigation. A flex item defaults to
      `min-width: auto`, which for a nowrap row means "at least the sum of my
      children" — so the nav could not shrink and forced the whole header
      wide. Same trap as `min-height: 0` on scrollable flex children,
      documented in the Gotchas section.
   2. The list wraps instead of overflowing, so a menu too wide for its row
      makes the header TALLER rather than making the page scroll sideways.
      That failure is visible and self-correcting; a horizontal scrollbar on
      every page is neither.
   3. A compact band that tightens the links before wrapping is needed.

   This used to overflow between roughly 960px and 1230px — the desktop nav
   appeared at 900px but needed about 1413px to fit. It was correct for the
   five-item menu the theme shipped with and wrong the moment the menu grew.
   Nothing here is tuned to a item count any more; if you want to check the
   headroom for a given menu, measure `.main-navigation > ul` at a wide
   viewport and add ~330px for the logo, actions, gaps and container padding. */
@media (max-width: 1023px) {
  .main-navigation { display: none; }
}

/* Tighten the links before the row is forced to wrap: smaller type and
   roughly half the horizontal padding, worth about 150px on a nine-item
   menu. */
@media (min-width: 1024px) and (max-width: 1419px) {
  .main-navigation > ul {
    gap: 4px;
  }
  .main-navigation a {
    padding: 0.5rem 0.55rem;
    font-size: 0.875rem;
  }
}
/* Narrowest desktop band: the eight-item menu needs ~719px with the 4px gap
   but gets ~694px at 1024, so it wrapped to two rows (it did with the old
   2px gap too). No gap here buys the ~28px. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .main-navigation > ul {
    gap: 0;
  }
}

/* ── Header actions (right side) ──────────────────────────────────── */
/* Help phone: same look as the checkout header's. Wide desktops only, where
   the menu leaves room for it; hidden on phones and tablets. */
.header-phone {
  display: none;
}
@media (min-width: 1280px) {
  .header-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 10px;
    color: var(--color-text, #1a1a1a);
    text-decoration: none;
    white-space: nowrap;
  }
}
.header-phone svg {
  flex-shrink: 0;
  padding: 9px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--brand-grad-soft), #fff;
  color: var(--brand-deep);
}
.header-phone__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.header-phone__label {
  font-size: 13px;
  color: #5b6f74;
}
.header-phone__num {
  font-size: 17px;
  font-weight: 700;
}
.header-phone:hover .header-phone__num {
  color: var(--color-primary-dark);
}
/* Laptops: a more compact version, so it doesn't crowd the menu. */
@media (min-width: 1280px) and (max-width: 1535px) {
  .header-phone {
    gap: 7px;
    margin-right: 6px;
  }
  .header-phone svg {
    width: 15px;
    height: 15px;
    padding: 7px;
  }
  .header-phone__label {
    font-size: 11.5px;
  }
  .header-phone__num {
    font-size: 14.5px;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.header-action-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #4b5563;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* Circular icon buttons (Account, Cart, hamburger) — matches the floating
   cart / popover close-button treatment used elsewhere in the theme. */
.header-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.header-icon-btn:hover {
  color: var(--color-primary-dark);
  background-color: transparent;
  background-image: var(--brand-grad-soft);
}
.header-action-btn svg {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
  flex-shrink: 0;
}

/* ── Cart badge — small red circle overlapping the icon, top-right ── */
.header-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e6484b;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.header-cart-badge.is-visible {
  opacity: 1;
  transform: scale(1);
}
/* Legacy class kept in case any other markup still references it. */
.cart-count,
.cart-count--hidden {
  display: none;
}

/* ── Hamburger (mobile only) ──────────────────────────────────────── */
/* This threshold must stay in step with the one that hides .main-navigation,
   or both the nav and the hamburger render at once. */
.menu-toggle { display: none; }
@media (max-width: 1023px) {
  .menu-toggle { display: flex; }
  .header-desktop-only { display: none !important; }
}

/* ── Mobile overlay ───────────────────────────────────────────────── */
.fpx-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fpx-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ── Mobile off-canvas drawer ─────────────────────────────────────── */
.fpx-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  max-width: 420px;
  height: 100dvh;
  background: #fff;
  z-index: 100;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.fpx-mobile-menu.is-open {
  transform: translateX(0);
}
body.fpx-menu-open {
  overflow: hidden;
}

/* Drawer: top header row */
.fpx-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f0f0f0;
}
.fpx-mobile-menu__brand {
  font-family: "Glory", sans-serif;
  font-weight: 700;
  color: var(--brand-deep);
  font-size: 1.25rem;
}
.fpx-mobile-menu__logo {
  width: 110px !important;
  height: auto !important;
}
.fpx-mobile-menu__close {
  background: #f6f7f8;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.fpx-mobile-menu__close:hover {
  color: var(--color-primary-dark);
  background: var(--brand-grad-soft), #f6f7f8;
}

/* Drawer: Shop Now CTA */
.fpx-mobile-menu__cta-wrap {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f0f0f0;
}
/* The brand gradient, same token the front page uses. It was a different
   gradient entirely (135deg, --color-primary to --color-primary-dark), so
   the drawer's primary button did not match any other button on the site.
   No shadow: removed at the site owner's request, in line with the rest of
   the flat treatment. Hover moves the gradient rather than lifting it. */
.fpx-mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background-color: transparent;
  background-image: var(--brand-grad);
  color: var(--brand-ink) !important;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: none;
  transition: filter 0.2s ease, transform 0.15s ease;
}
.fpx-mobile-menu__cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Drawer: nav list */
.fpx-mobile-menu__nav {
  padding: 0.5rem 0;
  flex: 1;
}
.fpx-mobile-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fpx-mobile-nav li {
  border-bottom: 1px solid #f5f5f5;
}
.fpx-mobile-nav a {
  display: flex;
  align-items: center;
  padding: 0.875rem 1.25rem;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: color 0.15s, background-color 0.15s;
}
.fpx-mobile-nav a:hover,
.fpx-mobile-nav li.current-menu-item > a {
  color: var(--color-primary-dark);
  background-color: transparent;
  background-image: var(--brand-grad-soft);
}
/* Current page: a deep-teal bar on the leading edge as well as the wash. */
.fpx-mobile-nav li.current-menu-item > a {
  box-shadow: inset 3px 0 0 var(--brand-deep);
  font-weight: 600;
}

/* ── Mobile nav accordion (dropdown children, e.g. Cart/Checkout under Shop) ── */
.fpx-mobile-nav__item--parent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.fpx-mobile-nav__item--parent > a {
  flex: 1;
  min-width: 0;
}
.fpx-mobile-nav__toggle {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.15s ease;
}
.fpx-mobile-nav__toggle svg {
  width: 15px;
  height: 15px;
}
.fpx-mobile-nav__item--parent.is-expanded .fpx-mobile-nav__toggle {
  transform: rotate(180deg);
  color: var(--brand-deep);
}
.fpx-mobile-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background: #fafbfb;
  transition: max-height 0.25s ease;
}
.fpx-mobile-nav__item--parent.is-expanded .sub-menu {
  max-height: 320px;
}
.fpx-mobile-nav .sub-menu li {
  border-bottom: 1px solid #f0f0f0;
}
.fpx-mobile-nav .sub-menu li:last-child {
  border-bottom: none;
}
.fpx-mobile-nav .sub-menu a {
  padding: 0.7rem 1.25rem 0.7rem 2.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}
.fpx-mobile-nav .sub-menu a:hover {
  color: var(--color-primary-dark);
  background-color: transparent;
  background-image: var(--brand-grad-soft);
}

/* Drawer: account + cart quick links */
.fpx-mobile-menu__quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #f0f0f0;
}
.fpx-mobile-menu__quick-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.875rem 0.5rem;
  text-decoration: none;
  color: #6b7280;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
  border-right: 1px solid #f0f0f0;
}
.fpx-mobile-menu__quick-link:last-child {
  border-right: none;
}
.fpx-mobile-menu__quick-link:hover {
  color: var(--color-primary-dark);
  background: var(--brand-grad-soft);
}

/* Drawer: trust strip */
.fpx-mobile-menu__trust {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: #f9fafb;
  border-top: 1px solid #f0f0f0;
}
.fpx-mobile-menu__trust span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: #6b7280;
  font-weight: 500;
}
.fpx-mobile-menu__trust svg {
  color: var(--brand-deep);
  flex-shrink: 0;
}

/* ── Footer ───────────────────────────────────────────────────────────
   template-parts/footer/site-footer.php. */
.site-footer {
  --fpx-footer-bg: #0b2528;
  --fpx-footer-bg-deep: #071b1d;
  --fpx-footer-text: #a9c1c4;
  --fpx-footer-muted: #7d979a;
  --fpx-footer-line: rgba(255, 255, 255, 0.08);
  --fpx-footer-accent: var(--brand-light); /* was #5fd0d8; now the brand cyan */
  position: relative;
  background:
    radial-gradient(900px 420px at 6% 0%, rgba(20, 141, 159, 0.3), transparent 70%),
    radial-gradient(700px 380px at 100% 100%, rgba(86, 204, 242, 0.12), transparent 70%),
    var(--fpx-footer-bg);
  color: var(--fpx-footer-text);
  font-family: "Inter", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-light), var(--brand-deep));
}
.site-footer a:focus-visible {
  outline: 2px solid var(--fpx-footer-accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Recognition band */
.fpx-footer__recognition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding: 3rem 0 2.75rem;
  border-bottom: 1px solid var(--fpx-footer-line);
}
.fpx-footer__recognition-intro {
  max-width: 24rem;
}
.fpx-footer__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fpx-footer-accent);
}
.fpx-footer__eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.site-footer h2.fpx-footer__recognition-title {
  margin: 0.4rem 0 0;
  font-family: "Glory", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
.site-footer .fpx-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}
.fpx-footer__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 10px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fpx-footer__badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
}
.fpx-footer__badge-link {
  display: block;
}
.site-footer img.fpx-footer__badge-img {
  display: block;
  width: auto !important;
  height: 76px !important;
  max-width: 170px;
  object-fit: contain;
}

/* Columns */
.fpx-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 0.95fr) minmax(0, 1.1fr);
  gap: 2.5rem 3.5rem;
  padding: 3.25rem 0 3.75rem;
}
/* Fewer columns switched on in FoliumPX → Settings → Footer: the remaining
   ones share the row instead of leaving empty tracks. Only 3/2 need a
   desktop rule (≤1100px is already 2-up, ≤600px 1-up); a single column is
   capped at a readable width at every size — two classes so it also beats
   the breakpoint rules below. */
.fpx-footer__main--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fpx-footer__main--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fpx-footer__main.fpx-footer__main--cols-1 {
  grid-template-columns: minmax(0, 36rem);
}
.site-footer h2.fpx-footer__title {
  position: relative;
  margin: 0 0 1.4rem;
  padding-bottom: 0.8rem;
  font-family: "Glory", sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #fff;
}
.site-footer h2.fpx-footer__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-light));
}
.site-footer a.fpx-footer__link {
  color: var(--fpx-footer-text);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer a.fpx-footer__link:hover {
  color: #fff;
}

/* Contact */
.fpx-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  font-style: normal;
}
.fpx-footer__contact-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.fpx-footer__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(95, 208, 216, 0.1);
  border: 1px solid rgba(95, 208, 216, 0.2);
  color: var(--fpx-footer-accent);
}
.fpx-footer__icon svg {
  width: 16px;
  height: 16px;
}
.fpx-footer__contact-body {
  padding-top: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.fpx-footer__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.45rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(95, 208, 216, 0.1);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fpx-footer-accent);
}
.fpx-footer__pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}
.site-footer .fpx-footer__phones li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
}
.fpx-footer__phone-label {
  font-size: 0.75rem;
  color: var(--fpx-footer-muted);
}

/* Latest posts */
.site-footer .fpx-footer__posts li {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--fpx-footer-line);
}
.site-footer .fpx-footer__posts li:first-child {
  padding-top: 0;
}
.site-footer .fpx-footer__posts li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.site-footer a.fpx-footer__post {
  display: block;
  text-decoration: none;
}
.fpx-footer__post-date {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fpx-footer-muted);
}
.fpx-footer__post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #d3e2e4;
  transition: color 0.15s ease;
}
.site-footer a.fpx-footer__post:hover .fpx-footer__post-title {
  color: var(--fpx-footer-accent);
}

/* Navigation — `a` selectors (not a link class) so a wp_nav_menu()
   assigned to the Footer Links location is styled identically. */
.site-footer .fpx-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.site-footer .fpx-footer__nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--fpx-footer-text);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}
.site-footer .fpx-footer__nav a::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
}
.site-footer .fpx-footer__nav a:hover,
.site-footer .fpx-footer__nav .current-menu-item > a {
  color: #fff;
  transform: translateX(3px);
}
.site-footer .fpx-footer__nav a:hover::before {
  color: var(--fpx-footer-accent);
  opacity: 1;
}

/* Products */
.site-footer .fpx-footer__products {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.site-footer a.fpx-footer__product {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid var(--fpx-footer-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.site-footer a.fpx-footer__product:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(95, 208, 216, 0.35);
  transform: translateY(-2px);
}
.fpx-footer__product-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 4px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.site-footer img.fpx-footer__product-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.fpx-footer__product-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
}
.fpx-footer__product-price,
.fpx-footer__product-price .woocommerce-Price-amount {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--fpx-footer-accent);
}
.fpx-footer__product-price .woocommerce-Price-amount {
  display: inline;
  margin: 0;
}
.site-footer a.fpx-footer__shop-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.1rem;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  background: var(--brand-grad);
  box-shadow: 0 10px 22px rgba(20, 141, 159, 0.3);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.site-footer a.fpx-footer__shop-all:hover {
  box-shadow: 0 12px 28px rgba(20, 141, 159, 0.45);
  transform: translateY(-1px);
}
.fpx-footer__shop-all svg {
  width: 15px;
  height: 15px;
  transition: transform 0.15s ease;
}
.site-footer a.fpx-footer__shop-all:hover svg {
  transform: translateX(2px);
}

/* Bottom bar */
.fpx-footer__bottom {
  background: var(--fpx-footer-bg-deep);
  border-top: 1px solid var(--fpx-footer-line);
}
.fpx-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 3rem;
  /* right padding clears the fixed floating-cart bubble (bottom-right) */
  padding: 1.5rem 5.5rem 1.5rem 0;
}
.site-footer p.fpx-footer__disclaimer {
  max-width: 82ch;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--fpx-footer-muted);
}
.site-footer p.fpx-footer__copy {
  margin: 0;
  font-size: 0.82rem;
  color: var(--fpx-footer-text);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .fpx-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.75rem 3rem;
  }
}

@media (max-width: 768px) {
  .fpx-footer__recognition {
    padding: 2.5rem 0 2.25rem;
  }
  .site-footer .fpx-footer__badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.75rem;
  }
  .fpx-footer__badge {
    height: 88px;
    padding: 8px 12px;
  }
  .site-footer img.fpx-footer__badge-img {
    height: 68px !important;
    max-width: 100%;
  }
  .fpx-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 0 5.5rem;
  }
  .site-footer p.fpx-footer__copy {
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .fpx-footer__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding: 2.5rem 0 3rem;
  }
  .site-footer h2.fpx-footer__recognition-title {
    font-size: 1.3rem;
  }
}

/* Product card entrance animation */
@keyframes fpx-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Product card image ────────────────────────────────────────────── */
.fpx-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.15 / 1;
}

/* Two classes, not one — the same specificity trap documented for
   `.fpx-woo .fpx-pdp-atc-btn` and `button.fpx-fcart-close` elsewhere in this
   file, and the reason the shop grid's rows looked ragged.

   WooCommerce core ships `.woocommerce img, .woocommerce-page img { height:
   auto }` — a class+element selector, (0,1,1) — which outranks a bare
   `.fpx-card-img__thumb` at (0,1,0). So `height: 100%` here never applied
   and each thumbnail fell back to its own natural ratio inside a container
   that was sizing correctly at 1.15/1 (449x390 measured): a 16:9 source
   rendered 449x252 and left 138px of dead space under it, while a square
   source rendered 449x449 and overflowed, clipped by the container's
   `overflow: hidden`. That is why one card showed a small bottle adrift in
   white and the next showed a photo cropped edge to edge.

   `.fpx-card-img` + `.fpx-card-img__thumb` is (0,2,0), which beats it
   outright without needing !important. */
.fpx-card-img .fpx-card-img__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* ── Product card title reset ──────────────────────────────────────── */
.fpx-card-title {
  margin: 0;
}

/* ── Card price components ─────────────────────────────────────────── */
.fpx-price-wrap {
  line-height: 1.2;
}

.fpx-price-main .woocommerce-Price-amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brand-deep);
  font-family: "Glory", sans-serif;
}

/* Subscribe & Save pill — also used as <a> tag */
.fpx-price-sub {
  text-decoration: none !important;
  color: #065f46 !important;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #065f46;
  background-color: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.5;
}
.fpx-price-sub .woocommerce-Price-amount,
.fpx-price-sub .woocommerce-Price-amount bdi {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #065f46 !important;
}


/* Period label for pure subscriptions (no alt price) */
.fpx-price-period {
  font-size: 0.78rem;
  color: #9ca3af;
  font-weight: 500;
}

/* Strikethrough for on-sale products */
.fpx-price-was .woocommerce-Price-amount {
  font-size: 0.875rem;
  font-weight: 400;
  color: #9ca3af;
  text-decoration: line-through;
}

/* ── Product card badges ────────────────────────────────────────────── */
.fpx-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.fpx-badge--amber {
  background-color: #f59e0b;
  color: #fff;
}

.fpx-badge--primary {
  background-color: var(--brand-deep);
  background-image: var(--brand-grad-pill);
  color: #fff;
}

/* ── Shop toolbar (result count + sorting, both optional via Settings → Shop) ── */
.fpx-woo .fpx-shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 24px;
}
.fpx-woo .fpx-shop-toolbar .woocommerce-result-count {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
}
.fpx-woo .fpx-shop-toolbar .woocommerce-ordering {
  margin: 0 0 0 auto;
}
.fpx-woo .fpx-shop-toolbar select.orderby {
  appearance: auto;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  background-color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: var(--color-text);
  cursor: pointer;
}
.fpx-woo .fpx-shop-toolbar select.orderby:focus {
  outline: none;
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px rgba(20, 141, 159, 0.15);
}

/* ── Breadcrumbs (optional via Settings → Shop) ───────────────────────── */
.fpx-woo > .woocommerce-breadcrumb {
  max-width: 1660px;
  margin: 0 auto;
  padding: 14px 20px 0;
  font-family: "Inter", sans-serif;
  font-size: 0.8125rem;
  color: #6b7280;
}
.fpx-woo > .woocommerce-breadcrumb a {
  color: var(--color-primary-dark);
  text-decoration: none;
}
.fpx-woo > .woocommerce-breadcrumb a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ── Benefit / value proposition line ─────────────────────────────── */
.fpx-card-benefit {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: #6b7280;
  margin: 0 0 8px;
  min-height: calc(0.8125rem * 1.4 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Low stock urgency ─────────────────────────────────────────────── */
.fpx-card-urgency {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 10px;
}

/* ── Card quantity + add-to-cart row ──────────────────────────────── */
.fpx-card-atc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  transition: opacity 0.15s ease;
}
/* While the purchase-type popover is open, mute the underlying
   Add to Cart/quantity row so only one "Add to Cart" reads as active. */
.fpx-card-atc--dimmed {
  opacity: 0.4;
  pointer-events: none;
}
/* Override quantity-selector.js Tailwind classes with compact sizes for cards */
.fpx-card .fpx-card-qty.quantity {
  width: 88px !important;
  flex-shrink: 0;
}
.fpx-card .fpx-card-qty.quantity > button {
  width: 28px !important;
  flex-shrink: 0;
}
.fpx-card .fpx-card-qty.quantity input.qty {
  width: 32px !important;
}
/* Inside a popover's action row (alongside Add to Cart + Buy Now) there's less
   room to spare than the card's own row, so the stepper runs narrower. */
.fpx-card .fpx-popover-qty.quantity {
  width: 72px !important;
}
.fpx-card .fpx-popover-qty.quantity > button {
  width: 22px !important;
}
.fpx-card .fpx-popover-qty.quantity input.qty {
  width: 24px !important;
  font-size: 13px;
}
/* Button fills remaining space — higher specificity to beat width:100% rule */
.fpx-woo .fpx-card .fpx-card-atc .button,
.fpx-woo .fpx-card .fpx-card-atc a.button {
  width: auto;
  flex: 1;
  min-width: 0;
}

/* ── Purchase-choice popovers (shop grid): subscription plan + variation ── */
/*
 * Centered fixed-position modal on every screen size — not anchored to the
 * button that opened it. Anchored/absolute positioning meant the popover's
 * available room depended entirely on how much viewport space happened to
 * be above/below that specific button; on a laptop's shorter viewport that
 * was often very little, forcing the popover to scroll internally for even
 * modest content, and needing an above/below "flip" that could still overlap
 * the next row of cards. A centered modal always gets the same generous,
 * predictable amount of room regardless of where its card sits in the grid,
 * and sidesteps that whole class of positioning bugs.
 */
.fpx-sub-popover,
.fpx-var-popover {
  position: fixed;
  z-index: 250;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);
}
.fpx-sub-popover[hidden],
.fpx-var-popover[hidden] {
  display: none;
}
/* Always-on modal backdrop (previously mobile-only) — the popover is a true
   modal at every screen size now, so it should always dim/blur the page
   behind it rather than leaving the grid competing for attention underneath. */
.fpx-popover-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 249;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.fpx-popover-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}
.fpx-sub-popover__inner {
  position: relative;
  /* Brand-gradient strip along the top edge, painted as a background layer
     (not a ::before) so it stays pinned while the box scrolls internally,
     and the rounded corners clip it. */
  background:
    var(--brand-grad-pill, linear-gradient(100deg, #56ccf2 0%, #148d9f 62%)) top left / 100% 5px no-repeat,
    #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.16);
  padding: 20px 14px 14px;
  animation: fpx-sub-popover-in 0.15s ease-out;
  /* Safety net for a product with several variations/subscription plans —
     scroll internally rather than grow past a sane viewport fraction. With
     centered positioning there's now much more headroom than the old
     anchored layout allowed, so this rarely actually engages. */
  max-height: min(92vh, 720px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.fpx-sub-popover__inner::-webkit-scrollbar {
  width: 6px;
}
.fpx-sub-popover__inner::-webkit-scrollbar-track {
  background: transparent;
}
.fpx-sub-popover__inner::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 999px;
}
.fpx-sub-popover__inner::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}
@keyframes fpx-sub-popover-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fpx-sub-popover__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af !important;
  border-radius: 999px !important;
  z-index: 1;
}
.fpx-sub-popover__close:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}
/* ── Product identity header (top of every popover) ─────────────────── */
.fpx-popover-product {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 24px 12px 0;
  border-bottom: 1px solid #f1f5f9;
}
.fpx-popover-product__thumb {
  width: 64px !important;
  height: 64px !important;
  border-radius: 8px;
  object-fit: cover; /* product photos are often wide with empty sides: fill with the middle */
  flex-shrink: 0;
}
/* Phones: the popup covers the card, so this picture is the shopper's only
   look at the product. Bigger, and from the 300px card image so it stays sharp. */
@media (max-width: 639px) {
  .fpx-popover-product {
    gap: 14px;
  }
  .fpx-popover-product__thumb {
    width: 88px !important;
    height: 88px !important;
    border-radius: 10px;
    background: #f8fafc;
  }
  .fpx-popover-product .fpx-popover-product__tagline {
    -webkit-line-clamp: 3;
  }
}
.fpx-popover-product__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
/* The card's tagline (Settings → Shop → Product cards → "Show the card
   tagline in purchase popups"), so the shopper still sees what the product
   is for once the popup covers the card. */
.fpx-popover-product__tagline {
  font-size: 14px;
  line-height: 1.4;
  color: #4b5563;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fpx-popover-product__title {
  font-size: 15.5px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Variation picker (inside .fpx-var-popover, and the PDP's own
   variable-product form) ─────────────────────────────────────────────
   Matches the "Key Benefits" heading's weight/color treatment (same
   font-heading + gray-500) instead of the lighter, plainer gray-400 this
   used before, for visual consistency within the PDP's product-info box. */
.fpx-popover-eyebrow {
  margin: 0 0 12px;
  padding-right: 24px;
  font-family: "Glory", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
}
.fpx-var-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.fpx-var-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 2px solid #d1d5db !important;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: #4b5563;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.fpx-var-pill:hover {
  border-color: #9ca3af !important;
}
.fpx-var-pill.is-selected {
  border-color: var(--brand-deep) !important;
  background: var(--brand-grad-soft);
  color: var(--color-primary-dark);
  box-shadow: 0 0 0 1px var(--brand-deep);
}
.fpx-var-pill--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.fpx-var-plan-block.hidden {
  display: none;
}
.fpx-var-plain-price {
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.fpx-var-plain-price .price,
.fpx-var-plain-price .woocommerce-Price-amount {
  color: inherit !important;
  font-size: inherit;
  font-weight: inherit;
}
.fpx-var-outofstock {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #dc2626;
}
/* Tighten the reused single-product chooser markup for popover width */
.fpx-sub-popover .wcsatt-options-wrapper,
.fpx-var-popover .wcsatt-options-wrapper {
  margin: 0;
}
.fpx-sub-popover .wcsatt-options-wrapper p.text-\[11\.5px\],
.fpx-var-popover .wcsatt-options-wrapper p.text-\[11\.5px\] {
  padding-right: 24px;
}
/* Two-button row: a lighter "Add to Cart" (stays on the page) beside a bolder
   "Buy Now" (adds to cart, then jumps straight to checkout). */
.fpx-sub-popover__actions {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 10px;
}
/* Specificity note: needs to beat `.fpx-woo button` (class+element) above, so
   these are scoped with two classes rather than one. */
.fpx-woo .fpx-sub-popover__addcart,
.fpx-woo .fpx-sub-popover__buynow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding: 10px 8px !important;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  border-radius: 10px !important;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.fpx-woo .fpx-sub-popover__addcart {
  background: #fff !important;
  color: var(--color-primary-dark) !important;
  border: 2px solid var(--brand-deep) !important;
}
.fpx-woo .fpx-sub-popover__addcart:hover {
  background: var(--brand-grad-soft), #fff !important;
}
/* Brand gradient, same as the site's buttons (--brand-grad). */
.fpx-woo .fpx-sub-popover__buynow {
  background: var(--brand-grad) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(20, 141, 159, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.fpx-woo .fpx-sub-popover__buynow:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 6px 16px rgba(20, 141, 159, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.fpx-woo .fpx-sub-popover__buynow:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(20, 141, 159, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.fpx-sub-popover__confirm-icon {
  display: flex !important;
  opacity: 0.9;
  transition: transform 0.2s ease;
}
.fpx-woo .fpx-sub-popover__addcart:hover .fpx-sub-popover__confirm-icon,
.fpx-woo .fpx-sub-popover__buynow:hover .fpx-sub-popover__confirm-icon {
  transform: scale(1.08) rotate(-4deg);
}
.fpx-sub-popover__confirm-price {
  display: inline-flex;
  align-items: center;
  padding-left: 6px;
  margin-left: 1px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 700;
  opacity: 0.95;
}
.fpx-sub-popover__confirm-price:empty {
  display: none;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}
.fpx-woo .fpx-sub-popover__addcart--disabled,
.fpx-woo .fpx-sub-popover__buynow--disabled {
  background: #d1d5db !important;
  color: #6b7280 !important;
  border-color: #d1d5db !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
}

/* ── Popover Add/Buy Now: in-flight + success states ───────────────────
   Confirming a purchase used to close the popover instantly, before the
   add-to-cart request even resolved — no feedback either way, and no way to
   show a failure. Both buttons now spin while the request is in flight and
   flash a checkmark on success, matching the shop-grid card's own Add to
   Cart button treatment; see FPXPopover.confirmPurchase() in
   popover-coordinator.js. */
.fpx-sub-popover__addcart.is-loading,
.fpx-sub-popover__buynow.is-loading,
.fpx-sub-popover__addcart.is-success,
.fpx-sub-popover__buynow.is-success {
  position: relative;
  pointer-events: none;
}
.fpx-sub-popover__addcart.is-loading > *,
.fpx-sub-popover__buynow.is-loading > *,
.fpx-sub-popover__addcart.is-success > *,
.fpx-sub-popover__buynow.is-success > * {
  opacity: 0 !important;
}
.fpx-sub-popover__addcart.is-loading::after,
.fpx-sub-popover__buynow.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: fpx-spin 0.65s linear infinite;
}
.fpx-sub-popover__addcart.is-success::after,
.fpx-sub-popover__buynow.is-success::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/100% no-repeat;
  animation: fpx-success-pop 0.3s ease;
}
/* Dim (not hide) the *other* action button and the qty stepper while one
   request is in flight, so it's clear the whole popover is momentarily busy. */
.fpx-sub-popover__actions button:disabled,
.fpx-sub-popover__actions input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Inline error (out of stock, etc.) — shown in place of a redirect ── */
.fpx-sub-popover__error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.fpx-sub-popover__error[hidden] {
  display: none;
}
.fpx-sub-popover__error::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: #dc2626;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* ── Savings percentage inside subscribe pill ──────────────────────── */
.fpx-price-savings {
  font-weight: 700;
  color: #fff;
  background: #059669;
  border-radius: 4px;
  padding: 0 4px;
}

/* ── AJAX add-to-cart animations ───────────────────────────────────── */

/* Spin keyframe (also used by prefers-reduced-motion guard above) */
@keyframes fpx-spin {
  to { transform: rotate(360deg); }
}

@keyframes fpx-success-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Loading state — hide text, show centered spinner */
.fpx-woo .fpx-card .button.loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
  transition: color 0s, background-color 0.2s ease;
}

.fpx-woo .fpx-card .button.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fpx-spin 0.65s linear infinite;
}

/* Hide WooCommerce's auto-injected "View cart" link — we'll build our own cart widget */
.fpx-woo .fpx-card a.added_to_cart.wc-forward {
  display: none;
}

/* Added/success state — green + pop */
.fpx-woo .fpx-card .button.added {
  background-color: #c2dfed !important;
  background-image: none !important; /* the gradient would sit on top */
  color: #000 !important;
  pointer-events: none;
  animation: fpx-success-pop 0.35s ease forwards;
}

/* ── Product card: WooCommerce Add to Cart button ──────────────────── */
.fpx-woo .fpx-card .button,
.fpx-woo .fpx-card a.button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.65rem 1rem;
  background-color: var(--brand-deep);
  background-image: var(--brand-grad);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background-color 0.2s ease, filter 0.2s ease;
  font-family: "Inter", sans-serif;
  border: none;
  cursor: pointer;
  line-height: 1.4;
}

.fpx-woo .fpx-card .button:hover,
.fpx-woo .fpx-card a.button:hover {
  filter: brightness(1.06);
  color: #fff !important;
}

/* ── Star rating (real WooCommerce review data) ──────────────────────── */
.fpx-card-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px;
}

.fpx-card-rating__stars {
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: #f59e0b;
  line-height: 1;
}

.fpx-card-rating__value {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text);
}

.fpx-card-rating__count {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}

/* PDP rating widget links to the Reviews tab — same markup as the card's,
   wrapped in an <a> instead of a <div> (see fpx_star_rating_html()). */
.fpx-card-rating--link {
  text-decoration: none;
  cursor: pointer;
}
.fpx-card-rating--link:hover .fpx-card-rating__count {
  color: var(--color-primary-dark);
}

/* ── Respect reduced-motion preference ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .header-inner,
  .site-logo,
  [style*="fpx-fade-up"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Single product: pill tab navigation ──────────────────────────── */
/* !important: WC core's .woocommerce-tabs ul.tabs rule (0,2,1) also beats a
   bare .fpx-tab-list (0,1,0) — it sets padding: 0 0 0 1em (asymmetric, left
   only) and its own ::before draws a full-width border-bottom "underline"
   across the whole tab bar (see below), neither of which this design wants. */
/* display:flex (not inline-flex) + width:fit-content capped at 100% so
   this stays a compact pill group when everything fits (not a full-width
   bar), but actually has a bounded width to wrap within once it doesn't —
   inline-flex shrinks to fit its content with no upper bound and just
   keeps growing sideways instead of wrapping, which is what silently
   pushed "Reviews" off the right edge on narrow screens before this. */
/* No shared track background/border here — each pill carries its own (see
   .fpx-tab-list li a below). A single background sized to the widest row
   looked wrong once tabs wrap onto a second line (a big gray rectangle
   with mostly empty space next to the shorter row's lone pill). */
.fpx-tab-list {
  display: flex !important;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 6px;
  padding: 0 !important;
  list-style: none;
  margin: 0 !important;
}
.fpx-tab-list::before,
.fpx-tab-list::after {
  content: none !important;
  display: none !important;
}

/* WooCommerce core's own woocommerce.css still styles ul.tabs li with a
   decorative "folder tab" look — border, background, negative margin, and
   ::before/::after pseudo-element corner notches (box-shadow tricks to fake
   a rounded top-corner cutout). Its selector (.woocommerce-tabs ul.tabs li)
   is more specific than a bare .fpx-tab-list li, so those notches and the
   negative margin were bleeding through underneath/around our pills. Reset
   every one of those properties explicitly rather than fighting it property
   by property as bugs turn up. */
.fpx-tab-list li {
  display: inline-flex !important;
  flex-shrink: 0;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.fpx-tab-list li::before,
.fpx-tab-list li::after {
  content: none !important;
  display: none !important;
}

/* !important throughout: WC core's own woocommerce.css rule for these same
   elements (.woocommerce-tabs ul.tabs li a) has higher raw specificity
   (0,2,3) than a bare .fpx-tab-list li a (0,1,2) — its padding/display was
   winning outright, collapsing the inactive tabs down to unpadded inline
   text with no gap between them. */
/* Each pill carries its own resting-state chip background/border, rather
   than one shared track background behind the whole row — correct at any
   wrap state, not just a single unbroken line. */
.fpx-tab-list li a {
  display: block !important;
  padding: 0.625rem 1.375rem !important;
  border-radius: 999px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e5e7eb !important;
  text-decoration: none !important;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.fpx-tab-list li.active {
  background: none !important;
}
.fpx-tab-list li.active > a {
  background: var(--brand-grad-pill) !important;
  border-color: var(--brand-deep) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(20, 141, 159, 0.25) !important;
}

.fpx-tab-list li:not(.active) > a:hover {
  color: #1a1a1a;
  background: #e5e7eb !important;
}


/* ════════════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE
   Only CSS that targets WooCommerce-generated HTML (can't use Tailwind).
   All custom markup uses Tailwind utilities directly in templates.
   ════════════════════════════════════════════════════════════════════ */

/* ── Override WooCommerce legacy float layout ─────────────────────── */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  float: none !important;
  width: 100% !important;
  clear: none !important;
}
/* Same legacy layout's div.summary{margin-bottom:2em} — leftover space
   meant to separate the old floated summary column from whatever followed
   it below. Our own product-info box already controls its own spacing
   (p-6), so this just added an extra ~32px of dead space beneath the
   Secure Checkout badge. */
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  margin-bottom: 0 !important;
}

/* ── Page background: match Shop's white, scoped to the PDP only ────
   body{background:#f9fafb} is sitewide (Cart/Checkout/My Account use it
   too) — this override is deliberately scoped to body.single-product so
   it doesn't change those other .fpx-woo pages. */
body.single-product {
  background-color: #ffffff;
}

/* ── Content width: PDP reads better narrower than the sitewide 1660px
   .fpx-container. Scoped to .fpx-pdp-container specifically (see
   woocommerce/single-product.php) rather than body.single-product
   .fpx-container — the header and footer also use .fpx-container and
   render on every page including this one, so scoping by body class alone
   would have narrowed them too. */
.fpx-pdp-container {
  max-width: 1400px;
}

/* ── Product tab prose: cap the measure ───────────────────────────────
   The description panel inherits the full 1400px `.fpx-pdp-container`, so
   long-form copy ran to roughly 110 characters a line on desktop — well past
   the 65–75 that reads comfortably, and the one place on the PDP that felt
   unconsidered next to the tightly-set summary column beside it.

   Applied to text-level direct children only: an image (the Supplement Facts
   panel), a table, or any block a shop owner drops in that genuinely needs
   room keeps the full width. `ch` rather than px so the measure tracks the
   font, and the cap simply doesn't bind at narrow widths. */
.woocommerce-Tabs-panel > p,
.woocommerce-Tabs-panel > ul,
.woocommerce-Tabs-panel > ol,
.woocommerce-Tabs-panel > blockquote,
.woocommerce-Tabs-panel > h2,
.woocommerce-Tabs-panel > h3,
.woocommerce-Tabs-panel > h4 {
  max-width: 72ch;
}

/* ── Price: WC generates .fpx-price-main > .woocommerce-Price-amount ─ */
.fpx-pdp-price .fpx-price-main .woocommerce-Price-amount,
.fpx-pdp-price > .woocommerce-Price-amount {
  font-family: "Glory", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--brand-deep);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ── WC injects .stock inside the ATC form — hide it ─────────────── */
.fpx-pdp-form .stock,
.fpx-pdp-form p.stock { display: none !important; }

/* ── WC injects a.added_to_cart after AJAX — hide it ─────────────── */
.fpx-pdp-atc-form a.added_to_cart { display: none !important; }

/* ── Qty stepper height — WC renders this input ──────────────────── */
.fpx-pdp-atc-form .quantity input.qty {
  height: 56px !important;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* ── ATC button: WC's .single_add_to_cart_button overrides Tailwind — force our styles.
   Pre-existing bug found while implementing the redesign: .fpx-woo button (the
   button reset near the top of this file) is a class+element
   selector — (0,1,1) — which beats a bare single-class selector like
   .fpx-pdp-atc-btn (0,1,0) even with matching !important, exactly the gotcha
   (see the button reset near the top of this file). That reset was
   silently winning on padding/border-radius/box-shadow (properties this rule
   didn't even declare, relying on Tailwind's rounded-[10px]/px-7/shadow-[...]
   utilities instead — themselves single-class, so also losing) and even on
   background-color/color/border despite the !important here, because the
   button reset has higher specificity outright. Fixed the same
   way the shop-grid card buttons already do it (.fpx-woo .fpx-card .button):
   prefix with .fpx-woo for (0,2,0) specificity, and declare every property
   the reset would otherwise strip. */
.fpx-woo .fpx-pdp-atc-btn {
  padding: 0 1.75rem !important;
  border-radius: 10px !important;
  background-color: var(--brand-deep) !important;
  background-image: var(--brand-grad) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(20, 141, 159, 0.3) !important;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.fpx-woo .fpx-pdp-atc-btn:hover {
  filter: brightness(1.06);
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(20, 141, 159, 0.4) !important;
}

/* ── ATC button: loading + added states use ::after / !important ──── */
.fpx-pdp-atc-btn.loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}

.fpx-pdp-atc-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fpx-spin 0.65s linear infinite;
}

/* ── Variable-product pill picker (woocommerce/single-product/add-to-cart/
   variable.php) — the .fpx-var-pill(s)/.fpx-popover-eyebrow classes are the
   same ones the shop-grid variation popover uses (styled above); only the
   parts unique to the PDP context need their own rules here. ────────────── */

/* The bare price <span> is always hidden — the big .fpx-pdp-price at the
   top of the summary updates live to the selected variation's price
   instead (see the 'found_variation'/'reset_data' handlers in
   assets/js/variation-picker.js), so this line would just repeat it. Only
   the <span>, not the whole .woocommerce-variation-price container, is
   hidden: WCSATT appends its plan-card markup (.wcsatt-options-wrapper) as
   a *sibling inside that same container* (see woocommerce_available_variation
   filter), so hiding the container would hide the plan cards too. */
.woocommerce-variation-price > .price {
  display: none;
}

.woocommerce-variation-description {
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 10px;
}

.woocommerce-variation-availability {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}
.woocommerce-variation-availability .stock.in-stock { color: var(--color-success, #16a34a); }
.woocommerce-variation-availability .stock.out-of-stock { color: #dc2626; }

.fpx-var-reset.reset_variations {
  display: inline-block;
  margin: 2px 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #9ca3af !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
.fpx-var-reset.reset_variations:hover {
  color: var(--color-primary-dark) !important;
}

.fpx-pdp-atc-btn.added { background: var(--color-primary-dark) !important; background-image: none !important; }

/* ── PDP AJAX add-to-cart: inline validation error ─────────────────────
   Shown by assets/js/pdp-add-to-cart.js when the AJAX-ified single-product
   form submission comes back with a WooCommerce validation error (e.g. no
   variation selected, out of stock) — created on demand right after
   .fpx-pdp-atc-form, since the page never navigates to show WC's normal
   top-of-page notice. */
.fpx-pdp-atc-error {
  display: none;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #dc2626;
}
.fpx-pdp-atc-error.is-visible { display: block; }

/* ── WCSATT "Add to an existing subscription?" checkbox ───────────────
   Plugin: woocommerce-all-products-for-subscriptions. Fires on
   woocommerce_after_add_to_cart_button (priority 1000) — moved outside the
   qty+button flex row in simple.php/variation-add-to-cart-button.php so it
   gets its own full-width row instead of squeezing in as a third flex
   child. Only ever renders for logged-in customers who already hold a
   matching subscription, so it was missed until now. Had zero theme CSS
   anywhere before this — pure browser-default checkbox/label. */
.wcsatt-add-to-subscription-wrapper {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.wcsatt-add-to-subscription-action-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: #4b5563;
}
.wcsatt-add-to-subscription-action-input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-deep);
  cursor: pointer;
  flex-shrink: 0;
}
.wcsatt-add-to-subscription-action-label:hover .wcsatt-add-to-subscription-action {
  color: var(--color-primary-dark);
}

/* Expands below the checkbox once checked — WCSATT's own JS toggles the
   inline display:none. It's a full "My Subscriptions" style order table
   (from the same reuse in Cart/Checkout/My Account, unstyled by this theme
   there too), so this only wraps/contains it rather than rebuilding it.
   The empty state ("No matching subscriptions found.") is plain text with
   no wrapping element at all in the plugin's own template — styled via
   inheritance from this container instead, since there's no tag to target. */
.wcsatt-add-to-subscription-options {
  margin-top: 10px;
  margin-left: 24px;
  font-size: 13px;
  color: #9ca3af;
}
.wcsatt-add-to-subscription-options .woocommerce_account_subscriptions {
  overflow-x: auto;
}
.wcsatt-add-to-subscription-options table.shop_table {
  width: 100%;
  font-size: 13px;
}
.wcsatt-add-to-subscription-button.button {
  background: var(--brand-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.wcsatt-add-to-subscription-button.button:hover {
  filter: brightness(1.06);
}

/* ── Sticky ATC bar — mobile only (needs media query + transform) ─── */
.fpx-pdp-sticky-atc { display: none; }

@media (max-width: 767px) {
  .fpx-pdp-sticky-atc {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Below every overlay layer (shop popovers: 250, floating cart: 300,
       cart drawer: 399/400) — this is a persistent page element, not a
       modal, so it must never paint over them. It was sitting at 999,
       above all of them, which let it show through on top of the cart
       drawer's footer (Subtotal/Checkout) while the drawer was open. */
    z-index: 200;
    background: #fff;
    border-top: 2.5px solid var(--brand-deep);
    border-image: linear-gradient(90deg, var(--brand-light), var(--brand-deep)) 1;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.10);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .fpx-pdp-sticky-atc.is-visible { transform: translateY(0); }

  /* Icon circle — mirrors the card icon style */
  .fpx-pdp-sticky-atc__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(86, 204, 242, 0.2);
    color: var(--brand-deep);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Plan name + price block */
  .fpx-pdp-sticky-atc__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .fpx-pdp-sticky-atc__plan {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  .fpx-pdp-sticky-atc__price {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-deep);
    line-height: 1.2;
  }

  /* Button — .fpx-woo prefix needed for the same reason as .fpx-pdp-atc-btn
     above (specificity fight with .fpx-woo button); this one had no
     !important at all, so the reset was winning outright regardless of
     specificity on every property, not just the uncovered ones. */
  .fpx-woo .fpx-pdp-sticky-atc__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 1.25rem !important;
    background: var(--brand-grad) !important;
    color: #fff !important;
    font-size: 0.9375rem;
    font-weight: 700;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(20, 141, 159, 0.35) !important;
    transition: background-color 0.2s, box-shadow 0.2s;
  }

  .fpx-woo .fpx-pdp-sticky-atc__btn:hover,
  .fpx-woo .fpx-pdp-sticky-atc__btn:active {
    filter: brightness(0.95);
    box-shadow: 0 4px 16px rgba(20, 141, 159, 0.45) !important;
  }
}

/* ── Single product: gallery main image object-fit fix ────────────── */
.main-image-wrapper .woocommerce-product-gallery__image img,
.main-image-wrapper .wp-post-image {
  max-height: 85%;
  max-width: 85%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  margin: auto;
}

/* ── Gallery prev/next arrows — brand icon-circle treatment ──────────
   Light-teal circle + teal icon at rest, solid teal + white icon on
   hover, matching the plan-card/key-benefit icon circles elsewhere on
   the PDP. Full property declarations + !important + .fpx-woo prefix,
   same fix pattern as .fpx-pdp-atc-btn: these are <button> elements, and
   .fpx-woo button (the button reset near the top of this
   file) is a class+element selector that beats a bare single-class
   Tailwind utility even with matching !important. */
.fpx-woo .fpx-gallery-prev,
.fpx-woo .fpx-gallery-next {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 9999px !important;
  background-color: rgba(86, 204, 242, 0.18) !important;
  color: var(--brand-deep) !important;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.fpx-woo .fpx-gallery-prev:hover,
.fpx-woo .fpx-gallery-next:hover {
  background-color: var(--brand-deep) !important;
  background-image: var(--brand-grad) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(20, 141, 159, 0.35) !important;
}

@media (max-width: 640px) {
  .woocommerce-page section[style*="--gradient-hero"] {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   WooCommerce notices (success/error/info) — printed by WC core's own
   unstyled default templates (woocommerce/templates/notices/*.php)
   wherever `wc_print_notices()` runs: cart updates, coupon apply/remove,
   checkout errors, my-account messages. Sitewide, not cart-specific,
   since none of it had ever been styled before. */
.woocommerce-notices-wrapper {
  margin-bottom: 20px;
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  position: relative;
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  list-style: none !important;
  margin: 0 0 12px !important;
  padding: 14px 18px 14px 40px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5;
  box-shadow: none !important;
  /* WC focuses these role="alert" elements for screen readers on page
     load, which paints the browser's default black focus ring — the
     colored border already marks the notice visually, so drop it rather
     than fighting it with a matching-color one. */
  outline: none !important;
}
.woocommerce-message:last-child,
.woocommerce-error:last-child,
.woocommerce-info:last-child {
  margin-bottom: 0;
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.woocommerce-message {
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}
.woocommerce-message::before {
  background-color: var(--color-success, #16a34a);
}
.woocommerce-error {
  background-color: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
  flex-direction: column;
  gap: 4px;
}
.woocommerce-error::before {
  background-color: #dc2626;
}
.woocommerce-error li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.woocommerce-info {
  background: var(--brand-grad-soft), #fff !important;
  border: 1px solid rgba(20, 141, 159, 0.25) !important;
  color: var(--color-primary-dark) !important;
}
.woocommerce-info::before {
  background-color: var(--brand-deep);
}
/* Links inside notices take the notice colour. */
body .woocommerce-message a,
body .woocommerce-error a,
body .woocommerce-info a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* The show-password eye is a <button>: strip the browser's default button
   chrome (checkout's login form has its own scoped rule too). */
body:is(.woocommerce, .woocommerce-page) #fpx-content button.show-password-input {
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent none;
  box-shadow: none;
  color: #9ca3af;
}
body:is(.woocommerce, .woocommerce-page) #fpx-content button.show-password-input:hover {
  background: var(--brand-grad-soft), #fff;
  color: var(--color-primary-dark);
}

/* ── Checkout: notices + "Returning customer?" login form ─────────────────
   WooCommerce prints these (woocommerce_before_checkout_form) as siblings
   of .fpx-checkout-container, not inside it, so they missed the container's
   20px side inset and ran wider than the Billing/Summary cards. The login
   form had never been styled at all: WC's floated form-row-first/-last
   pushed Username and Password to opposite edges. */
body.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce > .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce > form.woocommerce-form-login {
  margin-left: 20px;
  margin-right: 20px;
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 16px;
  margin-top: 0;
  margin-bottom: 20px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(17, 24, 39, 0.05);
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login > p:not(.form-row),
body.woocommerce-checkout #fpx-content form.woocommerce-form-login > .clear {
  flex: 1 1 100%;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted, #6b7280);
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login > .clear {
  margin: 0;
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login .form-row-first,
body.woocommerce-checkout #fpx-content form.woocommerce-form-login .form-row-last {
  float: none;
  flex: 1 1 calc(50% - 8px);
  min-width: 200px;
  width: auto;
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login .password-input {
  position: relative;
  display: block;
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login button.show-password-input {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent none;
  color: #9ca3af;
  box-shadow: none;
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login button.show-password-input:hover {
  background: var(--brand-grad-soft), #fff;
  color: var(--color-primary-dark);
}
/* WC's clearfix `::before`/`::after` (content:" "; display:table) turn into
   invisible flex items once these are flex containers — under
   space-between they pushed "Remember me" to the middle of its row. */
body.woocommerce-checkout #fpx-content form.woocommerce-form-login::before,
body.woocommerce-checkout #fpx-content form.woocommerce-form-login::after,
body.woocommerce-checkout #fpx-content form.woocommerce-form-login .form-row::before,
body.woocommerce-checkout #fpx-content form.woocommerce-form-login .form-row::after {
  content: none;
  display: none;
}
/* The row holding "Remember me" + Login (WC's markup, no class of its own). */
body.woocommerce-checkout #fpx-content form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 4px 0 0 !important;
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login label.woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #374151;
  cursor: pointer;
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login button.woocommerce-form-login__submit {
  order: 2;
  margin: 0;
  padding: 12px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-grad);
  box-shadow: 0 10px 22px rgba(20, 141, 159, 0.25);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login button.woocommerce-form-login__submit:hover {
  box-shadow: 0 12px 28px rgba(20, 141, 159, 0.38);
  transform: translateY(-1px);
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login .lost_password {
  flex: 1 1 100%;
  margin: 14px 0 0;
  font-size: 14px;
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login .lost_password a {
  font-weight: 600;
  color: var(--color-primary-dark);
  text-decoration: none;
}
body.woocommerce-checkout #fpx-content form.woocommerce-form-login .lost_password a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* "View cart" inside the added-to-cart notice: WC's grey default button. */
body #fpx-content .woocommerce-message a.button.wc-forward {
  order: 2;
  margin-left: auto;
  padding: 5px 14px;
  border: 1px solid #86efac;
  border-radius: 999px;
  background: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #166534;
  text-decoration: none;
  white-space: nowrap;
}
body #fpx-content .woocommerce-message a.button.wc-forward:hover {
  background: #dcfce7;
  color: #14532d;
}

@media (max-width: 640px) {
  body.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper,
  body.woocommerce-checkout .woocommerce > .woocommerce-form-login-toggle,
  body.woocommerce-checkout .woocommerce > form.woocommerce-form-login {
    margin-left: 15px;
    margin-right: 15px;
  }
  body.woocommerce-checkout #fpx-content form.woocommerce-form-login {
    padding: 18px;
  }
  body.woocommerce-checkout #fpx-content form.woocommerce-form-login .form-row-first,
  body.woocommerce-checkout #fpx-content form.woocommerce-form-login .form-row-last {
    flex-basis: 100%;
    min-width: 0;
  }
  body.woocommerce-checkout #fpx-content form.woocommerce-form-login button.woocommerce-form-login__submit {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Cart page (woocommerce/cart/*.php) — matches the PDP's card language.
   ══════════════════════════════════════════════════════════════════════ */

/* Every price in the cart and order summary uses tabular figures, so a
   column of $119.95 / $1,029.65 / $51.80 lines up on its decimal point
   instead of drifting with each digit's own default width — a small detail
   that's the difference between a receipt and a plain price tag. */
.woocommerce .cart-items-list,
.woocommerce .cart_totals {
  font-variant-numeric: tabular-nums;
}

/* WooCommerce Subscriptions wraps its own "every N months" fragment in
   `.subscription-details` wherever a recurring price is printed (cart rows
   and the order summary alike) — bare text otherwise, easy to misread as
   part of the price itself rather than the commitment attached to it. A
   small pill separates the two at a glance. */
.woocommerce .subscription-details {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: rgba(20, 141, 159, 0.08);
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

/* Product thumbnails vary a lot in native aspect ratio (single-bottle shots
   vs. wide two-bottle combo shots) — without an explicit fit rule some
   filled the fixed 96px box edge-to-edge and looked cropped/stretched
   inconsistently row to row. `contain` + a little padding keeps the whole
   product visible and uniformly inset regardless of its source image. */
.woocommerce .cart-items-list .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  /* Defensive fallback for a genuinely missing image file (a 404, not a
     styling issue — e.g. a product/variation whose media was deleted from
     uploads/ but is still referenced): without this, the browser renders
     the img's alt text in its place, inheriting the surrounding <a>'s blue
     underlined link style and overflowing out of the 96px box instead of
     being clipped by it. Push it off-screen so a broken image just shows
     the box's own neutral background, same as a normal missing-photo state. */
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

/* ── Remove-item button. WC core's own `.woocommerce a.remove` rule
   (assets/css/woocommerce.scss) sets color with !important itself —
   "Required for default theme compatibility", i.e. it's deliberately
   built to beat a theme override — and its `a.remove` beats a bare
   `.fpx-cart-remove-btn` class on specificity even when both carry
   !important. Matching its own `a.remove` shape (plus one more class for
   safety) is what wins here, not !important alone.
   A trash icon reads as "delete this line" at a glance; the plain × read
   as a generic close/dismiss action, closer to canceling than removing. */
.woocommerce a.remove.fpx-cart-remove-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 1 !important;
  font-size: 0 !important;
  color: #9ca3af !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.woocommerce a.remove.fpx-cart-remove-btn:hover {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}
.woocommerce a.remove.fpx-cart-remove-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Quantity stepper, cart rows only. assets/js/quantity-selector.js
   builds this control sitewide (shop grid, PDP) from plain, flat Tailwind
   utilities — functional but visually inert here: a thin grey rectangle
   with no depth or brand presence next to a now much bolder price/title.
   Scoped to .cart-items-list rather than changed at the source, so the
   shop grid and PDP steppers (already fine there) are untouched. */
/* Was a filled grey pill sitting directly under the title — same visual
   weight as the price, so it was the first thing the eye landed on instead
   of the product name. A plain hairline outline (no fill) reads as a quiet
   utility control instead of competing with the actual content of the row. */
.woocommerce .cart-items-list .product-quantity {
  flex-shrink: 0;
}
.woocommerce .cart-items-list .product-quantity .quantity {
  width: auto !important;
  border-radius: 999px !important;
  border-color: #e5e7eb !important;
  background-color: transparent !important;
  overflow: hidden;
  flex-shrink: 0;
}
/* Flexbox shrinks its children to fit available space by default even when
   they carry an explicit width — a fixed 32px doesn't actually protect a
   button from being squeezed thinner if its flex container ever ends up
   tight on room (a transient layout state during a cart-fragment swap, a
   very narrow viewport, anything). `flex-shrink: 0` is what actually
   guarantees the control never visually collapses; the width alone can't. */
.woocommerce .cart-items-list .product-quantity .quantity button,
.woocommerce .cart-items-list .product-quantity .quantity input.qty {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0;
}
/* The stepper's +/- <button>s never carried their own background/border
   reset — sitewide that's handled by the global `.fpx-woo button` rule
   near the top of this file, but
   the classic cart page's content isn't wrapped in .fpx-woo — WC's own
   shortcode wraps it in plain .woocommerce instead (see the cart-empty.php
   and proceed-to-checkout-button.php notes elsewhere in this file for the
   same distinction) — so that reset never reached these buttons here,
   leaving the browser's default button chrome showing through. */
.woocommerce .cart-items-list .product-quantity .quantity button {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #9ca3af !important;
  font-weight: 600;
}
.woocommerce .cart-items-list .product-quantity .quantity button:hover {
  background-color: rgba(20, 141, 159, 0.1) !important;
  color: var(--color-primary-dark) !important;
}
.woocommerce .cart-items-list .product-quantity .quantity button:active {
  background-color: rgba(20, 141, 159, 0.18) !important;
}
.woocommerce .cart-items-list .product-quantity .quantity input.qty {
  background-color: transparent !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #1a1a1a !important;
}

/* Before quantity-selector.js adds the − / + buttons (the first second or
   two on a slow load), the wrapper was an unsized rounded box around a bare
   32px input: it painted as a small empty circle. Give it the finished
   stepper's footprint up front (3 × 32px), with the number centred, so
   the buttons simply appear either side of it. */
.woocommerce .cart-items-list .product-quantity .quantity:not(.fpx-qty-initialized) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px !important;
  height: 32px;
}
.woocommerce .cart-items-list .product-quantity .quantity:not(.fpx-qty-initialized) input.qty {
  border: 0 !important;
  padding: 0 !important;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.woocommerce .cart-items-list .product-quantity .quantity:not(.fpx-qty-initialized) input.qty::-webkit-outer-spin-button,
.woocommerce .cart-items-list .product-quantity .quantity:not(.fpx-qty-initialized) input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Thumbnails sat perfectly flat against their own bg-bg fill — a hairline
   inset shadow gives the product photo a touch of depth without adding a
   second visible border color to track. */
.woocommerce .cart-items-list .product-thumbnail {
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.03);
}

/* A subscribed line item is a different kind of commitment than a one-time
   one — flagging it with a quiet left rule (rather than relying on the
   price-side badge alone catching the eye) makes that distinction scannable
   down the whole list at a glance, not just line by line. */
.woocommerce .fpx-cart-item:has(.subscription-details) {
  box-shadow: inset 3px 0 0 var(--brand-deep);
}

/* Any row where subscribing is even an option gets a quiet teal ring on its
   photo — a second, lighter echo of the same signal, so a subscribable row
   reads as different from a plain one-time row even before you notice the
   price picker underneath it. Rows with no picker at all keep the plain
   neutral border they've always had. */
.woocommerce .fpx-cart-item:has(.wcsatt-options) .product-thumbnail {
  border-color: var(--brand-deep) !important;
  border-width: 1.5px !important;
}

/* The one-time/subscribe choice is a decision, not two loose buttons — a
   quiet tray around the pair contains them as one control, the way a
   segmented switch would, instead of leaving them floating in the row. */
.woocommerce .wcsatt-options {
  padding: 5px !important;
  background-color: var(--color-bg, #f9fafb);
  border-radius: 999px;
}
.woocommerce .wcsatt-options li label {
  border-color: transparent !important;
}
.woocommerce .wcsatt-options li label:has(input:checked) {
  background-color: #fff !important;
  border-color: var(--color-border, #e5e7eb) !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

/* Row dividers used to run full-bleed under the product photo (a plain
   `divide-y` on the list) — starting them after the photo, in line with
   the text column, is a small thing but it's what separates a considered
   list from a spreadsheet row. */
.woocommerce .cart-items-list > li:not(:last-child) {
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
@media (min-width: 640px) {
  .woocommerce .cart-items-list > li:not(:last-child) {
    border-bottom: none;
  }
  .woocommerce .cart-items-list > li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 116px;
    right: 20px;
    bottom: 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
  }
}

/* The classic cart's "Update cart" submit button is deliberately marked
   `.hidden` in cart-items.php — assets/js/cart.js auto-submits it 500ms
   after a quantity change instead, so shoppers never need it — but WC's
   own `.button` rule (`display: inline-block !important`) was beating
   Tailwind's single-class `.hidden` utility and showing it anyway. */
.woocommerce button.hidden {
  display: none !important;
}

/* The cart coupon is no longer a pill-shaped input + Apply button in its
   own card below the items — it is the same quiet `.fpx-coupon` disclosure
   the checkout uses, inside the Order Summary (see the CHECKOUT PAGE section
   for those rules, which both pages share). The former .fpx-coupon-apply-btn
   / .fpx-coupon-input rules were removed with that markup. */

/* PPCP's own smart-button widget (a cross-origin iframe we can't restyle)
   was rendering flush under the checkout button with no separating space,
   reading as if it belonged to the same control. Giving its wrapper room
   and a top divider marks it as a distinct, secondary payment path. */
.woocommerce .ppc-button-wrapper {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

/* ── Empty cart: "Browse Products" ─────────────────────────────────────
   WooCommerce's `.woocommerce a.button` (0,2,1) outranked the Tailwind
   bg-primary class on this link and painted it WooCommerce grey. */
.woocommerce a.button.fpx-empty-cart-btn {
  background-color: var(--brand-deep);
  background-image: var(--brand-grad);
  color: #fff !important;
  border: none;
  box-shadow: 0 6px 18px rgba(20, 141, 159, 0.25);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce a.button.fpx-empty-cart-btn:hover {
  background-color: var(--brand-deep);
  background-image: var(--brand-grad);
  filter: brightness(1.06);
  color: #fff !important;
}

/* ── Proceed to Checkout button (woocommerce/cart/proceed-to-checkout-
   button.php) — same fix pattern again: WC's default `<a class="button">`
   picked up a global default button colour (purple) with nothing here to
   beat it. */
.woocommerce .fpx-checkout-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  padding: 16px !important;
  background: var(--brand-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(20, 141, 159, 0.3);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.woocommerce .fpx-checkout-btn:hover {
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(20, 141, 159, 0.4);
  transform: translateY(-1px);
}

/* ── Order Summary rows (template-parts/cart/cart-totals.php's own rows,
   plus rows WooCommerce Subscriptions appends after them for recurring
   totals — those come from the plugin's own unstyled default markup, not
   a theme template, so they need generic `.cart_totals table` selectors
   rather than template edits). Every row becomes a flex row that WRAPS
   instead of squeezing a long value (e.g. the shipping-estimate sentence)
   into a narrow, tall column — that was the cause of the cramped look. */
.woocommerce .cart_totals table.shop_table tr {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  padding: 7px 0;
  border-bottom: none;
}
.woocommerce .cart_totals table.shop_table tr th {
  flex: 0 1 auto;
  font-weight: 600;
  color: #1a1a1a;
  text-align: left;
  font-size: 13.5px;
}
.woocommerce .cart_totals table.shop_table tr td {
  flex: 1 1 160px;
  min-width: 120px;
  text-align: right;
  font-size: 13.5px;
  color: #1a1a1a;
}
.woocommerce .cart_totals table.shop_table tr.order-total {
  border-top: 1px solid var(--color-border, #e5e7eb);
  border-bottom: none;
  margin-top: 4px;
  padding-top: 12px;
}
.woocommerce .cart_totals table.shop_table tr.order-total th {
  font-size: 1.0625rem;
}
.woocommerce .cart_totals table.shop_table tr.order-total td {
  font-size: 1.0625rem;
  color: var(--color-primary-dark);
}
/* The recurring total shares .order-total for its top divider and color
   accent, but it's the SECOND total on the page — matching the main Total's
   full size made it compete for attention instead of reading as the
   follow-up figure it is. */
.woocommerce .cart_totals table.shop_table tr.order-total.recurring-total th {
  font-size: 0.9375rem;
}
.woocommerce .cart_totals table.shop_table tr.order-total.recurring-total td {
  font-size: 1rem;
}

/* "Recurring totals" is a bare section-heading row (a lone <th colspan="2">,
   no value) that WooCommerce Subscriptions inserts before its own repeat of
   Subtotal/Shipping/Total for the recurring charge — styled like every
   other data row it read as just another bordered line with nothing next
   to it. Treat it as a heading instead: small caps label, breathing room
   above it instead of a border, no border below. */
.woocommerce .cart_totals table.shop_table tr.recurring-totals {
  border: none;
  padding: 20px 0 4px;
}
.woocommerce .cart_totals table.shop_table tr.recurring-totals th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
}

/* ── WCSATT per-item "one time / every N months" scheme switcher (cart
   rows only — woocommerce-all-products-for-subscriptions' own default
   templates/cart/cart-item-subscription-options.php markup, unstyled). */
.woocommerce .wcsatt-options {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  /* `fit-content`, not the default stretch: this list is painted as a
     segmented-control track (grey fill + pill radius, see the rule further
     down) and as a block-level <ul> it filled the whole info column, leaving
     the track running several hundred px past the last option — very visible
     once the picker became visible on desktop. */
  width: fit-content;
  max-width: 100%;
}
.woocommerce .wcsatt-options li {
  max-width: 100%;
}
.woocommerce .wcsatt-options li label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 999px !important;
  background-color: transparent !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  cursor: pointer;
  margin: 0 !important;
  max-width: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.woocommerce .wcsatt-options li label:has(input:checked) {
  border-color: var(--brand-deep) !important;
  background-color: rgba(20, 141, 159, 0.06) !important;
  color: var(--color-primary-dark) !important;
}
/* `accent-color` still left the dot rendering as the browser/OS's own
   native blue radio glyph rather than picking up teal — support for
   theming the *filled* state varies enough across engines that it isn't
   reliable here. Drawing the circle ourselves with `appearance: none` and
   a plain border/background instead removes that dependency entirely, the
   same custom-radio pattern the PDP's plan cards already use. */
.woocommerce .wcsatt-options li input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.woocommerce .wcsatt-options li input[type="radio"]:checked {
  border-color: var(--brand-deep) !important;
  background-color: var(--brand-deep) !important;
  box-shadow: inset 0 0 0 3px #fff;
}

/* ── Order Summary card — same object as the Checkout page's rail ─────────
   (see .fpx-checkout-summary in the CHECKOUT PAGE section below). Cart and
   Checkout are consecutive steps of one funnel, so the summary should be
   recognisably the same card in both: tinted masthead with an item count, a
   single clean surface for the totals, the grand total on its own tinted
   strip, then the CTA. Previously this was a bordered table sitting inside
   an already-bordered card — a box within a box — with the total rendered as
   just another row. */
.woocommerce .fpx-order-summary {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-top: 3px solid var(--brand-deep);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.04);
}
/* WC core's own woocommerce.css floats `.cart_totals` at 48% width inside
   `.cart-collaterals` — a leftover of its classic layout where cross-sells
   float left alongside it. Our Order Summary card only ever contains
   `.cart_totals` on its own, so that 48% float left the other ~52% of the
   card empty on the side it didn't float toward. */
.woocommerce .fpx-order-summary .cart_totals {
  float: none !important;
  width: 100% !important;
}

.woocommerce .fpx-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  background: var(--brand-grad-soft), #fff;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.woocommerce .fpx-summary-title {
  margin: 0;
  font-family: "Glory", sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
}
.woocommerce .fpx-summary-count {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.woocommerce .fpx-summary-body {
  padding: 20px 24px 24px;
}

/* ── Totals table ────────────────────────────────────────────────────────
   The rows were previously carrying Tailwind utilities directly on <tr> and
   <th> (`flex justify-between`, `pb-4 mb-4`) — margins do not apply to table
   rows at all, so that spacing silently did nothing. Layout lives here
   instead, and the whole table is stripped of WC core's `shop_table` chrome
   (outer border, 5px radius, negative right margin, a border-top on every
   cell) the same way the checkout review table is. */
.woocommerce .fpx-order-summary table.fpx-cart-totals {
  display: block;
  width: 100%;
  border: none !important;
  border-collapse: collapse;
  border-radius: 0 !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums;
}
.woocommerce .fpx-order-summary table.fpx-cart-totals tbody {
  display: block;
  width: 100%;
}
.woocommerce .fpx-order-summary table.fpx-cart-totals tr {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  padding: 9px 0;
  border: none !important;
}
.woocommerce .fpx-order-summary table.fpx-cart-totals tr:first-child {
  padding-top: 0;
}
/* The `tr` in these two selectors is load-bearing, not decoration: the older
   `.cart_totals table.shop_table tr th/td` rules further up carry one more
   element than a `table … th` selector does, so without it they win the tie
   and re-impose `flex: 1 1 160px; min-width: 120px` on the value cell. At
   the mobile card's 270px row that made 95px label + 16px gap + 160px basis
   = 271px — over by a single pixel, so every row wrapped its amount onto a
   second line. `flex: 0 1 auto` lets the cells hug their content and
   `space-between` on the row does the aligning. */
.woocommerce .fpx-order-summary table.fpx-cart-totals tr th {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: #6b7280;
  text-align: left;
  padding: 0;
  flex: 0 1 auto;
  min-width: 0;
  border: none !important;
}
.woocommerce .fpx-order-summary table.fpx-cart-totals tr td {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: right;
  padding: 0;
  flex: 0 1 auto;
  min-width: 0;
  border: none !important;
}
/* Nested markup from WooCommerce Subscriptions (a shipping row's method plus
   its "Shipping to: …" line) carries WC core's own !important hairlines. */
.woocommerce .fpx-order-summary table.fpx-cart-totals tr *,
.woocommerce .fpx-order-summary table.fpx-cart-totals tr *::before,
.woocommerce .fpx-order-summary table.fpx-cart-totals tr *::after {
  border: none !important;
  box-shadow: none !important;
}
/* Shipping choices and the shipping calculator need the full width rather
   than being squeezed into the right-hand column. */
.woocommerce .fpx-order-summary table.fpx-cart-totals tr.woocommerce-shipping-totals td,
.woocommerce .fpx-order-summary table.fpx-cart-totals tr.fpx-row-stacked td {
  flex: 1 1 100%;
  text-align: left;
  font-weight: 500;
}
.woocommerce .fpx-order-summary table.fpx-cart-totals tr.cart-discount td {
  color: #15803d;
}
.woocommerce .fpx-order-summary table.fpx-cart-totals tr.cart-discount .woocommerce-remove-coupon {
  display: inline-block;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #9ca3af;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce .fpx-order-summary table.fpx-cart-totals tr.cart-discount .woocommerce-remove-coupon:hover {
  color: #dc2626;
}
/* The one number the page is asking the shopper to agree to.
   `:not(.recurring-total)` because WooCommerce Subscriptions reuses the
   `.order-total` class for its recurring figure, which is the follow-up
   number — it keeps the plain row treatment from the `.cart_totals
   table.shop_table` rules above so it doesn't compete with the real total. */
.woocommerce .fpx-order-summary table.fpx-cart-totals tr.order-total:not(.recurring-total) {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--brand-grad-soft), #fff;
  align-items: center;
}
.woocommerce .fpx-order-summary table.fpx-cart-totals tr.order-total:not(.recurring-total) > th {
  font-family: "Glory", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.woocommerce .fpx-order-summary table.fpx-cart-totals tr.order-total:not(.recurring-total) > td {
  font-family: "Glory", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary-dark);
}
.woocommerce .fpx-order-summary table.fpx-cart-totals tr.order-total small {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-primary-dark);
}
/* Belt and braces: the table no longer carries `shop_table_responsive` (see
   cart-totals.php for why), so WC's small-screen `td::before` label should
   never fire — but if that class is ever re-added, this keeps the label from
   doubling up with the <th> the rows already show. */
.woocommerce .fpx-order-summary table.fpx-cart-totals td::before {
  content: none !important;
}
/* Same reasoning in the other direction: if `shop_table_responsive` returns,
   its `tbody th { display: none }` would strip the row labels entirely. */
.woocommerce .fpx-order-summary table.fpx-cart-totals tbody th {
  display: block;
}

/* ── Promo disclosure + CTA ─────────────────────────────────────────────── */
.woocommerce .fpx-order-summary .wc-proceed-to-checkout {
  margin-top: 18px;
  padding: 0;
}
.woocommerce .fpx-continue-shopping {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s ease;
}
.woocommerce .fpx-continue-shopping:hover {
  color: var(--color-primary-dark);
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT PAGE (woocommerce/checkout/form-checkout.php)
   Classic `[woocommerce_checkout]` shortcode — renders in plain `.woocommerce`,
   not `.fpx-woo` (same scoping gotcha as the Cart page, see CLAUDE.md). Every
   selector below styles WC-generated markup we don't own directly (form
   fields, shipping/payment method lists, the review-order table) since the
   only theme-owned template is form-checkout.php itself, which already
   supplies the Tailwind page shell/columns/Order Summary card wrapper.

   A previous redesign attempt pasted an ~1100-line competing <style> block
   directly into this page's post_content (a totally different sharp-corner,
   black/white DM Sans design) — it has been removed from the page content;
   don't reintroduce page-level <style> blocks, style checkout here instead.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section cards: Billing / Shipping / Additional (order notes) ─────────
   Same elevated-card language as the PDP's info panel and the Cart's Order
   Summary (.fpx-order-summary) — a soft, wide-spread shadow instead of a
   near-invisible hairline one, so these read as considered surfaces rather
   than a bare bordered box around plain form fields. */
.woocommerce-billing-fields,
.woocommerce-account-fields,
.fpx-checkout-extras {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(17, 24, 39, 0.05);
}
/* "Create an account?" is a single checkbox in its own section — full card
   padding around one row left it looking like an empty box with a stray
   line in it. */
.woocommerce-account-fields {
  padding: 18px 24px;
}

/* ── The two optional sections, in one card ───────────────────────────────
   "Ship to a different address?" and the order-notes field are both
   optional-by-default, and each used to carry a card of its own: two
   borders, two lots of 28px padding, and a 32px gap between them, spent on
   one unticked checkbox and one empty textarea. On a phone that ran to most
   of a screen before the customer reached anything actionable. They now
   share one card, split by a hairline, and each collapses to a single row
   until it's wanted. See woocommerce/checkout/form-shipping.php. */
.fpx-checkout-extras {
  padding: 0;
  overflow: hidden;
}
.fpx-checkout-extras > .woocommerce-shipping-fields,
.fpx-checkout-extras > .woocommerce-additional-fields {
  padding: 16px 24px;
}
/* `needs_shipping_address()` false leaves the shipping block rendered but
   empty — collapse it and drop the divider it would otherwise sit above. */
.fpx-checkout-extras > .woocommerce-shipping-fields:empty {
  display: none;
}
.fpx-checkout-extras > .woocommerce-additional-fields {
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.fpx-checkout-extras > .woocommerce-shipping-fields:empty + .woocommerce-additional-fields {
  border-top: none;
}
/* The heading is a checkbox row, not a section title — no rule, no bottom
   margin, no 2xl type. The address fields supply their own separation once
   the box is actually ticked. */
.fpx-checkout-extras h3#ship-to-different-address {
  margin: 0;
  padding: 0;
  border: none;
}
.fpx-checkout-extras h3#ship-to-different-address label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
}
.fpx-checkout-extras .shipping_address {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--color-border, #e5e7eb);
}

/* Order notes toggle — same device as the Order Summary's promo field, so
   "optional thing you can open" reads as one idiom across the page. A bare
   <button>, so its background is reset in every interactive state. */
.woocommerce .fpx-notes-toggle,
.woocommerce .fpx-notes-toggle:hover,
.woocommerce .fpx-notes-toggle:focus,
.woocommerce .fpx-notes-toggle:active {
  background-image: none;
  background-color: transparent;
  border-radius: 0;
}
.woocommerce .fpx-notes-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}
.woocommerce .fpx-notes-toggle:hover {
  color: var(--color-primary-dark);
}
.fpx-notes-toggle__opt {
  margin-right: auto;
  font-size: 12.5px;
  font-weight: 500;
  color: #9ca3af;
}
.fpx-notes-toggle__chevron {
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.2s ease;
}
.fpx-notes-toggle[aria-expanded="true"] .fpx-notes-toggle__chevron {
  transform: rotate(180deg);
}
.fpx-notes-panel {
  margin-top: 14px;
}
/* The panel is also the `__field-wrapper`, which is given `display: flex`
   up in the form-rows section — any `display` declaration beats the UA's
   `[hidden] { display: none }`, so without this the textarea rendered in
   full while still marked hidden, and the card collapsed to 202px instead
   of ~110px. */
.fpx-notes-panel[hidden] {
  display: none !important;
}
.fpx-notes-panel textarea {
  min-height: 92px !important;
}
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 {
  font-family: "Glory", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #1a1a1a;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
/* ── Form rows / labels ──────────────────────────────────────────────────── */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.woocommerce form .form-row {
  width: 100%;
  margin: 0 0 16px !important;
  padding: 0 !important;
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  flex: 1 1 calc(50% - 8px);
  min-width: 180px;
  width: auto !important;
}
.woocommerce form .form-row-wide {
  flex: 1 1 100%;
  width: 100% !important;
}
.woocommerce form .form-row:last-child {
  margin-bottom: 0 !important;
}
/* Small-caps tracked labels — the same treatment the Order Summary table's
   "PRODUCT / SUBTOTAL" header already uses — ties the form fields to the
   rest of the page's editorial voice instead of reading as generic
   default-form labels. */
.woocommerce form .form-row label:not(.checkbox) {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin: 0 0 8px;
}
.woocommerce form .form-row label .required {
  color: #dc2626;
  text-decoration: none;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}
.woocommerce form .form-row label .optional {
  color: #9ca3af;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85em;
}

/* ── Inputs / selects / textareas ────────────────────────────────────────── */
/* Taller, deeper fields than a bare form-plugin default — a resting shadow
   (not just one on focus) plus a slightly rounder corner (10px, between the
   8px button radius and the 12px card radius) is what actually reads as
   "premium" here rather than "default browser input with a teal outline". */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100% !important;
  height: 50px;
  padding: 0 16px !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 10px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.4;
  color: #111827 !important;
  background-color: #fff !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce form .form-row .input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1;
}
.woocommerce form .form-row textarea {
  height: auto;
  min-height: 110px;
  padding: 14px 16px !important;
  resize: vertical;
}
.woocommerce form .form-row .input-text:hover,
.woocommerce form .form-row select:hover {
  border-color: #c7ccd3 !important;
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none !important;
  border-color: var(--brand-deep) !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03), 0 0 0 4px rgba(20, 141, 159, 0.12) !important;
}
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: #dc2626 !important;
}
.woocommerce form .form-row.woocommerce-invalid .input-text:focus {
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03), 0 0 0 4px rgba(220, 38, 38, 0.12) !important;
}
.woocommerce form .form-row.woocommerce-validated .input-text {
  border-color: var(--brand-deep) !important;
}
/* Native <select> arrow — hide the OS default and draw our own so it
   matches the custom border/radius above (same treatment select2 gets). */
.woocommerce form .form-row select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
}

/* The original <select> select2 hides (1px, clipped, absolute) — the
   `width: 100% !important` + padding above re-inflated it, so it stuck out
   past the viewport and gave My Account → Edit address a horizontal
   scrollbar. */
.woocommerce form .form-row select.select2-hidden-accessible {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
}

/* ── select2 (WC's enhanced-select country/state dropdowns) ─────────────── */
.woocommerce .select2-container .select2-selection--single {
  height: auto !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  padding: 0 16px !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #111827;
  line-height: 1.4;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: 10px !important;
}
.woocommerce .select2-container--open .select2-selection--single,
.woocommerce .select2-container--focus .select2-selection--single {
  border-color: var(--brand-deep) !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03), 0 0 0 4px rgba(20, 141, 159, 0.12) !important;
}
/* The open dropdown panel is appended to <body>, outside `.woocommerce` —
   these two rules are deliberately unscoped. */
.select2-dropdown {
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.14) !important;
  overflow: hidden;
}
.select2-results__option {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
}
.select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-deep) !important;
  color: #fff !important;
}
.select2-results__option[aria-selected="true"] {
  background-color: rgba(86, 204, 242, 0.18) !important;
  color: var(--color-primary-dark) !important;
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
}

/* ── Checkboxes (create account / ship-to-different-address / terms) ────── */
.woocommerce form .input-checkbox,
.woocommerce form .woocommerce-form__input-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
  cursor: pointer;
  position: relative;
  top: 2px;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce form .input-checkbox:hover,
.woocommerce form .woocommerce-form__input-checkbox:hover {
  border-color: var(--brand-deep);
}
.woocommerce form .input-checkbox:checked,
.woocommerce form .woocommerce-form__input-checkbox:checked {
  background-color: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  box-shadow: 0 0 0 4px rgba(20, 141, 159, 0.12);
}
.woocommerce form .input-checkbox:checked::after,
.woocommerce form .woocommerce-form__input-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.woocommerce form p.form-row.create-account label,
.woocommerce-terms-and-conditions-wrapper label.checkbox {
  display: flex !important;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

/* ── Shipping methods ─────────────────────────────────────────────────────
   Same custom-radio pattern as the cart's WCSATT plan picker (see the
   .wcsatt-options rules above) — one card per method, radio drawn by hand
   since `accent-color` won't reliably pick up brand teal cross-engine. */
.woocommerce ul#shipping_method {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.woocommerce ul#shipping_method li {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.woocommerce ul#shipping_method li:hover {
  border-color: #c7ccd3;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06);
  transform: translateY(-1px);
}
.woocommerce ul#shipping_method li:has(input:checked) {
  border-color: var(--brand-deep);
  background-color: rgba(20, 141, 159, 0.05);
  box-shadow: 0 0 0 3px rgba(20, 141, 159, 0.08);
  transform: none;
}
.woocommerce ul#shipping_method li label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: #1a1a1a;
  cursor: pointer;
  width: 100%;
}
.woocommerce ul#shipping_method li .amount {
  margin-left: auto;
  font-weight: 700;
}
.woocommerce ul#shipping_method li input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.woocommerce ul#shipping_method li input[type="radio"]:checked {
  border-color: var(--brand-deep) !important;
  background-color: var(--brand-deep) !important;
  box-shadow: inset 0 0 0 3.5px #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDER SUMMARY RAIL (form-checkout.php → .fpx-checkout-summary)
   One card holds the whole right column — line items, totals, promo code,
   payment methods and the place-order button — so the rail reads as a single
   "this is your order" object. Everything below is written against that one
   card; WC core's own `#payment` chrome (a lavender-grey block background,
   1em padding on every form-row, a hairline under the methods list) is reset
   first so it can't show through the card's own surface.
   ══════════════════════════════════════════════════════════════════════════ */

.woocommerce .fpx-checkout-summary {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-top: 3px solid var(--brand-deep);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.04);
}

/* Header band — a faint brand tint rather than plain white, so the card has
   a masthead and the totals below it sit on a clean field. */
.woocommerce .fpx-checkout-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  background: var(--brand-grad-soft), #fff;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.woocommerce .fpx-checkout-summary__title {
  margin: 0;
  font-family: "Glory", sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
}
.woocommerce .fpx-checkout-summary__count {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.woocommerce .fpx-checkout-summary__body {
  padding: 22px 24px 24px;
}

/* Trust line under the card — deliberately outside it, quiet, no box. */
.woocommerce .fpx-checkout-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #9ca3af;
}
.woocommerce .fpx-checkout-trust svg {
  flex-shrink: 0;
}

/* ── Review Order table: line items ───────────────────────────────────────
   The old markup stacked the name and a "x N" line under it, which ran most
   items to two ragged lines. Quantity now rides the thumbnail as a badge and
   the header row is visually hidden (the card's own "Order Summary / N items"
   masthead already says what the table is) — leaving a clean receipt of
   thumbnail / name / price. */
/* WC core's `table.shop_table` ships its own outer border, a 5px radius, a
   negative right margin and a `border-top` on every td/th — inside this card
   that drew a stray box around the line items plus a short rule under each
   totals label (the flex tfoot rows below turn th/td into flex items, so
   core's border-top on them lands as a floating dash, not a row divider).
   All of it is cleared here; the dividers this table actually wants are
   handed back explicitly by the tbody/order-total rules. */
.woocommerce table.woocommerce-checkout-review-order-table {
  width: 100%;
  border: none !important;
  border-collapse: collapse;
  border-radius: 0 !important;
  margin: 0 !important;
}
.woocommerce table.woocommerce-checkout-review-order-table th,
.woocommerce table.woocommerce-checkout-review-order-table td {
  border-top: none !important;
}
.woocommerce table.woocommerce-checkout-review-order-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.woocommerce table.woocommerce-checkout-review-order-table tbody td {
  padding: 12px 0;
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  vertical-align: middle;
}
.woocommerce table.woocommerce-checkout-review-order-table tbody tr:first-child td {
  padding-top: 0;
}
.woocommerce table.woocommerce-checkout-review-order-table tbody td.product-total {
  text-align: right;
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: 12px;
}

.fpx-review-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fpx-review-item__media {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--color-bg, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
}
.fpx-review-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}
/* Quantity badge — a small brand chip pinned to the thumbnail's top-right,
   the same device the header cart icon uses for its count. */
.fpx-review-item__qty {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand-deep);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}
.fpx-review-item__info {
  min-width: 0;
}
.fpx-review-item__name {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #1a1a1a;
}
/* Variation / subscription meta WC renders under the name. */
.fpx-review-item__info dl.variation,
.fpx-review-item__info .wcsatt-scheme-description {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #9ca3af;
}
.fpx-review-item__info dl.variation dt,
.fpx-review-item__info dl.variation dd {
  display: inline;
  margin: 0;
  font-weight: 500;
}
.fpx-review-item__info dl.variation p {
  display: inline;
  margin: 0;
}

/* ── Review Order table: totals ───────────────────────────────────────────
   tfoot rows are flex so the label and amount sit on one baseline regardless
   of what a shipping/subscription plugin injects into either cell. */
/* `tfoot` is taken out of the table's column grid entirely. Left in it, each
   flex `tr` below was laid into the table's first column and stopped short
   of the card's right edge (measured 302px against the table's own 374px —
   most visible on the tinted Total strip). Blocking the tfoot alone isn't
   enough: a non-table-internal child of a `display: table` box just gets
   wrapped in an anonymous cell and inherits the same column width, so the
   table itself has to stop being a table. `tbody` is handed `display: table`
   back so the line items keep sizing their own two columns. */
.woocommerce table.woocommerce-checkout-review-order-table {
  display: block;
}
.woocommerce table.woocommerce-checkout-review-order-table tbody {
  display: table;
  width: 100%;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot {
  display: block;
  width: 100%;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  padding: 9px 0;
  border: none !important;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr:first-child {
  padding-top: 16px;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot th {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: #6b7280;
  font-size: 13.5px;
  text-align: left;
  padding: 0;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
/* Shipping choices render inside the totals cell — let them break onto their
   own full-width line instead of being squeezed into the right column. */
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th {
  flex: 0 0 auto;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td {
  flex: 1 1 100%;
  text-align: left;
  font-weight: 500;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.cart-discount td {
  color: #15803d;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.cart-discount .woocommerce-remove-coupon {
  display: inline-block;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #9ca3af;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.cart-discount .woocommerce-remove-coupon:hover {
  color: #dc2626;
}
/* Grand total gets its own tinted strip — the single number the page is
   asking the customer to agree to should not be just another table row. */
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--brand-grad-soft), #fff;
  align-items: center;
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total th {
  font-family: "Glory", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  font-family: "Glory", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary-dark);
}
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total small.includes_tax {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-primary-dark);
}

/* ── Promo code (inc/woocommerce.php → fpx_checkout_coupon_field) ──────────
   Deliberately not a boxed card: a quiet toggle row that only opens into an
   input when asked, so an empty promo field never competes with the total
   or the pay button for attention. */
.fpx-coupon {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--color-border, #e5e7eb);
}
.woocommerce .fpx-coupon__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-primary-dark);
  cursor: pointer;
  transition: color 0.15s ease;
}
.woocommerce .fpx-coupon__toggle:hover {
  color: var(--color-primary-dark);
}
.woocommerce .fpx-coupon__toggle span {
  margin-right: auto;
  text-align: left;
}
.fpx-coupon__chevron {
  transition: transform 0.2s ease;
}
.fpx-coupon__toggle[aria-expanded="true"] .fpx-coupon__chevron {
  transform: rotate(180deg);
}
.fpx-coupon__panel {
  margin-top: 12px;
}
.fpx-coupon__row {
  display: flex;
  gap: 8px;
}
.woocommerce .fpx-coupon__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #111827;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce .fpx-coupon__input::placeholder {
  color: #9ca3af;
  letter-spacing: normal;
}
.woocommerce .fpx-coupon__input:focus {
  outline: none;
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 4px rgba(20, 141, 159, 0.12);
}
.woocommerce .fpx-coupon__apply {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--brand-deep);
  border-radius: 10px;
  background: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-primary-dark);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.woocommerce .fpx-coupon__apply:hover,
.woocommerce .fpx-coupon__apply:focus {
  background: var(--brand-deep);
  background-image: none;
  color: #fff;
}
.fpx-coupon.is-busy {
  opacity: 0.6;
  pointer-events: none;
}
.fpx-coupon__msg {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
}
.fpx-coupon__msg:not(:empty) {
  margin-top: 8px;
}
.fpx-coupon__msg[data-state="error"] {
  color: #dc2626;
}
.fpx-coupon__msg[data-state="success"] {
  color: #15803d;
}

/* ── Payment section ──────────────────────────────────────────────────────
   WC core paints `#payment` with its own lavender-grey block background,
   pads every `div.form-row` by 1em and hangs a hairline under the methods
   list. Inside our card all three read as stray bands, so they're reset here
   before any of our own treatment lands. */
.woocommerce #payment,
.woocommerce-checkout #payment {
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.woocommerce #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0 !important;
  border-bottom: none !important;
}
.woocommerce #payment div.form-row,
.woocommerce-checkout #payment div.form-row {
  padding: 0 !important;
}
.woocommerce #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Scoped under `.woocommerce` purely for specificity: tailwind-output.css is
   enqueued after global.css and its scoped preflight sets a heading size on
   bare `h4`, which a single-class selector ties with and loses to. */
.woocommerce .fpx-payment-heading {
  margin: 0 0 12px;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

/* Method cards — one bordered card per gateway, hand-drawn radio (browser
   `accent-color` won't reliably pick up brand teal cross-engine), and the
   selected card ringed in soft teal. */
.woocommerce ul.payment_methods.methods,
.woocommerce ul.wc_payment_methods {
  list-style: none !important;
  margin: 0 !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.woocommerce ul.payment_methods li.wc_payment_method {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce ul.payment_methods li.wc_payment_method:hover {
  border-color: #c7ccd3;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06);
}
.woocommerce ul.payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px rgba(20, 141, 159, 0.10);
}
/* Direct child only. Unscoped, this also caught every field label inside an
   expanded gateway panel — PayPal's hosted card fields were rendering their
   "CARD NUMBER" / "CVV" labels as 45px-tall, 16px-indented gateway titles. */
.woocommerce ul.payment_methods li.wc_payment_method > label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 15px 16px;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  line-height: 1.3;
}
.woocommerce ul.payment_methods li.wc_payment_method:has(> input:checked) > label {
  color: var(--color-primary-dark);
}
/* Gateway logos push to the far edge of the row rather than trailing the
   label text — with several gateways stacked, ragged logo positions were
   the messiest thing in the rail. */
.woocommerce ul.payment_methods li.wc_payment_method > label img {
  max-height: 20px;
  width: auto;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.woocommerce ul.payment_methods li.wc_payment_method > label img + img {
  margin-left: 6px !important;
}

/* WC core renders the gateway radio as a sibling of the label, not inside
   it, so the radio can't be laid out by the label's flex row — it's taken
   out of flow and the label draws its own control in ::before instead. That
   keeps one consistent radio no matter which markup a gateway emits. */
.woocommerce ul.payment_methods li.wc_payment_method {
  position: relative;
}
.woocommerce ul.payment_methods li.wc_payment_method > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.woocommerce ul.payment_methods li.wc_payment_method > label::before {
  content: "";
  width: 19px;
  height: 19px;
  min-width: 19px;
  border: 1.5px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce ul.payment_methods li.wc_payment_method:has(> input:checked) > label::before {
  border-color: var(--brand-deep);
  background: var(--brand-deep);
  box-shadow: inset 0 0 0 3.5px #fff, 0 0 0 3px rgba(20, 141, 159, 0.14);
}
/* Keyboard focus on the visually-hidden radio has to be shown on the drawn
   control instead. */
.woocommerce ul.payment_methods li.wc_payment_method:has(> input:focus-visible) > label::before {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
}

/* The expanded gateway panel (PayPal blurb, hosted card fields, ...). */
.woocommerce ul.payment_methods li.wc_payment_method .payment_box {
  background-color: var(--color-bg, #f9fafb) !important;
  border-top: 1px solid var(--color-border, #e5e7eb);
  padding: 16px !important;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.6;
}
.woocommerce ul.payment_methods li.wc_payment_method .payment_box::before {
  display: none !important;
}
.woocommerce ul.payment_methods li.wc_payment_method .payment_box > p:first-child {
  margin-top: 0;
}
.woocommerce ul.payment_methods li.wc_payment_method .payment_box > p:last-child {
  margin-bottom: 0;
}
.woocommerce ul.payment_methods li.wc_payment_method .payment_box fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.woocommerce ul.payment_methods li.wc_payment_method .payment_box .form-row {
  margin: 0 0 12px !important;
}
.woocommerce ul.payment_methods li.wc_payment_method .payment_box .form-row:last-child {
  margin-bottom: 0 !important;
}
/* Hosted card fields (PayPal card fields, Stripe Elements) are iframes we
   can't style inside — give the host element the same shell our own inputs
   have so the two sets don't read as coming from different sites.

   PPCP keeps a hidden `input.input-text` next to each field purely as a
   style source: it reads that element's computed style and replays it on
   the real input inside the iframe. So the generic form-field rules further
   up this file were being painted a second time *inside* an already-bordered
   host element — the nested box visible around the card-number field. The
   reference input is stripped back to just its type and colour below, and
   the visible shell stays on the host element alone. */
.woocommerce .payment_box .wc-credit-card-form input.input-text {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Stripe Elements mount into an element we own, so the host element can be
   the visible field and gets the same shell as our own inputs. */
.woocommerce .stripe-card-group,
.woocommerce .wc-stripe-elements-field {
  border: 1px solid var(--color-border, #e5e7eb) !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03) !important;
  min-height: 46px !important;
  display: flex;
  align-items: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* PayPal's hosted card fields cannot get that treatment. Each one is a
   cross-origin iframe that paints its own bordered input, and PPCP forwards
   only a fixed list from the hidden reference input (font, colour,
   appearance, letter-spacing, line-height, padding, outline, transition —
   no border, background or radius), so there is no supported way to turn
   PayPal's own border off. Padding IS forwarded: the checkout sets it on the
   reference inputs (checkout.css) to make the boxes as tall as our fields. Giving the host element a border too just produced a field drawn
   inside a field. The host is left as a plain box and PayPal's input is the
   field; one border beats two. If these ever need to match our own inputs
   exactly, the route is PPCP's WooCommerce Blocks/Card Fields integration,
   not CSS. */
.woocommerce .payment_box [id^="zoid-paypal-card"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100%;
}
.woocommerce .payment_box [id^="zoid-paypal-card"] iframe {
  width: 100%;
}
.woocommerce .wc-stripe-elements-field.focused,
.woocommerce .wc-stripe-elements-field--focus {
  border-color: var(--brand-deep) !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03), 0 0 0 4px rgba(20, 141, 159, 0.12) !important;
}
/* The card form is a bare <fieldset>, so the `form-row-first/last` pairing
   the billing column gets from its flex `__field-wrapper` doesn't apply here
   and Expiry/CVV dropped onto separate lines. Same two-column treatment,
   scoped to this fieldset. */
.woocommerce .payment_box .wc-credit-card-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.woocommerce .payment_box .wc-credit-card-form > .form-row {
  flex: 1 1 100%;
  min-width: 0;
  float: none !important;
  width: auto !important;
}
.woocommerce .payment_box .wc-credit-card-form > .form-row-first,
.woocommerce .payment_box .wc-credit-card-form > .form-row-last {
  flex: 1 1 calc(50% - 8px);
}
.woocommerce .payment_box .wc-credit-card-form .clear {
  display: none;
}
/* ── Saved payment methods (logged-in customers only) ─────────────────────
   Two blocks WC only renders once someone is signed in, so they are easy to
   miss testing as a guest: the list of stored cards, and the "Save to
   account" checkbox. The checkbox row is a sibling *after* the card-form
   fieldset (not inside it) and its input carries no `input-checkbox` class,
   so none of the checkbox styling elsewhere in this file reaches it — left
   alone it renders as a squashed native control next to a label that the
   generic form-row rule had turned into an uppercase micro-label. */
.woocommerce .payment_box ul.woocommerce-SavedPaymentMethods {
  list-style: none !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.woocommerce .payment_box ul.woocommerce-SavedPaymentMethods:empty {
  display: none;
}
.woocommerce .payment_box ul.woocommerce-SavedPaymentMethods li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  color: #1a1a1a;
}
.woocommerce .payment_box ul.woocommerce-SavedPaymentMethods li:has(input:checked) {
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px rgba(20, 141, 159, 0.10);
}
.woocommerce .payment_box ul.woocommerce-SavedPaymentMethods li label {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #1a1a1a !important;
  cursor: pointer;
}

.woocommerce .payment_box p.woocommerce-SavedPaymentMethods-saveNew {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--color-border, #e5e7eb);
}
/* The label ships an inline `style="display:inline"`, so it can't be laid
   out as a block here — as a flex item it blockifies anyway. */
.woocommerce .payment_box p.woocommerce-SavedPaymentMethods-saveNew label {
  margin: 0 !important;
  font-family: "Inter", sans-serif;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #374151 !important;
  cursor: pointer;
}
/* Same hand-drawn checkbox as the billing column's. The input also ships an
   inline `style="width:auto"`, hence !important on the sizing. */
.woocommerce .payment_box p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"],
.woocommerce .payment_box ul.woocommerce-SavedPaymentMethods li input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce .payment_box ul.woocommerce-SavedPaymentMethods li input[type="radio"] {
  border-radius: 999px !important;
}
.woocommerce .payment_box p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:hover,
.woocommerce .payment_box ul.woocommerce-SavedPaymentMethods li input[type="radio"]:hover {
  border-color: var(--brand-deep) !important;
}
.woocommerce .payment_box p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:checked,
.woocommerce .payment_box ul.woocommerce-SavedPaymentMethods li input[type="radio"]:checked {
  background-color: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  box-shadow: 0 0 0 3px rgba(20, 141, 159, 0.12);
}
.woocommerce .payment_box p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.woocommerce .payment_box ul.woocommerce-SavedPaymentMethods li input[type="radio"]:checked {
  box-shadow: inset 0 0 0 3.5px #fff, 0 0 0 3px rgba(20, 141, 159, 0.14);
}

.woocommerce .payment_box .wc-credit-card-form label {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280 !important;
  margin: 0 0 6px !important;
}

/* ── Terms & conditions, place order button ──────────────────────────────── */
.woocommerce-terms-and-conditions-wrapper {
  padding: 16px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
}
.woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0 !important;
}
.woocommerce-terms-and-conditions-wrapper a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce .woocommerce-privacy-policy-text p {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.6;
  margin: 12px 0 0;
}
.woocommerce #payment .form-row.place-order {
  margin: 18px 0 0 !important;
}
.woocommerce #place_order {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 56px;
  padding: 16px 20px !important;
  background: var(--brand-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: "Glory", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(20, 141, 159, 0.28) !important;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.woocommerce #place_order:hover {
  box-shadow: 0 10px 26px rgba(20, 141, 159, 0.38) !important;
  transform: translateY(-1px);
}
.woocommerce #place_order:active {
  transform: translateY(0);
}
.woocommerce #place_order:disabled,
.woocommerce #place_order.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
/* PayPal Payments (PPCP) toggles `.ppcp-hidden` on the classic #place_order
   button when its own gateway-specific button takes over — its own
   gateway.css hides it via `#place_order.ppcp-hidden{display:none!important}`,
   same (1,1,0) specificity as our base `#place_order` rule above, so with
   both sides !important the tie went to whichever stylesheet loads later
   (ours), silently defeating PPCP's own hide and leaving two stacked
   "Place order" buttons visible (the classic one plus PPCP's own
   `.ppcp-dcc-order-button` for its hosted Credit Card fields, which also
   happens to share the literal `id="place_order"`). One extra class here
   raises specificity to (1,2,0), beating both sides of that tie outright. */
.woocommerce #place_order.ppcp-hidden {
  display: none !important;
}
/* PPCP renders its smart-button wrapper as a sibling of `#payment`, not
   inside it, so this is scoped to the card rather than to #payment. */
/* When PPCP takes over, `.place-order` collapses to zero height but keeps
   its own top margin, and the wrapper adds a margin and padding of its own
   on top — three separate gaps stacking into ~46px of dead space between
   the last payment method and the pay button. The wrapper's two are dropped
   so the single 18px from `.place-order` is what shows. */
.woocommerce #order_review .ppc-button-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Two empty placeholders PPCP prints inside `.place-order` carry their own
   spacing whether or not they ever fill: an always-rendered reCAPTCHA v2
   container with inline `margin:20px 0`, and (when no terms page is set) a
   terms wrapper holding nothing but an empty privacy-policy div. Together
   they opened a ~60px hole between the last payment method and the pay
   button. Both collapse only while genuinely empty. */
.woocommerce #ppcp-recaptcha-v2-container:empty {
  margin: 0 !important;
}
.woocommerce #payment .woocommerce-terms-and-conditions-wrapper:not(:has(label, a, p:not(:empty))) {
  display: none;
}

/* ── Standalone coupon form ───────────────────────────────────────────────
   The checkout's own coupon field is `.fpx-coupon` above; this still covers
   WC core's `form.checkout_coupon` wherever else it renders (the cart page,
   and the checkout itself if the relocation in inc/woocommerce.php is ever
   reverted). */
.woocommerce-form-coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 24px !important;
}
.woocommerce-form-coupon .form-row {
  margin: 0 !important;
  flex: 1 1 220px;
}
.woocommerce-form-coupon .form-row-last {
  flex: 0 0 auto;
}
.woocommerce-form-coupon button[name="apply_coupon"] {
  background: transparent !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  color: #1a1a1a !important;
  border-radius: 8px !important;
  padding: 11px 22px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.woocommerce-form-coupon button[name="apply_coupon"]:hover {
  border-color: var(--brand-deep) !important;
  color: var(--color-primary-dark) !important;
}

/* ── Top spacing, all widths ──────────────────────────────────────────────
   Three wrappers each contribute a top gutter before the first card, the
   same stack the side gutters had: page.php's `.fpx-container` (an inline
   `padding-top:2rem`, hence the !important) and the container in
   form-checkout.php (`py-8 md:py-12` → 48px from the `md` breakpoint up).
   ~90px of dead space above "Billing details" on desktop. Only the
   innermost pays for it; the ≤640px block below tightens it further. */
body.woocommerce-checkout #fpx-content > .fpx-container,
body.woocommerce-cart #fpx-content > .fpx-container {
  padding-top: 0 !important;
}
.woocommerce .fpx-checkout-container,
.woocommerce .fpx-cart-container {
  padding-top: 20px;
}

/* ── Cart line items on phones ────────────────────────────────────────────
   The thumbnail now sits beside the title rather than above it (see the note
   in template-parts/cart/cart-items.php). Trimming it from 80px to 64px at
   phone width hands ~16px back to the text column, which is what the
   Subscribe & Save picker needs to keep its two options on one line.
   Sized here rather than with `w-16 h-16` utilities because the `sm:`
   variants of those are not in the compiled Tailwind output. */
@media (max-width: 639px) {
  .woocommerce .cart-items-list .product-thumbnail {
    width: 64px;
    height: 64px;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Below the two-column breakpoint the summary is no longer a side rail, so
     sticking it serves nothing and only fights the page scroll. */
  .woocommerce .checkout .sticky {
    position: static;
  }
}
@media (max-width: 640px) {
  /* ── Checkout side gutters on mobile ───────────────────────────────────
     Two wrappers each contributed their own side padding: page.php's own
     `.fpx-container` (20px) and the container inside form-checkout.php
     (20px). Only the innermost one should pay for the gutter, so the outer
     one is zeroed here and the inner one narrowed to 15px.

     Scoped to `body.woocommerce-checkout` and to ≤640px: `.fpx-container`
     is shared with the header and footer (see the .fpx-pdp-container note
     above). */
  body.woocommerce-checkout #fpx-content > .fpx-container,
  body.woocommerce-cart #fpx-content > .fpx-container {
    padding-left: 0;
    padding-right: 0;
    /* page.php sets `padding-top:2rem` inline, hence !important — that 32px
       sat on top of the inner container's `py-8`: stacked top gutters before
       the first card. */
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
  }
  .woocommerce .fpx-checkout-container,
  .woocommerce .fpx-cart-container {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
  }
  /* The notices wrapper is a sibling of the page container, not a child, so
     zeroing the outer wrappers left it running edge-to-edge while every card
     sat 15px in. Same inset, so the column has one left edge. */
  body.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper,
  body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }
  .woocommerce-billing-fields,
  .woocommerce-account-fields {
    padding: 18px;
  }
  .fpx-checkout-extras > .woocommerce-shipping-fields,
  .fpx-checkout-extras > .woocommerce-additional-fields {
    padding: 14px 18px;
  }
  /* The 32px rhythm between the left column's cards is generous on a phone,
     where it's vertical space competing with the fold rather than breathing
     room in a wide layout. */
  .woocommerce #customer_details > div + div,
  .woocommerce .woocommerce-billing-fields + .woocommerce-account-fields {
    margin-top: 16px;
  }
  .woocommerce #customer_details.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 16px;
  }
  /* First/last name keep sharing a row at phone width — two short fields
     stacked wasted a whole row each. The base rule already asks for
     calc(50% - 8px); the only thing forcing the wrap was its 180px
     min-width, which can't fit twice inside the card's ~334px of content.
     Dropping the minimum lets the pair hold down to ~120px per field. */
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
  .woocommerce .fpx-checkout-summary__head {
    padding: 16px 18px;
  }
  .woocommerce .fpx-checkout-summary__body {
    padding: 18px;
  }
  .fpx-review-item__media {
    width: 48px;
    height: 48px;
  }
  .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total {
    padding: 12px 14px;
  }
  .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    font-size: 1.25rem;
  }
}

.fpx-mobile-menu .fpx-mobile-menu__close:hover {
  background-image: none;
  background-color: rgba(86, 204, 242, 0.18);
  border-radius: 999px;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Thank-you page (woocommerce/checkout/thankyou.php +
   woocommerce/order/order-details.php) — same card language as the
   checkout Order Summary (.fpx-order-summary / .fpx-checkout-summary):
   white 16px cards, teal top rule on the key card, tinted head band,
   Glory totals. Everything is scoped to :is(.fpx-thankyou, .fpx-acct-order)
   — the second is the wrapper of My Account → View order / View
   subscription, which reuse these cards (extra account-only tweaks live in
   assets/css/account.css). :is() keeps the specificity of one class.

   WooCommerce core styles `ul.order_details li` (floats, dashed dividers,
   uppercase 0.715em) and `table.shop_table` / customer-address boxes with
   selectors of (0,2,x); the rules below sit at (0,3,x)+ so they win without
   a wall of !important. Core's clearfix ::before/::after on the overview
   list and `.col2-set` would become empty grid items — they're removed.
   ══════════════════════════════════════════════════════════════════════ */

/* Page column: a fixed readable maximum instead of the template's
   lg:w-2/3 / xl:w-1/2 (half of a 1440px viewport left the overview strip
   ~570px wide, wrapping "September 12, 2026" and "Order number"). Two
   classes so it beats those single-class Tailwind width utilities. */
.woocommerce .woocommerce-order.fpx-thankyou {
  width: 100%;
  max-width: 780px;
}

/* ── Hero ── */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-hero {
  text-align: center;
  margin: 0 auto 36px;
  max-width: 38rem;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 0 22px;
  border-radius: 999px;
  background: var(--brand-grad-soft), #fff;
  color: var(--color-primary-dark);
  box-shadow: 0 0 0 10px rgba(20, 141, 159, 0.06);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-icon svg {
  width: 36px;
  height: 36px;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-icon--error {
  background: #fef2f2;
  color: #dc2626;
  box-shadow: 0 0 0 10px rgba(220, 38, 38, 0.06);
}
/* The page's one motion: the check draws itself once. */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-icon__check {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: fpx-ty-draw 0.55s 0.15s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes fpx-ty-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-icon__check {
    animation: none;
    stroke-dashoffset: 0;
  }
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) h1.fpx-ty-title {
  margin: 0 0 12px;
  font-family: "Glory", sans-serif;
  font-size: clamp(2rem, 1.45rem + 2.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) p.fpx-ty-lead {
  margin: 0 auto;
  font-family: "Inter", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #4b5563;
  background: none;
  border: 0;
  padding: 0;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) p.fpx-ty-lead strong {
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* ── Cards ── */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-card,
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) section.fpx-od {
  margin: 0 0 20px;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.04);
  overflow: hidden;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-card--accent {
  border-top: 3px solid var(--brand-deep);
}

/* ── Overview strip (order / date / total / payment) ── */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  background: var(--color-border, #e5e7eb); /* shows through the 1px gaps as dividers */
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview::before,
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview::after {
  content: none;
  display: none;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview li {
  float: none;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  background: #fff;
  font-size: inherit;
  line-height: 1.4;
  text-transform: none;
  list-style: none;
}
/* Odd item count on the 2-column layout: the last cell spans the row. */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  /* Short values (order no., total) give width to the long ones (date,
     payment method) so "September 12, 2026" stays on one line. */
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 1.1fr);
  }
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview.fpx-ty-overview--3 {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 0.85fr);
  }
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview li:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview li {
    padding: 18px 22px;
  }
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview .fpx-ty-label {
  display: block;
  margin: 0 0 4px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #6b7280;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview li strong.fpx-ty-value {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  color: var(--color-text);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview li.total strong.fpx-ty-value {
  font-family: "Glory", sans-serif;
  font-size: 17px;
  color: var(--color-primary-dark);
}

/* ── Custom message (Settings → Cart & Checkout) ── */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-thankyou-message {
  padding: 20px 24px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #374151;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-thankyou-message > :first-child {
  margin-top: 0;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-thankyou-message > :last-child {
  margin-bottom: 0;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-thankyou-message a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Order details card ── */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-details {
  margin: 0;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-od-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  background: var(--brand-grad-soft), #fff;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) h2.fpx-od-title {
  margin: 0;
  font-family: "Glory", sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-od-count {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 24px 24px;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table thead {
  display: none;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody,
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tfoot {
  display: block;
  width: 100%;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 10px 0;
  border: 0;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table th,
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table td {
  padding: 0;
  border: 0;
  background: none;
  font-family: "Inter", sans-serif;
  line-height: 1.45;
}
/* Line items */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody tr {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody td.product-name {
  flex: 1 1 14rem;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody td.product-name a {
  color: var(--color-text);
  text-decoration: none;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody td.product-name a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody td.product-name strong.product-quantity {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--brand-grad-soft), #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-primary-dark);
  vertical-align: 1px;
  white-space: nowrap;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody td.product-name .wc-item-meta {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  font-weight: 400;
  color: #6b7280;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody td.product-name .wc-item-meta li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody td.product-name .wc-item-meta p {
  display: inline;
  margin: 0;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody td.product-total {
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 600;
  text-align: right;
  color: var(--color-text);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tbody tr.product-purchase-note td {
  flex: 1 1 100%;
  font-size: 13px;
  color: #6b7280;
}
/* Totals */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tfoot.fpx-od-totals {
  padding-top: 10px;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tfoot th {
  flex: 0 1 auto;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  color: #6b7280;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tfoot td {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
  color: var(--color-text);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tfoot td small {
  font-size: 12.5px;
  font-weight: 400;
  color: #6b7280;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tr.fpx-od-row--order_total {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--brand-grad-soft), #fff;
  align-items: center;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tr.fpx-od-row--order_total th {
  font-family: "Glory", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tr.fpx-od-row--order_total td {
  font-family: "Glory", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tr.fpx-od-row--order_total td small {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tr.fpx-od-row--note td {
  flex: 1 1 100%;
  font-weight: 400;
  text-align: left;
}
/* Pending orders: Pay / Cancel actions */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tfoot.fpx-od-actions td {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table tfoot.fpx-od-actions a.button {
  margin: 0;
  padding: 7px 16px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
}

/* ── Addresses ── */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) section.woocommerce-customer-details {
  margin: 0 0 20px;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details .col2-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  margin: 0;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details .col2-set::before,
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details .col2-set::after {
  content: none;
  display: none;
}
@media (min-width: 640px) {
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details .col2-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details .col2-set .col-1,
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details .col2-set .col-2,
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details:not(:has(.col2-set)) {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details h2.woocommerce-column__title {
  margin: 0 0 8px;
  font-family: "Glory", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details address {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 1.6;
  color: #374151;
  overflow-wrap: anywhere;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details address p {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 13.5px;
  color: #6b7280;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details address p::before {
  content: "";
  position: static;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
  background-color: var(--brand-deep);
  -webkit-mask: var(--fpx-ty-icon) center / contain no-repeat;
  mask: var(--fpx-ty-icon) center / contain no-repeat;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details .woocommerce-customer-details--phone {
  --fpx-ty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.15 3.18 2 2 0 0 1 3.12 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.09 8.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21 16z'/%3E%3C/svg%3E");
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .woocommerce-customer-details .woocommerce-customer-details--email {
  --fpx-ty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

/* ── Buttons ── */
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 0;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) a.button.fpx-ty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-grad);
  box-shadow: 0 10px 22px rgba(20, 141, 159, 0.25);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) a.button.fpx-ty-btn:hover {
  color: #fff;
  box-shadow: 0 12px 28px rgba(20, 141, 159, 0.38);
  transform: translateY(-1px);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) a.button.fpx-ty-btn:focus-visible {
  outline: 3px solid rgba(20, 141, 159, 0.35);
  outline-offset: 3px;
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) a.button.fpx-ty-btn.fpx-ty-btn--ghost {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  box-shadow: none;
  color: var(--color-primary-dark);
}
.woocommerce :is(.fpx-thankyou, .fpx-acct-order) a.button.fpx-ty-btn.fpx-ty-btn--ghost:hover {
  border-color: var(--brand-deep);
  color: var(--color-primary-dark);
}

@media (max-width: 640px) {
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-ty-hero {
    margin-bottom: 28px;
  }
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) .fpx-od-head {
    padding: 16px 18px;
  }
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) table.fpx-od-table {
    padding: 4px 18px 20px;
  }
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) ul.fpx-ty-overview li {
    padding: 14px 16px;
  }
  .woocommerce :is(.fpx-thankyou, .fpx-acct-order) a.button.fpx-ty-btn {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Toast messages (assets/js/toasts.js)
   WooCommerce success notices float as a card under the header and fade
   away, instead of a boxed note pushing the page down. Errors and info
   notices stay inline. Without JS the notice shows inline as before.
   ════════════════════════════════════════════════════════════════════ */
.woocommerce-notices-wrapper.is-empty {
  display: none;
}
.fpx-toasts {
  position: fixed;
  left: 50%;
  top: 84px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: none;
}
.fpx-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 44px 16px 14px;
  overflow: hidden;
  border: 1px solid #d7e9ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 42, 48, 0.18), 0 2px 6px rgba(15, 42, 48, 0.08);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.fpx-toast.is-in {
  opacity: 1;
  transform: none;
}
.fpx-toast.is-out {
  opacity: 0;
  transform: translateY(-8px);
}
.fpx-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-grad, linear-gradient(340deg, #148d9f 30%, #56ccf2 100%));
  color: #fff;
}
.fpx-toast__body {
  flex: 1;
  min-width: 0;
  padding-top: 5px;
}
/* The original WooCommerce notice, moved inside: drop its boxed look. */
.fpx-toast .fpx-toast__msg {
  display: flex !important;
  flex-direction: column; /* WooCommerce prints the text, then the "View cart" link */
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #1f2937 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.45;
}
.fpx-toast .fpx-toast__msg::before,
.fpx-toast .fpx-toast__msg::after {
  display: none !important;
  content: none !important;
}
/* "View cart" and similar links: a small pill under the text. */
.fpx-toast .fpx-toast__msg .button,
.fpx-toast .fpx-toast__msg a.wc-forward {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 7px 14px !important;
  border: 1px solid var(--brand-deep, #148d9f) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--brand-deep, #148d9f) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
.fpx-toast .fpx-toast__msg .button:hover,
.fpx-toast .fpx-toast__msg a.wc-forward:hover {
  background: var(--brand-deep, #148d9f) !important;
  color: #fff !important;
}
.fpx-toast__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}
.fpx-toast__close:hover {
  background: #f1f5f9;
  color: #111827;
}
.fpx-toast__close:focus-visible {
  outline: 2px solid var(--brand-deep, #148d9f);
  outline-offset: 2px;
}
/* Countdown bar: shows the toast will close by itself. */
.fpx-toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--brand-grad-pill, linear-gradient(100deg, #56ccf2 0%, #148d9f 62%));
  transform-origin: left center;
  animation: fpx-toast-bar 6s linear forwards;
}
.fpx-toast.is-paused .fpx-toast__bar {
  animation-play-state: paused;
}
@keyframes fpx-toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fpx-toast,
  .fpx-toast.is-in,
  .fpx-toast.is-out {
    transform: none;
    transition: opacity 0.2s ease;
  }
}