/* ============================================
   THE GARDEN HUB — Design System
   Ported from reference/styles.css + section styles
   ============================================ */

:root {
  --ink: #14160F;
  --ink-2: #21271e;
  --ink-3: #3a3f32;
  --cream: #f6fff2;
  --cream-2: #eaf6e2;
  --cream-3: #ddf0d0;
  --paper: #ffffff;
  --sage: #93db4c;
  --sage-2: #fff3e0;
  --sage-deep: #d97a35;
  --clay: #93db4c;
  --clay-deep: #bde858;
  --clay-soft: #cdeabf;
  --rust: #bde858;
  --stone: #8a8575;
  --stone-2: #6c6a5c;
  --sand: #d9cfb3;
  --line: rgba(20, 23, 15, 0.10);
  --line-strong: rgba(20, 23, 15, 0.22);

  --font-display: "Fraunces", "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

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

h1, h2, h3, h4, h5, h6 { color: var(--ink); margin: 0; }

/* =========== Typography helpers =========== */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.h-display em { font-style: italic; }

.h-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-2);
}

.italic { font-style: italic; }
.sage { color: var(--sage) !important; }

/* =========== Layout =========== */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .wrap { padding: 0 48px; } }
@media (min-width: 1200px) { .wrap { padding: 0 32px; } }

.section { padding: 80px 0; }
@media (min-width: 768px) { .section { padding: 96px 0; } }

/* =========== Buttons =========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--clay); color: #fff; }
.btn-primary:hover { background: var(--clay-deep); box-shadow: 0 8px 20px -8px rgba(196, 85, 42, 0.6); }
.btn-primary:disabled { background: rgba(243,241,232,0.1); color: rgba(243,241,232,0.35); cursor: not-allowed; transform: none; box-shadow: none; }

.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: var(--ink-2); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.btn-sage { background: var(--sage); color: var(--ink); }
.btn-sage:hover { background: var(--sage-2); }

.btn-lg { height: 56px; padding: 0 32px; font-size: 14px; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 11px; }

/* =========== Chips =========== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--sage);
  color: var(--ink);
}
.chip-dark {
  background: rgba(20, 23, 15, 0.7);
  color: var(--cream);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chip-clay { background: var(--clay); color: #fff; }
.chip-cream { background: var(--cream); color: var(--ink); border: 1px solid var(--line); }

/* =========== Input =========== */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.input:focus {
  outline: none;
  border-color: var(--clay);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(226, 106, 58, 0.15);
}

/* =========== Animations =========== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(226, 106, 58, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(226, 106, 58, 0.08); }
}

.fade-up { animation: fadeUp 0.6s var(--ease-out) both; }
.fade-in { animation: fadeIn 0.5s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========== Accessibility =========== */
.sr-only, .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 8px 16px;
  z-index: 10000;
}
.skip-link:focus { top: 0; }

/* ============================================
   Reading-progress bar
   ============================================
   Reusable site-wide progress strip — mounted by the
   template-parts/reading-progress.php partial. Pinned just under the
   sticky site header, fills 0–100% as the visitor scrolls. Stays
   invisible until the visitor has actually started scrolling so it
   doesn't compete with the hero (`.is-active` is added by
   initReadingProgress() in app.js after ~80px of scroll). Per-page top
   offset override: set --twy-reading-progress-top on the bar element. */
.twy-reading-progress {
  --twy-reading-progress-top: 74px;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--twy-reading-progress-top);
  height: 3px;
  background: rgba(20, 23, 15, 0.06);
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.twy-reading-progress.is-active { opacity: 1; }
.twy-reading-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--twy-c-clay, #93db4c);
  transition: width 80ms linear;
}

/* ============================================
   TOP BAR + HEADER
   ============================================ */

.twy-topbar {
  background: #0d0f0a;
  color: #d9d6c4;
  height: 36px;
  display: flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 101;
}
.twy-topbar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding: 0 24px;
  max-width: 1440px;
  margin: 0 auto;
}
.twy-topbar__dot { opacity: 0.4; }
.twy-topbar__review-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
}
.twy-topbar__review-link:hover { color: var(--sage); }
.twy-topbar__stars { display: inline-flex; gap: 2px; color: #e26a3b; line-height: 0; }
.twy-topbar__stars svg { width: 11px; height: 11px; }
.twy-topbar__flag { display: inline-flex; align-items: center; gap: 6px; }

body.twy-home-overlay .twy-topbar,
body.twy-archive-overlay .twy-topbar,
body.twy-contact-overlay .twy-topbar,
body.twy-account-overlay .twy-topbar,
body.twy-journal-overlay .twy-topbar,
body.twy-sauna-science-overlay,
body.twy-wyt-overlay,
body.twy-heat-pumps-overlay .twy-topbar,
body.twy-about-overlay .twy-topbar,
body.twy-policy-overlay .twy-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: #0d0f0a;
  z-index: 101;
}
body.twy-home-overlay.is-scrolled .twy-topbar,
body.twy-archive-overlay.is-scrolled .twy-topbar,
body.twy-contact-overlay.is-scrolled .twy-topbar,
body.twy-account-overlay.is-scrolled .twy-topbar,
body.twy-journal-overlay.is-scrolled .twy-topbar,
body.twy-sauna-science-overlay,
body.twy-wyt-overlay,
body.twy-heat-pumps-overlay.is-scrolled .twy-topbar,
body.twy-about-overlay.is-scrolled .twy-topbar,
body.twy-policy-overlay.is-scrolled .twy-topbar { position: relative; background: #0d0f0a; }

.twy-site-header {
  background: #14160F;
  color: var(--cream);
  padding: 10px 0;
  position: sticky;
  top: 0;
  left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s ease;
}
body.twy-home-overlay .twy-site-header,
body.twy-archive-overlay .twy-site-header,
body.twy-contact-overlay .twy-site-header,
body.twy-account-overlay .twy-site-header,
body.twy-journal-overlay .twy-site-header,
body.twy-sauna-science-overlay,
body.twy-wyt-overlay,
body.twy-heat-pumps-overlay .twy-site-header,
body.twy-about-overlay .twy-site-header,
body.twy-policy-overlay .twy-site-header {
  background: transparent;
  position: absolute;
  top: 36px;
}
body.twy-home-overlay.is-scrolled .twy-site-header,
body.twy-archive-overlay.is-scrolled .twy-site-header,
body.twy-contact-overlay.is-scrolled .twy-site-header,
body.twy-account-overlay.is-scrolled .twy-site-header,
body.twy-journal-overlay.is-scrolled .twy-site-header,
body.twy-sauna-science-overlay,
body.twy-wyt-overlay,
body.twy-heat-pumps-overlay.is-scrolled .twy-site-header,
body.twy-about-overlay.is-scrolled .twy-site-header,
body.twy-policy-overlay.is-scrolled .twy-site-header {
  background: #14160F;
  position: sticky;
  top: 0;
}

.twy-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .twy-header__row { padding: 0 48px; } }
/* Aligned with .wrap (32px) at desktop, 2026-05-02. Was 64px previously,
   which pushed the logo + cart icons 32px further inward than every
   .wrap-using content block on the site. */
@media (min-width: 1200px) { .twy-header__row { padding: 0 32px; } }

.twy-header__logo img,
.twy-header__logo a img { height: 54px; width: auto; display: block; }
.twy-header__logo .custom-logo-link { display: inline-flex; align-items: center; }
.twy-header__logo .custom-logo { height: 54px; width: auto; }

.twy-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--cream);
  padding: 5px 40px;
  border-radius: 999px;
  justify-content: center;
}
body.twy-home-overlay:not(.is-scrolled) .twy-nav,
body.twy-archive-overlay:not(.is-scrolled) .twy-nav,
body.twy-journal-overlay:not(.is-scrolled) .twy-nav,
body.twy-sauna-science-overlay,
body.twy-wyt-overlay,
body.twy-heat-pumps-overlay:not(.is-scrolled) .twy-nav,
body.twy-about-overlay:not(.is-scrolled) .twy-nav { box-shadow: 0 10px 30px -12px rgba(0,0,0,0.4); }

.twy-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.twy-nav__list > li > a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.twy-nav__list > li > a:hover,
.twy-nav__list > li.current-menu-item > a {
  background: var(--ink);
  color: var(--cream);
}

/* ---------- Primary-nav dropdown (depth 2) ----------
   Hover/focus-within reveal of a sub-menu beneath an item. Lives at
   absolute position so the parent pill keeps its compact width. The card
   is sage-on-paper to match the editorial palette; items inherit the
   ink-fill hover treatment. */
.twy-nav__list > li.menu-item-has-children { position: relative; }
.twy-nav__list > li > .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.18), 0 4px 10px -4px rgba(0, 0, 0, 0.08);
  display: none;
  z-index: 50;
}
/* A small invisible bridge between the pill and the dropdown so cursor
   travel from one to the other doesn't trigger a hover-out. */
.twy-nav__list > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
  display: none;
}
.twy-nav__list > li.menu-item-has-children:hover > .sub-menu,
.twy-nav__list > li.menu-item-has-children:focus-within > .sub-menu,
.twy-nav__list > li.menu-item-has-children:hover::after,
.twy-nav__list > li.menu-item-has-children:focus-within::after {
  display: block;
}
.twy-nav__list > li > .sub-menu li { margin: 0; }
.twy-nav__list > li > .sub-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.twy-nav__list > li > .sub-menu a:hover {
  background: var(--ink);
  color: var(--sage);
}
/* "Save" pill on the value sub-item (Refurbished). Uses clay so it stands
   out from the ink-on-sage parent without competing for attention. */
.twy-nav-sub__badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--clay);
  color: var(--paper);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.twy-nav__list > li > .sub-menu a:hover .twy-nav-sub__badge {
  background: var(--paper);
  color: var(--ink);
}

/* Inline price hint on a sub-item (e.g. "Swim spas · from £12,995").
   The primary label keeps its uppercase mono treatment from the parent
   anchor; the hint drops to a smaller weight, lower-case, and a dimmer
   tone so the brand label is what reads first. */
.twy-nav-sub__hint {
  margin-left: 4px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.65;
  white-space: nowrap;
}
.twy-nav__list > li > .sub-menu a:hover .twy-nav-sub__hint {
  opacity: 0.85;
}
.twy-mobile-panel .twy-nav-sub__hint {
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.6;
}

/* Mobile panel — sub-menus render inline as a small indented list. The
   panel is already vertical so we just lean on a left border + indent.
   Collapsed by default; the JS-injected chevron (`.twy-mobile-panel__chev`)
   toggles `.is-open` on the parent <li> to reveal them. */
.twy-mobile-panel .sub-menu {
  list-style: none;
  margin: 4px 0 8px 16px;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line);
  display: none;
}
.twy-mobile-panel .menu-item-has-children.is-open > .sub-menu { display: block; }
.twy-mobile-panel .sub-menu a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Parent <li> with children — anchor stays full-width-feeling but the
   chevron sits in the row's right gutter. Position relative on the <li>
   so the absolute chevron anchors to the row, not the panel. */
.twy-mobile-panel .menu-item-has-children { position: relative; }
.twy-mobile-panel__chev {
  position: absolute;
  top: 0;
  right: 12px;
  width: 44px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  transition: transform 180ms var(--ease-out);
}
.twy-mobile-panel .menu-item-has-children.is-open > .twy-mobile-panel__chev {
  transform: rotate(180deg);
}
/* Stop the parent link from being covered by the chevron's hit-area. */
.twy-mobile-panel .menu-item-has-children > a {
  padding-right: 48px;
}
.twy-mobile-panel .twy-nav-sub__badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--clay);
  color: var(--paper);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.twy-header__icons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.twy-icon-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--cream);
  padding: 5px;
  border-radius: 999px;
}
body.twy-home-overlay:not(.is-scrolled) .twy-icon-pill,
body.twy-archive-overlay:not(.is-scrolled) .twy-icon-pill,
body.twy-journal-overlay:not(.is-scrolled) .twy-icon-pill,
body.twy-sauna-science-overlay,
body.twy-wyt-overlay,
body.twy-heat-pumps-overlay:not(.is-scrolled) .twy-icon-pill,
body.twy-about-overlay:not(.is-scrolled) .twy-icon-pill { box-shadow: 0 10px 30px -12px rgba(0,0,0,0.4); }

.twy-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  transition: background 0.15s;
}
.twy-icon-btn:hover { background: rgba(33, 39, 30, 0.08); }
.twy-icon-btn svg { color: var(--ink); }
.twy-icon-pill__divider {
  width: 1px;
  height: 18px;
  background: rgba(33, 39, 30, 0.15);
}
.twy-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--clay);
  color: #fff;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--ink);
}

/* Account-icon notification indicator — small clay pill in the
   top-right corner of the existing account icon / profile photo when a
   logged-in customer has unread staff ticket replies. Same data source
   as the My Account sidebar bell, so the two surfaces stay in sync.
   Tonally distinct from the cart badge (clay-deep vs clay) so customers
   don't confuse "you have unread support replies" with "you have items
   in your cart". */
.twy-icon-btn--has-notif { position: relative; }
.twy-icon-btn__notif {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #bde858;
  color: #fff;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--ink);
  pointer-events: none;
}
/* Subtle one-shot pulse on first paint so a returning customer
   notices the indicator without it being distracting. */
@keyframes twy-notif-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.twy-icon-btn--has-notif .twy-icon-btn__notif {
  animation: twy-notif-pulse 0.9s ease-out 0.4s 1;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .twy-icon-btn--has-notif .twy-icon-btn__notif { animation: none; }
}

.twy-menu-toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.twy-mobile-panel {
  position: absolute;
  top: 100%;
  right: 24px;
  margin-top: 8px;
  background: var(--cream);
  color: var(--ink);
  padding: 8px 0;
  border-radius: 18px;
  min-width: 220px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  display: none;
}
.twy-mobile-panel.is-open { display: block; animation: fadeUp 0.25s var(--ease-out); }
.twy-mobile-panel ul { list-style: none; margin: 0; padding: 0; }
.twy-mobile-panel a {
  display: block;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid rgba(20,23,15,0.12);
}
.twy-mobile-panel li:last-child a { border-bottom: none; }

@media (max-width: 959px) {
  .twy-nav { display: none; }
  .twy-menu-toggle { display: inline-flex; }
}

/* ============================================
   TRUST MARQUEE
   ============================================ */
.twy-marquee {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 22px 0;
}
.twy-marquee__track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee 40s linear infinite;
  align-items: center;
}
.twy-marquee__item {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.twy-marquee__dot { color: var(--stone); opacity: 0.4; }

/* ============================================
   HERO
   ============================================ */
.twy-hero {
  position: relative;
  background: var(--ink);
}
.twy-hero__inner {
  position: relative;
  min-height: min(69vh, 615px);
  overflow: hidden;
}
.twy-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.91;
}
.twy-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20,23,15,0.75) 0%,
    rgba(20,23,15,0.35) 12%,
    rgba(20,23,15,0.05) 30%,
    rgba(20,23,15,0) 55%,
    rgba(20,23,15,0.35) 80%,
    rgba(20,23,15,0.85) 100%);
  pointer-events: none;
}
.twy-hero__wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  padding-bottom: 72px;
}
.twy-hero__copy { color: var(--cream); max-width: 620px; }
.twy-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 20px;
}
.twy-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--sage);
}
.twy-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cream);
}

/* ============================================
   INTRO SECTION
   ============================================ */
.twy-intro { background: var(--cream); padding: 96px 0; }
.twy-intro__wrap { max-width: none; margin: 0; }
.twy-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.twy-intro__media { position: relative; }
.twy-intro__media-main {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream-2);
  box-shadow: 0 30px 60px -28px rgba(20,22,15,0.45);
}
.twy-intro__media-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.twy-intro__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-bottom: 14px;
}
.twy-intro__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 20px;
  color: var(--ink);
}
.twy-intro__body { font-size: 15.5px; line-height: 1.75; color: var(--ink-3); margin: 0 0 16px; max-width: 520px; }
.twy-intro__body--mute { color: var(--stone-2); }
.twy-intro__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

@media (max-width: 768px) {
  .twy-intro { padding: 64px 0; }
  .twy-intro__grid { grid-template-columns: 1fr; gap: 36px; }
  .twy-intro__heading { font-size: clamp(26px, 7vw, 34px); }
}

/* ============================================
   CATEGORY BLOCK
   ============================================ */
.twy-catblock { padding: 90px 0; background: var(--cream); }
.twy-catblock--alt { background: var(--cream-2); }
.twy-catblock__header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}
.twy-catblock__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-2);
  margin-bottom: 12px;
}
.twy-catblock__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.twy-catblock__blurb {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
}
.twy-catblock__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 64px;
}
.twy-catblock__seeall-wrap { text-align: center; margin-top: 40px; }
.twy-catblock__seeall {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.twy-catblock__seeall::before,
.twy-catblock__seeall::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  opacity: 0.4;
}

@media (max-width: 900px) { .twy-catblock__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .twy-catblock__grid { grid-template-columns: 1fr; } }

/* ============================================
   PRODUCT CARD
   ============================================ */
.twy-card {
  display: block;
  /* min-width:0 stops a large-intrinsic product image (e.g. a 3000px source
   * served via srcset) from blowing out its `1fr` grid track. Without it, a
   * grid item's automatic minimum is its min-content width — the image's
   * intrinsic size — which expanded one column to 3000px on the archive +
   * infinite-scroll grids. Covers every .twy-card grid surface in one rule. */
  min-width: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: transform 0.15s var(--ease-out);
}
.twy-card:hover { transform: translateY(-2px); }
.twy-card__frame {
  position: relative;
  aspect-ratio: 1.1 / 1;
  background: var(--cream-2);
  border-radius: 20px;
  overflow: hidden;
}
/* Pale sage backdrop so transparent-PNG product shots get a consistent
   soft frame instead of sitting on cream-2. */
.twy-card__frame { background: #EAF0E4; }

/* Refurbished archive: white card frame (instead of the site-wide
   pale sage) plus zoom-out so the whole tub reads inside the frame
   instead of bleeding to the edges. */
body.tax-product_cat.term-refurbished-hot-tub .twy-card__frame { background: #fff; }
body.tax-product_cat.term-refurbished-hot-tub .twy-card__img {
  object-fit: contain;
  padding: 14%;
}
body.tax-product_cat.term-refurbished-hot-tub .twy-card:hover .twy-card__img { transform: scale(1.03); }
.twy-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.twy-card:hover .twy-card__img { transform: scale(1.04); }

.twy-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Refurbished hot tubs — replaces the SPECIAL/SALE pill in the same slot.
   The actual badge is the self-contained SVG at
   assets/img/refurbished-badge.svg (sage-light border + ink fill + cream
   text). All visual styling lives in the file; this rule only handles
   placement + drop shadow + size collapse on mobile. */
.twy-card__refurb-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 86px;
  height: 86px;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(20, 23, 15, 0.35));
  pointer-events: none;
}
@media (max-width: 600px) {
  .twy-card__refurb-badge { width: 72px; height: 72px; top: 10px; right: 10px; }
}
.twy-card__chips {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.twy-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(220, 242, 215, 0.92);
  color: var(--sage-deep);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.twy-card__chip--icon {
  width: 26px;
  height: 26px;
  padding: 0;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}
.twy-card__chip--icon svg { display: block; }

.twy-card__body { padding: 18px 2px 4px; }
.twy-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.twy-card__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: capitalize;
  color: var(--ink);
  margin: 0;
}
.twy-card__title-sub { font-weight: 400; }
.twy-card__dims {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  white-space: nowrap;
  padding-top: 2px;
}
.twy-card__desc {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--stone);
  font-weight: 500;
}
.twy-card__footer {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.twy-card__prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.twy-card__price-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
}
.twy-card__was {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--clay);
  text-transform: uppercase;
}
.twy-card__now {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sage-deep);
  text-transform: uppercase;
}
.twy-card__add {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, transform 0.15s;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.twy-card__add:hover { background: var(--clay-deep); transform: translateY(-1px); }

/* ============================================
   BUILD YOUR YARD
   ============================================ */
.twy-byy {
  background: var(--ink);
  color: var(--cream);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.twy-byy__deco {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212,224,168,0.5) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(226,106,58,0.3) 0%, transparent 40%);
  pointer-events: none;
}
.twy-byy__wrap { position: relative; }
.twy-byy__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 16px;
}
.twy-byy__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 18px;
}
.twy-byy__eyebrow::before,
.twy-byy__eyebrow::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--sage);
}
.twy-byy__h2 {
  font-family: var(--font-body);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--cream);
}
.twy-byy__sub {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243,241,232,0.72);
}
.twy-byy__tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 40px 0 36px;
}
.twy-byy__tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(243,241,232,0.18);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.2s var(--ease-out);
  cursor: pointer;
}
.twy-byy__tab.is-active { background: var(--sage); color: var(--ink); border-color: var(--sage); }
.twy-byy__tab-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(243,241,232,0.08);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.twy-byy__tab.is-active .twy-byy__tab-num { background: var(--ink); }
.twy-byy__tab.is-picked .twy-byy__tab-num { background: var(--clay); color: #fff; }

.twy-byy__panel { display: none; }
.twy-byy__panel.is-active { display: block; animation: fadeIn 0.2s var(--ease-out); }

/* Toolbar — single visible row (search / filters toggle / price / sort)
   plus a collapsible panel below for the chip-row filters. The panel
   shows/hides via the [hidden] attribute on `[data-twy-byy-filters-panel]`. */
.twy-byy__toolbar {
  margin-bottom: 20px;
  padding: 14px 20px;
  background: rgba(243,241,232,0.04);
  border: 1px solid rgba(243,241,232,0.1);
  border-radius: 12px;
}
.twy-byy__toolbar-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Filters toggle button — sits between Search and Price. Count badge
   becomes visible when ≥1 chip-based filter is active. */
.twy-byy__filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(243,241,232,0.18);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out);
}
.twy-byy__filters-toggle:hover { border-color: rgba(243,241,232,0.45); }
.twy-byy__filters-toggle.is-open {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.twy-byy__filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--clay, #93db4c);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.twy-byy__filters-chev {
  transition: transform 160ms var(--ease-out);
}
.twy-byy__filters-toggle.is-open .twy-byy__filters-chev { transform: rotate(180deg); }

/* Collapsible filters panel — below the toolbar row, hidden by default.
   Each chip-row stacks vertically inside; "Clear all" sits at the bottom. */
.twy-byy__filters-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(243,241,232,0.1);
}
.twy-byy__filters-panel[hidden] { display: none; }
.twy-byy__filters-panel .twy-byy__filter {
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.twy-byy__filters-panel .twy-byy__filter-label { min-width: 88px; }

.twy-byy__filters-panel-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.twy-byy__filters-clear {
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243,241,232,0.55);
  cursor: pointer;
  transition: color 160ms var(--ease-out);
}
.twy-byy__filters-clear:hover { color: var(--clay, #93db4c); }
.twy-byy__filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.twy-byy__filter-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(243,241,232,0.55);
  white-space: nowrap;
}
.twy-byy__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.twy-byy__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(243,241,232,0.18);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.twy-byy__chip:hover { border-color: rgba(243,241,232,0.45); }
.twy-byy__chip.is-active {
  background: var(--sage);
  color: var(--ink);
  border-color: var(--sage);
}
.twy-byy__select {
  height: 30px;
  padding: 0 28px 0 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(243,241,232,0.18);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d9d6c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}
.twy-byy__select:hover { border-color: rgba(243,241,232,0.45); }
.twy-byy__select option { background: var(--ink); color: var(--cream); }
.twy-byy__sort { margin-left: auto; }

/* Search-by-name input — sits at the start of the BYY toolbar on
   panels with the `show_search` step flag (today: hot tubs only).
   Same pill aesthetic as `.twy-byy__select` but rendered as a wrapper
   around an `<input type=search>` so we can prefix it with a small
   magnifier icon. */
.twy-byy__search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.twy-byy__search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
}
.twy-byy__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(243,241,232,0.55);
  pointer-events: none;
}
.twy-byy__search-input {
  height: 30px;
  width: 240px;
  max-width: 100%;
  padding: 0 32px 0 32px;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(243,241,232,0.18);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color 160ms var(--ease-out);
}
.twy-byy__search-input::placeholder {
  color: rgba(243,241,232,0.45);
  text-transform: none;
  font-weight: 400;
}
.twy-byy__search-input:hover { border-color: rgba(243,241,232,0.45); }
.twy-byy__search-input:focus,
.twy-byy__search-input:focus-visible {
  border-color: var(--clay, #93db4c);
}
/* Hide the native clear cross (we're not styling it; cleaner to drop). */
.twy-byy__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.twy-byy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 56px;
}
@media (max-width: 960px) {
  .twy-byy__grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 40px; }
}
@media (max-width: 600px) {
  .twy-byy__grid { grid-template-columns: 1fr; row-gap: 32px; }
}
.twy-byy__pcard.is-hidden { display: none; }

.twy-byy__loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
/* `display: flex` above outranks the user-agent [hidden] rule, so the wrap
   stays visible (e.g. "Load more · 5 of 5") even after the JS sets
   `loadWrap.hidden = true`. Same `[hidden]` gotcha as the contact / video-
   walkthrough / auth-modal cards — see CLAUDE.md "[hidden] is fragile". */
.twy-byy__loadmore-wrap[hidden] { display: none !important; }
.twy-byy__loadmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(243,241,232,0.22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.twy-byy__loadmore:hover {
  background: rgba(243,241,232,0.06);
  border-color: rgba(243,241,232,0.45);
}
.twy-byy__loadmore-count {
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(243,241,232,0.55);
}
.twy-byy__empty,
.twy-byy__empty-after {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(243,241,232,0.5);
  font-size: 13px;
  padding: 24px 0;
}
.twy-byy__empty-after p { margin: 0 0 14px; }
.twy-byy__empty-clear {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(243,241,232,0.35);
  background: transparent;
  color: var(--cream);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.twy-byy__empty-clear:hover {
  background: var(--cream);
  color: var(--ink);
}
.twy-byy__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 24px;
  margin: 24px auto 0;
  max-width: 520px;
  background: rgba(194,59,59,0.12);
  border: 1px solid rgba(194,59,59,0.35);
  border-radius: 12px;
  color: rgba(243,241,232,0.9);
  font-size: 13px;
}
.twy-byy__error-retry {
  background: var(--cream);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  height: 36px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.twy-byy__error-retry:hover { background: #fff; }
.twy-byy__loading {
  text-align: center;
  color: rgba(243,241,232,0.55);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 0 0;
  margin: 0;
}
.twy-byy__grid { transition: opacity 0.15s ease; }

@media (max-width: 768px) {
  .twy-byy__toolbar { gap: 14px; padding: 14px 14px; }
  .twy-byy__sort { margin-left: 0; width: 100%; }
  .twy-byy__sort .twy-byy__select { width: 100%; }
  .twy-byy__search { width: 100%; flex: 1 1 100%; }
  .twy-byy__search-wrap { width: 100%; }
  .twy-byy__search-input { width: 100%; }
}
/* BYY card — mirrors .twy-card archive style, adapted for dark section. */
.twy-byy__pcard {
  display: block;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--cream);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: transform 0.15s var(--ease-out);
}
.twy-byy__pcard:hover { transform: translateY(-2px); }

.twy-byy__pcard-frame {
  display: block;
  position: relative;
  aspect-ratio: 1.1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(243,241,232,0.04);
  transition: box-shadow 0.2s var(--ease-out);
}
.twy-byy__pcard.is-selected .twy-byy__pcard-frame {
  box-shadow: 0 0 0 3px var(--clay);
}
.twy-byy__pcard-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.twy-byy__pcard:hover .twy-byy__pcard-frame > img { transform: scale(1.04); }

/* Quick look — small pill at top-left of the card frame. Sits opposite the
   SPECIAL/SALE badge (top-right) and clear of the bottom info-pill row.
   Sits inside the parent <button> as role=button + tabindex=0 because
   nesting <button>s is invalid HTML; click is captured at document level
   so the parent card's Pick handler never fires for chip clicks. */
.twy-byy__pcard-preview {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  background: rgba(20, 23, 15, 0.78);
  color: #fff;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1;
  transform: none;
  transition: background 0.18s var(--ease-out),
              transform 0.18s var(--ease-out);
  z-index: 3;
}
.twy-byy__pcard-preview svg {
  width: 11px;
  height: 11px;
}
.twy-byy__pcard-preview:hover,
.twy-byy__pcard-preview:focus-visible {
  background: var(--clay, #93db4c);
  transform: translateY(-1px);
}
.twy-byy__pcard-preview:focus-visible {
  outline: 2px solid var(--clay, #93db4c);
  outline-offset: 2px;
}

/* SPECIAL badge (top-right) */
.twy-byy__pcard-badge {
  position: absolute;
  top: 12px; right: 12px;
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Sage-green pistachio chips, bottom of image */
.twy-byy__pcard-chips {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.twy-byy__pcard-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(220, 242, 215, 0.92);
  color: var(--sage-deep);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.twy-byy__pcard-chip--icon {
  width: 26px;
  height: 26px;
  padding: 0;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}
.twy-byy__pcard-chip--icon svg { display: block; }

/* Body */
.twy-byy__pcard-body {
  display: block;
  padding: 18px 2px 4px;
}
.twy-byy__pcard-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.twy-byy__pcard-name {
  display: block;
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.2;
}
.twy-byy__pcard-dims {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(243,241,232,0.5);
  white-space: nowrap;
  padding-top: 2px;
}
.twy-byy__pcard-desc {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(243,241,232,0.6);
  font-weight: 500;
}

/* Footer row: prices on the left, pick affordance on the right. */
.twy-byy__pcard-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.twy-byy__pcard-prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
  min-width: 0;
}
.twy-byy__pcard-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243,241,232,0.5);
}
.twy-byy__pcard-was {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--clay);
  text-transform: uppercase;
}
.twy-byy__pcard-now {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sage);
  text-transform: uppercase;
}

/* Bottom-right pick affordance: sage + when unselected, clay check when selected. */
.twy-byy__pcard-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--ink);
  flex-shrink: 0;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out), color 0.2s;
}
.twy-byy__pcard:hover .twy-byy__pcard-pick {
  background: var(--sage-2);
  transform: scale(1.08);
}
.twy-byy__pcard-pick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.twy-byy__pcard-pick-icon--check { display: none; }
.twy-byy__pcard.is-selected .twy-byy__pcard-pick {
  background: var(--clay);
  color: #fff;
}
.twy-byy__pcard.is-selected .twy-byy__pcard-pick-icon--plus { display: none; }
.twy-byy__pcard.is-selected .twy-byy__pcard-pick-icon--check { display: inline-flex; }

.twy-byy__summary {
  margin-top: 44px;
  background: rgba(243,241,232,0.05);
  border: 1px solid rgba(243,241,232,0.12);
  border-radius: 12px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 28px;
  align-items: center;
}
.twy-byy__picks { display: flex; gap: 20px; flex-wrap: wrap; }
.twy-byy__pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.twy-byy__pick > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.twy-byy__pick-thumb {
  display: block;
  width: 40px; height: 40px; border-radius: 6px;
  background: rgba(243,241,232,0.08);
  overflow: hidden; flex-shrink: 0;
}
.twy-byy__pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.twy-byy__pick-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243,241,232,0.4);
  margin-bottom: 2px;
}
.twy-byy__pick-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(243,241,232,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.twy-byy__pick.is-picked .twy-byy__pick-name { color: var(--cream); }

/* Payment plan toggle — sits above the totals in the BYY summary, applies
   to all 3 cart lines (and the optional heat-pump line) on submit. Sage on
   ink, mirroring the dark summary card the rest of the BYY footer uses. */
.twy-byy__payment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 280px;
  margin-bottom: 4px;
}
.twy-byy__pay {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(243, 241, 232, 0.06);
  color: rgba(243, 241, 232, 0.78);
  border: 1px solid rgba(243, 241, 232, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out),
              color 0.18s var(--ease-out);
}
.twy-byy__pay:hover {
  border-color: rgba(243, 241, 232, 0.28);
  color: var(--cream);
}
.twy-byy__pay.is-active {
  background: rgba(243, 241, 232, 0.12);
  border-color: var(--cream);
  color: var(--cream);
}
.twy-byy__pay-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 2px;
}
.twy-byy__pay-note {
  display: block;
  font-size: 11px;
  color: rgba(243, 241, 232, 0.55);
  line-height: 1.4;
}
.twy-byy__pay.is-active .twy-byy__pay-note { color: rgba(243, 241, 232, 0.78); }
@media (max-width: 720px) {
  .twy-byy__payment { min-width: 0; }
}

.twy-byy__totals { text-align: right; min-width: 160px; }
.twy-byy__sub-price { font-size: 12px; color: rgba(243,241,232,0.55); }
.twy-byy__sub-price.is-struck { text-decoration: line-through; }
.twy-byy__save {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 700;
  margin-top: 2px;
  display: none;
}
.twy-byy.all-picked .twy-byy__save,
.twy-byy.bundle-eligible .twy-byy__save { display: block; }
.twy-byy__total {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin-top: 4px;
  color: var(--cream);
}

.twy-byy__cta {
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: rgba(243,241,232,0.1);
  color: rgba(243,241,232,0.35);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: not-allowed;
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
}
.twy-byy.all-picked .twy-byy__cta,
.twy-byy.bundle-eligible .twy-byy__cta {
  background: var(--clay);
  color: #fff;
  cursor: pointer;
}
.twy-byy.all-picked .twy-byy__cta:hover,
.twy-byy.bundle-eligible .twy-byy__cta:hover { background: var(--clay-deep); transform: translateY(-1px); }

.twy-byy__footline {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243,241,232,0.4);
  text-align: center;
}

@media (max-width: 900px) {
  .twy-byy__grid { grid-template-columns: 1fr; }
  .twy-byy__summary { grid-template-columns: 1fr; text-align: left; }
  .twy-byy__totals { text-align: left; }
}

/* ============================================
   SCIENCE SECTION
   ============================================ */
.twy-science { background: #14160F; color: var(--cream); padding: 96px 0; }
.twy-science__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 64px;
}
.twy-science__h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  margin-top: 12px;
  color: var(--cream);
  line-height: 1;
}
.twy-science__intro {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(243,241,232,0.7);
  max-width: 460px;
  justify-self: end;
}
.twy-science__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.twy-science__item { border-top: 1px solid rgba(243,241,232,0.15); padding-top: 32px; }
.twy-science__num {
  font-family: var(--font-display);
  font-size: 76px;
  line-height: 1;
  color: var(--sage);
  font-style: italic;
}
.twy-science__label { margin-top: 20px; font-size: 16px; line-height: 1.5; color: var(--cream); }
.twy-science__src { margin-top: 20px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }

@media (max-width: 900px) {
  .twy-science__header { grid-template-columns: 1fr; gap: 32px; }
  .twy-science__intro { justify-self: start; }
  .twy-science__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   REVIEWS STRIP
   ============================================ */
.twy-reviews { background: var(--sage); padding: 100px 0; }
.twy-reviews__wrap { text-align: center; max-width: 780px; margin: 0 auto; }
.twy-reviews__top { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; }
.twy-reviews__stars { display: inline-flex; gap: 2px; color: var(--clay-deep); line-height: 0; }
.twy-reviews__stars svg { width: 18px; height: 18px; }
.twy-reviews__avg { font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.twy-reviews__count { font-size: 13px; color: var(--ink-3); }
.twy-reviews__quote {
  margin-top: 36px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.25;
  font-style: italic;
  color: var(--ink);
}
.twy-reviews__meta { margin-top: 24px; font-size: 13px; color: var(--ink-3); }
.twy-reviews__dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.twy-reviews__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(20,23,15,0.25);
  border: none; cursor: pointer;
  transition: all 0.3s;
}
.twy-reviews__dot.is-active { width: 24px; background: var(--ink); }

/* ============================================
   FOOTER
   ============================================ */
.twy-footer {
  background: #0d0f0a;
  color: #d9d6c4;
  padding: 80px 0 40px;
}
.twy-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(243, 241, 232, 0.1);
}
.twy-footer__logo img { height: 48px; width: auto; }
.twy-footer__tagline {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 340px;
  color: #b8b5a3;
}
.twy-footer__newsletter { margin-top: 18px; }
.twy-footer__colkey {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8778;
  margin-bottom: 10px;
}
.twy-footer__newsletter-row { display: flex; gap: 8px; }
.twy-footer__input {
  flex: 1;
  height: 36px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid rgba(243, 241, 232, 0.2);
  border-radius: 999px;
  color: var(--cream);
  font-size: 13px;
}
.twy-footer__input::placeholder { color: rgba(243,241,232,0.5); }
.twy-footer__social { margin-top: 18px; }
.twy-footer__social-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row !important; gap: 8px; }
.twy-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(243, 241, 232, 0.2);
  color: #d9d6c4;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.twy-footer__social-link:hover,
.twy-footer__social-link:focus-visible {
  color: var(--cream);
  border-color: rgba(243, 241, 232, 0.5);
  background: rgba(243, 241, 232, 0.06);
  transform: translateY(-1px);
  outline: none;
}
.twy-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.twy-footer ul a { font-size: 14px; color: #d9d6c4; }
.twy-footer ul a:hover { color: var(--cream); }
.twy-footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 32px;
  font-size: 12px;
  color: #8a8778;
  flex-wrap: wrap;
  gap: 16px;
}
.twy-footer__bottom a:hover { color: var(--cream); }
.twy-footer__legal { display: flex; gap: 24px; }

@media (max-width: 900px) {
  .twy-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .twy-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   CATEGORY / ARCHIVE
   ============================================ */
.twy-archive-hero {
  position: relative;
  padding: 80px 0 56px;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
}
/* Header + topbar overlay this hero on product archives — pad so the
   breadcrumb/eyebrow aren't hidden under the ~104px (36 topbar + 68 header). */
body.twy-archive-overlay .twy-archive-hero { padding-top: 160px; }
.twy-archive-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  opacity: 0.5;
}
.twy-archive-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,23,15,0.4), rgba(20,23,15,0.85));
}
.twy-archive-hero__wrap { position: relative; }
.twy-archive-hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}
.twy-archive-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.4vw, 84px);
  margin-top: 12px;
  line-height: 0.98;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -0.02em;
}
.twy-archive-hero__blurb {
  margin-top: 18px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(243,241,232,0.8);
}
/* --- Breadcrumb inside the hero --- */
.twy-archive-breadcrumb {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 241, 232, 0.72);
}
.twy-archive-breadcrumb a {
  color: inherit;
  transition: color 0.15s;
}
.twy-archive-breadcrumb a:hover { color: var(--sage); }
.twy-archive-breadcrumb .sep {
  display: inline-block;
  margin: 0 10px;
  opacity: 0.5;
}
.twy-archive-breadcrumb__inner { display: inline-flex; align-items: center; flex-wrap: wrap; }

/* --- Warranty terms asterisk ----------------------------------------
   Tiny superscript "*" rendered next to any warranty/guarantee mention,
   linking to /terms. Inherits colour from the surrounding text so it
   blends into perk pills, tile labels, accordion headings, etc. */
.twy-warranty-tos {
  display: inline-block;
  margin-left: 1px;
  font-size: 0.78em;
  line-height: 0;
  vertical-align: super;
  color: inherit;
  opacity: 0.65;
  text-decoration: none;
  transition: opacity 0.15s;
}
.twy-warranty-tos:hover,
.twy-warranty-tos:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

/* --- "Included free" compact reassurance strip ------------------------
   Slim sibling of the PDP version (.twy-included-free). Used on the cart
   page, the checkout page, and inside the mini-cart drawer. Same icon
   language as PDP, but no editorial headline, no warranty modal, no
   "what's the catch" footnote — pure reassurance at the conversion moment.

   Two variants: --cart (6-tile horizontal strip with header) and --drawer
   (4-tile 2×2 grid, no header). The partial picks tiles + the modifier
   class; the rest is shared. */
.twy-incfree-compact {
  /* Pure-white card with a mid-grey hairline border + rounded corners,
     per the 2026-05-02 design tweak. Literal hex values (not --paper /
     --line) because --paper is a slight cream and --line is translucent
     ink — neither matches the requested look. */
  background: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 20px;
  padding: 24px 0;
  margin-top: 30px;
}
.twy-incfree-compact__header {
  max-width: 1440px;
  margin: 0 auto 16px;
  padding: 0 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.twy-incfree-compact__eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.twy-incfree-compact__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 18px;
  color: var(--ink);
  font-style: italic;
}
.twy-incfree-compact__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0 24px;
  max-width: 1440px;
  display: grid;
  gap: 12px;
}
.twy-incfree-compact--cart .twy-incfree-compact__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.twy-incfree-compact__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 14px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}
.twy-incfree-compact__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  margin-bottom: 2px;
}
.twy-incfree-compact__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.twy-incfree-compact__note {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 500;
}

/* --- Cart variant — collapse to 3-up then 2-up at narrower widths --- */
@media (max-width: 1024px) {
  .twy-incfree-compact--cart .twy-incfree-compact__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .twy-incfree-compact--cart .twy-incfree-compact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .twy-incfree-compact__title { font-size: 16px; }
}

/* --- Summary variant — condensed single-column list inside the checkout
   order-summary card. No card chrome of its own; sits under the summary
   items as a value-reassurance recap at the commit moment. --- */
.twy-incfree-compact--summary {
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin: 22px 0 0;
  padding: 20px 0 0;
}
.twy-incfree-compact--summary .twy-incfree-compact__header {
  max-width: none;
  margin: 0 0 14px;
  padding: 0;
}
.twy-incfree-compact--summary .twy-incfree-compact__eyebrow { color: var(--sage-deep, #ff914d); }
.twy-incfree-compact--summary .twy-incfree-compact__grid {
  max-width: none;
  padding: 0;
  grid-template-columns: 1fr;
  gap: 11px;
}
.twy-incfree-compact--summary .twy-incfree-compact__cell {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 11px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.twy-incfree-compact--summary .twy-incfree-compact__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0;
  color: var(--sage-deep, #ff914d);
}
.twy-incfree-compact--summary .twy-incfree-compact__label {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.twy-incfree-compact--summary .twy-incfree-compact__note {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--stone-2);
  white-space: nowrap;
}

/* --- Drawer variant — 2×3 grid (six tiles), no header ---
   All six tiles render here even though space is tight — showing only a
   subset makes customers think the omitted items aren't included
   (caught in customer-perspective review 2026-05-02).

   Resets the white-card look (background, full border, radius, margin)
   inherited from the base. Vertical padding only — horizontal padding is
   inherited from `.twy-drawer__body` (28px) so the strip lines up flush
   with the cart items above. No `border-top`: the last cart item's
   `border-bottom` already provides the separator (avoids the doubled
   divider caught 2026-05-02). */
.twy-incfree-compact--drawer {
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-top: 0;
}
.twy-incfree-compact--drawer .twy-incfree-compact__grid {
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.twy-incfree-compact--drawer .twy-incfree-compact__cell {
  padding: 10px 6px;
  border-radius: 10px;
  gap: 2px;
}
.twy-incfree-compact--drawer .twy-incfree-compact__icon {
  width: 24px;
  height: 24px;
}
.twy-incfree-compact--drawer .twy-incfree-compact__label {
  font-size: 11.5px;
  line-height: 1.2;
}
.twy-incfree-compact--drawer .twy-incfree-compact__note {
  font-size: 9.5px;
}

/* --- Refurbished discovery band --------------------------------------
   Renders only on the `hot-tubs` archive (NOT on the refurbished archive
   itself, NOT on the shop root). Sits between the hero and the filter bar.
   Cream background + clay accent so it reads as a complementary value-tier
   strip without competing with the main hero or product grid for visual
   weight. */
.twy-refurb-band {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.twy-refurb-band__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 28px 24px;
}
.twy-refurb-band__copy { flex: 1; min-width: 0; }
.twy-refurb-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--clay-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.twy-refurb-band__title {
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.15;
  color: var(--ink);
  font-weight: 400;
}
.twy-refurb-band__title em { font-style: italic; color: var(--clay-deep); }
.twy-refurb-band__body {
  margin: 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
  max-width: 60ch;
}
.twy-refurb-band__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
  .twy-refurb-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
  }
  .twy-refurb-band__title { font-size: 22px; }
  .twy-refurb-band__cta {
    align-self: flex-start;
    height: 40px;
    justify-content: center;
    padding: 0 16px;
    font-size: 12px;
  }
}

/* HOMEPAGE — knowledge tiles
   Editorial signpost band that surfaces /sauna-science, /heat-pumps,
   /science and the running-cost lead magnet. Same rhythm as the category
   blocks but the tiles are static destinations rather than products —
   no images, no prices, just an eyebrow + headline. Fourth tile uses a
   clay accent so the lead magnet reads as a CTA-in-a-tile. */
.twy-home-knowledge {
  background: var(--paper);
  padding: 80px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.twy-home-knowledge__header {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.twy-home-knowledge__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 14px;
}
.twy-home-knowledge__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  color: var(--ink);
}
.twy-home-knowledge__title em {
  font-style: italic;
  color: var(--sage-deep);
}
.twy-home-knowledge__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.twy-home-knowledge__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 24px;
  min-height: 220px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.twy-home-knowledge__tile:hover,
.twy-home-knowledge__tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--ink);
  outline: none;
}
.twy-home-knowledge__tile-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.twy-home-knowledge__tile-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
}
.twy-home-knowledge__tile--cta {
  background: var(--cream-2);
  border-color: var(--clay-deep);
}
.twy-home-knowledge__tile--cta .twy-home-knowledge__tile-eyebrow {
  color: var(--clay-deep);
}
.twy-home-knowledge__tile-arrow {
  position: absolute;
  right: 24px;
  bottom: 20px;
  font-size: 22px;
  line-height: 1;
  color: var(--clay-deep);
}
@media (max-width: 1024px) {
  .twy-home-knowledge__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .twy-home-knowledge { padding: 56px 0; }
  .twy-home-knowledge__grid { grid-template-columns: 1fr; gap: 12px; }
  .twy-home-knowledge__tile { min-height: 0; padding: 22px 20px; }
}

/* --- Filter bar shell --- */
.twy-archive-filter {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 67px;
  z-index: 10;
}
.twy-archive-filter__form {
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.twy-archive-filter__groups {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}
.twy-archive-filter__mobile-toggle {
  display: none;
}
.twy-archive-filter__mobile-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--clay);
  color: var(--cream);
  font-size: 10.5px;
  font-weight: 700;
}

/* Sale toggle (inline pill, not a popover) */
.twy-archive-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.twy-archive-filter__toggle:hover { border-color: var(--ink); transform: translateY(-1px); }
.twy-archive-filter__toggle.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.twy-archive-filter__toggle-dot { fill: var(--clay); flex-shrink: 0; }
.twy-archive-filter__toggle-dot--instock { fill: var(--sage-deep); }
.twy-archive-filter__toggle.is-active .twy-archive-filter__toggle-dot { fill: var(--cream); }

/* Chips list — overflow visible so tooltips can escape; add the `--scroll`
   modifier in PHP if a particular popover has so many chips it needs it. */
.twy-filter-pop__chips { overflow: visible; padding-right: 2px; }
.twy-filter-pop__chips--scroll { max-height: 280px; overflow-y: auto; }

/* Chips with an icon prefix */
.twy-archive-filter__chip--icon {
  gap: 7px;
  padding-left: 10px;
}
.twy-chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}
.twy-archive-filter__chip.is-active .twy-chip-icon { opacity: 1; }

/* Tooltip — CSS-only, shown on hover or focus.
   Positioned BELOW the chip and anchored to its left edge so it always
   expands to the right (won't bleed past the popover's left edge). */
.twy-archive-filter__chip--tip { position: relative; overflow: visible; }
.twy-archive-filter__chip--tip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: 240px;
  max-width: min(260px, 80vw);
  padding: 10px 12px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 14px 32px -18px rgba(0,0,0,0.45);
  transform: translateY(-4px);
  transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
  z-index: 30;
}
.twy-archive-filter__chip--tip::before {
  content: "";
  position: absolute;
  left: 18px;
  top: calc(100% + 5px);
  width: 8px; height: 8px;
  background: var(--ink);
  transform: rotate(45deg) translateY(-4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
  z-index: 30;
}
.twy-archive-filter__chip--tip:hover::after,
.twy-archive-filter__chip--tip:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.twy-archive-filter__chip--tip:hover::before,
.twy-archive-filter__chip--tip:focus-visible::before {
  opacity: 1;
  transform: rotate(45deg) translateY(0);
}
@media (hover: none) {
  /* Touch devices: show tooltip only on keyboard focus (tap triggers the link) */
  .twy-archive-filter__chip--tip:hover::after,
  .twy-archive-filter__chip--tip:hover::before { opacity: 0; }
}

/* --- Popover disclosure trigger (uses <details>/<summary>) --- */
.twy-filter-pop { position: relative; display: inline-block; }
.twy-filter-pop > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  user-select: none;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.twy-filter-pop > summary::-webkit-details-marker { display: none; }
.twy-filter-pop > summary:hover { border-color: var(--ink); transform: translateY(-1px); }
.twy-filter-pop[open] > summary {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  transform: none;
}
.twy-filter-pop.is-active > summary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}
.twy-filter-pop__label { white-space: nowrap; }
.twy-filter-pop__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--clay);
  color: var(--cream);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.twy-filter-pop__summary {
  color: inherit;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.85;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.twy-filter-pop__chev {
  transition: transform 0.2s var(--ease-out);
  margin-left: 2px;
}
.twy-filter-pop[open] .twy-filter-pop__chev { transform: rotate(180deg); }

/* Panel — absolutely positioned under the trigger */
.twy-filter-pop__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  min-width: 260px;
  max-width: min(420px, 90vw);
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(20, 23, 15, 0.25),
              0 2px 6px -2px rgba(20, 23, 15, 0.08);
  animation: twyPopIn 0.18s var(--ease-out) both;
}
.twy-filter-pop--price .twy-filter-pop__panel { min-width: 320px; padding: 18px 20px 20px; }
.twy-filter-pop__chips { display: flex; flex-wrap: wrap; gap: 6px; }

@keyframes twyPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Chip inside a popover */
.twy-archive-filter__chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.twy-archive-filter__chip:hover { border-color: var(--ink); }
.twy-archive-filter__chip.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.twy-archive-filter__range {
  display: block;
  width: 100%;
  max-width: 100%;
}
.twy-archive-filter__range-values {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 10px;
}
.twy-archive-filter__range-values .sep { color: var(--stone-2); font-weight: 400; }
.twy-archive-filter__range-track {
  position: relative;
  height: 22px;
}
.twy-archive-filter__range-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px; margin-top: -1.5px;
  background: var(--line-strong);
  border-radius: 999px;
}
.twy-archive-filter__range-fill {
  position: absolute;
  top: 50%;
  height: 3px; margin-top: -1.5px;
  background: var(--ink);
  border-radius: 999px;
  pointer-events: none;
}
.twy-archive-filter__range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  height: 22px;
  background: transparent;
  pointer-events: none;
}
.twy-archive-filter__range input[type="range"]::-webkit-slider-runnable-track { height: 22px; background: transparent; }
.twy-archive-filter__range input[type="range"]::-moz-range-track { height: 22px; background: transparent; }
.twy-archive-filter__range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  height: 18px; width: 18px;
  border-radius: 999px;
  background: var(--clay);
  border: 2px solid var(--cream);
  box-shadow: 0 2px 6px -2px rgba(20, 23, 15, 0.4);
  cursor: pointer;
  transition: transform 0.15s var(--ease-out);
}
.twy-archive-filter__range input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.08); }
.twy-archive-filter__range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  height: 18px; width: 18px;
  border-radius: 999px;
  background: var(--clay);
  border: 2px solid var(--cream);
  box-shadow: 0 2px 6px -2px rgba(20, 23, 15, 0.4);
  cursor: pointer;
}
.twy-archive-filter__range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
.twy-archive-filter__range input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }

/* --- Right-side actions: reset + sort --- */
.twy-archive-filter__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.twy-archive-filter__reset {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stone-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.twy-archive-filter__reset:hover { color: var(--ink); }
.twy-archive-filter__sortwrap { display: inline-flex; align-items: center; }
.twy-archive-filter__sort {
  height: 38px;
  padding: 0 36px 0 16px;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2314170f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  color: var(--ink);
}
.twy-archive-filter__sort:hover { border-color: var(--ink); }
.twy-archive-filter__apply {
  height: 38px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Empty state */
.twy-archive-empty { background: var(--cream); padding: 80px 0 120px; }
.twy-archive-empty__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-2);
  margin-bottom: 12px;
}
.twy-archive-empty__title { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 14px; }
.twy-archive-empty__body { max-width: 520px; margin: 0 auto 28px; color: var(--ink-3); font-size: 15px; line-height: 1.6; }

/* --- Responsive --- */
@media (max-width: 960px) {
  .twy-archive-filter__form { gap: 12px; padding: 10px 20px; }
  .twy-archive-filter__actions { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  body.term-hot-tubs .twy-archive-hero {
    padding-top: 112px;
    padding-bottom: 38px;
  }
  body.twy-archive-overlay.term-hot-tubs .twy-archive-hero {
    padding-top: 128px;
  }
  body.term-hot-tubs .twy-archive-hero__img {
    object-fit: cover;
    object-position: center center;
  }
  .twy-archive-filter { position: static; }
  .twy-archive-filter__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 16px;
  }
  .twy-archive-filter__mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--cream);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .twy-archive-filter__mobile-toggle svg {
    transition: transform 0.2s var(--ease-out);
  }
  .twy-archive-filter__form.is-mobile-filters-open .twy-archive-filter__mobile-toggle svg {
    transform: rotate(180deg);
  }
  .twy-archive-filter__groups {
    display: none;
    grid-column: 1 / -1;
    gap: 6px;
    padding-top: 2px;
  }
  .twy-archive-filter__form.is-mobile-filters-open .twy-archive-filter__groups {
    display: flex;
  }
  .twy-archive-filter__actions {
    justify-self: end;
    gap: 10px;
  }
  .twy-archive-filter__reset {
    font-size: 10px;
  }
  .twy-archive-filter__sort {
    max-width: 150px;
    height: 38px;
    padding-left: 14px;
  }
  .twy-filter-pop > summary,
  .twy-archive-filter__toggle { height: 34px; font-size: 11px; padding: 0 12px; }
  .twy-filter-pop__panel {
    position: fixed;
    left: 16px; right: 16px;
    top: auto;
    bottom: 16px;
    max-width: none;
    animation: twyPopInMobile 0.22s var(--ease-out) both;
  }
  @keyframes twyPopInMobile {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

.twy-archive-grid {
  background: var(--cream);
  padding: 64px 0 96px;
}
.twy-archive-results {
  position: relative;
  transition: opacity 0.16s var(--ease-out);
}
.twy-archive-results.is-loading {
  pointer-events: none;
}
.twy-archive-results.is-loading .twy-archive-filter,
.twy-archive-results.is-loading .twy-archive-grid,
.twy-archive-results.is-loading .twy-archive-empty {
  opacity: 0.42;
  transition: opacity 0.16s var(--ease-out);
}
.twy-archive-loader {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 80;
  width: min(320px, calc(100vw - 40px));
  min-height: 230px;
  padding: 24px 26px 22px;
  border: 1px solid rgba(20, 22, 15, 0.14);
  border-radius: 8px;
  background: rgba(243, 241, 232, 0.96);
  color: var(--ink);
  box-shadow: 0 22px 70px rgba(20, 22, 15, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -44%);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.twy-archive-results.is-showing-loader .twy-archive-loader {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.twy-archive-loader__brand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-align: center;
  text-transform: uppercase;
  color: var(--stone-2);
}
.twy-archive-loader__ember {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 18px 0 16px;
}
.twy-archive-loader__vessel {
  position: relative;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(20, 22, 15, 0.62);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, rgba(226, 106, 58, 0.08), transparent 58%),
    var(--cream);
}
.twy-archive-loader__fill,
.twy-archive-loader__wave {
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: -12px;
  height: 122px;
  background: var(--clay);
  transform: translateY(82%);
  animation: twyArchiveEmberFill 2.5s var(--ease-out) infinite;
}
.twy-archive-loader__wave {
  top: -9px;
  bottom: auto;
  height: 18px;
  background: var(--clay-deep);
  border-radius: 50%;
  opacity: 0.55;
  transform: translateY(105px) rotate(-2deg);
  animation: twyArchiveEmberWave 2.5s var(--ease-out) infinite;
}
.twy-archive-loader__mark {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: rgba(20, 22, 15, 0.18);
}
.twy-archive-loader__text {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  text-align: center;
  color: var(--ink);
}
@keyframes twyArchiveEmberFill {
  0% { transform: translateY(86%); }
  58% { transform: translateY(12%); }
  100% { transform: translateY(86%); }
}
@keyframes twyArchiveEmberWave {
  0% { transform: translateY(105px) rotate(-3deg) scaleX(1.04); }
  58% { transform: translateY(15px) rotate(3deg) scaleX(1.14); }
  100% { transform: translateY(105px) rotate(-3deg) scaleX(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .twy-archive-loader,
  .twy-archive-loader__fill,
  .twy-archive-loader__wave {
    animation: none;
    transition: none;
  }
  .twy-archive-loader__fill,
  .twy-archive-loader__wave {
    transform: translateY(44px);
  }
}
.twy-archive-grid__inner {
  display: grid;
  /* minmax(0, 1fr) not 1fr — see .twy-card { min-width: 0 }. Belt-and-braces
   * at the track level so the archive grid can't be blown out by card content. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 64px;
}
@media (max-width: 960px) {
  .twy-archive-grid__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 48px; }
}
@media (max-width: 600px) {
  .twy-archive-grid__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}

/* Hot Tub Accessories — denser 4-up grid (small SKUs, larger range). */
body.twy-accessories-archive .twy-archive-grid__inner {
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  row-gap: 48px;
}
@media (max-width: 1100px) {
  body.twy-accessories-archive .twy-archive-grid__inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  body.twy-accessories-archive .twy-archive-grid__inner { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 36px; }
}
@media (max-width: 480px) {
  body.twy-accessories-archive .twy-archive-grid__inner { grid-template-columns: 1fr; row-gap: 32px; }
}

/* Infinite scroll: sentinel + load-more + status. Cream-on-cream archive. */
.twy-archive-infinite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  position: relative;
}
.twy-archive-infinite__sentinel {
  position: absolute;
  left: 0; right: 0; top: -240px;
  height: 1px;
  pointer-events: none;
}
.twy-archive-infinite__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(20,23,15,0.22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.twy-archive-infinite__btn:hover {
  background: rgba(20,23,15,0.06);
  border-color: rgba(20,23,15,0.45);
}
.twy-archive-infinite__btn:disabled {
  cursor: progress;
  opacity: 0.7;
}
.twy-archive-infinite__btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(20,23,15,0.2);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: twy-archive-spin 0.8s linear infinite;
}
.twy-archive-infinite.is-loading .twy-archive-infinite__btn-spinner { display: inline-block; }
.twy-archive-infinite__status {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: 0.02em;
  min-height: 18px;
}
@keyframes twy-archive-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .twy-archive-infinite__btn-spinner { animation: none; }
}

/* ============================================
   PDP
   ============================================ */
.twy-pdp {}
/* Heroband removed on hot-tub PDPs only — the configurator + heat-pump
   sections live in the right info column and the heroband was pushing them
   below the fold. Sauna and ice-bath PDPs (which render via the default
   single-product.php branch) still get the band as their decorative intro. */
.twy-pdp--hot-tubs .twy-pdp__heroband { display: none; }
.twy-pdp__body {
  padding-top: 32px;
  padding-bottom: 80px;
  position: relative;
  z-index: 2;
}
.twy-pdp__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 32px;
}
.twy-pdp__crumbs a, .twy-pdp__crumbs span { color: inherit; }
.twy-pdp__crumbs a:hover { color: var(--clay-deep); }
.twy-pdp__crumbs .sep { opacity: 0.45; }
.twy-pdp__crumbs .current { color: var(--ink); opacity: 0.6; }

.twy-pdp__main {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  /* `align-items: stretch` (the default) lets the gallery grid item match the
     info column's height so the sticky gallery-row has room to scroll inside
     it before unsticking at the bottom of the column. */
  align-items: stretch;
  /* min-width: 0 on the grid container itself prevents wide content (e.g. a
     long horizontal thumb track on mobile) from blowing out the viewport. */
  min-width: 0;
}
.twy-pdp__main > * { min-width: 0; }
.twy-pdp__gallery { min-width: 0; }
.twy-pdp__gallery-row {
  display: flex;
  gap: 16px;
  position: sticky;
  top: 100px;
  align-self: start;
  min-width: 0;
}
.twy-pdp__thumbs { display: flex; flex-direction: column; gap: 12px; width: 72px; }
.twy-pdp__thumb {
  width: 72px; height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: var(--cream-2);
  cursor: pointer;
}
.twy-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.twy-pdp__thumb.is-active { border-color: var(--ink); }
.twy-pdp__main-img-wrap {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-2);
  position: relative;
  /* No aspect-ratio — wrap adopts the active image's natural height so each
     shot is shown at its own ratio. The thumb column re-syncs via the
     ResizeObserver in pdp.js so the empty space below short images is gone. */
}
.twy-pdp__main-img {
  width: 100%;
  height: auto;
  display: none;
  /* Safety net for unusually tall (portrait) shots — keeps the sticky gallery
     in view. object-fit: contain prevents the cap from stretching the bitmap
     when it kicks in; for typical landscape shots the cap is never reached. */
  max-height: calc(100vh - 140px);
  object-fit: contain;
}
.twy-pdp__main-img.is-active { display: block; }

/* Product-video gallery slide — a <video> reusing the .twy-pdp__main-img
   show/hide contract, plus the play-badge overlay on its thumbnail. */
.twy-pdp__main-video { background: #000; max-height: calc(100vh - 140px); }
.twy-pdp__thumb--video { position: relative; }
.twy-pdp__thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(20, 23, 15, 0.34);
  pointer-events: none;
}
.twy-pdp__thumb-play svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }

.twy-pdp__info { position: relative; }
.twy-pdp__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.twy-pdp__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-2);
}
.twy-pdp__h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  margin-top: 10px;
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
/* Hot tub PDP tagline — body sans Inter, non-italic. Previously rendered
   as italic Fraunces (display serif) for a showroom feel; on close
   inspection across new + refurb PDPs the italic display treatment read
   as overwrought against the otherwise body-sans page (spec block,
   perks, sold panel are all body sans). The .twy-pdp__sub--refurb
   modifier was folded back into the base 2026-05-04 since both new and
   refurb want the same body-sans factual treatment now. */
.twy-pdp__sub {
  margin-top: 14px;
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 15px;
  font-style: normal;
  line-height: 1.5;
}
.twy-pdp__rating { margin-top: 20px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink); }
.twy-pdp__price-row { margin-top: 24px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.twy-pdp__price { font-family: var(--font-display); font-size: 40px; color: var(--ink); }
.twy-pdp__was { font-size: 16px; color: var(--stone-2); text-decoration: line-through; }
.twy-pdp__finance { margin-left: auto; font-size: 12px; color: var(--stone-2); }
.twy-pdp__desc { margin-top: 24px; font-size: 15px; line-height: 1.6; color: var(--ink-3); }

.twy-pdp__specrow {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.twy-pdp__spec { text-align: center; }
.twy-pdp__spec-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-2); }
.twy-pdp__spec-value { font-family: var(--font-display); font-size: 20px; margin-top: 2px; color: var(--ink); }

.twy-pdp__stock {
  margin-top: 24px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(226, 106, 58, 0.1);
  border: 1px solid rgba(226, 106, 58, 0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-3);
}
.twy-pdp__stock-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--clay);
  box-shadow: 0 0 0 5px rgba(226, 106, 58, 0.2);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.twy-pdp__stock strong { color: var(--clay-deep); }
.twy-pdp__stock-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  cursor: help;
  outline: none;
}
.twy-pdp__stock-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: rgba(226, 106, 58, 0.18);
  color: var(--clay-deep);
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s ease;
}
.twy-pdp__stock-info:hover .twy-pdp__stock-info-icon,
.twy-pdp__stock-info:focus-visible .twy-pdp__stock-info-icon {
  background: rgba(226, 106, 58, 0.32);
}
.twy-pdp__stock-info-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #14160F;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(20, 22, 15, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 5;
}
.twy-pdp__stock-info-tip::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #14160F;
}
.twy-pdp__stock-info:hover .twy-pdp__stock-info-tip,
.twy-pdp__stock-info:focus-visible .twy-pdp__stock-info-tip,
.twy-pdp__stock-info:focus-within .twy-pdp__stock-info-tip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (max-width: 480px) {
  .twy-pdp__stock-info-tip { max-width: 220px; left: auto; right: -8px; transform: none; }
  .twy-pdp__stock-info-tip::after { left: auto; right: 14px; transform: none; }
}

.twy-pdp__add {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.twy-pdp__qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper);
}
.twy-pdp__qty button {
  width: 48px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
}
.twy-pdp__qty input {
  width: 40px;
  height: 56px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.twy-pdp__qty input:focus { outline: none; }
.twy-pdp__addbtn { flex: 1; }

/* Variable-product add-to-cart — server-rendered as the same pill stepper
   + clay button as the simple-product branch (see
   twy_single_variation_add_to_cart_button in inc/woo-customizations.php).
   Only the row layout needs scoping — colour and shape come from
   .twy-pdp__qty + .btn.btn-primary.btn-lg already defined above. */
.twy-pdp-ht__variable .woocommerce-variation-add-to-cart {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}
.twy-pdp-ht__variable .woocommerce-variation-add-to-cart .twy-pdp__qty { margin: 0; }
.twy-pdp-ht__variable .single_add_to_cart_button [data-twy-addlabel-total] {
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.twy-pdp__perk-row {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 13px;
}
.twy-pdp__perk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.twy-pdp__perk svg { color: var(--sage-deep); flex-shrink: 0; }
.twy-pdp__perk strong { display: block; font-weight: 600; color: var(--ink); }
.twy-pdp__perk span { color: var(--stone-2); font-size: 11px; }

.twy-pdp__accords { margin-top: 32px; border-top: 1px solid var(--line); }
.twy-pdp__accord { border-bottom: 1px solid var(--line); }
.twy-pdp__accord-btn {
  width: 100%;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.twy-pdp__accord-icon { transition: transform 0.2s; }
.twy-pdp__accord.is-open .twy-pdp__accord-icon { transform: rotate(45deg); }
.twy-pdp__accord-body {
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-3);
  display: none;
}
.twy-pdp__accord.is-open .twy-pdp__accord-body { display: block; animation: fadeIn 0.2s; }

@media (max-width: 900px) {
  .twy-pdp__main { grid-template-columns: 1fr; gap: 40px; }
  /* Sticky gallery makes no sense when the columns stack — gallery sits
     above the info, so disable sticky at the mobile breakpoint. */
  .twy-pdp__gallery-row { position: static; top: auto; flex-direction: column-reverse; }
  .twy-pdp__specrow { grid-template-columns: repeat(2, 1fr); }
  .twy-pdp__thumbs { flex-direction: row; width: 100%; overflow-x: auto; }
  .twy-pdp__perk-row { grid-template-columns: 1fr; }
  /* Mobile wrap is content-driven (matches desktop) so each image renders at
     its natural aspect — no forced square, no empty space below short images. */
  .twy-pdp__main-img-wrap {
    flex: 0 1 auto;
  }
  /* The vertical thumb-slider's JS sync writes inline height on the col;
     wipe it on mobile (where the col is horizontal) to kill the empty-space
     gap below the thumb strip. */
  .twy-pdp-ht__thumbs-col { height: auto !important; }
}

/* ---- Phone-tier polish (≤480px) ---- */
@media (max-width: 480px) {
  .twy-pdp__body { padding-top: 20px; padding-bottom: 56px; }
  .twy-pdp__crumbs { font-size: 10px; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
  .twy-pdp__main { gap: 28px; }
  .twy-pdp__h1 { font-size: 28px; }
  .twy-pdp__sub { font-size: 14px; }
  .twy-pdp__price { font-size: 32px; }
  .twy-pdp__was { font-size: 14px; }
  .twy-pdp__finance { margin-left: 0; flex-basis: 100%; }
  .twy-pdp__perk { padding: 14px; }
  .twy-pdp-ht__perks { gap: 8px; }
  /* Tighten the configurator + heat-pump card padding so they don't feel
     boxy on small phones. */
  .twy-pdp-cfg { margin-top: 20px; }
  .twy-pdp-ht__heatpumps { margin: 18px 0; }
  /* Techspec — keep filter card readable when there's only ~280px of width. */
  .twy-pdp-ht__filter-card { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .twy-pdp-ht__filter-card-thumbs svg { width: 30px; height: 50px; }
  .twy-pdp-ht__filter-card-sku { font-size: 18px; }
  /* Section spacing on phones — less breathing room, more density. */
  .twy-pdp-ht__signature { padding: 40px 0; margin-top: 40px; }
  .twy-pdp-ht__editorial { padding: 40px 0; }
  .twy-pdp-ht__editorial-title { font-size: 28px; }
  .twy-pdp-ht__byy { padding: 56px 0; }
  .twy-pdp-ht__byy-title { font-size: 28px; }
  .twy-pdp-ht__moreinfo { padding: 40px 0; }
}

/* Sticky mobile buy-bar */
.twy-pdp__sticky {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  display: none;
  align-items: center;
  gap: 12px;
  z-index: 50;
  box-shadow: 0 -8px 30px -10px rgba(0,0,0,0.15);
}
.twy-pdp__sticky-thumb { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--cream-2); }
.twy-pdp__sticky-thumb img { width: 100%; height: 100%; object-fit: cover; }
.twy-pdp__sticky-info { flex: 1; min-width: 0; }
.twy-pdp__sticky-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.twy-pdp__sticky-price { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 768px) {
  body.twy-pdp-sticky-on .twy-pdp__sticky { display: flex; }
}

/* ============================================
   CART DRAWER
   ============================================ */
.twy-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20,23,15,0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.twy-drawer-scrim.is-open { opacity: 1; pointer-events: all; }

.twy-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 100vw);
  background: var(--cream);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
  display: flex;
  flex-direction: column;
  box-shadow: -30px 0 60px -20px rgba(0,0,0,0.3);
}
.twy-drawer.is-open { transform: translateX(0); }
/* Intermediate wrapper between `.twy-drawer` and the mini-cart fragments
   (head / body / foot) — without making it a flex column itself, the
   body's `flex: 1; overflow-y: auto` has no effect because head/body/foot
   become children of a plain block container, head + body + foot stack
   at intrinsic height, and the Proceed-to-checkout button drops below
   the viewport on long carts. */
.twy-drawer__mount {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.twy-drawer__head {
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0; /* don't let the head squeeze when the body overflows */
}
.twy-drawer__title { font-family: var(--font-display); font-size: 28px; color: var(--ink); }
.twy-drawer__meta { font-size: 12px; color: var(--stone-2); margin-top: 2px; }
/* Scoped to the drawer head so the empty-state "Continue browsing"
   button — which also carries `.twy-drawer__close` so the JS handler
   closes the drawer on click — isn't squeezed into a 40px icon pill.
   The empty-state button keeps its default `.btn .btn-dark` styling. */
.twy-drawer__head .twy-drawer__close {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  background: none; cursor: pointer;
}
/* `min-height: 0` is the critical bit — without it the body's intrinsic
   height grows to fit content and `overflow-y: auto` never kicks in,
   which pushes the foot (with the Proceed-to-checkout button) below the
   viewport when the cart has multiple lines. Caught 2026-05-02. */
.twy-drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Stop scroll-chaining to the page behind when the user hits the
     top/bottom of the cart list (notable on trackpads + iOS). */
  overscroll-behavior: contain;
  padding: 8px 28px;
}
/* Body scroll lock while the cart drawer is open — mirrors the auth
   modal pattern (body.twy-auth-open). JS toggles this class in
   openCartDrawer / closeCartDrawer. */
body.twy-cart-drawer-open {
  overflow: hidden;
}
/* Loading state shown while the mini-cart HTML is being fetched on first
   open (lazy-load path). Replaced wholesale by the AJAX response. */
.twy-drawer__loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.twy-drawer__spinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(20, 23, 15, 0.18);
  border-top-color: var(--ink);
  animation: twy-drawer-spin 0.7s linear infinite;
}
.twy-drawer__empty { text-align: center; padding: 80px 20px; color: var(--stone-2); }
.twy-drawer__empty-icon { opacity: 0.3; margin: 0 auto 16px; }
.twy-drawer__empty-h { font-family: var(--font-display); font-size: 22px; color: var(--ink); }

.twy-drawer__item {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: opacity 0.18s var(--ease-out);
}
/* Loading state — set by app.js cartLineUpdate() while the AJAX is
   in flight so the user gets immediate visual feedback (line fades,
   spinner sits over it). The class is only ever attached briefly:
   the drawer markup is replaced wholesale on AJAX success, so the
   class only persists if the call errors. */
.twy-drawer__item.is-updating {
  opacity: 0.45;
  pointer-events: none;
}
.twy-drawer__item.is-updating::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 999px;
  border: 2px solid rgba(20, 23, 15, 0.18);
  border-top-color: var(--ink);
  animation: twy-drawer-spin 0.7s linear infinite;
  pointer-events: none;
}
@keyframes twy-drawer-spin {
  to { transform: rotate(360deg); }
}
.twy-drawer__item-thumb {
  width: 100px; height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream-2);
  flex-shrink: 0;
}
.twy-drawer__item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.twy-drawer__item-body { flex: 1; }
.twy-drawer__item-top { display: flex; justify-content: space-between; gap: 12px; }
.twy-drawer__item-bundle {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 700;
  margin-bottom: 4px;
}
.twy-drawer__item-name { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.twy-drawer__item-sub { font-size: 12px; color: var(--stone-2); font-style: italic; }
.twy-drawer__item-remove { font-size: 11px; color: var(--stone-2); text-decoration: underline; background: none; border: none; cursor: pointer; }
/* "Almost gone" — synthetic stock = 1, see inc/synthetic-stock.php */
.twy-drawer__item-warn {
  display: flex; gap: 8px; align-items: center;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clay-deep, #b04a1f);
}
.twy-drawer__item-warn-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--clay, #93db4c);
  box-shadow: 0 0 0 4px rgba(226,106,58,0.18);
  animation: twy-drawer-warn-pulse 2s infinite;
}
@keyframes twy-drawer-warn-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(226,106,58,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(226,106,58,0); }
}
.twy-drawer__item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.twy-drawer__qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
}
.twy-drawer__qty button {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
}
.twy-drawer__qty span {
  min-width: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.twy-drawer__item-total { font-family: var(--font-display); font-size: 18px; color: var(--ink); text-align: right; }
.twy-drawer__item-today { display: inline-flex; align-items: baseline; gap: 6px; }
.twy-drawer__item-today-tag {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay-deep);
}
.twy-drawer__item-balance {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--stone-2);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.twy-drawer__bundle-fee {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin: 12px 0;
  border-radius: 12px;
  background: rgba(212,224,168,0.35);
  border: 1px dashed var(--sage-deep);
}
.twy-drawer__bundle-check {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--sage-deep);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.twy-drawer__bundle-title { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--sage-deep); }
.twy-drawer__bundle-sub { font-size: 12px; color: var(--stone-2); margin-top: 2px; }
.twy-drawer__bundle-amount { font-family: var(--font-display); font-size: 18px; color: var(--sage-deep); }

.twy-drawer__foot {
  padding: 24px 28px;
  /* On iOS the home indicator overlaps the bottom edge — keep the
     Proceed-to-checkout button clear of it without changing desktop
     spacing. */
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0; /* keep the totals + Proceed-to-checkout button always visible */
}
.twy-drawer__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--stone-2);
  margin-bottom: 6px;
}
.twy-drawer__row--clay { color: var(--clay); font-weight: 600; }
.twy-drawer__row--sage { color: var(--sage-deep); font-weight: 500; }
/* Build Your Yard bundle saving deferred to balance — clay-tinted card so
   the customer sees the saving even though it isn't on today's total.
   Child selectors use `>` (direct child) so they only target the row's
   own two <span> children — NOT the nested .woocommerce-Price-amount /
   .woocommerce-Price-currencySymbol spans inside wc_price(). Without `>`
   the flex-column rule on first-child cascades into the nested wc_price
   spans and breaks "−£250.00" into three stacked lines. */
.twy-drawer__row--saving {
  align-items: flex-start;
  background: rgba(226, 106, 58, 0.06);
  border: 1px solid rgba(226, 106, 58, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 4px 0 8px;
  color: var(--clay-deep, #bde858);
  font-weight: 600;
}
.twy-drawer__row--saving > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.twy-drawer__row--saving small {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--stone-2);
  text-transform: none;
}
.twy-drawer__row--saving > span:last-child {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Checkout review-order tfoot — bundle saving row injected by
   `woocommerce_review_order_before_order_total`. Clay accent matches the
   cart + drawer treatment. */
.shop_table tr.twy-bundle-saving-row > th,
.shop_table tr.twy-bundle-saving-row > td {
  background: rgba(226, 106, 58, 0.06);
  color: var(--clay-deep, #bde858);
  font-weight: 600;
}
.shop_table tr.twy-bundle-saving-row > th { padding-top: 14px; padding-bottom: 14px; }
.shop_table tr.twy-bundle-saving-row > td { padding-top: 14px; padding-bottom: 14px; text-align: right; }
.twy-bundle-saving-row__sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--stone-2);
  margin-top: 2px;
  text-transform: none;
}
.twy-bundle-saving-row__amount {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
}
.twy-drawer__total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.twy-drawer__checkout { width: 100%; margin-top: 20px; }
.twy-drawer__finance { margin-top: 12px; font-size: 11px; text-align: center; color: var(--stone-2); }

/* Flash toast — slides down from above, slides up to dismiss. */
@keyframes twyToastPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 224, 168, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 224, 168, 0); }
}

.twy-toast {
  position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(-160%);
  background: var(--ink);
  color: var(--cream);
  padding: 20px 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  max-width: min(92vw, 600px);
  line-height: 1.35;
  z-index: 1100;
  border: 1px solid rgba(212, 224, 168, 0.28);
  box-shadow:
    0 28px 60px -12px rgba(0, 0, 0, 0.55),
    0 10px 24px -8px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(212, 224, 168, 0.08) inset;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease-out), opacity 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.twy-toast::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--sage);
  flex-shrink: 0;
  animation: twyToastPulse 1.6s ease-out infinite;
}
.twy-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

@media (max-width: 600px) {
  .twy-toast {
    top: 88px;
    padding: 16px 22px;
    font-size: 12px;
  }
}

/* ============================================
   CHECKOUT STYLING
   ============================================ */
body.woocommerce-checkout,
body.woocommerce-order-received { background: var(--paper); }
body.woocommerce-checkout .site-main,
body.woocommerce-order-received .site-main { padding: 48px 0 80px; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(226,106,58,0.15);
}
.woocommerce form .form-row textarea { height: auto; padding: 14px 16px; min-height: 120px; }

/* Checkout form fields sit in a white card (see .twy-checkout__form-card)
   so they need a touch more presence than the page default — a stronger
   border + faint inset depth so they read as real, tactile inputs rather
   than flat outlines. Focus still wins (declared after). */
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select {
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 2px rgba(20,22,15,0.04);
}
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(226,106,58,0.15);
}
/* The WC order-notes textarea isn't reliably caught by the .form-row
   selectors in this bespoke template, so match it explicitly by id to the
   same rounded, bordered look as the other fields. */
body.woocommerce-checkout textarea#order_comments {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(20,22,15,0.04);
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.woocommerce-checkout textarea#order_comments:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(226,106,58,0.15);
}

/* White card wrapping the billing + delivery fields so the form reads as a
   contained, trustworthy section, mirroring the order-summary card. */
.twy-checkout__form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px 8px;
  margin: 0 0 8px;
}
@media (max-width: 600px) {
  .twy-checkout__form-card { padding: 18px 18px 4px; }
}

.woocommerce #payment,
.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background: var(--clay);
  color: #fff;
  border-radius: 999px;
  height: 56px;
  padding: 0 32px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.woocommerce #payment #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--clay-deep);
  transform: translateY(-1px);
}

/* --- Woo checkout: labels, rows, helpers ---------------------------------- */
.woocommerce form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
}
.woocommerce form .form-row label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0;
}
.woocommerce form .form-row label .required,
.woocommerce form .form-row label .optional {
  color: var(--stone-2);
  font-weight: 400;
  text-decoration: none;
  margin-left: 4px;
}
.woocommerce form .form-row .description {
  font-size: 12px;
  color: var(--stone-2);
  margin-top: 4px;
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  width: calc(50% - 10px);
  display: inline-flex;
  vertical-align: top;
}
.woocommerce form .form-row-first { margin-right: 20px; }
.woocommerce form .form-row-wide { width: 100%; }
@media (max-width: 600px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100%; margin-right: 0; }
}

/* Country / state selects use Select2 — style the wrapper like our inputs. */
.woocommerce form .select2-container .select2-selection--single {
  height: 52px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
}
.woocommerce form .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink);
  font-size: 14px;
  line-height: 50px;
  padding: 0;
}
.woocommerce form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 50px;
  right: 12px;
}
.woocommerce form .select2-container--open .select2-selection--single {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(226,106,58,0.15);
}
.select2-dropdown {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(20,23,15,0.25);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--sage);
  color: var(--ink);
}

/* Validation states */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid .select2-selection--single {
  border-color: #c23b3b;
  box-shadow: 0 0 0 3px rgba(194,59,59,0.12);
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated .select2-selection--single {
  border-color: var(--sage-deep);
}

/* --- Notice / info / error banners ---------------------------------------- */
.woocommerce-notices-wrapper { display: block; }
.woocommerce-notices-wrapper:empty { display: none; }

/* Match every variant WC emits: inside a wrapper, inside NoticeGroup, or bare. */
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-NoticeGroup ul.woocommerce-error,
.woocommerce-form-coupon .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
body.woocommerce-cart > .woocommerce-error,
body.woocommerce-cart > .woocommerce-info,
body.woocommerce-cart > .woocommerce-message,
body.woocommerce-checkout > .woocommerce-error,
body.woocommerce-checkout > .woocommerce-info,
body.woocommerce-checkout > .woocommerce-message {
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  outline: none;              /* kill the blue focus outline Woo inherits */
  border-left-width: 1px;     /* override Woo's 3px left accent stripe */
}

.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-NoticeGroup ul.woocommerce-error,
.woocommerce .woocommerce-error {
  background: #fdecec;
  color: #8a2929;
  border: 1px solid #f0c9c9;
}
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-form-coupon .woocommerce-info,
.woocommerce .woocommerce-info {
  background: #f6fff2;
  color: var(--ink);
  border: 1px solid var(--line);
}
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce .woocommerce-message {
  background: #e8f0dc;
  color: #2d4a1d;
  border: 1px solid #c9dcac;
}

/* Notice list items — the text line itself (when <ul> has <li>s). */
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.woocommerce-error li::marker,
.woocommerce-info li::marker,
.woocommerce-message li::marker { content: none; }

/* Kill WC's default ::before icon squares (the ⊗ / ⓘ / ✓ glyphs that clip). */
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error li::before,
.woocommerce-info li::before,
.woocommerce-message li::before { content: none !important; display: none !important; }

/* Actions inside a notice (View cart button in "added to cart" message). */
.woocommerce-notices-wrapper .showcoupon,
.woocommerce-notices-wrapper a.button,
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
  margin-left: auto;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  height: 34px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s;
}
.woocommerce-notices-wrapper a.button:hover,
.woocommerce-message a.button:hover { background: var(--ink-2); }

/* Success variant uses sage instead of ink for visual continuity. */
.woocommerce-message a.button {
  background: var(--sage-deep);
  color: #fff;
}
.woocommerce-message a.button:hover { background: var(--ink); }

/* --- WC block-library notice banner (used everywhere regardless of whether
   checkout/cart is shortcode or block) ------------------------------------ */
.wc-block-components-notice-banner {
  background: #f6fff2 !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin: 0 0 20px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  gap: 12px !important;
  align-items: center !important;
}
.wc-block-components-notice-banner > svg {
  background-color: var(--ink) !important;
  fill: #fff !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  padding: 3px !important;
  align-self: center !important;
  flex: 0 0 20px !important;
}
.wc-block-components-notice-banner__content {
  align-self: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.wc-block-components-notice-banner__summary {
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Error — red family */
.wc-block-components-notice-banner.is-error {
  background: #fdecec !important;
  border-color: #f0c9c9 !important;
  color: #8a2929 !important;
}
.wc-block-components-notice-banner.is-error > svg { background-color: #c23b3b !important; }

/* Warning — amber family */
.wc-block-components-notice-banner.is-warning {
  background: #fff7e6 !important;
  border-color: #f0d59a !important;
  color: #6b4b16 !important;
}
.wc-block-components-notice-banner.is-warning > svg { background-color: #c08a2d !important; }

/* Success — sage family (theme-native green) */
.wc-block-components-notice-banner.is-success {
  background: #e8f0dc !important;
  border-color: #c9dcac !important;
  color: #2d4a1d !important;
}
.wc-block-components-notice-banner.is-success > svg { background-color: var(--sage-deep) !important; }

/* Info — cream family (neutral) */
.wc-block-components-notice-banner.is-info {
  background: #f6fff2 !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.wc-block-components-notice-banner.is-info > svg { background-color: var(--ink) !important; }

/* "View cart" link + similar forward links inside the notice */
.wc-block-components-notice-banner .wc-forward {
  color: inherit !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: rgba(0,0,0,0.06) !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  float: none !important;
  margin-left: 12px !important;
  transition: background 0.2s !important;
}
.wc-block-components-notice-banner .wc-forward:hover {
  background: rgba(0,0,0,0.12) !important;
}

/* Dismiss (×) button — subtle, matches the foreground colour */
.wc-block-components-notice-banner > .wc-block-components-button {
  color: currentColor !important;
  opacity: 0.5 !important;
  margin: 0 !important;
  align-self: center !important;
}
.wc-block-components-notice-banner > .wc-block-components-button:hover { opacity: 1 !important; }

/* --- Coupon / login toggles ---------------------------------------------- */
.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle {
  margin-bottom: 20px;
}
.woocommerce form.checkout_coupon,
.woocommerce form.woocommerce-form-login {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 28px;
}
.woocommerce form.checkout_coupon .form-row { margin-bottom: 0; }
.woocommerce form.checkout_coupon .button,
.woocommerce form.woocommerce-form-login .button {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  height: 44px;
  padding: 0 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.woocommerce form.checkout_coupon .button:hover,
.woocommerce form.woocommerce-form-login .button:hover { background: var(--ink-2); }

/* --- Order review table (generic fallback — see summary scope below for
   the styled version used inside the checkout sidebar). ---------------- */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 14px;
}
.woocommerce-checkout-review-order-table .shipping ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout-review-order-table .shipping ul li { margin-bottom: 6px; }

/* Combined privacy + newsletter soft-opt-in fine print above place-order. */
body.woocommerce-checkout .twy-checkout-finenote {
  /* display:block to override the global `.woocommerce form .form-row`
     flex-column, which otherwise stacks the inline text + privacy link
     onto separate lines. */
  display: block;
  margin: 4px 0 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--stone-2);
  text-transform: none;
  letter-spacing: normal;
}
body.woocommerce-checkout .twy-checkout-finenote a {
  color: var(--ink-3);
  text-decoration: underline;
}

/* --- Payment method accordion -------------------------------------------- */
.woocommerce #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.woocommerce #payment ul.payment_methods li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.woocommerce #payment ul.payment_methods li:first-child { border-top: none; }
.woocommerce #payment ul.payment_methods li label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.woocommerce #payment ul.payment_methods li input[type="radio"] { margin: 0; accent-color: var(--clay); }
.woocommerce #payment ul.payment_methods li img { max-height: 24px; margin-left: 4px; vertical-align: middle; }
.woocommerce #payment div.payment_box {
  flex: 0 0 100%;
  margin: 8px 0 0;
  padding: 14px 16px;
  background: var(--cream);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.woocommerce #payment div.payment_box p:last-child { margin-bottom: 0; }

/* --- Checkout consent checkboxes ----------------------------------------- */
.woocommerce-terms-and-conditions-wrapper { margin: 20px 0 24px; }
.woocommerce-terms-and-conditions-wrapper .wc-terms-and-conditions {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 14px 0 18px;
  text-transform: none;
  letter-spacing: normal;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13.5px !important;
  line-height: 1.55;
  color: var(--ink);
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex: 0 0 22px;
  margin: 1px 0 0 !important;
  border: 1.5px solid var(--clay);
  border-radius: 5px;
  background: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked {
  background-color: var(--clay);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(226, 106, 58, 0.18);
}

/* Soft opt-in marketing notice — passive helper text, not a checkbox */
body.woocommerce-checkout .wy-nl-checkout-notice {
  margin: 14px 0 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* --- Ship-to-different-address ------------------------------------------- */
#ship-to-different-address label {
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
#ship-to-different-address input[type="checkbox"] { accent-color: var(--clay); }

/* --- Section headings (Billing details / Additional info) ---------------- */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 24px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* --- Checkout layout (two-column, sticky summary) ----------------------- */
/* Kill page.php's <article>/<h1>entry-title on the checkout screen — our
   form-checkout.php renders its own themed title inside the grid. */
body.woocommerce-checkout .entry-header,
body.woocommerce-checkout > .site-main > article > .entry-header { display: none; }

.twy-checkout {
  padding: 48px 24px 80px;
}
.twy-checkout__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-2);
  margin-bottom: 32px;
  text-decoration: none;
}
.twy-checkout__back:hover { color: var(--ink); }
.twy-checkout__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 960px) {
  .twy-checkout__grid { grid-template-columns: 1fr; gap: 32px; }
}
/* WC's checkout JS prepends server-validation errors directly into the
   <form> when submission fails (e.g. "Invalid payment method."). Without
   this rule those notices become grid items in the 1.4fr/1fr layout and
   push the main panel into the aside's column. Force them to span the
   whole row instead. */
.twy-checkout__grid > .woocommerce-NoticeGroup,
.twy-checkout__grid > .woocommerce-error,
.twy-checkout__grid > .woocommerce-message,
.twy-checkout__grid > .woocommerce-info,
.twy-checkout__grid > .wc-block-components-notice-banner {
  grid-column: 1 / -1;
  margin: 0 0 24px;
}
.twy-checkout__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  margin: 0 0 8px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  grid-column: 1 / -1; /* full-width title above both grid columns */
}
@media (max-width: 960px) {
  /* Mobile stack order: notices, then Checkout title, then the collapsed
     summary, then the steps. */
  .twy-checkout__title { order: -2; }
}
.twy-checkout__section + .twy-checkout__section { margin-top: 28px; }
.twy-checkout__section-heading,
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.twy-checkout__payment { margin-top: 36px; }

/* Secure-payment trust banner above the card form */
.twy-checkout__pay-trust {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--sage-soft, #eef2ea);
  border: 1px solid var(--sage, #c6d4c0);
  border-radius: 12px;
}
.twy-checkout__pay-trust-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--sage-deep, #ff914d);
}
.twy-checkout__pay-trust-copy { min-width: 0; }
.twy-checkout__pay-trust-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 7px;
}
.twy-checkout__pay-trust-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* No box of its own — the green payment_methods block below is the single
   container, so the card field isn't squeezed by a second layer of padding. */
.twy-checkout__pay-box {
  border: none;
  padding: 0;
  background: none;
}
@media (max-width: 600px) {
  body.woocommerce-checkout #payment.woocommerce-checkout-payment { padding: 16px; }
}
.twy-checkout__pay-box .woocommerce #payment ul.payment_methods,
.twy-checkout__pay-box #payment ul.payment_methods {
  border-bottom: none;
  margin-bottom: 0;
  background: #eef2ea;
  padding: 18px;
  border-radius: 10px;
}
.twy-checkout__pay-box #payment ul.payment_methods li { padding: 0; }

/* Revolut's payment_box blends into the panel: no separate cream block,
   no pointer caret, content left-aligned, tight spacing. */
.twy-checkout__pay-box #payment div.payment_box {
  background: transparent;
  margin: 0 0 12px;
  padding: 0;
  text-align: left;
}
.twy-checkout__pay-box #payment div.payment_box::before { display: none; }

/* "Use a new payment method" radio row (WC tokenization list) */
.twy-checkout__pay-box .woocommerce-SavedPaymentMethods {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.twy-checkout__pay-box .woocommerce-SavedPaymentMethods li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.twy-checkout__pay-box .woocommerce-SavedPaymentMethods li + li { margin-top: 8px; }
/* With no saved cards, WC renders a lone "Use a new payment method" radio
   with nothing to pick against, which reads as confusing. WC stamps the list
   with data-count="0" when there are no saved tokens — hide it then (the
   radio inside stays checked + submitted). Returning customers with saved
   cards (data-count > 0) still see it as a real choice. */
.twy-checkout__pay-box .woocommerce-SavedPaymentMethods[data-count="0"],
.twy-checkout__pay-box .woocommerce-SavedPaymentMethods li.woocommerce-SavedPaymentMethods-new:only-child {
  display: none;
}
.twy-checkout__pay-box .woocommerce-SavedPaymentMethods li label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.twy-checkout__pay-box .woocommerce-SavedPaymentMethods input[type="radio"] {
  margin: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--clay);
}

/* Revolut card-element field — left white / gateway-dynamic. */
.twy-checkout__pay-box #woocommerce-revolut-card-element { margin: 8px 0; }

/* Security shield to the left of the "Pay with card" method label. */
.twy-checkout__pay-box #payment ul.payment_methods li label::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234f6a51' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Form-rows inside the payment box (e.g. cardholder name) get more breathing
   room above; the save-card row is exempt (it hugs the card field, set to 0). */
.twy-checkout__pay-box #payment div.payment_box .form-row:not(.woocommerce-SavedPaymentMethods-saveNew) {
  margin-top: 16px;
}

/* "Save payment information…" checkbox row. Must reset flex-direction +
   label transform inherited from the global `.woocommerce form .form-row`. */
.twy-checkout__pay-box p.woocommerce-SavedPaymentMethods-saveNew {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin: 16px 0 4px;
  text-align: left;
}
.twy-checkout__pay-box p.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
  margin: 0;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--clay);
}
.twy-checkout__pay-box p.woocommerce-SavedPaymentMethods-saveNew label {
  margin: 0;
  padding: 0;
  font-size: 13px;
  /* !important to beat WC's ID-bearing `.woocommerce #payment ... li label`
     rule (font-weight:600) — the saveNew row lives inside that li. */
  font-weight: 400 !important;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-3);
  cursor: pointer;
}

/* Trust badge row under the panel */
.twy-checkout__trust-badges {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.twy-checkout__trust-badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}
.twy-checkout__trust-badges li svg { color: var(--sage-deep, #ff914d); flex: 0 0 auto; }

.twy-checkout__secure {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--stone-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Sticky summary aside */
.twy-checkout__aside { position: sticky; top: 88px; }
@media (max-width: 960px) {
  /* Move the summary above the form so shoppers see it before the
     payment step / place-order button. Notices stay at the very top. */
  .twy-checkout__aside { position: static; order: -1; }
}
.twy-checkout__grid > .woocommerce-NoticeGroup,
.twy-checkout__grid > .woocommerce-error,
.twy-checkout__grid > .woocommerce-message,
.twy-checkout__grid > .woocommerce-info,
.twy-checkout__grid > .wc-block-components-notice-banner { order: -3; }
.twy-checkout-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}
/* Collapsible toggle bar — desktop hides it (the h3 + body always show);
   mobile shows it and collapses the body by default. */
/* Deposit balance-timing note under the Future Payments row. Scoped to match
   the tfoot total-row prefix so it outranks `tfoot tr { display:grid }` and
   `tfoot td { text-align:right }`. */
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot tr.twy-balance-note {
  display: block;
  padding: 0;
  border: none;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot tr.twy-balance-note td {
  display: block;
  padding: 10px 0 0;
  border: none;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--stone-2);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}

.twy-checkout-summary__toggle { display: none; }
@media (max-width: 960px) {
  .twy-checkout-summary { padding: 18px 20px; }
  .twy-checkout-summary__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--ink);
  }
  .twy-checkout-summary__toggle-total {
    margin-left: auto;
    font-weight: 700;
    font-size: 17px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    text-align: right;
  }
  /* Deposit orders: collapsed bar shows due-today + balance stacked. */
  .twy-checkout-summary__toggle-due {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
  }
  .twy-checkout-summary__toggle-future {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    color: var(--stone-2);
    margin-top: 1px;
  }
  .twy-checkout-summary__toggle-chev {
    flex: 0 0 auto;
    color: var(--stone-2);
    transition: transform 0.2s;
  }
  .twy-checkout-summary.is-open .twy-checkout-summary__toggle-chev { transform: rotate(180deg); }
  .twy-checkout-summary__heading { display: none; }
  .twy-checkout-summary__body { display: none; }
  .twy-checkout-summary.is-open .twy-checkout-summary__body {
    display: block;
    margin-top: 18px;
  }
}
.twy-checkout-summary__heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--ink);
}
/* Woo review-order table — restyled as a clean summary panel. Hard reset
   on borders so WC Deposits / WC core / plugin styles can't leak through. */
.twy-checkout-summary .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: none !important;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table thead { display: none; }
.twy-checkout-summary .woocommerce-checkout-review-order-table tr,
.twy-checkout-summary .woocommerce-checkout-review-order-table th,
.twy-checkout-summary .woocommerce-checkout-review-order-table td {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table th,
.twy-checkout-summary .woocommerce-checkout-review-order-table td {
  padding: 0;
  font-weight: 400;
  text-align: left;
}

/* Product line items — image + meta + price, no table chrome */
.twy-checkout-summary .woocommerce-checkout-review-order-table tbody .cart_item td {
  padding: 0 0 16px;
  border: none;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table tbody .cart_item:last-child td {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line) !important;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table tbody .cart_item + .cart_item td {
  padding-top: 16px;
  border-top: 1px solid var(--line) !important;
}
.twy-review-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: start;
}
.twy-review-item__thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream-2);
  flex-shrink: 0;
}
.twy-review-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.twy-review-item__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.twy-review-item__meta {
  min-width: 0;
}
.twy-review-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  word-break: break-word;
}
.twy-review-item__attrs {
  font-size: 11px;
  color: var(--stone-2);
  line-height: 1.45;
  margin-top: 4px;
}
.twy-review-item__attrs dl,
.twy-review-item__attrs p {
  margin: 0;
  padding: 0;
  display: block;
}
.twy-review-item__attrs dt {
  display: inline;
  font-weight: 500;
  color: var(--stone-2);
}
/* WC's cart-item-data.php already appends ":" to the label, so no dt::after
   colon here (it produced a double "::"). */
.twy-review-item__attrs dd {
  display: inline;
  margin: 0;
  color: var(--ink-3);
}
.twy-review-item__attrs dd::after {
  content: ' · ';
  color: var(--line-strong);
  margin: 0 2px;
}
.twy-review-item__attrs dd:last-of-type::after { content: ''; }
.twy-review-item__price {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  align-self: center;
}

/* Totals block — rows flow without internal dividers; only the Total row
   gets a top divider to separate it from subtotal/fees. */
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot tr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 6px 0;
  border: none;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot tr:first-child {
  padding-top: 14px;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot th,
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot td {
  font-size: 13px;
  color: var(--ink);
  padding: 0;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot .shipping td,
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot .shipping th { color: var(--sage-deep); }
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot .cart-discount td,
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot .cart-discount th { color: var(--clay); }

.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total {
  margin-top: 8px;
  padding-top: 16px;
  align-items: baseline;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total th,
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total td {
  border-top: 1px solid var(--line) !important;
  padding-top: 16px;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total th {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total td {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.twy-checkout-summary .woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount bdi {
  display: inline;
}

.twy-checkout-steps {
  display: flex;
  gap: 24px;
  margin: 24px 0 40px;
  flex-wrap: wrap;
}
.twy-checkout-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.35;
  background: transparent;
  border: none;
  padding: 0;
  cursor: not-allowed;
  transition: opacity 0.2s;
}
.twy-checkout-step.is-done { cursor: pointer; }
.twy-checkout-step.is-done:hover { opacity: 0.7; }
.twy-checkout-step.is-active,
.twy-checkout-step.is-done { opacity: 1; }
.twy-checkout-step__num {
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.twy-checkout-step.is-active .twy-checkout-step__num { background: var(--ink); color: #fff; border-color: var(--ink); }
.twy-checkout-step.is-done .twy-checkout-step__num { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }

/* --- Step panels + nav buttons ----------------------------------------- */
.twy-checkout__panel { animation: twy-checkout-fadein 0.25s ease-out; }
.twy-checkout__panel[hidden] { display: none; }
@keyframes twy-checkout-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .twy-checkout__panel { animation: none; }
}
.twy-checkout__step-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
  flex-wrap: wrap;
}
.twy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.twy-btn--dark {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.twy-btn--dark:hover { background: var(--ink-2); border-color: var(--ink-2); }
.twy-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.twy-btn--ghost:hover { background: rgba(20,23,15,0.05); }
.twy-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Optional Addons step ---------------------------------------------- */
.twy-addons__intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  background: var(--cream-2);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 28px;
}
.twy-addons__intro-icon {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.twy-addons__intro-eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sage-deep);
  margin-bottom: 6px;
}
.twy-addons__intro-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 540px;
}
.twy-addons__intro-body strong { color: var(--ink); }

/* Payment-mode toggle — appears above the grid when a hot tub in the cart
   was bought on a deposit. Two stacked radio cards. */
.twy-addons__mode {
  border: none;
  margin: 0 0 24px;
  padding: 0;
}
.twy-addons__mode-legend {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
  padding: 0;
  margin: 0 0 10px;
}
.twy-addons__mode-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.twy-addons__mode-option:hover { border-color: var(--line-strong); }
.twy-addons__mode-option.is-checked {
  border-color: var(--ink);
  background: var(--cream-2);
}
.twy-addons__mode-option input[type="radio"] {
  flex: 0 0 auto;
  accent-color: var(--ink);
  margin: 4px 0 0;
  width: 16px;
  height: 16px;
}
.twy-addons__mode-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.twy-addons__mode-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.twy-addons__mode-sub {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

.twy-addons__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 540px) {
  .twy-addons__grid { grid-template-columns: 1fr; }
}

/* Addon card — a div[role=button] because HTML forbids nested <button>,
   and the qty stepper inside needs to be real buttons. */
.twy-addon-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  transition: transform 150ms ease-out, box-shadow 200ms ease-out, border-color 150ms;
  box-sizing: border-box;
  min-width: 0;
}
.twy-addon-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.twy-addon-card:hover { transform: translateY(-1px); }
.twy-addon-card.is-selected {
  border: 1px solid var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px rgba(20,23,15,0.35);
}
.twy-addon-card.is-selected:hover { transform: translateY(-2px); }

.twy-addon-card__thumb {
  position: relative;
  aspect-ratio: 1.45 / 1;
  border-radius: 10px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(20,23,15,0.04) 0 6px,
      transparent 6px 14px),
    var(--paper);
  display: block;
}
.twy-addon-card__thumb.has-image { background: var(--paper); }
.twy-addon-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.twy-addon-card__chip {
  position: absolute;
  top: 10px; left: 10px;
  padding: 5px 10px;
  background: var(--sage);
  color: var(--ink);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.twy-addon-card__placeholder {
  position: absolute;
  bottom: 8px; right: 8px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  color: rgba(20,23,15,0.55);
}
.twy-addon-card__indicator {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.twy-addon-card.is-selected .twy-addon-card__indicator {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.twy-addon-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.twy-addon-card__name {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.15;
  color: var(--ink);
  font-weight: 400;
}
.twy-addon-card__price {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--clay);
  white-space: nowrap;
  font-weight: 400;
}
.twy-addon-card__tagline {
  font-size: 12px;
  color: var(--stone-2);
  font-style: italic;
  margin-top: -6px; /* gap-14 is too loose here */
}

/* Card footer: default = "Add to order" pill, selected = ink stepper */
.twy-addon-card__footer {
  display: flex;
  align-items: center;
}
.twy-addon-card__add {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.twy-addon-card__stepper {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 6px 6px 16px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
}
.twy-addon-card.is-selected .twy-addon-card__add     { display: none; }
.twy-addon-card.is-selected .twy-addon-card__stepper { display: flex; }

.twy-addon-card__stepper-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sage);
}
.twy-addon-card__stepper-cluster {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 2px;
}
.twy-addon-card__stepper-btn {
  all: unset;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.twy-addon-card__stepper-btn:hover { background: rgba(255,255,255,0.12); }
.twy-addon-card__stepper-val {
  min-width: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
}

/* Sticky running-total bar */
.twy-addons__bar {
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  transition: background 250ms ease-out, color 250ms ease-out, border-color 250ms ease-out;
  position: sticky;
  bottom: 16px;
  z-index: 5;
}
.twy-addons__bar.is-filled {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.twy-addons__bar-left { min-width: 0; flex: 1 1 auto; }
.twy-addons__bar-empty {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}
.twy-addons__bar-eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 6px;
}
.twy-addons__bar-totals {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.twy-addons__bar-total-major {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.twy-addons__bar-total-minor {
  font-size: 12px;
  opacity: 0.65;
}

.twy-addons__bar-right {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.twy-addons__bar-skip,
.twy-addons__bar-clear,
.twy-addons__bar-back {
  all: unset;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
}
.twy-addons__bar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.twy-addons__bar-back:hover { text-decoration: underline; }
.twy-addons__bar-back svg { opacity: 0.7; }
.twy-addons__bar.is-filled .twy-addons__bar-clear { color: rgba(243,241,232,0.7); }
.twy-addons__bar.is-filled .twy-addons__bar-clear:hover { color: var(--cream); }
.twy-addons__bar.is-filled .twy-addons__bar-cta {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
}
.twy-addons__bar.is-filled .twy-addons__bar-cta:hover {
  background: #5e6a3d;
  border-color: #5e6a3d;
}

/* Continue to shipping — clay orange to match the brand's primary action colour */
.twy-checkout .twy-addons__bar-cta,
.twy-checkout__step-nav .twy-btn--dark {
  background: var(--clay);
  border-color: var(--clay);
  color: #fff;
}
.twy-checkout .twy-addons__bar-cta:hover,
.twy-checkout__step-nav .twy-btn--dark:hover {
  background: var(--clay-deep);
  border-color: var(--clay-deep);
}

/* Sidebar addons panel + Due-today row */
.twy-checkout-summary__addons {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px dashed var(--sage-deep);
  border-radius: 10px;
  margin: 8px 0 12px;
}
.twy-checkout-summary__addons[hidden] { display: none; }
.twy-checkout-summary__addons-eyebrow {
  font-size: 10px;
  color: var(--sage-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
.twy-checkout-summary__addon-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  padding: 2px 0;
}
.twy-checkout-summary__addon-name { color: var(--ink-3); }
.twy-checkout-summary__addon-mult { color: var(--stone-2); font-size: 11px; }
.twy-checkout-summary__addon-price { color: var(--ink); font-weight: 600; }

.twy-checkout-summary__note {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--cream-2);
  border-radius: 8px;
}
.twy-checkout-summary__note[hidden] { display: none; }
.twy-checkout-summary__note-text {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* --- Delivery address + Access radio cards ---------------------------- */
.twy-checkout__delivery-address { margin-bottom: 28px; }
.twy-checkout__access {
  border: none;
  margin: 0 0 8px;
  padding: 0;
}
.twy-checkout__access-legend {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
  padding: 0;
  margin: 0 0 10px;
}
.twy-checkout__access-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(20,22,15,0.04);
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.twy-checkout__access-option:hover { border-color: var(--ink); }
.twy-checkout__access-option.is-checked {
  border-color: var(--ink);
  background: var(--cream-2);
}
.twy-checkout__access-option input[type="radio"] {
  flex: 0 0 auto;
  accent-color: var(--ink);
  margin: 0;
  width: 16px;
  height: 16px;
}
.twy-checkout__access-option span {
  font-size: 14px;
  color: var(--ink);
}
.twy-checkout__access-other {
  margin: -2px 0 12px 28px;
}
.twy-checkout__access-other[hidden] {
  display: none;
}
.twy-checkout__access-other label {
  display: block;
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--stone-2);
}
.twy-checkout__access-other textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(20,22,15,0.04);
  color: var(--ink);
  font: 14px/1.5 var(--font-body);
  padding: 12px 14px;
}
.twy-checkout__access-other textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}

/* ============================================
   ORDER CONFIRMATION
   ============================================ */
.twy-order-received {
  background: var(--cream);
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.twy-order-received__wrap {
  text-align: center;
  padding: 80px 24px;
  max-width: 640px;
  margin: 0 auto;
}
.twy-order-received__check {
  width: 72px; height: 72px;
  border-radius: 999px;
  background: var(--sage);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 32px;
  color: var(--ink);
}
.twy-order-received__h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  margin: 12px 0 16px;
  color: var(--ink);
  font-weight: 400;
}
.twy-order-received__lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-3);
  margin-bottom: 32px;
}
.twy-order-received__card {
  padding: 24px;
  background: var(--paper);
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-bottom: 32px;
  text-align: left;
}
.twy-order-received__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.twy-order-received__row:last-child { margin-bottom: 0; }
.twy-order-received__row-label {
  font-size: 12px;
  color: var(--stone-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.twy-order-received__row-val { font-weight: 600; font-size: 13px; color: var(--ink); }

/* ──────────────────────────────────────────────────────────────────────
   Thank-you page — WC order-details + customer-details blocks.
   These are WC core templates (woocommerce/templates/order/order-details*.php
   and order-details-customer.php) fired by `woocommerce_thankyou` in our
   bespoke woocommerce/checkout/thankyou.php. Styled here in place rather
   than overridden via theme templates so future WC updates don't drift
   our markup. Section sits inside the `.twy-order-received__details`
   wrapper opened in thankyou.php just below the `.twy-order-received`
   hero card.

   Two markup quirks to wrestle with:
   (a) Order-details + customer-details are sibling sections — wrap them
       visually under one editorial container by treating both as cream
       cards centred at 720px with consistent spacing.
   (b) The customer-details grid uses `.col-1`/`.col-2` floats from
       WC's legacy markup AND the site's base.css grid system. We
       override both with `display: grid` + `width: 100% !important` +
       `float: none` so the columns line up as a proper 2-up.
   ────────────────────────────────────────────────────────────────────── */

body.woocommerce-order-received .twy-order-received__details {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 96px !important;
}

body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details {
  max-width: 720px;
  margin: 0 auto 32px;
  font-family: var(--font-body, inherit);
  color: var(--ink, #14160F);
  position: relative;
}

/* Mono eyebrow above each section title — matches the hero's
   "Order confirmed" eyebrow + the rest of the editorial pattern. */
body.woocommerce-order-received .woocommerce-order-details::before,
body.woocommerce-order-received .woocommerce-customer-details::before {
  content: "DETAILS";
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay, #93db4c);
  margin: 0 0 8px;
}
body.woocommerce-order-received .woocommerce-customer-details::before { content: "DELIVERY"; }

body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-customer-details h2,
body.woocommerce-order-received .woocommerce-column__title {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ink, #14160F);
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}

/* Override "Order details" / "Customer details" titles with editorial
   phrasing via CSS content-replace. Using a wrapping span swap is
   fragile (WC strips classes from the title) so do it visually. */
body.woocommerce-order-received .woocommerce-order-details__title { visibility: hidden; position: relative; }
body.woocommerce-order-received .woocommerce-order-details__title::after {
  content: "What you've chosen";
  visibility: visible;
  position: absolute;
  inset: 0;
  font-family: inherit;
}
/* Replace the per-column h2 text. The customer-details section has TWO
   h2s (Billing + Shipping) — each in its own .col-N — so a single
   :first-of-type swap would label both with the same string. Target
   the column-specific classes instead. */
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column--billing-address .woocommerce-column__title,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column--shipping-address .woocommerce-column__title { visibility: hidden; position: relative; }
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column--billing-address .woocommerce-column__title::after {
  content: "BILLING";
  visibility: visible;
  position: absolute;
  inset: 0;
  font-family: inherit;
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column--shipping-address .woocommerce-column__title::after {
  content: "SHIPPING";
  visibility: visible;
  position: absolute;
  inset: 0;
  font-family: inherit;
}

/* Order-details table — line items + totals, styled as an editorial card */
body.woocommerce-order-received .woocommerce-table--order-details {
  width: 100%;
  background: var(--paper, #ffffff);
  border: 1px solid var(--line, #E7E3D6);
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 1px 0 rgba(20, 22, 15, 0.02), 0 24px 48px -32px rgba(20, 22, 15, 0.12);
}

body.woocommerce-order-received .woocommerce-table--order-details thead {
  display: none; /* The column-header row reads as wp-admin chrome on a
                    single-line-item order. Mono labels in the rows below
                    carry the same job in a way that matches the brand. */
}

/* Line-item rows — bigger padding, sage-tinted left accent on first column */
body.woocommerce-order-received .woocommerce-table--order-details tbody td {
  padding: 22px 28px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink, #14160F);
  border-bottom: 1px solid var(--line, #E7E3D6);
  vertical-align: top;
  background: var(--paper, #ffffff);
}
body.woocommerce-order-received .woocommerce-table--order-details tbody tr:last-child td { border-bottom: 1px solid var(--line, #E7E3D6); }

body.woocommerce-order-received .woocommerce-table--order-details td.woocommerce-table__product-name,
body.woocommerce-order-received .woocommerce-table--order-details td.product-name {
  font-family: var(--font-display, Georgia, serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-right: 16px;
}

/* Line item flex pair — thumbnail + body. Rendered by the theme's
   override of order/order-details-item.php. */
.twy-order-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.twy-order-item__media {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream-2, #F4EADD);
  display: flex;
  align-items: center;
  justify-content: center;
}
.twy-order-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.twy-order-item__img--ph {
  background:
    linear-gradient(135deg, var(--sage, #BFD5BC) 0%, var(--cream-2, #F4EADD) 100%);
}
.twy-order-item__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 6px;
}
@media (max-width: 540px) {
  .twy-order-item__media {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }
}
body.woocommerce-order-received .woocommerce-table--order-details td.woocommerce-table__product-name a,
body.woocommerce-order-received .woocommerce-table--order-details td.product-name a {
  color: var(--ink, #14160F);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
body.woocommerce-order-received .woocommerce-table--order-details td.woocommerce-table__product-name a:hover,
body.woocommerce-order-received .woocommerce-table--order-details td.product-name a:hover {
  border-bottom-color: var(--ink, #14160F);
}
body.woocommerce-order-received .woocommerce-table--order-details .product-quantity {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--clay, #93db4c);
  font-weight: 500;
  margin-left: 8px;
}

/* Right-align money columns */
body.woocommerce-order-received .woocommerce-table--order-details td.woocommerce-table__product-total,
body.woocommerce-order-received .woocommerce-table--order-details td.product-total,
body.woocommerce-order-received .woocommerce-table--order-details tfoot td {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-display, Georgia, serif);
  font-size: 17px;
  font-weight: 400;
}

/* Variation / item-meta sub-rows under the product name */
body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta,
body.woocommerce-order-received .woocommerce-table--order-details .variation {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body, inherit);
  font-size: 13px;
  color: var(--stone-2, #6A6A5A);
  letter-spacing: 0.01em;
}
body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li,
body.woocommerce-order-received .woocommerce-table--order-details .variation dt,
body.woocommerce-order-received .woocommerce-table--order-details .variation dd {
  margin: 0;
  display: inline;
}
body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li + li::before,
body.woocommerce-order-received .woocommerce-table--order-details .variation dt + dt::before {
  content: " · ";
  color: var(--clay, #93db4c);
}
body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta strong,
body.woocommerce-order-received .woocommerce-table--order-details .variation dt {
  font-weight: 500;
  color: var(--stone-2, #6A6A5A);
}
body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta strong::after { content: ": "; }

/* Totals footer — labels in mono eyebrow, values in display serif */
body.woocommerce-order-received .woocommerce-table--order-details tfoot th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot td {
  padding: 16px 28px;
  border-bottom: 1px solid var(--line, #E7E3D6);
  background: var(--paper, #ffffff);
  vertical-align: middle;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot th {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-2, #6A6A5A);
  text-align: right;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot td {
  color: var(--ink, #14160F);
}

/* "Total" row — final grand total, emphasised with cream-2 band + DM Serif */
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
  background: var(--cream-2, #F4EADD);
  border-bottom: 0;
  padding-top: 22px;
  padding-bottom: 22px;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th {
  color: var(--ink, #14160F);
  font-size: 12px;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
}

/* Customer-details — billing + shipping stacked full-width.
   `.col2-set`, `.col-1`, `.col-2` come from WC's legacy column system
   and the theme's base.css float grid (which uses position: absolute /
   percentage widths that win over a plain `display: grid`). Hard-
   override every shape with flex-column + reset every positioning
   property. The `position: static !important` on the columns is what
   finally defeated the float-grid in testing. */
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses,
body.woocommerce-order-received .woocommerce-customer-details .col2-set,
body.woocommerce-order-received .woocommerce-customer-details .addresses {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  position: static !important;
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns::before,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns::after,
body.woocommerce-order-received .woocommerce-customer-details .col2-set::before,
body.woocommerce-order-received .woocommerce-customer-details .col2-set::after {
  content: none !important;
  display: none !important;
}

body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column,
body.woocommerce-order-received .woocommerce-customer-details .col-1,
body.woocommerce-order-received .woocommerce-customer-details .col-2 {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  background: var(--paper, #ffffff);
  border: 1px solid var(--line, #E7E3D6);
  border-radius: 16px;
  padding: 24px 28px 26px;
  box-shadow: 0 1px 0 rgba(20, 22, 15, 0.02), 0 24px 48px -32px rgba(20, 22, 15, 0.12);
}

/* Column titles ("Billing address" / "Shipping address") — mono eyebrow */
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title {
  font-family: var(--font-mono, ui-monospace, monospace) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-2, #6A6A5A);
  margin: 0 0 14px;
  white-space: normal;
}

body.woocommerce-order-received .woocommerce-customer-details address {
  font-family: var(--font-display, Georgia, serif);
  font-style: normal;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink, #14160F);
  border: 0;
  padding: 0;
  letter-spacing: -0.005em;
}

body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--phone,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--email {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-family: var(--font-body, inherit);
  font-size: 13px;
  color: var(--stone-2, #6A6A5A);
  padding-top: 12px;
  border-top: 1px solid var(--line, #E7E3D6);
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--phone {
  border-top: 1px solid var(--line, #E7E3D6);
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--email {
  border-top: 0;
  padding-top: 4px;
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--email a,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--phone a {
  color: var(--stone-2, #6A6A5A);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--email a:hover,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--phone a:hover {
  color: var(--ink, #14160F);
  border-bottom-color: var(--ink, #14160F);
}

/* Override some WooCommerce defaults to match */
.woocommerce-breadcrumb { display: none; }

/* Normalize base.css overlaps */
.site-main { min-height: 40vh; }

/* ============================================
   TRUST STRIP — site-wide component
   Used by template-parts/trust-strip.php below
   landing-page heroes (home, contact, etc.).
   ============================================ */
.twy-trust-strip {
  background: var(--ink);
  color: var(--cream);
}
.twy-trust-strip__row {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  .twy-trust-strip__row { padding: 22px 48px; }
}
@media (min-width: 1200px) {
  .twy-trust-strip__row { padding: 24px 64px; }
}
.twy-trust-strip__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  border-right: 1px solid rgba(243, 241, 232, 0.14);
  padding-right: 24px;
  min-width: 0;
}
.twy-trust-strip__item:last-child { border-right: 0; padding-right: 0; }
.twy-trust-strip__icon {
  width: 22px;
  height: 22px;
  color: var(--sage);
  display: inline-flex;
  flex-shrink: 0;
}
.twy-trust-strip__icon svg,
.twy-trust-strip__icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.twy-trust-strip__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 960px) {
  .twy-trust-strip__row { grid-template-columns: repeat(2, 1fr); }
  .twy-trust-strip__item:nth-child(2) { border-right: 0; padding-right: 0; }
}
@media (max-width: 520px) {
  .twy-trust-strip__row { grid-template-columns: 1fr; gap: 14px; }
  .twy-trust-strip__item { border-right: 0; padding-right: 0; }
}
/* Hide the trust strip on mobile — saves vertical space below the hero
   without losing the assurances on desktop. */
@media (max-width: 767px) {
  .twy-trust-strip__row { display: none; }
}

/* ============================================
   PDP — HOT TUBS
   Category-specific variant rendered by
   template-parts/pdp-hot-tubs.php.
   Reuses .twy-pdp__* for the shared hero + main
   grid; adds .twy-pdp-ht__* for hot-tub-only bands.
   ============================================ */

.twy-pdp-ht__gallery { position: relative; }

.twy-pdp-ht__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 6px 20px -6px rgba(226, 106, 58, 0.5);
  transform: rotate(-6deg);
  pointer-events: none;
  text-align: center;
  line-height: 1;
}
.twy-pdp-ht__badge span:first-child {
  font-size: 8px;
  letter-spacing: 0.14em;
  opacity: 0.85;
}
.twy-pdp-ht__badge span:last-child {
  font-size: 15px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  margin-top: 3px;
  font-style: italic;
}

.twy-pdp-ht__price-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
  font-weight: 600;
  align-self: center;
}

.twy-pdp-ht__unavailable {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-3);
}

/* Sold-tag variant of the price row. Replaces the £ price on sold
   refurbished PDPs so the visitor sees "this is sold" at the top of
   the page rather than scrolling halfway down to find out. The .sold
   panel further down in .twy-pdp__info handles the "what next" CTA. */
.twy-pdp__price-row--sold {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.twy-pdp__sold-tag {
  display: inline-block;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--clay, #93db4c);
  border-radius: 999px;
}
.twy-pdp__sold-tag-note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone-2, #6b6f60);
}

/* "This one's gone" panel — replaces the configurator on refurbished hot
   tub PDPs whose stock has hit 0. The URL stays live for SEO; this panel
   gives the visitor the editorial context + a path back into the live
   refurbished range. Tonal cream card so it doesn't shout, with a clay
   primary CTA matching the rest of the brand action language. */
.twy-pdp-ht__sold {
  margin-top: 28px;
  padding: 24px 24px 22px;
  background: var(--cream-2, #eaf6e2);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: block;
}
.twy-pdp-ht__sold-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3f7826;
  background: rgba(202, 92, 41, 0.10);
  border: 1px solid rgba(202, 92, 41, 0.22);
  border-radius: 999px;
}
.twy-pdp-ht__sold-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.twy-pdp-ht__sold-body {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
}
.twy-pdp-ht__sold-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.twy-pdp-ht__sold-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--clay, #93db4c);
  color: #fff !important;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 180ms ease, transform 180ms ease;
}
.twy-pdp-ht__sold-cta:hover,
.twy-pdp-ht__sold-cta:focus-visible {
  background: var(--clay-deep, #3f7826);
  transform: translateY(-1px);
}
.twy-pdp-ht__sold-cta span {
  font-size: 16px;
  line-height: 1;
  margin-top: -1px;
}
.twy-pdp-ht__sold-secondary {
  font-size: 13.5px;
  color: var(--stone-2, #6b6f60);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(107, 111, 96, 0.4);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.twy-pdp-ht__sold-secondary:hover,
.twy-pdp-ht__sold-secondary:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* =================================================================
   Hot tub PDP — SCIENCE CALLOUTS
   Mirrors .twy-pdp-ice__science (see assets/css/pdp-ice-baths.css). Same
   layout primitive (centred header / responsive stat grid / source line /
   "read the full science" foot link); accent flips from --lake (cold) to
   --clay (warm) so the section visually belongs to the hot tub PDP.
   Single source of truth for the actual figures is page-science.php
   $twy_sci_hottub_stats — the cells just render from the array.
   ================================================================= */
.twy-pdp-ht__science {
  background: var(--cream);
  padding: 96px 0;
  border-top: 1px solid var(--line);
}
.twy-pdp-ht__science-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.twy-pdp-ht__science-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
  margin-bottom: 14px;
  display: block;
}
.twy-pdp-ht__science-h2 {
  font-family: var(--font-display, 'DM Serif Display', serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--ink);
}
.twy-pdp-ht__science-h2 em {
  font-style: italic;
  color: var(--clay);
}
.twy-pdp-ht__science-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0;
}
.twy-pdp-ht__science-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .twy-pdp-ht__science-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
.twy-pdp-ht__science-cell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px;
}
.twy-pdp-ht__science-stat {
  font-family: var(--font-display, 'DM Serif Display', serif);
  font-weight: 400;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1;
  color: var(--clay);
  margin-bottom: 12px;
}
.twy-pdp-ht__science-label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 12px;
}
.twy-pdp-ht__science-src {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--stone-2);
}
.twy-pdp-ht__science-foot {
  margin-top: 36px;
  text-align: center;
}
.twy-pdp-ht__science-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong, var(--line));
  padding-bottom: 4px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.twy-pdp-ht__science-more:hover,
.twy-pdp-ht__science-more:focus-visible {
  color: var(--clay);
  border-color: var(--clay);
}

/* =================================================================
   Hot tub PDP — PAIR (kontrastbad CTA — image-led, dark warm)
   Mirrors .twy-pdp-ice__pair but flipped warm: hot_tub_portrait.jpg
   under a dark scrim so the cream copy + clay italic stay legible. The
   hot tub PDP version steers visitors to ICE BATHS (primary, the cold
   counterpart that completes the contrast cycle) and SAUNAS (ghost,
   alternate heat modality).
   ================================================================= */
.twy-pdp-ht__pair {
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(36, 22, 14, 0.55) 0%,
      rgba(36, 22, 14, 0.82) 55%,
      rgba(20, 12, 8, 0.94) 100%
    ),
    url('../img/hot_tub_portrait.jpg') center / cover no-repeat;
  background-color: #1a110b;
  color: var(--cream);
  padding: 140px 0;
  overflow: hidden;
}
.twy-pdp-ht__pair-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.twy-pdp-ht__pair-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 16px;
  display: block;
}
.twy-pdp-ht__pair-h2 {
  font-family: var(--font-display, 'DM Serif Display', serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--cream);
}
.twy-pdp-ht__pair-h2 em {
  font-style: italic;
  color: var(--clay);
}
.twy-pdp-ht__pair-body {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(243, 241, 232, 0.78);
  margin: 0 auto 28px;
  max-width: 580px;
}
.twy-pdp-ht__pair-ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.twy-pdp-ht__pair-ctas .btn-primary {
  background: var(--clay);
  color: var(--cream);
  border-color: var(--clay);
}
.twy-pdp-ht__pair-ctas .btn-primary:hover,
.twy-pdp-ht__pair-ctas .btn-primary:focus-visible {
  background: var(--clay-deep, #3f7826);
  border-color: var(--clay-deep, #3f7826);
  color: var(--cream);
}
.twy-pdp-ht__pair-ctas .btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(243, 241, 232, 0.5);
}
.twy-pdp-ht__pair-ctas .btn-ghost:hover,
.twy-pdp-ht__pair-ctas .btn-ghost:focus-visible {
  background: rgba(243, 241, 232, 0.08);
  border-color: var(--cream);
  color: var(--cream);
}
@media (max-width: 700px) {
  .twy-pdp-ht__pair { padding: 100px 0; }
}

/* =================================================================
   Hot tub PDP — VS ALTERNATIVES
   3-column comparison vs inflatable spa / off-the-shelf rigid / WY.
   Mirrors .twy-pdp-ice__vs structure (4-col: feature + 3 products);
   accent flips from --lake (cold) to --clay (warm).
   ================================================================= */
.twy-pdp-ht__vs {
  background: var(--cream);
  padding: 96px 0;
  border-top: 1px solid var(--line);
}
.twy-pdp-ht__vs-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.twy-pdp-ht__vs-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
  margin-bottom: 14px;
  display: block;
}
.twy-pdp-ht__vs-h2 {
  font-family: var(--font-display, 'DM Serif Display', serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--ink);
}
.twy-pdp-ht__vs-h2 em {
  font-style: italic;
  color: var(--clay);
}
.twy-pdp-ht__vs-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0;
}
.twy-pdp-ht__vs-table {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.twy-pdp-ht__vs-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  border-bottom: 1px solid var(--line);
}
.twy-pdp-ht__vs-row:last-child { border-bottom: 0; }
@media (max-width: 800px) {
  .twy-pdp-ht__vs-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
  }
  .twy-pdp-ht__vs-row {
    grid-template-columns: 180px 140px 140px 180px;
    min-width: 660px;
  }
  .twy-pdp-ht__vs-cell { padding: 14px 16px; font-size: 12px; }
  .twy-pdp-ht__vs-product { font-size: 16px; }
}
.twy-pdp-ht__vs-row--head {
  background: var(--cream);
  border-bottom: 1px solid var(--line-strong, var(--line));
}
.twy-pdp-ht__vs-cell {
  padding: 18px 22px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid var(--line);
}
.twy-pdp-ht__vs-cell:last-child { border-right: 0; }
.twy-pdp-ht__vs-cell--feat {
  background: var(--cream);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  padding-top: 22px;
}
.twy-pdp-ht__vs-cell--ours {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(202,92,41,0.16) 0%, rgba(138,58,31,0) 60%),
    linear-gradient(165deg, rgba(202,92,41,0.06) 0%, rgba(202,92,41,0.02) 100%);
}
.twy-pdp-ht__vs-row--head .twy-pdp-ht__vs-cell--ours {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(202,92,41,0.22) 0%, rgba(36,22,14,0) 60%),
    linear-gradient(165deg, var(--clay) 0%, var(--clay-deep, #3f7826) 100%);
  color: var(--cream);
}
.twy-pdp-ht__vs-product {
  font-family: var(--font-display, 'DM Serif Display', serif);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.1;
}
.twy-pdp-ht__vs-row--head .twy-pdp-ht__vs-cell--ours .twy-pdp-ht__vs-product {
  color: var(--cream);
}
.twy-pdp-ht__vs-sub {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--stone-2);
}
.twy-pdp-ht__vs-row--head .twy-pdp-ht__vs-cell--ours .twy-pdp-ht__vs-sub {
  color: rgba(243, 241, 232, 0.78);
}
.twy-pdp-ht__vs-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.twy-pdp-ht__vs-mark::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.twy-pdp-ht__vs-mark--yes  { color: var(--sage-deep, #b8631f); }
.twy-pdp-ht__vs-mark--yes::before  { background: var(--sage-deep, #b8631f); box-shadow: inset 0 0 0 5px var(--sage, #93db4c); }
.twy-pdp-ht__vs-mark--no   { color: var(--clay-deep, #3f7826); }
.twy-pdp-ht__vs-mark--no::before   { background: var(--clay); box-shadow: inset 0 0 0 5px var(--paper); }
.twy-pdp-ht__vs-mark--sort { color: var(--stone-2); }
.twy-pdp-ht__vs-mark--sort::before { background: var(--stone-2); box-shadow: inset 0 0 0 5px var(--paper); }
.twy-pdp-ht__vs-mark--yes::after  { content: "Yes"; }
.twy-pdp-ht__vs-mark--no::after   { content: "No"; }
.twy-pdp-ht__vs-mark--sort::after { content: "Sort of"; }
.twy-pdp-ht__vs-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
}
.twy-pdp-ht__vs-cell--ours .twy-pdp-ht__vs-note { color: var(--ink-3); }

/* =================================================================
   Hot tub PDP — 90-DAY OWNERSHIP JOURNEY
   4-step horizontal rail with clay dotted connector lines.
   Mirrors .twy-pdp-ice__journey.
   ================================================================= */
.twy-pdp-ht__journey {
  background: var(--paper);
  padding: 96px 0;
  border-top: 1px solid var(--line);
}
.twy-pdp-ht__journey-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.twy-pdp-ht__journey-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
  margin-bottom: 14px;
  display: block;
}
.twy-pdp-ht__journey-h2 {
  font-family: var(--font-display, 'DM Serif Display', serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--ink);
}
.twy-pdp-ht__journey-h2 em { font-style: italic; color: var(--clay); }
.twy-pdp-ht__journey-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0;
}
.twy-pdp-ht__journey-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 900px) { .twy-pdp-ht__journey-rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .twy-pdp-ht__journey-rail { grid-template-columns: 1fr; } }
.twy-pdp-ht__journey-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.twy-pdp-ht__journey-rail-marker {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 22px;
}
.twy-pdp-ht__journey-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--clay);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--clay);
  flex-shrink: 0;
  z-index: 2;
}
.twy-pdp-ht__journey-line {
  position: absolute;
  left: 30px;
  right: -4px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--clay) 0%, var(--clay) 50%, var(--line-strong, var(--line)) 50%, var(--line-strong, var(--line)) 100%);
  background-size: 12px 100%;
  z-index: 1;
}
@media (max-width: 900px) {
  .twy-pdp-ht__journey-step:nth-child(2n) .twy-pdp-ht__journey-line { display: none; }
}
@media (max-width: 520px) {
  .twy-pdp-ht__journey-line { display: none; }
}
.twy-pdp-ht__journey-card { padding: 0 22px 22px; }
.twy-pdp-ht__journey-tag {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 10px;
}
.twy-pdp-ht__journey-title {
  font-family: var(--font-display, 'DM Serif Display', serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 10px;
}
.twy-pdp-ht__journey-copy {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}

/* =================================================================
   Hot tub PDP — FAQ ACCORDION (sticky-aside layout)
   Native <details>/<summary> instead of the ice-baths JS toggle —
   same visual language, no JS dependency. The +/× icon rotation is
   driven by [open] attribute on <details>.
   ================================================================= */
.twy-pdp-ht__faq {
  background: var(--cream);
  padding: 96px 0;
  border-top: 1px solid var(--line);
}
.twy-pdp-ht__faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 960px) {
  .twy-pdp-ht__faq-grid { grid-template-columns: 1fr; gap: 32px; }
}
.twy-pdp-ht__faq-aside {
  position: sticky;
  top: 120px;
}
@media (max-width: 960px) {
  .twy-pdp-ht__faq-aside { position: static; }
}
.twy-pdp-ht__faq-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
  margin-bottom: 14px;
  display: block;
}
.twy-pdp-ht__faq-h2 {
  font-family: var(--font-display, 'DM Serif Display', serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--ink);
}
.twy-pdp-ht__faq-h2 em { font-style: italic; color: var(--clay); }
.twy-pdp-ht__faq-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0 0 24px;
}
.twy-pdp-ht__faq-contact {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong, var(--line));
  padding-bottom: 4px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.twy-pdp-ht__faq-contact:hover,
.twy-pdp-ht__faq-contact:focus-visible {
  color: var(--clay);
  border-color: var(--clay);
}
.twy-pdp-ht__faq-list { border-top: 1px solid var(--line); }
.twy-pdp-ht__faq-item {
  border-bottom: 1px solid var(--line);
}
.twy-pdp-ht__faq-item > summary { list-style: none; }
.twy-pdp-ht__faq-item > summary::-webkit-details-marker { display: none; }
.twy-pdp-ht__faq-q {
  display: grid;
  grid-template-columns: 50px 1fr 24px;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 22px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.twy-pdp-ht__faq-q-num {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--stone-2);
}
.twy-pdp-ht__faq-q-text {
  font-family: var(--font-display, 'DM Serif Display', serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
}
.twy-pdp-ht__faq-q-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong, var(--line));
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  color: var(--ink);
  transition: transform 0.2s ease, background 0.2s ease;
}
.twy-pdp-ht__faq-item[open] .twy-pdp-ht__faq-q-icon {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.twy-pdp-ht__faq-a {
  padding: 0 0 24px 66px;
}
.twy-pdp-ht__faq-a p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-3);
  margin: 0;
  max-width: 640px;
}
@media (max-width: 600px) {
  .twy-pdp-ht__faq-q { grid-template-columns: 36px 1fr 24px; gap: 12px; }
  .twy-pdp-ht__faq-a { padding-left: 48px; }
}

/* 3-up perks override the generic 2-up row */
.twy-pdp-ht__perks {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.twy-pdp-ht__perks .twy-pdp__perk {
  padding: 12px 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}
.twy-pdp-ht__perks .twy-pdp__perk strong { font-size: 12px; line-height: 1.2; }
.twy-pdp-ht__perks .twy-pdp__perk span  { font-size: 10px; }

/* ---------- Technical Specification band (3-column) ---------- */
.twy-pdp-ht__signature {
  background: var(--paper);
  padding: 64px 0;
  margin-top: 80px;
}

.twy-pdp-ht__techspec {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 1.1fr) minmax(280px, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 1024px) {
  .twy-pdp-ht__techspec {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .twy-pdp-ht__techspec-col--image {
    grid-column: 1 / -1;
    order: -1;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .twy-pdp-ht__techspec {
    grid-template-columns: 1fr;
  }
  .twy-pdp-ht__signature { padding: 48px 0; }
}

.twy-pdp-ht__techspec-col {
  min-width: 0;
}
.twy-pdp-ht__techspec-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 24px;
}

/* ---- Spec list ---- */
.twy-pdp-ht__spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.twy-pdp-ht__spec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.4;
}
.twy-pdp-ht__spec-label {
  color: var(--ink);
  font-weight: 500;
  flex: 0 0 auto;
}
.twy-pdp-ht__spec-value {
  color: var(--ink);
  font-weight: 500;
  margin-left: auto;
  text-align: right;
}
/* Wrapper sits inline next to the value column and anchors the tooltip
   above the (i) button. Without this, the tooltip would position relative
   to the spec-row and we'd lose horizontal alignment when the value column
   width changes. */
.twy-pdp-ht__spec-info-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.twy-pdp-ht__spec-info {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(138, 138, 122, 0.18);
  color: var(--stone-2);
  border: 0;
  cursor: help;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.twy-pdp-ht__spec-info:hover,
.twy-pdp-ht__spec-info:focus-visible,
.twy-pdp-ht__spec-info:focus {
  background: var(--ink);
  color: var(--cream);
  outline: none;
}

/* Branded tooltip — replaces the native browser title attribute (which
   triggers slowly on desktop and not at all on touch). Renders on hover
   AND on focus, so keyboard tab-through and tap-on-mobile both surface
   the help copy. The role="tooltip" + aria-label on the button keeps
   screen readers happy; the visible tooltip is decorative for sighted
   users who can already get the same text via the aria-label. */
.twy-pdp-ht__spec-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 4px);
  width: max-content;
  max-width: 240px;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 5;
}
.twy-pdp-ht__spec-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.twy-pdp-ht__spec-info-wrap:hover .twy-pdp-ht__spec-tooltip,
.twy-pdp-ht__spec-info-wrap:focus-within .twy-pdp-ht__spec-tooltip,
.twy-pdp-ht__spec-info:focus + .twy-pdp-ht__spec-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

/* Right-edge tooltips can clip on narrow spec lists. The list's parent has
   overflow visible (verified), so the tooltip will render outside the
   list bounds when needed — but on very small viewports we cap it harder
   so it doesn't push past the screen edge. */
@media (max-width: 600px) {
  .twy-pdp-ht__spec-tooltip {
    max-width: 200px;
    font-size: 11.5px;
    /* The (i) buttons sit near the right edge of the spec column, so a
       centre-anchored tooltip (left:50% + translateX(-50%)) lays out past
       the viewport edge even while hidden, which gives the whole page a
       horizontal scrollbar on phones. Anchor it to the button's right
       edge instead so it always opens leftward and stays on-screen. */
    left: auto;
    right: 0;
    transform: translateY(4px);
  }
  .twy-pdp-ht__spec-tooltip::after {
    left: auto;
    right: 4px;
    margin-left: 0;
  }
  .twy-pdp-ht__spec-info-wrap:hover .twy-pdp-ht__spec-tooltip,
  .twy-pdp-ht__spec-info-wrap:focus-within .twy-pdp-ht__spec-tooltip,
  .twy-pdp-ht__spec-info:focus + .twy-pdp-ht__spec-tooltip {
    transform: translateY(0);
  }
}

/* ---- Show more (native <details>) ---- */
.twy-pdp-ht__spec-more {
  margin-top: 8px;
}
.twy-pdp-ht__spec-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  user-select: none;
}
.twy-pdp-ht__spec-more > summary::-webkit-details-marker { display: none; }
.twy-pdp-ht__spec-more > summary svg {
  transition: transform 0.2s var(--ease-out);
}
.twy-pdp-ht__spec-more[open] > summary svg {
  transform: rotate(180deg);
}
.twy-pdp-ht__spec-more[open] > summary [data-twy-spec-more-label]::before {
  content: "Show less";
}
.twy-pdp-ht__spec-more[open] > summary [data-twy-spec-more-label] {
  font-size: 0;
}
.twy-pdp-ht__spec-more[open] > summary [data-twy-spec-more-label]::before {
  font-size: 13px;
}
.twy-pdp-ht__spec-list--more {
  border-top: 0;
}

/* ---- Centre image ---- */
.twy-pdp-ht__techspec-img {
  width: 100%;
  height: auto;
  max-width: 460px;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  border-radius: 20px;
}

/* ---- Filter card ---- */
.twy-pdp-ht__filter-card {
  border: 2px solid var(--clay);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--paper);
}
.twy-pdp-ht__filter-card-text {
  flex: 1;
  min-width: 0;
}
.twy-pdp-ht__filter-card-eyebrow {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 4px;
}
.twy-pdp-ht__filter-card-sku {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}
.twy-pdp-ht__filter-placeholder {
  color: var(--stone-2);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.twy-pdp-ht__filter-card-buy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--clay-deep);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.15s;
}
.twy-pdp-ht__filter-card-buy:hover { color: var(--ink); }
.twy-pdp-ht__filter-card-buy.is-pending {
  color: var(--stone-2);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  border: 0;
  padding: 0;
  cursor: default;
}
.twy-pdp-ht__filter-card-thumbs {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.twy-pdp-ht__filter-card-thumbs svg {
  width: 38px;
  height: 64px;
  display: block;
}

/* ---- Right column — refurb description block ----
   Renders below the filter card on refurbished hot tub PDPs only. Replaces
   the standalone "The experience" band for refurbs (it's hidden via the
   $is_refurbished gate in the partial). Cream tonal panel matching the
   rest of the editorial palette so the prose reads as part of the spec
   side rail, not as a content-block afterthought. */
.twy-pdp-ht__techspec-desc {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.twy-pdp-ht__techspec-desc > * { margin: 0; }
.twy-pdp-ht__techspec-desc > * + * { margin-top: 10px; }
.twy-pdp-ht__techspec-desc strong,
.twy-pdp-ht__techspec-desc h3,
.twy-pdp-ht__techspec-desc h4 {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.twy-pdp-ht__techspec-desc p:first-child strong:only-child {
  /* Common case: first paragraph is just a bold subheading like
     "Only Available in Black". Promote it to a display heading. */
  margin: 0;
}

/* ---- Right column — jets copy ---- */
.twy-pdp-ht__techspec-jets {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.twy-pdp-ht__techspec-jets > * + * { margin-top: 12px; }
.twy-pdp-ht__techspec-jets-lede strong { color: var(--ink); }
.twy-pdp-ht__techspec-jets-breakdown ul {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: disc;
}
.twy-pdp-ht__techspec-jets-breakdown li { margin-bottom: 6px; }
.twy-pdp-ht__techspec-jets-breakdown strong { color: var(--ink); font-weight: 600; }
.twy-pdp-ht__techspec-jets-placeholder {
  color: var(--stone-2);
  font-style: italic;
}

/* ---- Spec sheet CTA was removed 2026-05-04 — see pdp-hot-tubs.php and
   CLAUDE.md "Hot tub PDP — why no PDF spec sheet" for the rationale.
   Rules deleted to keep the stylesheet honest. ---- */

/* ---------- Editorial description ---------- */
.twy-pdp-ht__editorial {
  background: var(--cream);
  padding: 96px 0;
}
.twy-pdp-ht__editorial-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.twy-pdp-ht__editorial-title {
  font-size: clamp(32px, 4vw, 52px);
  margin-top: 12px;
  margin-bottom: 24px;
  color: var(--ink);
  line-height: 1.05;
}
.twy-pdp-ht__editorial-title em { font-style: italic; }
.twy-pdp-ht__editorial-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-3);
}
.twy-pdp-ht__editorial-body p + p { margin-top: 1em; }
.twy-pdp-ht__editorial-figure {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cream-2);
}
.twy-pdp-ht__editorial-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Extended spec table ---------- */
.twy-pdp-ht__spectable {
  background: var(--paper);
  padding: 96px 0;
}
.twy-pdp-ht__spectable-inner {
  max-width: 840px;
  margin: 0 auto;
}
.twy-pdp-ht__spectable-head {
  text-align: center;
  margin-bottom: 48px;
}
.twy-pdp-ht__spectable-title {
  font-size: clamp(30px, 3.5vw, 44px);
  margin-top: 12px;
  color: var(--ink);
  line-height: 1;
}
.twy-pdp-ht__spectable-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.twy-pdp-ht__spectable-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.twy-pdp-ht__spectable-row dt {
  font-weight: 600;
  color: var(--stone-2);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  align-self: center;
}
.twy-pdp-ht__spectable-row dd {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

/* ---------- More-info accordions ---------- */
.twy-pdp-ht__moreinfo {
  background: var(--cream);
  padding: 80px 0;
}
.twy-pdp-ht__accords {
  max-width: 840px;
  margin: 0 auto;
}

/* ---------- Build-Your-Yard cross-promo ---------- */
.twy-pdp-ht__byy {
  background: var(--ink);
  color: var(--cream);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.twy-pdp-ht__byy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(212, 224, 168, 0.08), transparent 60%);
  pointer-events: none;
}
.twy-pdp-ht__byy-inner {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.twy-pdp-ht__byy-eyebrow { color: var(--sage); }
.twy-pdp-ht__byy-title {
  font-size: clamp(32px, 4vw, 56px);
  color: var(--cream);
  margin-top: 16px;
  line-height: 1.05;
}
.twy-pdp-ht__byy-title em {
  font-style: italic;
  color: var(--sage);
}
.twy-pdp-ht__byy-body {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(243, 241, 232, 0.78);
  margin: 20px 0 32px;
}

/* ---------- Gallery — vertical thumb slider ---------- */
/* Thumb column height is sync'd from JS to match .twy-pdp__main-img-wrap.
   Using `align-items: stretch` here would cause both siblings to stretch to the
   thumbs' natural content height (30+ thumbs) and blow up the layout. */
.twy-pdp-ht__gallery .twy-pdp__gallery-row { align-items: flex-start; }
.twy-pdp-ht__thumbs-col {
  width: 72px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* height set by JS; provide a graceful fallback if JS fails. */
  max-height: calc(6 * 72px + 5 * 12px);
}
.twy-pdp-ht__thumbs-arrow {
  width: 72px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}
.twy-pdp-ht__thumbs-arrow:hover:not(:disabled) { border-color: var(--ink); background: var(--cream); }
.twy-pdp-ht__thumbs-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.twy-pdp-ht__thumbs-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* Height is driven by the parent flex — stretches to match .twy-pdp__main-img-wrap. */
}
.twy-pdp-ht__thumbs-scroll::-webkit-scrollbar { display: none; }
.twy-pdp-ht__thumbs-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}
/* When thumbs fit (≤7), space them evenly across the main image height. */
.twy-pdp-ht__thumbs-track.is-fitting {
  gap: 0;
  justify-content: space-between;
}
/* Keep thumb squares uniform inside a flex column that may stretch. */
.twy-pdp__gallery .twy-pdp__thumb { flex: 0 0 72px; }

/* ---------- Refurbished-tub reassurance callout ----------
   Sits between the title/tagline and the rating/price block on a hot-tub PDP
   when the product is in the `refurbished-hot-tub` category. Sage tonal wash
   to read as positive reassurance, not a warning. */
.twy-pdp-ht__refurb-note {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(212, 224, 168, 0.22);
  border: 1px solid rgba(143, 163, 89, 0.35);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.twy-pdp-ht__refurb-note-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(143, 163, 89, 0.18);
  color: #b8631f;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.twy-pdp-ht__refurb-note-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 2px;
}

/* ---------- Inline stats card ---------- */
.twy-pdp-ht__stats {
  margin-top: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.twy-pdp-ht__stats[data-stats-count="3"] { grid-template-columns: repeat(3, 1fr); }
.twy-pdp-ht__stats[data-stats-count="2"] { grid-template-columns: repeat(2, 1fr); }
.twy-pdp-ht__stats[data-stats-count="1"] { grid-template-columns: 1fr; }
.twy-pdp-ht__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 0;
}
.twy-pdp-ht__stat-icon { color: var(--ink-3); display: flex; }
.twy-pdp-ht__stat-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
  font-weight: 600;
}
.twy-pdp-ht__stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.twy-pdp-ht__stat-value.is-small {
  font-size: 18px;
  font-weight: 700;
}

/* ---------- Variation form + swatches ---------- */
.twy-pdp-ht__variable {
  margin-top: 28px;
}
.twy-pdp-ht__variable .variations_form { margin: 0; }

/* Hide Woo's default variation table once swatches are active. */
.twy-pdp-ht__variable.is-swatched .variations { display: none; }

/* Swatch rows (injected by pdp.js above each select). */
.twy-pdp-ht__swatch-row {
  margin-bottom: 20px;
}
.twy-pdp-ht__swatch-row:last-of-type { margin-bottom: 24px; }
.twy-pdp-ht__swatch-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-2);
  font-weight: 600;
}
.twy-pdp-ht__swatch-head-label { color: var(--stone-2); }
.twy-pdp-ht__swatch-head-dot { opacity: 0.5; }
.twy-pdp-ht__swatch-head-value { color: var(--ink); letter-spacing: 0.1em; }
.twy-pdp-ht__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.twy-pdp-ht__swatch {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out);
}
.twy-pdp-ht__swatch:hover { transform: translateY(-1px); }
.twy-pdp-ht__swatch.is-color {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--swatch-color, #b8b5a8);
  box-shadow: 0 0 0 1px var(--line-strong) inset;
}
.twy-pdp-ht__swatch.is-color.is-selected {
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--cream);
}
.twy-pdp-ht__swatch.is-pill {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
}
.twy-pdp-ht__swatch.is-pill.is-selected {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

/* Style Woo's variation price + add-to-cart area. */
.twy-pdp-ht__variable .single_variation_wrap { margin-top: 4px; }
.twy-pdp-ht__variable .woocommerce-variation-price {
  font-size: 14px;
  color: var(--stone-2);
  margin-bottom: 12px;
}
.twy-pdp-ht__variable .woocommerce-variation-price .price { color: var(--ink); font-weight: 600; }
.twy-pdp-ht__variable .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.twy-pdp-ht__variable .woocommerce-variation-add-to-cart .quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper);
}
.twy-pdp-ht__variable .woocommerce-variation-add-to-cart .quantity input {
  width: 60px;
  height: 56px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  appearance: textfield;
}
.twy-pdp-ht__variable .woocommerce-variation-add-to-cart .quantity input:focus { outline: none; }
.twy-pdp-ht__variable .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s;
}
.twy-pdp-ht__variable .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover { transform: translateY(-1px); background: var(--clay-deep); }
.twy-pdp-ht__variable .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled,
.twy-pdp-ht__variable .woocommerce-variation-add-to-cart .single_add_to_cart_button.wc-variation-selection-needed { opacity: 0.4; pointer-events: none; }
.twy-pdp-ht__variable .reset_variations { display: none !important; } /* Woo's "clear" link, hide for design. */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .twy-pdp-ht__signature { padding: 56px 0; margin-top: 56px; }
  .twy-pdp-ht__signature-grid,
  .twy-pdp-ht__signature-grid[data-tiles="3"],
  .twy-pdp-ht__signature-grid[data-tiles="4"] {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
  .twy-pdp-ht__tile { padding: 24px 16px; }
  .twy-pdp-ht__editorial { padding: 56px 0; }
  .twy-pdp-ht__editorial-inner { grid-template-columns: 1fr; gap: 32px; }
  .twy-pdp-ht__editorial-figure { order: -1; aspect-ratio: 4 / 3; }
  .twy-pdp-ht__spectable { padding: 56px 0; }
  .twy-pdp-ht__spectable-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .twy-pdp-ht__moreinfo { padding: 56px 0; }
  .twy-pdp-ht__byy { padding: 72px 0; }
  .twy-pdp-ht__perks { grid-template-columns: 1fr; }
  .twy-pdp-ht__badge { width: 68px; height: 68px; top: 12px; right: 12px; }
  .twy-pdp-ht__badge span:last-child { font-size: 13px; }
  /* Stats card: 2-up on mobile. */
  .twy-pdp-ht__stats { grid-template-columns: repeat(2, 1fr); gap: 16px 8px; }
  .twy-pdp-ht__stat-value { font-size: 22px; }
  .twy-pdp-ht__stat-value.is-small { font-size: 16px; }
  /* Gallery: on mobile the row flips (thumbs go horizontal below) — hide the
     slider buttons and let thumbs scroll horizontally via the existing rule.
     min-width: 0 on every parent in the chain stops the wide track from
     blowing out the viewport (flex/grid items default to min-width: auto =
     content size). max-width caps the scroll container at the viewport edge. */
  .twy-pdp-ht__thumbs-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .twy-pdp-ht__thumbs-arrow { display: none; }
  .twy-pdp-ht__thumbs-scroll {
    max-height: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .twy-pdp-ht__thumbs-track,
  .twy-pdp-ht__thumbs-track.is-fitting {
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
    min-height: 0;
    min-width: 0;
    width: max-content;
  }
  /* Variation add-to-cart stacks on narrow widths. */
  .twy-pdp-ht__variable .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
  .twy-pdp-ht__variable .woocommerce-variation-add-to-cart .single_add_to_cart_button { width: 100%; }
}

/* --- Save checkout for later — subtle aside link + status. --- */
.twy-save-checkout {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cream-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.twy-save-checkout__link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.18);
  text-underline-offset: 3px;
  align-self: flex-start;
}
.twy-save-checkout__link:hover { color: var(--ink); text-decoration-color: currentColor; }
.twy-save-checkout__link svg { color: var(--sage-deep); flex-shrink: 0; }
/* --- Phone input (intl-tel-input) — align to theme input shell. --- */
.iti { width: 100%; display: block; }
.iti__tel-input, .iti input[type="tel"] {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.iti__tel-input:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(226,106,58,0.15);
}
/* separateDialCode mode renders a left-side pill inside the input — give the
   input enough left padding so typed digits don't overlap. */
.iti--separate-dial-code .iti__tel-input { padding-left: 92px !important; }
.iti--separate-dial-code .iti__selected-flag {
  border-radius: 12px 0 0 12px;
  padding: 0 10px 0 14px;
  background: transparent;
  border-right: 1px solid var(--cream-2);
}
.iti--separate-dial-code .iti__selected-flag:hover,
.iti--separate-dial-code .iti__selected-flag[aria-expanded="true"] {
  background: var(--cream);
}
.iti__selected-dial-code { color: var(--ink); font-weight: 500; font-size: 14px; }

/* --- Dropdown: modern card with search + spacious rows. --- */
.iti__dropdown-content {
  background: #fff;
  border: 0 !important;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(20, 23, 15, 0.06),
    0 18px 42px rgba(20, 23, 15, 0.14),
    0 4px 12px rgba(20, 23, 15, 0.06);
  margin-top: 6px;
  overflow: hidden;
  padding: 8px;
}

/* Inline dropdown (positioned in-flow under the input) — flatter look:
   no floating shadow, just a subtle border and rounder corners. */
.iti--inline-dropdown .iti__dropdown-content {
  box-shadow: none;
  border: 1px solid var(--cream-3) !important;
  border-radius: 18px;
}

.iti__search-input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--cream-2);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23857f73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  margin-bottom: 6px;
}
.iti__search-input::placeholder { color: var(--ink-3); opacity: 0.65; }
.iti__search-input:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(226, 106, 58, 0.12);
}

.iti__country-list {
  border: 0;
  box-shadow: none;
  border-radius: 8px;
  max-height: 280px;
  font-size: 14px;
  padding: 4px 0;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cream-3) transparent;
}
.iti__country-list::-webkit-scrollbar { width: 6px; }
.iti__country-list::-webkit-scrollbar-thumb { background: var(--cream-3); border-radius: 3px; }
.iti__country-list::-webkit-scrollbar-track { background: transparent; }

.iti__country {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  margin: 1px 4px;
  cursor: pointer;
  line-height: 1.3;
  transition: background-color 0.1s;
}
.iti__country-name { color: var(--ink); font-weight: 400; }
.iti__dial-code { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: auto; }
.iti__flag { flex-shrink: 0; }

.iti__country.iti__highlight,
.iti__country:hover {
  background-color: var(--cream);
}
.iti__country.iti__active {
  background-color: var(--sage);
  color: var(--ink);
}
.iti__country.iti__active .iti__dial-code { color: var(--ink-2); }

/* Section divider between preferred and full list. */
.iti__divider { border-bottom: 1px solid var(--cream-2); margin: 6px 8px; }

@media (max-width: 480px) {
  .iti__dropdown-content { padding: 6px; }
  .iti__country { padding: 11px 10px; }
}

/* --- Save-checkout modal. --- */
.twy-save-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: twy-save-modal-in 0.15s ease-out;
}
@keyframes twy-save-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.twy-save-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 23, 15, 0.55);
  cursor: pointer;
}
.twy-save-modal__panel {
  position: relative;
  background: var(--paper);
  border-radius: 12px;
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  animation: twy-save-modal-rise 0.2s ease-out;
}
@keyframes twy-save-modal-rise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.twy-save-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  appearance: none;
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
}
.twy-save-modal__close:hover { background: var(--cream-2); color: var(--ink); }
.twy-save-modal__title {
  margin: 0 0 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
}
.twy-save-modal__intro {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.twy-save-modal__loading,
.twy-save-modal__error {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
  padding: 16px 0;
}
.twy-save-modal__error { color: var(--clay-deep); }
.twy-save-modal__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px;
}
.twy-save-modal__url-row {
  display: flex;
  gap: 6px;
}
.twy-save-modal__url {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cream-3);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.twy-save-modal__copy {
  appearance: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  padding: 0 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
}
.twy-save-modal__copy:hover { background: var(--ink-2); }
.twy-save-modal__copy.is-copied { background: var(--sage-deep); border-color: var(--sage-deep); }
.twy-save-modal__notice {
  margin: 14px 0 18px;
  padding: 10px 12px;
  background: var(--cream-2);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}
.twy-save-modal__notice strong { color: var(--ink); }
.twy-save-modal__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.twy-save-modal__email-btn {
  appearance: none;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.twy-save-modal__email-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.twy-save-modal__email-btn:disabled { opacity: 0.6; cursor: wait; }
.twy-save-modal__email-status {
  font-size: 12px;
  color: var(--ink-3);
}
.twy-save-modal__email-status[data-kind="ok"]  { color: var(--sage-deep); }
.twy-save-modal__email-status[data-kind="err"] { color: var(--clay-deep); }

@media (max-width: 480px) {
  .twy-save-modal__panel { padding: 24px 20px; }
  .twy-save-modal__url-row { flex-direction: column; }
  .twy-save-modal__copy { padding: 10px; }
}

/* --- Resumed-checkout banner. --- */
.twy-resume-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  margin: 16px 0 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.twy-resume-banner.is-hiding { opacity: 0; transform: translateY(-4px); }
.twy-resume-banner svg { flex-shrink: 0; }
.twy-resume-banner--ok {
  background: var(--sage);
  color: var(--ink);
}
.twy-resume-banner--ok svg { color: var(--sage-deep); }
.twy-resume-banner--expired {
  background: var(--clay-soft);
  color: var(--ink);
}
.twy-resume-banner--expired svg { color: var(--clay-deep); }
.twy-resume-banner__close {
  margin-left: auto;
  appearance: none;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
}
.twy-resume-banner__close:hover { opacity: 1; }

/* ============================================================
 * Wishlist toggle button
 * Variants:
 *   .twy-wishlist-btn--card  Overlay on archive product cards (icon only)
 *   .twy-wishlist-btn--pdp   Inline pill next to "Add to yard" on PDP
 *   .twy-wishlist-btn--list  Inline button on /my-account/wishlist/ cards
 * ============================================================ */
.twy-wishlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: var(--twy-c-ink, #111);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.twy-wishlist-btn:hover { transform: translateY(-1px); }
.twy-wishlist-btn:focus-visible {
  outline: 2px solid var(--twy-c-orange, #93db4c);
  outline-offset: 2px;
}
.twy-wishlist-btn[disabled] { opacity: 0.6; cursor: progress; }
.twy-wishlist-btn .twy-wishlist-btn__icon { flex-shrink: 0; }
.twy-wishlist-btn .twy-wishlist-btn__label-on { display: none; }
.twy-wishlist-btn.is-saved .twy-wishlist-btn__label-off { display: none; }
.twy-wishlist-btn.is-saved .twy-wishlist-btn__label-on { display: inline; }
.twy-wishlist-btn.is-saved .twy-wishlist-btn__icon { fill: currentColor; }
.twy-wishlist-btn.is-saved {
  background: var(--twy-c-ink, #111);
  color: #fff;
  border-color: var(--twy-c-ink, #111);
}

/* Card variant — circular overlay top-left of the product image. */
.twy-wishlist-btn--card {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  z-index: 3;
}
.twy-wishlist-btn--card .twy-wishlist-btn__label { display: none; }
.twy-wishlist-btn--card.is-saved {
  background: var(--twy-c-ink, #111);
  color: #fff;
}

/* PDP variant — circular icon at top-right of the info column, sitting
 * in a flex row with the category eyebrow. Always 44px and visible
 * without relying on absolute positioning. */
.twy-wishlist-btn--pdp {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  background: #fff;
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.twy-wishlist-btn--pdp .twy-wishlist-btn__label { display: none; }
.twy-wishlist-btn--pdp.is-saved {
  background: var(--twy-c-ink, #111);
  color: #fff;
  border-color: var(--twy-c-ink, #111);
}

/* List variant — minimal, used inside the /my-account/wishlist/ cards. */
.twy-wishlist-btn--list {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The .twy-card__frame already has overflow: hidden + position: relative,
 * so the absolutely-positioned overlay button is clipped to the rounded
 * corners as expected.
 */

/* Profile photo replacing the user icon in the header. The icon button
 * already centres its child; the avatar just needs to be circular with
 * cover-fit so non-square uploads don't distort. A subtle ring keeps the
 * boundary visible against the icon-pill background. */
.twy-icon-btn--avatar { padding: 0; }
.twy-icon-btn__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* Weekly offer timer — low-friction urgency on shopping surfaces. */
.twy-offer-timer {
  position: fixed;
  left: 24px;
  right: auto;
  bottom: 22px;
  z-index: 88;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  width: min(760px, calc(100vw - 48px));
  padding: 16px 18px 16px 20px;
  border: 1px solid rgba(20, 22, 15, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(250,248,239,0.96), rgba(243,241,232,0.94)),
    var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 54px rgba(20, 22, 15, 0.18), 0 2px 8px rgba(20, 22, 15, 0.08);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
@keyframes twy-offer-rise {
  0% { opacity: 0; transform: translateY(18px) scale(0.985); }
  70% { opacity: 1; transform: translateY(-2px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes twy-offer-unit-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
body.twy-offer-timer-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 87;
  width: auto;
  height: auto;
  background:
    radial-gradient(ellipse 72% 82% at 0% 100%, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.34) 30%, rgba(0, 0, 0, 0.16) 52%, rgba(0, 0, 0, 0.06) 66%, rgba(0, 0, 0, 0) 82%);
  pointer-events: none;
}
.twy-offer-timer[hidden] { display: none; }
.twy-offer-timer.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: twy-offer-rise 0.42s var(--ease-out) both;
}
.twy-offer-timer::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 8px 0 0 8px;
  background: var(--clay);
}
.twy-offer-timer__copy { min-width: 0; padding-left: 2px; }
.twy-offer-timer__eyebrow {
  margin-bottom: 3px;
  color: var(--clay-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.twy-offer-timer__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.05;
}
.twy-offer-timer p {
  margin: 5px 0 0;
  color: var(--stone-2);
  font-size: 13px;
  line-height: 1.35;
}
.twy-offer-timer__count {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 8px;
}
.twy-offer-timer__unit {
  display: grid;
  place-items: center;
  min-height: 64px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.twy-offer-timer.is-visible .twy-offer-timer__unit {
  animation: twy-offer-unit-pop 0.34s var(--ease-out) both;
}
.twy-offer-timer.is-visible .twy-offer-timer__unit:nth-child(2) { animation-delay: 0.06s; }
.twy-offer-timer.is-visible .twy-offer-timer__unit:nth-child(3) { animation-delay: 0.12s; }
.twy-offer-timer__unit strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.twy-offer-timer__unit span {
  margin-top: 5px;
  color: var(--stone-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.twy-offer-timer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease;
}
.twy-offer-timer__cta:hover,
.twy-offer-timer__cta:focus-visible {
  background: var(--clay);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}
.twy-offer-timer__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--stone-2);
}
.twy-offer-timer__close:hover,
.twy-offer-timer__close:focus-visible {
  background: rgba(20, 22, 15, 0.08);
  color: var(--ink);
  outline: none;
}
.twy-offer-timer__close svg {
  width: 16px;
  height: 16px;
}

.twy-offer-modal[hidden] { display: none; }
.twy-offer-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out);
}
.twy-offer-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.twy-offer-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 15, 0.50);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.twy-offer-modal__panel {
  position: relative;
  width: min(860px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(20, 22, 15, 0.12);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.30);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.2s var(--ease-out);
}
@keyframes twy-offer-modal-panel {
  0% { opacity: 0; transform: translateY(16px) scale(0.975); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes twy-offer-card-in {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.twy-offer-modal.is-open .twy-offer-modal__panel {
  transform: translateY(0) scale(1);
  animation: twy-offer-modal-panel 0.26s var(--ease-out) both;
}
.twy-offer-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--stone-2);
}
.twy-offer-modal__close:hover,
.twy-offer-modal__close:focus-visible {
  background: rgba(20, 22, 15, 0.08);
  color: var(--ink);
  outline: none;
}
.twy-offer-modal__close svg {
  width: 17px;
  height: 17px;
}
.twy-offer-modal__head {
  max-width: 620px;
  padding-right: 42px;
}
.twy-offer-modal__eyebrow,
.twy-offer-modal__card-kicker {
  color: var(--clay-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.twy-offer-modal__head h2 {
  margin: 5px 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 500;
  line-height: 1;
}
.twy-offer-modal__head p {
  margin: 0;
  color: var(--stone-2);
  font-size: 14px;
  line-height: 1.5;
}
.twy-offer-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.twy-offer-modal__card {
  position: relative;
  display: flex;
  min-height: 170px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(ellipse 90% 85% at 0% 100%, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.62) 38%, rgba(0, 0, 0, 0.28) 68%, rgba(0, 0, 0, 0.06) 100%),
    linear-gradient(180deg, rgba(20, 22, 15, 0.20) 0%, rgba(20, 22, 15, 0.42) 48%, rgba(20, 22, 15, 0.84) 100%),
    var(--twy-offer-card-image),
    var(--cream);
  background-position: center;
  background-size: cover;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.twy-offer-modal.is-open .twy-offer-modal__card {
  animation: twy-offer-card-in 0.34s var(--ease-out) both;
}
.twy-offer-modal.is-open .twy-offer-modal__card:nth-child(2) { animation-delay: 0.04s; }
.twy-offer-modal.is-open .twy-offer-modal__card:nth-child(3) { animation-delay: 0.08s; }
.twy-offer-modal.is-open .twy-offer-modal__card:nth-child(4) { animation-delay: 0.12s; }
.twy-offer-modal.is-open .twy-offer-modal__card:nth-child(5) { animation-delay: 0.16s; }
.twy-offer-modal.is-open .twy-offer-modal__card:nth-child(6) { animation-delay: 0.20s; }
.twy-offer-modal__card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background:
    radial-gradient(circle at 86% 16%, rgba(226, 106, 58, 0.52) 0 14%, transparent 15%),
    linear-gradient(135deg, rgba(250, 248, 239, 0.18) 0 36%, rgba(212, 224, 168, 0.14) 37% 100%);
  pointer-events: none;
}
.twy-offer-modal__grid--no-refurb .twy-offer-modal__card--build-your-yard {
  grid-column: span 2;
}
.twy-offer-modal__card--build-your-yard {
  background-position: center 58%;
}
.twy-offer-modal__card--ice-baths {
  background-position: center 42%;
}
.twy-offer-modal__card--swim-spas,
.twy-offer-modal__card--refurbished-hot-tubs {
  background-position: center 48%;
}
.twy-offer-modal__card:hover,
.twy-offer-modal__card:focus-visible {
  border-color: var(--line-strong);
  box-shadow: 0 12px 30px rgba(20, 22, 15, 0.12);
  outline: none;
  transform: translateY(-2px);
}
.twy-offer-modal__card strong,
.twy-offer-modal__card-body,
.twy-offer-modal__card-kicker,
.twy-offer-modal__badge {
  position: relative;
}
.twy-offer-modal__card strong {
  display: block;
  max-width: 190px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.02;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.twy-offer-modal__card-body {
  display: block;
  max-width: 280px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 12.5px;
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.36);
}
.twy-offer-modal__card-kicker {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.36);
}
.twy-offer-modal__badge {
  align-self: flex-start;
  margin-top: 2px;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}
.twy-offer-modal__badge--bundle {
  background: var(--ink);
  color: var(--cream);
}

@media (max-width: 760px) {
  .twy-offer-timer {
    left: 12px;
    right: 12px;
    bottom: 86px;
    grid-template-columns: 1fr;
    gap: 12px;
    width: auto;
    padding: 15px 16px 16px 18px;
    background: var(--paper);
  }
  .twy-offer-timer__title { padding-right: 28px; font-size: 22px; }
  .twy-offer-timer p { font-size: 12.5px; }
  .twy-offer-timer__count {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .twy-offer-timer__unit { min-height: 58px; }
  .twy-offer-timer__unit strong { font-size: 21px; }
  .twy-offer-timer__cta { width: 100%; }
  body.twy-offer-timer-open::after {
    background:
      radial-gradient(ellipse 118% 72% at 0% 100%, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.30) 36%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0) 84%);
  }
  .twy-offer-modal {
    align-items: end;
    padding: 12px;
  }
  .twy-offer-modal__panel {
    max-height: calc(100vh - 24px);
    padding: 22px 18px 18px;
  }
  .twy-offer-modal__head { padding-right: 38px; }
  .twy-offer-modal__head h2 { font-size: 32px; }
  .twy-offer-modal__grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 18px;
  }
  .twy-offer-modal__grid--no-refurb .twy-offer-modal__card--build-your-yard {
    grid-column: auto;
  }
  .twy-offer-modal__card {
    min-height: 126px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .twy-offer-timer.is-visible,
  .twy-offer-timer.is-visible .twy-offer-timer__unit,
  .twy-offer-modal.is-open .twy-offer-modal__panel,
  .twy-offer-modal.is-open .twy-offer-modal__card {
    animation: none;
  }
}

/* Lazy-load: clay spinner on a cream tile while an image loads, instead of
   a flat placeholder box. Two surfaces feed this:
   - LiteSpeed's lazy transform on full page renders → `[data-lazyloaded]`,
     placeholder is a transparent SVG so this background shows through, and
     LiteSpeed adds `.litespeed-loaded` once the real image is in.
   - The archive load-more REST response isn't run through LiteSpeed, so its
     card images are raw `<img>`; archive-infinite-scroll.js tags them with
     `.twy-img-loading` / `.twy-img-loaded` to get the same treatment. */
img[data-lazyloaded],
.twy-card__img.twy-img-loading {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='15' fill='none' stroke='%23dcd6c6' stroke-width='4'/%3E%3Cpath d='M20 5a15 15 0 0 1 15 15' fill='none' stroke='%23E26A3A' stroke-width='4' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E")
      center / 36px no-repeat,
    #f3f1ea;
}

img[data-lazyloaded].litespeed-loaded,
.twy-card__img.twy-img-loaded {
  background: none;
  animation: twy-lazy-fade 0.35s ease;
}

@keyframes twy-lazy-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  img[data-lazyloaded].litespeed-loaded,
  .twy-card__img.twy-img-loaded {
    animation: none;
  }
}

/* ===== Category mega-menu (The Garden Hub) ===== */
.twy-header{position:relative;}
.twy-nav__list > li.twy-nav__item--mega{position:static;}
.twy-mega{position:absolute;top:calc(100% + 8px);left:50%;z-index:200;width:min(1120px,calc(100vw - 40px));background:var(--cream,#f3f1e8);border:1px solid var(--twy-c-line,#e8e2d9);border-radius:24px;box-shadow:0 24px 60px -18px rgba(20,23,15,.35);opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;padding:30px 38px 34px;}
.twy-nav__item--mega:hover>.twy-mega,.twy-nav__item--mega:focus-within>.twy-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.twy-mega__inner{column-count:4;column-gap:36px;}
.twy-mega__col{break-inside:avoid;-webkit-column-break-inside:avoid;display:block;margin:0 0 34px;}
.twy-mega__head{display:block;font-family:var(--twy-ff-display,inherit);font-weight:700;font-size:15px;letter-spacing:.01em;text-transform:none;color:var(--twy-c-ink,#14160f);margin:0 0 10px;}
.twy-mega__head:hover{color:var(--twy-c-green,#93db4c);text-decoration:none;}
.twy-mega__list{list-style:none;margin:0;padding:0;}
.twy-mega__list li{margin:0 0 7px;}
.twy-mega__list a{font-size:13.5px;line-height:1.45;color:var(--twy-c-ink-soft,#555);}
.twy-mega__list a:hover{color:var(--twy-c-green,#93db4c);text-decoration:none;}
@media(max-width:1024px){.twy-mega{display:none!important;}}
.twy-nav__item--mega > a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;}

/* ===== Shop-by-category tiles (The Garden Hub) ===== */
.twy-cats{padding:72px 0;}
.twy-cats__head{margin:0 0 32px;}
/* Eyebrow sits on the light cream section — the green --sage is too pale here, use the deeper green. */
.twy-cats__head .h-eyebrow{color:var(--clay-deep)!important;}
.twy-cats__title{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.05;margin:6px 0 0;color:var(--ink);}
.twy-cats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (min-width:700px){.twy-cats__grid{grid-template-columns:repeat(3,1fr);gap:18px;}}
/* Wide: 5 columns with a 2x2 hero feature — 7 categories fill a clean 2x5 block (no gaps). */
@media (min-width:1080px){
  .twy-cats__grid{grid-template-columns:repeat(5,1fr);grid-auto-flow:dense;gap:18px;}
  .twy-cat-tile:first-child{grid-column:span 2;grid-row:span 2;}
}
.twy-cat-tile{position:relative;display:block;text-decoration:none;color:#fff;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#2f4a25,#6eb650);box-shadow:0 8px 22px -14px rgba(20,22,15,.45);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;}
.twy-cat-tile:hover{transform:translateY(-6px);box-shadow:0 24px 44px -20px rgba(20,22,15,.55);}
.twy-cat-tile__media{display:block;position:relative;width:100%;height:100%;aspect-ratio:1/1;overflow:hidden;}
.twy-cat-tile:first-child .twy-cat-tile__media{aspect-ratio:auto;min-height:100%;}
.twy-cat-tile__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.twy-cat-tile:hover .twy-cat-tile__img{transform:scale(1.07);}
.twy-cat-tile__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,15,0) 36%,rgba(20,22,15,.30) 62%,rgba(20,22,15,.80) 100%);transition:background .4s ease;}
.twy-cat-tile:hover .twy-cat-tile__scrim{background:linear-gradient(180deg,rgba(20,22,15,.06) 18%,rgba(20,22,15,.48) 58%,rgba(20,22,15,.86) 100%);}
.twy-cat-tile__overlay{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;}
.twy-cat-tile__label{font-family:var(--twy-ff-display,inherit);font-weight:700;font-size:17px;line-height:1.15;letter-spacing:.01em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.4);}
.twy-cat-tile:first-child .twy-cat-tile__label{font-size:clamp(24px,2.4vw,32px);}
.twy-cat-tile__cta{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;}
.twy-cat-tile__cta svg{transition:transform .35s ease;}
.twy-cat-tile:hover .twy-cat-tile__cta,.twy-cat-tile:focus-visible .twy-cat-tile__cta{opacity:1;transform:translateY(0);}
.twy-cat-tile:hover .twy-cat-tile__cta svg{transform:translateX(3px);}
.twy-cat-tile:focus-visible{outline:3px solid var(--clay,#93db4c);outline-offset:3px;}
@media (max-width:600px){
  .twy-cats{padding:48px 0;}
  .twy-cats__grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .twy-cat-tile__overlay{padding:12px 12px 14px;}
  .twy-cat-tile__label{font-size:15px;}
}
@media (prefers-reduced-motion:reduce){
  .twy-cat-tile,.twy-cat-tile__img,.twy-cat-tile__cta,.twy-cat-tile__scrim{transition:none;}
  .twy-cat-tile:hover{transform:none;}
  .twy-cat-tile:hover .twy-cat-tile__img{transform:none;}
  .twy-cat-tile__cta{opacity:1;transform:none;}
}
.twy-mega__col-img{display:block;height:60px;border-radius:10px;overflow:hidden;margin:0 0 12px;background:var(--cream-2,#e9e6d7);}
.twy-mega__col-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.twy-mega__col-img:hover img{transform:scale(1.05);}
.twy-mega::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;}
.twy-nav .twy-nav__item--mega .twy-mega{position:absolute!important;}
/* mega anchor */ .twy-nav{position:relative;}