/*
Theme Name: FluVana
Theme URI: https://fluvana.com
Author: FluVana
Description: Custom WooCommerce-compatible theme for FluVana planning apps.
Version: 0.3.0
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 8.2
Text Domain: fluvana
*/

:root {
  --ink: #1f2724;
  --evergreen: #28483f;
  --evergreen-2: #3f6a5e;
  --sage: #e2ece3;
  --sage-2: #f0f5ed;
  --paper: #fff9f4;
  --white: #fffdf9;
  --blush: #c97973;
  --blush-2: #f2d9d4;
  --champagne: #d7b36a;
  --line: #e1d7cc;
  --shadow: 0 18px 50px rgba(40, 72, 63, 0.12);
  --shadow-soft: 0 12px 28px rgba(40, 72, 63, 0.08);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;
  --display-font: "Fraunces", Georgia, serif;
  --body-font: "Inter", "Source Sans 3", "Segoe UI", sans-serif;
  --accent-strong: hsl(28 90% 35%);
  --container: min(1280px, calc(100vw - 48px));
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.offer-bar {
  position: relative;
  z-index: 40;
  padding: 18px 0 8px;
  background: var(--paper);
  color: var(--ink);
}

.offer-bar.is-hidden {
  display: none;
}

.offer-bar__inner {
  width: var(--container);
  min-height: 62px;
  margin: 0 auto;
  padding: 10px 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(225, 215, 204, 0.62);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(226, 236, 227, 0.74), rgba(242, 217, 212, 0.76)),
    var(--sage-2);
  box-shadow: 0 12px 30px rgba(40, 72, 63, 0.06);
}

.offer-bar__icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--white);
  color: var(--evergreen);
  box-shadow: var(--shadow-soft);
}

.offer-bar__icon svg {
  width: 18px;
  height: 18px;
}

.offer-bar__copy {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  text-align: center;
  font-size: 15px;
  line-height: 1.25;
}

.offer-bar__copy strong {
  color: var(--evergreen);
  font-weight: 750;
}

.offer-bar__copy span {
  color: rgba(31, 39, 36, 0.78);
}

.offer-bar__mobile,
.offer-bar__cta-mobile {
  display: none;
}

.offer-bar__cta {
  min-height: 34px;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(40, 72, 63, 0.24);
  background: var(--white);
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.offer-bar__close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(31, 39, 36, 0.68);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}

.offer-bar__close:hover {
  background: rgba(255, 253, 249, 0.72);
  color: var(--evergreen);
}

.offer-bar__close svg {
  width: 18px;
  height: 18px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 249, 244, 0.92);
  border-bottom: 1px solid rgba(225, 215, 204, 0.78);
  backdrop-filter: blur(16px);
}

.site-header__inner {
  width: var(--container);
  min-height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.brand-mark img {
  width: 156px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}

.site-nav a {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(31, 39, 36, 0.76);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.site-nav a:hover {
  color: var(--evergreen);
  border-color: rgba(215, 179, 106, 0.26);
  background: rgba(255, 253, 249, 0.72);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.etsy-link {
  color: #a96732;
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  margin-right: 8px;
  white-space: nowrap;
}

.icon-link,
.menu-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(40, 72, 63, 0.13);
  background: rgba(255, 253, 249, 0.62);
  color: var(--evergreen);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(40, 72, 63, 0.045);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.icon-link:hover,
.menu-toggle:hover {
  transform: translateY(-1px);
  background: var(--sage-2);
  border-color: rgba(40, 72, 63, 0.22);
  box-shadow: 0 12px 22px rgba(40, 72, 63, 0.075);
}

.icon-link svg,
.menu-toggle svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.65;
}

.menu-toggle {
  display: none;
}

.cart-link {
  position: relative;
}

.cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--white);
  border: 2px solid var(--paper);
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}

.main {
  min-height: 70vh;
}

.section {
  width: var(--container);
  margin: 0 auto;
  scroll-margin-top: 122px;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(560px, 1.28fr);
  align-items: center;
  gap: 28px;
  padding: 54px 0 28px;
  overflow: clip;
}

.hero::after {
  content: "";
  position: absolute;
  right: -72px;
  top: 12px;
  width: 230px;
  height: 430px;
  background:
    radial-gradient(circle at 48% 16%, rgba(40, 72, 63, 0.16) 0 2px, transparent 3px),
    linear-gradient(115deg, transparent 0 46%, rgba(215, 179, 106, 0.22) 46% 47%, transparent 47% 100%);
  background-size: 28px 28px, 100% 100%;
  opacity: 0.45;
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: #a96732;
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--champagne);
}

.hero-kicker {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 20px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(225, 215, 204, 0.72);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(226, 236, 227, 0.74), rgba(242, 217, 212, 0.64)),
    var(--white);
  color: var(--evergreen);
  box-shadow: 0 12px 28px rgba(40, 72, 63, 0.06);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.hero-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--champagne);
  border-radius: 2px;
  background: var(--white);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px rgba(215, 179, 106, 0.12);
}

.hero h1,
.section-heading,
.category-card h3,
.product-card h3,
.comparison h3,
.site-footer h2 {
  font-family: var(--serif);
  color: var(--evergreen);
  font-weight: 500;
  letter-spacing: 0;
}

.hero h1 {
  max-width: 560px;
  margin: 0;
  font-size: clamp(52px, 4.6vw, 78px);
  line-height: 0.96;
}

.hero-highlight {
  padding: 0 0.05em;
  background: linear-gradient(180deg, transparent 58%, rgba(242, 217, 212, 0.92) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-copy {
  max-width: 640px;
  margin: 24px 0 0;
  font-size: 20px;
  line-height: 1.5;
}

.hero-benefits {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hero-benefits span {
  min-height: 34px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(40, 72, 63, 0.13);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.72);
  color: rgba(31, 39, 36, 0.78);
  box-shadow: 0 8px 16px rgba(40, 72, 63, 0.045);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.hero-benefits svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--champagne);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.button {
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button--primary {
  background: var(--blush);
  color: var(--white);
  box-shadow: 0 12px 24px rgba(201, 121, 115, 0.24);
}

.button--secondary {
  background: rgba(255, 253, 249, 0.75);
  color: var(--evergreen);
  border-color: var(--evergreen);
}

.button--dark {
  background: var(--evergreen);
  color: var(--white);
}

.micro-copy {
  margin: 28px 0 0;
  color: rgba(31, 39, 36, 0.78);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
}

.hero-trust {
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(225, 215, 204, 0.76);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.84);
  box-shadow: 0 10px 22px rgba(40, 72, 63, 0.06);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.hero-trust strong {
  color: var(--evergreen);
  font-weight: 800;
}

.hero-trust__score {
  color: rgba(31, 39, 36, 0.74);
}

.hero-trust__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.hero-trust__stars span {
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  border-radius: 2px;
  background: var(--evergreen-2);
  color: var(--white);
  font-size: 12px;
  line-height: 1;
}

.hero-trust__source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--evergreen);
  font-weight: 750;
}

.hero-trust__source svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--champagne);
}

.hero-trust__mobile {
  display: none;
}

.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.hero-picture {
  display: block;
  width: min(100%, 900px);
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(40, 72, 63, 0.12);
}

.proof-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 28px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(225, 215, 204, 0.66);
  background:
    linear-gradient(90deg, rgba(255, 253, 249, 0.88), rgba(240, 245, 237, 0.74)),
    var(--white);
  box-shadow: 0 16px 42px rgba(40, 72, 63, 0.07);
}

.proof-item {
  min-height: 74px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(225, 215, 204, 0.5);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.68);
}

.proof-item svg {
  width: 18px;
  height: 18px;
  color: var(--champagne);
  flex: 0 0 auto;
}

.proof-item > svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--champagne);
  box-shadow: 0 10px 20px rgba(40, 72, 63, 0.11);
}

.proof-item strong {
  display: block;
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
}

.proof-item em {
  display: block;
  margin-top: 4px;
  color: rgba(31, 39, 36, 0.64);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.1;
}

.proof-copy__mobile {
  display: none;
}

.section-kicker {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 42px 0 16px;
}

.section-kicker--top {
  margin-top: 0;
}

.section-heading {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.04;
}

.section-note {
  max-width: 430px;
  margin: 0;
  color: rgba(31, 39, 36, 0.68);
}

.category-intro {
  width: 100%;
  max-width: none;
  margin: 38px 0 14px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.category-intro__eyebrow {
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(225, 215, 204, 0.72);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.74);
  color: var(--evergreen);
  box-shadow: 0 10px 22px rgba(40, 72, 63, 0.055);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.category-intro__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--champagne);
  border-radius: 2px;
  transform: rotate(45deg);
}

.category-intro .section-heading {
  width: fit-content;
  max-width: min(100%, 760px);
  margin-inline: auto;
  justify-self: center;
  text-align: center;
}

.category-intro .section-note {
  width: fit-content;
  max-width: 540px;
  margin: 0 auto;
  justify-self: center;
  text-align: center;
}

.category-card,
.product-card,
.comparison-panel,
.step-card {
  border: 1px solid rgba(225, 215, 204, 0.82);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.78);
  box-shadow: 0 10px 26px rgba(40, 72, 63, 0.07);
}

.category-carousel {
  position: relative;
  min-height: 570px;
  padding: 10px 58px 54px;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.category-grid {
  position: relative;
  min-height: 500px;
}

.category-card {
  --card-scale: 0.76;
  position: relative;
  width: min(37vw, 490px);
  min-height: 470px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 30px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--card-scale));
  transition: transform 360ms ease, opacity 260ms ease, filter 260ms ease;
  pointer-events: none;
  background: var(--evergreen);
}

.category-card::after {
  display: none;
}

.category-card.is-active {
  --card-scale: 1;
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  filter: none;
}

.category-card.is-prev {
  z-index: 2;
  opacity: 0.84;
  transform: translate(calc(-50% - min(31vw, 380px)), -50%) scale(0.72);
  pointer-events: auto;
  filter: saturate(0.88);
}

.category-card.is-next {
  z-index: 2;
  opacity: 0.84;
  transform: translate(calc(-50% + min(31vw, 380px)), -50%) scale(0.72);
  pointer-events: auto;
  filter: saturate(0.88);
}

.category-card__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(31, 39, 36, 0.08), rgba(31, 39, 36, 0.12) 36%, rgba(31, 39, 36, 0.72)),
    linear-gradient(90deg, rgba(31, 39, 36, 0.24), transparent 66%);
}

.category-card__top {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 22px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.category-card__icon {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.16);
  border: 1px solid rgba(255, 253, 249, 0.32);
  color: var(--champagne);
  box-shadow: 0 14px 24px rgba(31, 39, 36, 0.14);
  backdrop-filter: blur(10px);
}

.category-card__icon svg {
  width: 23px;
  height: 23px;
}

.category-card__label {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.16);
  border: 1px solid rgba(255, 253, 249, 0.26);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.category-card__body {
  position: relative;
  z-index: 1;
  padding: 0 28px 92px;
}

.category-card h3 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: 44px;
  line-height: 0.94;
  text-shadow: 0 2px 18px rgba(31, 39, 36, 0.24);
}

.category-card p {
  max-width: 36ch;
  margin: 0;
  color: rgba(255, 253, 249, 0.9);
  font-size: 15px;
  line-height: 1.45;
  text-shadow: 0 2px 12px rgba(31, 39, 36, 0.18);
}

.category-tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.category-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 253, 249, 0.25);
  background: rgba(255, 253, 249, 0.16);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.category-card__link {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 1;
  min-height: 44px;
  padding: 12px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 253, 249, 0.28);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.92);
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.category-card.is-active .category-card__link {
  background: var(--blush);
  border-color: transparent;
  color: var(--white);
}

.category-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(225, 215, 204, 0.72);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.84);
  color: var(--evergreen);
  box-shadow: 0 12px 28px rgba(40, 72, 63, 0.12);
  cursor: pointer;
  transform: translateY(-50%);
}

.category-carousel__arrow svg {
  width: 21px;
  height: 21px;
}

.category-carousel__arrow--prev {
  left: 0;
}

.category-carousel__arrow--next {
  right: 0;
}

.category-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
}

.category-carousel__dots button {
  width: 10px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(40, 72, 63, 0.28);
  cursor: pointer;
}

.category-carousel__dots button.is-active {
  width: 32px;
  background: var(--evergreen);
}

.mini-ui {
  min-height: 150px;
  padding: 12px;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 8px;
  background: var(--white);
}

.mini-ui--dark {
  background: linear-gradient(150deg, var(--evergreen), #1f362f);
  color: var(--white);
}

.mini-ui__title {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  color: inherit;
  opacity: 0.86;
}

.mini-bars span {
  display: block;
  height: 8px;
  margin: 8px 0;
  border-radius: 999px;
  background: var(--sage);
}

.mini-bars span:nth-child(2) {
  width: 72%;
  background: var(--blush-2);
}

.mini-bars span:nth-child(3) {
  width: 84%;
  background: rgba(215, 179, 106, 0.55);
}

.mini-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 12px;
}

.mini-check::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid var(--evergreen-2);
}

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--evergreen);
  font-weight: 700;
}

.products-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.product-card {
  overflow: hidden;
}

.product-visual {
  min-height: 165px;
  padding: 14px;
  background: linear-gradient(180deg, var(--sage-2), rgba(255, 253, 249, 0.75));
  border-bottom: 1px solid rgba(225, 215, 204, 0.82);
}

.product-card__mock {
  margin-top: 12px;
}

.badge {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--champagne);
  color: var(--evergreen);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-card__body {
  padding: 18px;
}

.product-card h3 {
  margin: 0 0 8px;
  font-size: 25px;
  line-height: 1.1;
}

.product-card p {
  margin: 0 0 16px;
  color: rgba(31, 39, 36, 0.72);
  font-size: 15px;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(225, 215, 204, 0.82);
  padding-top: 13px;
}

.price-row strong {
  color: var(--evergreen);
  font-size: 19px;
}

.product-intro {
  position: relative;
  align-items: end;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.72fr) auto;
  gap: 22px;
}

.product-intro__eyebrow {
  width: fit-content;
  padding: 7px 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(215, 179, 106, 0.35);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.72);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(40, 72, 63, 0.055);
}

.product-intro__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--champagne);
}

.product-intro .section-heading {
  grid-column: 1;
  margin-top: 12px;
}

.product-intro .section-note {
  grid-column: 2;
  margin: 0;
  align-self: center;
}

.product-intro .text-link {
  grid-column: 3;
  align-self: center;
  white-space: nowrap;
}

.featured-products {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) repeat(3, minmax(0, 0.92fr));
  gap: 18px;
}

.featured-products .product-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(214px, auto) 1fr;
  background:
    linear-gradient(145deg, rgba(255, 253, 249, 0.98), rgba(240, 245, 237, 0.52)),
    var(--white);
  box-shadow: 0 24px 56px rgba(40, 72, 63, 0.09);
}

.product-card--feature {
  grid-row: auto;
}

.featured-products .product-visual {
  position: relative;
  min-height: 214px;
  padding: 18px;
  overflow: hidden;
  border-bottom: 1px solid rgba(225, 215, 204, 0.78);
  background:
    radial-gradient(circle at 84% 16%, rgba(215, 179, 106, 0.18), transparent 34%),
    radial-gradient(circle at 12% 82%, rgba(242, 217, 212, 0.55), transparent 38%),
    linear-gradient(145deg, var(--sage-2), rgba(255, 249, 244, 0.86));
}

.product-card--feature .product-visual {
  min-height: 286px;
  background:
    radial-gradient(circle at 82% 18%, rgba(215, 179, 106, 0.26), transparent 36%),
    radial-gradient(circle at 18% 82%, rgba(242, 217, 212, 0.5), transparent 42%),
    linear-gradient(145deg, var(--evergreen), #1f362f);
}

.featured-products .badge {
  position: relative;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(215, 179, 106, 0.92);
  color: var(--evergreen);
  letter-spacing: 0;
}

.product-card__image {
  width: 100%;
  height: 178px;
  margin-top: 14px;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(225, 215, 204, 0.82);
}

.product-card--feature .product-card__image {
  height: 244px;
}

.product-live {
  position: relative;
  min-height: 172px;
  margin-top: 14px;
}

.product-card--feature .product-live {
  min-height: 236px;
}

.product-live__screen {
  position: absolute;
  inset: 8px 48px 18px 0;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(225, 215, 204, 0.86);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 20px 36px rgba(31, 39, 36, 0.12);
}

.product-card--feature .product-live__screen {
  inset: 10px 64px 24px 0;
  padding: 20px;
  border-color: rgba(255, 253, 249, 0.28);
}

.product-live__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.product-live__stats span {
  min-height: 56px;
  padding: 10px 12px;
  display: grid;
  align-content: center;
  border-radius: 14px;
  background: var(--sage);
}

.product-live__stats span:nth-child(2) {
  background: var(--blush-2);
}

.product-live__stats small {
  color: rgba(31, 39, 36, 0.72);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.product-live__stats strong {
  margin-top: 4px;
  color: var(--evergreen);
  font-size: 22px;
  line-height: 1;
}

.product-live__chart {
  height: 70px;
  margin-top: 16px;
  display: flex;
  align-items: end;
  gap: 11px;
  border-bottom: 2px solid rgba(40, 72, 63, 0.14);
}

.product-live__chart i {
  width: 20px;
  border-radius: 999px 999px 0 0;
  background: var(--evergreen);
}

.product-live__chart i:nth-child(1) {
  height: 38%;
  opacity: 0.62;
}

.product-live__chart i:nth-child(2) {
  height: 72%;
  background: var(--blush);
}

.product-live__chart i:nth-child(3) {
  height: 52%;
  background: var(--champagne);
}

.product-live__chart i:nth-child(4) {
  height: 86%;
}

.product-live__rows {
  margin-top: 13px;
  display: grid;
  gap: 8px;
}

.product-live__rows span {
  height: 8px;
  border-radius: 999px;
  background: rgba(40, 72, 63, 0.16);
}

.product-live__rows span:nth-child(2) {
  width: 74%;
  background: rgba(201, 121, 115, 0.28);
}

.product-live__rows span:nth-child(3) {
  width: 58%;
  background: rgba(215, 179, 106, 0.46);
}

.product-live__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72px;
  height: 118px;
  padding: 12px 9px;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 5px solid #1f2724;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 18px 28px rgba(31, 39, 36, 0.18);
}

.product-card--feature .product-live__phone {
  width: 94px;
  height: 154px;
  right: 2px;
  border-radius: 24px;
}

.product-live__phone span,
.product-live__phone strong {
  height: 8px;
  border-radius: 999px;
  background: var(--sage);
}

.product-live__phone span:nth-child(2) {
  width: 74%;
  background: var(--blush-2);
}

.product-live__phone strong {
  height: 44px;
  background:
    linear-gradient(145deg, rgba(40, 72, 63, 0.92), rgba(40, 72, 63, 0.42)),
    var(--evergreen);
}

.product-live--2 .product-live__chart i:nth-child(2),
.product-live--4 .product-live__chart i:nth-child(2) {
  background: var(--evergreen-2);
}

.product-live--3 .product-live__stats span:first-child,
.product-live--4 .product-live__stats span:first-child {
  background: var(--blush-2);
}

.featured-products .product-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.product-card--feature .product-card__body {
  padding: 24px;
}

.product-card__meta {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.product-card__meta span {
  min-height: 28px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  border: 1px solid rgba(225, 215, 204, 0.82);
  background: rgba(255, 253, 249, 0.76);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 800;
}

.product-card__meta svg {
  width: 14px;
  height: 14px;
  color: var(--champagne);
}

.featured-products .product-card h3 {
  margin-bottom: 10px;
  font-size: clamp(25px, 2.2vw, 36px);
}

.featured-products .product-card:not(.product-card--feature) h3 {
  font-size: 25px;
}

.featured-products .product-card p {
  margin-bottom: 16px;
}

.product-card__tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.product-card__tags span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--sage-2);
  border: 1px solid rgba(225, 215, 204, 0.72);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 800;
}

.featured-products .price-row {
  margin-top: 18px;
  padding-top: 16px;
}

.product-card__cta {
  min-height: 38px;
  padding: 10px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--evergreen);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.product-card__cta:hover {
  background: var(--blush);
  color: var(--white);
}

.product-carousel {
  position: relative;
}

.product-intro {
  max-width: 760px;
  margin: 48px auto 20px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
}

.product-intro .section-heading {
  width: min(100%, 720px);
  margin: 2px auto 0;
  font-size: clamp(38px, 4.8vw, 62px);
  line-height: 0.94;
}

.product-intro .section-note {
  max-width: 560px;
  margin: 0 auto;
}

.product-intro .text-link {
  min-height: 34px;
  margin-top: 2px;
  padding: 0 14px;
  border: 1px solid rgba(225, 215, 204, 0.84);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.78);
  box-shadow: 0 12px 26px rgba(40, 72, 63, 0.06);
}

.featured-products {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.featured-products .product-card {
  min-height: 540px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(240, 245, 237, 0.45)),
    var(--white);
  box-shadow: 0 22px 48px rgba(40, 72, 63, 0.085);
}

.featured-products .product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 58px rgba(40, 72, 63, 0.12);
}

.featured-products .product-visual {
  min-height: 230px;
  padding: 18px;
  background:
    radial-gradient(circle at 78% 18%, rgba(215, 179, 106, 0.18), transparent 32%),
    radial-gradient(circle at 15% 86%, rgba(242, 217, 212, 0.5), transparent 34%),
    linear-gradient(145deg, var(--sage-2), rgba(255, 249, 244, 0.88));
}

.featured-products .product-card:nth-child(1) .product-visual,
.featured-products .product-card:nth-child(4) .product-visual {
  background:
    radial-gradient(circle at 78% 18%, rgba(215, 179, 106, 0.22), transparent 32%),
    radial-gradient(circle at 18% 88%, rgba(242, 217, 212, 0.26), transparent 36%),
    linear-gradient(145deg, #28483F, #20372F);
}

.featured-products .badge {
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}

.product-live {
  min-height: 172px;
}

.product-live__screen {
  inset: 10px 48px 16px 0;
  padding: 14px;
  border-radius: 18px;
}

.product-live__stats {
  gap: 8px;
}

.product-live__stats span {
  min-height: 54px;
  padding: 10px 11px;
}

.product-live__stats strong {
  font-size: clamp(18px, 1.7vw, 22px);
}

.product-live__chart {
  height: 66px;
  gap: 10px;
}

.product-live__phone {
  width: 72px;
  height: 118px;
}

.featured-products .product-card__body {
  min-height: 294px;
  padding: 20px;
}

.featured-products .product-card h3,
.featured-products .product-card:not(.product-card--feature) h3 {
  min-height: 58px;
  margin-bottom: 9px;
  font-size: 27px;
  line-height: 1.02;
}

.featured-products .product-card p {
  min-height: 66px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.45;
}

.product-card__meta {
  margin-bottom: 10px;
}

.product-card__meta span {
  font-size: 11px;
}

.product-card__tags {
  min-height: 30px;
}

.featured-products .price-row {
  margin-top: auto;
}

.product-carousel__arrow,
.product-carousel__dots {
  display: none;
}

.comparison-compact {
  overflow: hidden;
  margin-top: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 0%, rgba(215, 179, 106, 0.2), transparent 28%),
    linear-gradient(135deg, var(--white), #fbf3eb);
  box-shadow: 0 22px 58px rgba(40, 72, 63, 0.1);
}

.comparison-compact__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px clamp(18px, 4vw, 42px) 15px;
  border-bottom: 1px solid rgba(225, 215, 204, 0.72);
}

.comparison-compact__kicker {
  flex: 0 0 auto;
  width: fit-content;
  margin: 0;
  padding: 6px 11px;
  border: 1px solid rgba(215, 179, 106, 0.46);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.86);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.comparison-compact h2 {
  max-width: none;
  flex: 1 1 auto;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(28px, 2.9vw, 40px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: 0;
  white-space: nowrap;
}

.comparison-compact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px clamp(14px, 3.6vw, 42px) 14px;
}

.comparison-demo {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(40, 72, 63, 0.07);
}

.comparison-demo--app {
  border-color: rgba(40, 72, 63, 0.34);
  background: linear-gradient(145deg, var(--evergreen), #17372f);
  color: var(--white);
}

.comparison-demo__head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(225, 215, 204, 0.72);
}

.comparison-demo--app .comparison-demo__head {
  border-color: rgba(255, 253, 249, 0.16);
}

.comparison-demo__head p {
  margin: 0;
  color: rgba(40, 72, 63, 0.6);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.comparison-demo--app .comparison-demo__head p {
  color: rgba(255, 253, 249, 0.6);
}

.comparison-demo__head h3 {
  margin: 1px 0 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(25px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 0.95;
}

.comparison-demo--app .comparison-demo__head h3 {
  color: var(--white);
}

.comparison-demo__head > span {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--blush-2);
  color: #92483f;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.comparison-demo--app .comparison-demo__head > span {
  border: 1px solid rgba(215, 179, 106, 0.35);
  background: rgba(215, 179, 106, 0.16);
  color: var(--champagne);
}

.comparison-demo__frame {
  position: relative;
  overflow: hidden;
  width: calc(100% - 26px);
  margin: 13px;
  aspect-ratio: 16 / 9;
  border-radius: 13px;
}

.comparison-demo__frame::after {
  content: attr(data-slot);
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 5;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.94);
  color: var(--evergreen);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(31, 39, 36, 0.12);
}

.comparison-sheet {
  height: 100%;
  border: 1px solid rgba(225, 215, 204, 0.95);
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--sage) 0 12%, transparent 12%),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(225, 215, 204, 0.68) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(225, 215, 204, 0.68) 78px 79px),
    var(--white);
}

.comparison-sheet__toolbar {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(225, 215, 204, 0.95);
  background: #fbf3eb;
}

.comparison-sheet__toolbar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blush);
}

.comparison-sheet__toolbar i {
  flex: 1;
  height: 17px;
  border: 1px solid rgba(225, 215, 204, 0.95);
  border-radius: 4px;
  background: var(--white);
}

.comparison-warning {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 17px;
  padding: 10px 12px;
  border: 1px solid rgba(201, 121, 115, 0.35);
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.94);
  color: #92483f;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  box-shadow: 0 16px 26px rgba(31, 39, 36, 0.1);
}

.comparison-app {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background:
    radial-gradient(circle at 92% 12%, rgba(215, 179, 106, 0.18), transparent 30%),
    linear-gradient(145deg, #0d2923, #22463d);
}

.comparison-desktop-shot {
  width: 74%;
  padding: 9px 9px 15px;
  border-radius: 15px;
  background: #111816;
  box-shadow: 0 20px 38px rgba(10, 15, 13, 0.34);
}

.comparison-desktop-shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 7px;
  background: var(--paper);
}

.comparison-phone-shot {
  position: absolute;
  left: 7%;
  bottom: 7%;
  width: min(18%, 96px);
  min-width: 60px;
  padding: 5px;
  border-radius: 16px;
  background: #111816;
  box-shadow: 0 18px 28px rgba(10, 15, 13, 0.32);
}

.comparison-phone-shot img {
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 11px;
}

.comparison-note {
  position: absolute;
  right: 5%;
  bottom: 8%;
  width: min(205px, 39%);
  padding: 10px 11px;
  border-radius: 11px;
  background: rgba(255, 253, 249, 0.93);
  color: var(--evergreen);
  box-shadow: 0 15px 28px rgba(10, 15, 13, 0.17);
}

.comparison-note strong {
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
}

.comparison-note span {
  display: block;
  margin-top: 3px;
  color: rgba(40, 72, 63, 0.72);
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1.08;
}

.comparison-list {
  display: grid;
  gap: 0;
  padding: 0 20px 18px;
  margin: 0;
  list-style: none;
}

.comparison-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  border-top: 1px solid rgba(225, 215, 204, 0.72);
  color: rgba(40, 72, 63, 0.82);
  font-size: 15px;
  line-height: 1.24;
}

.comparison-mark {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.comparison-mark--bad {
  background: #f2c4bd;
  color: #92483f;
}

.comparison-mark--good {
  background: rgba(215, 179, 106, 0.22);
  color: var(--champagne);
}

.comparison-demo--app .comparison-list li {
  border-color: rgba(255, 253, 249, 0.16);
  color: rgba(255, 253, 249, 0.9);
  font-weight: 700;
}

.comparison-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(225, 215, 204, 0.72);
  background: rgba(255, 253, 249, 0.58);
}

.comparison-proof div {
  min-height: 58px;
  padding: 12px 15px;
  display: grid;
  place-items: center start;
  border-right: 1px solid rgba(225, 215, 204, 0.72);
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.05;
}

.comparison-proof div:last-child {
  border-right: 0;
}

.how-section {
  display: grid;
  grid-template-columns: minmax(250px, 0.68fr) minmax(650px, 1.32fr);
  gap: clamp(24px, 4vw, 62px);
  align-items: stretch;
  margin-top: 54px;
}

.how-copy {
  display: grid;
  align-content: center;
  gap: 15px;
  padding: 10px 0;
}

.how-copy__kicker {
  width: fit-content;
  margin: 0;
  padding: 6px 11px;
  border: 1px solid rgba(215, 179, 106, 0.5);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.84);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.how-copy h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 600;
  line-height: 0.9;
}

.how-copy p {
  max-width: 33ch;
  margin: 0;
  color: rgba(31, 39, 36, 0.76);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.38;
}

.how-copy__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.how-copy__chips span {
  min-height: 30px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(225, 215, 204, 0.88);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.78);
  color: var(--evergreen);
  box-shadow: 0 10px 24px rgba(40, 72, 63, 0.055);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.how-copy__chips span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 0 4px rgba(215, 179, 106, 0.16);
}

.how-flow {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 6%, rgba(215, 179, 106, 0.18), transparent 30%),
    linear-gradient(135deg, var(--white), #fbf3eb);
  box-shadow: 0 20px 50px rgba(40, 72, 63, 0.1);
}

.how-flow::before {
  content: "";
  position: absolute;
  left: 48px;
  right: 48px;
  top: 76px;
  height: 1px;
  background: linear-gradient(90deg, rgba(40, 72, 63, 0.14), rgba(215, 179, 106, 0.8), rgba(40, 72, 63, 0.14));
}

.how-flow__header {
  position: relative;
  z-index: 2;
  min-height: 62px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(225, 215, 204, 0.78);
  background:
    radial-gradient(circle at 96% 0%, rgba(215, 179, 106, 0.22), transparent 26%),
    linear-gradient(135deg, var(--evergreen), #18382f);
  color: var(--white);
}

.how-flow__header span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--champagne);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.how-flow__header span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 0 5px rgba(215, 179, 106, 0.18);
}

.how-flow__header strong {
  color: rgba(255, 253, 249, 0.9);
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 33px);
  font-weight: 700;
  line-height: 0.95;
}

.how-steps {
  position: relative;
  min-height: 228px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.how-step {
  min-width: 0;
  padding: 26px clamp(22px, 2.5vw, 34px) 22px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 15px;
  border-right: 1px solid rgba(225, 215, 204, 0.76);
}

.how-step:last-child {
  border-right: 0;
}

.how-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.how-step__number {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--evergreen);
  color: var(--champagne);
  box-shadow: 0 10px 22px rgba(40, 72, 63, 0.18);
  font-weight: 900;
}

.how-step__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215, 179, 106, 0.52);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.78);
  color: var(--evergreen);
}

.how-step__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.how-step h3 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(29px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 0.96;
}

.how-step p {
  margin: 8px 0 0;
  color: rgba(31, 39, 36, 0.76);
  font-size: 16px;
  line-height: 1.33;
}

.how-step__meta {
  min-height: 30px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.how-step__meta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 0 4px rgba(215, 179, 106, 0.18);
}

.how-flow__bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(225, 215, 204, 0.76);
  background: rgba(255, 253, 249, 0.64);
}

.how-flow__bottom span {
  min-height: 46px;
  padding: 12px 16px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(225, 215, 204, 0.76);
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
}

.how-flow__bottom span:last-child {
  border-right: 0;
}

.social-proof {
  --color-background: hsl(40 30% 96%);
  --color-ink: hsl(24 10% 12%);
  --color-primary-strong: hsl(28 90% 35%);
  --color-muted-foreground: hsl(24 8% 40%);
  --color-secondary: hsl(150 12% 88%);
  --color-muted: hsl(150 12% 92%);
  --color-border: hsl(30 15% 88%);
  --color-card: hsl(40 38% 99%);
  --color-star: hsl(42 64% 55%);
  --display-font: "Fraunces", Georgia, serif;
  --body-font: "Inter", "Segoe UI", sans-serif;
  width: 100%;
  margin-top: 50px;
  padding: 2.5rem 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, hsl(28 90% 35% / 0.08), transparent 26%),
    radial-gradient(circle at 92% 72%, hsl(150 12% 88% / 0.74), transparent 30%),
    var(--color-background);
}

.social-proof__header {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.social-proof__kicker {
  margin: 0;
  color: var(--color-primary-strong);
  font-family: var(--body-font);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.social-proof h2 {
  margin: 0.8rem 0 0;
  color: var(--evergreen);
  font-family: var(--display-font);
  font-size: clamp(1.875rem, 7vw, 2.65rem);
  font-weight: 650;
  line-height: 0.98;
}

.accent-italic {
  color: var(--color-primary-strong);
  font-style: italic;
}

.social-proof__subtext {
  max-width: 38rem;
  margin: 0.75rem auto 0;
  color: var(--color-muted-foreground);
  font-family: var(--body-font);
  font-size: 0.875rem;
  line-height: 1.5;
}

.marquee-stack {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
}

@keyframes marquee-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.marquee-track {
  width: max-content;
  display: flex;
  gap: 1rem;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  will-change: transform;
}

.marquee:hover .marquee-track,
.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-left .marquee-track {
  animation-name: marquee-left;
}

.marquee-right .marquee-track {
  animation-name: marquee-right;
}

.review-card {
  position: relative;
  width: 300px;
  min-height: 226px;
  flex-shrink: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-card);
  box-shadow: 0 12px 28px hsl(151 28% 22% / 0.06);
  color: var(--color-ink);
  font-family: var(--body-font);
  text-align: left;
}

.review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, hsl(40 38% 99% / 0), hsl(150 12% 88% / 0.2));
  pointer-events: none;
}

.review-card__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.rating-stars {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--color-star);
  font-size: 0.92rem;
  line-height: 1;
}

.rating-stars__star {
  position: relative;
  display: inline-block;
  color: hsl(30 15% 84%);
}

.rating-stars__star::before {
  content: "★";
  position: absolute;
  inset: 0;
  width: var(--fill, 100%);
  overflow: hidden;
  color: var(--color-star);
}

.review-card__date {
  position: relative;
  z-index: 1;
  margin: 0.45rem 0 0;
  color: var(--color-muted-foreground);
  font-size: 11px;
  line-height: 1;
}

.review-card__title {
  position: relative;
  z-index: 1;
  margin: 0.75rem 3.4rem 0 0;
  color: var(--color-ink);
  font-family: var(--body-font);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
}

.review-card__body {
  position: relative;
  z-index: 1;
  min-height: 4.55rem;
  margin: 0.4rem 0 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: var(--color-muted-foreground);
  font-size: 0.875rem;
  line-height: 1.3;
}

.review-card__footer {
  position: relative;
  z-index: 1;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid hsl(30 15% 88% / 0.7);
}

.review-card__avatar {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  flex: 0 0 1.75rem;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--evergreen);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.review-card__person {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.review-card__name {
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.review-card__planner {
  color: var(--color-muted-foreground);
  font-size: 10px;
  line-height: 1.2;
}

.final-cta {
  margin-top: 36px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 24px;
  align-items: center;
  border: 1px solid rgba(225, 215, 204, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(226, 236, 227, 0.72), rgba(242, 217, 212, 0.54) 56%, rgba(255, 253, 249, 0.92)),
    var(--ivory);
  box-shadow: 0 18px 46px rgba(40, 72, 63, 0.075);
}

.final-cta__copy {
  max-width: 650px;
}

.final-cta__kicker {
  width: fit-content;
  margin: 0 0 10px;
  padding: 7px 12px;
  border: 1px solid rgba(215, 179, 106, 0.62);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.74);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.final-cta h2 {
  margin: 0;
  max-width: 16ch;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(35px, 4vw, 52px);
  font-weight: 500;
  line-height: 1;
}

.final-cta__copy p:last-child {
  max-width: 48ch;
  margin: 12px 0 0;
  color: rgba(31, 39, 36, 0.72);
  font-size: 16px;
  line-height: 1.42;
}

.final-cta__panel {
  display: grid;
  gap: 16px;
}

.final-cta__checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.82);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.78);
}

.final-cta__checks span {
  min-height: 70px;
  padding: 12px 10px;
  display: grid;
  place-items: center;
  gap: 8px;
  border-right: 1px solid rgba(225, 215, 204, 0.82);
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
}

.final-cta__checks span:last-child {
  border-right: 0;
}

.final-cta__checks svg {
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--champagne);
}

.final-cta__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.final-cta__actions .button {
  width: 100%;
}

/* ============================================================
   SITE FOOTER
   Text on evergreen runs off its own ramp. Do not reuse
   light-background classes such as .micro-copy in here — they
   set near-black ink and drop contrast to roughly 1.3:1.
   ============================================================ */
.site-footer {
  --on-dark: var(--white);
  --on-dark-2: rgba(255, 253, 249, 0.8);
  --on-dark-3: rgba(255, 253, 249, 0.62);
  --on-dark-line: rgba(255, 253, 249, 0.18);
  margin-top: 24px;
  background: var(--evergreen);
  color: var(--on-dark);
  font-size: 15px;
}

.site-footer a {
  color: var(--on-dark-2);
  transition: color 0.15s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--champagne);
}

.site-footer__inner {
  width: var(--container);
  margin: 0 auto;
  padding: 56px 0 42px;
  display: grid;
  /* sized to content: Shop carries seven links, Company four short ones */
  grid-template-columns:
    minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 0.92fr) minmax(0, 0.98fr);
  gap: 40px 34px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.footer-brand__id,
.footer-brand__proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand__id {
  gap: 16px;
}

.footer-brand__proof {
  gap: 10px;
}

.footer-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--champagne);
}

.footer-mark:hover {
  color: var(--champagne);
}

.footer-mark__leaf {
  width: 34px;
  height: 34px;
  flex: none;
}

.footer-mark span {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  color: var(--on-dark);
}

.footer-tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: var(--on-dark-2);
}

.footer-etsy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 99px;
  border: 1px solid var(--on-dark-line);
  background: rgba(255, 253, 249, 0.06);
  font-size: 13.5px;
  color: var(--on-dark-2);
  white-space: nowrap;
}

.footer-etsy svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--champagne);
}

.footer-etsy b {
  color: var(--on-dark);
  font-weight: 700;
}

.footer-note {
  margin: 0;
  max-width: 34ch;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--on-dark-3);
}

.footer-col__label {
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--champagne);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer-col li {
  font-size: 15px;
  line-height: 1.35;
}

.footer-bottom {
  width: var(--container);
  margin: 0 auto;
  padding: 18px 0 26px;
  border-top: 1px solid var(--on-dark-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}

.footer-copy,
.footer-trust {
  font-size: 13.5px;
  color: var(--on-dark-3);
}

.footer-bottom__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.footer-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.footer-pay svg {
  width: 40px;
  height: 25px;
  flex: none;
}

/* Tablet: same four columns as desktop, only scaled down to fit. */
@media (max-width: 900px) and (min-width: 721px) {
  .site-footer__inner {
    padding: 46px 0 34px;
    gap: 30px 22px;
  }

  .footer-brand {
    gap: 17px;
  }

  .footer-mark__leaf {
    width: 30px;
    height: 30px;
  }

  .footer-mark span {
    font-size: 28px;
  }

  .footer-tagline {
    font-size: 16.5px;
  }

  .footer-col__label {
    margin-bottom: 12px;
    font-size: 10px;
    letter-spacing: 0.13em;
  }

  .footer-col li {
    font-size: 14px;
  }

  .footer-col ul {
    gap: 8px;
  }

  .footer-etsy {
    padding: 7px 11px;
    gap: 7px;
    font-size: 12.5px;
  }

  .footer-etsy svg {
    width: 13px;
    height: 13px;
  }

  .footer-note {
    max-width: 32ch;
    font-size: 11.5px;
  }

  .footer-bottom {
    padding: 16px 0 24px;
    gap: 12px 20px;
  }

  .footer-copy,
  .footer-trust {
    font-size: 12.5px;
  }

  .footer-pay {
    gap: 5px;
  }

  .footer-pay svg {
    width: 34px;
    height: 21px;
  }
}

/* Small tablets and landscape phones: two columns, brand across the top. */
@media (max-width: 720px) and (min-width: 561px) {
  .final-cta {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px;
  }

  .final-cta h2 {
    max-width: 13ch;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    padding: 44px 0 32px;
    gap: 30px 24px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-pay svg {
    width: 36px;
    height: 23px;
  }
}

@media (max-width: 560px) {
  .final-cta {
    width: calc(100vw - 18px);
    margin-top: 30px;
    padding: 18px 14px 14px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .final-cta__copy {
    text-align: center;
  }

  .final-cta__kicker {
    margin-right: auto;
    margin-left: auto;
  }

  .final-cta h2 {
    max-width: 12ch;
    margin-inline: auto;
    font-size: clamp(31px, 9vw, 39px);
  }

  .final-cta__copy p:last-child {
    max-width: 28ch;
    margin: 10px auto 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .final-cta__checks {
    grid-template-columns: repeat(3, 1fr);
  }

  .final-cta__checks span {
    min-height: 58px;
    padding: 8px 5px;
    gap: 6px;
    font-size: 11px;
  }

  .final-cta__checks svg {
    width: 22px;
    height: 22px;
  }

  .final-cta__actions {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    padding: 38px 0 28px;
    gap: 30px;
  }

  .footer-mark__leaf {
    width: 31px;
    height: 31px;
  }

  .footer-mark span {
    font-size: 29px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0 26px;
  }

  .footer-bottom__right {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-trust {
    white-space: normal;
  }
}

.page-shell,
.woocommerce .site-main {
  width: var(--container);
  margin: 0 auto;
  padding: 42px 0;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border: 1px solid rgba(225, 215, 204, 0.82);
  border-radius: 8px;
  background: var(--white);
  padding: 16px !important;
  box-shadow: var(--shadow-soft);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: 8px;
  background: var(--evergreen);
  color: var(--white);
  min-height: 44px;
  padding: 12px 18px;
}

@media (max-width: 1120px) {
  :root {
    --container: min(100vw - 32px, 960px);
  }

  .site-nav,
  .etsy-link {
    display: none;
  }

  .menu-toggle {
    display: inline-grid;
  }

  .site-nav.is-open {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 76px;
    display: grid;
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    gap: 0;
    padding: 10px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
  }

  .site-nav.is-open a {
    min-height: 44px;
    width: 100%;
    justify-content: flex-start;
    padding: 0 14px;
    border-radius: 8px;
    border: 0;
    border-bottom: 1px solid rgba(225, 215, 204, 0.58);
    color: var(--evergreen);
    text-align: left;
  }

  .site-nav.is-open a:last-child {
    border-bottom: 0;
  }

  .site-nav.is-open a:hover {
    background: var(--sage-2);
    color: var(--evergreen);
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero::after {
    display: none;
  }

  .hero-art {
    min-height: 0;
  }

  .hero-picture {
    width: min(100%, 680px);
  }

  .category-grid,
  .products-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-intro {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .product-intro .section-heading,
  .product-intro .section-note {
    grid-column: 1;
  }

  .product-intro .text-link {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .featured-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-card--feature {
    grid-column: span 2;
    grid-row: auto;
  }

  .category-carousel {
    min-height: 540px;
    padding-inline: 48px;
  }

  .category-grid {
    min-height: 470px;
  }

  .category-card {
    width: min(54vw, 460px);
    min-height: 440px;
  }

  .category-card.is-prev {
    transform: translate(calc(-50% - min(38vw, 320px)), -50%) scale(0.72);
  }

  .category-card.is-next {
    transform: translate(calc(-50% + min(38vw, 320px)), -50%) scale(0.72);
  }

  .proof-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .proof-item:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  :root {
    --container: calc(100vw - 28px);
  }

  body {
    font-size: 16px;
  }

  .offer-bar {
    padding: 8px 0 5px;
  }

  .offer-bar__inner {
    min-height: 42px;
    padding: 6px 8px 6px 14px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    border-radius: 999px;
  }

  .offer-bar__copy {
    min-width: 0;
    display: block;
    text-align: left;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .offer-bar__icon,
  .offer-bar__desktop,
  .offer-bar__cta-desktop {
    display: none;
  }

  .offer-bar__mobile,
  .offer-bar__cta-mobile {
    display: inline;
  }

  .offer-bar__cta {
    min-height: 28px;
    padding: 6px 11px;
    font-size: 12px;
  }

  .offer-bar__close {
    width: 28px;
    height: 28px;
  }

  .site-header__inner {
    min-height: 68px;
  }

  .brand-mark img {
    width: 128px;
  }

  .hero {
    padding-top: 34px;
  }

  .hero::after {
    display: none;
  }

  .hero-kicker {
    max-width: 100%;
    margin-bottom: 18px;
    padding: 8px 11px;
    font-size: 11px;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero h1 {
    font-size: clamp(46px, 14vw, 62px);
  }

  .hero-copy {
    font-size: 18px;
  }

  .hero-benefits {
    gap: 7px;
  }

  .hero-benefits span {
    min-height: 31px;
    padding: 6px 9px;
    font-size: 12px;
  }

  .button-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-trust {
    width: 100%;
    margin-top: 16px;
    padding: 7px 8px;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    overflow: hidden;
  }

  .hero-trust__desktop {
    display: none;
  }

  .hero-trust__mobile {
    display: inline;
  }

  .hero-trust__stars {
    gap: 1px;
    flex: 0 0 auto;
  }

  .hero-trust__stars span {
    width: 15px;
    height: 15px;
    font-size: 9px;
  }

  .hero-trust__source {
    gap: 3px;
  }

  .hero-trust__source svg {
    width: 12px;
    height: 12px;
  }

  .hero-art {
    min-height: 0;
    margin-top: 8px;
  }

  .hero-picture {
    width: min(100%, 430px);
  }

  /* .site-footer__inner is excluded here — the footer manages its own
     breakpoints so tablet can keep the four-column desktop layout. */
  .chart-row,
  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .proof-bar {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    margin-top: 22px;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(40, 72, 63, 0.055);
  }

  .proof-item {
    min-height: 78px;
    padding: 10px 9px;
    gap: 7px;
    border-bottom: 0;
  }

  .proof-item > svg {
    width: 30px;
    height: 30px;
    padding: 7px;
  }

  .proof-item strong {
    font-size: 12px;
    line-height: 1.12;
  }

  .proof-item em {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.08;
  }

  .proof-copy__desktop {
    display: none;
  }

  .proof-copy__mobile {
    display: inline;
  }

  .section-kicker {
    display: block;
    margin-top: 32px;
  }

  .section-note {
    margin-top: 7px;
  }

  .products-strip,
  .featured-products,
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .product-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .product-intro .section-heading,
  .product-intro .section-note,
  .product-intro .text-link {
    grid-column: 1;
    grid-row: auto;
  }

  .product-intro .text-link {
    width: fit-content;
    min-height: 34px;
    margin-top: 4px;
  }

  .featured-products {
    gap: 14px;
  }

  .featured-products .product-card {
    grid-template-rows: minmax(214px, auto) 1fr;
    border-radius: 10px;
  }

  .product-card--feature {
    grid-column: auto;
  }

  .product-card--feature .product-visual {
    min-height: 246px;
  }

  .product-card--feature .product-live {
    min-height: 202px;
  }

  .product-card--feature .product-live__phone {
    width: 78px;
    height: 128px;
  }

  .category-carousel {
    min-height: 548px;
    padding: 0 0 44px;
  }

  .category-grid {
    min-height: 488px;
  }

  .category-card {
    width: 100%;
    min-height: 472px;
    border-radius: 24px;
  }

  .category-card.is-prev,
  .category-card.is-next {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.9);
  }

  .category-card__body {
    padding: 0 22px 88px;
  }

  .category-card h3 {
    font-size: 42px;
  }

  .product-card h3 {
    font-size: 24px;
  }

  .category-carousel__arrow {
    top: auto;
    bottom: 0;
    width: 42px;
    height: 42px;
    transform: none;
  }

  .category-carousel__arrow--prev {
    left: calc(50% - 108px);
  }

  .category-carousel__arrow--next {
    right: calc(50% - 108px);
  }

  .category-carousel__dots {
    bottom: 15px;
  }

  .comparison {
    padding: 18px;
  }
}

@media (max-width: 460px) {
  .header-actions {
    gap: 5px;
  }

  .icon-link {
    display: inline-grid;
    width: 38px;
    height: 38px;
  }

  .menu-toggle {
    width: 38px;
    height: 38px;
  }

  .hero h1 {
    font-size: 50px;
  }

  .category-card {
    min-height: 438px;
  }

  .category-card__link {
    width: 100%;
    justify-content: center;
  }

  .category-tags span {
    font-size: 11px;
  }

  .category-card__top {
    left: 18px;
    right: 18px;
    top: 18px;
  }

  .category-card__body {
    padding: 0 18px 82px;
  }

  .category-card h3 {
    font-size: 36px;
  }

  .category-card p {
    font-size: 14px;
  }

  .category-card__link {
    left: 18px;
    right: 18px;
    bottom: 20px;
  }
}

@media (max-width: 1120px) {
  .product-intro {
    max-width: 760px;
    margin: 42px auto 18px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 8px;
  }

  .product-intro .section-heading,
  .product-intro .section-note,
  .product-intro .text-link {
    grid-column: 1;
    grid-row: auto;
  }

  .featured-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .product-intro {
    margin: 34px auto 14px;
    text-align: center;
  }

  .product-intro .section-heading {
    font-size: clamp(34px, 10vw, 46px);
  }

  .product-intro .section-note {
    max-width: 34ch;
    font-size: 16px;
  }

  .product-carousel {
    padding-bottom: 58px;
  }

  .featured-products {
    display: flex;
    gap: 0;
    overflow: hidden;
    scroll-behavior: smooth;
  }

  .featured-products .product-card {
    min-width: 100%;
    min-height: 0;
    opacity: 0;
    transform: translateX(12px) scale(0.98);
    pointer-events: none;
    transition: opacity 220ms ease, transform 260ms ease;
  }

  .featured-products .product-card.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
  }

  .featured-products .product-card:not(.is-active) {
    position: absolute;
    inset: 0;
  }

  .featured-products .product-visual {
    min-height: 238px;
    padding: 18px;
  }

  .product-live {
    min-height: 186px;
  }

  .product-live__screen {
    inset: 10px 54px 16px 0;
    padding: 14px;
  }

  .product-live__stats span {
    min-height: 58px;
  }

  .product-live__stats strong {
    font-size: 22px;
  }

  .product-live__phone {
    width: 74px;
    height: 122px;
  }

  .featured-products .product-card__body {
    min-height: 0;
    padding: 22px 20px 20px;
  }

  .featured-products .product-card h3,
  .featured-products .product-card:not(.product-card--feature) h3 {
    min-height: 0;
    font-size: 30px;
  }

  .featured-products .product-card p {
    min-height: 0;
    font-size: 16px;
  }

  .product-carousel__arrow {
    position: absolute;
    bottom: 0;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(225, 215, 204, 0.86);
    border-radius: 50%;
    background: rgba(255, 253, 249, 0.92);
    color: var(--evergreen);
    box-shadow: 0 10px 22px rgba(40, 72, 63, 0.08);
  }

  .product-carousel__arrow svg {
    width: 21px;
    height: 21px;
  }

  .product-carousel__arrow--prev {
    left: calc(50% - 108px);
  }

  .product-carousel__arrow--next {
    right: calc(50% - 108px);
  }

  .product-carousel__dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    transform: translateX(-50%);
  }

  .product-carousel__dots button {
    width: 10px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(40, 72, 63, 0.28);
  }

  .product-carousel__dots button.is-active {
    width: 32px;
    background: var(--evergreen);
  }
}

@media (max-width: 460px) {
  .featured-products .product-visual {
    min-height: 218px;
  }

  .product-live {
    min-height: 168px;
  }

  .product-live__screen {
    inset: 8px 48px 16px 0;
    padding: 12px;
  }

  .product-live__stats {
    gap: 7px;
  }

  .product-live__stats span {
    min-height: 54px;
    padding: 9px 10px;
  }

  .product-live__stats small {
    font-size: 10px;
  }

  .product-live__stats strong {
    font-size: 20px;
  }

  .product-live__chart {
    height: 58px;
  }

  .product-live__phone {
    width: 68px;
    height: 112px;
    border-width: 5px;
  }

  .product-card__meta {
    gap: 6px;
  }

  .product-card__meta span {
    font-size: 11px;
  }
}

/* Product shelf correction */
.product-intro {
  width: 100%;
  max-width: none;
  margin: 38px 0 14px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.product-intro__eyebrow {
  grid-column: 1;
  justify-self: center;
}

.product-intro__eyebrow::before {
  border: 1px solid var(--champagne);
  border-radius: 2px;
  background: transparent;
  transform: rotate(45deg);
}

.product-intro .section-heading {
  grid-column: 1;
  width: fit-content;
  max-width: min(100%, 760px);
  margin-inline: auto;
  justify-self: center;
  text-align: center;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.02;
}

.product-intro .section-note {
  grid-column: 1;
  width: fit-content;
  max-width: 540px;
  margin: 0 auto;
  justify-self: center;
  text-align: center;
  font-size: 17px;
  line-height: 1.45;
}

.product-intro .text-link {
  grid-column: 1;
  margin-top: 4px;
  align-self: auto;
  justify-self: center;
}

@media (max-width: 1120px) {
  .product-intro {
    margin: 34px 0 14px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 760px) {
  .product-intro {
    margin: 30px 0 12px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
    text-align: center;
  }

  .product-intro__eyebrow,
  .product-intro .section-heading,
  .product-intro .section-note,
  .product-intro .text-link {
    grid-column: 1;
    grid-row: auto;
  }

  .product-intro .section-heading {
    max-width: 100%;
    font-size: clamp(30px, 7.6vw, 36px);
    line-height: 1.04;
  }

  .product-intro .section-note {
    max-width: 38ch;
    font-size: 15px;
  }

  .product-intro .text-link {
    margin-top: 2px;
    justify-self: center;
  }
}

/* Square product card system */
.featured-products {
  align-items: start;
}

.featured-products .product-card {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(255, 249, 244, 0.94));
  box-shadow: 0 24px 60px rgba(40, 72, 63, 0.12);
}

.featured-products .product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 68px rgba(40, 72, 63, 0.15);
}

.featured-products .product-visual {
  position: relative;
  min-height: 0;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  padding: 0;
  background: var(--evergreen);
}

.featured-products .product-card__image {
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  object-fit: cover;
  transition: transform 380ms ease;
}

.featured-products .product-card:hover .product-card__image {
  transform: scale(1.035);
}

.featured-products .badge {
  position: absolute;
  z-index: 2;
  left: 14px;
  top: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--champagne);
  color: var(--evergreen);
  box-shadow: 0 10px 22px rgba(31, 39, 36, 0.16);
  font-size: 12px;
  font-weight: 900;
}

.product-media__cue {
  position: absolute;
  right: 14px;
  bottom: 14px;
  min-height: 34px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.9);
  color: var(--evergreen);
  box-shadow: 0 10px 24px rgba(31, 39, 36, 0.16);
  font-size: 12px;
  font-weight: 900;
}

.featured-products .product-card__body {
  min-height: 0;
  padding: 19px 20px 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.product-card__topline {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(31, 39, 36, 0.54);
  font-size: 13px;
  font-style: italic;
}

.product-card__proof {
  color: var(--evergreen);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.product-card__title {
  display: block;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(28px, 2.35vw, 34px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
}

.product-card__title:hover {
  color: var(--blush);
}

.featured-products .product-card p {
  min-height: 62px;
  margin: 11px 0 17px;
  color: rgba(31, 39, 36, 0.72);
  font-size: 15px;
  line-height: 1.42;
}

.product-card__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: auto 0 17px;
  border-block: 1px solid rgba(225, 215, 204, 0.78);
}

.product-card__specs span {
  min-height: 58px;
  padding: 10px 7px;
  display: grid;
  align-content: center;
  gap: 2px;
  border-right: 1px solid rgba(225, 215, 204, 0.78);
  text-align: center;
}

.product-card__specs span:last-child {
  border-right: 0;
}

.product-card__specs strong {
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
}

.product-card__specs small {
  color: rgba(31, 39, 36, 0.5);
  font-size: 11px;
  font-style: italic;
  line-height: 1.05;
}

.product-card__purchase {
  min-height: 58px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(130, 70, 48, 0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--blush), #ad5f5a);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 249, 0.22),
    0 14px 24px rgba(201, 121, 115, 0.24);
  font-size: clamp(13px, 1.08vw, 16px);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 0 rgba(31, 39, 36, 0.18);
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.product-card__purchase:hover {
  transform: translateY(-2px);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 249, 0.24),
    0 18px 30px rgba(201, 121, 115, 0.3);
}

@media (max-width: 760px) {
  .featured-products .product-card {
    border-radius: 18px;
  }

  .featured-products .product-card__body {
    padding: 18px;
  }

  .featured-products .product-card p {
    min-height: 0;
    font-size: 15px;
  }

  .product-card__title {
    font-size: 31px;
  }

  .product-media__cue {
    display: none;
  }

  .product-card__purchase {
    min-height: 56px;
    font-size: 16px;
  }
}

@media (min-width: 761px) and (max-width: 1220px) {
  .product-card__purchase {
    font-size: 13px;
  }
}

/* Cart and checkout */
.commerce-shell {
  width: var(--container);
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 34px) 0 clamp(36px, 5vw, 68px);
}

.commerce-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 2.8vw, 38px);
  align-items: end;
  margin-bottom: clamp(16px, 2.2vw, 26px);
}

.commerce-eyebrow {
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(215, 179, 106, 0.44);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.78);
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 800;
}

.commerce-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--champagne);
}

.commerce-hero h1 {
  max-width: 13ch;
  margin: 10px 0 6px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 66px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: 0;
}

.commerce-hero p {
  max-width: 52ch;
  margin: 0;
  color: rgba(31, 39, 36, 0.72);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.55;
}

.commerce-steps {
  margin: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 6px;
  list-style: none;
  border: 1px solid rgba(225, 215, 204, 0.82);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.74);
  box-shadow: 0 16px 42px rgba(40, 72, 63, 0.08);
}

.commerce-steps li {
  min-height: 40px;
  padding: 6px 14px 6px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  color: rgba(31, 39, 36, 0.62);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.commerce-steps span {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(226, 236, 227, 0.82);
  color: var(--evergreen);
  font-size: 12px;
}

.commerce-steps .is-active {
  background: var(--evergreen);
  color: var(--white);
}

.commerce-steps .is-active span {
  background: var(--champagne);
  color: var(--evergreen);
}

.commerce-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(18px, 2.6vw, 34px);
  align-items: start;
}

.commerce-shell--checkout .commerce-layout {
  grid-template-columns: minmax(0, 980px);
  justify-content: center;
}

.commerce-shell--checkout .commerce-assurance {
  display: none;
}

.commerce-panel,
.commerce-assurance {
  min-width: 0;
}

.commerce-panel {
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 0, rgba(215, 179, 106, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(255, 253, 249, 0.94), rgba(255, 249, 244, 0.98));
  box-shadow: 0 30px 70px rgba(40, 72, 63, 0.1);
  overflow: hidden;
}

.commerce-panel .page-content,
.commerce-panel .entry-content {
  margin: 0;
}

.commerce-assurance {
  position: sticky;
  top: 128px;
  display: grid;
  gap: 14px;
}

.commerce-assurance__card,
.commerce-assurance__list {
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.commerce-assurance__card {
  padding: 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(215, 179, 106, 0.24), transparent 34%),
    linear-gradient(145deg, #28483f, #1f332d);
  color: var(--white);
}

.commerce-assurance__card span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 253, 249, 0.68);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
}

.commerce-assurance__card strong {
  min-height: 40px;
  margin-top: 8px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(215, 179, 106, 0.42);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.08);
  color: var(--white);
  font-size: 15px;
  font-weight: 900;
}

.commerce-assurance__card strong::after {
  content: "auto";
  color: var(--champagne);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.commerce-assurance__card p {
  margin: 14px 0 0;
  color: rgba(255, 253, 249, 0.76);
  font-size: 13px;
  line-height: 1.45;
}

.commerce-assurance__list {
  padding: 10px;
}

.commerce-assurance__list p {
  margin: 0;
  padding: 14px 12px;
  display: grid;
  gap: 2px;
  border-bottom: 1px solid rgba(225, 215, 204, 0.72);
}

.commerce-assurance__list p:last-child {
  border-bottom: 0;
}

.commerce-assurance__list b {
  color: var(--evergreen);
  font-size: 14px;
}

.commerce-assurance__list span {
  color: rgba(31, 39, 36, 0.58);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.35;
}

.commerce-shell--cart .commerce-hero {
  width: 100%;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.commerce-shell--cart .commerce-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.commerce-shell--cart .commerce-hero h1 {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(52px, 5.5vw, 78px);
}

.commerce-shell--cart .commerce-hero p {
  display: none;
}

.commerce-shell--cart .commerce-steps {
  width: min(430px, 100%);
}

.commerce-panel .wp-block-woocommerce-cart,
.commerce-panel .wp-block-woocommerce-checkout {
  margin: 0;
  padding: clamp(16px, 2.6vw, 28px);
}

.commerce-panel .wc-block-cart,
.commerce-panel .wc-block-components-sidebar-layout,
.commerce-panel .wc-block-checkout {
  margin: 0;
}

.commerce-panel .wc-block-cart__main,
.commerce-panel .wc-block-checkout__main,
.commerce-panel .wc-block-components-sidebar-layout .wc-block-components-main {
  padding-right: clamp(18px, 2.4vw, 32px);
}

.commerce-panel .wc-block-cart__sidebar,
.commerce-panel .wc-block-checkout__sidebar,
.commerce-panel .wc-block-components-sidebar {
  padding-left: clamp(18px, 2.4vw, 32px);
  border-left: 1px solid rgba(225, 215, 204, 0.82);
}

.commerce-panel table,
.commerce-panel .wc-block-cart-items,
.commerce-panel .wc-block-components-totals-wrapper {
  border-color: rgba(225, 215, 204, 0.82) !important;
}

.commerce-panel .wc-block-cart-items__header th,
.commerce-panel .wc-block-components-totals-item__label,
.commerce-panel .wc-block-components-checkout-step__heading,
.commerce-panel .wc-block-components-title {
  color: var(--evergreen);
  font-weight: 900;
}

.commerce-panel .wc-block-components-checkout-step__title,
.commerce-panel .wc-block-cart__totals-title,
.commerce-panel .wc-block-components-order-summary__button-text,
.commerce-panel .wc-block-components-panel__button {
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.commerce-panel .wc-block-cart-items__row,
.commerce-panel .wc-block-components-order-summary-item {
  background: rgba(255, 253, 249, 0.74);
}

.commerce-panel .wc-block-cart-item__image {
  width: 132px !important;
  min-width: 132px !important;
  padding-right: 18px !important;
}

.commerce-panel .wc-block-cart-item__image a {
  width: 114px !important;
  height: 114px !important;
  display: block !important;
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.82);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(40, 72, 63, 0.1);
}

.commerce-panel .wc-block-cart-item__image img {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0;
  border-radius: 13px;
  background: var(--white);
}

.commerce-panel .wc-block-components-order-summary-item__image img {
  object-fit: cover;
  border: 0;
  background: var(--white);
}

.commerce-panel .wc-block-components-product-name,
.commerce-panel .wc-block-cart-item__product .wc-block-components-product-name {
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 500;
  line-height: 1.05;
  text-decoration: none;
}

.commerce-panel .wc-block-components-order-summary .wc-block-components-product-name {
  color: var(--evergreen);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.18;
}

.commerce-panel .wc-block-components-product-name:hover {
  color: var(--blush);
}

.commerce-panel .wc-block-components-product-metadata,
.commerce-panel .wc-block-components-product-metadata__description,
.commerce-panel .wc-block-components-totals-item__description,
.commerce-panel .wc-block-components-checkout-step__description {
  color: rgba(31, 39, 36, 0.62);
  font-size: 14px;
  line-height: 1.45;
}

.commerce-panel .wc-block-components-quantity-selector {
  border: 1px solid rgba(40, 72, 63, 0.24);
  border-radius: 999px;
  background: var(--white);
  overflow: hidden;
}

.commerce-panel .wc-block-components-quantity-selector input {
  color: var(--evergreen);
  font-weight: 900;
}

.commerce-panel .wc-block-cart-item__remove-link {
  color: rgba(31, 39, 36, 0.54) !important;
  font-size: 13px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.commerce-panel .wc-block-cart-item__remove-link:hover {
  color: var(--blush) !important;
}

.commerce-panel .wc-block-components-product-price,
.commerce-panel .wc-block-components-totals-item__value,
.commerce-panel .wc-block-components-order-summary-item__total-price {
  color: var(--evergreen);
  font-weight: 900;
}

.commerce-panel .wc-block-components-totals-wrapper {
  padding: 16px 0;
}

.commerce-panel .wc-block-components-totals-discount,
.commerce-panel .wc-block-components-totals-fees {
  color: var(--evergreen);
}

.commerce-panel .wc-block-components-totals-discount .wc-block-components-totals-item__value,
.commerce-panel .wc-block-components-totals-fees .wc-block-components-totals-item__value {
  color: var(--blush);
}

.commerce-panel .wc-block-components-totals-footer-item {
  padding-top: 18px;
  border-top: 1px solid rgba(40, 72, 63, 0.18);
}

.commerce-panel .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.commerce-panel .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 20px;
}

.commerce-panel .wc-block-components-text-input input,
.commerce-panel .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.commerce-panel .wc-block-components-form .wc-block-components-text-input input,
.commerce-panel .wc-block-components-textarea {
  min-height: 50px;
  border: 1px solid rgba(40, 72, 63, 0.22) !important;
  border-radius: 10px !important;
  background: rgba(255, 253, 249, 0.92) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.commerce-panel .wc-block-components-text-input label,
.commerce-panel .wc-block-components-combobox .wc-block-components-combobox-control label.components-base-control__label {
  color: rgba(31, 39, 36, 0.58) !important;
}

.commerce-panel .wc-block-components-text-input input:focus,
.commerce-panel .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
.commerce-panel .wc-block-components-textarea:focus {
  border-color: var(--evergreen) !important;
  box-shadow: 0 0 0 3px rgba(226, 236, 227, 0.95) !important;
}

.commerce-panel .wc-block-components-button,
.commerce-panel .wc-block-cart__submit-button,
.commerce-panel .wc-block-components-checkout-place-order-button {
  min-height: 58px;
  border: 1px solid rgba(151, 76, 70, 0.24) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, var(--blush), #ad5f5a) !important;
  color: var(--white) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 249, 0.22),
    0 18px 34px rgba(173, 95, 90, 0.22);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

.commerce-panel .wc-block-components-button:hover,
.commerce-panel .wc-block-cart__submit-button:hover,
.commerce-panel .wc-block-components-checkout-place-order-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.commerce-panel .wc-block-components-button.is-link {
  min-height: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--evergreen) !important;
  box-shadow: none;
}

.commerce-panel .wc-block-components-notice-banner,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
  margin: 0 0 18px;
  border: 1px solid rgba(225, 215, 204, 0.86) !important;
  border-radius: 12px;
  background: var(--sage-2) !important;
  color: var(--evergreen);
}

.commerce-panel .wc-block-components-empty-cart {
  padding: clamp(28px, 5vw, 58px) clamp(16px, 3vw, 34px);
  text-align: center;
}

.commerce-panel .wc-block-components-empty-cart__title,
.commerce-panel .cart-empty {
  margin: 0 0 12px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 500;
  line-height: 0.94;
}

.commerce-panel .return-to-shop {
  text-align: center;
}

.commerce-panel .return-to-shop .button {
  background: var(--evergreen);
}

.cart-recommendations {
  margin: 0 clamp(16px, 2.6vw, 28px) clamp(18px, 2.6vw, 28px);
  padding-top: clamp(18px, 2.8vw, 30px);
  border-top: 1px solid rgba(225, 215, 204, 0.82);
}

.cart-recommendations__head {
  margin-bottom: clamp(14px, 1.8vw, 20px);
  display: block;
  text-align: center;
}

.cart-recommendations h2 {
  width: fit-content;
  max-width: min(100%, 820px);
  margin: 0 auto;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(36px, 4.2vw, 54px);
  font-weight: 500;
  line-height: 0.96;
}

.cart-recommendations__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.cart-recommendation-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 0, rgba(215, 179, 106, 0.16), transparent 38%),
    rgba(255, 253, 249, 0.92);
  box-shadow: 0 16px 36px rgba(40, 72, 63, 0.07);
}

.cart-recommendation-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid rgba(225, 215, 204, 0.74);
  background: var(--white);
}

.cart-recommendation-card__image img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 220ms ease;
}

.cart-recommendation-card:hover .cart-recommendation-card__image img {
  transform: scale(1.025);
}

.cart-recommendation-card__body {
  padding: 14px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-recommendation-card__title {
  min-height: 78px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.02;
}

.cart-recommendation-card__title:hover {
  color: #a96732;
}

.cart-recommendation-card p {
  min-height: 0;
  margin: 0;
  color: rgba(31, 39, 36, 0.67);
  font-size: 14px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.cart-recommendation-card__meta {
  min-height: 30px;
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(225, 215, 204, 0.78);
}

.cart-recommendation-card__meta > span {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 3px 7px;
  min-width: 0;
  color: var(--evergreen);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.cart-recommendation-card__meta > span .woocommerce-Price-amount {
  display: inline !important;
  white-space: nowrap;
}

.cart-recommendation-card__meta > span .woocommerce-Price-currencySymbol {
  display: inline !important;
}

.cart-recommendation-card__meta del {
  display: inline-flex;
  margin-right: 0;
  color: rgba(31, 39, 36, 0.48);
  font-size: 13px;
  line-height: 1;
}

.cart-recommendation-card__meta ins {
  display: inline-flex;
  text-decoration: none;
  line-height: 1;
}

.cart-recommendation-card__meta em {
  padding: 5px 7px;
  border-radius: 4px;
  background: rgba(226, 236, 227, 0.78);
  color: var(--evergreen);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.cart-recommendation-card__button {
  min-height: 44px;
  margin-top: 8px;
  padding: 12px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--blush), #ad5f5a);
  color: var(--white);
  box-shadow: 0 14px 28px rgba(173, 95, 90, 0.2);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.cart-recommendation-card__button:hover {
  transform: translateY(-1px);
}

.commerce-shell--checkout .woocommerce-notices-wrapper {
  display: grid;
  gap: 10px;
}

.commerce-shell--checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 18px;
}

.commerce-shell--checkout form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
  align-items: start;
}

.commerce-shell--checkout #customer_details {
  width: 100%;
  padding: clamp(16px, 2.4vw, 24px);
}

.commerce-shell--checkout #customer_details::before {
  content: "Your account will be created from this email so you can access downloads and future updates.";
  margin-bottom: 18px;
  padding: 13px 15px;
  display: block;
  border: 1px solid rgba(215, 179, 106, 0.42);
  border-radius: 12px;
  background: rgba(226, 236, 227, 0.56);
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 800;
}

.commerce-shell--checkout #customer_details .col-1,
.commerce-shell--checkout #customer_details .col-2 {
  width: 100%;
  float: none;
}

.commerce-shell--checkout #customer_details .col-2,
.commerce-shell--checkout .woocommerce-additional-fields {
  display: none;
}

.commerce-shell--checkout .woocommerce-billing-fields h3,
.commerce-shell--checkout #order_review_heading {
  margin: 0 0 18px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1;
}

.commerce-shell--checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.commerce-shell--checkout #billing_email_field,
.commerce-shell--checkout #billing_phone_field {
  grid-column: 1 / -1;
}

.commerce-shell--checkout .form-row {
  width: auto !important;
  float: none !important;
  margin: 0;
  padding: 0;
}

.commerce-shell--checkout .form-row-first,
.commerce-shell--checkout .form-row-last {
  width: auto !important;
  float: none !important;
}

.commerce-shell--checkout .form-row label {
  margin-bottom: 7px;
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 900;
}

.commerce-shell--checkout .form-row .required {
  color: var(--blush);
}

.commerce-shell--checkout .input-text,
.commerce-shell--checkout select,
.commerce-shell--checkout textarea {
  min-height: 54px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid rgba(40, 72, 63, 0.24);
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.92);
  color: var(--ink);
  font: 600 16px var(--sans);
  box-shadow: none;
}

.commerce-shell--checkout .input-text:focus,
.commerce-shell--checkout select:focus,
.commerce-shell--checkout textarea:focus {
  border-color: var(--evergreen);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(226, 236, 227, 0.95);
}

.commerce-shell--checkout #order_review_heading,
.commerce-shell--checkout #order_review {
  grid-column: auto;
}

.commerce-shell--checkout #order_review_heading {
  margin: 4px 0 -20px;
  padding: 24px 24px 0;
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--white);
}

.commerce-shell--checkout #order_review {
  padding: 24px;
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 0 0 18px 18px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.commerce-shell--checkout .shop_table {
  margin: 0 0 18px;
  border: 0;
  border-collapse: collapse;
}

.commerce-shell--checkout .shop_table th,
.commerce-shell--checkout .shop_table td {
  padding: 13px 0;
  border-color: rgba(225, 215, 204, 0.82);
  color: var(--evergreen);
  font-size: 14px;
}

.commerce-shell--checkout .shop_table .product-name {
  max-width: none;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.25;
}

.commerce-shell--checkout .order-total th,
.commerce-shell--checkout .order-total td {
  color: var(--evergreen);
  font-size: 18px;
  font-weight: 900;
}

.commerce-shell--checkout .woocommerce-checkout-payment {
  border-radius: 14px !important;
  background: var(--sage-2) !important;
}

.commerce-shell--checkout #place_order {
  width: 100%;
  min-height: 58px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--blush), #ad5f5a);
  box-shadow: 0 18px 34px rgba(173, 95, 90, 0.22);
  font-size: 16px;
  font-weight: 900;
}

@media (max-width: 1120px) {
  .commerce-layout {
    grid-template-columns: 1fr;
  }

  .commerce-shell--checkout .commerce-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .commerce-assurance {
    position: static;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 782px) {
  .commerce-shell {
    width: calc(100vw - 18px);
    padding-top: 16px;
  }

  .commerce-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 14px;
  }

  .commerce-hero h1 {
    max-width: 9ch;
    font-size: clamp(38px, 11.5vw, 52px);
  }

  .commerce-hero p {
    max-width: 33ch;
    font-size: 15.5px;
  }

  .commerce-steps {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 14px;
  }

  .commerce-steps li {
    min-height: 38px;
    padding: 5px;
    gap: 5px;
    font-size: 12px;
  }

  .commerce-steps span {
    width: 23px;
    height: 23px;
  }

  .commerce-panel {
    border-radius: 14px;
  }

  .commerce-panel .wp-block-woocommerce-cart,
  .commerce-panel .wp-block-woocommerce-checkout {
    padding: 12px;
  }

  .cart-recommendations__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commerce-panel .wc-block-cart__main,
  .commerce-panel .wc-block-checkout__main,
  .commerce-panel .wc-block-components-sidebar-layout .wc-block-components-main,
  .commerce-panel .wc-block-cart__sidebar,
  .commerce-panel .wc-block-checkout__sidebar,
  .commerce-panel .wc-block-components-sidebar {
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
  }

.commerce-panel .wc-block-cart-items__row {
  border: 1px solid rgba(225, 215, 204, 0.82);
  border-radius: 14px;
  background: var(--white);
}

.commerce-panel .wc-block-cart-item__image {
  width: 102px !important;
  min-width: 102px !important;
  padding-right: 18px !important;
}

.commerce-panel .wc-block-cart-item__image a {
  width: 84px;
  height: 84px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.78);
  border-radius: 14px;
  background: var(--white);
}

.commerce-panel .wc-block-cart-item__image img {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}

  .commerce-panel .wc-block-components-product-name,
  .commerce-panel .wc-block-cart-item__product .wc-block-components-product-name {
    font-size: 26px;
  }

  .commerce-assurance {
    grid-template-columns: 1fr;
  }

  .commerce-shell--checkout form.checkout.woocommerce-checkout {
    grid-template-columns: 1fr;
  }

  .commerce-shell--checkout .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .commerce-shell--checkout #order_review_heading,
  .commerce-shell--checkout #order_review {
    grid-column: auto;
  }

  .commerce-shell--checkout #order_review_heading {
    margin-bottom: -18px;
    padding: 20px 18px 0;
  }

  .commerce-shell--checkout #order_review {
    padding: 18px;
  }
}

@media (max-width: 430px) {
  .commerce-shell {
    width: calc(100vw - 12px);
  }

  .commerce-hero h1 {
    font-size: 38px;
  }

  .commerce-steps {
    padding: 7px;
    gap: 4px;
  }

  .commerce-steps li {
    font-size: 11px;
  }

  .commerce-steps span {
    display: none;
  }

  .commerce-assurance__card,
  .commerce-assurance__list {
    border-radius: 14px;
  }
}

@media (max-width: 760px) {
  .commerce-shell--cart .commerce-hero {
    margin-bottom: 12px;
    gap: 10px;
  }

  .commerce-shell--cart .commerce-hero h1 {
    font-size: clamp(36px, 10.5vw, 46px);
  }

  .cart-recommendations {
    margin: 0 12px 16px;
    padding-top: 18px;
  }

  .cart-recommendations__head {
    margin-bottom: 12px;
    text-align: center;
  }

  .cart-recommendations h2 {
    max-width: 12ch;
    font-size: clamp(30px, 8.5vw, 38px);
  }

  .cart-recommendations__rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cart-recommendation-card {
    border-radius: 14px;
  }

  .cart-recommendation-card__title {
    font-size: 20px;
  }

  .cart-recommendation-card__body {
    min-height: 184px;
    padding: 11px;
    gap: 9px;
  }

  .cart-recommendation-card__title {
    min-height: 62px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .cart-recommendation-card p {
    min-height: 0;
    display: none;
  }

  .cart-recommendation-card__meta {
    min-height: 30px;
    margin-top: auto;
    align-items: center;
    flex-direction: row;
    gap: 7px;
  }

  .cart-recommendation-card__meta > span {
    gap: 2px 5px;
    font-size: 14px;
  }

  .cart-recommendation-card__meta del {
    font-size: 11px;
  }

  .cart-recommendation-card__meta em {
    padding: 4px 6px;
    font-size: 10px;
  }

  .cart-recommendation-card__button {
    min-height: 40px;
    font-size: 13px;
  }

  .commerce-panel .wc-block-cart-items__row {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 0 12px !important;
    padding: 12px !important;
    align-items: start !important;
  }

  .commerce-panel .wc-block-cart-item__image {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 92px !important;
    min-width: 92px !important;
    padding: 0 !important;
  }

  .commerce-panel .wc-block-cart-item__image a {
    width: 92px !important;
    height: 92px !important;
  }

  .commerce-panel .wc-block-cart-item__product {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .commerce-panel .wc-block-cart-item__product .wc-block-components-product-name {
    display: block;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.18;
  }

  .commerce-panel .wc-block-cart-item__product .wc-block-components-product-metadata {
    display: none;
  }

  .commerce-panel .wc-block-cart-item__total {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    padding: 5px 0 0 !important;
    justify-content: flex-start !important;
  }

  .commerce-panel .wc-block-cart-item__quantity {
    width: 100% !important;
    margin-top: 9px !important;
    justify-content: space-between !important;
  }

  .commerce-panel .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    margin-left: 8px !important;
  }
}

/* Checkout reset and polish */
.commerce-shell--checkout {
  padding-top: clamp(14px, 2.1vw, 26px);
}

.commerce-shell--checkout .commerce-hero {
  width: 100%;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.commerce-shell--checkout .commerce-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.commerce-shell--checkout .commerce-hero h1 {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(42px, 4.6vw, 62px);
}

.commerce-shell--checkout .commerce-hero p {
  display: none;
}

.commerce-shell--checkout .commerce-steps {
  width: min(430px, 100%);
}

.commerce-shell--checkout .commerce-layout {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.commerce-shell--checkout .commerce-panel {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  margin-inline: auto;
  border-radius: 26px;
  background:
    radial-gradient(circle at 8% 0, rgba(242, 217, 212, 0.32), transparent 28%),
    radial-gradient(circle at 100% 8%, rgba(215, 179, 106, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(250, 243, 236, 0.98));
  box-shadow: 0 30px 80px rgba(40, 72, 63, 0.12);
}

.commerce-shell--checkout .commerce-panel .wp-block-woocommerce-checkout {
  width: 100%;
  max-width: none;
  padding: clamp(16px, 2.8vw, 34px);
}

.commerce-shell--checkout .wc-block-components-sidebar-layout {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 0.76fr) minmax(440px, 1.24fr) !important;
  gap: clamp(18px, 2.6vw, 30px) !important;
  align-items: start;
}

.commerce-shell--checkout .wc-block-components-sidebar-layout .wc-block-components-main,
.commerce-shell--checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

.commerce-shell--checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
  border-left: 0;
}

.commerce-shell--checkout .wc-block-components-checkout-step,
.commerce-shell--checkout .wc-block-checkout__payment-method {
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.9);
  box-shadow: 0 16px 36px rgba(40, 72, 63, 0.07);
}

.commerce-shell--checkout .wc-block-components-checkout-step {
  margin: 0 0 16px;
  padding: clamp(18px, 2.3vw, 26px);
}

.commerce-shell--checkout .wc-block-checkout__contact-fields {
  margin-bottom: 0;
  padding-bottom: 12px;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 16px 36px rgba(40, 72, 63, 0.07);
}

.commerce-shell--checkout .wc-block-checkout__billing-fields {
  margin-top: 0;
  margin-bottom: 16px;
  padding-top: 0;
  border-top: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 34px rgba(40, 72, 63, 0.06);
}

.commerce-shell--checkout .wc-block-checkout__billing-fields .wc-block-components-checkout-step__heading {
  display: none;
}

.commerce-shell--checkout .wc-block-components-checkout-step__heading {
  margin: 0 0 16px;
  padding: 0 0 13px;
  border-bottom: 1px solid rgba(225, 215, 204, 0.78);
}

.commerce-shell--checkout .wc-block-components-checkout-step__title,
.commerce-shell--checkout .wc-block-components-title,
.commerce-shell--checkout .wc-block-components-order-summary__button-text {
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1;
}

.commerce-shell--checkout .wc-block-components-checkout-step__description {
  color: rgba(31, 39, 36, 0.62);
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
}

.commerce-shell--checkout .wc-block-components-address-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.commerce-shell--checkout .wc-block-components-address-form__email,
.commerce-shell--checkout .wc-block-components-address-form__phone {
  grid-column: 1 / -1;
}

.commerce-shell--checkout .wc-block-components-address-form__country,
.commerce-shell--checkout .wc-block-components-address-form__address_1,
.commerce-shell--checkout .wc-block-components-address-form__address_2,
.commerce-shell--checkout .wc-block-components-address-form__city,
.commerce-shell--checkout .wc-block-components-address-form__state,
.commerce-shell--checkout .wc-block-components-address-form__postcode {
  display: none !important;
}

.commerce-shell--checkout .wc-block-checkout__order-notes {
  display: none !important;
}

.commerce-shell--checkout .wc-block-components-text-input input,
.commerce-shell--checkout .wc-block-components-textarea,
.commerce-shell--checkout .wc-blocks-components-select__select {
  min-height: 54px !important;
  border-radius: 12px !important;
  border-color: rgba(40, 72, 63, 0.2) !important;
  background: rgba(255, 253, 249, 0.94) !important;
}

.commerce-shell--checkout .wc-block-components-text-input input:focus,
.commerce-shell--checkout .wc-block-components-textarea:focus,
.commerce-shell--checkout .wc-blocks-components-select__select:focus {
  border-color: var(--evergreen) !important;
  box-shadow: 0 0 0 4px rgba(226, 236, 227, 0.9) !important;
}

.commerce-shell--checkout .wc-block-components-checkbox,
.commerce-shell--checkout .wc-block-checkout__add-note {
  color: rgba(31, 39, 36, 0.72);
  font-size: 14px;
}

.commerce-shell--checkout .wc-block-components-sidebar {
  position: static;
  top: auto;
  align-self: start !important;
  display: block;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-block,
.commerce-shell--checkout .fluvana-checkout-faq {
  width: 100%;
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 16px 36px rgba(40, 72, 63, 0.07);
}

.commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-block {
  min-height: 0 !important;
  display: block;
  overflow: hidden;
}

.commerce-shell--checkout .wc-block-components-order-summary__button-text {
  padding: 22px 24px 16px;
}

.commerce-shell--checkout .fluvana-order-summary-head {
  margin: 0 24px;
  padding: 0 0 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  border-bottom: 1px solid rgba(225, 215, 204, 0.78);
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.commerce-shell--checkout .wc-block-components-order-summary {
  padding: 0 24px;
  border-radius: 16px;
}

.commerce-shell--checkout .wc-block-components-order-summary-item {
  position: relative;
  padding: 15px 0;
  border-bottom: 1px solid rgba(225, 215, 204, 0.76);
  background: transparent;
}

.commerce-shell--checkout .wc-block-components-order-summary-item__image {
  width: 100px !important;
  height: 100px !important;
  flex: 0 0 100px !important;
  position: relative;
  overflow: visible;
  border: 1px solid rgba(225, 215, 204, 0.78);
  border-radius: 16px;
  background: var(--white);
}

.commerce-shell--checkout .wc-block-components-order-summary-item__image img {
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  height: 98px !important;
  min-height: 98px !important;
  max-height: 98px !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  border-radius: 15px;
  object-fit: cover !important;
  object-position: center center !important;
}

.commerce-shell--checkout .wc-block-components-order-summary-item__quantity {
  top: 6px !important;
  right: 6px !important;
  z-index: 2;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center;
  border: 2px solid var(--white);
  border-radius: 50% !important;
  background: var(--evergreen) !important;
  color: var(--white) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 12px rgba(40, 72, 63, 0.16);
}

.commerce-shell--checkout .wc-block-components-product-name {
  font-size: 16px;
  font-weight: 900;
}

.commerce-shell--checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata {
  display: none;
}

.commerce-shell--checkout .fluvana-order-remove {
  min-height: 30px;
  margin-top: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(173, 95, 90, 0.28);
  border-radius: 999px;
  background: rgba(242, 217, 212, 0.34);
  color: #8e4742;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.commerce-shell--checkout .fluvana-order-remove:hover,
.commerce-shell--checkout .fluvana-order-remove:focus-visible {
  background: rgba(201, 121, 115, 0.18);
  border-color: rgba(173, 95, 90, 0.5);
}

.commerce-shell--checkout .fluvana-order-remove[disabled] {
  cursor: wait;
  opacity: 0.62;
}

.commerce-shell--checkout .wc-block-components-totals-footer-item {
  margin-top: 0;
  padding-top: 0;
}

.commerce-shell--checkout .fluvana-total-wrapper {
  margin-top: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
  padding-bottom: 0 !important;
}

.commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-block > .wc-block-components-totals-wrapper {
  padding-right: 24px;
  padding-left: 24px;
}

.commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-discount-block:empty,
.commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-fee-block:empty,
.commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-shipping-block:empty,
.commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-taxes-block:empty {
  display: none !important;
}

.commerce-shell--checkout .fluvana-checkout-faq {
  margin-top: 18px;
  padding: 22px 24px 10px;
}

.commerce-shell--checkout .fluvana-checkout-faq h2 {
  margin: 0 0 15px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 500;
  line-height: 1;
}

.commerce-shell--checkout .fluvana-checkout-faq details {
  border-top: 1px solid rgba(225, 215, 204, 0.82);
}

.commerce-shell--checkout .fluvana-checkout-faq summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  list-style: none;
}

.commerce-shell--checkout .fluvana-checkout-faq summary::-webkit-details-marker {
  display: none;
}

.commerce-shell--checkout .fluvana-checkout-faq summary::after {
  content: "+";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(226, 236, 227, 0.78);
  color: var(--evergreen);
  font-size: 16px;
  font-weight: 900;
}

.commerce-shell--checkout .fluvana-checkout-faq details[open] summary::after {
  content: "-";
}

.commerce-shell--checkout .fluvana-checkout-faq p {
  max-width: 55ch;
  margin: -2px 0 18px;
  color: rgba(31, 39, 36, 0.72);
  font-size: 15px;
  line-height: 1.45;
}

.commerce-shell--checkout .wc-block-components-checkout-place-order-button {
  width: 100%;
  min-height: 60px !important;
  margin-top: 10px;
  border-radius: 12px !important;
  background: linear-gradient(180deg, var(--blush), #ad5f5a) !important;
  color: var(--white) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 249, 0.24),
    0 18px 34px rgba(173, 95, 90, 0.24) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

.commerce-shell--checkout .wc-block-components-checkout-place-order-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.04);
}

.commerce-shell--checkout .wc-block-components-notice-banner {
  border-radius: 14px !important;
}

@media (max-width: 900px) {
  .commerce-shell--checkout .wc-block-components-sidebar-layout {
    grid-template-columns: 1fr !important;
    align-items: start;
  }

  .commerce-shell--checkout .wc-block-components-sidebar-layout.is-mobile .wc-block-components-sidebar {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .commerce-shell--checkout {
    width: calc(100vw - 18px);
  }

  .commerce-shell--checkout .commerce-hero {
    margin-bottom: 10px;
    gap: 9px;
  }

  .commerce-shell--checkout .commerce-hero h1 {
    max-width: 10ch;
    font-size: clamp(36px, 10.5vw, 44px);
  }

  .commerce-shell--checkout .commerce-panel {
    border-radius: 18px;
  }

  .commerce-shell--checkout .commerce-panel .wp-block-woocommerce-checkout {
    padding: 10px;
  }

  .commerce-shell--checkout .wc-block-components-checkout-step,
  .commerce-shell--checkout .wc-block-checkout__payment-method,
  .commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-block,
  .commerce-shell--checkout .fluvana-checkout-faq {
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(40, 72, 63, 0.065);
  }

  .commerce-shell--checkout .wc-block-components-checkout-step {
    padding: 16px;
  }

  .commerce-shell--checkout .wc-block-components-order-summary-item__image {
    width: 82px !important;
    height: 82px !important;
    flex-basis: 82px !important;
  }

  .commerce-shell--checkout .wc-block-components-order-summary-item__image img {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }

  .commerce-shell--checkout .wc-block-components-order-summary__button-text {
    padding: 18px 16px 14px;
  }

  .commerce-shell--checkout .fluvana-order-summary-head {
    margin: 0 16px;
  }

  .commerce-shell--checkout .wc-block-components-order-summary {
    padding: 0 16px;
  }

  .commerce-shell--checkout .wp-block-woocommerce-checkout-order-summary-block > .wc-block-components-totals-wrapper {
    padding-right: 16px;
    padding-left: 16px;
  }

  .commerce-shell--checkout .fluvana-checkout-faq {
    padding: 18px 16px 8px;
  }

  .commerce-shell--checkout .wc-block-checkout__contact-fields {
    border-radius: 14px 14px 0 0;
  }

  .commerce-shell--checkout .wc-block-checkout__billing-fields {
    border-radius: 0 0 14px 14px;
  }

  .commerce-shell--checkout .wc-block-components-address-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .commerce-shell--checkout .wc-block-components-checkout-step__title,
  .commerce-shell--checkout .wc-block-components-title,
  .commerce-shell--checkout .wc-block-components-order-summary__button-text {
    font-size: 29px;
  }
}

@media (max-width: 860px) {
  .comparison-compact {
    margin-top: 34px;
    padding: 0;
    border-radius: 14px;
  }

  .comparison-compact__top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 15px 14px 12px;
    text-align: left;
  }

  .comparison-compact__kicker {
    margin: 0;
  }

  .comparison-compact h2 {
    max-width: 10.5ch;
    font-size: clamp(25px, 6.4vw, 31px);
    white-space: normal;
  }

  .comparison-compact__grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 10px 10px;
  }

  .comparison-demo__head {
    min-height: 52px;
    padding: 11px 13px;
  }

  .comparison-demo__head h3 {
    font-size: 27px;
  }

  .comparison-demo__frame {
    width: calc(100% - 22px);
    margin: 11px;
    aspect-ratio: 16 / 10;
  }

  .comparison-warning {
    left: 16px;
    right: 16px;
    bottom: 15px;
    font-size: 12px;
  }

  .comparison-desktop-shot {
    width: 76%;
  }

  .comparison-phone-shot {
    min-width: 56px;
  }

  .comparison-note {
    width: 150px;
    padding: 8px 9px;
  }

  .comparison-note span {
    font-size: 13px;
  }

  .comparison-list {
    padding: 0 16px 15px;
  }

  .comparison-list li {
    grid-template-columns: 22px 1fr;
    gap: 10px;
    min-height: 45px;
    font-size: 13px;
  }

  .comparison-mark {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .comparison-proof {
    grid-template-columns: repeat(2, 1fr);
  }

  .comparison-proof div {
    min-height: 48px;
    padding: 10px 13px;
    border-bottom: 1px solid rgba(225, 215, 204, 0.72);
    font-size: 13px;
  }

  .comparison-proof div:nth-child(2n) {
    border-right: 0;
  }

  .comparison-proof div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .how-section {
    grid-template-columns: 1fr;
    gap: 14px;
    width: min(100vw - 20px, 720px);
    margin-top: 34px;
  }

  .how-copy {
    justify-items: center;
    text-align: center;
  }

  .how-copy h2 {
    font-size: clamp(38px, 10.6vw, 48px);
  }

  .how-copy p {
    max-width: 31ch;
    font-size: 15px;
  }

  .how-copy__chips {
    justify-content: center;
  }

  .how-flow {
    border-radius: 16px;
  }

  .how-flow::before {
    left: 34px;
    right: auto;
    top: 103px;
    bottom: 78px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(40, 72, 63, 0.14), rgba(215, 179, 106, 0.8), rgba(40, 72, 63, 0.14));
  }

  .how-flow__header {
    min-height: 0;
    padding: 14px 18px;
    display: grid;
    justify-items: start;
    gap: 7px;
  }

  .how-flow__header strong {
    max-width: 100%;
    font-size: clamp(25px, 6.7vw, 30px);
  }

  .how-steps {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .how-step {
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    padding: 18px 18px 17px;
    border-right: 0;
    border-bottom: 1px solid rgba(225, 215, 204, 0.76);
  }

  .how-step:last-child {
    border-bottom: 0;
  }

  .how-step__top {
    grid-row: 1 / span 2;
    display: block;
  }

  .how-step__number {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .how-step__icon {
    display: none;
  }

  .how-step h3 {
    font-size: 27px;
  }

  .how-step p {
    margin-top: 5px;
    font-size: 14px;
  }

  .how-step__meta {
    min-height: 0;
    margin-top: 8px;
    font-size: 11px;
  }

  .how-flow__bottom {
    grid-template-columns: 1fr;
  }

  .how-flow__bottom span {
    min-height: 40px;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(225, 215, 204, 0.76);
  }

  .how-flow__bottom span:last-child {
    border-bottom: 0;
  }
}

@media (min-width: 768px) {
  .social-proof {
    padding: 3.5rem 0;
  }

  .social-proof h2 {
    font-size: 2.5rem;
  }

  .review-card {
    width: 340px;
    min-height: 232px;
  }
}

@media (max-width: 520px) {
  .social-proof {
    margin-top: 34px;
  }

  .social-proof__header {
    max-width: 24rem;
  }

  .marquee {
    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }

  .marquee {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* Shop page */
.shop-shell-v2 {
  width: var(--container);
  margin: 0 auto;
  padding: 42px 0 70px;
}

.shop-hero-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.56fr);
  align-items: center;
  gap: clamp(28px, 7vw, 130px);
  padding: 18px 18px 22px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 72% 20%, rgba(215, 179, 106, 0.18), transparent 34%),
    linear-gradient(110deg, rgba(242, 217, 212, 0.5), rgba(255, 253, 249, 0.7) 52%, rgba(226, 236, 227, 0.44));
}

.shop-eyebrow {
  width: fit-content;
  margin: 0 0 14px;
  padding: 7px 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(215, 179, 106, 0.42);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.72);
  color: var(--evergreen);
  box-shadow: 0 12px 28px rgba(40, 72, 63, 0.055);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.shop-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--champagne);
  border-radius: 2px;
  transform: rotate(45deg);
}

.shop-hero-v2 h1 {
  max-width: 12.8ch;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(52px, 5.2vw, 84px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.94;
}

.shop-hero-v2 h1 span {
  padding-inline: 0.04em;
  background: linear-gradient(180deg, transparent 58%, rgba(242, 217, 212, 0.92) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.shop-hero-v2__text > p:last-child {
  max-width: 50ch;
  margin: 16px 0 0;
  color: rgba(31, 39, 36, 0.78);
  font-size: 19px;
  line-height: 1.35;
}

.shop-finder,
.shop-trust-strip,
.shop-toolbar-v2,
.shop-filters-v2,
.shop-product-card,
.shop-empty,
.shop-bundle-panel {
  border: 1px solid rgba(225, 215, 204, 0.82);
  background: rgba(255, 253, 249, 0.76);
  box-shadow: 0 14px 34px rgba(40, 72, 63, 0.075);
}

.shop-finder {
  padding: 24px;
  border-radius: 8px;
}

.shop-finder h2,
.shop-filters-v2 h2,
.shop-empty h2,
.shop-bundle-panel h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}

.shop-finder p,
.shop-filters-v2 p,
.shop-empty p,
.shop-bundle-panel p {
  margin: 8px 0 0;
  color: rgba(31, 39, 36, 0.68);
  line-height: 1.25;
}

.shop-finder__grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shop-finder__chip,
.shop-tab,
.shop-filter,
.shop-reset,
.shop-pagination a,
.shop-empty button {
  border: 1px solid rgba(225, 215, 204, 0.88);
  background: rgba(255, 253, 249, 0.8);
  color: var(--evergreen);
  cursor: pointer;
  font-weight: 850;
}

.shop-finder__chip {
  min-height: 44px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 8px;
  text-align: left;
}

.shop-finder__chip span,
.shop-filter strong {
  min-width: 26px;
  height: 26px;
  padding-inline: 8px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sage);
  color: var(--evergreen);
  font-size: 12px;
  line-height: 1;
}

.shop-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 18px;
  border-radius: 10px;
  overflow: hidden;
}

.shop-trust-strip div {
  min-height: 64px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-right: 1px solid rgba(225, 215, 204, 0.72);
}

.shop-trust-strip div:last-child {
  border-right: 0;
}

.shop-trust-strip svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  flex: 0 0 34px;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--champagne);
}

.shop-trust-strip strong,
.shop-trust-strip em {
  display: block;
  line-height: 1.08;
}

.shop-trust-strip strong {
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 900;
}

.shop-trust-strip em {
  margin-top: 4px;
  color: rgba(31, 39, 36, 0.58);
  font-family: var(--serif);
  font-size: 14px;
}

.shop-toolbar-v2 {
  position: sticky;
  top: 82px;
  z-index: 20;
  margin-top: 18px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  border-radius: 10px;
  backdrop-filter: blur(14px);
}

.shop-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow: visible;
  scrollbar-width: none;
}

.shop-tabs::-webkit-scrollbar {
  display: none;
}

.shop-tab {
  min-height: 36px;
  padding: 8px 16px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: rgba(31, 39, 36, 0.68);
}

.shop-tab.is-active,
.shop-filter.is-active {
  border-color: var(--evergreen);
  background: var(--evergreen);
  color: var(--white);
}

.shop-toolbar-v2__actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
}

.shop-search {
  min-height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(225, 215, 204, 0.88);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.84);
}

.shop-search svg {
  width: 17px;
  height: 17px;
  color: var(--evergreen);
}

.shop-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 750;
}

.shop-sort {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(225, 215, 204, 0.88);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.84);
  color: var(--evergreen);
  font-weight: 850;
}

.shop-reset {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
}

.shop-main-v2 {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.shop-filters-v2 {
  position: sticky;
  top: 160px;
  padding: 22px;
  border-radius: 8px;
}

.shop-filter-list {
  margin-top: 16px;
  display: grid;
  gap: 9px;
}

.shop-filter {
  min-height: 46px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 8px;
  text-align: left;
}

.shop-results-head {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.shop-results-head h2 {
  margin: 0;
  color: var(--evergreen);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shop-count {
  min-height: 38px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.78);
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.shop-count em {
  color: rgba(31, 39, 36, 0.58);
  font-style: normal;
}

.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.shop-product-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 253, 249, 0.98), rgba(240, 245, 237, 0.52)),
    var(--white);
}

.shop-product-card[hidden] {
  display: none;
}

.shop-product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid rgba(225, 215, 204, 0.78);
  background: var(--sage-2);
}

.shop-product-card__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 220ms ease;
}

.shop-product-card:hover .shop-product-card__image {
  transform: scale(1.035);
}

.shop-product-card__badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  min-height: 34px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--champagne);
  color: var(--evergreen);
  box-shadow: 0 12px 24px rgba(31, 39, 36, 0.14);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.shop-product-card__view {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  min-height: 34px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(225, 215, 204, 0.82);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.92);
  color: var(--evergreen);
  box-shadow: 0 12px 24px rgba(31, 39, 36, 0.12);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.shop-product-card__body {
  padding: 18px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.shop-product-card__title {
  display: block;
  overflow: hidden;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(23px, 1.75vw, 29px);
  font-weight: 500;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-product-card__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border-block: 1px solid rgba(225, 215, 204, 0.82);
}

.shop-product-card__specs span {
  min-height: 58px;
  padding: 10px 6px;
  display: grid;
  align-content: center;
  gap: 2px;
  border-right: 1px solid rgba(225, 215, 204, 0.82);
  text-align: center;
}

.shop-product-card__specs span:last-child {
  border-right: 0;
}

.shop-product-card__specs b {
  color: var(--evergreen);
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.04;
}

.shop-product-card__specs small {
  color: rgba(31, 39, 36, 0.48);
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.05;
}

.shop-product-card__price {
  min-height: 44px;
  margin: 14px 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.shop-product-card__price-stack {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--evergreen);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.shop-product-card__price-stack del {
  color: rgba(31, 39, 36, 0.42);
  font-size: 14px;
  font-weight: 800;
}

.shop-product-card__price em {
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--sage);
  color: var(--evergreen);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.shop-product-card__purchase {
  min-height: 56px;
  margin-top: auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(130, 70, 48, 0.26);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--blush), #ad5f5a);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 249, 0.22),
    0 14px 24px rgba(201, 121, 115, 0.22);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.shop-pagination {
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.shop-pagination a {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.82);
  box-shadow: 0 10px 24px rgba(40, 72, 63, 0.045);
}

.shop-pagination a.is-active {
  border-color: var(--evergreen);
  background: var(--evergreen);
  color: var(--white);
}

.shop-empty {
  display: none;
  padding: 34px;
  border-radius: 12px;
  text-align: center;
}

.shop-empty button {
  min-height: 42px;
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--white);
}

.shop-bundle-panel {
  margin-top: 28px;
  padding: 26px 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  border-radius: 12px;
  background: var(--evergreen);
  color: var(--white);
}

.shop-bundle-panel h2,
.shop-bundle-panel p {
  color: var(--white);
}

.shop-bundle-panel a {
  min-height: 48px;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--white);
  color: var(--evergreen);
  font-weight: 900;
}

@media (max-width: 1100px) {
  .shop-hero-v2 {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }

  .shop-hero-v2__text,
  .shop-eyebrow,
  .shop-hero-v2 h1,
  .shop-hero-v2__text > p:last-child {
    margin-inline: auto;
  }

  .shop-toolbar-v2,
  .shop-main-v2 {
    grid-template-columns: 1fr;
  }

  .shop-filters-v2 {
    display: none;
  }
}

@media (max-width: 760px) {
  .shop-shell-v2 {
    width: calc(100vw - 18px);
    padding: 22px 0 46px;
  }

  .shop-hero-v2 {
    padding: 18px 0 4px;
    background:
      radial-gradient(circle at 50% 12%, rgba(242, 217, 212, 0.82), transparent 46%),
      linear-gradient(180deg, rgba(242, 217, 212, 0.42), rgba(255, 253, 249, 0));
  }

  .shop-eyebrow {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .shop-hero-v2 h1 {
    max-width: 9.2ch;
    font-size: clamp(37px, 12.5vw, 54px);
    line-height: 0.94;
  }

  .shop-hero-v2__text > p:last-child {
    max-width: 31ch;
    font-size: 16px;
    line-height: 1.32;
  }

  .shop-finder {
    padding: 15px 14px;
    border-radius: 8px;
  }

  .shop-finder h2 {
    font-size: 29px;
    text-align: center;
  }

  .shop-finder p {
    max-width: 27ch;
    margin-inline: auto;
    text-align: center;
    font-size: 14px;
  }

  .shop-finder__grid {
    gap: 8px;
  }

  .shop-finder__chip {
    min-height: 42px;
    padding: 8px 9px;
    font-size: 14px;
  }

  .shop-trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
  }

  .shop-trust-strip div {
    min-height: 60px;
    padding: 11px 9px;
    gap: 8px;
    border-bottom: 1px solid rgba(225, 215, 204, 0.72);
  }

  .shop-trust-strip div:nth-child(2n) {
    border-right: 0;
  }

  .shop-trust-strip div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .shop-trust-strip svg {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    padding: 7px;
  }

  .shop-trust-strip strong,
  .shop-trust-strip em {
    font-size: 12px;
  }

  .shop-toolbar-v2 {
    top: 70px;
    margin-top: 14px;
    padding: 9px;
    gap: 9px;
  }

  .shop-tab {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 13px;
  }

  .shop-toolbar-v2__actions {
    grid-template-columns: 1fr auto;
  }

  .shop-sort {
    display: none;
  }

  .shop-main-v2 {
    margin-top: 18px;
  }

  .shop-results-head {
    min-height: 0;
    margin-bottom: 12px;
    align-items: end;
  }

  .shop-results-head h2 {
    font-size: 17px;
  }

  .shop-count {
    font-size: 12px;
  }

  .shop-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .shop-product-card {
    border-radius: 13px;
  }

  .shop-product-card__body {
    padding: 11px;
  }

  .shop-product-card__title {
    font-size: clamp(17px, 4.4vw, 21px);
  }

  .shop-product-card__view {
    display: none;
  }

  .shop-product-card__badge {
    left: 9px;
    top: 9px;
    min-height: 29px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .shop-product-card__specs span {
    min-height: 43px;
    padding: 7px 3px;
  }

  .shop-product-card__specs b {
    font-size: 10px;
  }

  .shop-product-card__specs small {
    font-size: 10.5px;
  }

  .shop-product-card__price {
    min-height: 34px;
    margin: 10px 0 9px;
    gap: 5px;
  }

  .shop-product-card__price-stack {
    min-width: 0;
    gap: 5px;
    font-size: 16px;
  }

  .shop-product-card__price-stack del {
    font-size: 12px;
  }

  .shop-product-card__price em {
    padding: 6px 8px;
    font-size: 10px;
  }

  .shop-product-card__purchase {
    min-height: 43px;
    border-radius: 8px;
    font-size: 13px;
  }

  .shop-pagination {
    margin-top: 20px;
    gap: 6px;
  }

  .shop-pagination a {
    min-width: 34px;
    height: 34px;
    padding-inline: 10px;
    font-size: 12.5px;
  }

  .shop-bundle-panel {
    padding: 18px;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .shop-bundle-panel h2 {
    font-size: 34px;
  }
}

/* Product page v3 */
.product-page-v3 {
  width: var(--container);
  margin: 28px auto 0;
  padding-bottom: 70px;
}

.product-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(31, 39, 36, 0.58);
  font-size: 13px;
  font-weight: 750;
}

.product-breadcrumb a:hover {
  color: var(--evergreen);
}

.product-hero-v3 {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, 0.78fr);
  gap: 26px;
  align-items: start;
}

.product-left-v3 {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.product-media-panel,
.purchase-panel-v3,
.product-accordions--mobile,
.compare-v3,
.access-strip-v3 {
  border: 1px solid rgba(225, 215, 204, 0.9);
  background:
    linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(240, 245, 237, 0.5)),
    var(--white);
  box-shadow: var(--shadow);
}

.product-media-panel {
  padding: 12px;
  border-radius: 16px;
}

.product-gallery-v3 {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.product-thumbs-v3 {
  display: grid;
  gap: 10px;
}

.product-thumb-v3 {
  width: 72px;
  aspect-ratio: 1 / 1;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.95);
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.94);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(61, 42, 34, 0.06);
}

.product-thumb-v3 img {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
}

.product-thumb-v3.is-active {
  border-color: var(--evergreen);
  background: rgba(226, 236, 227, 0.86);
  box-shadow: 0 0 0 3px rgba(40, 72, 63, 0.12), 0 12px 26px rgba(61, 42, 34, 0.08);
}

.product-thumb-v3:focus-visible,
.product-media-dot:focus-visible,
.cta-v3:focus-visible,
.instant-link-v3:focus-visible {
  outline: 3px solid rgba(212, 174, 92, 0.48);
  outline-offset: 3px;
}

.product-main-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.82);
  border-radius: 12px;
  background: var(--sage-2);
  aspect-ratio: 1 / 1;
}

.product-main-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-media-dots {
  display: none;
}

.product-media-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(31, 39, 36, 0.22);
  cursor: pointer;
  transition: width 180ms ease, background-color 180ms ease;
}

.product-media-dot.is-active {
  width: 20px;
  background: var(--evergreen);
}

.purchase-panel-v3 {
  position: sticky;
  top: 102px;
  padding: 20px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(215, 179, 106, 0.2), transparent 30%),
    linear-gradient(145deg, rgba(255, 253, 249, 0.98), rgba(255, 249, 244, 0.9));
}

.eyebrow-row-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pill-v3 {
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.9);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 900;
}

/* Pills that are links should feel like it. */
a.pill-v3 {
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

a.pill-v3:hover,
a.pill-v3:focus-visible {
  border-color: var(--champagne);
  background: var(--white);
  transform: translateY(-1px);
}

a.pill-v3:hover small,
a.pill-v3:focus-visible small {
  color: var(--evergreen);
}

.review-avatars {
  display: inline-flex;
  align-items: center;
  padding-right: 2px;
}

.review-avatar {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--white);
  border-radius: 999px;
  background: var(--sage);
  color: var(--evergreen);
  font-size: 9px;
  font-weight: 950;
  box-shadow: 0 5px 12px rgba(40, 72, 63, 0.1);
}

.review-avatar + .review-avatar {
  margin-left: -7px;
}

.review-avatar:nth-child(2) {
  background: var(--blush-2);
}

.review-avatar:nth-child(3) {
  background: rgba(215, 179, 106, 0.28);
}

.rating-pill-v3 strong {
  line-height: 1;
}

.rating-pill-v3 small,
.orders-pill-v3 small,
.star-seller-v3 small {
  color: rgba(31, 39, 36, 0.62);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.orders-pill-v3 strong {
  line-height: 1;
  color: var(--evergreen);
}

.stars-v3 {
  color: var(--champagne);
  font-size: 0;
  letter-spacing: 0;
  white-space: nowrap;
}

.stars-v3::before {
  content: "\2605\2605\2605\2605\2605";
  color: var(--champagne);
  font-size: 11px;
  letter-spacing: 1px;
}

.seller-mark-v3 {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(212, 174, 92, 0.18);
  color: var(--champagne);
  font-size: 0;
}

.seller-mark-v3::before {
  content: "\2605";
  font-size: 11px;
}

.purchase-panel-v3 h1 {
  margin: 16px 0 12px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(38px, 3.35vw, 54px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0;
  text-align: left;
}

.lead-v3 {
  max-width: 54ch;
  margin: 0 0 12px;
  color: rgba(31, 39, 36, 0.76);
  font-size: 16px;
  line-height: 1.42;
  text-align: left;
}

.price-card-v3,
.cta-card-v3 {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(40, 72, 63, 0.14);
  border-radius: 12px;
  background: rgba(240, 245, 237, 0.64);
}

.price-only-v3 {
  padding: 12px 14px;
}

.price-row-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.price-v3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--evergreen);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.price-v3 del {
  color: rgba(31, 39, 36, 0.45);
  font-size: 17px;
  font-weight: 850;
}

.save-v3 {
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--white);
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.sale-note-v3 {
  margin: 6px 0 0;
  color: #2e7a36;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.feature-grid-v3 {
  margin: 0 0 15px;
  padding: 4px 12px;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 253, 249, 0.9), rgba(240, 245, 237, 0.5));
}

.feature-tile-v3 {
  min-height: 44px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(225, 215, 204, 0.84);
}

.feature-tile-v3:last-child {
  border-bottom: 0;
}

.feature-tile-v3::before {
  content: "\2713";
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(212, 174, 92, 0.18);
  color: var(--champagne);
  font-size: 12px;
  font-weight: 950;
}

.feature-tile-v3 > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.feature-tile-v3 strong {
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.05;
}

.feature-tile-v3 span {
  color: rgba(31, 39, 36, 0.76);
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.15;
  text-align: right;
}

.cta-row-v3 {
  display: grid;
  gap: 9px;
}

.cta-v3 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #d77a74 0%, #ad514c 100%);
  color: var(--white);
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 20px 38px rgba(184, 95, 90, 0.34);
  transform: translateY(0) scale(1);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-v3::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -55%;
  z-index: -1;
  width: 46%;
  transform: skewX(-18deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 253, 249, 0.42), transparent);
  opacity: 0;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
}

.cta-v3:hover {
  transform: translateY(-2px) scale(1.012);
  box-shadow: 0 24px 48px rgba(184, 95, 90, 0.42);
}

.cta-v3:hover::after {
  opacity: 1;
  transform: skewX(-18deg) translateX(330%);
}

.cta-v3:active {
  transform: translateY(1px) scale(0.985);
}

.instant-link-v3 {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: rgba(215, 179, 106, 0.55);
  text-underline-offset: 4px;
}

.risk-line-v3 {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 5px;
  color: rgba(31, 39, 36, 0.7);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.risk-line-v3 span {
  min-width: 0;
  padding: 5px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(225, 215, 204, 0.78);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.72);
}

.risk-line-v3 svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--champagne);
}

.delivery-note-v3 {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(225, 215, 204, 0.82);
  color: rgba(31, 39, 36, 0.7);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.delivery-note-v3 strong {
  color: var(--evergreen);
  font-weight: 950;
}

.bundle-card-v3 {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 253, 249, 0.94), rgba(240, 245, 237, 0.62)), var(--white);
}

.bundle-head-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bundle-head-v3 h2 {
  margin: 0 0 2px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 0.98;
}

.bundle-head-v3 p {
  margin: 0;
  color: rgba(31, 39, 36, 0.64);
  font-size: 12px;
  line-height: 1.25;
}

.bundle-status-v3 {
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--evergreen);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.progress-v3 {
  margin: 9px 0;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sage-2);
}

.progress-v3 i {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--champagne), var(--blush));
  transition: width 180ms ease;
}

.bundle-items-v3 {
  display: grid;
  gap: 7px;
}

.bundle-items-v3 label {
  padding: 8px;
  display: grid;
  grid-template-columns: auto 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(225, 215, 204, 0.8);
  border-radius: 9px;
  background: rgba(255, 249, 244, 0.54);
  cursor: pointer;
}

.bundle-items-v3 label.has-details {
  align-items: start;
}

.bundle-items-v3 input {
  width: 16px;
  height: 16px;
  accent-color: var(--evergreen);
}

.bundle-items-v3 img,
.bundle-service-icon-v3 {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.bundle-items-v3 img {
  object-fit: cover;
}

.bundle-service-icon-v3 {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(226, 236, 227, 0.95), rgba(242, 217, 212, 0.62));
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 950;
}

.bundle-items-v3 strong {
  display: block;
  color: var(--evergreen);
  font-size: 12.5px;
  font-weight: 950;
  line-height: 1.08;
}

.bundle-items-v3 small {
  display: block;
  color: rgba(31, 39, 36, 0.58);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.2;
}

.bundle-items-v3 em {
  color: var(--evergreen);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.bundle-total-v3 {
  margin-top: 9px;
  padding-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(225, 215, 204, 0.9);
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 950;
}

.product-accordions {
  align-self: start;
  padding: 4px 0 0;
}

.product-accordions--mobile {
  display: none;
}

.product-accordions__inner {
  border-top: 1px solid rgba(225, 215, 204, 0.9);
  border-bottom: 1px solid rgba(225, 215, 204, 0.9);
}

.product-accordions details {
  border-top: 1px solid rgba(225, 215, 204, 0.9);
}

.product-accordions details:first-child {
  border-top: 0;
}

.product-accordions summary {
  padding: 15px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--evergreen);
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

.product-accordions summary::-webkit-details-marker {
  display: none;
}

.product-accordions summary::before {
  content: "";
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  transition: transform 160ms ease;
}

.product-accordions details[open] summary::before {
  transform: rotate(90deg);
}

.product-accordions p {
  max-width: 72ch;
  margin: 0;
  padding: 0 0 15px;
  color: rgba(31, 39, 36, 0.7);
  font-size: 14px;
  line-height: 1.55;
}

.product-accordions strong {
  color: var(--evergreen);
}

.product-section-v3 {
  margin-top: 42px;
}

.section-head-v3 {
  max-width: 42rem;
  margin: 0 auto 28px;
  padding: 0 16px;
  text-align: center;
}

.section-kicker-v3 {
  margin: 0 0 8px;
  color: hsl(28 90% 35%);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.section-head-v3 h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 0.98;
}

.product-page-v3 .section-head-v3 .accent-italic {
  color: hsl(28 90% 35%);
}

.compare-v3 {
  padding: 18px;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.compare-v3 .section-head-v3 {
  margin-bottom: 22px;
}

.compare-grid-v3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.compare-card-v3 {
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 12px;
  background: var(--paper);
}

.compare-card-v3.is-app {
  background: var(--evergreen);
  color: var(--white);
}

.gif-slot-v3 {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(225, 215, 204, 0.78);
  background:
    linear-gradient(90deg, rgba(226, 236, 227, 0.55) 12%, transparent 12%),
    repeating-linear-gradient(0deg, rgba(225, 215, 204, 0.72) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(225, 215, 204, 0.72) 0 1px, transparent 1px 82px),
    rgba(255, 253, 249, 0.9);
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 800;
}

.is-app .gif-slot-v3 {
  background: linear-gradient(135deg, rgba(40, 72, 63, 0.92), rgba(63, 106, 94, 0.9));
  color: var(--white);
}

.compare-list-v3 {
  margin: 0;
  padding: 14px;
  display: grid;
  gap: 9px;
  list-style: none;
}

.compare-list-v3 li {
  display: flex;
  gap: 9px;
  color: inherit;
  font-size: 14px;
  font-weight: 750;
}

.compare-list-v3 li::before {
  content: "x";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(242, 217, 212, 0.86);
  color: #b85f5a;
  font-size: 12px;
  font-weight: 950;
}

.is-app .compare-list-v3 li::before {
  content: "OK";
  background: rgba(215, 179, 106, 0.22);
  color: var(--champagne);
  font-size: 10px;
}

.flow-steps-v3 {
  position: relative;
  overflow: hidden;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(240, 245, 237, 0.56)), var(--white);
  box-shadow: var(--shadow-soft);
}

.flow-steps-v3::before {
  content: "";
  position: absolute;
  left: 58px;
  right: 58px;
  top: 43px;
  height: 1px;
  background: linear-gradient(90deg, rgba(215, 179, 106, 0), rgba(215, 179, 106, 0.82), rgba(215, 179, 106, 0));
}

.flow-step-v3 {
  position: relative;
  z-index: 1;
  min-height: 132px;
  padding: 16px 16px 18px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 12px;
  text-align: center;
  border: 1px solid rgba(225, 215, 204, 0.72);
  border-radius: 12px;
  background: radial-gradient(circle at 88% 18%, rgba(215, 179, 106, 0.18), transparent 28%), linear-gradient(145deg, rgba(255, 253, 249, 0.98), rgba(240, 245, 237, 0.7));
  box-shadow: 0 10px 24px rgba(40, 72, 63, 0.06);
  animation: flowRise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease, box-shadow 180ms ease;
}

.flow-step-v3:nth-child(2) {
  animation-delay: 80ms;
}

.flow-step-v3:nth-child(3) {
  animation-delay: 160ms;
}

.flow-step-v3:hover {
  transform: translateY(-3px);
  border-color: rgba(215, 179, 106, 0.52);
  box-shadow: 0 18px 34px rgba(40, 72, 63, 0.12);
}

@keyframes flowRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flow-step-v3 span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--champagne);
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 0 0 6px rgba(255, 253, 249, 0.94);
}

.flow-step-v3 h3 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
}

.flow-step-v3 p {
  max-width: 34ch;
  margin: 0 auto;
  color: rgba(31, 39, 36, 0.68);
  font-size: 14px;
}

.access-strip-v3 {
  overflow: hidden;
  border-radius: 13px;
  box-shadow: var(--shadow-soft);
}

.access-grid-v3 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.access-grid-v3 div {
  min-height: 72px;
  padding: 14px 16px;
  display: grid;
  align-content: center;
  gap: 2px;
  border-left: 1px solid rgba(225, 215, 204, 0.86);
}

.access-grid-v3 div:first-child {
  border-left: 0;
}

.access-grid-v3 strong {
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 950;
}

.access-grid-v3 span {
  color: rgba(31, 39, 36, 0.62);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
}

.product-social-proof-v3 {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .cta-v3,
  .cta-v3::after,
  .flow-step-v3 {
    animation: none;
    transition: none;
  }

  .cta-v3:hover,
  .flow-step-v3:hover {
    transform: none;
  }
}

@media (max-width: 1080px) {
  .product-hero-v3 {
    grid-template-columns: 1fr;
  }

  .purchase-panel-v3 {
    position: static;
  }

  .product-accordions--desktop {
    display: none;
  }

  .product-accordions--mobile {
    display: block;
    padding: 13px;
    border-radius: 14px;
  }

  .flow-steps-v3,
  .access-grid-v3 {
    grid-template-columns: 1fr;
  }

  .flow-steps-v3::before {
    display: none;
  }

  .access-grid-v3 div {
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-left: 0;
    border-top: 1px solid rgba(225, 215, 204, 0.86);
  }

  .access-grid-v3 div:first-child {
    border-top: 0;
  }
}

@media (max-width: 680px) {
  .product-page-v3 {
    width: calc(100vw - 20px);
    margin-top: 18px;
    padding-bottom: 42px;
  }

  .product-breadcrumb {
    font-size: 12px;
  }

  .product-hero-v3 {
    margin-top: 12px;
    gap: 16px;
  }

  .product-media-panel {
    padding: 8px;
    border-radius: 13px;
  }

  .product-gallery-v3 {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .product-main-shot {
    order: 1;
  }

  .product-thumbs-v3 {
    order: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
    padding: 0 2px 2px;
    scrollbar-width: none;
  }

  .product-thumbs-v3::-webkit-scrollbar {
    display: none;
  }

  .product-thumb-v3 {
    width: 48px;
    flex: 0 0 48px;
    border-radius: 9px;
  }

  .product-thumb-v3 img {
    border-radius: 6px;
  }

  .product-media-dots {
    order: 3;
    display: flex;
    justify-content: center;
    gap: 7px;
    padding-top: 2px;
  }

  .purchase-panel-v3 {
    padding: 14px;
  }

  .eyebrow-row-v3 {
    gap: 8px;
    flex-wrap: nowrap;
  }

  .pill-v3 {
    padding: 6px 8px;
    gap: 5px;
    font-size: 11px;
  }

  .review-avatar {
    width: 18px;
    height: 18px;
    font-size: 8px;
  }

  .rating-pill-v3 small,
  .star-seller-v3 small {
    font-size: 10px;
  }

  .purchase-panel-v3 h1 {
    margin: 12px 0 8px;
    font-size: 32px;
  }

  .lead-v3 {
    font-size: 15px;
  }

  .price-only-v3 {
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  .price-v3 {
    font-size: 27px;
  }

  .sale-note-v3 {
    font-size: 12px;
  }

  .feature-grid-v3 {
    padding: 3px 11px;
  }

  .feature-tile-v3 {
    min-height: 48px;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 9px;
  }

  .feature-tile-v3::before {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .feature-tile-v3 > div {
    display: grid;
    gap: 3px;
  }

  .feature-tile-v3 strong,
  .feature-tile-v3 span {
    font-size: 12.5px;
    text-align: left;
  }

  .cta-v3 {
    min-height: 52px;
    font-size: 16px;
  }

  .risk-line-v3 {
    gap: 3px;
    font-size: 9.5px;
  }

  .risk-line-v3 span {
    padding: 4px;
    gap: 3px;
  }

  .risk-line-v3 svg {
    width: 10px;
    height: 10px;
    flex-basis: 10px;
  }

  .bundle-head-v3 h2 {
    font-size: 21px;
  }

  .bundle-items-v3 label {
    grid-template-columns: auto 40px minmax(0, 1fr) auto;
  }

  .bundle-items-v3 img,
  .bundle-service-icon-v3 {
    width: 40px;
    height: 40px;
  }

  .product-accordions summary {
    padding: 13px 0;
    font-size: 14px;
  }

  .product-accordions p {
    padding-bottom: 13px;
    font-size: 13px;
  }

  .product-section-v3 {
    margin-top: 30px;
  }

  .section-head-v3 {
    margin-bottom: 20px;
    padding: 0 8px;
  }

  .section-head-v3 h2 {
    font-size: clamp(30px, 8vw, 36px);
  }

  .compare-v3 {
    padding: 14px;
  }

  .compare-grid-v3 {
    grid-template-columns: 1fr;
  }

  .gif-slot-v3 {
    aspect-ratio: 1 / 1;
    font-size: 24px;
  }

  .flow-step-v3 {
    min-height: auto;
    padding: 14px;
    animation: none;
  }

  .flow-step-v3 h3 {
    font-size: 24px;
  }

  .flow-step-v3 p {
    font-size: 13.5px;
  }

  .product-social-proof-v3 {
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

/* Final lock: all non-hero section headers match the review marquee style. */
.section-heading,
.category-intro .section-heading,
.product-intro .section-heading,
.comparison-compact__top h2,
.how-copy h2,
.final-cta__copy h2,
.product-page-v3 .section-head-v3 h2,
.social-proof h2 {
  color: var(--evergreen);
  font-family: var(--display-font);
  font-size: clamp(1.875rem, 7vw, 2.65rem);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 0.98;
}

.category-intro__eyebrow,
.product-intro__eyebrow,
.comparison-compact__kicker,
.how-copy__kicker,
.final-cta__kicker,
.product-page-v3 .section-kicker-v3,
.social-proof__kicker {
  color: var(--accent-strong);
  font-family: var(--body-font);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.product-page-v3 .section-head-v3 .accent-italic,
.social-proof .accent-italic {
  color: var(--accent-strong);
  font-family: inherit;
  font-style: italic;
  font-weight: inherit;
}

/* ============================================================
   MY ACCOUNT
   Every rule is scoped under .fv-account so nothing here can
   affect another page. Values are taken from existing classes:
   hero = .shop-hero-v2, tabs = .shop-tab, buttons = .button,
   rows = .feature-tile-v3, surfaces = .shop-product-card.
   ============================================================ */

.fv-account {
  --fv-accent: hsl(28 90% 35%);
  --fv-surface-line: rgba(225, 215, 204, 0.82);
  --fv-surface-bg: rgba(255, 253, 249, 0.76);
  --fv-surface-shadow: 0 14px 34px rgba(40, 72, 63, 0.075);
  --fv-hairline: rgba(225, 215, 204, 0.84);
}

/* WooCommerce wraps account content in this; we style our own children. */
.fv-account .woocommerce-MyAccount-content {
  width: 100%;
  float: none;
}

/* ---------- hero : .shop-hero-v2 ---------- */
.fv-account .fv-acct-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.52fr);
  align-items: center;
  gap: clamp(28px, 6vw, 90px);
  padding: 22px 22px 26px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 72% 20%, rgba(215, 179, 106, 0.18), transparent 34%),
    linear-gradient(110deg, rgba(242, 217, 212, 0.5), rgba(255, 253, 249, 0.7) 52%, rgba(226, 236, 227, 0.44));
}

.fv-account .fv-acct-eyebrow {
  width: fit-content;
  margin: 0 0 14px;
  padding: 7px 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(215, 179, 106, 0.42);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.72);
  box-shadow: 0 12px 28px rgba(40, 72, 63, 0.055);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 850;
}

.fv-account .fv-acct-eyebrow svg {
  width: 14px;
  height: 14px;
  color: var(--champagne);
}

.fv-account .fv-acct-hero h1 {
  max-width: 16ch;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(44px, 4.6vw, 72px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.94;
}

.fv-account .fv-acct-hero h1 span {
  padding-inline: 0.04em;
  background: linear-gradient(180deg, transparent 58%, rgba(242, 217, 212, 0.92) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.fv-account .fv-acct-hero__sub {
  margin: 16px 0 0;
  max-width: 46ch;
  color: rgba(31, 39, 36, 0.68);
  font-size: 16.5px;
}

/* stat panel : .shop-finder */
.fv-account .fv-acct-stats {
  padding: 22px 24px;
  border: 1px solid var(--fv-surface-line);
  border-radius: 8px;
  background: var(--fv-surface-bg);
  box-shadow: var(--fv-surface-shadow);
}

.fv-account .fv-acct-stats h2 {
  margin: 0 0 14px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
}

.fv-account .fv-acct-stats dl { margin: 0; }

.fv-account .fv-acct-stats div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--fv-hairline);
}

.fv-account .fv-acct-stats div:last-child { border-bottom: 0; padding-bottom: 0; }
.fv-account .fv-acct-stats dt { color: rgba(31, 39, 36, 0.68); font-size: 14px; font-weight: 600; }

.fv-account .fv-acct-stats dd {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
}

.fv-account .fv-acct-stats dd small {
  color: rgba(31, 39, 36, 0.55);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
}

/* ---------- tabs : .shop-toolbar-v2 + .shop-tab ---------- */
.fv-account .fv-acct-nav {
  margin-top: 22px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--fv-surface-line);
  border-radius: 999px;
  background: var(--fv-surface-bg);
  box-shadow: var(--fv-surface-shadow);
}

.fv-account .fv-acct-nav::-webkit-scrollbar { display: none; }

.fv-account .fv-acct-tab {
  min-height: 36px;
  padding: 8px 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(225, 215, 204, 0.88);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.8);
  color: rgba(31, 39, 36, 0.68);
  font-size: 14.5px;
  font-weight: 850;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.fv-account .fv-acct-tab:hover { color: var(--evergreen); }

.fv-account .fv-acct-tab.is-active,
.fv-account .fv-acct-tab.is-active:hover {
  border-color: var(--evergreen);
  background: var(--evergreen);
  color: var(--white);
}

.fv-account .fv-acct-tab__n {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(40, 72, 63, 0.1);
  color: var(--evergreen);
  font-size: 11px;
  font-weight: 900;
}

.fv-account .fv-acct-tab.is-active .fv-acct-tab__n {
  background: rgba(255, 253, 249, 0.22);
  color: var(--white);
}

.fv-account .fv-acct-tab__soon {
  color: var(--fv-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fv-account .fv-acct-tab.is-active .fv-acct-tab__soon { color: var(--champagne); }

.fv-account .fv-acct-logout {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 8px 14px;
  color: rgba(31, 39, 36, 0.6);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.fv-account .fv-acct-logout:hover { color: var(--blush); }

.fv-account .fv-acct-panel { margin-top: 26px; }

/* ---------- access strip : .access-strip-v3 ---------- */
.fv-account .fv-acct-strip {
  margin-bottom: 20px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(240, 245, 237, 0.5)),
    var(--white);
  box-shadow: var(--shadow-soft);
}

.fv-account .fv-acct-strip svg { width: 19px; height: 19px; flex: none; color: var(--evergreen-2); }
.fv-account .fv-acct-strip p { margin: 0; color: rgba(31, 39, 36, 0.72); font-size: 14.5px; }
.fv-account .fv-acct-strip strong { color: var(--evergreen); }

/* ---------- app library ---------- */
.fv-account .fv-acct-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
}

.fv-account .fv-app-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--fv-surface-line);
  border-radius: 8px;
  background: var(--fv-surface-bg);
  box-shadow: var(--fv-surface-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fv-account .fv-app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(40, 72, 63, 0.14);
}

.fv-account .fv-app-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--sage-2);
  border-bottom: 1px solid var(--fv-surface-line);
}

.fv-account .fv-app-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fv-account .fv-app-card__body {
  padding: 16px 17px 17px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.fv-account .fv-app-card__body h3 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.fv-account .fv-app-card__meta {
  margin: 0;
  color: rgba(31, 39, 36, 0.55);
  font-size: 12.5px;
  font-weight: 700;
}

.fv-account .fv-app-card__foot { margin-top: auto; display: grid; gap: 9px; }

/* ---------- buttons : .button ---------- */
.fv-account .fv-btn {
  min-height: 52px;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.fv-account .fv-btn:hover { transform: translateY(-1px); }
.fv-account .fv-btn svg { width: 17px; height: 17px; flex: none; }

.fv-account .fv-btn--primary {
  background: var(--blush);
  color: var(--white);
  box-shadow: 0 12px 24px rgba(201, 121, 115, 0.24);
}

.fv-account .fv-btn--secondary {
  background: rgba(255, 253, 249, 0.75);
  border-color: var(--evergreen);
  color: var(--evergreen);
}

.fv-account .fv-btn--sm { min-height: 44px; padding: 12px 20px; font-size: 15px; }
.fv-account .fv-btn--xs { min-height: 38px; padding: 9px 17px; border-radius: 7px; font-size: 14px; }

.fv-account .fv-textlink {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--evergreen);
  font-size: 14.5px;
  font-weight: 700;
}

.fv-account .fv-textlink svg { width: 15px; height: 15px; color: var(--fv-accent); }
.fv-account .fv-textlink:hover,
.fv-account .fv-textlink:hover svg { color: var(--blush); }

/* ---------- orders ---------- */
.fv-account .fv-acct-orders {
  overflow: hidden;
  border: 1px solid var(--fv-surface-line);
  border-radius: 8px;
  background: var(--fv-surface-bg);
  box-shadow: var(--fv-surface-shadow);
}

.fv-account .fv-order {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "id items status total act";
  align-items: center;
  gap: 12px 22px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--fv-hairline);
  transition: background 0.16s ease;
}

.fv-account .fv-order:last-child { border-bottom: 0; }
.fv-account .fv-order:hover { background: rgba(255, 253, 249, 0.6); }

.fv-account .fv-order__id {
  grid-area: id;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fv-account .fv-order__id strong {
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
}

.fv-account .fv-order__id span { color: rgba(31, 39, 36, 0.55); font-size: 12.5px; font-weight: 700; }
.fv-account a.fv-order__id:hover strong { color: var(--blush); }

.fv-account .fv-order__items {
  grid-area: items;
  margin: 0;
  min-width: 0;
  color: rgba(31, 39, 36, 0.72);
  font-size: 14.5px;
}

.fv-account .fv-order__total {
  grid-area: total;
  justify-self: end;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
}

.fv-account .fv-order__total .woocommerce-Price-amount { font-family: inherit; }
.fv-account .fv-order__act { grid-area: act; justify-self: end; }

.fv-account .fv-acct-pill {
  grid-area: status;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.9);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.fv-account .fv-acct-pill svg { width: 13px; height: 13px; }

.fv-account .fv-acct-pill--completed,
.fv-account .fv-acct-pill--processing {
  border-color: rgba(47, 107, 70, 0.34);
  background: rgba(226, 236, 227, 0.7);
  color: #2f6b46;
}

.fv-account .fv-acct-pill--cancelled,
.fv-account .fv-acct-pill--failed,
.fv-account .fv-acct-pill--refunded {
  border-color: rgba(201, 121, 115, 0.4);
  background: rgba(242, 217, 212, 0.5);
  color: #8c4a44;
}

.fv-account .fv-acct-pager { margin-top: 16px; display: flex; gap: 10px; }

/* ---------- empty states ---------- */
.fv-account .fv-acct-empty {
  padding: 46px 26px;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  border: 1px solid var(--fv-surface-line);
  border-radius: 8px;
  background: var(--fv-surface-bg);
  box-shadow: var(--fv-surface-shadow);
}

.fv-account .fv-acct-empty__mark {
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-2);
  border: 1px solid var(--fv-surface-line);
}

.fv-account .fv-acct-empty__mark svg { width: 22px; height: 22px; color: var(--evergreen-2); }

.fv-account .fv-acct-empty h3 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.1;
}

.fv-account .fv-acct-empty p { margin: 0; max-width: 46ch; color: rgba(31, 39, 36, 0.68); font-size: 15.5px; }
.fv-account .fv-acct-empty__note { font-size: 13.5px !important; font-style: italic; }
.fv-account .fv-acct-empty__note a { color: var(--blush); font-style: normal; font-weight: 700; }
.fv-account .fv-acct-empty .fv-btn { margin-top: 10px; }

/* ---------- forms : extends .shop-search ---------- */
.fv-account .fv-acct-form {
  max-width: 680px;
  padding: 24px;
  border: 1px solid var(--fv-surface-line);
  border-radius: 8px;
  background: var(--fv-surface-bg);
  box-shadow: var(--fv-surface-shadow);
}

.fv-account .fv-acct-form fieldset { margin: 0 0 22px; padding: 0; border: 0; }

.fv-account .fv-acct-form legend {
  padding: 0 0 12px;
  color: var(--fv-accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.fv-account .fv-field {
  display: grid;
  gap: 7px;
  margin: 0 0 14px;
  float: none;
  width: 100%;
}

.fv-account .fv-field label { color: var(--evergreen); font-size: 13.5px; font-weight: 800; }
.fv-account .fv-field .required { color: var(--blush); }

.fv-account .fv-field input[type="text"],
.fv-account .fv-field input[type="email"],
.fv-account .fv-field input[type="password"],
.fv-account .fv-field select {
  min-height: 46px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid rgba(225, 215, 204, 0.88);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.84);
  color: var(--ink);
  font-size: 16px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.fv-account .fv-field input:focus,
.fv-account .fv-field select:focus {
  outline: 0;
  border-color: var(--evergreen);
  box-shadow: 0 0 0 3px rgba(40, 72, 63, 0.12);
}

.fv-account .fv-field small { color: rgba(31, 39, 36, 0.55); font-size: 12.5px; }
.fv-account .fv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.fv-account .fv-acct-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}

.fv-account .fv-acct-form__note {
  margin: 0;
  color: rgba(31, 39, 36, 0.55);
  font-size: 13px;
  font-style: italic;
}

.fv-account .fv-acct-form__note a { color: var(--blush); font-weight: 700; }
.fv-account .fv-forgot { color: rgba(31, 39, 36, 0.6); font-size: 13.5px; font-weight: 700; }
.fv-account .fv-forgot:hover { color: var(--blush); }

.fv-account .fv-acct-remember {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(31, 39, 36, 0.68);
  font-size: 14px;
}

/* ---------- signed out ---------- */
.fv-account .fv-auth {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.fv-account .fv-auth--single { grid-template-columns: minmax(0, 520px); }

.fv-account .fv-auth__card {
  padding: 26px;
  border: 1px solid var(--fv-surface-line);
  border-radius: 8px;
  background: var(--fv-surface-bg);
  box-shadow: var(--fv-surface-shadow);
}

.fv-account .fv-auth__card--alt {
  background: linear-gradient(150deg, rgba(240, 245, 237, 0.7), rgba(255, 253, 249, 0.8));
}

.fv-account .fv-auth__card h3 {
  margin: 0 0 6px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 500;
  line-height: 1.06;
}

.fv-account .fv-auth__card > p { margin: 0 0 18px; color: rgba(31, 39, 36, 0.68); font-size: 15px; }

.fv-account .fv-auth__perks { list-style: none; margin: 0 0 18px; padding: 0; }

.fv-account .fv-auth__perks li {
  min-height: 44px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--fv-hairline);
  color: rgba(31, 39, 36, 0.72);
  font-size: 14.5px;
}

.fv-account .fv-auth__perks li:last-child { border-bottom: 0; }
.fv-account .fv-auth__perks svg { width: 16px; height: 16px; color: var(--evergreen-2); }

/* ---------- rewards ---------- */
.fv-account .fv-loyal {
  overflow: hidden;
  border: 1px solid rgba(215, 179, 106, 0.44);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 8%, rgba(215, 179, 106, 0.2), transparent 42%),
    linear-gradient(150deg, rgba(255, 253, 249, 0.96), rgba(240, 245, 237, 0.6));
  box-shadow: var(--shadow-soft);
}

.fv-account .fv-loyal__top {
  padding: 26px 26px 22px;
  text-align: center;
  border-bottom: 1px solid var(--fv-hairline);
}

.fv-account .fv-loyal__badge {
  width: fit-content;
  margin: 0 auto 14px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(215, 179, 106, 0.5);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.8);
  color: var(--fv-accent);
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fv-account .fv-loyal__badge svg { width: 13px; height: 13px; }

.fv-account .fv-loyal__top h3 {
  margin: 0 0 10px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.04;
}

.fv-account .fv-loyal__top > p { margin: 0 auto; max-width: 52ch; color: rgba(31, 39, 36, 0.7); font-size: 16px; }

.fv-account .fv-loyal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fv-account .fv-loyal__cell {
  padding: 22px;
  text-align: center;
  border-right: 1px solid var(--fv-hairline);
}

.fv-account .fv-loyal__cell:last-child { border-right: 0; }

.fv-account .fv-loyal__cell > span {
  width: 38px;
  height: 38px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(215, 179, 106, 0.16);
}

.fv-account .fv-loyal__cell > span svg { width: 19px; height: 19px; color: var(--fv-accent); }

.fv-account .fv-loyal__cell h4 {
  margin: 0 0 6px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.15;
}

.fv-account .fv-loyal__cell p { margin: 0; color: rgba(31, 39, 36, 0.68); font-size: 14px; line-height: 1.5; }

.fv-account .fv-loyal__foot {
  padding: 18px 26px;
  text-align: center;
  border-top: 1px solid var(--fv-hairline);
  background: rgba(255, 253, 249, 0.5);
}

.fv-account .fv-loyal__foot p { margin: 0; color: rgba(31, 39, 36, 0.6); font-size: 13.5px; font-style: italic; }

/* ---------- WooCommerce notices inside the account ---------- */
.fv-account .woocommerce-message,
.fv-account .woocommerce-error,
.fv-account .woocommerce-info {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--fv-surface-line);
  border-left: 3px solid var(--champagne);
  border-radius: 8px;
  background: var(--white);
  list-style: none;
  font-size: 14.5px;
}

.fv-account .woocommerce-error { border-left-color: var(--blush); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .fv-account .fv-acct-hero { grid-template-columns: 1fr; gap: 26px; padding: 20px; }
  .fv-account .fv-acct-hero h1 { max-width: 20ch; }
  .fv-account .fv-loyal__grid { grid-template-columns: 1fr; }
  .fv-account .fv-loyal__cell { border-right: 0; border-bottom: 1px solid var(--fv-hairline); }
  .fv-account .fv-loyal__cell:last-child { border-bottom: 0; }
}

@media (max-width: 860px) {
  .fv-account .fv-order {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id     total"
      "items  items"
      "status act";
    gap: 10px 14px;
    padding: 16px;
  }
  .fv-account .fv-order__total { align-self: start; }
  .fv-account .fv-acct-pill { justify-self: start; }
}

@media (max-width: 560px) {
  .fv-account .fv-acct-hero { border-radius: 16px; padding: 18px; }
  .fv-account .fv-acct-hero h1 { font-size: 38px; }
  .fv-account .fv-acct-nav { border-radius: 14px; padding: 9px 10px; }
  .fv-account .fv-acct-apps { grid-template-columns: 1fr; }
  .fv-account .fv-field-row { grid-template-columns: 1fr; }
  .fv-account .fv-acct-form { padding: 18px; }
  .fv-account .fv-btn { width: 100%; }
  .fv-account .fv-order__total { font-size: 20px; }
}

/* ============================================================
   CART DRAWER
   Every rule is scoped to .fv-cart / .fv-cart-scrim. Desktop is a
   side panel; below 640px it becomes a bottom sheet, which is the
   reachable position on a phone.
   ============================================================ */

.fv-cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(31, 39, 36, 0.34);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fv-cart-scrim.is-open { opacity: 1; }

.fv-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: min(400px, 94vw);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(40, 72, 63, 0.2);
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.fv-cart.is-open { transform: translateX(0); }
.fv-cart[hidden], .fv-cart-scrim[hidden] { display: none; }

/* grab handle only shows in bottom-sheet mode */
.fv-cart__grab { display: none; }

.fv-cart__head {
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.fv-cart__flash {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #2f6b46;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fv-cart.is-flash .fv-cart__flash { opacity: 1; transform: none; }

.fv-cart__tick {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(47, 107, 70, 0.14);
}

.fv-cart__tick svg { width: 11px; height: 11px; stroke: #2f6b46; stroke-width: 2.8; }

.fv-cart__head h3 {
  margin: 3px 0 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
}

.fv-cart__x {
  margin-left: auto;
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(31, 39, 36, 0.5);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.fv-cart__x:hover { background: var(--sage-2); color: var(--blush); }
.fv-cart__x svg { width: 17px; height: 17px; }

.fv-cart__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 20px 18px;
}

/* ---------- lines ---------- */
.fv-cart__line {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(225, 215, 204, 0.84);
}

.fv-cart__line:last-child { border-bottom: 0; }

.fv-cart__thumb {
  width: 60px;
  height: 60px;
  flex: none;
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 9px;
  background: var(--sage-2);
}

.fv-cart__thumb img { width: 100%; height: 100%; object-fit: cover; }

.fv-cart__info { min-width: 0; flex: 1; }

.fv-cart__info h4 {
  margin: 0 0 3px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
}

.fv-cart__info > span { color: rgba(31, 39, 36, 0.55); font-size: 12.5px; font-weight: 700; }

.fv-cart__remove {
  display: inline-block;
  margin-top: 5px;
  padding: 4px 0;
  color: rgba(31, 39, 36, 0.5);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fv-cart__remove:hover { color: var(--blush); }

.fv-cart__price {
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  white-space: nowrap;
}

.fv-cart__price .woocommerce-Price-amount { font-family: inherit; }

/* ---------- bundle nudge ---------- */
.fv-cart__nudge {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(215, 179, 106, 0.44);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(255, 253, 249, 0.96), rgba(240, 245, 237, 0.6));
}

.fv-cart__nudge p { margin: 0 0 9px; color: rgba(31, 39, 36, 0.72); font-size: 13.5px; }
.fv-cart__nudge b { color: var(--evergreen); }

.fv-cart__bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(40, 72, 63, 0.1);
  overflow: hidden;
}

.fv-cart__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--champagne), var(--blush));
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.fv-cart__nudge.is-hit { border-color: rgba(47, 107, 70, 0.4); }
.fv-cart__nudge.is-hit .fv-cart__bar span { background: #2f6b46; }

.fv-cart__nudge small {
  display: block;
  margin-top: 8px;
  color: rgba(31, 39, 36, 0.55);
  font-size: 12px;
  font-style: italic;
}

/* ---------- empty ---------- */
.fv-cart__empty { padding: 40px 10px; display: grid; justify-items: center; gap: 9px; text-align: center; }

.fv-cart__empty-mark {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 12px;
  background: var(--sage-2);
  color: var(--evergreen-2);
}

.fv-cart__empty-mark svg { width: 22px; height: 22px; }

.fv-cart__empty h4 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
}

.fv-cart__empty p { margin: 0; max-width: 34ch; color: rgba(31, 39, 36, 0.68); font-size: 14.5px; }
.fv-cart__empty .fv-cart__btn { margin-top: 10px; }

/* ---------- footer ---------- */
.fv-cart__foot {
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.72);
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
}

.fv-cart__foot:empty, .fv-cart__foot-sync:empty { display: none; }

.fv-cart__total { margin: 0 0 12px; display: flex; align-items: baseline; justify-content: space-between; }
.fv-cart__total dt { color: rgba(31, 39, 36, 0.68); font-size: 14px; font-weight: 600; }

.fv-cart__total dd {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
}

.fv-cart__total dd .woocommerce-Price-amount { font-family: inherit; }

.fv-cart__saved {
  margin: -6px 0 12px;
  color: #2f6b46;
  font-size: 13px;
  font-weight: 700;
}

.fv-cart__acts { display: grid; gap: 9px; }

.fv-cart__btn {
  min-height: 52px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}

.fv-cart__btn:hover { transform: translateY(-1px); }

.fv-cart__btn--primary {
  background: var(--blush);
  color: var(--white);
  box-shadow: 0 12px 24px rgba(201, 121, 115, 0.24);
}

.fv-cart__btn--ghost {
  background: rgba(255, 253, 249, 0.75);
  border-color: var(--evergreen);
  color: var(--evergreen);
}

.fv-cart__fine {
  margin: 11px 0 0;
  text-align: center;
  color: rgba(31, 39, 36, 0.55);
  font-size: 12px;
  font-style: italic;
}

/* WooCommerce injects its own "View cart" link after an AJAX add.
   The drawer already offers that, so keep it out of the layout. */
.added_to_cart.wc-forward { display: none !important; }

/* Button feedback while the request is in flight. */
.product-card__purchase.loading,
.shop-product-card__purchase.loading,
.cta-buy-now-v3.loading { opacity: 0.65; pointer-events: none; }

/* ---------- phone: bottom sheet ---------- */
@media (max-width: 640px) {
  .fv-cart {
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 88dvh;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px rgba(40, 72, 63, 0.24);
    transform: translateY(100%);
  }

  .fv-cart.is-open { transform: translateY(0); }

  .fv-cart__grab {
    display: block;
    width: 40px;
    height: 4px;
    margin: 9px auto 0;
    border-radius: 99px;
    background: rgba(31, 39, 36, 0.18);
  }

  .fv-cart__head { padding: 12px 16px 14px; }
  .fv-cart__head h3 { font-size: 22px; }
  .fv-cart__body { padding: 12px 16px 16px; }
  .fv-cart__foot { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
  .fv-cart__thumb { width: 54px; height: 54px; }
  .fv-cart__info h4 { font-size: 17px; }
  .fv-cart__price { font-size: 18px; }
  .fv-cart__total dd { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-cart, .fv-cart-scrim, .fv-cart__bar span, .fv-cart__flash { transition: none !important; }
}

/* ============================================================
   ORDER RECEIVED
   Scoped to .fv-thanks. The commerce shell handles the hero and
   step bar; everything below the heading lives here.
   ============================================================ */

.commerce-layout--full { display: block; }
.commerce-layout--full .commerce-panel { width: 100%; max-width: none; }

/* completed steps read differently from the current one */
.commerce-steps li.is-done { color: var(--evergreen-2); }
.commerce-steps li.is-now { background: var(--evergreen); color: var(--white); }
.commerce-steps li.is-now span { background: var(--champagne); color: var(--evergreen); }

.fv-thanks {
  --fv-line: rgba(225, 215, 204, 0.84);
  --fv-sline: rgba(225, 215, 204, 0.82);
  --fv-sbg: rgba(255, 253, 249, 0.76);
  --fv-ssh: 0 14px 34px rgba(40, 72, 63, 0.075);
  --fv-accent: hsl(28 90% 35%);
}

/* ---------- downloads ---------- */
.fv-thanks__dl {
  overflow: hidden;
  border: 1px solid rgba(215, 179, 106, 0.44);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 6%, rgba(215, 179, 106, 0.18), transparent 44%),
    linear-gradient(150deg, rgba(255, 253, 249, 0.97), rgba(240, 245, 237, 0.6));
  box-shadow: 0 18px 44px rgba(40, 72, 63, 0.1);
}

.fv-thanks__dl-head {
  padding: 22px 24px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--fv-sline);
}

.fv-thanks__dl-head h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 500;
  line-height: 1.1;
}

.fv-thanks__dl-head p { margin: 3px 0 0; color: rgba(31, 39, 36, 0.68); font-size: 14.5px; }

.fv-thanks__count {
  margin-left: auto;
  padding: 7px 12px;
  border: 1px solid var(--fv-sline);
  border-radius: 999px;
  background: var(--white);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.fv-thanks__items { padding: 6px 24px 20px; }

.fv-thanks__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--fv-line);
}

.fv-thanks__row:last-child { border-bottom: 0; }

.fv-thanks__thumb {
  width: 64px;
  height: 64px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--fv-sline);
  border-radius: 10px;
  background: var(--sage-2);
}

.fv-thanks__thumb img { width: 100%; height: 100%; object-fit: cover; }

.fv-thanks__info { min-width: 0; flex: 1; }

.fv-thanks__info h3 {
  margin: 0 0 3px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.15;
}

.fv-thanks__info span { color: rgba(31, 39, 36, 0.55); font-size: 12.5px; font-weight: 700; }

.fv-thanks__none {
  max-width: 190px;
  color: var(--fv-accent);
  font-size: 12.5px;
  font-weight: 800;
  text-align: right;
}

.fv-thanks__row--nofile { opacity: 0.86; }

.fv-thanks__dl-foot {
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  border-top: 1px solid var(--fv-sline);
  background: rgba(255, 253, 249, 0.55);
}

.fv-thanks__dl-foot p { margin: 0; color: rgba(31, 39, 36, 0.68); font-size: 13.5px; }
.fv-thanks__dl-foot strong { color: var(--evergreen); }
.fv-thanks__dl-foot .fv-thanks__btn { margin-left: auto; }

/* ---------- buttons ---------- */
.fv-thanks__btn {
  min-height: 48px;
  padding: 13px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.16s ease;
}

.fv-thanks__btn:hover { transform: translateY(-1px); }

.fv-thanks__btn--primary {
  background: var(--blush);
  color: var(--white);
  box-shadow: 0 12px 24px rgba(201, 121, 115, 0.24);
}

.fv-thanks__btn--ghost {
  background: rgba(255, 253, 249, 0.8);
  border-color: var(--evergreen);
  color: var(--evergreen);
}

.fv-thanks__btn--sm { min-height: 42px; padding: 11px 18px; font-size: 14.5px; }
.fv-thanks__btn svg { width: 17px; height: 17px; flex: none; }

/* ---------- pending / failed ---------- */
.fv-thanks__pending {
  padding: 26px;
  text-align: center;
  border: 1px solid rgba(215, 179, 106, 0.5);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 253, 249, 0.97), rgba(240, 245, 237, 0.6));
  box-shadow: var(--fv-ssh);
}

.fv-thanks__pending--failed { border-color: rgba(201, 121, 115, 0.5); }

.fv-thanks__mark {
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(215, 179, 106, 0.18);
}

.fv-thanks__mark svg { width: 24px; height: 24px; color: var(--fv-accent); }
.fv-thanks__pending--failed .fv-thanks__mark { background: rgba(201, 121, 115, 0.16); }
.fv-thanks__pending--failed .fv-thanks__mark svg { color: var(--blush); }

.fv-thanks__pending h2 {
  margin: 0 0 8px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 500;
  line-height: 1.1;
}

.fv-thanks__pending > p { margin: 0 auto; max-width: 54ch; color: rgba(31, 39, 36, 0.7); font-size: 15.5px; }

.fv-thanks__steps {
  margin: 18px auto 0;
  padding: 0;
  max-width: 430px;
  text-align: left;
  list-style: none;
}

.fv-thanks__steps li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--fv-line);
  color: rgba(31, 39, 36, 0.72);
  font-size: 14.5px;
}

.fv-thanks__steps li:last-child { border-bottom: 0; }
.fv-thanks__steps strong { color: var(--evergreen); }

.fv-thanks__steps i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sage);
  color: var(--evergreen-2);
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.fv-thanks__failed-acts { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fv-thanks__help { margin: 14px 0 0; font-size: 13.5px; color: rgba(31, 39, 36, 0.6); }
.fv-thanks__help a, .fv-thanks__next a { color: var(--blush); font-weight: 700; }

/* ---------- summary ---------- */
.fv-thanks__sum {
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid var(--fv-sline);
  border-radius: 12px;
  background: var(--fv-sbg);
  box-shadow: var(--fv-ssh);
}

.fv-thanks__grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.fv-thanks__grid > div { padding: 16px 20px; border-right: 1px solid var(--fv-line); }
.fv-thanks__grid > div:last-child { border-right: 0; }

.fv-thanks__grid dt {
  margin: 0 0 4px;
  color: rgba(31, 39, 36, 0.5);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fv-thanks__grid dd { margin: 0; color: var(--evergreen); font-size: 16px; font-weight: 800; word-break: break-word; }
.fv-thanks__grid dd.is-big { font-family: var(--serif); font-size: 24px; font-weight: 600; }

.fv-thanks__lines { padding: 6px 20px 14px; border-top: 1px solid var(--fv-line); }

.fv-thanks__line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(225, 215, 204, 0.7);
  color: rgba(31, 39, 36, 0.72);
  font-size: 14.5px;
}

.fv-thanks__line:last-of-type { border-bottom: 0; }
.fv-thanks__line strong { color: var(--evergreen); font-weight: 700; }
.fv-thanks__line.is-saving, .fv-thanks__line.is-saving span { color: #2f6b46; font-weight: 800; }

.fv-thanks__total {
  margin-top: 6px;
  padding: 12px 0 2px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--fv-sline);
}

.fv-thanks__total span { color: rgba(31, 39, 36, 0.68); font-size: 14px; font-weight: 700; }
.fv-thanks__total strong { color: var(--evergreen); font-family: var(--serif); font-size: 25px; font-weight: 600; }
.fv-thanks__total .woocommerce-Price-amount { font-family: inherit; }

/* ---------- next steps ---------- */
.fv-thanks__next { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.fv-thanks__next > div {
  padding: 20px;
  border: 1px solid var(--fv-sline);
  border-radius: 12px;
  background: var(--fv-sbg);
  box-shadow: var(--fv-ssh);
}

.fv-thanks__next > div > span {
  width: 36px;
  height: 36px;
  margin-bottom: 11px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fv-sline);
  border-radius: 10px;
  background: var(--sage-2);
}

.fv-thanks__next > div > span svg { width: 18px; height: 18px; color: var(--evergreen-2); }

.fv-thanks__next h4 {
  margin: 0 0 5px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
}

.fv-thanks__next p { margin: 0; color: rgba(31, 39, 36, 0.68); font-size: 14px; line-height: 1.5; }

.fv-thanks__tail { margin-top: 24px; text-align: center; }
.fv-thanks__tail p { margin: 0 0 12px; color: rgba(31, 39, 36, 0.6); font-size: 13.5px; font-style: italic; }

/* ============================================================
   MOBILE
   The download button is the job on this page, so it goes full
   width and never shares a row with anything else.
   ============================================================ */
@media (max-width: 900px) {
  .fv-thanks__next { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .fv-thanks__grid { grid-template-columns: 1fr 1fr; }
  .fv-thanks__grid > div { border-right: 0; border-bottom: 1px solid var(--fv-line); }
  .fv-thanks__grid > div:nth-child(odd) { border-right: 1px solid var(--fv-line); }
  .fv-thanks__grid > div:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .fv-thanks__dl { border-radius: 14px; }
  .fv-thanks__dl-head { padding: 18px 16px 15px; }
  .fv-thanks__dl-head h2 { font-size: 25px; }
  .fv-thanks__count { margin-left: 0; }
  .fv-thanks__items { padding: 4px 16px 16px; }

  /* image + name on one line, button on its own beneath */
  .fv-thanks__row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
  }
  .fv-thanks__thumb { width: 54px; height: 54px; }
  .fv-thanks__info h3 { font-size: 19px; }
  .fv-thanks__row .fv-thanks__btn { grid-column: 1 / -1; width: 100%; min-height: 52px; }
  .fv-thanks__none { grid-column: 1 / -1; max-width: none; text-align: left; }

  .fv-thanks__dl-foot { padding: 14px 16px; }
  .fv-thanks__dl-foot .fv-thanks__btn { margin-left: 0; width: 100%; }

  .fv-thanks__pending { padding: 20px 16px; border-radius: 14px; }
  .fv-thanks__pending h2 { font-size: 25px; }
  .fv-thanks__failed-acts .fv-thanks__btn { width: 100%; }

  .fv-thanks__grid { grid-template-columns: 1fr; }
  .fv-thanks__grid > div { border-right: 0 !important; padding: 13px 16px; }
  .fv-thanks__lines { padding: 6px 16px 14px; }
  .fv-thanks__line { flex-wrap: wrap; gap: 2px 14px; }
  .fv-thanks__line span:last-child { font-weight: 800; color: var(--evergreen); }
  .fv-thanks__total strong { font-size: 23px; }

  .fv-thanks__next { gap: 11px; }
  .fv-thanks__next > div { padding: 16px; }
  .fv-thanks__tail .fv-thanks__btn { width: 100%; }
}

/* Step bar: keep all three on one line on a phone. */
@media (max-width: 560px) {
  .commerce-shell--received .commerce-steps { width: 100%; padding: 6px; gap: 4px; }
  .commerce-shell--received .commerce-steps li { padding: 7px 9px; font-size: 12.5px; gap: 6px; }
  .commerce-shell--received .commerce-steps li span { width: 19px; height: 19px; font-size: 11px; }
}

/* Gateway instructions (bank details, COD notes) surfaced inside the design
   instead of printing as a bare paragraph under everything. */
.fv-thanks__gateway {
  margin-top: 20px;
  padding: 15px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-left: 3px solid var(--champagne);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.fv-thanks__gateway > span {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  color: var(--evergreen-2);
}

.fv-thanks__gateway svg { width: 20px; height: 20px; }
.fv-thanks__gateway div { min-width: 0; }
.fv-thanks__gateway p { margin: 0; color: rgba(31, 39, 36, 0.72); font-size: 14.5px; line-height: 1.55; }
.fv-thanks__gateway p + p { margin-top: 7px; }
.fv-thanks__gateway strong { color: var(--evergreen); }

/* Container for anything a plugin hooks onto woocommerce_thankyou. */
.fv-thanks__hooks:empty { display: none; }
.fv-thanks__hooks { margin-top: 20px; }

@media (max-width: 560px) {
  .fv-thanks__gateway { padding: 14px 16px; }
}

/* ---- account page: let the account templates own the page ---- */
.page-shell--account { padding-top: 26px; }
.page-shell--account .page-content > .woocommerce { display: block; }

/* WooCommerce notices inside the account carry their own .button (Resend,
   View cart). Left alone they render as a foreign grey block. */
.fv-account .woocommerce-message,
.fv-account .woocommerce-error,
.fv-account .woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  color: rgba(31, 39, 36, 0.78);
}

.fv-account .woocommerce-message::before,
.fv-account .woocommerce-error::before,
.fv-account .woocommerce-info::before {
  content: none;
}

.fv-account .woocommerce-info .button,
.fv-account .woocommerce-message .button,
.fv-account .woocommerce-error .button {
  order: 2;
  margin-left: auto;
  min-height: 40px;
  padding: 10px 18px;
  border: 1px solid var(--evergreen);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.85);
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background 0.16s ease;
}

.fv-account .woocommerce-info .button:hover,
.fv-account .woocommerce-message .button:hover,
.fv-account .woocommerce-error .button:hover {
  background: var(--sage-2);
}

@media (max-width: 560px) {
  .fv-account .woocommerce-info .button,
  .fv-account .woocommerce-message .button,
  .fv-account .woocommerce-error .button {
    order: 3;
    margin-left: 0;
    width: 100%;
  }
}

/* ============================================================
   ACCOUNT NAV — beat WooCommerce's two-column float
   woocommerce-layout.css sets
     .woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}
   at the same specificity as ours but loads later, which squeezed the tab
   bar into a third of the page and forced it to scroll. One extra class
   settles it.
   ============================================================ */
.woocommerce-account .fv-account .woocommerce-MyAccount-navigation,
.woocommerce-account .fv-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
  clear: both;
}

/* One line, always. No horizontal scrolling. */
.fv-account .fv-acct-nav {
  flex-wrap: nowrap;
  overflow: visible;
}

.fv-account .fv-acct-tab,
.fv-account .fv-acct-logout {
  flex: 0 1 auto;
  min-width: 0;
}

@media (max-width: 1000px) {
  .fv-account .fv-acct-nav { gap: 6px; padding: 9px 10px; }
  .fv-account .fv-acct-tab { padding: 8px 13px; font-size: 13.5px; }
  .fv-account .fv-acct-logout { padding: 8px 11px; font-size: 13.5px; }
}

@media (max-width: 760px) {
  .fv-account .fv-acct-nav { gap: 5px; padding: 8px 9px; }
  .fv-account .fv-acct-tab { min-height: 34px; padding: 7px 11px; font-size: 12.5px; gap: 6px; }
  .fv-account .fv-acct-logout { padding: 7px 9px; font-size: 12.5px; }
  .fv-account .fv-acct-tab__n { min-width: 18px; padding: 1px 5px; font-size: 10px; }
}

@media (max-width: 560px) {
  .fv-account .fv-acct-nav { gap: 4px; padding: 7px 8px; border-radius: 999px; }
  .fv-account .fv-acct-tab { min-height: 36px; padding: 8px 12px; font-size: 12px; gap: 5px; }
  .fv-account .fv-acct-logout { margin-left: 0; padding: 8px 10px; font-size: 12px; }
  /* decorative only — the count and the "soon" pill are the first to go */
  .fv-account .fv-acct-tab__n,
  .fv-account .fv-acct-tab__soon { display: none; }
}

@media (max-width: 400px) {
  .fv-account .fv-acct-nav { gap: 3px; padding: 6px 6px; }
  .fv-account .fv-acct-tab { padding: 7px 9px; font-size: 11px; }
  .fv-account .fv-acct-logout { padding: 7px 7px; font-size: 11px; }
}

/* ============================================================
   Whop payment form — order-received page, before payment
   Shares the .fv-thanks tokens, so it sits in the same family
   as the downloads card it is replacing.
   ============================================================ */
.fv-thanks--paying { max-width: 720px; margin-inline: auto; }

.fv-pay {
  overflow: hidden;
  border: 1px solid rgba(215, 179, 106, 0.44);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 6%, rgba(215, 179, 106, 0.18), transparent 44%),
    linear-gradient(150deg, rgba(255, 253, 249, 0.97), rgba(240, 245, 237, 0.6));
  box-shadow: 0 18px 44px rgba(40, 72, 63, 0.1);
}

.fv-pay__head {
  padding: 22px 24px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(225, 215, 204, 0.82);
}

.fv-pay__eyebrow {
  margin: 0 0 4px;
  color: hsl(28 90% 35%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fv-pay__head h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 500;
  line-height: 1.1;
}

.fv-pay__sub { margin: 4px 0 0; color: rgba(31, 39, 36, 0.68); font-size: 14.5px; }

.fv-pay__total {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
}

.fv-pay__total small {
  color: rgba(31, 39, 36, 0.55);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fv-pay__sandbox {
  margin: 0;
  padding: 10px 24px;
  border-bottom: 1px solid rgba(225, 215, 204, 0.82);
  background: rgba(215, 179, 106, 0.14);
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* Whop renders an iframe in here; it sizes itself. */
.fv-pay__frame { padding: 18px 24px 6px; min-height: 320px; }
.fv-pay__frame iframe { width: 100%; border: 0; }

.fv-pay__waiting {
  padding: 44px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.fv-pay__waiting p { margin: 0; color: rgba(31, 39, 36, 0.7); font-size: 15.5px; }
.fv-pay__waiting strong { color: var(--evergreen); }

.fv-pay__spin {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(40, 72, 63, 0.16);
  border-top-color: var(--evergreen);
  border-radius: 50%;
  animation: fv-pay-spin 0.8s linear infinite;
}

@keyframes fv-pay-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fv-pay__spin { animation-duration: 2.4s; }
}

.fv-pay__slow {
  margin: 0;
  padding: 0 24px 22px;
  color: rgba(31, 39, 36, 0.7);
  font-size: 14.5px;
  text-align: center;
}

.fv-pay__foot {
  margin: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(225, 215, 204, 0.82);
  color: rgba(31, 39, 36, 0.6);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 720px) {
  .fv-pay__head { padding: 18px 16px 15px; gap: 10px; }
  .fv-pay__head h2 { font-size: 25px; }
  .fv-pay__sub { font-size: 13.5px; }
  /* the total keeps its own line rather than squeezing the heading */
  .fv-pay__total { margin-left: 0; align-items: flex-start; font-size: 24px; }
  .fv-pay__frame { padding: 14px 12px 4px; }
  .fv-pay__sandbox, .fv-pay__slow, .fv-pay__foot { padding-inline: 16px; }
}

/* our own submit button, replacing Whop's hidden "Join" */
.fv-pay__cta {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 16px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--blush);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
  box-shadow: 0 14px 30px rgba(201, 121, 115, 0.28);
}

.fv-pay__cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(201, 121, 115, 0.34); }
.fv-pay__cta:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.fv-pay__cta-note {
  margin: 10px 0 2px;
  color: rgba(31, 39, 36, 0.55);
  font-size: 12.5px;
  text-align: center;
}

/* ============================================================
   Commerce steps 1-2-3 — one header treatment for all three.
   Cart and Checkout already centred; the order-received page
   was falling through to the default left/right hero.
   ============================================================ */
.commerce-shell--received .commerce-hero {
  width: 100%;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.commerce-shell--received .commerce-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.commerce-shell--received .commerce-hero h1 {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(42px, 4.6vw, 62px);
}

.commerce-shell--received .commerce-hero p { display: none; }
.commerce-shell--received .commerce-steps { width: min(430px, 100%); }

/* ---------- the payment step ---------- */

/*
 * While paying, the payment card IS the card. Without this the outer
 * commerce panel draws its own border and shadow around a narrower card,
 * so the page reads as two boxes with empty gutters between them.
 */
.commerce-shell--paying .commerce-panel {
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.fv-thanks--paying {
  max-width: 660px;
  margin-inline: auto;
}

/*
 * .fv-pay__waiting sets display:flex, which outranks the browser default
 * for [hidden] — the "Payment received" spinner was showing under the form
 * before anyone had paid. Kill it explicitly.
 */
.fv-pay [hidden] { display: none !important; }

/* the iframe already carries its own padding, so keep ours light */
.fv-pay__frame { padding: 14px 18px 18px; }

/* Owner-only warning: a quiet note, not a hazard stripe across the card. */
.fv-pay__sandbox {
  margin: 14px 18px 0;
  padding: 9px 13px;
  border: 1px dashed rgba(215, 179, 106, 0.75);
  border-radius: 10px;
  background: rgba(215, 179, 106, 0.08);
  color: rgba(31, 39, 36, 0.72);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

@media (max-width: 760px) {
  .fv-pay__frame { padding: 10px 10px 14px; }
  .fv-pay__sandbox { margin: 12px 12px 0; }
  .fv-pay__cta { padding: 15px 18px; font-size: 16px; }
}

/* ---------- walk-back links on the 1-2-3 trail ---------- */
/* The li keeps the pill styling; the anchor fills it so the whole pill is
   the hit target rather than just the words. */
.commerce-steps li.is-link { padding: 0; }

.commerce-steps li.is-link > a {
  min-height: 40px;
  width: 100%;
  padding: 6px 14px 6px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: background 0.16s ease;
}

.commerce-steps li.is-link:hover { color: var(--evergreen); }
.commerce-steps li.is-link > a:hover { background: rgba(226, 236, 227, 0.72); }

.commerce-steps li.is-link > a:focus-visible {
  outline: 2px solid var(--evergreen);
  outline-offset: -2px;
}

/* a completed step reads as somewhere you can return to */
.commerce-steps li.is-link { cursor: pointer; }

@media (hover: none) {
  .commerce-steps li.is-link > a:hover { background: none; }
}

/* ============================================================
   Empty-cart block — "New in store"
   WooCommerce renders this grid with its own core styling, which
   is why the page changed character the moment the cart emptied.
   These rules bring it back to the FluVana card look; nothing in
   the page content is touched.
   ============================================================ */
.commerce-panel .wp-block-woocommerce-empty-cart-block {
  padding-block: 6px 4px;
}

.commerce-panel .wc-block-cart__empty-cart__title {
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
}

/* the stock dotted separator reads as leftover boilerplate */
.commerce-panel .wp-block-woocommerce-empty-cart-block .wp-block-separator {
  display: none;
}

.commerce-panel .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
  margin-top: 26px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
}

.commerce-panel .wc-block-grid__products {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
}

.commerce-panel .wc-block-grid__product {
  margin: 0 !important;
  padding: 0;
  width: auto !important;
  max-width: none !important;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 0, rgba(215, 179, 106, 0.16), transparent 38%),
    rgba(255, 253, 249, 0.92);
  box-shadow: 0 16px 36px rgba(40, 72, 63, 0.07);
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.commerce-panel .wc-block-grid__product:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(40, 72, 63, 0.11);
}

.commerce-panel .wc-block-grid__product-link { display: block; text-decoration: none; }

.commerce-panel .wc-block-grid__product-image {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid rgba(225, 215, 204, 0.74);
  background: var(--white);
}

.commerce-panel .wc-block-grid__product-image img {
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  display: block;
  object-fit: cover;
}

/* square core badge -> the store's pill */
.commerce-panel .wc-block-grid__product-onsale {
  top: 10px;
  right: 10px;
  left: auto;
  padding: 5px 11px;
  min-width: 0;
  border: 1px solid rgba(215, 179, 106, 0.5);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.94);
  color: var(--evergreen);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.commerce-panel .wc-block-grid__product-title {
  margin: 0;
  padding: 14px 14px 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
}

.commerce-panel .wc-block-grid__product-price {
  padding: 8px 14px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--evergreen);
  font-size: 17px;
  font-weight: 800;
}

.commerce-panel .wc-block-grid__product-price del {
  color: rgba(31, 39, 36, 0.42);
  font-size: 14px;
  font-weight: 500;
}

.commerce-panel .wc-block-grid__product-price ins { text-decoration: none; }

.commerce-panel .wc-block-grid__product-add-to-cart { padding: 12px 14px 14px; }

.commerce-panel .wc-block-grid__product-add-to-cart .wp-block-button__link {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--blush);
  color: var(--white);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 800;
  text-align: center;
}

.commerce-panel .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background: #b96a64;
}

@media (max-width: 1024px) {
  .commerce-panel .wc-block-grid__products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .commerce-panel .wc-block-grid__product-title { font-size: 17px; }
}

@media (max-width: 680px) {
  .commerce-panel .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .commerce-panel .wc-block-grid__product-title { padding: 11px 11px 0; font-size: 15.5px; }
  .commerce-panel .wc-block-grid__product-price { padding: 6px 11px 0; font-size: 15px; }
  .commerce-panel .wc-block-grid__product-add-to-cart { padding: 10px 11px 11px; }
  .commerce-panel .wc-block-grid__product-add-to-cart .wp-block-button__link { padding: 10px 12px; font-size: 13px; }
}

/* ============================================================
   Order summary header — "PRODUCT / SUBTOTAL"
   Was a <div> injected before the summary with insertBefore,
   inside a container React owns. Same look, drawn with
   pseudo-elements so nothing is added to React's tree.
   ============================================================ */
.commerce-shell--checkout .wc-block-components-order-summary {
  position: relative;
  padding-top: 34px;
}

.commerce-shell--checkout .wc-block-components-order-summary::before,
.commerce-shell--checkout .wc-block-components-order-summary::after {
  position: absolute;
  top: 0;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.commerce-shell--checkout .wc-block-components-order-summary::before {
  content: "Product";
  left: 24px;
}

.commerce-shell--checkout .wc-block-components-order-summary::after {
  content: "Subtotal";
  right: 24px;
}

/* the rule that draws the divider under those labels */
.commerce-shell--checkout .wc-block-components-order-summary > * {
  border-top: 0;
}

.commerce-shell--checkout .wc-block-components-order-summary::before {
  padding-bottom: 13px;
}

@media (max-width: 760px) {
  .commerce-shell--checkout .wc-block-components-order-summary::before { left: 16px; }
  .commerce-shell--checkout .wc-block-components-order-summary::after { right: 16px; }
}

/* ============================================================
   PLANNING SPACE (category) PAGES
   Rendered by template-planning-space.php. Reuses the shop
   page card, badge and trust-strip classes; only the layout
   around them is new.
   ============================================================ */
/* ---------- shell ---------- */
.fv-cat {
  width: var(--container);
  margin: 0 auto;
  padding: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 52px);
}

/* ---------- breadcrumb ---------- */
.fv-cat__crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(31, 39, 36, 0.5);
  font-size: 13px;
}

.fv-cat__crumbs a { color: rgba(31, 39, 36, 0.6); text-decoration: none; }
.fv-cat__crumbs a:hover { color: var(--evergreen); text-decoration: underline; }
.fv-cat__crumbs strong { color: var(--evergreen); font-weight: 700; }

/* ---------- hero, option A ---------- */
.fv-cat__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.44fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 72% 20%, rgba(215, 179, 106, 0.18), transparent 34%),
    linear-gradient(110deg, rgba(242, 217, 212, 0.5), rgba(255, 253, 249, 0.7) 52%, rgba(226, 236, 227, 0.44));
}

.fv-cat h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(44px, 4.6vw, 72px);
  font-weight: 500;
  line-height: 0.95;
}

.fv-cat h1 span {
  padding-inline: 0.04em;
  background: linear-gradient(180deg, transparent 58%, rgba(242, 217, 212, 0.92) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.fv-cat__lede {
  max-width: 46ch;
  margin: 16px 0 0;
  color: rgba(31, 39, 36, 0.78);
  font-size: 18px;
  line-height: 1.4;
}

.fv-cat__chips {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fv-cat__chips span {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.8);
  color: var(--evergreen);
  font-size: 12.5px;
  font-weight: 700;
}

/* the three facts beside the heading */
.fv-cat__hero-meta {
  display: grid;
  gap: 10px;
}

.fv-cat__hero-meta div {
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.82);
}

.fv-cat__hero-meta strong {
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}

.fv-cat__hero-meta small { color: rgba(31, 39, 36, 0.6); font-size: 13px; }

/* ---------- hero, option B ---------- */
.fv-cat__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 24%, rgba(215, 179, 106, 0.2), transparent 38%),
    linear-gradient(110deg, rgba(242, 217, 212, 0.5), rgba(255, 253, 249, 0.7) 52%, rgba(226, 236, 227, 0.44));
}

.fv-cat__split-acts {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fv-cat__split-art {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.fv-cat__split-art img { display: block; width: 100%; height: auto; }

/* ---------- where to start ---------- */
.fv-cat__start-head, .fv-cat__spaces-head { margin-bottom: 18px; }

.fv-cat__start-head h2, .fv-cat__spaces-head h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 500;
  line-height: 1.05;
}

.fv-cat__start-head p, .fv-cat__spaces-head p {
  margin: 6px 0 0;
  color: rgba(31, 39, 36, 0.66);
  font-size: 15.5px;
}

.fv-cat__picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.fv-cat__pick {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fv-cat__pick:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.fv-cat__pick-media { display: block; aspect-ratio: 1 / 1; background: var(--sage-2); }
.fv-cat__pick-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fv-cat__pick-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fv-cat__pick-body em {
  color: hsl(28 90% 35%);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.fv-cat__pick-body strong {
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.15;
}

.fv-cat__pick-body small { color: rgba(31, 39, 36, 0.66); font-size: 13.5px; line-height: 1.45; }

.fv-cat__pick-price {
  margin-top: 4px;
  color: var(--evergreen);
  font-size: 17px;
  font-weight: 800;
}

.fv-cat__pick-price del { margin-left: 6px; color: rgba(31, 39, 36, 0.4); font-weight: 500; }

/* ---------- toolbar ---------- */
.fv-cat__toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.fv-cat__toolbar h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
}

.fv-cat__sort {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(31, 39, 36, 0.6);
  font-size: 13px;
  font-weight: 700;
}

.fv-cat__sort select {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--evergreen);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
}

/* ---------- other spaces ---------- */
.fv-cat__spaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.fv-cat__space {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.fv-cat__space:hover { border-color: rgba(40, 72, 63, 0.4); transform: translateY(-2px); }

.fv-cat__space-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--sage);
  color: var(--evergreen);
}

.fv-cat__space-icon svg { width: 20px; height: 20px; }

.fv-cat__space-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fv-cat__space-text strong { color: var(--evergreen); font-size: 15.5px; font-weight: 700; }
.fv-cat__space-text small { color: rgba(31, 39, 36, 0.55); font-size: 12.5px; }
.fv-cat__space-go { margin-left: auto; color: var(--blush); font-size: 18px; }

/* ---------- closing ---------- */
.fv-cat__close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 50px);
  margin-bottom: clamp(40px, 6vw, 72px);
  padding: clamp(26px, 3.4vw, 42px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 20%, rgba(215, 179, 106, 0.16), transparent 40%),
    linear-gradient(120deg, rgba(226, 236, 227, 0.6), rgba(255, 253, 249, 0.85));
}

.fv-cat__close-eyebrow {
  color: hsl(28 90% 35%);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fv-cat__close h2 {
  margin: 8px 0 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.05;
}

.fv-cat__close p {
  max-width: 56ch;
  margin: 10px 0 0;
  color: rgba(31, 39, 36, 0.72);
  font-size: 16px;
  line-height: 1.45;
}

.fv-cat__close-acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- tablet: same shape as desktop, scaled down ---------- */
@media (max-width: 1024px) {
  .fv-cat__hero, .fv-cat__split { gap: 26px; padding: 26px; }
  .fv-cat__hero { grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr); }
  .fv-cat__split { grid-template-columns: minmax(0, 1fr) minmax(240px, 0.5fr); }
  .fv-cat__picks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .fv-cat__pick-body { padding: 13px 14px 15px; }
  .fv-cat__pick-body strong { font-size: 18px; }
  .fv-cat__hero-meta div { padding: 11px 14px; }
  .fv-cat__hero-meta strong { font-size: 22px; }
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .fv-cat { gap: 30px; padding-top: 16px; }
  .fv-cat__hero, .fv-cat__split { grid-template-columns: 1fr; padding: 22px 18px; }
  /* the art leads on B, so it moves above the words */
  .fv-cat__split-art { order: -1; }
  .fv-cat h1 { max-width: none; font-size: clamp(36px, 10vw, 46px); }
  .fv-cat__lede { font-size: 16px; }
  .fv-cat__hero-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fv-cat__hero-meta div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 12px; }
  .fv-cat__hero-meta strong { font-size: 19px; }
  .fv-cat__hero-meta small { font-size: 11.5px; }
  .fv-cat__picks { grid-template-columns: 1fr; }
  /* a pick becomes a row so three do not eat the whole screen */
  .fv-cat__pick { flex-direction: row; align-items: stretch; }
  .fv-cat__pick-media { flex: none; width: 108px; aspect-ratio: auto; }
  .fv-cat__pick-body { padding: 13px 14px; }
  .fv-cat__toolbar h2 { font-size: 24px; }
  .fv-cat__sort { margin-left: 0; width: 100%; }
  .fv-cat__sort select { flex: 1; }
  .fv-cat__close { grid-template-columns: 1fr; }
  .fv-cat__close-acts .button { flex: 1; text-align: center; }
}

/* ============================================================
   SEARCH RESULTS + 404
   Both used to fall through to index.php, which printed the site
   name as a heading and nothing else. They reuse the .fv-cat
   shell so they sit in the same family as the category pages.
   ============================================================ */
.fv-search__head,
.fv-404__head {
  padding: clamp(26px, 3.4vw, 44px) clamp(22px, 3vw, 40px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 20%, rgba(215, 179, 106, 0.18), transparent 38%),
    linear-gradient(110deg, rgba(242, 217, 212, 0.5), rgba(255, 253, 249, 0.7) 52%, rgba(226, 236, 227, 0.44));
}

.fv-search__head h1,
.fv-404__head h1 {
  max-width: 20ch;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 0.98;
}

.fv-search__head h1 span {
  padding-inline: 0.04em;
  background: linear-gradient(180deg, transparent 58%, rgba(242, 217, 212, 0.92) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- the search box ---------- */
.fv-search__form {
  position: relative;
  margin-top: 22px;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.fv-search__form svg { width: 19px; height: 19px; flex: none; color: rgba(31, 39, 36, 0.45); }

.fv-search__form input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
}

.fv-search__form input[type="search"]:focus { outline: none; }

.fv-search__form button {
  flex: none;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.fv-search__form button:hover { background: var(--evergreen-2); }

/* ---------- non-product results ---------- */
.fv-search__other {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.fv-search__other a {
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--evergreen);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
}

.fv-search__other a:hover { border-color: rgba(40, 72, 63, 0.4); }

/* ---------- nothing found ---------- */
.fv-search__empty {
  padding: clamp(34px, 5vw, 58px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 20px;
  background: rgba(255, 253, 249, 0.7);
}

.fv-search__empty > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--evergreen);
}

.fv-search__empty > span svg { width: 24px; height: 24px; }

.fv-search__empty h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500;
}

.fv-search__empty p { margin: 0; max-width: 52ch; color: rgba(31, 39, 36, 0.68); font-size: 15.5px; }
.fv-search__empty .button { margin-top: 6px; }

/* ---------- pagination ---------- */
.fv-search__pages {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.fv-search__pages .page-numbers {
  min-width: 42px;
  padding: 10px 14px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.fv-search__pages .page-numbers.current {
  border-color: var(--evergreen);
  background: var(--evergreen);
  color: var(--white);
}

.fv-search__pages a.page-numbers:hover { border-color: rgba(40, 72, 63, 0.45); }

/* ---------- 404 ---------- */
.fv-404__head .fv-cat__split-acts { margin-top: 22px; }

@media (max-width: 760px) {
  .fv-search__head, .fv-404__head { padding: 24px 18px; }
  .fv-search__head h1, .fv-404__head h1 { font-size: clamp(30px, 8vw, 40px); }
  .fv-search__form { flex-wrap: nowrap; padding-left: 12px; }
  .fv-search__form button { padding: 10px 15px; font-size: 13px; }
  .fv-404__head .fv-cat__split-acts .button { flex: 1; text-align: center; }
}

/* ============================================================
   COMPARISON GIFs
   Real recordings replacing the mocked-up spreadsheet grid and
   the static screenshots. Both files are 800x560, so the frames
   are set to that ratio — 16/9 and 16/10 would have cropped the
   top and bottom off the recording.
   ============================================================ */
.comparison-gif {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  background: var(--white);
}

/* ---------- homepage ---------- */
.comparison-demo__frame {
  aspect-ratio: 10 / 7;
}

/* the "Spreadsheet GIF" / "App GIF" pill was a placeholder label */
.comparison-demo__frame::after {
  content: none;
}

/* overlays sit on the recording, so they need to be above it */
.comparison-warning,
.comparison-note {
  z-index: 2;
}

/* ---------- product page ---------- */
.gif-slot-v3 {
  aspect-ratio: 10 / 7;
  padding: 0;
  display: block;
  overflow: hidden;
  /* the mocked grid lines and the placeholder wording are no longer needed */
  background: var(--white);
  font-size: 0;
}

.compare-card-v3.is-app .gif-slot-v3 {
  border-bottom-color: rgba(255, 253, 249, 0.18);
  background: var(--evergreen);
}

@media (max-width: 760px) {
  /* a little taller on a phone so the detail in the recording survives */
  .comparison-demo__frame,
  .gif-slot-v3 { aspect-ratio: 4 / 3; }
}

/* ============================================================
   CONTACT + FAQ
   Same shell as the category pages so they sit in the family.
   ============================================================ */
.fv-support {
  width: var(--container);
  margin: 0 auto;
  padding: 22px 0 clamp(40px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.6vw, 46px);
}

.fv-support__crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(31, 39, 36, 0.5);
  font-size: 13px;
}

.fv-support__crumbs a { color: rgba(31, 39, 36, 0.6); text-decoration: none; }
.fv-support__crumbs a:hover { color: var(--evergreen); text-decoration: underline; }
.fv-support__crumbs strong { color: var(--evergreen); font-weight: 700; }

.fv-support__hero {
  padding: clamp(28px, 3.6vw, 46px) clamp(22px, 3vw, 42px);
  border-radius: 22px;
  text-align: center;
  background:
    radial-gradient(circle at 72% 18%, rgba(215, 179, 106, 0.18), transparent 38%),
    linear-gradient(110deg, rgba(242, 217, 212, 0.5), rgba(255, 253, 249, 0.7) 52%, rgba(226, 236, 227, 0.44));
}

.fv-support__hero .shop-eyebrow { margin-inline: auto; }

.fv-support__hero h1 {
  max-width: 18ch;
  margin: 0 auto;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 500;
  line-height: 0.98;
}

.fv-support__hero p {
  max-width: 56ch;
  margin: 14px auto 0;
  color: rgba(31, 39, 36, 0.75);
  font-size: 17.5px;
  line-height: 1.45;
}

/* ---------- the email card ---------- */
.fv-contact__mail {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid rgba(215, 179, 106, 0.44);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0, rgba(215, 179, 106, 0.16), transparent 40%),
    var(--white);
  box-shadow: 0 18px 44px rgba(40, 72, 63, 0.09);
}

.fv-contact__mail-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--sage);
  color: var(--evergreen);
}

.fv-contact__mail-icon svg { width: 26px; height: 26px; }

.fv-contact__mail-text { flex: 1; min-width: 220px; }

.fv-contact__mail-text strong {
  display: block;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
}

.fv-contact__mail-text span { color: rgba(31, 39, 36, 0.66); font-size: 14.5px; }

.fv-contact__mail .button { flex: none; }

/* ---------- routing cards ---------- */
.fv-contact__routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.fv-contact__route {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.fv-contact__route:hover { transform: translateY(-2px); border-color: rgba(40, 72, 63, 0.38); }

.fv-contact__route em {
  color: hsl(28 90% 35%);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.fv-contact__route strong {
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.15;
}

.fv-contact__route p { margin: 0; color: rgba(31, 39, 36, 0.68); font-size: 14.5px; line-height: 1.45; }
.fv-contact__route span { margin-top: auto; padding-top: 6px; color: var(--blush); font-size: 13.5px; font-weight: 800; }

/* ---------- what to include ---------- */
.fv-contact__detail {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: clamp(22px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.76);
}

.fv-contact__detail h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.05;
}

.fv-contact__detail > div > p { margin: 8px 0 0; color: rgba(31, 39, 36, 0.7); font-size: 15.5px; line-height: 1.5; }

.fv-contact__list { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; }

.fv-contact__list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: rgba(31, 39, 36, 0.78);
  font-size: 15px;
  line-height: 1.45;
}

.fv-contact__list li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--evergreen-2); }
.fv-contact__list strong { color: var(--evergreen); }

/* ---------- business details ---------- */
.fv-contact__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  padding: 18px 22px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: rgba(31, 39, 36, 0.62);
  font-size: 13.5px;
}

.fv-contact__legal strong { color: var(--evergreen); font-weight: 800; }
.fv-contact__legal a { color: var(--evergreen); }

/* ---------- FAQ ---------- */
.fv-faq__group + .fv-faq__group { margin-top: 8px; }

.fv-faq__group h2 {
  margin: 0 0 14px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
}

.fv-faq__items {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
}

.fv-faq__items details { border-bottom: 1px solid rgba(225, 215, 204, 0.7); }
.fv-faq__items details:last-child { border-bottom: 0; }

.fv-faq__items summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  color: var(--evergreen);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.fv-faq__items summary::-webkit-details-marker { display: none; }

.fv-faq__items summary::after {
  content: "+";
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--sage-2);
  color: var(--evergreen);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.fv-faq__items details[open] summary::after { content: "\2013"; }
.fv-faq__items summary:hover { background: rgba(240, 245, 237, 0.5); }

.fv-faq__items p {
  margin: 0;
  padding: 0 20px 18px;
  max-width: 74ch;
  color: rgba(31, 39, 36, 0.72);
  font-size: 15.5px;
  line-height: 1.6;
}

.fv-faq__items p a { color: var(--evergreen); }

/* ---------- closing ---------- */
.fv-support__close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 20%, rgba(215, 179, 106, 0.16), transparent 40%),
    linear-gradient(120deg, rgba(226, 236, 227, 0.6), rgba(255, 253, 249, 0.85));
}

.fv-support__close h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.05;
}

.fv-support__close p { margin: 8px 0 0; max-width: 56ch; color: rgba(31, 39, 36, 0.72); font-size: 15.5px; }
.fv-support__close-acts { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .fv-contact__routes { grid-template-columns: 1fr; }
  .fv-contact__detail { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .fv-support { gap: 26px; }
  .fv-support__hero { padding: 24px 18px; }
  .fv-support__hero h1 { font-size: clamp(32px, 9vw, 42px); }
  .fv-support__hero p { font-size: 15.5px; }
  .fv-contact__mail { padding: 18px; gap: 14px; }
  .fv-contact__mail-text strong { font-size: 21px; word-break: break-word; }
  .fv-contact__mail .button { width: 100%; text-align: center; }
  .fv-faq__items summary { padding: 15px 15px; font-size: 15px; gap: 10px; }
  .fv-faq__items p { padding: 0 15px 15px; font-size: 14.5px; }
  .fv-support__close { grid-template-columns: 1fr; }
  .fv-support__close-acts .button { flex: 1; text-align: center; }
}

/* ---------- contact form ---------- */
.fv-contact__form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: clamp(22px, 2.8vw, 36px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 253, 249, 0.78);
  scroll-margin-top: 90px;
}

.fv-contact__form-intro h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.05;
}

.fv-contact__form-intro > p {
  margin: 8px 0 18px;
  color: rgba(31, 39, 36, 0.7);
  font-size: 15.5px;
  line-height: 1.5;
}

.fv-contact__form {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.fv-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.fv-contact__form label {
  display: grid;
  gap: 6px;
  color: var(--evergreen);
  font-size: 13.5px;
  font-weight: 800;
}

.fv-contact__form label em {
  color: rgba(31, 39, 36, 0.45);
  font-style: normal;
  font-weight: 600;
}

.fv-contact__form input[type="text"],
.fv-contact__form input[type="email"],
.fv-contact__form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
}

.fv-contact__form textarea { resize: vertical; min-height: 130px; line-height: 1.5; }

.fv-contact__form input:focus,
.fv-contact__form textarea:focus {
  outline: none;
  border-color: var(--evergreen-2);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(40, 72, 63, 0.1);
}

.fv-contact__form .button { justify-self: start; margin-top: 2px; }

/* the honeypot must be reachable by bots but never by people */
.fv-contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fv-contact__form-foot {
  margin: 0;
  color: rgba(31, 39, 36, 0.55);
  font-size: 12.5px;
}

.fv-contact__form-foot a { color: var(--evergreen); }

.fv-contact__notice {
  margin: 0;
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
}

.fv-contact__notice--ok {
  border: 1px solid rgba(40, 72, 63, 0.3);
  background: var(--sage-2);
  color: var(--evergreen);
}

.fv-contact__notice--bad {
  border: 1px solid rgba(201, 121, 115, 0.5);
  background: rgba(242, 217, 212, 0.5);
  color: #8f3f39;
}

@media (max-width: 900px) {
  .fv-contact__form-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .fv-contact__row { grid-template-columns: 1fr; }
  .fv-contact__form .button { justify-self: stretch; text-align: center; }
}

/* ============================================================
   "The app needs no account" note, under the buy button.
   The listing copy legitimately says the APP needs no account;
   this states the shop account before checkout springs it on
   someone, and frames it as where their files live.
   ============================================================ */
.account-note-v3 {
  margin: 8px 0 0;
  padding-top: 9px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-top: 1px solid rgba(225, 215, 204, 0.82);
  color: rgba(31, 39, 36, 0.7);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}

.account-note-v3 svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--evergreen-2);
}

.account-note-v3 strong { color: var(--evergreen); font-weight: 900; }

@media (max-width: 680px) {
  .account-note-v3 { font-size: 12px; }
}

/* ============================================================
   MOBILE CART ROW — rebuilt
   Was: image, title, price twice ($29 $19 above, $19 again
   below), a quantity stepper, a trash icon and a Save badge.
   Five pieces of information for one $19 file.
   Now: image, title, one price line, remove. Nothing else.
   The quantity selector is gone at the data layer (every
   product is sold individually) — this only tidies what is
   left behind.
   ============================================================ */
@media (max-width: 760px) {
  .commerce-panel .wc-block-cart-items__row {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 0 14px !important;
    align-items: center !important;
    padding: 14px 12px !important;
  }

  .commerce-panel .wc-block-cart-item__image {
    grid-row: 1 / span 2 !important;
    width: 84px !important;
    min-width: 84px !important;
  }

  .commerce-panel .wc-block-cart-item__image a,
  .commerce-panel .wc-block-cart-item__image img {
    width: 84px !important;
    height: 84px !important;
  }

  /* The row's own price line is the one we keep. */
  .commerce-panel .wc-block-cart-item__product .wc-block-cart-item__prices {
    margin-top: 3px;
  }

  /* WooCommerce repeats the line total in its own column; on a
     single-quantity row that is the same number twice. */
  .commerce-panel .wc-block-cart-item__total {
    display: none !important;
  }

  /* Quantity is fixed at one, so the wrapper only exists to hold
     the remove button. Put it back on the same line as the title
     block instead of giving it a row of its own. */
  .commerce-panel .wc-block-cart-item__quantity {
    grid-column: 2 !important;
    width: auto !important;
    margin-top: 6px !important;
    justify-content: flex-start !important;
  }

  .commerce-panel .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
    display: none !important;
  }

  .commerce-panel .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(31, 39, 36, 0.5);
    font-size: 12.5px;
    text-decoration: underline;
  }

  .commerce-panel .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
    width: 17px;
    height: 17px;
  }

  /* "Save $10.00" already reads from the struck-through price. */
  .commerce-panel .wc-block-cart-items__row .wc-block-components-sale-badge {
    display: none !important;
  }
}

/* Desktop: the stepper is gone everywhere, so reclaim its space. */
.commerce-panel .wc-block-components-quantity-selector,
.commerce-shell--checkout .wc-block-components-quantity-selector {
  display: none !important;
}

/* The checkout summary shows "× 1" against every line — noise when
   one is the only possible number. */
.commerce-shell--checkout .wc-block-components-order-summary-item__quantity {
  display: none !important;
}

/* ============================================================
   CLASSIC CHECKOUT — the approved rebuild, applied
   Structure: information → order summary → payment (method +
   agreement + Pay) → FAQ. One centered column, fluid at every
   width; measures use clamp/minmax/flex-wrap so no display size
   catches a breakpoint mid-jump. All tokens are the store's own.
   ============================================================ */

/* The commerce panel would draw a card around the cards. */
.commerce-shell--checkout .commerce-panel {
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

form.woocommerce-checkout.fvc {
  width: min(760px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 18px);
}

/* ---------- shared card ---------- */
.fvc-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  padding: clamp(16px, 3vw, 26px);
}

.fvc-card > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: clamp(12px, 2vw, 18px);
}

.fvc-card > header h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 500;
  line-height: 1.1;
}

.fvc-aside {
  color: rgba(31, 39, 36, 0.55);
  font-size: 13px;
  font-weight: 700;
}

.fvc-aside a { color: var(--evergreen); }

/* ---------- 1 · checkout information ---------- */
/* WooCommerce's own billing heading — the card already has one. */
.fvc-card--info h3 { display: none; }

.fvc-fields .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.fvc .form-row {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  display: grid;
  gap: 6px;
}

.fvc .form-row-wide { grid-column: 1 / -1; }

.fvc .form-row label {
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.fvc .form-row label .optional {
  color: rgba(31, 39, 36, 0.45);
  font-weight: 600;
}

.fvc .form-row .required { color: var(--blush); text-decoration: none; }

.fvc .form-row .woocommerce-input-wrapper { display: block; }

.fvc .input-text {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
}

.fvc .input-text:focus {
  outline: none;
  border-color: var(--evergreen-2);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(40, 72, 63, 0.1);
}

/* ---------- 2 · order summary ---------- */
.fvc-review { font-size: 14px; }

.fvc-items { display: flex; flex-direction: column; }

.fvc-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(225, 215, 204, 0.7);
}

.fvc-item:first-child { padding-top: 0; }

.fvc-item__img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.8);
  background: var(--sage-2);
}

.fvc-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fvc-item__name { min-width: 0; display: grid; gap: 3px; justify-items: start; }

.fvc-item__name strong {
  color: var(--evergreen);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fvc-item__name small { color: rgba(31, 39, 36, 0.5); font-size: 12px; }

.fvc-item__remove {
  color: rgba(31, 39, 36, 0.5);
  font-size: 12px;
  text-decoration: underline;
}

.fvc-item__remove:hover { color: var(--blush); }

.fvc-item__price { text-align: right; white-space: nowrap; }

.fvc-item__price del {
  display: block;
  color: rgba(31, 39, 36, 0.4);
  font-size: 12.5px;
}

.fvc-item__price del .woocommerce-Price-amount { color: inherit; }

.fvc-item__price strong { color: var(--evergreen); font-size: 15.5px; font-weight: 800; }

/* coupon: one folded line */
.fvc-coupon { border-bottom: 1px solid rgba(225, 215, 204, 0.7); }

.fvc-coupon summary {
  padding: 12px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--evergreen);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.fvc-coupon summary::-webkit-details-marker { display: none; }
.fvc-coupon summary::after { content: "+"; color: rgba(31, 39, 36, 0.45); font-size: 16px; }
.fvc-coupon[open] summary::after { content: "\2013"; }

.fvc-coupon__row { display: flex; gap: 8px; padding-bottom: 12px; }

.fvc-coupon__row .input-text {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 14px;
}

.fvc-coupon__apply {
  flex: none;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.fvc-coupon__apply:hover { background: var(--evergreen-2); }

.fvc-coupon__msg:not(:empty) { padding: 0 0 12px; font-size: 13px; }
.fvc-coupon__msg .woocommerce-error { color: #8f3f39; list-style: none; margin: 0; padding: 0; }
.fvc-coupon__msg .woocommerce-message { color: var(--evergreen-2); margin: 0; }

/* totals */
.fvc-totals { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }

.fvc-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(31, 39, 36, 0.72);
  font-size: 14px;
}

.fvc-totals .fvc-saving,
.fvc-totals .fvc-saving .woocommerce-Price-amount { color: var(--evergreen-2); font-weight: 700; }

.fvc-totals .woocommerce-remove-coupon {
  margin-left: 8px;
  color: rgba(31, 39, 36, 0.5);
  font-size: 12px;
}

.fvc-totals .fvc-total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--evergreen);
  font-size: 17px;
  font-weight: 900;
}

.fvc-totals .fvc-total > span:last-child,
.fvc-totals .fvc-total .woocommerce-Price-amount {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--evergreen);
}

/* ---------- 3 · payment ---------- */
.fvc-secure { display: inline-flex; align-items: center; gap: 6px; color: var(--evergreen-2); }
.fvc-secure svg { width: 14px; height: 14px; }

.fvc .woocommerce-checkout-payment { background: none; }

.fvc .wc_payment_methods {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fvc .wc_payment_method { margin: 0; }

/* the radio stays for the checkout script; sight of it adds nothing
   when the methods are already full-row labels */
.fvc .wc_payment_method > .input-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fvc-method {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(215, 179, 106, 0.5);
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0, rgba(215, 179, 106, 0.14), transparent 42%),
    linear-gradient(150deg, rgba(255, 253, 249, 0.96), rgba(240, 245, 237, 0.5));
  cursor: pointer;
}

/* a second gateway would need a visible selected state */
.fvc .input-radio:checked + .fvc-method { border-color: var(--evergreen); }
.fvc .input-radio:focus-visible + .fvc-method { outline: 2px solid var(--evergreen); outline-offset: 2px; }

.fvc-method__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(215, 179, 106, 0.45);
  border-radius: 11px;
  background: var(--white);
  color: var(--evergreen);
}

.fvc-method__icon svg { width: 19px; height: 19px; }

.fvc-method__body { flex: 1 1 170px; min-width: 0; display: grid; gap: 2px; }

.fvc-method__body strong { color: var(--evergreen); font-size: 14.5px; font-weight: 800; }

.fvc-method__line {
  color: rgba(31, 39, 36, 0.6);
  font-size: 12.5px;
  line-height: 1.35;
}

.fvc-method__line b { color: var(--evergreen); font-weight: 800; }

/* the agreement sentence, between the method and the button */
.fvc .fv-checkout-terms {
  margin: 14px 0;
  color: rgba(31, 39, 36, 0.6);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
}

.fvc .fv-checkout-terms a { color: var(--evergreen); text-decoration: underline; }

/* the Pay button */
.fvc .form-row.place-order {
  display: block;
  margin: 0 !important;
}

.fvc #place_order {
  display: block;
  width: 100%;
  padding: 16px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--blush);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(201, 121, 115, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.fvc #place_order:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(201, 121, 115, 0.34); }

.fvc-reassure {
  margin: 10px 0 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: rgba(31, 39, 36, 0.55);
  font-size: 12px;
  text-align: center;
}

.fvc-reassure span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fvc-reassure svg { width: 13px; height: 13px; color: var(--evergreen-2); }

/* classic checkout notices (validation errors) in the store's voice */
.commerce-shell--checkout .woocommerce-error,
.commerce-shell--checkout .woocommerce-message,
.commerce-shell--checkout .woocommerce-info {
  width: min(760px, 100%);
  margin: 0 auto 14px;
  padding: 13px 16px;
  list-style: none;
  border: 1px solid rgba(201, 121, 115, 0.5);
  border-radius: 14px;
  background: rgba(242, 217, 212, 0.4);
  color: #8f3f39;
  font-size: 14px;
}

.commerce-shell--checkout .woocommerce-message,
.commerce-shell--checkout .woocommerce-info {
  border-color: rgba(40, 72, 63, 0.3);
  background: var(--sage-2);
  color: var(--evergreen);
}

.commerce-shell--checkout .woocommerce-error li { margin: 2px 0; }

/* ---------- 4 · the FAQ card after the form ---------- */
.commerce-shell--checkout .fluvana-checkout-faq {
  width: min(760px, 100%);
  margin: clamp(12px, 2vw, 18px) auto 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.8);
  padding: clamp(16px, 3vw, 24px);
}

.commerce-shell--checkout .fluvana-checkout-faq h2 {
  margin: 0 0 6px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 500;
}

.commerce-shell--checkout .fluvana-checkout-faq details { border-bottom: 1px solid rgba(225, 215, 204, 0.7); }
.commerce-shell--checkout .fluvana-checkout-faq details:last-child { border-bottom: 0; }

.commerce-shell--checkout .fluvana-checkout-faq summary {
  padding: 13px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--evergreen);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
}

.commerce-shell--checkout .fluvana-checkout-faq summary::-webkit-details-marker { display: none; }

.commerce-shell--checkout .fluvana-checkout-faq summary::after {
  content: "+";
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-2);
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 700;
}

.commerce-shell--checkout .fluvana-checkout-faq details[open] summary::after { content: "\2013"; }

.commerce-shell--checkout .fluvana-checkout-faq p {
  margin: 0;
  padding: 0 0 13px;
  color: rgba(31, 39, 36, 0.7);
  font-size: 13.5px;
  line-height: 1.55;
}

/* WooCommerce 11 ships its own form styling at
   .woocommerce form .form-row input.input-text — higher specificity
   than the rebuild's base rules, so these repeat them with the form
   element in the selector. */
form.woocommerce-checkout.fvc .form-row input.input-text,
form.woocommerce-checkout.fvc .form-row textarea.input-text {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.4;
  box-shadow: none;
}

form.woocommerce-checkout.fvc .form-row input.input-text:focus,
form.woocommerce-checkout.fvc .form-row textarea.input-text:focus {
  outline: none;
  border-color: var(--evergreen-2);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(40, 72, 63, 0.1);
}

form.woocommerce-checkout.fvc .form-row label {
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}

/* the "account will be created" note above the email field */
.commerce-shell--checkout .woocommerce-billing-fields .woocommerce-info,
.commerce-shell--checkout form .woocommerce-info {
  width: auto;
  margin: 0 0 4px;
  padding: 10px 13px;
  border: 1px dashed rgba(40, 72, 63, 0.28);
  border-radius: 12px;
  background: var(--sage-2);
  color: var(--evergreen);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ============================================================
   Legacy classic-checkout rules (pre-blocks era, ~line 4770)
   re-activated when the checkout returned to classic markup.
   Neutralized here rather than excised: they are interleaved
   with rules other pages still use.
   ============================================================ */
.commerce-shell--checkout form.checkout.woocommerce-checkout.fvc {
  display: flex;
  grid-template-columns: none;
  gap: clamp(12px, 2vw, 18px);
  /* the legacy grid set align-items: start, which makes flex children
     shrink to content width — cards must stretch */
  align-items: stretch;
}

/* The old design injected an account notice with CSS content; the
   rebuild says this inside WooCommerce's own email-field notice. */
.commerce-shell--checkout #customer_details::before { content: none; }

/* "Order summary" is a card header now, not a hero heading with its
   own top-half card chrome. */
.commerce-shell--checkout .fvc-card--summary #order_review_heading {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.1;
}

/* Payment renders inside the pay card; the old rules gave it its own. */
.commerce-shell--checkout .fvc-card--pay #order_review {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

.commerce-shell--checkout .fvc .woocommerce-checkout-payment {
  border-radius: 0 !important;
  background: none !important;
  padding: 0;
  border: 0;
}

.commerce-shell--checkout .fvc #place_order {
  min-height: 0;
  border-radius: 999px;
  background: var(--blush);
  box-shadow: 0 14px 30px rgba(201, 121, 115, 0.28);
}

/* WooCommerce core floats the place-order button; the reassurance row
   was collapsing to zero width beside it. */
.fvc #place_order { float: none; }
.fvc .form-row.place-order::after { content: ""; display: block; clear: both; }
.fvc .fvc-reassure { width: 100%; clear: both; }

/* ============================================================
   CLASSIC CART — the approved rebuild, applied
   Same fvc language as the checkout: one card in a centered
   760px column, then the recommendations. Only the cart's own
   pieces are new (progress nudge, Proceed button, rec grid);
   items, coupon fold, and totals reuse the checkout classes.
   ============================================================ */

.commerce-shell--cart .commerce-layout {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.commerce-shell--cart .commerce-assurance { display: none; }

/* The commerce panel would draw a card around the card. */
.commerce-shell--cart .commerce-panel {
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.commerce-shell--cart .commerce-panel > .woocommerce,
.commerce-shell--cart .fvc-recs {
  width: min(760px, 100%);
  margin-inline: auto;
}

.commerce-shell--cart .commerce-panel > .woocommerce {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 18px);
}

/* WooCommerce notices (coupon applied, item removed) as quiet rows. */
.commerce-shell--cart .woocommerce-message,
.commerce-shell--cart .woocommerce-info,
.commerce-shell--cart .woocommerce-error {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 14px;
  background: var(--white);
  color: var(--evergreen);
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
}

.commerce-shell--cart .woocommerce-error { color: #8f3f39; border-color: rgba(143, 63, 57, 0.35); }
.commerce-shell--cart .woocommerce-error li { margin: 0; }

.commerce-shell--cart .woocommerce-message a,
.commerce-shell--cart .woocommerce-info a { color: var(--evergreen); font-weight: 700; }

/* ---------- bundle progress (the drawer's nudge, in the cart) ---------- */
.fvc-progress {
  margin: 14px 0 0;
  padding: 13px 15px;
  border: 1px solid rgba(215, 179, 106, 0.5);
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0, rgba(215, 179, 106, 0.14), transparent 42%),
    linear-gradient(150deg, rgba(255, 253, 249, 0.96), rgba(240, 245, 237, 0.5));
}

.fvc-progress__line {
  margin: 0 0 8px;
  color: var(--evergreen);
  font-size: 13.5px;
  font-weight: 800;
}

.fvc-progress__line b { color: hsl(28 90% 35%); }
.fvc-progress__line b .woocommerce-Price-amount { color: inherit; font-weight: inherit; }

.fvc-progress__bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(225, 215, 204, 0.75);
  overflow: hidden;
}

.fvc-progress__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--champagne), var(--blush));
}

.fvc-progress__tiers {
  margin: 7px 0 0;
  color: rgba(31, 39, 36, 0.55);
  font-size: 11.5px;
  font-style: italic;
}

/* ---------- the checkout button block ---------- */
.fvc-cart-cta {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 16px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--blush);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(201, 121, 115, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.fvc-cart-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(201, 121, 115, 0.34); color: var(--white); }

.fvc-card--cart .fvc-reassure { margin-top: 14px; }

.fvc-keep {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
}

.fvc-keep a { color: var(--evergreen); font-weight: 700; }

/* ---------- empty cart ---------- */
.fvc-empty { text-align: center; }

.fvc-empty h2 {
  margin: 0 0 6px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 500;
}

.fvc-empty p {
  margin: 0 0 16px;
  color: rgba(31, 39, 36, 0.62);
  font-size: 14px;
}

.fvc-empty .fvc-cart-cta { max-width: 320px; margin-inline: auto; }

/* ---------- recommendations, two-up in the column ---------- */
.fvc-recs { margin-top: clamp(6px, 1vw, 10px); }

.fvc-recs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.fvc-recs__head h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 500;
}

.fvc-recs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

.fvc-rec {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.fvc-rec:hover { transform: translateY(-2px); border-color: rgba(40, 72, 63, 0.35); }

.fvc-rec__img {
  width: 74px;
  height: 74px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(225, 215, 204, 0.8);
  background: var(--sage-2);
  display: block;
}

.fvc-rec__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fvc-rec__body { min-width: 0; display: grid; gap: 4px; justify-items: start; }

a.fvc-rec__name {
  color: var(--evergreen);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.fvc-rec__name:hover { text-decoration: underline; }

.fvc-rec__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 800;
}

.fvc-rec__price .woocommerce-Price-amount { color: var(--evergreen); font-weight: 800; }
.fvc-rec__price del,
.fvc-rec__price del .woocommerce-Price-amount { color: rgba(31, 39, 36, 0.4); font-size: 12px; font-weight: 500; }

a.fvc-rec__add {
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--white);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

a.fvc-rec__add:hover { background: var(--evergreen-2); color: var(--white); }

/* "View cart" inside a notice ON the cart page points at the page
   you are already reading — and inherits unreadable colors. */
.commerce-shell--cart .woocommerce-message .wc-forward,
.commerce-shell--cart .woocommerce-error .wc-forward,
.commerce-shell--cart .woocommerce-info .wc-forward { display: none; }

/* Quiet "View cart" link between the drawer's buttons and its fine print. */
.fv-cart__view {
  margin: 9px 0 0;
  text-align: center;
  font-size: 13px;
}

.fv-cart__view a {
  color: var(--evergreen);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fv-cart__view a:hover { color: var(--blush); }

/* ============================================================
   CHECKOUT FIELDS + COMMERCE NOTICES — polish pass
   ============================================================ */

/* The auto-fit grid made three columns, so First/Last name left a dead
   third column on the right. Flex instead: the two names share the full
   row 50/50 and wrap to full width when the screen is narrow. */
.fvc-fields .woocommerce-billing-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.fvc-fields .form-row-wide { flex: 1 1 100%; }

.fvc-fields .form-row-first,
.fvc-fields .form-row-last { flex: 1 1 220px; min-width: 0; }

/* Notices on ANY commerce page (cart, checkout, order received) — the
   cart-only scope left checkout's notices half-styled. */
.commerce-shell .woocommerce-notices-wrapper .woocommerce-message,
.commerce-shell .woocommerce-notices-wrapper .woocommerce-info,
.commerce-shell .woocommerce-notices-wrapper .woocommerce-error {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 14px;
  background: var(--white);
  color: var(--evergreen);
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
  outline: none; /* WooCommerce focuses the notice on load — no orange ring */
  box-shadow: none;
}

.commerce-shell .woocommerce-notices-wrapper .woocommerce-error { color: #8f3f39; border-color: rgba(143, 63, 57, 0.35); }
.commerce-shell .woocommerce-notices-wrapper .woocommerce-error li { margin: 0; }

.commerce-shell .woocommerce-notices-wrapper .woocommerce-message a,
.commerce-shell .woocommerce-notices-wrapper .woocommerce-info a,
.commerce-shell .woocommerce-notices-wrapper .woocommerce-error a { color: inherit; font-weight: 700; }

/* "View cart" buttons inside notices point at pages you can already see. */
.commerce-shell .woocommerce-notices-wrapper .wc-forward { display: none; }

/* Notices can print with or without the notices-wrapper (the empty-cart
   template emits them bare), so match the notice itself. WooCommerce also
   paints its own icon via ::before ON TOP of the first characters — off. */
.commerce-shell .woocommerce-message,
.commerce-shell .woocommerce-info,
.commerce-shell .woocommerce-error {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(225, 215, 204, 0.86);
  border-radius: 14px;
  background: var(--white);
  color: var(--evergreen);
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
  outline: none;
  box-shadow: none;
}

.commerce-shell .woocommerce-message::before,
.commerce-shell .woocommerce-info::before,
.commerce-shell .woocommerce-error::before,
.commerce-shell .woocommerce-message::after,
.commerce-shell .woocommerce-info::after,
.commerce-shell .woocommerce-error::after {
  content: none;
  display: none;
}

.commerce-shell .woocommerce-error { color: #8f3f39; border-color: rgba(143, 63, 57, 0.35); }
.commerce-shell .woocommerce-error li { margin: 0; }

.commerce-shell .woocommerce-message a,
.commerce-shell .woocommerce-info a,
.commerce-shell .woocommerce-error a { color: inherit; font-weight: 700; }

.commerce-shell .woocommerce-message .wc-forward,
.commerce-shell .woocommerce-info .wc-forward,
.commerce-shell .woocommerce-error .wc-forward { display: none; }

/* ============================================================
   THANK-YOU (order received) — the approved rebuild, applied
   Same fvc language as cart & checkout. The Whop paying state
   (commerce-shell--paying) keeps its own panel untouched.
   ============================================================ */

.commerce-shell--received:not(.commerce-shell--paying) .commerce-panel {
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.commerce-shell--received:not(.commerce-shell--paying) .commerce-panel > .woocommerce {
  width: 100%;
}


/* ============================================================
   THANK-YOU REBUILD — same fvc language as cart & checkout.
   Adds only what this page needs: the download row's button,
   the order-facts grid, and the help trio. Cards, items, and
   totals reuse the checkout classes verbatim.
   ============================================================ */

/* ---------- download rows ---------- */
.fvc-dl-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(225, 215, 204, 0.7);
}

.fvc-dl-row:first-child { padding-top: 4px; }

.fvc-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--blush);
  color: var(--white);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(201, 121, 115, 0.26);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.fvc-dl-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(201, 121, 115, 0.32); color: var(--white); }

.fvc-dl-btn svg { width: 15px; height: 15px; }

/* saved-to-account footer of the downloads card */
.fvc-dl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 15px;
  border: 1px solid rgba(215, 179, 106, 0.5);
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0, rgba(215, 179, 106, 0.14), transparent 42%),
    linear-gradient(150deg, rgba(255, 253, 249, 0.96), rgba(240, 245, 237, 0.5));
}

.fvc-dl-foot p { margin: 0; color: rgba(31, 39, 36, 0.68); font-size: 13px; }
.fvc-dl-foot p strong { color: var(--evergreen); }

.fvc-ghost-btn {
  display: inline-block;
  padding: 9px 18px;
  border: 1.5px solid rgba(40, 72, 63, 0.35);
  border-radius: 999px;
  background: var(--white);
  color: var(--evergreen);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.fvc-ghost-btn:hover { border-color: var(--evergreen); background: rgba(240, 245, 237, 0.6); color: var(--evergreen); }

/* ---------- order facts ---------- */
.fvc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  padding: 2px 0 14px;
  border-bottom: 1px solid rgba(225, 215, 204, 0.7);
}

.fvc-facts > div { flex: 1 1 auto; min-width: 0; }

.fvc-facts dt {
  margin: 0 0 3px;
  color: rgba(31, 39, 36, 0.5);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fvc-facts dd {
  margin: 0;
  color: var(--evergreen);
  font-size: 13.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.fvc-facts dd.is-big { font-family: var(--serif); font-size: 21px; font-weight: 500; }

/* ---------- help trio ---------- */
.fvc-help {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.fvc-help > div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.fvc-help span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(240, 245, 237, 0.9);
  color: var(--evergreen);
}

.fvc-help span svg { width: 17px; height: 17px; }

.fvc-help h4 {
  margin: 0 0 5px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 500;
}

.fvc-help p { margin: 0; color: rgba(31, 39, 36, 0.62); font-size: 12.5px; line-height: 1.55; }
.fvc-help p a { color: var(--blush); font-weight: 700; }

/* ---------- tail ---------- */
.fvc-tail { text-align: center; }
.fvc-tail p { margin: 0 0 12px; color: rgba(31, 39, 36, 0.55); font-size: 12.5px; font-style: italic; }

/* order lines inside the totals block keep the item name evergreen */
.fvc-totals div > span:first-child strong { color: var(--evergreen); font-weight: 700; }

/* the "no file yet" note on rows whose product has no upload */
.fvc-dl-none { color: rgba(31, 39, 36, 0.5); font-size: 12.5px; font-style: italic; white-space: nowrap; }

/* the shared centered column the thank-you page (and any future fvc page)
   lays its cards in — same measure as the cart and checkout columns */
.fvc-wrap {
  width: min(760px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 18px);
}

/* ============================================================
   PURCHASE PANEL — conversion pass (owner-approved preview)
   "Buy instantly" reads as a button, and the refund promise
   sits right under the CTAs where the doubt happens.
   ============================================================ */

.instant-link-v3 {
  display: flex;
  width: 100%;
  padding: 11px 20px;
  border: 1.5px solid rgba(40, 72, 63, 0.35);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.instant-link-v3:hover {
  border-color: var(--evergreen);
  background: rgba(240, 245, 237, 0.6);
  color: var(--evergreen);
}

.refund-line-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 11px 0 0;
  color: var(--evergreen);
  font-size: 13px;
  font-weight: 700;
}

.refund-line-v3 svg { width: 15px; height: 15px; flex: none; }

/* Notices align with the 760px card column on every commerce page —
   full-width bars above a centered card read as broken. */
.commerce-shell .woocommerce-notices-wrapper {
  width: min(760px, 100%);
  margin-inline: auto;
}

/* ============================================================
   EMAIL POPUP — the welcome-gift dialog
   ============================================================ */

.fv-pop-scrim {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: rgba(31, 39, 36, 0.44);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.fv-pop-scrim[hidden] { display: none; }

.fv-pop {
  position: relative;
  width: min(430px, 100%);
  padding: clamp(24px, 5vw, 34px);
  border: 1px solid rgba(225, 215, 204, 0.9);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 0, rgba(215, 179, 106, 0.16), transparent 36%),
    radial-gradient(circle at 0 100%, rgba(242, 217, 212, 0.35), transparent 40%),
    linear-gradient(150deg, #fffdf9, #fdf6ee);
  box-shadow: 0 40px 90px rgba(31, 39, 36, 0.35);
  text-align: center;
  font-family: var(--sans);
  animation: fv-pop-in 0.28s ease;
}

@keyframes fv-pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.fv-pop__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(240, 245, 237, 0.9);
  color: var(--evergreen);
  cursor: pointer;
}

.fv-pop__x svg { width: 15px; height: 15px; }

.fv-pop__eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border: 1px solid rgba(215, 179, 106, 0.55);
  border-radius: 999px;
  background: rgba(215, 179, 106, 0.14);
  color: var(--evergreen);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fv-pop h2 {
  margin: 0 0 8px;
  color: var(--evergreen);
  font-family: var(--serif);
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 500;
  line-height: 1.15;
}

.fv-pop h2 b { color: var(--blush); font-weight: 600; }

.fv-pop p { margin: 0 0 16px; color: rgba(31, 39, 36, 0.62); font-size: 13.5px; line-height: 1.55; }

.fv-pop__row { display: flex; flex-direction: column; gap: 9px; margin: 0; }

.fv-pop__row input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(225, 215, 204, 0.95);
  border-radius: 999px;
  background: var(--white);
  color: var(--evergreen);
  font-family: var(--sans);
  font-size: 14px;
  text-align: center;
  outline: none;
}

.fv-pop__row input:focus { border-color: rgba(40, 72, 63, 0.4); }

.fv-pop__go {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--blush);
  color: var(--white);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(201, 121, 115, 0.3);
  transition: transform 0.16s ease;
}

.fv-pop__go:hover { transform: translateY(-1px); color: var(--white); }

.fv-pop__go[disabled] { opacity: 0.6; cursor: wait; transform: none; }

.fv-pop__no {
  margin: 12px 0 0;
  border: 0;
  background: none;
  color: rgba(31, 39, 36, 0.45);
  font-family: var(--sans);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fv-pop__err { margin: 8px 0 0 !important; color: #8f3f39 !important; font-size: 12.5px !important; }
.fv-pop__err:empty { display: none; }

.fv-pop__fine { margin: 12px 0 0 !important; color: rgba(31, 39, 36, 0.4) !important; font-size: 11px !important; font-style: italic; }

.fv-pop__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 14px;
  padding: 14px;
  border: 1.5px dashed rgba(215, 179, 106, 0.8);
  border-radius: 14px;
  background: rgba(215, 179, 106, 0.1);
  color: var(--evergreen);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.fv-pop__code svg { width: 18px; height: 18px; flex: none; }

.fv-pop--done .fv-pop__ask { display: none; }
.fv-pop__done { display: none; }
.fv-pop--done .fv-pop__done { display: block; }