/*
 * V5 customer-facing layout (templates/v5/).
 * Ported from gsf-fundraiser-demo-v5/assets/css/styles.css.
 * Design tokens (:root vars) and the topbar/footer chrome live in chrome.css,
 * which is shared with the classic layout and always loaded before this file.
 * Contents:
 * 1. Global elements
 * 2. Shared cards and buttons
 * 3. Storefront and product cards
 * 4. Checkout and payment pages (used by later v5 pages)
 * 5. Product detail page (used by later v5 pages)
 * 6. Carousel controls
 * 7. Responsive adjustments
 */

.v5-body {
  margin:0;
  background:var(--linen-calming);
  color:var(--ink);
  /* Brand font stacks come from theme.css (@font-face) + the classic layout's fallbacks */
  font-family:'brandon-grotesque','figtree',sans-serif;
}
.v5-share-banner {
  position:sticky;
  top:0;
  z-index:1020;
  background:#517fa4;
  text-align:center;
  padding:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.v5-share-banner a {
  color:#fff;
  text-decoration:none;
  font-weight:600;
  display:inline-block;
  width:100%;
}
.v5-share-banner .v5-share-icon svg {
  width:22px;
  height:22px;
  fill:#fff;
  vertical-align:middle;
  margin-left:6px;
}
.page-shell {
  min-height:calc(100vh - 64px);
}
h1,h2,h3,.display-title {
  font-family:'gumbo-regular','Fredoka',sans-serif;
}
.page-shell .container {
  max-width:1180px;
}
.hero-card,.content-card,.product-card,.checkout-card,.white-card {
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow);
}
.hero-card {
  background:var(--moms-care);
  color:#fff;
  /* The banner now runs to the card's bottom edge with square corners of its own, so
     clip it to the card instead — otherwise the photo pokes past the 20px radius. */
  overflow:hidden;
}
/* One centred column: the hero is full-width now, so left-pinned copy just left a
   dead half-card to the right of the text. */
.hero-copy {
  padding:24px 24px 32px;
  text-align:center;
}
.hero-copy h1 {
  font-size:clamp(2.2rem,5vw,4.2rem);
  line-height:1;
}
.script-title {
  color:#a6c97a;
  font-family:'sweet-apricot','Marck Script',cursive;
  font-size:1.8rem;
}
/* Centred, but still held to a readable measure — full-width prose at 1080px is not it. */
.hero-text {
  max-width:60ch;
  margin:0 auto 1rem;
}
/* HOME-10: the hero's two calls to action. Both were easy to miss — the coral CTA is
   barely distinguishable from the burgundy card behind it, and the share links were bare
   22px glyphs. The CTA now leads in linen-on-burgundy (high contrast, still a brand
   colour) and the share links are proper chips. */
.hero-actions {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  margin:1.6rem 0 .4rem;
}
.hero-cta {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:1.05rem 2.6rem;
  border-radius:999px;
  background:var(--linen-calming);
  color:var(--moms-care);
  font-family:'gumbo-regular','Fredoka',sans-serif;
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:.04em;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(20,10,14,.32);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.hero-cta:hover,
.hero-cta:focus-visible {
  background:#fff;
  color:var(--moms-care);
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(20,10,14,.4);
}
.hero-cta:active {
  transform:translateY(0);
}
.hero-cta .material-icons {
  font-size:1.35rem;
}
@media(prefers-reduced-motion:reduce) {
  .hero-cta {
    transition:none;
  }
  .hero-cta:hover,
  .hero-cta:focus-visible {
    transform:none;
  }
}
.hero-share {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
}
.hero-share-label {
  font-family:'gumbo-regular','Fredoka',sans-serif;
  letter-spacing:.12em;
  font-size:1.05rem;
}
/* a real 46px target, and readable against the card instead of dissolving into it */
.hero-share-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1.5px solid rgba(241,241,222,.55);
  background:rgba(255,255,255,.12);
  color:#fff;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.hero-share-btn:hover,
.hero-share-btn:focus-visible {
  background:var(--linen-calming);
  border-color:var(--linen-calming);
  color:var(--moms-care);
}
.toast-body {
  font-size: large;
}
/* One standard 1920 x 1080 slot at every width. The shape is pinned by aspect-ratio
   rather than a hand-tuned height per breakpoint, so the size we ask coordinators to
   upload (js/v5/home.js) and the space the photo lands in always agree. */
.hero-image {
  --hero-banner-ratio:16 / 9;
  position:relative;
  aspect-ratio:var(--hero-banner-ratio);
  margin:0 var(--hero-banner-inset) var(--hero-banner-inset);
  overflow:hidden; /* clips the over-scaled blur to the band */
  background:rgba(0,0,0,.16); /* shows through until the images load */
}
.hero-banner-fill {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* over-scaled so the blur's own soft edges never reach the band's border;
     dimmed and desaturated a touch so the real photo stays the subject */
  transform:scale(1.15);
  filter:blur(30px) brightness(.62) saturate(1.15);
}
.hero-banner-photo {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  object-fit:scale-down;
}
/* Both brand buttons drive Bootstrap's own --bs-btn-* variables rather than overriding
   background directly. Bootstrap leaves --bs-btn-hover-bg / --bs-btn-active-bg /
   --bs-btn-disabled-bg undefined on the base .btn, so its own .btn:hover, .btn:disabled
   and .btn:first-child:active rules resolve background-color to an *unset* custom
   property — which computes to transparent. Those rules also out-specify a plain
   .btn-coral / .btn-brand declaration, and on touch the :hover state sticks after the
   tap, so the button's fill vanished and stayed gone. Setting the variables fixes every
   state at once instead of fighting the specificity. */
.btn-coral {
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--textile-family);
  --bs-btn-border-color:var(--textile-family);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#d77970;
  --bs-btn-hover-border-color:#d77970;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:#d77970;
  --bs-btn-active-border-color:#d77970;
  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg:var(--textile-family);
  --bs-btn-disabled-border-color:var(--textile-family);
  font-weight:800;
  padding:.9rem 1.4rem;
}
.btn-brand {
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--stem-organic);
  --bs-btn-border-color:var(--stem-organic);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--green-dark);
  --bs-btn-hover-border-color:var(--green-dark);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--green-dark);
  --bs-btn-active-border-color:var(--green-dark);
  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg:var(--stem-organic);
  --bs-btn-disabled-border-color:var(--stem-organic);
  font-weight:800;
}
/* Submit failed: the button itself carries the error, alongside .checkout-error below. */
.btn-brand.is-error {
  --bs-btn-bg:#8c0000;
  --bs-btn-border-color:#8c0000;
  --bs-btn-hover-bg:#6e0000;
  --bs-btn-hover-border-color:#6e0000;
  --bs-btn-active-bg:#6e0000;
  --bs-btn-active-border-color:#6e0000;
  --bs-btn-disabled-bg:#8c0000;
  --bs-btn-disabled-border-color:#8c0000;
}
.content-card {
  padding:26px 30px;
}
.content-card h2,.section-heading h2,.summary-panel h2,.payment-panel h2 {
  color:var(--moms-care);
  font-size:1.65rem;
  font-weight:900;
}
.goal-card .progress {
  height:10px;
  background:#eef1e6;
}
.goal-card .progress-bar {
  background:var(--stem-organic);
}
.progress-meta,.goal-count {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:.88rem;
}
.goal-count {
  /* "988 plants to go!" — script accent, number stays in the heading font */
  font-family:'sweet-apricot','Marck Script',cursive;
  font-size:1.05rem;
  align-items:baseline;
  gap:.4rem;
}
.goal-count strong {
  color:var(--moms-care);
  font-family:'gumbo-regular','Fredoka',sans-serif;
  font-size:1.4rem;
}
.info-card {
  min-height:190px;
  /* fill the col-lg-6 so both cards in the row match heights */
  height:100%;
}
.info-card.text-center {
  /* deadline card: keep the stacked content vertically centered */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
/* ---- Card-header icons (Material Icons, loaded by the v5 layout) ---- */
.info-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#f7e3e0;
  color:var(--moms-care);
  margin-bottom:.6rem;
}
.card-title-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#f7e3e0;
  color:var(--moms-care);
  vertical-align:-8px; /* fallback for browsers without :has() */
  margin-right:.35rem;
  flex-shrink:0;
}
/* headings with a leading icon: flex keeps the icon and text vertically centred
   (same treatment as .form-section-title; gap matches its 12px) */
h2:has(> .card-title-icon) {
  display:flex;
  align-items:center;
  gap:12px;
}
.card-title-icon .material-icons {
  font-size:20px;
}
.urgency-note {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  color:var(--moms-care);
  font-weight:700;
}
.urgency-note .material-icons {
  font-size:1rem;
}
/* HOME-02: days/hrs/mins/secs countdown on the Orders Due By card */
.deadline-countdown {
  display:flex;
  gap:10px;
  justify-content:center;
  margin:.4rem 0 .65rem;
}
.count-cell {
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:64px;
  padding:.55rem .5rem .45rem;
  border-radius:12px;
  background:rgba(160,73,86,.07);
  border:1px solid rgba(160,73,86,.18);
}
.count-value {
  font-size:1.6rem;
  font-weight:800;
  line-height:1.1;
  color:var(--moms-care);
  /* fixed-width digits so the ticking clock doesn't jiggle */
  font-variant-numeric:tabular-nums;
}
.count-cell small {
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:400px) {
  .count-cell {
    min-width:56px;
  }
}
.display-date {
  font-size:2rem!important;
  margin-bottom:.15rem;
}
.display-time {
  /* body (regular) font on its own row under the date */
  margin:0 0 .4rem;
  font-size:1.05rem;
}
.pickup-table-wrap {
  /* rounded container: header band shows this bg, body rows paint white over it */
  margin-top:.75rem;
  border-radius:14px;
  overflow:hidden;
  background:#f4f3ea;
}
.pickup-table {
  width:100%;
  border-collapse:collapse;
}
.pickup-table th {
  font-family:'gumbo-regular','Fredoka',sans-serif;
  font-weight:400;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--muted);
  text-align:left;
  padding:1rem 1.1rem;
}
.pickup-table td {
  background:var(--white);
  text-align:left;
  vertical-align:top;
  padding:1rem 1.1rem;
}
.pickup-table tbody tr+tr td {
  border-top:1px solid var(--line);
}
.pickup-table .pickup-time {
  font-style:italic;
}
.section-heading {
  border-bottom:1px solid var(--line);
}
.section-heading span {
  font-size:.75rem;
  text-transform:uppercase;
}
.product-card {
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(88,117,77,.08);
  border-radius:18px;
}
.product-image-wrap {
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#eee;
  border-radius:18px 18px 0 0;
  touch-action:pan-y;
}
.product-image {
  width:100%;
  height:100%;
  object-fit:cover;
}
.status-badge {
  position:absolute;
  top:14px;
  left:14px;
  background:var(--stem-organic);
  color:#fff;
  border-radius:999px;
  padding:.3rem .62rem;
  font-size:.7rem;
  font-weight:800;
}
/* In-cart badge: floats over the top-right of the photo, and only exists while the
   product is in the cart — so there's no permanent "X0" to read past. Roughly twice the
   old badge, with its own clear button. */
.quantity-badge {
  position:absolute;
  top:12px;
  right:12px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:.15rem;
  padding:.28rem .3rem .28rem .62rem;
  border-radius:999px;
  background:var(--stem-organic);
  color:#fff;
  font-size:1.4rem;
  font-weight:800;
  line-height:1;
  box-shadow:0 6px 18px rgba(31,42,37,.28);
}
/* the display:flex above would otherwise beat the UA's [hidden] rule */
.quantity-badge[hidden] {
  display:none;
}
.quantity-badge-count {
  display:inline-flex;
  align-items:center;
  gap:.28rem;
}
.quantity-badge-count .material-icons {
  font-size:1.1rem;
}
.quantity-badge-clear {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  color:#fff;
  transition:background-color .18s ease;
}
.quantity-badge-clear:hover,
.quantity-badge-clear:focus-visible {
  background:rgba(255,255,255,.42);
}
.quantity-badge-clear .material-icons {
  font-size:19px;
}
.quantity-badge.bump {
  animation:badge-bump .35s ease;
}
@keyframes badge-bump {
  50% {
    transform:scale(1.18);
  }
}
/* HOME-04: big +1/−1 chip that pops in the centre of the photo on quantity changes */
.qty-pop {
  position:absolute;
  left:50%;
  top:50%;
  z-index:7;
  padding:.55rem 1.5rem;
  border-radius:999px;
  background:var(--stem-organic);
  color:#fff;
  font-size:2.6rem;
  font-weight:800;
  line-height:1.2;
  box-shadow:0 8px 24px rgba(31,42,37,.28);
  pointer-events:none;
  opacity:0;
  animation:qty-pop-float .8s ease-out forwards;
}
.qty-pop.remove {
  background:#8c0000;
}
@keyframes qty-pop-float {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.4);
  }
  25% {
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  100% {
    opacity:0;
    transform:translate(-50%,calc(-50% - 60px)) scale(1);
  }
}
.status-badge {
  left:14px;
  top:14px;
  z-index:6;
  text-transform:uppercase;
}
.sold-stamp {
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.62);
  display:grid;
  place-items:center;
  z-index:4;
  pointer-events:none;
}
.sold-stamp span {
  border:4px solid var(--moms-care);
  color:var(--moms-care);
  padding:.55rem .9rem;
  font-weight:900;
  transform:rotate(-8deg);
  font-size:1.25rem;
}
.product-body {
  padding:22px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.product-title {
  color:var(--moms-care);
  font-weight:900;
  font-size:1.22rem;
  margin-bottom:10px;
}
.product-description {
  font-size:.9rem;
  min-height:52px;
  margin-bottom:12px;
  color:#4f5956;
  line-height:1.55;
}
.status-badge-inline {
  align-self:flex-start;
  display:inline-flex;
  margin-bottom:14px;
  padding:.28rem .7rem;
  border-radius:999px;
  background:var(--stem-organic);
  color:var(--white);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.status-badge-inline.limited {
  background:var(--moms-care);
}
.price {
  font-size:1.45rem;
  color:var(--green-dark);
  font-weight:800;
  margin-top:auto;
}
.price small {
  font-size:.65rem;
  color:var(--ink);
  font-weight:500;
}
.product-purchase-area {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-top:auto;
}
.in-cart-status {
  padding:.35rem .55rem;
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--muted);
  font-size:.75rem;
  white-space:nowrap;
}
.in-cart-status.has-items {
  border-color:rgba(88,117,77,.32);
  background:rgba(88,117,77,.08);
  color:var(--green-dark);
}
#productGrid .in-cart-status {
  display:none;
}
.cart-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px 52px;
  gap:10px;
  margin-top:12px;
}
/* Customers don't get the coordinator-only +10 button, so the row is one cell shorter */
.cart-controls.no-bulk {
  grid-template-columns:minmax(0,1fr) 52px;
}
.add-button,.minus-button {
  border:0;
  border-radius:10px;
  padding:.72rem;
  background:var(--stem-organic);
  color:#fff;
  font-weight:800;
  font-size:.86rem;
  min-height:44px;
  box-shadow:0 5px 12px rgba(35,50,31,.08);
}
.minus-button {
  background:#8c0000;
}
.add-button:disabled,.minus-button:disabled {
  background:#e8eaee;
  color:#777;
}
.clear-cart-btn {
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:.45rem .8rem;
  display:inline-flex;
  align-items:center;
}
.clear-cart-btn .material-icons {
  font-size:1rem;
}
.clear-cart-btn:hover {
  color:#8c0000;
  border-color:rgba(140,0,0,.35);
}
.checkout-card .summary-panel,.checkout-card .payment-panel {
  padding:40px;
}
.payment-panel {
  background:var(--moms-care);
  color:#fff;
}
.payment-panel h2 {
  color:#fff;
}
.payment-options {
  display:grid;
  gap:10px;
}
.payment-options label {
  background:rgba(255,255,255,.12);
  padding:13px;
  border-radius:8px;
  cursor:pointer;
}
.payment-options label:has(input:checked) {
  background:rgba(255,255,255,.20);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.payment-options input[type="radio"] {
  accent-color:#9ec77a;
  margin-right:8px;
}
/* Variant for white cards (e.g. the review section on the details page) */
.payment-options-light label {
  background:#f0efdb;
}
.payment-options-light label:has(input:checked) {
  background:rgba(88,117,77,.14);
  box-shadow:inset 0 0 0 1px rgba(88,117,77,.35);
}
.payment-options-light input[type="radio"] {
  accent-color:var(--stem-organic);
}
.totals {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:15px;
}
.totals>div {
  display:flex;
  justify-content:space-between;
  margin:.7rem 0;
}
.grand-total {
  font-size:1.45rem;
  color:var(--green-dark);
}
.summary-row {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:12px 0;
}
.summary-row h3 {
  font-size:.95rem;
  margin:0;
}
.secure-note {
  text-align:center;
  font-size:.7rem;
  text-transform:uppercase;
  margin-top:12px;
  color:rgba(255,255,255,.65);
}
/* ---- Checkout pages (steps 2/3 — used by upcoming v5 templates) ---- */
.checkout-shell {
  max-width:900px;
  margin:auto;
}
.stepper {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:26px;
  align-items:start;
  margin:30px 0 38px;
}
.step {
  position:relative;
  text-align:center;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.06em;
}
.step:not(:last-child):after {
  content:"";
  position:absolute;
  height:2px;
  background:var(--moms-care);
  top:19px;
  left:62%;
  width:76%;
}
.step-circle {
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:transparent;
  margin:auto auto 8px;
  font-size:1rem;
}
.step.active .step-circle,.step.complete .step-circle {
  background:var(--moms-care);
  color:#fff;
}
.step.active .step-circle {
  box-shadow:0 0 0 5px #b8c8ae;
}
a.step {
  color:inherit;
  text-decoration:none;
}
a.step:hover {
  text-decoration:underline;
  text-underline-offset:3px;
}
.checkout-title {
  text-align:center;
  color:var(--moms-care);
  font-size:2rem;
  font-weight:900;
  margin-bottom:28px;
}
.form-section {
  padding:28px;
  margin-bottom:26px;
}
.form-section-title {
  display:flex;
  gap:12px;
  align-items:center;
  color:var(--moms-care);
  font-size:1.25rem;
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
  margin-bottom:20px;
}
.form-section .form-control,.form-section .form-select {
  border:0;
  border-bottom:1px solid #d9d6bc;
  border-radius:0;
  padding:.85rem .5rem;
  background:transparent;
}
/* Searchable select — combobox for the referrer field on the order-details page */
.searchable-select {
  position:relative;
}
.searchable-select .form-control {
  padding-right:2.4rem;
}
.searchable-select-arrow {
  position:absolute;
  right:.5rem;
  top:50%;
  transform:translateY(-50%);
  color:#9a976f;
  pointer-events:none;
  transition:transform .15s ease;
}
.searchable-select.open .searchable-select-arrow {
  transform:translateY(-50%) rotate(180deg);
}
.searchable-select-menu {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:1030;
  margin-top:4px;
  padding:6px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  max-height:280px;
  overflow-y:auto;
}
.searchable-select-option {
  padding:.55rem .75rem;
  border-radius:6px;
  cursor:pointer;
}
.searchable-select-option:hover,
.searchable-select-option.active {
  background:#f0efdb;
}
.searchable-select-empty {
  padding:.55rem .75rem;
  color:#8a8a7a;
  font-style:italic;
}
.soft-check {
  background:#f0efdb;
  border-radius:8px;
  padding:12px;
}
.soft-check,
.soft-check input,
.ack-box label,
.ack-box input {
  cursor:pointer;
}
/* Required acknowledgements: the pickup confirmation on the details page and the two
   payment-page ones. Red, asterisked and carrying a "Required" note until they're
   ticked — customers were sailing past them even when the validation error said so —
   then settling to the normal green. v5.ackBox() (js/v5/v5.js) owns .is-confirmed and
   .is-flagged for all three; only padding and margin differ between them. */
.ack-box {
  background:#8c0000;
  color:#fff;
  border-radius:10px;
  transition:background-color .25s ease;
}
.ack-box.is-confirmed {
  background:var(--stem-organic);
}
.ack-box a {
  color:inherit;
}
.ack-box input[type="checkbox"] {
  flex:none;
  width:22px;
  height:22px;
  margin-top:2px;
  accent-color:#fff;
}
.ack-required-mark {
  font-weight:900;
}
.ack-required-note {
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-top:.9rem;
  padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.3);
  font-size:.92rem;
}
.ack-required-note .material-icons {
  flex:none;
  font-size:1.2rem;
}
.ack-box.is-confirmed .ack-required-mark,
.ack-box.is-confirmed .ack-required-note {
  display:none;
}
/* a failed submit points back at the box, not just at the toast */
.ack-box.is-flagged {
  outline:3px solid #ffd24d;
  outline-offset:3px;
  animation:ack-nudge .4s ease;
}
@keyframes ack-nudge {
  25% {
    transform:translateX(-6px);
  }
  75% {
    transform:translateX(6px);
  }
}
@media(prefers-reduced-motion:reduce) {
  .ack-box.is-flagged {
    animation:none;
  }
}
.pickup-box {
  padding:22px;
}
.order-line {
  display:flex;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.order-line img {
  width:62px;
  height:62px;
  border-radius:8px;
  object-fit:cover;
}
.order-line .amount {
  margin-left:auto;
  color:var(--moms-care);
}
/* The most recent submit failure, kept on screen by the button. The toast is transient
   and on a phone it's long gone by the time the customer has scrolled back up to fix
   whatever it named. */
.checkout-error {
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  margin:28px 0 0;
  padding:.85rem 1rem;
  border:1px solid #f0b4b4;
  border-radius:10px;
  background:#fdeaea;
  color:#8c0000;
  font-weight:600;
}
.checkout-error[hidden] {
  display:none;
}
.checkout-error .material-icons {
  flex:none;
  font-size:1.3rem;
}
.checkout-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:28px 0 90px;
}
.link-back {
  color:var(--ink);
  text-decoration:none;
}
.payment-card {
  max-width:680px;
  margin:auto;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.payment-head {
  background:var(--moms-care);
  color:#fff;
  padding:26px 32px;
  display:flex;
  justify-content:space-between;
}
.payment-head h1 {
  font-size:2rem;
  margin:0;
}
.payment-head .total-label {
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.03em;
  opacity:.9;
}
.payment-body {
  padding:48px 52px;
}
.payment-field {
  background:#f0efdb;
  border-radius:10px;
  padding:18px;
  margin-bottom:20px;
}
.payment-field label {
  display:block;
  font-size:.85rem;
  margin-bottom:6px;
}
.payment-field input {
  width:100%;
  border:0;
  border-bottom:1px solid #737c83;
  padding:.65rem;
  background:#fff;
  font-size:1.1rem;
  font-weight:700;
}
/* Mount points for Stripe Elements (and the plain postal-code input) */
.payment-field .stripe-input {
  width:100%;
  border:0;
  border-bottom:1px solid #737c83;
  padding:.65rem;
  background:#fff;
  font-size:1.1rem;
}
.payment-field input.stripe-input:focus {
  outline:none;
  border-bottom-color:var(--stem-organic);
}
.payment-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
}
.stripe-bar {
  background:#f7f7f7;
  padding:22px;
  text-align:center;
  color:#777;
}
.secure-footer {
  text-align:center;
  margin:80px 0 35px;
  font-size:.75rem;
  letter-spacing:.06em;
}
/* PAY-02: "Want to change how you pay?" link in the payment-card header */
.payment-change-toggle {
  display:inline-block;
  margin-top:.35rem;
  color:rgba(255,255,255,.9);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-decoration:none;
}
.payment-change-toggle:hover,
.payment-change-toggle:focus-visible {
  color:#fff;
  text-decoration:underline;
}
/* its target: the Payment Method radios on the details page */
#paymentMethod {
  scroll-margin-top:16px;
}
.payment-instruction-box {
  padding:1.2rem;
  border-radius:10px;
  background:var(--linen-calming);
  color:var(--ink);
  line-height:1.45;
}
.payment-instruction-box p:last-child {
  margin-bottom:0;
}
.payment-ack-box {
  margin:1.35rem 0;
  padding:18px;
}
.payment-acknowledgement {
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  margin:0;
}
.payment-acknowledgement input {
  width:22px;
  height:22px;
  margin-top:.1rem;
  flex:0 0 auto;
  accent-color:#fff;
}
.payment-submit:disabled {
  opacity:.55;
  cursor:not-allowed;
}

/* ---- Product detail page (used by upcoming v5 template) ---- */
.product-detail-shell {
  padding-top:55px;
}
.breadcrumb a {
  color:var(--ink);
  text-decoration:none;
}
.detail-image {
  position:relative;
  border-radius:28px;
  overflow:hidden;
  aspect-ratio:1/1;
  touch-action:pan-y;
}
.detail-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .18s ease,transform .25s ease;
}
.detail-image img.is-changing {
  opacity:.45;
}
.detail-title {
  color:var(--moms-care);
  font-size:3.2rem;
  line-height:1.05;
  font-weight:900;
}
.quick-specs {
  padding:25px;
}
.detail-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
  margin-top:28px;
}
.detail-copy {
  padding:32px;
}
.care-guide {
  background:var(--stem-organic);
  color:#fff;
  border-radius:28px;
  padding:34px;
}
.care-guide h2 {
  color:#fff;
}
.mini-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.mini-card {
  border:1px solid #cdd8d4;
  border-radius:8px;
  padding:16px;
  background:#f7fbfa;
}

/* ---- Product photo carousel (HOME-03) ---- */
.carousel-track {
  display:flex;
  width:100%;
  height:100%;
  transition:transform .45s cubic-bezier(.32,.72,.28,1);
  will-change:transform;
}
.carousel-track.is-dragging {
  transition:none;
}
.carousel-track .product-image {
  flex:0 0 100%;
}
.carousel-arrow {
  position:absolute;
  top:50%;
  z-index:5;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.88);
  color:var(--ink);
  box-shadow:0 3px 12px rgba(31,42,37,.18);
  transform:translateY(-50%);
  opacity:0;
  transition:opacity .18s ease,background .18s ease;
}
.carousel-arrow .material-icons {
  font-size:24px;
}
.carousel-arrow.prev {
  left:12px;
}
.carousel-arrow.next {
  right:12px;
}
.carousel-arrow:hover {
  background:#fff;
}
.product-image-wrap:hover .carousel-arrow,
.carousel-arrow:focus-visible {
  opacity:1;
}
/* touch devices swipe instead */
@media (hover:none) {
  .carousel-arrow {
    display:none;
  }
}
@media (prefers-reduced-motion:reduce) {
  .carousel-track {
    transition:none;
  }
}
/* Previous / current / next thumbnails under each carousel, replacing the old dots:
   they say what you'd move to, not just how many there are. Fixed height so the strip
   is the same size on every card regardless of the photos' own proportions. */
.carousel-thumbs {
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.carousel-thumb {
  flex:1 1 0;
  min-width:0;
  padding:0;
  border:2px solid transparent;
  border-radius:8px;
  overflow:hidden;
  background:none;
  line-height:0;
  opacity:.5;
  transition:opacity .18s ease,border-color .18s ease;
}
.carousel-thumb img {
  display:block;
  width:100%;
  height:52px;
  object-fit:cover;
}
.carousel-thumb.is-current {
  opacity:1;
  border-color:var(--stem-organic);
}
.carousel-thumb:hover,
.carousel-thumb:focus-visible {
  opacity:1;
}
@media(max-width:576px) {
  .carousel-thumb img {
    height:44px;
  }
}

/* ---- Order-success modal (used by upcoming v5 payment page) ---- */
.order-success-modal .modal-content {
  overflow:hidden;
  border:0;
  border-radius:24px;
  background:var(--linen-calming);
  box-shadow:0 28px 80px rgba(28,35,30,.28);
}
.success-modal-header {
  justify-content:center;
  border:0;
  background:var(--barnwood-rustic);
  color:#fff;
  text-align:center;
  position:relative;
}
.success-modal-header .modal-title {
  width:100%;
  font-family:'gumbo-regular','Fredoka',sans-serif;
  font-size:clamp(1.1rem,3vw,1.65rem);
  font-weight:900;
}
.success-close {
  position:absolute;
  right:1rem;
  filter:invert(11%) sepia(66%) saturate(5691%) hue-rotate(345deg) brightness(76%);
}
.success-modal-body {
  padding:clamp(1.5rem,5vw,3.5rem);
  text-align:center;
}
.success-modal-body h3 {
  color:var(--barnwood-rustic);
  font-family:'gumbo-regular','Fredoka',sans-serif;
  font-size:clamp(1.9rem,5vw,3rem);
  font-weight:900;
}
.success-modal-body .success-lead {
  max-width:650px;
  margin:1.25rem auto;
  font-size:1.15rem;
  font-weight:700;
}
.success-modal-body .success-order-number {
  margin:.4rem auto 0;
  font-size:1.35rem;
  font-weight:700;
}
.success-modal-body .success-order-number strong {
  color:var(--barnwood-rustic);
  font-weight:900;
}
.success-modal-body .success-support-line {
  margin:.35rem auto 1rem;
  color:var(--stem-organic);
  font-size:1rem;
  font-weight:800;
}
.success-instructions {
  max-width:590px;
  margin:1.4rem auto;
  padding:1.35rem 1.5rem;
  border:1px solid var(--linen-line,#e8e5cf);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 25px rgba(39,50,47,.06);
}
.success-share-intro {
  margin:1.4rem auto .9rem;
}
.success-share-intro h4 {
  margin:0 0 .25rem;
  color:var(--stem-organic);
  font-family:'gumbo-regular','Fredoka',sans-serif;
  font-size:1.35rem;
  font-weight:900;
}
.success-share-intro p {
  margin:0;
  font-size:.92rem;
  opacity:.75;
}
.success-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  max-width:620px;
  margin:1.5rem auto 0;
}
.success-action {
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:.75rem;
  min-height:92px;
  padding:1rem 1.1rem;
  border:0;
  border-radius:18px;
  color:#fff;
  font-family:'gumbo-regular','Fredoka',sans-serif;
  text-align:left;
  text-decoration:none;
  transition:transform .18s ease, filter .18s ease;
}
.success-action-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
}
.success-action-icon .material-icons {
  font-size:22px;
}
.success-action-copy strong {
  display:block;
  margin-bottom:.2rem;
  font-size:1rem;
  font-weight:900;
  letter-spacing:.02em;
}
.success-action-copy span {
  display:block;
  font-family:'brandon-grotesque','figtree',sans-serif;
  font-size:.84rem;
  font-weight:500;
  line-height:1.35;
  opacity:.92;
}
.success-action.facebook {
  background:#3485f5;
}
.success-action.shop {
  background:var(--stem-organic);
}
.success-action:hover {
  color:#fff;
  transform:translateY(-1px);
  filter:brightness(.98);
}

/* ---- Add-on upsell modal (storefront, see js/v5/home.js) ---- */
.addon-modal-content {
  border:0;
  border-radius:24px;
  background:var(--linen-calming);
  box-shadow:0 28px 80px rgba(28,35,30,.28);
}
.addon-modal-content .modal-body {
  padding:2rem 2rem 1rem;
}
.addon-modal-content .modal-footer {
  padding:0 2rem 2rem;
}
.addon-title {
  color:var(--barnwood-rustic);
  font-family:'gumbo-regular','Fredoka',sans-serif;
  font-weight:900;
  margin-bottom:1rem;
}
.addon-image {
  display:block;
  max-height:20vh;
  margin:0 auto 1rem;
}
.addon-text {
  margin:0;
  font-weight:500;
}

/* ---- Coordinator homepage editing (v5 port of the classic ✏️ overlays) ---- */
.hero-edit-btn {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border:0;
  border-radius:999px;
  padding:.45rem 1rem;
  background:rgba(255,255,255,.92);
  color:var(--moms-care);
  font-weight:700;
  font-size:.9rem;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.hero-edit-btn:hover {
  background:#fff;
}
.hero-edit-btn .material-icons {
  font-size:18px;
}
.hero-edit-btn-overlay {
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
}
.editor-toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  margin-bottom:.5rem;
}
.editor-toolbar-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:34px;
  border:1px solid #dee2e6;
  border-radius:8px;
  background:#fff;
  color:#495057;
}
.editor-toolbar-btn:hover {
  background:#f1f3f5;
}
.editor-toolbar-btn.active {
  background:var(--moms-care);
  border-color:var(--moms-care);
  color:#fff;
}
.editor-toolbar-btn .material-icons {
  font-size:20px;
}
.editor-toolbar-divider {
  width:1px;
  margin:4px .35rem;
  background:#dee2e6;
}
.hero-text-editor {
  min-height:140px;
  overflow-y:auto;
}
/* Banner-suitability advice in the Edit Homepage Image dialog (js/v5/home.js).
   Deliberately an amber note, not .alert-danger — an odd-shaped photo still saves. */
.hero-image-warning {
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  margin-top:.75rem;
  padding:.65rem .8rem;
  border:1px solid #f0d48a;
  border-radius:10px;
  background:#fdf6e3;
  color:#6b4e07;
  font-size:.86rem;
  line-height:1.45;
}
.hero-image-warning .material-icons {
  flex:none;
  font-size:1.15rem;
  color:#b58a12;
}
.hero-image-preview {
  display:block;
  width:100%;
  border-radius:12px;
  margin-bottom:1rem;
}

/* ---- Responsive adjustments ---- */
@media(max-width:991px) {
  .detail-grid {
    grid-template-columns:1fr;
  }
  .detail-title {
    font-size:2.4rem;
  }
  .payment-grid {
    grid-template-columns:1fr;
  }
  .checkout-card .summary-panel,.checkout-card .payment-panel {
    padding:28px;
  }
  .hero-copy {
    padding:34px 34px 24px;
  }
  .step:not(:last-child):after {
    width:65%;
    left:68%;
  }
}
@media(max-width:576px) {
  .page-shell .container {
    padding-left:18px;
    padding-right:18px;
  }
  .hero-copy {
    padding:28px 24px 20px;
  }
  .hero-cta {
    width:100%;
    justify-content:center;
    padding:.95rem 1.5rem;
    font-size:1.15rem;
  }
  .content-card {
    padding:22px;
  }
  .product-body {
    padding:20px;
  }
  .product-purchase-area {
    align-items:center;
  }
  .in-cart-status {
    font-size:.72rem;
  }
  .checkout-actions {
    gap:18px;
    align-items:stretch;
    flex-direction:column-reverse;
  }
  .checkout-actions .btn {
    width:100%;
  }
  .stepper {
    gap:4px;
  }
  .step:not(:last-child):after {
    left:68%;
    width:65%;
  }
  .payment-body {
    padding:28px 22px;
  }
  .payment-head {
    padding:22px;
    align-items:flex-start;
  }
  .payment-head h1 {
    font-size:1.55rem;
  }
  .payment-head .total {
    font-size:1.35rem;
  }
  .payment-method-select {
    max-width:100%;
  }
  .product-detail-shell {
    padding-top:30px;
  }
  .detail-title {
    font-size:2rem;
  }
  .detail-grid {
    margin-top:18px;
  }
  .mini-cards {
    grid-template-columns:1fr;
  }
  .site-footer {
    text-align:left;
  }
  .success-actions {
    grid-template-columns:1fr;
  }
  .success-action {
    grid-template-columns:38px 1fr;
    padding:.9rem;
  }
  .success-action-icon {
    width:38px;
    height:38px;
  }
}