/** Shopify CDN: Minification failed

Line 5155:0 Unexpected "4."

**/
/* ==========================================================================
   The Natural Route — theme stylesheet
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography/* ==========================================================================
   The Natural Route — theme stylesheet
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons
   6.  Forms
   7.  Atoms (badge, pill, rating, icon, divider)
   8.  Cards
   9.  Announcement bar & header
   10. Navigation drawer
   11. Hero
   12. Service strip
   13. Section header
   14. Category grid
   15. Product card & grid
   16. Process
   17. Values
   18. Promo
   19. Testimonials
   20. About
   21. Newsletter
   22. Footer
   23. Modal
   24. Templates
   25. Utilities
   26. Motion & print
   ========================================================================== */

/* 1. Tokens ================================================================ */

:root {
  /* Brand colours are injected from theme settings in layout/theme.liquid.
     Everything below is derived and stays in sync automatically. */

  /* Spacing — 4px base, curated steps */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-10: 4rem;
  --sp-11: 5rem;
  --sp-12: 6rem;
  --sp-13: 7.5rem;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Type families.
     Cormorant Garamond is a high-contrast Garamond revival; the stroke
     modulation is what makes display sizes read expensive next to the sage
     palette, where a grotesque just reads like software. It is a variable
     face, so hierarchy can come from weight as well as size — but it also
     renders SMALL for its em and its thins are genuinely thin, so two rules
     hold everywhere: the display scale below sits a step larger than a
     grotesque needs, and the display face runs at --fw-display (500) rather
     than 400 so it survives small sizes and white-on-photograph.
     Inter carries body, UI and anything small — a quiet neutral grotesque
     with a tall x-height that stays out of the serif's way. */
  --font-display: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Display headings always use Cormorant. Card titles use --font-card, which
     the heading_font_scope setting repoints to the display face when the
     merchant wants it there too — so the boundary moves without editing any
     component. */
  --font-heading: var(--font-display);
  --font-card: var(--font-body);
  --fw-card: var(--fw-semi);

  /* Type scale. Restraint is the whole game here: a Garamond at a moderate
     size next to generous whitespace reads expensive, while the same face set
     large reads like a wedding invitation. Every display step therefore sits
     BELOW where the old grotesque had it — Cormorant's stroke contrast is
     carrying the presence that size used to have to. */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.0625rem;
  --fs-xl: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);

  --fs-d1: clamp(2.5rem, 4.6vw, 4.25rem);
  --fs-d2: clamp(2rem, 3.3vw, 2.875rem);
  --fs-d3: clamp(1.625rem, 2.2vw, 2.125rem);
  --fs-d4: clamp(1.125rem, 1.1vw, 1.3125rem);
  --fs-d5: 1.0625rem;

  /* Product-card titles used to share --fs-d4 with display headings, which
     meant tuning the serif inflated every card in the grid. They get their own
     step so the two can never drag each other around again. */
  --fs-card-title: clamp(0.875rem, 0.4vw + 0.8rem, 1rem);

  /* Line heights. --lh-tight is display-only (the d1 step). It stays above 1.1
     deliberately: Cormorant's descenders are long, and closing the leading any
     further makes the tails of one line run into the caps of the next — which
     reads as broken rather than tight. --lh-snug is shared with Inter card
     titles and stays where it is. */
  --lh-tight: 1.12;
  --lh-snug: 1.22;
  --lh-base: 1.5;
  --lh-normal: 1.65;
  --lh-relaxed: 1.78;

  /* Letter spacing. A Garamond is drawn with its spacing already built in, so
     display sizes take slight NEGATIVE tracking to close the gaps that only
     appear above ~40px. Inter wants a hair negative everywhere and a wide
     0.11em on the uppercase labels. */
  --ls-label: 0.11em;
  --ls-display: -0.014em;
  --ls-body: -0.006em;
  --ls-tight: -0.01em;
  --ls-tighter: -0.02em;

  /* Weights. --fw-display is the display face's own weight: 500, not 400,
     because Cormorant's 400 thins break up at UI sizes and on imagery. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-display: 500;

  /* Elevation. Tinted with the deep sage rather than neutral black — a warm
     shadow is most of what separates "premium" from "default Bootstrap".
     --sh-strength is driven by the shadow-intensity setting. */
  --sh-strength: 1;
  --sh-xs: 0 1px 2px rgba(var(--tnr-deep-rgb), calc(0.04 * var(--sh-strength)));
  --sh-sm:
    0 2px 6px -2px rgba(var(--tnr-deep-rgb), calc(0.06 * var(--sh-strength))),
    0 1px 2px rgba(var(--tnr-deep-rgb), calc(0.03 * var(--sh-strength)));
  --sh-md:
    0 10px 26px -12px rgba(var(--tnr-deep-rgb), calc(0.14 * var(--sh-strength))),
    0 2px 6px -2px rgba(var(--tnr-deep-rgb), calc(0.04 * var(--sh-strength)));
  --sh-lg:
    0 22px 50px -20px rgba(var(--tnr-deep-rgb), calc(0.18 * var(--sh-strength))),
    0 4px 12px -4px rgba(var(--tnr-deep-rgb), calc(0.05 * var(--sh-strength)));
  --sh-xl: 0 40px 80px -32px rgba(var(--tnr-deep-rgb), calc(0.24 * var(--sh-strength)));

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 400ms;

  /* Layout */
  --page-max: 1280px;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(2.5rem, 4vw, 4rem);
  --section-y-sm: clamp(2rem, 3vw, 3rem);
  --grid-gap: clamp(1rem, 1.6vw, 1.5rem);
  --measure: 62ch;
  --measure-narrow: 46ch;

  /* Marquee. 32s was a visible crawl that pulled the eye away from the content
     next to it; at 64s the motion is slow enough to read as drift. */
  --marquee-duration: 64s;
  --marquee-gap: clamp(2rem, 4vw, 4.5rem);

  /* Motion budget — set to 0 by the animations setting or reduced-motion */
  --reveal-distance: 18px;

  /* Stacking */
  --z-base: 1;
  --z-sticky: 40;
  --z-megamenu: 55;
  --z-header: 60;
  --z-sticky-bar: 70;
  --z-drawer: 80;
  --z-modal: 100;
  --z-skip: 120;
}

/* 2. Reset & base ========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Smooth scrolling only for users who have not requested reduced motion.
     WCAG 2.2 SC 2.3.3 (AAA) / SC 2.5.6 — prevents vestibular motion issues. */
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body.tnr-theme {
  margin: 0;
  color: var(--tnr-text);
  background: var(--tnr-cream);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.tnr-theme.is-locked {
  overflow: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  height: 1px;
  margin: var(--sp-8) 0;
  border: 0;
  background: var(--tnr-border);
}

::selection {
  color: #fff;
  background: var(--tnr-green);
}

:focus-visible {
  outline: 2px solid var(--tnr-green);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Only show the ring for keyboard users on interactive chrome. */
.tnr-button:focus:not(:focus-visible),
.tnr-icon-button:focus:not(:focus-visible),
.tnr-nav__link:focus:not(:focus-visible) {
  outline: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tnr-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tnr-skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  color: #fff;
  background: var(--tnr-green);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease-out);
}

.tnr-skip-link:focus {
  transform: translateY(0);
}

/* 3. Typography ============================================================ */

.tnr-heading {
  margin: 0;
  color: var(--tnr-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

/* Above ~40px a Garamond's built-in spacing starts to look loose, so the two
   largest steps pull it back in. This is where the face reads most expensive. */
.tnr-heading--d1 {
  font-size: var(--fs-d1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.tnr-heading--d2 {
  font-size: var(--fs-d2);
  letter-spacing: var(--ls-display);
}

.tnr-heading--d3 {
  font-size: var(--fs-d3);
}

.tnr-heading--d4 {
  font-size: var(--fs-d4);
  line-height: var(--lh-snug);
}

.tnr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  /* Deep sage, not the mid tone: at 12px this is body-size text and needs
     4.5:1, which the lighter sage steps cannot reach on white. */
  color: var(--tnr-green);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.55;
}

.tnr-eyebrow--plain::before {
  display: none;
}

.tnr-lead {
  max-width: var(--measure);
  margin: 0;
  color: var(--tnr-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.tnr-text-muted {
  color: var(--tnr-muted);
}

/* Rich text coming from the theme editor — normalise merchant HTML. */
.tnr-richtext {
  color: var(--tnr-muted);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.tnr-richtext>*:first-child {
  margin-top: 0;
}

.tnr-richtext>*:last-child {
  margin-bottom: 0;
}

.tnr-richtext p {
  margin: 0 0 var(--sp-4);
  max-width: var(--measure);
}

.tnr-richtext h2,
.tnr-richtext h3,
.tnr-richtext h4 {
  margin: var(--sp-8) 0 var(--sp-3);
  color: var(--tnr-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.tnr-richtext h2 {
  font-size: var(--fs-d3);
}

.tnr-richtext h3 {
  font-size: var(--fs-d4);
}

.tnr-richtext h4 {
  font-size: var(--fs-d5);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
}

.tnr-richtext ul,
.tnr-richtext ol {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-5);
  max-width: var(--measure);
}

.tnr-richtext li {
  margin-bottom: var(--sp-2);
}

.tnr-richtext ul {
  list-style: none;
  padding-left: 0;
}

.tnr-richtext ul li {
  position: relative;
  padding-left: var(--sp-6);
}

.tnr-richtext ul li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--tnr-olive);
}

.tnr-richtext a {
  color: var(--tnr-green);
  font-weight: var(--fw-semi);
  text-decoration: underline;
  text-decoration-color: rgba(var(--tnr-green-rgb), 0.3);
  transition: text-decoration-color var(--dur) var(--ease-out);
}

.tnr-richtext a:hover {
  text-decoration-color: currentColor;
}

.tnr-richtext strong {
  color: var(--tnr-text);
  font-weight: var(--fw-semi);
}

.tnr-richtext blockquote {
  margin: var(--sp-7) 0;
  padding-left: var(--sp-6);
  border-left: 2px solid var(--tnr-olive);
  color: var(--tnr-text);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-display);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-tight);
}

.tnr-richtext img {
  margin: var(--sp-7) 0;
  border-radius: var(--r-md);
}

.tnr-richtext table {
  margin: var(--sp-7) 0;
  font-size: var(--fs-md);
}

.tnr-richtext th,
.tnr-richtext td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--tnr-border);
  text-align: left;
}

/* 4. Layout primitives ===================================================== */

.tnr-page-width {
  width: min(100% - (var(--page-gutter) * 2), var(--page-max));
  margin-inline: auto;
}

.tnr-page-width--narrow {
  width: min(100% - (var(--page-gutter) * 2), 820px);
}

.tnr-section {
  position: relative;
  padding-block: var(--section-y);
}

.tnr-section--panel {
  background: var(--tnr-card);
}

/* Hairline seam between two same-coloured sections so they never merge. */
.tnr-section--panel+.tnr-section--panel {
  border-top: 1px solid var(--tnr-border);
}

.tnr-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* 5. Buttons =============================================================== */

.tnr-button {
  --btn-bg: var(--tnr-green);
  --btn-fg: #fff;
  --btn-border: var(--tnr-green);
  --btn-bg-hover: var(--tnr-green-700);

  position: relative;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-7);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.tnr-button:hover {
  background: var(--btn-bg-hover);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.tnr-button:active {
  transform: translateY(0);
  box-shadow: var(--sh-xs);
}

.tnr-button[disabled],
.tnr-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.tnr-button .tnr-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.tnr-button--primary {
  --btn-bg: var(--tnr-green);
  --btn-fg: #fff;
  --btn-border: var(--tnr-green);
  --btn-bg-hover: var(--tnr-green-700);
}

.tnr-button--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--tnr-green);
  --btn-border: var(--tnr-green-line);
  --btn-bg-hover: rgba(var(--tnr-green-rgb), 0.06);
}

.tnr-button--secondary:hover {
  border-color: var(--tnr-green);
}

.tnr-button--ghost {
  --btn-bg: var(--tnr-surface);
  --btn-fg: var(--tnr-green);
  --btn-border: var(--tnr-border);
  --btn-bg-hover: var(--tnr-surface);
}

.tnr-button--ghost:hover {
  border-color: var(--tnr-green-line);
}

/* For use on dark green surfaces. */
.tnr-button--inverse {
  --btn-bg: var(--tnr-cream);
  --btn-fg: var(--tnr-green);
  --btn-border: var(--tnr-cream);
  --btn-bg-hover: #fff;
}

.tnr-button--inverse-outline {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.4);
  --btn-bg-hover: rgba(255, 255, 255, 0.12);
}

.tnr-button--inverse-outline:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.tnr-button--sm {
  min-height: 40px;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
}

.tnr-button--lg {
  min-height: 56px;
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--fs-lg);
}

.tnr-button--full {
  width: 100%;
}

/* Text link with a sliding arrow. */
.tnr-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--tnr-green);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  text-decoration: none;
  white-space: nowrap;
}

.tnr-link .tnr-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}

.tnr-link:hover .tnr-icon {
  transform: translateX(4px);
}

.tnr-link--underline {
  text-decoration: underline;
  text-decoration-color: rgba(var(--tnr-green-rgb), 0.28);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--dur) var(--ease-out);
}

.tnr-link--underline:hover {
  text-decoration-color: currentColor;
}

.tnr-icon-button {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--tnr-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.tnr-icon-button:hover {
  color: var(--tnr-green);
  background: rgba(var(--tnr-green-rgb), 0.07);
}

.tnr-icon-button .tnr-icon {
  width: 20px;
  height: 20px;
}

/* 6. Forms ================================================================= */

.tnr-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--tnr-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
}

.tnr-field,
.tnr-select,
.tnr-textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--sp-3) var(--sp-5);
  color: var(--tnr-text);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.tnr-textarea {
  min-height: 140px;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  resize: vertical;
}

.tnr-field:hover,
.tnr-select:hover,
.tnr-textarea:hover {
  border-color: var(--tnr-green-line);
}

.tnr-field:focus,
.tnr-select:focus,
.tnr-textarea:focus {
  /* Keep the shadow/border treatment for mouse users. */
  outline: none;
  border-color: var(--tnr-green);
  box-shadow: 0 0 0 3px rgba(var(--tnr-green-rgb), 0.12);
}

/* For keyboard users: restore a visible outline that meets WCAG 1.4.11.
   The 3px shadow above may not meet non-text contrast on all backgrounds,
   so we add the global ring via :focus-visible. */
.tnr-field:focus-visible,
.tnr-select:focus-visible,
.tnr-textarea:focus-visible {
  outline: 2px solid var(--tnr-green);
  outline-offset: 2px;
}

.tnr-field::placeholder,
.tnr-textarea::placeholder {
  color: var(--tnr-muted);
  opacity: 0.7;
}

.tnr-select {
  padding-right: var(--sp-9);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F3E30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-5) center;
  background-size: 16px;
}

.tnr-form-row {
  display: grid;
  gap: var(--sp-4);
}

.tnr-form-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tnr-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: start;
}

.tnr-inline-form .tnr-form-message {
  grid-column: 1 / -1;
}

.tnr-form-message {
  margin: var(--sp-2) 0 0;
  color: var(--tnr-green);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

.tnr-form-message--error {
  color: #9a3324;
}

.tnr-form-message--error ul {
  margin: 0;
  padding-left: var(--sp-5);
}

.tnr-form-note {
  margin: var(--sp-3) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

/* Quantity stepper */
.tnr-quantity {
  display: inline-grid;
  grid-template-columns: 44px minmax(48px, 1fr) 44px;
  align-items: center;
  height: 50px;
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.tnr-quantity__button {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--tnr-green);
  transition: background-color var(--dur) var(--ease-out);
}

.tnr-quantity__button:hover {
  background: rgba(var(--tnr-green-rgb), 0.07);
}

.tnr-quantity__button .tnr-icon {
  width: 15px;
  height: 15px;
}

.tnr-quantity__input {
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  appearance: textfield;
  -moz-appearance: textfield;
}

.tnr-quantity__input::-webkit-outer-spin-button,
.tnr-quantity__input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.tnr-quantity__input:focus {
  /* Do not suppress focus within the quantity widget — the surrounding
     border-box already highlights on the widget level, but keyboard users
     also need a clear indicator on the input itself. */
  outline: 2px solid var(--tnr-green);
  outline-offset: -2px;
  border-radius: 0;
}

/* Variant selector as pills */
.tnr-variant-group {
  display: grid;
  gap: var(--sp-3);
}

.tnr-variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tnr-variant-option {
  position: relative;
}

.tnr-variant-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tnr-variant-option span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-5);
  color: var(--tnr-text);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.tnr-variant-option span:hover {
  border-color: var(--tnr-green-line);
}

.tnr-variant-option input:checked+span {
  color: #fff;
  background: var(--tnr-green);
  border-color: var(--tnr-green);
}

.tnr-variant-option input:focus-visible+span {
  outline: 2px solid var(--tnr-green);
  outline-offset: 3px;
}

.tnr-variant-option input:disabled+span {
  color: var(--tnr-muted);
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* 7. Atoms ================================================================= */

.tnr-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tnr-icon--solid {
  fill: currentColor;
  stroke: none;
}

.tnr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.4rem 0.7rem;
  color: var(--tnr-green);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.tnr-badge--accent {
  color: #fff;
  background: var(--tnr-green);
  border-color: var(--tnr-green);
}

.tnr-badge--olive {
  color: #fff;
  background: var(--tnr-olive);
  border-color: var(--tnr-olive);
}

.tnr-badge--soft {
  color: var(--tnr-green);
  background: var(--tnr-sage-soft);
  border-color: transparent;
}

.tnr-badge--sold-out {
  color: var(--tnr-muted);
  background: var(--tnr-card);
  border-color: var(--tnr-border);
}

/* Star rating */
.tnr-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1;
}

.tnr-rating__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--tnr-olive);
}

.tnr-rating__stars .tnr-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}

.tnr-rating__stars .tnr-icon--empty {
  color: var(--tnr-border);
}

.tnr-rating__count {
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.tnr-rating--lg .tnr-rating__stars .tnr-icon {
  width: 17px;
  height: 17px;
}

/* Circular mark used by process steps, perks, categories */
.tnr-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--tnr-green);
  background: var(--tnr-sage-soft);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.tnr-mark .tnr-icon {
  width: 21px;
  height: 21px;
}

.tnr-mark--accent {
  color: #fff;
  background: var(--tnr-green);
}

.tnr-mark--olive {
  color: #fff;
  background: var(--tnr-olive);
}

.tnr-mark--outline {
  color: var(--tnr-green);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
}

.tnr-price {
  color: var(--tnr-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
}

.tnr-price__compare {
  margin-left: var(--sp-2);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  text-decoration: line-through;
}

.tnr-price--lg {
  font-size: clamp(1.5rem, 2vw, 1.875rem);
}

/* 8. Cards ================================================================= */

.tnr-card {
  position: relative;
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.tnr-card--flat {
  box-shadow: none;
}

.tnr-card--interactive:hover {
  border-color: var(--tnr-green-line);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}

.tnr-media {
  position: relative;
  overflow: hidden;
  background: var(--tnr-card);
  border-radius: var(--r-lg);
}

.tnr-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Neutral placeholder — a soft botanical wash, no faux product illustration. */
.tnr-media__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--tnr-olive);
  background:
    radial-gradient(circle at 30% 25%, rgba(var(--tnr-olive-rgb), 0.16), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(var(--tnr-green-rgb), 0.1), transparent 55%),
    var(--tnr-card);
}

.tnr-media__placeholder .tnr-icon {
  width: 30%;
  max-width: 76px;
  height: auto;
  opacity: 0.32;
  stroke-width: 1.1;
}

/* 9. Announcement bar & header ============================================= */

.tnr-announcement {
  color: rgba(255, 255, 255, 0.9);
  background: var(--tnr-deep);
  font-size: var(--fs-xs);
}

.tnr-announcement__inner {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
}

.tnr-announcement__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tnr-announcement__item .tnr-icon {
  width: 15px;
  height: 15px;
  color: var(--tnr-sage);
}

.tnr-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(var(--tnr-cream-rgb), 0.85);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.tnr-header.is-stuck {
  background: rgba(var(--tnr-cream-rgb), 0.95);
  border-bottom-color: var(--tnr-border);
  box-shadow: 0 6px 24px -18px rgba(var(--tnr-green-rgb), 0.5);
}

.tnr-header__inner {
  min-height: 120px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
}

/* Centred logo: nav moves to a full-width row beneath the brand line. */
.tnr-header__inner--center {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "spacer logo actions"
    "nav nav nav";
  row-gap: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.tnr-header__inner--center .tnr-logo {
  grid-area: logo;
  justify-self: center;
}

.tnr-header__inner--center .tnr-nav {
  grid-area: nav;
}

.tnr-header__inner--center .tnr-header__actions {
  grid-area: actions;
}

.tnr-logo {
  display: inline-flex;
  align-items: center;
  color: var(--tnr-text);
  text-decoration: none;
}

.tnr-logo__image {
  width: auto;
  max-width: var(--logo-max-w, 240px);
  max-height: 110px;
  object-fit: contain;
}

@media (max-width: 989px) {
  .tnr-logo {
    max-width: 110px;
  }
  .tnr-logo__image {
    max-width: 100%;
    max-height: 60px;
  }
  .tnr-header__inner {
    gap: 4px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .tnr-header__actions {
    gap: 4px;
  }
  .tnr-search-icon-mobile,
  .tnr-search-icon-desktop,
  .tnr-header__actions .tnr-search,
  #TnrLocalization,
  .tnr-header__actions a[href*="account"] {
    display: none !important;
  }
}

/* Primary navigation */
.tnr-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-1);
}

.tnr-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-4);
  color: var(--tnr-text);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

/* One hover affordance only: a centred underline that grows from the middle. */
.tnr-nav__link::after {
  content: "";
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: 6px;
  height: 1.5px;
  border-radius: var(--r-pill);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease-out);
}

.tnr-nav__link:hover,
.tnr-nav__link[aria-current="page"] {
  color: var(--tnr-green);
}

.tnr-nav__link:hover::after,
.tnr-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.tnr-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  justify-self: end;
}

.tnr-cart-link {
  position: relative;
}

.tnr-cart-count {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding-inline: 4px;
  color: #fff;
  background: var(--tnr-green);
  border: 2px solid var(--tnr-cream);
  border-radius: var(--r-pill);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tnr-header__cta {
  margin-left: var(--sp-3);
}

.tnr-nav-toggle {
  display: none;
}

/* 10. Navigation drawer ==================================================== */

.tnr-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}

.tnr-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tnr-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--tnr-green-rgb), 0.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.tnr-drawer.is-open .tnr-drawer__overlay {
  opacity: 1;
}

.tnr-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--tnr-cream);
  box-shadow: var(--sh-xl);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tnr-drawer.is-open .tnr-drawer__panel {
  transform: translateX(0);
}

.tnr-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-drawer__title {
  margin: 0;
  color: var(--tnr-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-drawer__nav {
  display: grid;
  align-content: start;
  padding: var(--sp-4) var(--sp-6);
}

.tnr-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  color: var(--tnr-text);
  border-bottom: 1px solid var(--tnr-border);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-tight);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.tnr-drawer__link:hover {
  color: var(--tnr-green);
}

.tnr-drawer__link .tnr-icon {
  width: 17px;
  height: 17px;
  color: var(--tnr-olive);
  transition: transform var(--dur) var(--ease-out);
}

.tnr-drawer__link:hover .tnr-icon {
  transform: translateX(4px);
}

.tnr-drawer__footer {
  margin-top: auto;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-top: 1px solid var(--tnr-border);
}

.tnr-drawer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
}

.tnr-drawer__meta a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
}

.tnr-drawer__meta a:hover {
  color: var(--tnr-green);
}

.tnr-drawer__meta .tnr-icon {
  width: 16px;
  height: 16px;
}

/* 11. Hero ================================================================= */

.tnr-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 3vw, 3rem);
  overflow: hidden;
  /* Layered organic gradient — multiple ellipses create soft light-play that
     feels hand-painted rather than computed. */
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(var(--tnr-sage-rgb), 0.22), transparent 55%),
    radial-gradient(ellipse 60% 80% at 100% 10%, rgba(var(--tnr-green-rgb), 0.10), transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(var(--tnr-olive-rgb), 0.08), transparent 60%),
    radial-gradient(ellipse 30% 40% at 70% 60%, rgba(var(--tnr-sage-rgb), 0.06), transparent 50%),
    var(--tnr-cream);
}

/* --- Botanical SVG accents ------------------------------------------------
   Decorative leaf illustrations that drift slowly, matching the olive branch
   in the brand logo. They live outside the page-width so they peek in from
   the edges on wide screens. */

.tnr-hero__accent {
  position: absolute;
  pointer-events: none;
  color: var(--tnr-olive);
  z-index: 0;
}

.tnr-hero__accent--top-right {
  top: -2rem;
  right: -2rem;
  width: clamp(160px, 22vw, 320px);
  animation: tnr-hero-drift-1 18s ease-in-out infinite alternate;
}

.tnr-hero__accent--bottom-left {
  bottom: 2rem;
  left: -1rem;
  width: clamp(120px, 16vw, 240px);
  animation: tnr-hero-drift-2 22s ease-in-out infinite alternate;
}

@keyframes tnr-hero-drift-1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(-8px, 12px) rotate(3deg);
  }
}

@keyframes tnr-hero-drift-2 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(6px, -10px) rotate(-2deg);
  }
}

/* --- Layout --------------------------------------------------------------- */

.tnr-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

/* --- Content column ------------------------------------------------------- */

.tnr-hero__content {
  max-width: 36rem;
}

/* Staggered entrance animation for each content element. */
[data-tnr-hero-item] {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 18px));
  animation: tnr-hero-reveal 0.7s var(--ease-out) forwards;
  animation-delay: calc(0.15s + var(--hero-item-i, 0) * 0.1s);
}

.tnr-hero__content [data-tnr-hero-item]:nth-child(1) {
  --hero-item-i: 0;
}

.tnr-hero__content [data-tnr-hero-item]:nth-child(2) {
  --hero-item-i: 1;
}

.tnr-hero__content [data-tnr-hero-item]:nth-child(3) {
  --hero-item-i: 2;
}

.tnr-hero__content [data-tnr-hero-item]:nth-child(4) {
  --hero-item-i: 3;
}

.tnr-hero__content [data-tnr-hero-item]:nth-child(5) {
  --hero-item-i: 4;
}

@keyframes tnr-hero-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tnr-hero__eyebrow {
  margin-bottom: var(--sp-5);
}

.tnr-hero__eyebrow .tnr-icon {
  width: 16px;
  height: 16px;
  color: var(--tnr-olive);
  margin-right: var(--sp-1);
}

.tnr-hero__heading {
  max-width: 17ch;
  font-size: clamp(2.75rem, 5.2vw, 4.75rem);
  /* Decorative underline accent on the heading — a subtle olive line that
     reinforces the natural/organic character. */
  background-image: linear-gradient(to right,
      rgba(var(--tnr-olive-rgb), 0.25) 0%,
      rgba(var(--tnr-olive-rgb), 0.08) 100%);
  background-position: 0 92%;
  background-size: 100% 3px;
  background-repeat: no-repeat;
  padding-bottom: 0.1em;
}

.tnr-hero__text {
  margin-top: var(--sp-5);
  max-width: 36rem;
  font-size: var(--fs-lg);
}

/* --- Price display -------------------------------------------------------- */

.tnr-hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-7) 0 0;
  padding: var(--sp-4) var(--sp-6);
  background: rgba(var(--tnr-sage-rgb), 0.15);
  border-radius: var(--r-pill);
  width: fit-content;
}

.tnr-hero__price-value {
  color: var(--tnr-deep);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
}

.tnr-hero__price-separator {
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--tnr-olive);
  opacity: 0.5;
}

.tnr-hero__price-note {
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

/* --- Buttons -------------------------------------------------------------- */

.tnr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.tnr-hero__cta {
  gap: var(--sp-3);
}

.tnr-hero__cta-arrow {
  transition: transform var(--dur) var(--ease-out);
}

.tnr-hero__cta:hover .tnr-hero__cta-arrow {
  transform: translateX(4px);
}

/* --- Media column --------------------------------------------------------- */

.tnr-hero__media-wrapper {
  position: relative;
  /* Float the wrapper slightly upward on large screens for visual interest. */
  animation: tnr-hero-media-in 0.9s 0.3s var(--ease-out) both;
}

@keyframes tnr-hero-media-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tnr-hero__media {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 72vh;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--tnr-card);
  box-shadow:
    0 24px 60px -16px rgba(var(--tnr-deep-rgb), 0.2),
    0 8px 20px -8px rgba(var(--tnr-deep-rgb), 0.08),
    inset 0 0 0 1px rgba(var(--tnr-sage-rgb), 0.3);
}

.tnr-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s var(--ease-out);
}

.tnr-hero__media:hover img {
  transform: scale(1.04);
}

/* Organic radial glow on image bottom — fades the image into the chip. */
.tnr-hero__media-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(var(--tnr-sage-rgb), 0.18), transparent 70%),
    linear-gradient(to top, rgba(var(--tnr-deep-rgb), 0.06) 0%, transparent 30%);
}

/* --- Floating review chip ------------------------------------------------- */

.tnr-hero__chip {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: rgba(255, 255, 255, 0.88);
  border-radius: var(--r-lg);
  box-shadow:
    0 8px 32px -8px rgba(var(--tnr-deep-rgb), 0.14),
    0 2px 8px rgba(var(--tnr-deep-rgb), 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  /* Entrance: float up from below the image. */
  animation: tnr-hero-chip-in 0.6s 0.8s var(--ease-spring) both;
  z-index: 2;
}

@keyframes tnr-hero-chip-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tnr-hero__chip-stars {
  flex: 0 0 auto;
}

.tnr-hero__chip-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tnr-hero__chip-text strong {
  color: var(--tnr-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.tnr-hero__chip-text span {
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

/* --- Trust row ------------------------------------------------------------ */

.tnr-hero__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(3rem, 5vw, 5rem);
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--tnr-border);
  position: relative;
  z-index: 1;
}

.tnr-hero__trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6) 0 0;
  /* Staggered entrance driven by inline custom-property. */
  opacity: 0;
  transform: translateY(12px);
  animation: tnr-hero-reveal 0.5s var(--ease-out) forwards;
  animation-delay: calc(0.9s + var(--trust-i, 0) * 0.12s);
}

.tnr-hero__trust-item+.tnr-hero__trust-item {
  padding-left: var(--sp-6);
  border-left: 1px solid var(--tnr-border);
}

/* Circular icon badge for trust items — echoes the brand's round jar
   motif and gives each point a visual anchor. */
.tnr-hero__trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: rgba(var(--tnr-sage-rgb), 0.22);
  color: var(--tnr-green);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}

.tnr-hero__trust-icon .tnr-icon {
  width: 20px;
  height: 20px;
}

.tnr-hero__trust-item:hover .tnr-hero__trust-icon {
  background: rgba(var(--tnr-green-rgb), 0.15);
  transform: scale(1.08);
}

.tnr-hero__trust-text {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
}

.tnr-hero__trust-text strong {
  color: var(--tnr-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.005em;
}

.tnr-hero__trust-text span {
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  text-wrap: pretty;
}

/* 12. Service strip ======================================================== */

.tnr-service-strip {
  padding-block: var(--sp-5);
  background: var(--tnr-card);
  border-block: 1px solid var(--tnr-border);
}

.tnr-service-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.tnr-service-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  color: var(--tnr-text);
  text-align: left;
}

.tnr-service-item+.tnr-service-item {
  border-left: 1px solid var(--tnr-border);
}

.tnr-service-item .tnr-icon {
  width: 22px;
  height: 22px;
  color: var(--tnr-olive);
}

.tnr-service-item span {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
}

/* 13. Section header ======================================================= */

/* Left-aligned block with an optional action on the right. The supporting
   copy sits directly under the heading on the same measure — never floated
   to the bottom-right of the grid. */
.tnr-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-6) var(--sp-8);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.tnr-section-header__main {
  max-width: 44rem;
}

.tnr-section-header__heading {
  font-size: var(--fs-d2);
}

.tnr-section-header__copy {
  margin-top: var(--sp-4);
  max-width: var(--measure);
  color: var(--tnr-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

.tnr-section-header__copy p {
  margin: 0 0 var(--sp-3);
}

.tnr-section-header__copy>*:last-child {
  margin-bottom: 0;
}

.tnr-section-header__action {
  padding-bottom: var(--sp-1);
}

.tnr-section-header--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.tnr-section-header--center .tnr-section-header__main {
  display: grid;
  justify-items: center;
}

.tnr-section-header--center .tnr-section-header__copy {
  margin-inline: auto;
}

/* 14. Category grid ======================================================== */

.tnr-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.tnr-category-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-5);
  min-height: 260px;
  padding: var(--sp-6);
  color: inherit;
  text-decoration: none;
}

.tnr-category-card__title {
  display: block;
  margin: 0;
  color: var(--tnr-text);
  font-family: var(--font-card);
  font-size: var(--fs-d4);
  font-weight: var(--fw-card);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.tnr-category-card__text {
  display: block;
  margin: var(--sp-2) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.tnr-category-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--tnr-green);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

.tnr-category-card__cta .tnr-icon {
  width: 15px;
  height: 15px;
  transition: transform var(--dur) var(--ease-out);
}

.tnr-category-card:hover .tnr-category-card__cta .tnr-icon {
  transform: translateX(4px);
}

/* 15. Product card & grid ================================================== */

.tnr-product-grid {
  display: grid;
  grid-template-columns: repeat(var(--product-columns, 3), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.tnr-product-grid--4 {
  --product-columns: 4;
}

.tnr-product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tnr-product-card__media {
  position: relative;
  aspect-ratio: var(--card-ratio, 1 / 1);
  overflow: hidden;
  background: var(--tnr-card);
}

/* Second image, cross-faded on hover. Only rendered when the product has
   more than one image. */
.tnr-product-card__media-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tnr-product-card:hover .tnr-product-card__media-alt {
    opacity: 1;
  }
}

.tnr-product-card--center {
  text-align: center;
}

.tnr-product-card--center .tnr-product-card__body {
  align-items: center;
}

.tnr-product-card--center .tnr-product-card__foot {
  justify-content: center;
}

/* The title's stretched link sits at z-index 1, so any real control inside
   the body has to rise above it. */
.tnr-product-card__body .tnr-product-card__form {
  position: relative;
  z-index: 2;
  margin: 0;
}

.tnr-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.tnr-product-card:hover .tnr-product-card__media img {
  transform: scale(1.04);
}

.tnr-product-card__badges {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: calc(100% - var(--sp-8));
}

/* Quick add — a real button with an accessible name, not a CSS pseudo glyph. */
.tnr-quick-add {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--tnr-green);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-spring),
    opacity var(--dur) var(--ease-out);
}

.tnr-quick-add .tnr-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.tnr-quick-add:hover {
  background: var(--tnr-green-700);
  transform: scale(1.08);
}

.tnr-quick-add[disabled] {
  color: var(--tnr-muted);
  background: var(--tnr-card);
  box-shadow: var(--sh-xs);
  cursor: not-allowed;
  transform: none;
}

/* On pointer devices the quick-add fades in; on touch it is always visible. */
@media (hover: hover) and (pointer: fine) {
  .tnr-quick-add {
    opacity: 0;
    transform: translateY(6px);
  }

  .tnr-product-card:hover .tnr-quick-add,
  .tnr-product-card:focus-within .tnr-quick-add {
    opacity: 1;
    transform: translateY(0);
  }
}

.tnr-product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2) var(--sp-4);
}

.tnr-product-card__title {
  margin: 0;
  color: var(--tnr-text);
  font-family: var(--font-card);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-card);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.tnr-product-card__title a {
  text-decoration: none;
}

/* Stretch the title link across the card so the whole tile is clickable,
   while the quick-add button stays above it. */
.tnr-product-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tnr-product-card__text {
  margin: 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  /* Clamp so every card in a row keeps the same footprint. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tnr-product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
}

/* 16. Process ============================================================== */

.tnr-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.tnr-split--reverse .tnr-split__media {
  order: 2;
}

.tnr-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--tnr-surface);
  box-shadow: var(--sh-md);
}

.tnr-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-seal {
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-5);
  width: 132px;
  height: 132px;
  display: grid;
  place-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4);
  /* The brand sage doing brand work: as a surface with ink type it reads
     11.3:1, where the same colour behind white text would be 1.54:1. */
  color: var(--tnr-text);
  background: var(--tnr-sage);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  text-align: center;
}

.tnr-seal strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
}

.tnr-seal span {
  display: block;
  /* Darker than the action colour: on #CAD3C5 that only makes 3.73:1. */
  color: var(--tnr-green-700);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-step-list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  counter-reset: tnr-step;
}

.tnr-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-md);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.tnr-step:hover {
  border-color: var(--tnr-green-line);
  box-shadow: var(--sh-sm);
}

.tnr-step__title {
  margin: 0;
  color: var(--tnr-text);
  font-size: var(--fs-d5);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

.tnr-step__text {
  margin: var(--sp-2) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

/* 17. Values =============================================================== */

.tnr-value-list {
  display: grid;
  gap: var(--sp-3);
}

/* 18. Promo ================================================================ */

.tnr-promo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--grid-gap);
  align-items: stretch;
}

.tnr-promo__primary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: rgba(255, 255, 255, 0.84);
  background:
    radial-gradient(ellipse 80% 60% at 85% 10%, rgba(var(--tnr-olive-rgb), 0.34), transparent 62%),
    var(--tnr-deep);
  border-radius: var(--r-xl);
}

.tnr-promo__primary .tnr-heading {
  color: #fff;
  font-size: var(--fs-d3);
}

.tnr-promo__primary .tnr-eyebrow {
  color: var(--tnr-sage);
}

.tnr-promo__primary .tnr-richtext {
  margin-top: var(--sp-4);
  color: rgba(255, 255, 255, 0.76);
}

.tnr-promo__actions {
  margin-top: var(--sp-7);
}

.tnr-promo__perks {
  display: grid;
  align-content: center;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-xl);
}

.tnr-perk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  transition: background-color var(--dur) var(--ease-out);
}

.tnr-perk:hover {
  background: var(--tnr-card);
}

.tnr-perk__title {
  margin: 0;
  color: var(--tnr-text);
  font-size: var(--fs-d5);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

.tnr-perk__text {
  margin: var(--sp-1) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

/* 19. Testimonials ========================================================= */

.tnr-carousel {
  position: relative;
}

.tnr-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, calc(33.333% - var(--sp-4)));
  gap: var(--sp-5);
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.tnr-carousel__track::-webkit-scrollbar {
  display: none;
}

.tnr-carousel__controls {
  display: flex;
  gap: var(--sp-2);
}

.tnr-carousel__button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--tnr-green);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}

.tnr-carousel__button:hover:not([disabled]) {
  border-color: var(--tnr-green);
  background: var(--tnr-green);
  color: #fff;
}

.tnr-carousel__button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.tnr-review-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-7);
  scroll-snap-align: start;
}

.tnr-review-card__quote {
  margin: 0;
  color: var(--tnr-text);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-display);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
}

.tnr-review-card__quote p {
  margin: 0;
}

.tnr-review-card__footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--tnr-border);
}

.tnr-review-card__avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--tnr-green);
  background: var(--tnr-sage-soft);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.tnr-review-card__cite {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-style: normal;
}

.tnr-review-card__name {
  color: var(--tnr-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
}

.tnr-review-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
}

.tnr-review-card__meta .tnr-icon {
  width: 13px;
  height: 13px;
  color: var(--tnr-olive);
}

/* 20. About ================================================================ */

.tnr-about__actions {
  margin-top: var(--sp-7);
}

/* 21. Newsletter =========================================================== */

.tnr-newsletter {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 80% at 12% 0%, rgba(var(--tnr-olive-rgb), 0.3), transparent 60%),
    var(--tnr-deep);
}

.tnr-newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.tnr-newsletter__heading {
  color: #fff;
  font-size: var(--fs-d2);
}

.tnr-newsletter__copy {
  margin-top: var(--sp-4);
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

.tnr-newsletter__copy p {
  margin: 0 0 var(--sp-3);
}

.tnr-newsletter__copy>*:last-child {
  margin-bottom: 0;
}

.tnr-newsletter .tnr-eyebrow {
  color: var(--tnr-sage);
}

.tnr-newsletter .tnr-field {
  border-color: transparent;
}

.tnr-newsletter .tnr-form-message {
  color: #fff;
}

.tnr-newsletter__form-note {
  margin: var(--sp-4) 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-sm);
}

/* 22. Footer =============================================================== */

.tnr-footer {
  padding-block: clamp(3rem, 5vw, 4.5rem) var(--sp-6);
  color: var(--tnr-muted);
  background: var(--tnr-card);
  border-top: 1px solid var(--tnr-border);
}

.tnr-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr)) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
}

.tnr-footer__brand p {
  margin: var(--sp-4) 0 0;
  max-width: 34ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.tnr-footer__title {
  margin: 0 0 var(--sp-4);
  color: var(--tnr-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-footer__nav {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

.tnr-footer__nav a {
  width: fit-content;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.tnr-footer__nav a:hover {
  color: var(--tnr-green);
}

.tnr-footer__newsletter p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.tnr-footer__social {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.tnr-footer__social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--tnr-green);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  transition:
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.tnr-footer__social a:hover {
  color: #fff;
  background: var(--tnr-green);
  transform: translateY(-2px);
}

.tnr-footer__social .tnr-icon {
  width: 18px;
  height: 18px;
}

.tnr-footer__contact {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
}

.tnr-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.tnr-footer__contact a:hover {
  color: var(--tnr-green);
}

.tnr-footer__contact .tnr-icon {
  width: 16px;
  height: 16px;
  color: var(--tnr-olive);
}

.tnr-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--tnr-border);
  font-size: var(--fs-sm);
}

.tnr-footer__bottom p {
  margin: 0;
}

.tnr-footer__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.tnr-footer__payments>span[aria-hidden] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.tnr-footer__payments svg {
  display: inline-block;
  width: 38px;
  height: 24px;
  border-radius: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* 23. Modal ================================================================ */

.tnr-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(var(--tnr-green-rgb), 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease-out);
}

.tnr-popup.is-open {
  opacity: 1;
  visibility: visible;
}

.tnr-popup__overlay {
  position: absolute;
  inset: 0;
}

.tnr-popup__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - var(--sp-9));
  overflow-y: auto;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--tnr-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  transform: translateY(14px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-spring);
}

.tnr-popup.is-open .tnr-popup__panel {
  transform: translateY(0) scale(1);
}

.tnr-popup__heading {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
}

.tnr-popup__text {
  margin: var(--sp-4) 0 0;
  color: var(--tnr-muted);
  line-height: var(--lh-relaxed);
}

.tnr-popup__form {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.tnr-popup__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--tnr-muted);
  background: var(--tnr-card);
  border-radius: var(--r-pill);
  transition:
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.tnr-popup__close:hover {
  color: var(--tnr-text);
  background: var(--tnr-border);
}

.tnr-popup__close .tnr-icon {
  width: 17px;
  height: 17px;
}

/* 24. Templates ============================================================ */

.tnr-template {
  padding-block: clamp(2.5rem, 4vw, 3.5rem) var(--section-y);
}

/* Breadcrumbs */
.tnr-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
}

.tnr-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.tnr-breadcrumbs a:hover {
  color: var(--tnr-green);
}

.tnr-breadcrumbs [aria-current="page"] {
  color: var(--tnr-text);
  font-weight: var(--fw-medium);
}

.tnr-breadcrumbs__sep {
  color: var(--tnr-border);
}

/* Page header */
.tnr-page-header {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tnr-page-header__title {
  font-size: var(--fs-d2);
}

.tnr-page-header__text {
  margin-top: var(--sp-4);
  color: var(--tnr-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

/* Collection toolbar */
.tnr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-toolbar__count {
  margin: 0;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
}

.tnr-toolbar__sort {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.tnr-toolbar__sort label {
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  white-space: nowrap;
}

.tnr-toolbar__sort .tnr-select {
  min-height: 44px;
  width: auto;
  min-width: 200px;
  padding-block: var(--sp-2);
  font-size: var(--fs-md);
}

/* Pagination */
.tnr-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.tnr-pagination__item {
  min-width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding-inline: var(--sp-3);
  color: var(--tnr-text);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition:
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.tnr-pagination__item:hover {
  border-color: var(--tnr-green-line);
  color: var(--tnr-green);
}

.tnr-pagination__item[aria-current="page"] {
  color: #fff;
  background: var(--tnr-green);
  border-color: var(--tnr-green);
}

.tnr-pagination__item .tnr-icon {
  width: 16px;
  height: 16px;
}

.tnr-pagination__gap {
  padding-inline: var(--sp-1);
  color: var(--tnr-muted);
}

/* Empty state */
.tnr-empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: clamp(3rem, 6vw, 5rem) var(--sp-5);
  text-align: center;
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
}

.tnr-empty .tnr-icon {
  width: 44px;
  height: 44px;
  color: var(--tnr-olive);
  opacity: 0.5;
}

.tnr-empty__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-d3);
  font-weight: var(--fw-display);
}

.tnr-empty p {
  margin: 0;
  max-width: 44ch;
  color: var(--tnr-muted);
}

/* Product page */
.tnr-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
}

.tnr-gallery {
  display: grid;
  gap: var(--sp-3);
  position: sticky;
  top: 6rem;
}

.tnr-gallery__main {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tnr-card);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-xl);
}

.tnr-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: var(--sp-3);
}

.tnr-gallery__thumb {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: var(--tnr-card);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.tnr-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-gallery__thumb:hover {
  border-color: var(--tnr-green-line);
}

.tnr-gallery__thumb.is-active {
  border-color: var(--tnr-green);
  box-shadow: 0 0 0 2px rgba(var(--tnr-green-rgb), 0.16);
}

.tnr-product-info {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.tnr-product-info__title {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
}

.tnr-product-info__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
}

.tnr-product-info__form {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.tnr-product-info__buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: stretch;
}
.tnr-product-info__buy > .tnr-quantity {
  flex: 0 0 auto;
  order: 2;
}
.tnr-product-info__buy > *:not(.tnr-quantity):not(.tnr-button):not(input):not(style):not(script) {
  flex: 1 1 100%;
  order: 1;
  margin-bottom: var(--sp-2);
}
.tnr-product-info__buy > .tnr-button {
  flex: 1 1 auto;
  order: 3;
}

.tnr-product-info__trust {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-product-info__trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
}

.tnr-product-info__trust .tnr-icon {
  width: 18px;
  height: 18px;
  color: var(--tnr-olive);
}

/* Accordion */
.tnr-accordion {
  display: grid;
  border-top: 1px solid var(--tnr-border);
}

.tnr-accordion__item {
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  color: var(--tnr-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease-out);
}

.tnr-accordion__summary::-webkit-details-marker {
  display: none;
}

.tnr-accordion__summary:hover {
  color: var(--tnr-green);
}

.tnr-accordion__summary .tnr-icon {
  width: 18px;
  height: 18px;
  color: var(--tnr-olive);
  transition: transform var(--dur) var(--ease-out);
}

.tnr-accordion__item[open] .tnr-accordion__summary .tnr-icon {
  transform: rotate(180deg);
}

.tnr-accordion__content {
  padding-bottom: var(--sp-5);
}

/* Cart */
.tnr-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.tnr-cart-items {
  display: grid;
  gap: var(--sp-4);
}

.tnr-cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-md);
}

.tnr-cart-item__media {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tnr-card);
  border-radius: var(--r-sm);
}

.tnr-cart-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-cart-item__title {
  margin: 0;
  font-size: var(--fs-d5);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

.tnr-cart-item__title a {
  text-decoration: none;
}

.tnr-cart-item__title a:hover {
  color: var(--tnr-green);
}

.tnr-cart-item__variant {
  margin: var(--sp-1) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
}

.tnr-cart-item__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.tnr-cart-item__remove {
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: color var(--dur) var(--ease-out);
}

.tnr-cart-item__remove:hover {
  color: #9a3324;
}

.tnr-cart-summary {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.tnr-cart-summary__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-d4);
  font-weight: var(--fw-display);
}

.tnr-cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--tnr-muted);
}

.tnr-cart-summary__row--total {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--tnr-border);
  color: var(--tnr-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

/* Auth / narrow form pages */
.tnr-auth {
  width: min(100%, 460px);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 2.75rem);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.tnr-auth__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-d3);
  text-align: center;
}

.tnr-auth__text {
  margin: 0 0 var(--sp-6);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  text-align: center;
}

.tnr-auth__form {
  display: grid;
  gap: var(--sp-4);
}

.tnr-auth__footer {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--tnr-border);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  text-align: center;
}

/* Data table (orders, addresses) */
.tnr-table-wrap {
  overflow-x: auto;
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
}

.tnr-table {
  min-width: 520px;
  font-size: var(--fs-md);
}

.tnr-table th,
.tnr-table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  vertical-align: middle;
}

.tnr-table thead th {
  color: var(--tnr-muted);
  background: var(--tnr-card);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.tnr-table tbody tr+tr td {
  border-top: 1px solid var(--tnr-border);
}

.tnr-table a {
  color: var(--tnr-green);
  font-weight: var(--fw-semi);
  text-decoration: none;
}

.tnr-table a:hover {
  text-decoration: underline;
}

/* Article */
.tnr-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
}

.tnr-article__media {
  aspect-ratio: 16 / 9;
  margin: clamp(2rem, 4vw, 3rem) 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--tnr-card);
}

.tnr-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-article__body {
  max-width: 68ch;
  font-size: var(--fs-lg);
}

/* 25. Utilities ============================================================ */

.tnr-text-center {
  text-align: center;
}

.tnr-mt-0 {
  margin-top: 0;
}

.tnr-mt-4 {
  margin-top: var(--sp-4);
}

.tnr-mt-6 {
  margin-top: var(--sp-6);
}

.tnr-mt-7 {
  margin-top: var(--sp-7);
}

/* 26. Responsive =========================================================== */

@media (max-width: 1100px) {
  .tnr-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tnr-product-grid {
    --product-columns: 3;
  }

  .tnr-product-grid--4 {
    --product-columns: 3;
  }

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

@media (max-width: 990px) {
  :root {
    --section-y: clamp(3.25rem, 7vw, 4.5rem);
  }

  /* Swap the desktop nav for the drawer. */
  .tnr-header__inner {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 76px;
  }

  .tnr-nav {
    display: none;
  }

  .tnr-nav-toggle {
    display: inline-grid;
  }

  .tnr-header__cta {
    display: none;
  }

  /* Hide the desktop-only icon search link; the mobile trigger replaces it. */
  .tnr-search-icon-desktop {
    display: none !important;
  }

  .tnr-hero__layout,
  .tnr-split,
  .tnr-promo__grid,
  .tnr-product-layout,
  .tnr-cart-layout,
  .tnr-newsletter__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnr-split--reverse .tnr-split__media {
    order: 0;
  }

  .tnr-hero {
    min-height: 100svh;
  }

  .tnr-hero__accent--top-right {
    width: clamp(100px, 30vw, 180px);
    opacity: 0.6;
  }

  .tnr-hero__accent--bottom-left {
    width: clamp(80px, 22vw, 140px);
    opacity: 0.5;
  }

  .tnr-hero__content {
    max-width: none;
    text-align: center;
  }

  .tnr-hero__content .tnr-eyebrow {
    justify-content: center;
  }

  .tnr-hero__heading {
    max-width: none;
    margin-inline: auto;
    background-image: none;
  }

  .tnr-hero__text {
    max-width: 38rem;
    margin-inline: auto;
  }

  .tnr-hero__price {
    margin-inline: auto;
  }

  .tnr-hero__actions {
    justify-content: center;
  }

  .tnr-hero__media {
    aspect-ratio: 4 / 5;
    max-height: 50vh;
  }

  .tnr-split__media {
    aspect-ratio: 3 / 2;
    max-height: 420px;
  }

  .tnr-gallery,
  .tnr-cart-summary {
    position: static;
  }

  .tnr-product-grid,
  .tnr-product-grid--4 {
    --product-columns: 2;
  }

  .tnr-carousel__track {
    grid-auto-columns: minmax(260px, 68%);
  }

  .tnr-section-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .tnr-section-header__action {
    padding-bottom: 0;
  }
}

@media (max-width: 720px) {
  .tnr-announcement__inner {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tnr-announcement__inner::-webkit-scrollbar {
    display: none;
  }

  .tnr-hero__trust {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .tnr-hero__trust-item {
    padding: var(--sp-5) 0;
  }

  .tnr-hero__trust-item+.tnr-hero__trust-item {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--tnr-border);
  }

  .tnr-service-strip__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .tnr-service-item {
    justify-content: flex-start;
    padding: var(--sp-3) 0;
  }

  .tnr-service-item+.tnr-service-item {
    border-left: 0;
    border-top: 1px solid var(--tnr-border);
  }

  .tnr-category-card {
    min-height: 0;
  }

  .tnr-cart-item {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .tnr-cart-item__controls {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .tnr-form-row--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnr-product-info__buy > .tnr-quantity {
    flex: 1 1 100%;
  }

  .tnr-product-info__buy .tnr-quantity {
    width: 100%;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  .tnr-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .tnr-toolbar__sort .tnr-select {
    width: 100%;
    min-width: 0;
  }

  .tnr-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  :root {
    --page-gutter: 1.125rem;
  }

  .tnr-product-grid,
  .tnr-product-grid--4 {
    --product-columns: 1;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

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

  .tnr-hero__heading {
    max-width: none;
  }

  .tnr-hero__price {
    width: 100%;
    justify-content: center;
  }

  .tnr-hero__actions {
    flex-direction: column;
  }

  .tnr-hero__actions .tnr-button {
    width: 100%;
  }

  .tnr-inline-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnr-carousel__track {
    grid-auto-columns: 86%;
  }

  .tnr-review-card {
    padding: var(--sp-6);
  }

  .tnr-seal {
    width: 104px;
    height: 104px;
    right: var(--sp-4);
    bottom: var(--sp-4);
  }

  /* Stays absolute: the media has a fixed aspect-ratio and clips overflow,
     so a static chip would be cut off. Tighten it instead. */
  .tnr-hero__chip {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: var(--sp-3);
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }

  .tnr-hero__chip-text span {
    display: none;
  }
}

/* 27. Motion & print ======================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .tnr-button:hover,
  .tnr-card--interactive:hover,
  .tnr-footer__social a:hover,
  .tnr-quick-add:hover {
    transform: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .tnr-quick-add {
      opacity: 1;
      transform: none;
    }
  }
}

@media print {

  .tnr-header,
  .tnr-announcement,
  .tnr-drawer,
  .tnr-popup,
  .tnr-footer,
  .tnr-quick-add,
  .tnr-carousel__controls,
  .tnr-marquee,
  .tnr-cart-drawer,
  .tnr-sticky-bar {
    display: none !important;
  }

  body.tnr-theme {
    background: #fff;
  }
}

/* ==========================================================================
   28. Colour schemes
   Per-section background/foreground pairing. Every scheme is a tested
   contrast pair — see the contrast assertions in the validation script.
   ========================================================================== */

.tnr-scheme {
  color: var(--scheme-fg, var(--tnr-text));
  background: var(--scheme-bg, transparent);
}

.tnr-scheme--white {
  --scheme-bg: var(--tnr-surface);
  --scheme-fg: var(--tnr-text);
}

.tnr-scheme--bone {
  --scheme-bg: var(--tnr-cream);
  --scheme-fg: var(--tnr-text);
}

.tnr-scheme--sage-tint {
  --scheme-bg: var(--tnr-card);
  --scheme-fg: var(--tnr-text);
}

/* The brand sage as a full band: ink type on it reads 11.3:1. */
.tnr-scheme--sage {
  --scheme-bg: var(--tnr-sage);
  --scheme-fg: var(--tnr-text);
}

.tnr-scheme--deep {
  --scheme-bg: var(--tnr-deep);
  --scheme-fg: #fff;
}

.tnr-scheme--deep .tnr-heading,
.tnr-scheme--deep strong {
  color: #fff;
}

.tnr-scheme--deep .tnr-eyebrow {
  color: var(--tnr-sage);
}

.tnr-scheme--deep .tnr-richtext,
.tnr-scheme--deep .tnr-lead {
  color: rgba(255, 255, 255, 0.76);
}

/* On the brand sage band the action colour only reaches 3.73:1, so the
   eyebrow steps down to the darker hover tone (5.40:1) and body copy uses
   ink (10.7:1). */
.tnr-scheme--sage .tnr-eyebrow {
  color: var(--tnr-green-700);
}

.tnr-scheme--sage .tnr-richtext,
.tnr-scheme--sage .tnr-lead {
  color: var(--tnr-text);
}

/* Section padding overrides, driven by per-section settings. */
.tnr-section[style*="--pt"] {
  padding-top: var(--pt);
}

.tnr-section[style*="--pb"] {
  padding-bottom: var(--pb);
}

/* ==========================================================================
   29. Marquee
   Seamless loop with no JavaScript: the block list is rendered twice into
   one track and translated by exactly -50 %, so the second copy lands where
   the first began. Improved with smoother easing, better rhythm, and
   richer branding integration.
   ========================================================================== */

.tnr-marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--marquee-pad, 0.375rem);
  /* Mask both edges so items never pop in/out on a hard cut — the scroll reads
     as drift rather than a ticker. Wider fade = more premium. */
  -webkit-mask-image: linear-gradient(to right,
      transparent,
      #000 var(--marquee-fade, 10%),
      #000 calc(100% - var(--marquee-fade, 10%)),
      transparent);
  mask-image: linear-gradient(to right,
      transparent,
      #000 var(--marquee-fade, 10%),
      #000 calc(100% - var(--marquee-fade, 10%)),
      transparent);
}

.tnr-marquee--bordered {
  border-block: 1px solid var(--tnr-border);
}

.tnr-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--marquee-gap);
  padding-left: var(--marquee-gap);
  animation: tnr-marquee-scroll var(--marquee-duration) linear infinite;
  will-change: transform;
}

.tnr-marquee--reverse .tnr-marquee__track {
  animation-direction: reverse;
}

/* Pause is immediate so the user never feels the content is running away. */
.tnr-marquee--pausable:hover .tnr-marquee__track,
.tnr-marquee--pausable:focus-within .tnr-marquee__track {
  animation-play-state: paused;
}

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

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

/* --- Items ---------------------------------------------------------------- */

.tnr-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  white-space: nowrap;
  /* Subtle hover lift when pausable — makes it feel interactive. */
  transition: opacity var(--dur) var(--ease-out);
}

.tnr-marquee--pausable:hover .tnr-marquee__item:hover {
  opacity: 0.7;
}

.tnr-marquee__text {
  font-family: var(--font-body);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-marquee__item .tnr-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  color: var(--tnr-olive);
}

/* --- Separators ----------------------------------------------------------- */

.tnr-marquee__sep {
  flex: 0 0 auto;
  opacity: 0.35;
  font-size: var(--fs-sm);
  color: var(--tnr-olive);
  transition: opacity var(--dur) var(--ease-out);
}

.tnr-marquee__sep .tnr-icon {
  width: 14px;
  height: 14px;
}

/* --- Display variant ------------------------------------------------------ */
/* Cormorant at a restrained display size. Tight letter-spacing and the serif's
   stroke contrast are doing the heavy lifting so the text can stay smaller
   than you'd need with a grotesque. */

.tnr-marquee--display {
  --marquee-pad: clamp(0.625rem, 1.2vw, 1rem);
  --marquee-fade: 14%;
  --marquee-gap: clamp(2rem, 4vw, 4rem);
}

.tnr-marquee--display .tnr-marquee__text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  font-weight: var(--fw-display);
  line-height: 1.18;
  letter-spacing: var(--ls-tighter);
  text-transform: none;
}

.tnr-marquee--display .tnr-marquee__item .tnr-icon {
  width: clamp(1.625rem, 3.8vw, 3.25rem);
  height: clamp(1.625rem, 3.8vw, 3.25rem);
  opacity: 0.4;
}

/* --- Outline alternate ---------------------------------------------------- */
/* Every other item is rendered as outlined text. The stroke uses currentColor
   so it automatically picks up the scheme foreground. */

.tnr-marquee--outline .tnr-marquee__text {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  text-stroke: 1.5px currentColor;
  opacity: 0.45;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.tnr-marquee--outline .tnr-marquee__item:nth-child(even) .tnr-marquee__text {
  color: inherit;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  opacity: 1;
}

/* On hover, bring the outlined items closer to visible — the whole strip
   feels alive without being distracting. */
.tnr-marquee--pausable.tnr-marquee--outline:hover .tnr-marquee__text {
  opacity: 0.6;
}

.tnr-marquee--pausable.tnr-marquee--outline:hover .tnr-marquee__item:nth-child(even) .tnr-marquee__text {
  opacity: 1;
}

/* --- Separator styling on display variant --------------------------------- */

.tnr-marquee--display .tnr-marquee__sep {
  opacity: 0.25;
}

.tnr-marquee--display .tnr-marquee__sep .tnr-icon {
  width: clamp(1rem, 2.2vw, 1.75rem);
  height: clamp(1rem, 2.2vw, 1.75rem);
}

/* --- Soft edge fade pseudo-elements --------------------------------------- */

.tnr-marquee--faded::before,
.tnr-marquee--faded::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(3rem, 10vw, 10rem);
  pointer-events: none;
}

.tnr-marquee--faded::before {
  left: 0;
  background: linear-gradient(to right, var(--scheme-bg, var(--tnr-cream)), transparent);
}

.tnr-marquee--faded::after {
  right: 0;
  background: linear-gradient(to left, var(--scheme-bg, var(--tnr-cream)), transparent);
}

/* ==========================================================================
   30. Mega menu
   ========================================================================== */

.tnr-nav {
  position: relative;
}

.tnr-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.tnr-nav__link .tnr-icon {
  width: 14px;
  height: 14px;
  margin-left: var(--sp-1);
  transition: transform var(--dur) var(--ease-out);
}

.tnr-nav__item[data-tnr-open="true"] .tnr-nav__link .tnr-icon {
  transform: rotate(180deg);
}

.tnr-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--z-megamenu);
  width: min(var(--mega-width, 980px), calc(100vw - var(--page-gutter) * 2));
  margin-top: var(--sp-3);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease-out);
}

.tnr-nav__item[data-tnr-open="true"] .tnr-mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.tnr-mega--full {
  --mega-width: 1240px;
}

.tnr-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--mega-feature, 0.72fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.tnr-mega__inner--no-feature {
  grid-template-columns: minmax(0, 1fr);
}

.tnr-mega__inner--image-left .tnr-mega__feature {
  order: -1;
}

.tnr-mega__columns {
  display: grid;
  grid-template-columns: repeat(var(--mega-columns, 3), minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.tnr-mega__heading {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--tnr-border);
  color: var(--tnr-green);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-mega__list {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-mega__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  color: var(--tnr-text);
  border-radius: var(--r-xs);
  font-size: var(--fs-md);
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.tnr-mega__link:hover {
  color: var(--tnr-green);
  background: var(--tnr-card);
}

.tnr-mega__link .tnr-icon {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.tnr-mega__link:hover .tnr-icon {
  opacity: 1;
  transform: translateX(0);
}

.tnr-mega__feature {
  display: grid;
  gap: var(--sp-4);
}

.tnr-mega__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--tnr-card);
  text-decoration: none;
}

.tnr-mega__card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tnr-mega__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.tnr-mega__card:hover .tnr-mega__card-media img {
  transform: scale(1.05);
}

.tnr-mega__card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-5);
  color: #fff;
  background: linear-gradient(to top, rgba(var(--tnr-deep-rgb), 0.86), rgba(var(--tnr-deep-rgb), 0));
}

.tnr-mega__card-title {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  /* White on a photo gradient is the one place a Garamond's thins can
     disappear, so this sits a step heavier than the rest of the display face. */
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}

.tnr-mega__card-text {
  display: block;
  margin-top: var(--sp-1);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-sm);
}

.tnr-mega__card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

.tnr-mega__card-cta .tnr-icon {
  width: 15px;
  height: 15px;
  transition: transform var(--dur) var(--ease-out);
}

.tnr-mega__card:hover .tnr-mega__card-cta .tnr-icon {
  transform: translateX(4px);
}

/* Promo variant: sage panel with ink type rather than an image overlay. */
.tnr-mega__promo {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  color: var(--tnr-text);
  background: var(--tnr-sage);
  border-radius: var(--r-lg);
  text-decoration: none;
}

.tnr-mega__promo .tnr-mega__card-title {
  color: var(--tnr-text);
}

.tnr-mega__promo p {
  margin: 0;
  color: var(--tnr-green-700);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.tnr-mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky);
  background: rgba(var(--tnr-deep-rgb), 0.28);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease-out);
}

.tnr-mega-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Drawer accordion — the same mega-menu data on small screens. */
.tnr-drawer__group {
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-drawer__group .tnr-drawer__link {
  border-bottom: 0;
}

.tnr-drawer__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  color: var(--tnr-text);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  text-align: left;
}

.tnr-drawer__toggle .tnr-icon {
  width: 18px;
  height: 18px;
  color: var(--tnr-green);
  transition: transform var(--dur) var(--ease-out);
}

.tnr-drawer__toggle[aria-expanded="true"] .tnr-icon {
  transform: rotate(180deg);
}

.tnr-drawer__submenu {
  display: none;
  padding-bottom: var(--sp-4);
}

.tnr-drawer__toggle[aria-expanded="true"]+.tnr-drawer__submenu {
  display: grid;
  gap: var(--sp-4);
}

.tnr-drawer__sublist {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-drawer__sublist a {
  display: block;
  padding: var(--sp-2) 0;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  text-decoration: none;
}

.tnr-drawer__sublist a:hover {
  color: var(--tnr-green);
}

.tnr-drawer__subheading {
  margin: 0;
  color: var(--tnr-green);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ==========================================================================
   31. Cart drawer
   ========================================================================== */

.tnr-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}

.tnr-cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tnr-cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--tnr-deep-rgb), 0.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.tnr-cart-drawer.is-open .tnr-cart-drawer__overlay {
  opacity: 1;
}

.tnr-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--tnr-surface);
  box-shadow: var(--sh-xl);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.tnr-cart-drawer.is-open .tnr-cart-drawer__panel {
  transform: translateX(0);
}

.tnr-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-cart-drawer__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
}

.tnr-cart-drawer__body {
  flex: 1;
  padding: var(--sp-5) var(--sp-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tnr-cart-drawer__footer {
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--tnr-border);
  background: var(--tnr-cream);
}

.tnr-cart-drawer.is-loading .tnr-cart-drawer__body {
  opacity: 0.5;
  pointer-events: none;
}

/* Free-shipping progress */
.tnr-ship-bar {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: var(--tnr-card);
  border-radius: var(--r-md);
}

.tnr-ship-bar__label {
  margin: 0;
  color: var(--tnr-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.tnr-ship-bar__label strong {
  color: var(--tnr-green);
  font-weight: var(--fw-semi);
}

.tnr-ship-bar__track {
  height: 6px;
  overflow: hidden;
  background: var(--tnr-surface);
  border-radius: var(--r-pill);
}

.tnr-ship-bar__fill {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--tnr-green);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

.tnr-ship-bar--complete .tnr-ship-bar__fill {
  background: var(--tnr-olive);
}

/* Line items */
.tnr-cart-lines {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-cart-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--sp-4);
}

.tnr-cart-line__media {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tnr-card);
  border-radius: var(--r-sm);
}

.tnr-cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-cart-line__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

.tnr-cart-line__title a {
  text-decoration: none;
}

.tnr-cart-line__variant {
  margin: 2px 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
}

.tnr-cart-line__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.tnr-cart-line .tnr-quantity {
  height: 38px;
  grid-template-columns: 34px minmax(34px, 1fr) 34px;
}

.tnr-cart-line .tnr-quantity__input {
  font-size: var(--fs-sm);
}

.tnr-cart-line__price {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
}

.tnr-cart-line__remove {
  padding: 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.tnr-cart-line__remove:hover {
  color: #9a3324;
}

.tnr-cart-drawer__totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
}

.tnr-cart-drawer__note {
  margin: var(--sp-3) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ==========================================================================
   32. Predictive search
   ========================================================================== */

.tnr-search {
  position: relative;
}

.tnr-search__panel {
  position: absolute;
  top: calc(100% + var(--sp-3));
  right: 0;
  z-index: var(--z-megamenu);
  width: min(420px, calc(100vw - var(--page-gutter) * 2));
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--sp-3);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease-out);
}

.tnr-search.is-open .tnr-search__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tnr-search__results {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-search__result {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2);
  color: var(--tnr-text);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.tnr-search__result:hover,
.tnr-search__result.is-active {
  background: var(--tnr-card);
}

.tnr-search__result-media {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tnr-card);
  border-radius: var(--r-xs);
}

.tnr-search__result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-search__result-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.tnr-search__result-price {
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tnr-search__empty,
.tnr-search__loading {
  padding: var(--sp-5);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  text-align: center;
}

.tnr-search__all {
  display: block;
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  color: var(--tnr-green);
  border-top: 1px solid var(--tnr-border);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  text-align: center;
  text-decoration: none;
}

.tnr-search__all:hover {
  background: var(--tnr-card);
}

/* Header search field, shown when the search style is set to "field". */
.tnr-search__field {
  min-height: 40px;
  width: clamp(160px, 18vw, 240px);
  padding-block: var(--sp-2);
  font-size: var(--fs-md);
}

/* ==========================================================================
   33. Sticky add-to-cart bar
   ========================================================================== */

.tnr-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky-bar);
  padding: var(--sp-3) 0;
  background: rgba(var(--tnr-cream-rgb), 0.96);
  border-top: 1px solid var(--tnr-border);
  box-shadow: 0 -8px 30px -20px rgba(var(--tnr-deep-rgb), 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.tnr-sticky-bar.is-visible {
  transform: translateY(0);
}

.tnr-sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.tnr-sticky-bar__product {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.tnr-sticky-bar__media {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--tnr-card);
  border-radius: var(--r-xs);
}

.tnr-sticky-bar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-sticky-bar__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.tnr-sticky-bar__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tnr-sticky-bar__price {
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.tnr-sticky-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

/* ==========================================================================
   34. Before / after slider
   ========================================================================== */

.tnr-compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--tnr-card);
  box-shadow: var(--sh-md);
  touch-action: pan-y;
  user-select: none;
}

.tnr-compare__frame {
  position: relative;
  aspect-ratio: var(--compare-ratio, 4 / 3);
}

.tnr-compare__image {
  position: absolute;
  inset: 0;
}

.tnr-compare__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The "after" layer is clipped to the handle position. */
.tnr-compare__image--after {
  clip-path: inset(0 0 0 var(--compare-pos, 50%));
}

.tnr-compare__label {
  position: absolute;
  bottom: var(--sp-4);
  z-index: 2;
  padding: var(--sp-2) var(--sp-4);
  color: var(--tnr-text);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-compare__label--before {
  left: var(--sp-4);
}

.tnr-compare__label--after {
  right: var(--sp-4);
}

.tnr-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  left: var(--compare-pos, 50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(var(--tnr-deep-rgb), 0.12);
  transform: translateX(-1px);
  pointer-events: none;
}

.tnr-compare__handle {
  position: absolute;
  top: 50%;
  left: var(--compare-pos, 50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--tnr-green);
  background: #fff;
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}

.tnr-compare__handle:focus-visible {
  outline: 2px solid var(--tnr-green);
  outline-offset: 3px;
}

.tnr-compare__handle .tnr-icon {
  width: 20px;
  height: 20px;
}

/* The real input: keyboard and screen-reader accessible, visually hidden
   but still driving the slider position. */
.tnr-compare__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
}

/* ==========================================================================
   35. Scroll reveal
   ========================================================================== */

.tnr-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}

.tnr-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a revealed container.
   `.tnr-reveal--stagger` is authored in the markup, so the hidden state is
   gated behind `.tnr-reveal-ready`, which only JavaScript adds. Without JS
   (or with animations off) the content is simply visible. */
.tnr-reveal--stagger.tnr-reveal-ready>* {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity 560ms var(--ease-out),
    transform 560ms var(--ease-out);
}

.tnr-reveal--stagger.is-revealed>* {
  opacity: 1;
  transform: translateY(0);
}

.tnr-reveal--stagger.is-revealed>*:nth-child(2) {
  transition-delay: 70ms;
}

.tnr-reveal--stagger.is-revealed>*:nth-child(3) {
  transition-delay: 140ms;
}

.tnr-reveal--stagger.is-revealed>*:nth-child(4) {
  transition-delay: 210ms;
}

.tnr-reveal--stagger.is-revealed>*:nth-child(5) {
  transition-delay: 280ms;
}

.tnr-reveal--stagger.is-revealed>*:nth-child(6) {
  transition-delay: 350ms;
}

/* When animations are switched off in theme settings the classes stay in the
   markup but resolve to no movement at all. */
.tnr-no-anim .tnr-reveal,
.tnr-no-anim .tnr-reveal--stagger>*,
.tnr-no-anim .tnr-reveal--stagger.tnr-reveal-ready>* {
  opacity: 1;
  transform: none;
  transition: none;
}

.tnr-no-anim .tnr-marquee__track {
  animation: none;
}

.tnr-no-anim [data-tnr-hero-item],
.tnr-no-anim .tnr-hero__media-wrapper,
.tnr-no-anim .tnr-hero__chip,
.tnr-no-anim .tnr-hero__trust-item {
  opacity: 1;
  transform: none;
  animation: none;
}

.tnr-no-anim .tnr-hero__accent {
  animation: none;
}

/* ==========================================================================
   36. New-component responsive + motion
   ========================================================================== */

@media (max-width: 1100px) {
  .tnr-mega__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnr-mega__inner--image-left .tnr-mega__feature {
    order: 0;
  }
}

@media (max-width: 990px) {

  /* Mega menus only exist on the desktop nav; the drawer accordion covers
     small screens. */
  .tnr-mega,
  .tnr-mega-backdrop {
    display: none;
  }

  /* The centred-logo grid collapses with the nav. */
  .tnr-header__inner--center {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo actions";
    row-gap: 0;
    padding-bottom: 0;
  }

  .tnr-header__inner--center .tnr-logo {
    justify-self: start;
  }

  .tnr-search__field {
    display: none;
  }

  .tnr-marquee--display .tnr-marquee__text {
    font-size: clamp(1.75rem, 7.5vw, 2.75rem);
  }
}

@media (max-width: 720px) {
  .tnr-sticky-bar__product {
    display: none;
  }

  .tnr-sticky-bar__actions {
    width: 100%;
  }

  .tnr-sticky-bar__actions .tnr-button {
    flex: 1;
  }

  .tnr-compare__handle {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {

  /* A moving marquee is the single worst offender for motion sensitivity, so
     it becomes a static, centred, wrapping row rather than just slowing down. */
  .tnr-marquee__track {
    animation: none !important;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0;
  }

  .tnr-marquee__track>[data-tnr-marquee-clone] {
    display: none;
  }

  .tnr-marquee--faded::before,
  .tnr-marquee--faded::after {
    display: none;
  }

  .tnr-reveal,
  .tnr-reveal--stagger>*,
  .tnr-reveal--stagger.tnr-reveal-ready>* {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Hero: show everything immediately, no entrance animation. */
  [data-tnr-hero-item],
  .tnr-hero__media-wrapper,
  .tnr-hero__chip,
  .tnr-hero__trust-item {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .tnr-hero__accent {
    animation: none;
  }

  .tnr-hero__media img {
    transition: none;
  }
}

4. Layout primitives 5. Buttons 6. Forms 7. Atoms (badge, pill, rating, icon, divider) 8. Cards 9. Announcement bar & header 10. Navigation drawer 11. Hero 12. Service strip 13. Section header 14. Category grid 15. Product card & grid 16. Process 17. Values 18. Promo 19. Testimonials 20. About 21. Newsletter 22. Footer 23. Modal 24. Templates 25. Utilities 26. Motion & print==========================================================================*/
/* 1. Tokens ================================================================ */

:root {
  /* Brand colours are injected from theme settings in layout/theme.liquid.
     Everything below is derived and stays in sync automatically. */

  /* Spacing — 4px base, curated steps */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-10: 4rem;
  --sp-11: 5rem;
  --sp-12: 6rem;
  --sp-13: 7.5rem;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Type families.
     Cormorant Garamond is a high-contrast Garamond revival; the stroke
     modulation is what makes display sizes read expensive next to the sage
     palette, where a grotesque just reads like software. It is a variable
     face, so hierarchy can come from weight as well as size — but it also
     renders SMALL for its em and its thins are genuinely thin, so two rules
     hold everywhere: the display scale below sits a step larger than a
     grotesque needs, and the display face runs at --fw-display (500) rather
     than 400 so it survives small sizes and white-on-photograph.
     Inter carries body, UI and anything small — a quiet neutral grotesque
     with a tall x-height that stays out of the serif's way. */
  --font-display: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Display headings always use Cormorant. Card titles use --font-card, which
     the heading_font_scope setting repoints to the display face when the
     merchant wants it there too — so the boundary moves without editing any
     component. */
  --font-heading: var(--font-display);
  --font-card: var(--font-body);
  --fw-card: var(--fw-semi);

  /* Type scale. Restraint is the whole game here: a Garamond at a moderate
     size next to generous whitespace reads expensive, while the same face set
     large reads like a wedding invitation. Every display step therefore sits
     BELOW where the old grotesque had it — Cormorant's stroke contrast is
     carrying the presence that size used to have to. */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.0625rem;
  --fs-xl: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);

  --fs-d1: clamp(2.5rem, 4.6vw, 4.25rem);
  --fs-d2: clamp(2rem, 3.3vw, 2.875rem);
  --fs-d3: clamp(1.625rem, 2.2vw, 2.125rem);
  --fs-d4: clamp(1.125rem, 1.1vw, 1.3125rem);
  --fs-d5: 1.0625rem;

  /* Product-card titles used to share --fs-d4 with display headings, which
     meant tuning the serif inflated every card in the grid. They get their own
     step so the two can never drag each other around again. */
  --fs-card-title: clamp(0.875rem, 0.4vw + 0.8rem, 1rem);

  /* Line heights. --lh-tight is display-only (the d1 step). It stays above 1.1
     deliberately: Cormorant's descenders are long, and closing the leading any
     further makes the tails of one line run into the caps of the next — which
     reads as broken rather than tight. --lh-snug is shared with Inter card
     titles and stays where it is. */
  --lh-tight: 1.12;
  --lh-snug: 1.22;
  --lh-base: 1.5;
  --lh-normal: 1.65;
  --lh-relaxed: 1.78;

  /* Letter spacing. A Garamond is drawn with its spacing already built in, so
     display sizes take slight NEGATIVE tracking to close the gaps that only
     appear above ~40px. Inter wants a hair negative everywhere and a wide
     0.11em on the uppercase labels. */
  --ls-label: 0.11em;
  --ls-display: -0.014em;
  --ls-body: -0.006em;
  --ls-tight: -0.01em;
  --ls-tighter: -0.02em;

  /* Weights. --fw-display is the display face's own weight: 500, not 400,
     because Cormorant's 400 thins break up at UI sizes and on imagery. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-display: 500;

  /* Elevation. Tinted with the deep sage rather than neutral black — a warm
     shadow is most of what separates "premium" from "default Bootstrap".
     --sh-strength is driven by the shadow-intensity setting. */
  --sh-strength: 1;
  --sh-xs: 0 1px 2px rgba(var(--tnr-deep-rgb), calc(0.04 * var(--sh-strength)));
  --sh-sm:
    0 2px 6px -2px rgba(var(--tnr-deep-rgb), calc(0.06 * var(--sh-strength))),
    0 1px 2px rgba(var(--tnr-deep-rgb), calc(0.03 * var(--sh-strength)));
  --sh-md:
    0 10px 26px -12px rgba(var(--tnr-deep-rgb), calc(0.14 * var(--sh-strength))),
    0 2px 6px -2px rgba(var(--tnr-deep-rgb), calc(0.04 * var(--sh-strength)));
  --sh-lg:
    0 22px 50px -20px rgba(var(--tnr-deep-rgb), calc(0.18 * var(--sh-strength))),
    0 4px 12px -4px rgba(var(--tnr-deep-rgb), calc(0.05 * var(--sh-strength)));
  --sh-xl: 0 40px 80px -32px rgba(var(--tnr-deep-rgb), calc(0.24 * var(--sh-strength)));

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 400ms;

  /* Layout */
  --page-max: 1280px;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(2.5rem, 4vw, 4rem);
  --section-y-sm: clamp(2rem, 3vw, 3rem);
  --grid-gap: clamp(1rem, 1.6vw, 1.5rem);
  --measure: 62ch;
  --measure-narrow: 46ch;

  /* Marquee. 32s was a visible crawl that pulled the eye away from the content
     next to it; at 64s the motion is slow enough to read as drift. */
  --marquee-duration: 64s;
  --marquee-gap: clamp(2rem, 4vw, 4.5rem);

  /* Motion budget — set to 0 by the animations setting or reduced-motion */
  --reveal-distance: 18px;

  /* Stacking */
  --z-base: 1;
  --z-sticky: 40;
  --z-megamenu: 55;
  --z-header: 60;
  --z-sticky-bar: 70;
  --z-drawer: 80;
  --z-modal: 100;
  --z-skip: 120;
}

/* 2. Reset & base ========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body.tnr-theme {
  margin: 0;
  color: var(--tnr-text);
  background: var(--tnr-cream);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.tnr-theme.is-locked {
  overflow: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  height: 1px;
  margin: var(--sp-8) 0;
  border: 0;
  background: var(--tnr-border);
}

::selection {
  color: #fff;
  background: var(--tnr-green);
}

:focus-visible {
  outline: 2px solid var(--tnr-green);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Only show the ring for keyboard users on interactive chrome. */
.tnr-button:focus:not(:focus-visible),
.tnr-icon-button:focus:not(:focus-visible),
.tnr-nav__link:focus:not(:focus-visible) {
  outline: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tnr-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tnr-skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  color: #fff;
  background: var(--tnr-green);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease-out);
}

.tnr-skip-link:focus {
  transform: translateY(0);
}

/* 3. Typography ============================================================ */

.tnr-heading {
  margin: 0;
  color: var(--tnr-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

/* Above ~40px a Garamond's built-in spacing starts to look loose, so the two
   largest steps pull it back in. This is where the face reads most expensive. */
.tnr-heading--d1 {
  font-size: var(--fs-d1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.tnr-heading--d2 {
  font-size: var(--fs-d2);
  letter-spacing: var(--ls-display);
}

.tnr-heading--d3 {
  font-size: var(--fs-d3);
}

.tnr-heading--d4 {
  font-size: var(--fs-d4);
  line-height: var(--lh-snug);
}

.tnr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  /* Deep sage, not the mid tone: at 12px this is body-size text and needs
     4.5:1, which the lighter sage steps cannot reach on white. */
  color: var(--tnr-green);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.55;
}

.tnr-eyebrow--plain::before {
  display: none;
}

.tnr-lead {
  max-width: var(--measure);
  margin: 0;
  color: var(--tnr-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.tnr-text-muted {
  color: var(--tnr-muted);
}

/* Rich text coming from the theme editor — normalise merchant HTML. */
.tnr-richtext {
  color: var(--tnr-muted);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.tnr-richtext>*:first-child {
  margin-top: 0;
}

.tnr-richtext>*:last-child {
  margin-bottom: 0;
}

.tnr-richtext p {
  margin: 0 0 var(--sp-4);
  max-width: var(--measure);
}

.tnr-richtext h2,
.tnr-richtext h3,
.tnr-richtext h4 {
  margin: var(--sp-8) 0 var(--sp-3);
  color: var(--tnr-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.tnr-richtext h2 {
  font-size: var(--fs-d3);
}

.tnr-richtext h3 {
  font-size: var(--fs-d4);
}

.tnr-richtext h4 {
  font-size: var(--fs-d5);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
}

.tnr-richtext ul,
.tnr-richtext ol {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-5);
  max-width: var(--measure);
}

.tnr-richtext li {
  margin-bottom: var(--sp-2);
}

.tnr-richtext ul {
  list-style: none;
  padding-left: 0;
}

.tnr-richtext ul li {
  position: relative;
  padding-left: var(--sp-6);
}

.tnr-richtext ul li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--tnr-olive);
}

.tnr-richtext a {
  color: var(--tnr-green);
  font-weight: var(--fw-semi);
  text-decoration: underline;
  text-decoration-color: rgba(var(--tnr-green-rgb), 0.3);
  transition: text-decoration-color var(--dur) var(--ease-out);
}

.tnr-richtext a:hover {
  text-decoration-color: currentColor;
}

.tnr-richtext strong {
  color: var(--tnr-text);
  font-weight: var(--fw-semi);
}

.tnr-richtext blockquote {
  margin: var(--sp-7) 0;
  padding-left: var(--sp-6);
  border-left: 2px solid var(--tnr-olive);
  color: var(--tnr-text);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-display);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-tight);
}

.tnr-richtext img {
  margin: var(--sp-7) 0;
  border-radius: var(--r-md);
}

.tnr-richtext table {
  margin: var(--sp-7) 0;
  font-size: var(--fs-md);
}

.tnr-richtext th,
.tnr-richtext td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--tnr-border);
  text-align: left;
}

/* 4. Layout primitives ===================================================== */

.tnr-page-width {
  width: min(100% - (var(--page-gutter) * 2), var(--page-max));
  margin-inline: auto;
}

.tnr-page-width--narrow {
  width: min(100% - (var(--page-gutter) * 2), 820px);
}

.tnr-section {
  position: relative;
  padding-block: var(--section-y);
}

.tnr-section--panel {
  background: var(--tnr-card);
}

/* Hairline seam between two same-coloured sections so they never merge. */
.tnr-section--panel+.tnr-section--panel {
  border-top: 1px solid var(--tnr-border);
}

.tnr-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* 5. Buttons =============================================================== */

.tnr-button {
  --btn-bg: var(--tnr-green);
  --btn-fg: #fff;
  --btn-border: var(--tnr-green);
  --btn-bg-hover: var(--tnr-green-700);

  position: relative;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-7);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.tnr-button:hover {
  background: var(--btn-bg-hover);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.tnr-button:active {
  transform: translateY(0);
  box-shadow: var(--sh-xs);
}

.tnr-button[disabled],
.tnr-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.tnr-button .tnr-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.tnr-button--primary {
  --btn-bg: var(--tnr-green);
  --btn-fg: #fff;
  --btn-border: var(--tnr-green);
  --btn-bg-hover: var(--tnr-green-700);
}

.tnr-button--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--tnr-green);
  --btn-border: var(--tnr-green-line);
  --btn-bg-hover: rgba(var(--tnr-green-rgb), 0.06);
}

.tnr-button--secondary:hover {
  border-color: var(--tnr-green);
}

.tnr-button--ghost {
  --btn-bg: var(--tnr-surface);
  --btn-fg: var(--tnr-green);
  --btn-border: var(--tnr-border);
  --btn-bg-hover: var(--tnr-surface);
}

.tnr-button--ghost:hover {
  border-color: var(--tnr-green-line);
}

/* For use on dark green surfaces. */
.tnr-button--inverse {
  --btn-bg: var(--tnr-cream);
  --btn-fg: var(--tnr-green);
  --btn-border: var(--tnr-cream);
  --btn-bg-hover: #fff;
}

.tnr-button--inverse-outline {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.4);
  --btn-bg-hover: rgba(255, 255, 255, 0.12);
}

.tnr-button--inverse-outline:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.tnr-button--sm {
  min-height: 40px;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
}

.tnr-button--lg {
  min-height: 56px;
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--fs-lg);
}

.tnr-button--full {
  width: 100%;
}

/* Text link with a sliding arrow. */
.tnr-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--tnr-green);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  text-decoration: none;
  white-space: nowrap;
}

.tnr-link .tnr-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}

.tnr-link:hover .tnr-icon {
  transform: translateX(4px);
}

.tnr-link--underline {
  text-decoration: underline;
  text-decoration-color: rgba(var(--tnr-green-rgb), 0.28);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--dur) var(--ease-out);
}

.tnr-link--underline:hover {
  text-decoration-color: currentColor;
}

.tnr-icon-button {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--tnr-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.tnr-icon-button:hover {
  color: var(--tnr-green);
  background: rgba(var(--tnr-green-rgb), 0.07);
}

.tnr-icon-button .tnr-icon {
  width: 20px;
  height: 20px;
}

/* 6. Forms ================================================================= */

.tnr-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--tnr-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
}

.tnr-field,
.tnr-select,
.tnr-textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--sp-3) var(--sp-5);
  color: var(--tnr-text);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.tnr-textarea {
  min-height: 140px;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  resize: vertical;
}

.tnr-field:hover,
.tnr-select:hover,
.tnr-textarea:hover {
  border-color: var(--tnr-green-line);
}

.tnr-field:focus,
.tnr-select:focus,
.tnr-textarea:focus {
  outline: none;
  border-color: var(--tnr-green);
  box-shadow: 0 0 0 3px rgba(var(--tnr-green-rgb), 0.12);
}

.tnr-field::placeholder,
.tnr-textarea::placeholder {
  color: var(--tnr-muted);
  opacity: 0.7;
}

.tnr-select {
  padding-right: var(--sp-9);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F3E30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-5) center;
  background-size: 16px;
}

.tnr-form-row {
  display: grid;
  gap: var(--sp-4);
}

.tnr-form-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tnr-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: start;
}

.tnr-inline-form .tnr-form-message {
  grid-column: 1 / -1;
}

.tnr-form-message {
  margin: var(--sp-2) 0 0;
  color: var(--tnr-green);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

.tnr-form-message--error {
  color: #9a3324;
}

.tnr-form-message--error ul {
  margin: 0;
  padding-left: var(--sp-5);
}

.tnr-form-note {
  margin: var(--sp-3) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

/* Quantity stepper */
.tnr-quantity {
  display: inline-grid;
  grid-template-columns: 44px minmax(48px, 1fr) 44px;
  align-items: center;
  height: 50px;
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.tnr-quantity__button {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--tnr-green);
  transition: background-color var(--dur) var(--ease-out);
}

.tnr-quantity__button:hover {
  background: rgba(var(--tnr-green-rgb), 0.07);
}

.tnr-quantity__button .tnr-icon {
  width: 15px;
  height: 15px;
}

.tnr-quantity__input {
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  appearance: textfield;
  -moz-appearance: textfield;
}

.tnr-quantity__input::-webkit-outer-spin-button,
.tnr-quantity__input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.tnr-quantity__input:focus {
  outline: none;
}

/* Variant selector as pills */
.tnr-variant-group {
  display: grid;
  gap: var(--sp-3);
}

.tnr-variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tnr-variant-option {
  position: relative;
}

.tnr-variant-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tnr-variant-option span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-5);
  color: var(--tnr-text);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.tnr-variant-option span:hover {
  border-color: var(--tnr-green-line);
}

.tnr-variant-option input:checked+span {
  color: #fff;
  background: var(--tnr-green);
  border-color: var(--tnr-green);
}

.tnr-variant-option input:focus-visible+span {
  outline: 2px solid var(--tnr-green);
  outline-offset: 3px;
}

.tnr-variant-option input:disabled+span {
  color: var(--tnr-muted);
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* 7. Atoms ================================================================= */

.tnr-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tnr-icon--solid {
  fill: currentColor;
  stroke: none;
}

.tnr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.4rem 0.7rem;
  color: var(--tnr-green);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.tnr-badge--accent {
  color: #fff;
  background: var(--tnr-green);
  border-color: var(--tnr-green);
}

.tnr-badge--olive {
  color: #fff;
  background: var(--tnr-olive);
  border-color: var(--tnr-olive);
}

.tnr-badge--soft {
  color: var(--tnr-green);
  background: var(--tnr-sage-soft);
  border-color: transparent;
}

.tnr-badge--sold-out {
  color: var(--tnr-muted);
  background: var(--tnr-card);
  border-color: var(--tnr-border);
}

/* Star rating */
.tnr-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1;
}

.tnr-rating__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--tnr-olive);
}

.tnr-rating__stars .tnr-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}

.tnr-rating__stars .tnr-icon--empty {
  color: var(--tnr-border);
}

.tnr-rating__count {
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.tnr-rating--lg .tnr-rating__stars .tnr-icon {
  width: 17px;
  height: 17px;
}

/* Circular mark used by process steps, perks, categories */
.tnr-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--tnr-green);
  background: var(--tnr-sage-soft);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.tnr-mark .tnr-icon {
  width: 21px;
  height: 21px;
}

.tnr-mark--accent {
  color: #fff;
  background: var(--tnr-green);
}

.tnr-mark--olive {
  color: #fff;
  background: var(--tnr-olive);
}

.tnr-mark--outline {
  color: var(--tnr-green);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
}

.tnr-price {
  color: var(--tnr-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
}

.tnr-price__compare {
  margin-left: var(--sp-2);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  text-decoration: line-through;
}

.tnr-price--lg {
  font-size: clamp(1.5rem, 2vw, 1.875rem);
}

/* 8. Cards ================================================================= */

.tnr-card {
  position: relative;
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.tnr-card--flat {
  box-shadow: none;
}

.tnr-card--interactive:hover {
  border-color: var(--tnr-green-line);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}

.tnr-media {
  position: relative;
  overflow: hidden;
  background: var(--tnr-card);
  border-radius: var(--r-lg);
}

.tnr-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Neutral placeholder — a soft botanical wash, no faux product illustration. */
.tnr-media__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--tnr-olive);
  background:
    radial-gradient(circle at 30% 25%, rgba(var(--tnr-olive-rgb), 0.16), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(var(--tnr-green-rgb), 0.1), transparent 55%),
    var(--tnr-card);
}

.tnr-media__placeholder .tnr-icon {
  width: 30%;
  max-width: 76px;
  height: auto;
  opacity: 0.32;
  stroke-width: 1.1;
}

/* 9. Announcement bar & header ============================================= */

.tnr-announcement {
  color: rgba(255, 255, 255, 0.9);
  background: var(--tnr-deep);
  font-size: var(--fs-xs);
}

.tnr-announcement__inner {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
}

.tnr-announcement__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tnr-announcement__item .tnr-icon {
  width: 15px;
  height: 15px;
  color: var(--tnr-sage);
}

.tnr-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(var(--tnr-cream-rgb), 0.85);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.tnr-header.is-stuck {
  background: rgba(var(--tnr-cream-rgb), 0.95);
  border-bottom-color: var(--tnr-border);
  box-shadow: 0 6px 24px -18px rgba(var(--tnr-green-rgb), 0.5);
}

.tnr-header__inner {
  min-height: 120px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
}

/* Centred logo: nav moves to a full-width row beneath the brand line. */
.tnr-header__inner--center {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "spacer logo actions"
    "nav nav nav";
  row-gap: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.tnr-header__inner--center .tnr-logo {
  grid-area: logo;
  justify-self: center;
}

.tnr-header__inner--center .tnr-nav {
  grid-area: nav;
}

.tnr-header__inner--center .tnr-header__actions {
  grid-area: actions;
}

.tnr-logo {
  display: inline-flex;
  align-items: center;
  color: var(--tnr-text);
  text-decoration: none;
}

.tnr-logo__image {
  width: auto;
  max-width: var(--logo-max-w, 240px);
  max-height: 110px;
  object-fit: contain;
}

/* Primary navigation */
.tnr-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-1);
}

.tnr-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-4);
  color: var(--tnr-text);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

/* One hover affordance only: a centred underline that grows from the middle. */
.tnr-nav__link::after {
  content: "";
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: 6px;
  height: 1.5px;
  border-radius: var(--r-pill);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease-out);
}

.tnr-nav__link:hover,
.tnr-nav__link[aria-current="page"] {
  color: var(--tnr-green);
}

.tnr-nav__link:hover::after,
.tnr-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.tnr-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  justify-self: end;
}

.tnr-cart-link {
  position: relative;
}

.tnr-cart-count {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding-inline: 4px;
  color: #fff;
  background: var(--tnr-green);
  border: 2px solid var(--tnr-cream);
  border-radius: var(--r-pill);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tnr-header__cta {
  margin-left: var(--sp-3);
}

.tnr-nav-toggle {
  display: none;
}

/* 10. Navigation drawer ==================================================== */

.tnr-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}

.tnr-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tnr-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--tnr-green-rgb), 0.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.tnr-drawer.is-open .tnr-drawer__overlay {
  opacity: 1;
}

.tnr-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--tnr-cream);
  box-shadow: var(--sh-xl);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tnr-drawer.is-open .tnr-drawer__panel {
  transform: translateX(0);
}

.tnr-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-drawer__title {
  margin: 0;
  color: var(--tnr-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-drawer__nav {
  display: grid;
  align-content: start;
  padding: var(--sp-4) var(--sp-6);
}

.tnr-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  color: var(--tnr-text);
  border-bottom: 1px solid var(--tnr-border);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-tight);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.tnr-drawer__link:hover {
  color: var(--tnr-green);
}

.tnr-drawer__link .tnr-icon {
  width: 17px;
  height: 17px;
  color: var(--tnr-olive);
  transition: transform var(--dur) var(--ease-out);
}

.tnr-drawer__link:hover .tnr-icon {
  transform: translateX(4px);
}

.tnr-drawer__footer {
  margin-top: auto;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-top: 1px solid var(--tnr-border);
}

.tnr-drawer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
}

.tnr-drawer__meta a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
}

.tnr-drawer__meta a:hover {
  color: var(--tnr-green);
}

.tnr-drawer__meta .tnr-icon {
  width: 16px;
  height: 16px;
}

/* 11. Hero ================================================================= */

.tnr-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 3vw, 3rem);
  overflow: hidden;
  /* Layered organic gradient — multiple ellipses create soft light-play that
     feels hand-painted rather than computed. */
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(var(--tnr-sage-rgb), 0.22), transparent 55%),
    radial-gradient(ellipse 60% 80% at 100% 10%, rgba(var(--tnr-green-rgb), 0.10), transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(var(--tnr-olive-rgb), 0.08), transparent 60%),
    radial-gradient(ellipse 30% 40% at 70% 60%, rgba(var(--tnr-sage-rgb), 0.06), transparent 50%),
    var(--tnr-cream);
}

/* --- Botanical SVG accents ------------------------------------------------
   Decorative leaf illustrations that drift slowly, matching the olive branch
   in the brand logo. They live outside the page-width so they peek in from
   the edges on wide screens. */

.tnr-hero__accent {
  position: absolute;
  pointer-events: none;
  color: var(--tnr-olive);
  z-index: 0;
}

.tnr-hero__accent--top-right {
  top: -2rem;
  right: -2rem;
  width: clamp(160px, 22vw, 320px);
  animation: tnr-hero-drift-1 18s ease-in-out infinite alternate;
}

.tnr-hero__accent--bottom-left {
  bottom: 2rem;
  left: -1rem;
  width: clamp(120px, 16vw, 240px);
  animation: tnr-hero-drift-2 22s ease-in-out infinite alternate;
}

@keyframes tnr-hero-drift-1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(-8px, 12px) rotate(3deg);
  }
}

@keyframes tnr-hero-drift-2 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(6px, -10px) rotate(-2deg);
  }
}

/* --- Layout --------------------------------------------------------------- */

.tnr-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

/* --- Content column ------------------------------------------------------- */

.tnr-hero__content {
  max-width: 36rem;
}

/* Staggered entrance animation for each content element. */
[data-tnr-hero-item] {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 18px));
  animation: tnr-hero-reveal 0.7s var(--ease-out) forwards;
  animation-delay: calc(0.15s + var(--hero-item-i, 0) * 0.1s);
}

.tnr-hero__content [data-tnr-hero-item]:nth-child(1) {
  --hero-item-i: 0;
}

.tnr-hero__content [data-tnr-hero-item]:nth-child(2) {
  --hero-item-i: 1;
}

.tnr-hero__content [data-tnr-hero-item]:nth-child(3) {
  --hero-item-i: 2;
}

.tnr-hero__content [data-tnr-hero-item]:nth-child(4) {
  --hero-item-i: 3;
}

.tnr-hero__content [data-tnr-hero-item]:nth-child(5) {
  --hero-item-i: 4;
}

@keyframes tnr-hero-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tnr-hero__eyebrow {
  margin-bottom: var(--sp-5);
}

.tnr-hero__eyebrow .tnr-icon {
  width: 16px;
  height: 16px;
  color: var(--tnr-olive);
  margin-right: var(--sp-1);
}

.tnr-hero__heading {
  max-width: 17ch;
  font-size: clamp(2.75rem, 5.2vw, 4.75rem);
  /* Decorative underline accent on the heading — a subtle olive line that
     reinforces the natural/organic character. */
  background-image: linear-gradient(to right,
      rgba(var(--tnr-olive-rgb), 0.25) 0%,
      rgba(var(--tnr-olive-rgb), 0.08) 100%);
  background-position: 0 92%;
  background-size: 100% 3px;
  background-repeat: no-repeat;
  padding-bottom: 0.1em;
}

.tnr-hero__text {
  margin-top: var(--sp-5);
  max-width: 36rem;
  font-size: var(--fs-lg);
}

/* --- Price display -------------------------------------------------------- */

.tnr-hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-7) 0 0;
  padding: var(--sp-4) var(--sp-6);
  background: rgba(var(--tnr-sage-rgb), 0.15);
  border-radius: var(--r-pill);
  width: fit-content;
}

.tnr-hero__price-value {
  color: var(--tnr-deep);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
}

.tnr-hero__price-separator {
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--tnr-olive);
  opacity: 0.5;
}

.tnr-hero__price-note {
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

/* --- Buttons -------------------------------------------------------------- */

.tnr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.tnr-hero__cta {
  gap: var(--sp-3);
}

.tnr-hero__cta-arrow {
  transition: transform var(--dur) var(--ease-out);
}

.tnr-hero__cta:hover .tnr-hero__cta-arrow {
  transform: translateX(4px);
}

/* --- Media column --------------------------------------------------------- */

.tnr-hero__media-wrapper {
  position: relative;
  /* Float the wrapper slightly upward on large screens for visual interest. */
  animation: tnr-hero-media-in 0.9s 0.3s var(--ease-out) both;
}

@keyframes tnr-hero-media-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tnr-hero__media {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 72vh;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--tnr-card);
  box-shadow:
    0 24px 60px -16px rgba(var(--tnr-deep-rgb), 0.2),
    0 8px 20px -8px rgba(var(--tnr-deep-rgb), 0.08),
    inset 0 0 0 1px rgba(var(--tnr-sage-rgb), 0.3);
}

.tnr-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s var(--ease-out);
}

.tnr-hero__media:hover img {
  transform: scale(1.04);
}

/* Organic radial glow on image bottom — fades the image into the chip. */
.tnr-hero__media-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(var(--tnr-sage-rgb), 0.18), transparent 70%),
    linear-gradient(to top, rgba(var(--tnr-deep-rgb), 0.06) 0%, transparent 30%);
}

/* --- Floating review chip ------------------------------------------------- */

.tnr-hero__chip {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: rgba(255, 255, 255, 0.88);
  border-radius: var(--r-lg);
  box-shadow:
    0 8px 32px -8px rgba(var(--tnr-deep-rgb), 0.14),
    0 2px 8px rgba(var(--tnr-deep-rgb), 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  /* Entrance: float up from below the image. */
  animation: tnr-hero-chip-in 0.6s 0.8s var(--ease-spring) both;
  z-index: 2;
}

@keyframes tnr-hero-chip-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tnr-hero__chip-stars {
  flex: 0 0 auto;
}

.tnr-hero__chip-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tnr-hero__chip-text strong {
  color: var(--tnr-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.tnr-hero__chip-text span {
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

/* --- Trust row ------------------------------------------------------------ */

.tnr-hero__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(3rem, 5vw, 5rem);
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--tnr-border);
  position: relative;
  z-index: 1;
}

.tnr-hero__trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6) 0 0;
  /* Staggered entrance driven by inline custom-property. */
  opacity: 0;
  transform: translateY(12px);
  animation: tnr-hero-reveal 0.5s var(--ease-out) forwards;
  animation-delay: calc(0.9s + var(--trust-i, 0) * 0.12s);
}

.tnr-hero__trust-item+.tnr-hero__trust-item {
  padding-left: var(--sp-6);
  border-left: 1px solid var(--tnr-border);
}

/* Circular icon badge for trust items — echoes the brand's round jar
   motif and gives each point a visual anchor. */
.tnr-hero__trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: rgba(var(--tnr-sage-rgb), 0.22);
  color: var(--tnr-green);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}

.tnr-hero__trust-icon .tnr-icon {
  width: 20px;
  height: 20px;
}

.tnr-hero__trust-item:hover .tnr-hero__trust-icon {
  background: rgba(var(--tnr-green-rgb), 0.15);
  transform: scale(1.08);
}

.tnr-hero__trust-text {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
}

.tnr-hero__trust-text strong {
  color: var(--tnr-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.005em;
}

.tnr-hero__trust-text span {
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  text-wrap: pretty;
}

/* 12. Service strip ======================================================== */

.tnr-service-strip {
  padding-block: var(--sp-5);
  background: var(--tnr-card);
  border-block: 1px solid var(--tnr-border);
}

.tnr-service-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.tnr-service-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  color: var(--tnr-text);
  text-align: left;
}

.tnr-service-item+.tnr-service-item {
  border-left: 1px solid var(--tnr-border);
}

.tnr-service-item .tnr-icon {
  width: 22px;
  height: 22px;
  color: var(--tnr-olive);
}

.tnr-service-item span {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
}

/* 13. Section header ======================================================= */

/* Left-aligned block with an optional action on the right. The supporting
   copy sits directly under the heading on the same measure — never floated
   to the bottom-right of the grid. */
.tnr-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-6) var(--sp-8);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.tnr-section-header__main {
  max-width: 44rem;
}

.tnr-section-header__heading {
  font-size: var(--fs-d2);
}

.tnr-section-header__copy {
  margin-top: var(--sp-4);
  max-width: var(--measure);
  color: var(--tnr-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

.tnr-section-header__copy p {
  margin: 0 0 var(--sp-3);
}

.tnr-section-header__copy>*:last-child {
  margin-bottom: 0;
}

.tnr-section-header__action {
  padding-bottom: var(--sp-1);
}

.tnr-section-header--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.tnr-section-header--center .tnr-section-header__main {
  display: grid;
  justify-items: center;
}

.tnr-section-header--center .tnr-section-header__copy {
  margin-inline: auto;
}

/* 14. Category grid ======================================================== */

.tnr-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.tnr-category-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-5);
  min-height: 260px;
  padding: var(--sp-6);
  color: inherit;
  text-decoration: none;
}

.tnr-category-card__title {
  display: block;
  margin: 0;
  color: var(--tnr-text);
  font-family: var(--font-card);
  font-size: var(--fs-d4);
  font-weight: var(--fw-card);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.tnr-category-card__text {
  display: block;
  margin: var(--sp-2) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.tnr-category-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--tnr-green);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

.tnr-category-card__cta .tnr-icon {
  width: 15px;
  height: 15px;
  transition: transform var(--dur) var(--ease-out);
}

.tnr-category-card:hover .tnr-category-card__cta .tnr-icon {
  transform: translateX(4px);
}

/* 15. Product card & grid ================================================== */

.tnr-product-grid {
  display: grid;
  grid-template-columns: repeat(var(--product-columns, 3), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.tnr-product-grid--4 {
  --product-columns: 4;
}

.tnr-product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tnr-product-card__media {
  position: relative;
  aspect-ratio: var(--card-ratio, 1 / 1);
  overflow: hidden;
  background: var(--tnr-card);
}

/* Second image, cross-faded on hover. Only rendered when the product has
   more than one image. */
.tnr-product-card__media-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tnr-product-card:hover .tnr-product-card__media-alt {
    opacity: 1;
  }
}

.tnr-product-card--center {
  text-align: center;
}

.tnr-product-card--center .tnr-product-card__body {
  align-items: center;
}

.tnr-product-card--center .tnr-product-card__foot {
  justify-content: center;
}

/* The title's stretched link sits at z-index 1, so any real control inside
   the body has to rise above it. */
.tnr-product-card__body .tnr-product-card__form {
  position: relative;
  z-index: 2;
  margin: 0;
}

.tnr-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.tnr-product-card:hover .tnr-product-card__media img {
  transform: scale(1.04);
}

.tnr-product-card__badges {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: calc(100% - var(--sp-8));
}

/* Quick add — a real button with an accessible name, not a CSS pseudo glyph. */
.tnr-quick-add {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--tnr-green);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-spring),
    opacity var(--dur) var(--ease-out);
}

.tnr-quick-add .tnr-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.tnr-quick-add:hover {
  background: var(--tnr-green-700);
  transform: scale(1.08);
}

.tnr-quick-add[disabled] {
  color: var(--tnr-muted);
  background: var(--tnr-card);
  box-shadow: var(--sh-xs);
  cursor: not-allowed;
  transform: none;
}

/* On pointer devices the quick-add fades in; on touch it is always visible. */
@media (hover: hover) and (pointer: fine) {
  .tnr-quick-add {
    opacity: 0;
    transform: translateY(6px);
  }

  .tnr-product-card:hover .tnr-quick-add,
  .tnr-product-card:focus-within .tnr-quick-add {
    opacity: 1;
    transform: translateY(0);
  }
}

.tnr-product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2) var(--sp-4);
}

.tnr-product-card__title {
  margin: 0;
  color: var(--tnr-text);
  font-family: var(--font-card);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-card);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.tnr-product-card__title a {
  text-decoration: none;
}

/* Stretch the title link across the card so the whole tile is clickable,
   while the quick-add button stays above it. */
.tnr-product-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tnr-product-card__text {
  margin: 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  /* Clamp so every card in a row keeps the same footprint. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tnr-product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
}

/* 16. Process ============================================================== */

.tnr-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.tnr-split--reverse .tnr-split__media {
  order: 2;
}

.tnr-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--tnr-surface);
  box-shadow: var(--sh-md);
}

.tnr-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-seal {
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-5);
  width: 132px;
  height: 132px;
  display: grid;
  place-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4);
  /* The brand sage doing brand work: as a surface with ink type it reads
     11.3:1, where the same colour behind white text would be 1.54:1. */
  color: var(--tnr-text);
  background: var(--tnr-sage);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  text-align: center;
}

.tnr-seal strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
}

.tnr-seal span {
  display: block;
  /* Darker than the action colour: on #CAD3C5 that only makes 3.73:1. */
  color: var(--tnr-green-700);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-step-list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  counter-reset: tnr-step;
}

.tnr-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-md);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.tnr-step:hover {
  border-color: var(--tnr-green-line);
  box-shadow: var(--sh-sm);
}

.tnr-step__title {
  margin: 0;
  color: var(--tnr-text);
  font-size: var(--fs-d5);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

.tnr-step__text {
  margin: var(--sp-2) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

/* 17. Values =============================================================== */

.tnr-value-list {
  display: grid;
  gap: var(--sp-3);
}

/* 18. Promo ================================================================ */

.tnr-promo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--grid-gap);
  align-items: stretch;
}

.tnr-promo__primary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: rgba(255, 255, 255, 0.84);
  background:
    radial-gradient(ellipse 80% 60% at 85% 10%, rgba(var(--tnr-olive-rgb), 0.34), transparent 62%),
    var(--tnr-deep);
  border-radius: var(--r-xl);
}

.tnr-promo__primary .tnr-heading {
  color: #fff;
  font-size: var(--fs-d3);
}

.tnr-promo__primary .tnr-eyebrow {
  color: var(--tnr-sage);
}

.tnr-promo__primary .tnr-richtext {
  margin-top: var(--sp-4);
  color: rgba(255, 255, 255, 0.76);
}

.tnr-promo__actions {
  margin-top: var(--sp-7);
}

.tnr-promo__perks {
  display: grid;
  align-content: center;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-xl);
}

.tnr-perk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  transition: background-color var(--dur) var(--ease-out);
}

.tnr-perk:hover {
  background: var(--tnr-card);
}

.tnr-perk__title {
  margin: 0;
  color: var(--tnr-text);
  font-size: var(--fs-d5);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

.tnr-perk__text {
  margin: var(--sp-1) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

/* 19. Testimonials ========================================================= */

.tnr-carousel {
  position: relative;
}

.tnr-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, calc(33.333% - var(--sp-4)));
  gap: var(--sp-5);
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.tnr-carousel__track::-webkit-scrollbar {
  display: none;
}

.tnr-carousel__controls {
  display: flex;
  gap: var(--sp-2);
}

.tnr-carousel__button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--tnr-green);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}

.tnr-carousel__button:hover:not([disabled]) {
  border-color: var(--tnr-green);
  background: var(--tnr-green);
  color: #fff;
}

.tnr-carousel__button[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.tnr-review-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-7);
  scroll-snap-align: start;
}

.tnr-review-card__quote {
  margin: 0;
  color: var(--tnr-text);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-display);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
}

.tnr-review-card__quote p {
  margin: 0;
}

.tnr-review-card__footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--tnr-border);
}

.tnr-review-card__avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--tnr-green);
  background: var(--tnr-sage-soft);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.tnr-review-card__cite {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-style: normal;
}

.tnr-review-card__name {
  color: var(--tnr-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
}

.tnr-review-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
}

.tnr-review-card__meta .tnr-icon {
  width: 13px;
  height: 13px;
  color: var(--tnr-olive);
}

/* 20. About ================================================================ */

.tnr-about__actions {
  margin-top: var(--sp-7);
}

/* 21. Newsletter =========================================================== */

.tnr-newsletter {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 80% at 12% 0%, rgba(var(--tnr-olive-rgb), 0.3), transparent 60%),
    var(--tnr-deep);
}

.tnr-newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.tnr-newsletter__heading {
  color: #fff;
  font-size: var(--fs-d2);
}

.tnr-newsletter__copy {
  margin-top: var(--sp-4);
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

.tnr-newsletter__copy p {
  margin: 0 0 var(--sp-3);
}

.tnr-newsletter__copy>*:last-child {
  margin-bottom: 0;
}

.tnr-newsletter .tnr-eyebrow {
  color: var(--tnr-sage);
}

.tnr-newsletter .tnr-field {
  border-color: transparent;
}

.tnr-newsletter .tnr-form-message {
  color: #fff;
}

.tnr-newsletter__form-note {
  margin: var(--sp-4) 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-sm);
}

/* 22. Footer =============================================================== */

.tnr-footer {
  padding-block: clamp(3rem, 5vw, 4.5rem) var(--sp-6);
  color: var(--tnr-muted);
  background: var(--tnr-card);
  border-top: 1px solid var(--tnr-border);
}

.tnr-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr)) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
}

.tnr-footer__brand p {
  margin: var(--sp-4) 0 0;
  max-width: 34ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.tnr-footer__title {
  margin: 0 0 var(--sp-4);
  color: var(--tnr-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-footer__nav {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
}

.tnr-footer__nav a {
  width: fit-content;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.tnr-footer__nav a:hover {
  color: var(--tnr-green);
}

.tnr-footer__newsletter p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.tnr-footer__social {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.tnr-footer__social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--tnr-green);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  transition:
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.tnr-footer__social a:hover {
  color: #fff;
  background: var(--tnr-green);
  transform: translateY(-2px);
}

.tnr-footer__social .tnr-icon {
  width: 18px;
  height: 18px;
}

.tnr-footer__contact {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
}

.tnr-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.tnr-footer__contact a:hover {
  color: var(--tnr-green);
}

.tnr-footer__contact .tnr-icon {
  width: 16px;
  height: 16px;
  color: var(--tnr-olive);
}

.tnr-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--tnr-border);
  font-size: var(--fs-sm);
}

.tnr-footer__bottom p {
  margin: 0;
}

.tnr-footer__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.tnr-footer__payments>span[aria-hidden] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.tnr-footer__payments svg {
  display: inline-block;
  width: 38px;
  height: 24px;
  border-radius: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* 23. Modal ================================================================ */

.tnr-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(var(--tnr-green-rgb), 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease-out);
}

.tnr-popup.is-open {
  opacity: 1;
  visibility: visible;
}

.tnr-popup__overlay {
  position: absolute;
  inset: 0;
}

.tnr-popup__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - var(--sp-9));
  overflow-y: auto;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--tnr-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  transform: translateY(14px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-spring);
}

.tnr-popup.is-open .tnr-popup__panel {
  transform: translateY(0) scale(1);
}

.tnr-popup__heading {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
}

.tnr-popup__text {
  margin: var(--sp-4) 0 0;
  color: var(--tnr-muted);
  line-height: var(--lh-relaxed);
}

.tnr-popup__form {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.tnr-popup__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--tnr-muted);
  background: var(--tnr-card);
  border-radius: var(--r-pill);
  transition:
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.tnr-popup__close:hover {
  color: var(--tnr-text);
  background: var(--tnr-border);
}

.tnr-popup__close .tnr-icon {
  width: 17px;
  height: 17px;
}

/* 24. Templates ============================================================ */

.tnr-template {
  padding-block: clamp(2.5rem, 4vw, 3.5rem) var(--section-y);
}

/* Breadcrumbs */
.tnr-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
}

.tnr-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.tnr-breadcrumbs a:hover {
  color: var(--tnr-green);
}

.tnr-breadcrumbs [aria-current="page"] {
  color: var(--tnr-text);
  font-weight: var(--fw-medium);
}

.tnr-breadcrumbs__sep {
  color: var(--tnr-border);
}

/* Page header */
.tnr-page-header {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tnr-page-header__title {
  font-size: var(--fs-d2);
}

.tnr-page-header__text {
  margin-top: var(--sp-4);
  color: var(--tnr-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

/* Collection toolbar */
.tnr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-toolbar__count {
  margin: 0;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
}

.tnr-toolbar__sort {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.tnr-toolbar__sort label {
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  white-space: nowrap;
}

.tnr-toolbar__sort .tnr-select {
  min-height: 44px;
  width: auto;
  min-width: 200px;
  padding-block: var(--sp-2);
  font-size: var(--fs-md);
}

/* Pagination */
.tnr-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.tnr-pagination__item {
  min-width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding-inline: var(--sp-3);
  color: var(--tnr-text);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition:
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.tnr-pagination__item:hover {
  border-color: var(--tnr-green-line);
  color: var(--tnr-green);
}

.tnr-pagination__item[aria-current="page"] {
  color: #fff;
  background: var(--tnr-green);
  border-color: var(--tnr-green);
}

.tnr-pagination__item .tnr-icon {
  width: 16px;
  height: 16px;
}

.tnr-pagination__gap {
  padding-inline: var(--sp-1);
  color: var(--tnr-muted);
}

/* Empty state */
.tnr-empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: clamp(3rem, 6vw, 5rem) var(--sp-5);
  text-align: center;
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
}

.tnr-empty .tnr-icon {
  width: 44px;
  height: 44px;
  color: var(--tnr-olive);
  opacity: 0.5;
}

.tnr-empty__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-d3);
  font-weight: var(--fw-display);
}

.tnr-empty p {
  margin: 0;
  max-width: 44ch;
  color: var(--tnr-muted);
}

/* Product page */
.tnr-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
}

.tnr-gallery {
  display: grid;
  gap: var(--sp-3);
  position: sticky;
  top: 6rem;
}

.tnr-gallery__main {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tnr-card);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-xl);
}

.tnr-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: var(--sp-3);
}

.tnr-gallery__thumb {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: var(--tnr-card);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.tnr-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-gallery__thumb:hover {
  border-color: var(--tnr-green-line);
}

.tnr-gallery__thumb.is-active {
  border-color: var(--tnr-green);
  box-shadow: 0 0 0 2px rgba(var(--tnr-green-rgb), 0.16);
}

.tnr-product-info {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.tnr-product-info__title {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
}

.tnr-product-info__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
}

.tnr-product-info__form {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.tnr-product-info__buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: stretch;
}
.tnr-product-info__buy > .tnr-quantity {
  flex: 0 0 auto;
  order: 2;
}
.tnr-product-info__buy > *:not(.tnr-quantity):not(.tnr-button):not(input):not(style):not(script) {
  flex: 1 1 100%;
  order: 1;
  margin-bottom: var(--sp-2);
}
.tnr-product-info__buy > .tnr-button {
  flex: 1 1 auto;
  order: 3;
}

.tnr-product-info__trust {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-product-info__trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
}

.tnr-product-info__trust .tnr-icon {
  width: 18px;
  height: 18px;
  color: var(--tnr-olive);
}

/* Accordion */
.tnr-accordion {
  display: grid;
  border-top: 1px solid var(--tnr-border);
}

.tnr-accordion__item {
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  color: var(--tnr-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease-out);
}

.tnr-accordion__summary::-webkit-details-marker {
  display: none;
}

.tnr-accordion__summary:hover {
  color: var(--tnr-green);
}

.tnr-accordion__summary .tnr-icon {
  width: 18px;
  height: 18px;
  color: var(--tnr-olive);
  transition: transform var(--dur) var(--ease-out);
}

.tnr-accordion__item[open] .tnr-accordion__summary .tnr-icon {
  transform: rotate(180deg);
}

.tnr-accordion__content {
  padding-bottom: var(--sp-5);
}

/* Cart */
.tnr-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.tnr-cart-items {
  display: grid;
  gap: var(--sp-4);
}

.tnr-cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-md);
}

.tnr-cart-item__media {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tnr-card);
  border-radius: var(--r-sm);
}

.tnr-cart-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-cart-item__title {
  margin: 0;
  font-size: var(--fs-d5);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

.tnr-cart-item__title a {
  text-decoration: none;
}

.tnr-cart-item__title a:hover {
  color: var(--tnr-green);
}

.tnr-cart-item__variant {
  margin: var(--sp-1) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
}

.tnr-cart-item__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.tnr-cart-item__remove {
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: color var(--dur) var(--ease-out);
}

.tnr-cart-item__remove:hover {
  color: #9a3324;
}

.tnr-cart-summary {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.tnr-cart-summary__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-d4);
  font-weight: var(--fw-display);
}

.tnr-cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--tnr-muted);
}

.tnr-cart-summary__row--total {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--tnr-border);
  color: var(--tnr-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

/* Auth / narrow form pages */
.tnr-auth {
  width: min(100%, 460px);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 2.75rem);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.tnr-auth__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-d3);
  text-align: center;
}

.tnr-auth__text {
  margin: 0 0 var(--sp-6);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  text-align: center;
}

.tnr-auth__form {
  display: grid;
  gap: var(--sp-4);
}

.tnr-auth__footer {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--tnr-border);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  text-align: center;
}

/* Data table (orders, addresses) */
.tnr-table-wrap {
  overflow-x: auto;
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
}

.tnr-table {
  min-width: 520px;
  font-size: var(--fs-md);
}

.tnr-table th,
.tnr-table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  vertical-align: middle;
}

.tnr-table thead th {
  color: var(--tnr-muted);
  background: var(--tnr-card);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.tnr-table tbody tr+tr td {
  border-top: 1px solid var(--tnr-border);
}

.tnr-table a {
  color: var(--tnr-green);
  font-weight: var(--fw-semi);
  text-decoration: none;
}

.tnr-table a:hover {
  text-decoration: underline;
}

/* Article */
.tnr-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
}

.tnr-article__media {
  aspect-ratio: 16 / 9;
  margin: clamp(2rem, 4vw, 3rem) 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--tnr-card);
}

.tnr-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-article__body {
  max-width: 68ch;
  font-size: var(--fs-lg);
}

/* 25. Utilities ============================================================ */

.tnr-text-center {
  text-align: center;
}

.tnr-mt-0 {
  margin-top: 0;
}

.tnr-mt-4 {
  margin-top: var(--sp-4);
}

.tnr-mt-6 {
  margin-top: var(--sp-6);
}

.tnr-mt-7 {
  margin-top: var(--sp-7);
}

/* 26. Responsive =========================================================== */

@media (max-width: 1100px) {
  .tnr-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tnr-product-grid {
    --product-columns: 3;
  }

  .tnr-product-grid--4 {
    --product-columns: 3;
  }

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

@media (max-width: 990px) {
  :root {
    --section-y: clamp(3.25rem, 7vw, 4.5rem);
  }

  /* Swap the desktop nav for the drawer. */
  .tnr-header__inner {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 76px;
  }

  .tnr-nav {
    display: none;
  }

  .tnr-nav-toggle {
    display: inline-grid;
  }

  .tnr-header__cta {
    display: none;
  }

  /* Hide the desktop-only icon search link; the mobile trigger replaces it. */
  .tnr-search-icon-desktop {
    display: none !important;
  }

  .tnr-hero__layout,
  .tnr-split,
  .tnr-promo__grid,
  .tnr-product-layout,
  .tnr-cart-layout,
  .tnr-newsletter__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnr-split--reverse .tnr-split__media {
    order: 0;
  }

  .tnr-hero {
    min-height: 100svh;
  }

  .tnr-hero__accent--top-right {
    width: clamp(100px, 30vw, 180px);
    opacity: 0.6;
  }

  .tnr-hero__accent--bottom-left {
    width: clamp(80px, 22vw, 140px);
    opacity: 0.5;
  }

  .tnr-hero__content {
    max-width: none;
    text-align: center;
  }

  .tnr-hero__content .tnr-eyebrow {
    justify-content: center;
  }

  .tnr-hero__heading {
    max-width: none;
    margin-inline: auto;
    background-image: none;
  }

  .tnr-hero__text {
    max-width: 38rem;
    margin-inline: auto;
  }

  .tnr-hero__price {
    margin-inline: auto;
  }

  .tnr-hero__actions {
    justify-content: center;
  }

  .tnr-hero__media {
    aspect-ratio: 4 / 5;
    max-height: 50vh;
  }

  .tnr-split__media {
    aspect-ratio: 3 / 2;
    max-height: 420px;
  }

  .tnr-gallery,
  .tnr-cart-summary {
    position: static;
  }

  .tnr-product-grid,
  .tnr-product-grid--4 {
    --product-columns: 2;
  }

  .tnr-carousel__track {
    grid-auto-columns: minmax(260px, 68%);
  }

  .tnr-section-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .tnr-section-header__action {
    padding-bottom: 0;
  }
}

@media (max-width: 720px) {
  .tnr-announcement__inner {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tnr-announcement__inner::-webkit-scrollbar {
    display: none;
  }

  .tnr-hero__trust {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .tnr-hero__trust-item {
    padding: var(--sp-5) 0;
  }

  .tnr-hero__trust-item+.tnr-hero__trust-item {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--tnr-border);
  }

  .tnr-service-strip__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .tnr-service-item {
    justify-content: flex-start;
    padding: var(--sp-3) 0;
  }

  .tnr-service-item+.tnr-service-item {
    border-left: 0;
    border-top: 1px solid var(--tnr-border);
  }

  .tnr-category-card {
    min-height: 0;
  }

  .tnr-cart-item {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .tnr-cart-item__controls {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .tnr-form-row--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnr-product-info__buy > .tnr-quantity {
    flex: 1 1 100%;
  }

  .tnr-product-info__buy .tnr-quantity {
    width: 100%;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  .tnr-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .tnr-toolbar__sort .tnr-select {
    width: 100%;
    min-width: 0;
  }

  .tnr-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  :root {
    --page-gutter: 1.125rem;
  }

  .tnr-product-grid,
  .tnr-product-grid--4 {
    --product-columns: 1;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

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

  .tnr-hero__heading {
    max-width: none;
  }

  .tnr-hero__price {
    width: 100%;
    justify-content: center;
  }

  .tnr-hero__actions {
    flex-direction: column;
  }

  .tnr-hero__actions .tnr-button {
    width: 100%;
  }

  .tnr-inline-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnr-carousel__track {
    grid-auto-columns: 86%;
  }

  .tnr-review-card {
    padding: var(--sp-6);
  }

  .tnr-seal {
    width: 104px;
    height: 104px;
    right: var(--sp-4);
    bottom: var(--sp-4);
  }

  /* Stays absolute: the media has a fixed aspect-ratio and clips overflow,
     so a static chip would be cut off. Tighten it instead. */
  .tnr-hero__chip {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: var(--sp-3);
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }

  .tnr-hero__chip-text span {
    display: none;
  }
}

/* 27. Motion & print ======================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .tnr-button:hover,
  .tnr-card--interactive:hover,
  .tnr-footer__social a:hover,
  .tnr-quick-add:hover {
    transform: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .tnr-quick-add {
      opacity: 1;
      transform: none;
    }
  }
}

@media print {

  .tnr-header,
  .tnr-announcement,
  .tnr-drawer,
  .tnr-popup,
  .tnr-footer,
  .tnr-quick-add,
  .tnr-carousel__controls,
  .tnr-marquee,
  .tnr-cart-drawer,
  .tnr-sticky-bar {
    display: none !important;
  }

  body.tnr-theme {
    background: #fff;
  }
}

/* ==========================================================================
   28. Colour schemes
   Per-section background/foreground pairing. Every scheme is a tested
   contrast pair — see the contrast assertions in the validation script.
   ========================================================================== */

.tnr-scheme {
  color: var(--scheme-fg, var(--tnr-text));
  background: var(--scheme-bg, transparent);
}

.tnr-scheme--white {
  --scheme-bg: var(--tnr-surface);
  --scheme-fg: var(--tnr-text);
}

.tnr-scheme--bone {
  --scheme-bg: var(--tnr-cream);
  --scheme-fg: var(--tnr-text);
}

.tnr-scheme--sage-tint {
  --scheme-bg: var(--tnr-card);
  --scheme-fg: var(--tnr-text);
}

/* The brand sage as a full band: ink type on it reads 11.3:1. */
.tnr-scheme--sage {
  --scheme-bg: var(--tnr-sage);
  --scheme-fg: var(--tnr-text);
}

.tnr-scheme--deep {
  --scheme-bg: var(--tnr-deep);
  --scheme-fg: #fff;
}

.tnr-scheme--deep .tnr-heading,
.tnr-scheme--deep strong {
  color: #fff;
}

.tnr-scheme--deep .tnr-eyebrow {
  color: var(--tnr-sage);
}

.tnr-scheme--deep .tnr-richtext,
.tnr-scheme--deep .tnr-lead {
  color: rgba(255, 255, 255, 0.76);
}

/* On the brand sage band the action colour only reaches 3.73:1, so the
   eyebrow steps down to the darker hover tone (5.40:1) and body copy uses
   ink (10.7:1). */
.tnr-scheme--sage .tnr-eyebrow {
  color: var(--tnr-green-700);
}

.tnr-scheme--sage .tnr-richtext,
.tnr-scheme--sage .tnr-lead {
  color: var(--tnr-text);
}

/* Section padding overrides, driven by per-section settings. */
.tnr-section[style*="--pt"] {
  padding-top: var(--pt);
}

.tnr-section[style*="--pb"] {
  padding-bottom: var(--pb);
}

/* ==========================================================================
   29. Marquee
   Seamless loop with no JavaScript: the block list is rendered twice into
   one track and translated by exactly -50 %, so the second copy lands where
   the first began. Improved with smoother easing, better rhythm, and
   richer branding integration.
   ========================================================================== */

.tnr-marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--marquee-pad, 0.375rem);
  /* Mask both edges so items never pop in/out on a hard cut — the scroll reads
     as drift rather than a ticker. Wider fade = more premium. */
  -webkit-mask-image: linear-gradient(to right,
      transparent,
      #000 var(--marquee-fade, 10%),
      #000 calc(100% - var(--marquee-fade, 10%)),
      transparent);
  mask-image: linear-gradient(to right,
      transparent,
      #000 var(--marquee-fade, 10%),
      #000 calc(100% - var(--marquee-fade, 10%)),
      transparent);
}

.tnr-marquee--bordered {
  border-block: 1px solid var(--tnr-border);
}

.tnr-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--marquee-gap);
  padding-left: var(--marquee-gap);
  animation: tnr-marquee-scroll var(--marquee-duration) linear infinite;
  will-change: transform;
}

.tnr-marquee--reverse .tnr-marquee__track {
  animation-direction: reverse;
}

/* Pause is immediate so the user never feels the content is running away. */
.tnr-marquee--pausable:hover .tnr-marquee__track,
.tnr-marquee--pausable:focus-within .tnr-marquee__track {
  animation-play-state: paused;
}

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

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

/* --- Items ---------------------------------------------------------------- */

.tnr-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  white-space: nowrap;
  /* Subtle hover lift when pausable — makes it feel interactive. */
  transition: opacity var(--dur) var(--ease-out);
}

.tnr-marquee--pausable:hover .tnr-marquee__item:hover {
  opacity: 0.7;
}

.tnr-marquee__text {
  font-family: var(--font-body);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-marquee__item .tnr-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  color: var(--tnr-olive);
}

/* --- Separators ----------------------------------------------------------- */

.tnr-marquee__sep {
  flex: 0 0 auto;
  opacity: 0.35;
  font-size: var(--fs-sm);
  color: var(--tnr-olive);
  transition: opacity var(--dur) var(--ease-out);
}

.tnr-marquee__sep .tnr-icon {
  width: 14px;
  height: 14px;
}

/* --- Display variant ------------------------------------------------------ */
/* Cormorant at a restrained display size. Tight letter-spacing and the serif's
   stroke contrast are doing the heavy lifting so the text can stay smaller
   than you'd need with a grotesque. */

.tnr-marquee--display {
  --marquee-pad: clamp(0.625rem, 1.2vw, 1rem);
  --marquee-fade: 14%;
  --marquee-gap: clamp(2rem, 4vw, 4rem);
}

.tnr-marquee--display .tnr-marquee__text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  font-weight: var(--fw-display);
  line-height: 1.18;
  letter-spacing: var(--ls-tighter);
  text-transform: none;
}

.tnr-marquee--display .tnr-marquee__item .tnr-icon {
  width: clamp(1.625rem, 3.8vw, 3.25rem);
  height: clamp(1.625rem, 3.8vw, 3.25rem);
  opacity: 0.4;
}

/* --- Outline alternate ---------------------------------------------------- */
/* Every other item is rendered as outlined text. The stroke uses currentColor
   so it automatically picks up the scheme foreground. */

.tnr-marquee--outline .tnr-marquee__text {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  text-stroke: 1.5px currentColor;
  opacity: 0.45;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.tnr-marquee--outline .tnr-marquee__item:nth-child(even) .tnr-marquee__text {
  color: inherit;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  opacity: 1;
}

/* On hover, bring the outlined items closer to visible — the whole strip
   feels alive without being distracting. */
.tnr-marquee--pausable.tnr-marquee--outline:hover .tnr-marquee__text {
  opacity: 0.6;
}

.tnr-marquee--pausable.tnr-marquee--outline:hover .tnr-marquee__item:nth-child(even) .tnr-marquee__text {
  opacity: 1;
}

/* --- Separator styling on display variant --------------------------------- */

.tnr-marquee--display .tnr-marquee__sep {
  opacity: 0.25;
}

.tnr-marquee--display .tnr-marquee__sep .tnr-icon {
  width: clamp(1rem, 2.2vw, 1.75rem);
  height: clamp(1rem, 2.2vw, 1.75rem);
}

/* --- Soft edge fade pseudo-elements --------------------------------------- */

.tnr-marquee--faded::before,
.tnr-marquee--faded::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(3rem, 10vw, 10rem);
  pointer-events: none;
}

.tnr-marquee--faded::before {
  left: 0;
  background: linear-gradient(to right, var(--scheme-bg, var(--tnr-cream)), transparent);
}

.tnr-marquee--faded::after {
  right: 0;
  background: linear-gradient(to left, var(--scheme-bg, var(--tnr-cream)), transparent);
}

/* ==========================================================================
   30. Mega menu
   ========================================================================== */

.tnr-nav {
  position: relative;
}

.tnr-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.tnr-nav__link .tnr-icon {
  width: 14px;
  height: 14px;
  margin-left: var(--sp-1);
  transition: transform var(--dur) var(--ease-out);
}

.tnr-nav__item[data-tnr-open="true"] .tnr-nav__link .tnr-icon {
  transform: rotate(180deg);
}

.tnr-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--z-megamenu);
  width: min(var(--mega-width, 980px), calc(100vw - var(--page-gutter) * 2));
  margin-top: var(--sp-3);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease-out);
}

.tnr-nav__item[data-tnr-open="true"] .tnr-mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.tnr-mega--full {
  --mega-width: 1240px;
}

.tnr-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--mega-feature, 0.72fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.tnr-mega__inner--no-feature {
  grid-template-columns: minmax(0, 1fr);
}

.tnr-mega__inner--image-left .tnr-mega__feature {
  order: -1;
}

.tnr-mega__columns {
  display: grid;
  grid-template-columns: repeat(var(--mega-columns, 3), minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.tnr-mega__heading {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--tnr-border);
  color: var(--tnr-green);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-mega__list {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-mega__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  color: var(--tnr-text);
  border-radius: var(--r-xs);
  font-size: var(--fs-md);
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.tnr-mega__link:hover {
  color: var(--tnr-green);
  background: var(--tnr-card);
}

.tnr-mega__link .tnr-icon {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.tnr-mega__link:hover .tnr-icon {
  opacity: 1;
  transform: translateX(0);
}

.tnr-mega__feature {
  display: grid;
  gap: var(--sp-4);
}

.tnr-mega__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--tnr-card);
  text-decoration: none;
}

.tnr-mega__card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tnr-mega__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.tnr-mega__card:hover .tnr-mega__card-media img {
  transform: scale(1.05);
}

.tnr-mega__card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-5);
  color: #fff;
  background: linear-gradient(to top, rgba(var(--tnr-deep-rgb), 0.86), rgba(var(--tnr-deep-rgb), 0));
}

.tnr-mega__card-title {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  /* White on a photo gradient is the one place a Garamond's thins can
     disappear, so this sits a step heavier than the rest of the display face. */
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}

.tnr-mega__card-text {
  display: block;
  margin-top: var(--sp-1);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-sm);
}

.tnr-mega__card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

.tnr-mega__card-cta .tnr-icon {
  width: 15px;
  height: 15px;
  transition: transform var(--dur) var(--ease-out);
}

.tnr-mega__card:hover .tnr-mega__card-cta .tnr-icon {
  transform: translateX(4px);
}

/* Promo variant: sage panel with ink type rather than an image overlay. */
.tnr-mega__promo {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  color: var(--tnr-text);
  background: var(--tnr-sage);
  border-radius: var(--r-lg);
  text-decoration: none;
}

.tnr-mega__promo .tnr-mega__card-title {
  color: var(--tnr-text);
}

.tnr-mega__promo p {
  margin: 0;
  color: var(--tnr-green-700);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.tnr-mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky);
  background: rgba(var(--tnr-deep-rgb), 0.28);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease-out);
}

.tnr-mega-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Drawer accordion — the same mega-menu data on small screens. */
.tnr-drawer__group {
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-drawer__group .tnr-drawer__link {
  border-bottom: 0;
}

.tnr-drawer__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  color: var(--tnr-text);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  text-align: left;
}

.tnr-drawer__toggle .tnr-icon {
  width: 18px;
  height: 18px;
  color: var(--tnr-green);
  transition: transform var(--dur) var(--ease-out);
}

.tnr-drawer__toggle[aria-expanded="true"] .tnr-icon {
  transform: rotate(180deg);
}

.tnr-drawer__submenu {
  display: none;
  padding-bottom: var(--sp-4);
}

.tnr-drawer__toggle[aria-expanded="true"]+.tnr-drawer__submenu {
  display: grid;
  gap: var(--sp-4);
}

.tnr-drawer__sublist {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-drawer__sublist a {
  display: block;
  padding: var(--sp-2) 0;
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  text-decoration: none;
}

.tnr-drawer__sublist a:hover {
  color: var(--tnr-green);
}

.tnr-drawer__subheading {
  margin: 0;
  color: var(--tnr-green);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ==========================================================================
   31. Cart drawer
   ========================================================================== */

.tnr-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}

.tnr-cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tnr-cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--tnr-deep-rgb), 0.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.tnr-cart-drawer.is-open .tnr-cart-drawer__overlay {
  opacity: 1;
}

.tnr-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--tnr-surface);
  box-shadow: var(--sh-xl);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.tnr-cart-drawer.is-open .tnr-cart-drawer__panel {
  transform: translateX(0);
}

.tnr-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-cart-drawer__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
}

.tnr-cart-drawer__body {
  flex: 1;
  padding: var(--sp-5) var(--sp-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tnr-cart-drawer__footer {
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--tnr-border);
  background: var(--tnr-cream);
}

.tnr-cart-drawer.is-loading .tnr-cart-drawer__body {
  opacity: 0.5;
  pointer-events: none;
}

/* Free-shipping progress */
.tnr-ship-bar {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: var(--tnr-card);
  border-radius: var(--r-md);
}

.tnr-ship-bar__label {
  margin: 0;
  color: var(--tnr-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.tnr-ship-bar__label strong {
  color: var(--tnr-green);
  font-weight: var(--fw-semi);
}

.tnr-ship-bar__track {
  height: 6px;
  overflow: hidden;
  background: var(--tnr-surface);
  border-radius: var(--r-pill);
}

.tnr-ship-bar__fill {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--tnr-green);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

.tnr-ship-bar--complete .tnr-ship-bar__fill {
  background: var(--tnr-olive);
}

/* Line items */
.tnr-cart-lines {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-cart-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--sp-4);
}

.tnr-cart-line__media {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tnr-card);
  border-radius: var(--r-sm);
}

.tnr-cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-cart-line__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}

.tnr-cart-line__title a {
  text-decoration: none;
}

.tnr-cart-line__variant {
  margin: 2px 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
}

.tnr-cart-line__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.tnr-cart-line .tnr-quantity {
  height: 38px;
  grid-template-columns: 34px minmax(34px, 1fr) 34px;
}

.tnr-cart-line .tnr-quantity__input {
  font-size: var(--fs-sm);
}

.tnr-cart-line__price {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
}

.tnr-cart-line__remove {
  padding: 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.tnr-cart-line__remove:hover {
  color: #9a3324;
}

.tnr-cart-drawer__totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
}

.tnr-cart-drawer__note {
  margin: var(--sp-3) 0 0;
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ==========================================================================
   32. Predictive search
   ========================================================================== */

.tnr-search {
  position: relative;
}

.tnr-search__panel {
  position: absolute;
  top: calc(100% + var(--sp-3));
  right: 0;
  z-index: var(--z-megamenu);
  width: min(420px, calc(100vw - var(--page-gutter) * 2));
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--sp-3);
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease-out);
}

.tnr-search.is-open .tnr-search__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tnr-search__results {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-search__result {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2);
  color: var(--tnr-text);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.tnr-search__result:hover,
.tnr-search__result.is-active {
  background: var(--tnr-card);
}

.tnr-search__result-media {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tnr-card);
  border-radius: var(--r-xs);
}

.tnr-search__result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-search__result-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.tnr-search__result-price {
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tnr-search__empty,
.tnr-search__loading {
  padding: var(--sp-5);
  color: var(--tnr-muted);
  font-size: var(--fs-md);
  text-align: center;
}

.tnr-search__all {
  display: block;
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  color: var(--tnr-green);
  border-top: 1px solid var(--tnr-border);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  text-align: center;
  text-decoration: none;
}

.tnr-search__all:hover {
  background: var(--tnr-card);
}

/* Header search field, shown when the search style is set to "field". */
.tnr-search__field {
  min-height: 40px;
  width: clamp(160px, 18vw, 240px);
  padding-block: var(--sp-2);
  font-size: var(--fs-md);
}

/* ==========================================================================
   33. Sticky add-to-cart bar
   ========================================================================== */

.tnr-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky-bar);
  padding: var(--sp-3) 0;
  background: rgba(var(--tnr-cream-rgb), 0.96);
  border-top: 1px solid var(--tnr-border);
  box-shadow: 0 -8px 30px -20px rgba(var(--tnr-deep-rgb), 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.tnr-sticky-bar.is-visible {
  transform: translateY(0);
}

.tnr-sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.tnr-sticky-bar__product {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.tnr-sticky-bar__media {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--tnr-card);
  border-radius: var(--r-xs);
}

.tnr-sticky-bar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnr-sticky-bar__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.tnr-sticky-bar__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tnr-sticky-bar__price {
  color: var(--tnr-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.tnr-sticky-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

/* ==========================================================================
   34. Before / after slider
   ========================================================================== */

.tnr-compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--tnr-card);
  box-shadow: var(--sh-md);
  touch-action: pan-y;
  user-select: none;
}

.tnr-compare__frame {
  position: relative;
  aspect-ratio: var(--compare-ratio, 4 / 3);
}

.tnr-compare__image {
  position: absolute;
  inset: 0;
}

.tnr-compare__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The "after" layer is clipped to the handle position. */
.tnr-compare__image--after {
  clip-path: inset(0 0 0 var(--compare-pos, 50%));
}

.tnr-compare__label {
  position: absolute;
  bottom: var(--sp-4);
  z-index: 2;
  padding: var(--sp-2) var(--sp-4);
  color: var(--tnr-text);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tnr-compare__label--before {
  left: var(--sp-4);
}

.tnr-compare__label--after {
  right: var(--sp-4);
}

.tnr-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  left: var(--compare-pos, 50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(var(--tnr-deep-rgb), 0.12);
  transform: translateX(-1px);
  pointer-events: none;
}

.tnr-compare__handle {
  position: absolute;
  top: 50%;
  left: var(--compare-pos, 50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--tnr-green);
  background: #fff;
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}

.tnr-compare__handle:focus-visible {
  outline: 2px solid var(--tnr-green);
  outline-offset: 3px;
}

.tnr-compare__handle .tnr-icon {
  width: 20px;
  height: 20px;
}

/* The real input: keyboard and screen-reader accessible, visually hidden
   but still driving the slider position. */
.tnr-compare__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
}

/* ==========================================================================
   35. Scroll reveal
   ========================================================================== */

.tnr-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}

.tnr-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a revealed container.
   `.tnr-reveal--stagger` is authored in the markup, so the hidden state is
   gated behind `.tnr-reveal-ready`, which only JavaScript adds. Without JS
   (or with animations off) the content is simply visible. */
.tnr-reveal--stagger.tnr-reveal-ready>* {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity 560ms var(--ease-out),
    transform 560ms var(--ease-out);
}

.tnr-reveal--stagger.is-revealed>* {
  opacity: 1;
  transform: translateY(0);
}

.tnr-reveal--stagger.is-revealed>*:nth-child(2) {
  transition-delay: 70ms;
}

.tnr-reveal--stagger.is-revealed>*:nth-child(3) {
  transition-delay: 140ms;
}

.tnr-reveal--stagger.is-revealed>*:nth-child(4) {
  transition-delay: 210ms;
}

.tnr-reveal--stagger.is-revealed>*:nth-child(5) {
  transition-delay: 280ms;
}

.tnr-reveal--stagger.is-revealed>*:nth-child(6) {
  transition-delay: 350ms;
}

/* When animations are switched off in theme settings the classes stay in the
   markup but resolve to no movement at all. */
.tnr-no-anim .tnr-reveal,
.tnr-no-anim .tnr-reveal--stagger>*,
.tnr-no-anim .tnr-reveal--stagger.tnr-reveal-ready>* {
  opacity: 1;
  transform: none;
  transition: none;
}

.tnr-no-anim .tnr-marquee__track {
  animation: none;
}

.tnr-no-anim [data-tnr-hero-item],
.tnr-no-anim .tnr-hero__media-wrapper,
.tnr-no-anim .tnr-hero__chip,
.tnr-no-anim .tnr-hero__trust-item {
  opacity: 1;
  transform: none;
  animation: none;
}

.tnr-no-anim .tnr-hero__accent {
  animation: none;
}

/* ==========================================================================
   36. New-component responsive + motion
   ========================================================================== */

@media (max-width: 1100px) {
  .tnr-mega__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnr-mega__inner--image-left .tnr-mega__feature {
    order: 0;
  }
}

@media (max-width: 990px) {

  /* Mega menus only exist on the desktop nav; the drawer accordion covers
     small screens. */
  .tnr-mega,
  .tnr-mega-backdrop {
    display: none;
  }

  /* The centred-logo grid collapses with the nav. */
  .tnr-header__inner--center {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo actions";
    row-gap: 0;
    padding-bottom: 0;
  }

  .tnr-header__inner--center .tnr-logo {
    justify-self: start;
  }

  .tnr-search__field {
    display: none;
  }

  .tnr-marquee--display .tnr-marquee__text {
    font-size: clamp(1.75rem, 7.5vw, 2.75rem);
  }
}

@media (max-width: 720px) {
  .tnr-sticky-bar__product {
    display: none;
  }

  .tnr-sticky-bar__actions {
    width: 100%;
  }

  .tnr-sticky-bar__actions .tnr-button {
    flex: 1;
  }

  .tnr-compare__handle {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {

  /* A moving marquee is the single worst offender for motion sensitivity, so
     it becomes a static, centred, wrapping row rather than just slowing down. */
  .tnr-marquee__track {
    animation: none !important;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0;
  }

  .tnr-marquee__track>[data-tnr-marquee-clone] {
    display: none;
  }

  .tnr-marquee--faded::before,
  .tnr-marquee--faded::after {
    display: none;
  }

  .tnr-reveal,
  .tnr-reveal--stagger>*,
  .tnr-reveal--stagger.tnr-reveal-ready>* {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Hero: show everything immediately, no entrance animation. */
  [data-tnr-hero-item],
  .tnr-hero__media-wrapper,
  .tnr-hero__chip,
  .tnr-hero__trust-item {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .tnr-hero__accent {
    animation: none;
  }

  .tnr-hero__media img {
    transition: none;
  }
}

/* ==========================================================================
   27. Localization — Language & Currency Selectors
   ========================================================================== */

.tnr-localization {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.tnr-localization__picker {
  position: relative;
}

.tnr-localization__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--tnr-text);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--r-xs);
  transition: background 0.18s;
  list-style: none;
  white-space: nowrap;
}

.tnr-localization__trigger::-webkit-details-marker {
  display: none;
}

.tnr-localization__trigger:hover {
  background: var(--tnr-sage-soft);
}

.tnr-localization__trigger .tnr-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.tnr-localization__picker[open] .tnr-localization__trigger .tnr-icon:last-child {
  transform: rotate(180deg);
}

.tnr-localization__current {
  font-size: var(--fs-sm);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tnr-localization__flag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--tnr-green);
}

.tnr-localization__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--tnr-surface);
  border: 1px solid var(--tnr-border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 32px rgba(var(--tnr-deep-rgb), 0.12);
  z-index: 300;
  padding: var(--sp-2);
  animation: tnr-dropdown-in 0.18s ease;
}

.tnr-localization__dropdown--right {
  left: auto;
  right: 0;
}

@keyframes tnr-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tnr-localization__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tnr-localization__option {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  color: var(--tnr-text);
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--font-body);
}

.tnr-localization__option:hover {
  background: var(--tnr-sage-soft);
}

.tnr-localization__option.is-active {
  background: var(--tnr-sage-soft);
  font-weight: var(--fw-semi);
  color: var(--tnr-green);
}

.tnr-localization__form {
  display: contents;
}

/* RTL support */
[dir="rtl"] .tnr-localization__dropdown {
  left: auto;
  right: 0;
}

[dir="rtl"] .tnr-localization__dropdown--right {
  right: auto;
  left: 0;
}

[dir="rtl"] .tnr-localization__option {
  text-align: right;
}

/* ==========================================================================
   28. Product Description — Always Visible (non-accordion)
   ========================================================================== */

.tnr-product-info__description {
  padding: var(--sp-5) 0 var(--sp-4);
  border-bottom: 1px solid var(--tnr-border);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--tnr-text);
}

.tnr-product-info__description p:first-child {
  margin-top: 0;
}

.tnr-product-info__description p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   29. Product Add-on — "Buy It With" card
   ========================================================================== */

.tnr-product-addon {
  margin-top: var(--sp-6);
  border: 1.5px solid var(--tnr-border);
  border-radius: var(--r-lg);
  background: var(--tnr-card);
  overflow: hidden;
}

.tnr-product-addon__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tnr-muted);
  padding: var(--sp-4) var(--sp-5) 0;
  margin: 0;
}

.tnr-product-addon__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}

.tnr-product-addon__media {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--tnr-sage-soft);
  display: block;
}

.tnr-product-addon__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tnr-product-addon__media:hover img {
  transform: scale(1.04);
}

.tnr-product-addon__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tnr-product-addon__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--tnr-text);
  text-decoration: none;
  display: block;
  line-height: 1.3;
}

.tnr-product-addon__title:hover {
  color: var(--tnr-green);
}

.tnr-product-addon__price-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.tnr-product-addon__form {
  margin-top: var(--sp-2);
}

/* ==========================================================================
   30. Comparison Table — "What Sets Us Apart"
   ========================================================================== */

.tnr-comparison {
  --compare-brand: var(--tnr-green);
  --compare-brand-bg: var(--tnr-sage-soft);
  --compare-neg-bg: #fde8e8;
  --compare-neg-color: #c0392b;
  --compare-head-bg: var(--tnr-deep);
  --compare-head-color: #ffffff;
}

.tnr-comparison__eyebrow {
  text-align: center;
  margin-bottom: var(--sp-4);
}

.tnr-comparison__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 24px rgba(var(--tnr-deep-rgb), 0.08);
  border: 1px solid var(--tnr-border);
}

.tnr-comparison__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  min-width: 480px;
}

/* Header row */
.tnr-comparison__head-row {
  background: var(--compare-head-bg);
  color: var(--compare-head-color);
}

.tnr-comparison__th {
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-heading);
  font-weight: var(--fw-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  text-align: left;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.tnr-comparison__th--label {
  width: 46%;
}

.tnr-comparison__th--brand,
.tnr-comparison__th--competitor {
  width: 27%;
  text-align: center;
}

/* Body rows */
.tnr-comparison__row {
  border-bottom: 1px solid var(--tnr-border);
  transition: background 0.15s;
}

.tnr-comparison__row:last-child {
  border-bottom: none;
}

.tnr-comparison__row:nth-child(even) {
  background: rgba(var(--tnr-sage-rgb), 0.04);
}

.tnr-comparison__row:hover {
  background: var(--compare-brand-bg);
}

.tnr-comparison__cell {
  padding: var(--sp-5) var(--sp-6);
  vertical-align: middle;
  line-height: 1.45;
}

.tnr-comparison__cell--label {
  font-weight: var(--fw-semi);
  color: var(--tnr-text);
}

.tnr-comparison__cell--brand,
.tnr-comparison__cell--competitor {
  text-align: center;
}

/* Brand "Yes" pill */
.tnr-comparison__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--compare-brand-bg);
  color: var(--compare-brand);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  padding: 4px 14px;
  border-radius: var(--r-pill);
  min-width: 52px;
}

.tnr-comparison__check .tnr-icon {
  width: 14px;
  height: 14px;
  color: var(--compare-brand);
  stroke-width: 2.5;
}

/* Competitor negative pill */
.tnr-comparison__negative {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--compare-neg-bg);
  color: var(--compare-neg-color);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  text-align: center;
  line-height: 1.3;
}

.tnr-comparison__negative .tnr-icon {
  width: 14px;
  height: 14px;
  color: var(--compare-neg-color);
  flex-shrink: 0;
}

.tnr-comparison__footnote {
  text-align: center;
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--tnr-muted);
}

/* Responsive */
@media (max-width: 640px) {

  .tnr-comparison__th,
  .tnr-comparison__cell {
    padding: var(--sp-4) var(--sp-4);
  }

  .tnr-comparison__th {
    font-size: var(--fs-base);
  }
}

/* ==========================================================================
   31. Product Reviews Section
   ========================================================================== */

.tnr-reviews {
  border-top: 1px solid var(--tnr-border);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}

.tnr-reviews__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

@media (min-width: 768px) {
  .tnr-reviews__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.tnr-reviews__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
}

.tnr-reviews__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.tnr-reviews__score {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: var(--fw-display);
  color: var(--tnr-text);
  line-height: 1;
}

.tnr-reviews__count {
  font-size: var(--fs-sm);
  color: var(--tnr-muted);
  margin: 0;
}

/* Placeholder state when no review app is installed */
.tnr-reviews__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-4);
  border: 2px dashed var(--tnr-border);
  border-radius: var(--r-xl);
  text-align: center;
  background: var(--tnr-card);
}

.tnr-reviews__placeholder-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tnr-sage-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tnr-green);
}

.tnr-reviews__placeholder-icon svg {
  width: 30px;
  height: 30px;
}

.tnr-reviews__placeholder-text {
  font-size: var(--fs-md);
  color: var(--tnr-muted);
  max-width: 360px;
  margin: 0;
}

/* ── Judge.me widget wrapper ─────────────────────────────────────────── */

.tnr-judgeme-widget {
  margin-top: var(--sp-4);
}

/* ── Judge.me — container & layout reset ────────────────────────────── */

.tnr-judgeme-widget .jdgm-widget {
  font-family: var(--font-body) !important;
  color: var(--tnr-text) !important;
}

.tnr-judgeme-widget .jdgm-rev-widg {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* ── Judge.me Widget Revamp (v2) Overrides ────────────────────────────── */

/* Hide Judge.me's own header/title — we render the branded header above */
.tnr-judgeme-widget .jm-review-widget-minimal-header__title {
  display: none !important;
}

/* Hide the redundant "No items found" text */
.tnr-judgeme-widget .jdgm-empty-state {
  display: none !important;
}

/* Remove extra spacing below widget */
.tnr-judgeme-widget .jm-review-widget {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ── Stars ──────────────────────────────────────────────────────────── */

.tnr-judgeme-widget .jdgm-star,
.tnr-judgeme-widget .jdgm-star.jdgm--on {
  color: var(--tnr-green) !important;
}

.tnr-judgeme-widget .jdgm-star.jdgm--off {
  color: var(--tnr-border) !important;
}

/* ── Individual review cards ────────────────────────────────────────── */

.tnr-judgeme-widget .jdgm-rev {
  background: var(--tnr-card) !important;
  border: 1px solid var(--tnr-border) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-6) var(--sp-7) !important;
  margin-bottom: var(--sp-5) !important;
  transition:
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out) !important;
}

.tnr-judgeme-widget .jdgm-rev:hover {
  box-shadow: var(--sh-md) !important;
  transform: translateY(-2px) !important;
}

/* Reviewer name */
.tnr-judgeme-widget .jdgm-rev__author {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semi) !important;
  font-size: var(--fs-md) !important;
  color: var(--tnr-text) !important;
}

/* Review date & verified badge */
.tnr-judgeme-widget .jdgm-rev__timestamp,
.tnr-judgeme-widget .jdgm-rev__buyer-badge {
  font-size: var(--fs-xs) !important;
  color: var(--tnr-muted) !important;
}

.tnr-judgeme-widget .jdgm-rev__buyer-badge {
  background: var(--tnr-sage-soft) !important;
  color: var(--tnr-green) !important;
  border: 1px solid rgba(var(--tnr-green-rgb), 0.2) !important;
  border-radius: var(--r-pill) !important;
  padding: 2px 10px !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: var(--fs-2xs) !important;
}

/* Review title */
.tnr-judgeme-widget .jdgm-rev__title {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-display) !important;
  font-size: var(--fs-xl) !important;
  color: var(--tnr-text) !important;
  letter-spacing: var(--ls-display) !important;
  margin-top: var(--sp-3) !important;
}

/* Review body text */
.tnr-judgeme-widget .jdgm-rev__body {
  font-family: var(--font-body) !important;
  font-size: var(--fs-md) !important;
  line-height: var(--lh-normal) !important;
  color: var(--tnr-text) !important;
  margin-top: var(--sp-3) !important;
}

/* Votes / helpful count */
.tnr-judgeme-widget .jdgm-rev__actions {
  margin-top: var(--sp-4) !important;
  padding-top: var(--sp-4) !important;
  border-top: 1px solid var(--tnr-border) !important;
}

.tnr-judgeme-widget .jdgm-rev__actions a,
.tnr-judgeme-widget .jdgm-rev__actions button {
  font-family: var(--font-body) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--tnr-muted) !important;
  transition: color var(--dur-fast) !important;
}

.tnr-judgeme-widget .jdgm-rev__actions a:hover,
.tnr-judgeme-widget .jdgm-rev__actions button:hover {
  color: var(--tnr-green) !important;
}

/* ── Review images / media ──────────────────────────────────────────── */

.tnr-judgeme-widget .jdgm-rev__media img,
.tnr-judgeme-widget .jdgm-rev-media__thumb {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--tnr-border) !important;
  transition:
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out) !important;
}

.tnr-judgeme-widget .jdgm-rev__media img:hover,
.tnr-judgeme-widget .jdgm-rev-media__thumb:hover {
  box-shadow: var(--sh-sm) !important;
  transform: scale(1.03) !important;
}

/* ── Pagination ─────────────────────────────────────────────────────── */

.tnr-judgeme-widget .jdgm-paginate {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-2) !important;
  margin-top: var(--sp-8) !important;
  padding-top: var(--sp-6) !important;
  border-top: 1px solid var(--tnr-border) !important;
}

.tnr-judgeme-widget .jdgm-paginate a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: var(--sp-2) var(--sp-3) !important;
  border: 1px solid var(--tnr-border) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--tnr-text) !important;
  background: var(--tnr-surface) !important;
  text-decoration: none !important;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast) !important;
}

.tnr-judgeme-widget .jdgm-paginate a:hover {
  background: var(--tnr-sage-soft) !important;
  border-color: var(--tnr-green) !important;
  color: var(--tnr-green) !important;
}

.tnr-judgeme-widget .jdgm-paginate a.jdgm-active {
  background: var(--tnr-green) !important;
  border-color: var(--tnr-green) !important;
  color: #fff !important;
}

/* ── Sort / filter bar ──────────────────────────────────────────────── */

.tnr-judgeme-widget .jdgm-sort-dropdown,
.tnr-judgeme-widget .jdgm-rev-widg__sort-wrapper select {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  color: var(--tnr-text) !important;
  background: var(--tnr-surface) !important;
  border: 1.5px solid var(--tnr-border) !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  appearance: auto !important;
  transition: border-color var(--dur-fast) !important;
}

.tnr-judgeme-widget .jdgm-sort-dropdown:focus,
.tnr-judgeme-widget .jdgm-rev-widg__sort-wrapper select:focus {
  outline: 2px solid var(--tnr-green) !important;
  outline-offset: 2px !important;
  border-color: var(--tnr-green) !important;
}

/* ── Buttons (Write a Review, Submit, etc.) ─────────────────────────── */

.tnr-judgeme-widget .jdgm-write-rev-link,
.tnr-judgeme-widget .jdgm-btn,
.tnr-judgeme-widget .jdgm-submit-rev {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-2) !important;
  background: var(--tnr-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  padding: 12px 28px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition:
    background var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out) !important;
}

.tnr-judgeme-widget .jdgm-write-rev-link:hover,
.tnr-judgeme-widget .jdgm-btn:hover,
.tnr-judgeme-widget .jdgm-submit-rev:hover {
  background: var(--tnr-green-700) !important;
  box-shadow: var(--sh-sm) !important;
  transform: translateY(-1px) !important;
}

.tnr-judgeme-widget .jdgm-write-rev-link:active,
.tnr-judgeme-widget .jdgm-btn:active,
.tnr-judgeme-widget .jdgm-submit-rev:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Cancel / secondary buttons */
.tnr-judgeme-widget .jdgm-cancel-rev {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: var(--tnr-muted) !important;
  border: 1.5px solid var(--tnr-border) !important;
  border-radius: var(--btn-radius) !important;
  padding: 12px 28px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition:
    border-color var(--dur-fast),
    color var(--dur-fast),
    background var(--dur-fast) !important;
}

.tnr-judgeme-widget .jdgm-cancel-rev:hover {
  border-color: var(--tnr-green) !important;
  color: var(--tnr-green) !important;
  background: var(--tnr-sage-soft) !important;
}

/* ── Review form ────────────────────────────────────────────────────── */

.tnr-judgeme-widget .jdgm-form-wrapper {
  background: var(--tnr-card) !important;
  border: 1px solid var(--tnr-border) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-8) var(--sp-7) !important;
  margin-top: var(--sp-6) !important;
}

.tnr-judgeme-widget .jdgm-form__label {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semi) !important;
  color: var(--tnr-text) !important;
  letter-spacing: 0.02em !important;
  margin-bottom: var(--sp-2) !important;
}

.tnr-judgeme-widget .jdgm-form__input,
.tnr-judgeme-widget .jdgm-form__select,
.tnr-judgeme-widget .jdgm-form__textarea,
.tnr-judgeme-widget input[type="text"],
.tnr-judgeme-widget input[type="email"],
.tnr-judgeme-widget textarea,
.tnr-judgeme-widget select {
  font-family: var(--font-body) !important;
  font-size: var(--fs-md) !important;
  border: 1.5px solid var(--tnr-border) !important;
  border-radius: var(--r-sm) !important;
  padding: 12px 16px !important;
  background: var(--tnr-surface) !important;
  color: var(--tnr-text) !important;
  width: 100% !important;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast) !important;
}

.tnr-judgeme-widget .jdgm-form__input:focus,
.tnr-judgeme-widget .jdgm-form__textarea:focus,
.tnr-judgeme-widget input[type="text"]:focus,
.tnr-judgeme-widget input[type="email"]:focus,
.tnr-judgeme-widget textarea:focus,
.tnr-judgeme-widget select:focus {
  outline: none !important;
  border-color: var(--tnr-green) !important;
  box-shadow: 0 0 0 3px rgba(var(--tnr-green-rgb), 0.12) !important;
}


/* ── Q&A section ────────────────────────────────────────────────────── */

.tnr-judgeme-widget .jdgm-quest {
  background: var(--tnr-card) !important;
  border: 1px solid var(--tnr-border) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-5) var(--sp-6) !important;
  margin-bottom: var(--sp-4) !important;
}

/* ── Rating histogram bars ──────────────────────────────────────────── */

.tnr-judgeme-widget .jdgm-histogram__bar-content {
  background: var(--tnr-sage-soft) !important;
  border-radius: var(--r-pill) !important;
  overflow: hidden !important;
}

.tnr-judgeme-widget .jdgm-histogram__bar-content div {
  background: var(--tnr-green) !important;
  border-radius: var(--r-pill) !important;
}

/* ── Floating "Write a Review" widget button (Judge.me's own) ───────── */

.jdgm-write-rev-link-bottom,
.jdgm-floating-widget {
  background: var(--tnr-green) !important;
  color: #fff !important;
  border-radius: var(--btn-radius) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semi) !important;
  letter-spacing: 0.06em !important;
  box-shadow: var(--sh-lg) !important;
  transition:
    background var(--dur),
    box-shadow var(--dur) !important;
}

.jdgm-write-rev-link-bottom:hover,
.jdgm-floating-widget:hover {
  background: var(--tnr-green-700) !important;
}

/* ── Responsive fine-tuning ─────────────────────────────────────────── */

@media (max-width: 639px) {
  .tnr-judgeme-widget .jdgm-rev {
    padding: var(--sp-5) var(--sp-5) !important;
    border-radius: var(--r-lg) !important;
  }

  .tnr-judgeme-widget .jdgm-form-wrapper {
    padding: var(--sp-6) var(--sp-5) !important;
    border-radius: var(--r-lg) !important;
  }

  .tnr-judgeme-widget .jdgm-paginate a {
    min-width: 34px !important;
    height: 34px !important;
    font-size: var(--fs-xs) !important;
  }
}

/* ── Motion — disable hover transforms when prefers-reduced-motion ── */

@media (prefers-reduced-motion: reduce) {

  .tnr-judgeme-widget .jdgm-rev,
  .tnr-judgeme-widget .jdgm-write-rev-link,
  .tnr-judgeme-widget .jdgm-btn,
  .tnr-judgeme-widget .jdgm-submit-rev,
  .tnr-judgeme-widget .jdgm-rev__media img {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   32. Footer Localization Selector
   ========================================================================== */

.tnr-footer__localization {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(var(--tnr-deep-rgb), 0.1);
}

.tnr-footer-locale-form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.tnr-footer-locale-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tnr-muted);
  white-space: nowrap;
}

.tnr-footer-locale-select {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--tnr-text);
  background: var(--tnr-surface);
  border: 1.5px solid var(--tnr-border);
  border-radius: var(--r-xs);
  padding: 6px 10px;
  cursor: pointer;
  min-width: 140px;
  appearance: auto;
}

.tnr-footer-locale-select:focus {
  outline: 2px solid var(--tnr-green);
  outline-offset: 2px;
}

/* ==========================================================================
   37. Why Choose Us — product page trust strip
   ========================================================================== */

.tnr-why-us {
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--tnr-border);
  background: var(--tnr-card);
}

.tnr-why-us__header {
  text-align: center;
  margin-bottom: var(--sp-10, 2.5rem);
}

.tnr-why-us__heading {
  margin: var(--sp-2) 0 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.tnr-why-us__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6, 1.5rem);
}

@media (min-width: 768px) {
  .tnr-why-us__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tnr-why-us__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3, 0.75rem);
  padding: var(--sp-6, 1.5rem) var(--sp-4, 1rem);
  background: var(--tnr-surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--tnr-border);
  transition: box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}

.tnr-why-us__item:hover {
  box-shadow: 0 8px 24px rgba(var(--tnr-deep-rgb), 0.08);
  transform: translateY(-3px);
}

.tnr-why-us__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tnr-sage-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tnr-green);
  flex-shrink: 0;
}

.tnr-why-us__icon {
  width: 26px;
  height: 26px;
}

.tnr-why-us__title {
  font-family: var(--font-body);
  font-size: var(--fs-md, 1rem);
  font-weight: var(--fw-semi, 600);
  color: var(--tnr-text);
  margin: 0;
  line-height: var(--lh-heading, 1.2);
}

.tnr-why-us__text {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--tnr-muted);
  margin: 0;
  line-height: var(--lh-base, 1.6);
}

/* ==========================================================================
   38. Product reviews — Write a Review CTA
   ========================================================================== */

.tnr-reviews__cta {
  margin-top: var(--sp-8, 2rem);
  padding-top: var(--sp-8, 2rem);
  border-top: 1px solid var(--tnr-border);
}

.tnr-reviews__cta-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5, 1.25rem);
  align-items: flex-start;
  background: var(--tnr-sage-soft);
  border-radius: var(--r-xl);
  padding: var(--sp-6, 1.5rem) var(--sp-7, 2rem);
}

@media (min-width: 640px) {
  .tnr-reviews__cta-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.tnr-reviews__cta-heading {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-lg, 1.125rem);
  color: var(--tnr-text);
  margin: 0 0 var(--sp-1);
}

.tnr-reviews__cta-sub {
  font-size: var(--fs-sm);
  color: var(--tnr-muted);
  margin: 0;
  line-height: var(--lh-base);
}

/* ==========================================================================
   39. Mega menu — product image cards
   ========================================================================== */

.tnr-mega__feature--products {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.tnr-mega__product-grid {
  display: grid;
  grid-template-columns: repeat(var(--mega-product-cols, 3), 1fr);
  gap: var(--sp-3, 0.75rem);
}

.tnr-mega__product-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--tnr-text);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  border: 1px solid var(--tnr-border);
  background: var(--tnr-surface);
}

.tnr-mega__product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--tnr-deep-rgb), 0.1);
}

.tnr-mega__product-media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--tnr-sage-soft);
}

.tnr-mega__product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease-out);
}

.tnr-mega__product-card:hover .tnr-mega__product-media img {
  transform: scale(1.05);
}

.tnr-mega__product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}

.tnr-mega__product-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  color: var(--tnr-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tnr-mega__product-price {
  font-size: var(--fs-sm);
  color: var(--tnr-green);
  font-weight: var(--fw-semi);
}

/* ==========================================================================
   40. Mobile search overlay
   ========================================================================== */

.tnr-search-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header, 200) + 1);
  background: rgba(var(--tnr-deep-rgb), 0.5);
  display: flex;
  align-items: flex-start;
  padding-top: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.tnr-search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.tnr-search-overlay__panel {
  width: 100%;
  background: var(--tnr-surface);
  padding: var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  border-bottom: 1px solid var(--tnr-border);
  transform: translateY(-100%);
  transition: transform 0.25s var(--ease-out);
}

.tnr-search-overlay.is-open .tnr-search-overlay__panel {
  transform: translateY(0);
}

.tnr-search-overlay__form {
  flex: 1;
  position: relative;
}

.tnr-search-overlay__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  border: 1.5px solid var(--tnr-border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--tnr-text);
  background: var(--tnr-card);
  outline: none;
}

.tnr-search-overlay__input:focus {
  border-color: var(--tnr-green);
  box-shadow: 0 0 0 3px rgba(var(--tnr-green-rgb), 0.15);
}

.tnr-search-overlay__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tnr-text);
  padding: var(--sp-2);
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Mobile search trigger button — hidden on desktop */
.tnr-mobile-search-trigger {
  display: none;
}

@media (max-width: 990px) {
  .tnr-mobile-search-trigger {
    display: flex;
  }
}

/* ==========================================================================
   41. Mobile responsiveness fixes
   ========================================================================== */

/* Prevent any horizontal overflow globally on mobile */
@media (max-width: 990px) {

  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Header: ensure logo and actions don't overflow */
  .tnr-header__inner {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
    min-width: 0;
  }

  .tnr-logo__image {
    max-width: 90px;
    max-height: 90px;
    height: auto;
  }

  /* Nav links hide on mobile (drawer covers them) */
  .tnr-nav {
    display: none;
  }

  /* Product layout stacks on mobile */
  .tnr-product-layout {
    grid-template-columns: 1fr;
  }

  /* Gallery stacks */
  .tnr-gallery {
    min-width: 0;
  }

  /* Page width padding */
  .tnr-page-width {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
}

@media (max-width: 640px) {

  /* Why choose us: 1 column on very small screens */
  .tnr-why-us__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Mega product grid collapses */
  .tnr-mega__product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reviews CTA stacks */
  .tnr-reviews__cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Ensure header actions don't wrap unexpectedly */
  .tnr-header__actions {
    gap: var(--sp-2);
  }

  .tnr-header__cta {
    display: none;
  }
}

@media (max-width: 480px) {
  .tnr-why-us__grid {
    grid-template-columns: 1fr;
  }

  .tnr-why-us__item {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }

  .tnr-why-us__icon-wrap {
    flex-shrink: 0;
  }

  /* Drawer: full width */
  .tnr-drawer__panel {
    max-width: 100vw;
  }

  /* Sticky bar fits small screens */
  .tnr-sticky-bar {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }
}

/* Search field: always show icon button on mobile, field only on desktop */
@media (max-width: 990px) {
  .tnr-search {
    display: none;
  }

  /* Show mobile search trigger instead */
  .tnr-search-icon-mobile {
    display: flex !important;
  }
}

@media (min-width: 991px) {
  .tnr-search-icon-mobile {
    display: none !important;
  }
}

/* ==========================================================================
   42. Drawer search bar
   ========================================================================== */

.tnr-drawer__search {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-drawer__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.tnr-drawer__search-icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--tnr-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.tnr-drawer__search-icon .tnr-icon {
  width: 18px;
  height: 18px;
}

.tnr-drawer__search-input {
  width: 100%;
  padding-left: calc(var(--sp-3) + 18px + var(--sp-2));
  height: 44px;
  font-size: var(--fs-base);
}

/* ==========================================================================
   43. Our Story Page
   ========================================================================== */

.tnr-our-story {
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-14);
}

.tnr-our-story__content {
  max-width: 800px;
  margin: 0 auto;
}

.tnr-our-story__content .tnr-heading {
  margin-bottom: var(--sp-8);
  font-size: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.tnr-our-story__content .tnr-richtext p {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--tnr-text);
}

/* ==========================================================================
   Product page — tighter spacing for sub-sections
   ========================================================================== */

.tnr-template .tnr-section {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.tnr-template .tnr-why-us {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.tnr-template .tnr-why-us__header {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* ==========================================================================
   Cart — button feedback animation
   ========================================================================== */

@keyframes tnr-check-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tnr-button--adding {
  position: relative;
  pointer-events: none;
}

.tnr-button--adding>span,
.tnr-button--adding>.tnr-icon {
  opacity: 0;
}

.tnr-button--adding::after {
  content: '';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0;
}

.tnr-button--adding::after {
  content: '';
  width: 20px;
  height: 20px;
  margin: auto;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tnr-spin 0.6s linear infinite;
}

@keyframes tnr-spin {
  to {
    transform: rotate(360deg);
  }
}

.tnr-button--added {
  pointer-events: none;
  background: var(--tnr-green) !important;
}

.tnr-button--added>span,
.tnr-button--added>.tnr-icon {
  opacity: 0;
}

.tnr-button--added::after {
  content: '✓ Added';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  animation: tnr-check-pop 0.35s ease-out;
}

/* ==========================================================================
   Cart — line item remove animation
   ========================================================================== */

.tnr-cart-line {
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.35s ease 0.05s;
  max-height: 200px;
  overflow: hidden;
}

.tnr-cart-line--removing {
  opacity: 0;
  transform: translateX(30px);
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Cart item on full page */
.tnr-cart-item {
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.35s ease 0.05s;
  max-height: 300px;
  overflow: hidden;
}

.tnr-cart-item--removing {
  opacity: 0;
  transform: translateX(30px);
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-color: transparent !important;
}

/* ==========================================================================
   Cart — price flash on quantity change
   ========================================================================== */

@keyframes tnr-price-flash {
  0% {
    color: var(--tnr-green);
    transform: scale(1.12);
  }

  100% {
    color: inherit;
    transform: scale(1);
  }
}

.tnr-price--flash {
  animation: tnr-price-flash 0.5s ease-out;
}

/* ==========================================================================
   Cart drawer — loading spinner overlay
   ========================================================================== */

.tnr-cart-drawer.is-loading .tnr-cart-drawer__body {
  position: relative;
}

.tnr-cart-drawer.is-loading .tnr-cart-drawer__body::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid var(--tnr-border);
  border-top-color: var(--tnr-green);
  border-radius: 50%;
  animation: tnr-spin 0.65s linear infinite;
  z-index: 2;
}

/* ==========================================================================
   Cart page — AJAX-enhanced
   ========================================================================== */

.tnr-cart-page.is-loading {
  position: relative;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   Product page — Upsell / Add-On section
   ========================================================================== */

.tnr-upsells {
  margin-top: var(--sp-6);
  border: 1.5px solid var(--tnr-border);
  border-radius: var(--r-lg);
  background: var(--tnr-card);
  overflow: hidden;
}

.tnr-upsells__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--tnr-border);
}

.tnr-upsells__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tnr-muted);
}

.tnr-upsells__subtitle {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--tnr-olive);
}

.tnr-upsells__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnr-upsell-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  transition: background-color 0.2s ease;
}

.tnr-upsell-card+.tnr-upsell-card {
  border-top: 1px solid var(--tnr-border);
}

.tnr-upsell-card:hover {
  background: var(--tnr-sage-soft);
}

.tnr-upsell-card__media {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--tnr-sage-soft);
}

.tnr-upsell-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tnr-upsell-card:hover .tnr-upsell-card__media img {
  transform: scale(1.05);
}

.tnr-upsell-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tnr-upsell-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--tnr-text);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tnr-upsell-card__name:hover {
  color: var(--tnr-green);
}

.tnr-upsell-card__price {
  font-size: var(--fs-sm);
  color: var(--tnr-muted);
  font-variant-numeric: tabular-nums;
}

.tnr-upsell-card__action {
  flex-shrink: 0;
}

.tnr-upsell-card__action .tnr-button--sm {
  white-space: nowrap;
}

/* ==========================================================================
   Sticky ATC — hidden from assistive technology when not visible.
   JS toggles .is-visible; we mirror that in the a11y attribute via CSS
   (see natural-route.js initStickyAtc).
   ========================================================================== */

.tnr-sticky-bar:not(.is-visible) {
  /* Visually hidden by default; also hide from AT so it doesn't absorb Tab */
  visibility: hidden;
  pointer-events: none;
}

.tnr-sticky-bar.is-visible {
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   Cart pickup note
   ========================================================================== */

.tnr-cart-pickup-note {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  margin-top: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--tnr-sage-soft);
  border: 1px solid var(--tnr-border);
}

.tnr-cart-pickup-note__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--tnr-green);
}

.tnr-cart-pickup-note__icon svg {
  width: 100%;
  height: 100%;
}

.tnr-cart-pickup-note__title {
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0 0 4px;
  color: var(--tnr-text);
}

.tnr-cart-pickup-note__text {
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0;
  color: var(--tnr-muted);
}

.tnr-cart-pickup-note__text a {
  color: var(--tnr-green);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tnr-cart-pickup-note__text a:hover {
  color: var(--tnr-green-700);
}

/* ==========================================================================
   International customs duty checkbox
   ========================================================================== */

.tnr-cart-international {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: #FFF8E7;
  border: 1px solid #E8D5A8;
}

.tnr-cart-international__label {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--tnr-text);
}

.tnr-cart-international__checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--tnr-green);
  cursor: pointer;
}

.tnr-cart-international__text {
  user-select: none;
}

.tnr-cart-international__hint {
  font-size: 0.8rem;
  color: #c0392b;
  margin: 8px 0 0;
  min-height: 1.2em;
  font-weight: 500;
}

/* Checkout button: disabled state until duty checkbox is ticked */
.tnr-button[aria-disabled="true"],
.tnr-button[data-tnr-checkout-btn][aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Local pickup opt-in toggle ──────────────────────────── */

.tnr-cart-pickup-toggle {
  margin-top: var(--sp-5);
}

.tnr-cart-pickup-toggle__label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1.5px solid var(--tnr-border);
  background: var(--tnr-surface);
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
}

.tnr-cart-pickup-toggle__label:hover {
  border-color: var(--tnr-olive);
  background: var(--tnr-sage-soft);
}

.tnr-cart-pickup-toggle__checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--tnr-green);
  cursor: pointer;
}

.tnr-cart-pickup-toggle__indicator {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--tnr-green);
}

.tnr-cart-pickup-toggle__indicator svg {
  width: 100%;
  height: 100%;
}

.tnr-cart-pickup-toggle__text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tnr-text);
}

/* Collapsible pickup note — hidden by default, revealed by JS */
.tnr-cart-pickup-note--collapsible {
  display: none;
  margin-top: var(--sp-3);
  animation: tnrPickupReveal 0.25s ease;
}

.tnr-cart-pickup-note--collapsible.is-visible {
  display: flex;
}

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

/* Required badge on international notice */
.tnr-cart-international__text strong {
  color: var(--tnr-green-700, #45523C);
}

/* ==========================================================================
   Clickable about-teaser image
   ========================================================================== */

.tnr-split__media-link {
  display: block;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.tnr-split__media-link:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.tnr-split__media-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Enhanced mobile responsiveness — expert UI design
   ========================================================================== */

/* --- Base mobile type scale --- */
@media (max-width: 480px) {
  :root {
    --fs-base: 15px;
    --page-gutter: 1rem;
  }

  /* Tighter section spacing on small screens */
  .tnr-section,
  .tnr-template {
    padding-top: clamp(2rem, 6vw, 3rem);
    padding-bottom: clamp(2rem, 6vw, 3rem);
  }

  /* Headings scale down proportionally */
  .tnr-heading {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.2;
  }

  .tnr-heading--d1,
  .tnr-heading--d2 {
    font-size: clamp(1.625rem, 7vw, 2.25rem);
  }

  .tnr-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }

  /* Body text */
  .tnr-richtext,
  .tnr-section-header__copy,
  .tnr-lead {
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  /* Product card text */
  .tnr-product-card__title {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .tnr-product-card__text {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .tnr-product-card__foot .tnr-price {
    font-size: 0.8125rem;
  }

  /* Touch-friendly buttons */
  .tnr-button {
    min-height: 48px;
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
    font-size: 0.875rem;
  }

  .tnr-button--sm {
    min-height: 40px;
    font-size: 0.8125rem;
  }

  /* Quantity stepper touch targets */
  .tnr-quantity__button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Cart items */
  .tnr-cart-item__title a {
    font-size: 0.875rem;
  }

  .tnr-cart-item__variant {
    font-size: 0.75rem;
  }

  .tnr-cart-summary__title {
    font-size: 1.125rem;
  }

  /* Footer */
  .tnr-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .tnr-footer__heading {
    font-size: 0.875rem;
  }

  /* Announcement marquee */
  .tnr-marquee__text {
    font-size: 0.75rem;
  }

  .tnr-announcement__item {
    font-size: 0.75rem;
  }

  /* Breadcrumbs */
  .tnr-breadcrumbs {
    font-size: 0.75rem;
  }

  /* Page header */
  .tnr-page-header__title {
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
  }
}

/* --- Small phones (375px and below) --- */
@media (max-width: 375px) {
  :root {
    --page-gutter: 0.875rem;
  }

  .tnr-heading {
    font-size: clamp(1.25rem, 5.5vw, 1.625rem);
  }

  .tnr-product-grid {
    gap: var(--sp-3);
  }

  .tnr-product-card__body {
    padding: var(--sp-3);
  }

  .tnr-hero__heading {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
}

/* --- Product page mobile fixes --- */
@media (max-width: 720px) {
  .tnr-product-info__title {
    font-size: clamp(1.25rem, 5vw, 1.625rem);
    line-height: 1.25;
  }

  .tnr-product-info__price-row {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .tnr-accordion__summary {
    padding: var(--sp-4) 0;
    font-size: 0.875rem;
    min-height: 48px;
  }

  .tnr-accordion__content {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  /* Upsell cards */
  .tnr-upsells__list {
    gap: var(--sp-3);
  }

  .tnr-upsell-card {
    padding: var(--sp-3);
  }

  .tnr-upsell-card__name {
    font-size: 0.8125rem;
  }

  .tnr-upsell-card__price {
    font-size: 0.75rem;
  }

  /* Product trust points */
  .tnr-product-info__trust {
    font-size: 0.8125rem;
    gap: var(--sp-2);
  }

  .tnr-product-info__trust li {
    padding: var(--sp-2) 0;
  }
}

/* --- Cart page mobile --- */
@media (max-width: 640px) {
  .tnr-cart-summary {
    padding: var(--sp-5);
  }

  .tnr-cart-pickup-note {
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
  }

  .tnr-cart-international {
    padding: var(--sp-4);
  }

  .tnr-cart-international__checkbox {
    width: 22px;
    height: 22px;
  }
}

/* --- Search page mobile --- */
@media (max-width: 560px) {
  .tnr-search__result {
    gap: var(--sp-3);
    padding: var(--sp-3);
  }

  .tnr-search__result-media {
    width: 48px;
    height: 48px;
  }

  .tnr-search__result-title {
    font-size: 0.8125rem;
  }

  .tnr-search__result-price {
    font-size: 0.75rem;
  }
}

/* --- Ensure images are never wider than viewport --- */
img {
  max-width: 100%;
  height: auto;
}

/* --- Gallery thumbnails on mobile --- */
@media (max-width: 560px) {
  .tnr-gallery__thumbs {
    gap: var(--sp-2);
  }

  .tnr-gallery__thumb {
    width: 56px;
    height: 56px;
  }
}

/* --- Our Story page mobile --- */
@media (max-width: 640px) {
  .tnr-our-story__content {
    padding: var(--sp-6) 0;
  }

  .tnr-our-story__content .tnr-heading {
    font-size: clamp(1.375rem, 5vw, 1.75rem);
    margin-bottom: var(--sp-5);
  }

  .tnr-our-story__content .tnr-richtext {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .tnr-our-story__content .tnr-richtext p + p {
    margin-top: var(--sp-4);
  }
}

/* --- Comparison table mobile --- */
@media (max-width: 560px) {
  .tnr-comparison__label,
  .tnr-comparison__value {
    font-size: 0.75rem;
    padding: var(--sp-3);
  }
}

/* --- Before/After section mobile --- */
@media (max-width: 640px) {
  .tnr-before-after__slider {
    max-height: 400px;
  }

  .tnr-before-after__label {
    font-size: 0.6875rem;
    padding: var(--sp-1) var(--sp-3);
  }
}

/* --- Fix hero actions wrapping on mobile --- */
@media (max-width: 400px) {
  .tnr-hero__actions {
    gap: var(--sp-3);
  }

  .tnr-hero__actions .tnr-button {
    font-size: 0.8125rem;
    padding: var(--sp-3) var(--sp-4);
  }
}

/* ==========================================================================
   Marquee pause button — WCAG 2.2 SC 2.2.2
   Users must be able to pause auto-scrolling content.
   ========================================================================== */

.tnr-marquee {
  position: relative;
}

.tnr-marquee__pause {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: var(--sp-3);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: currentColor;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  font-size: 10px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.tnr-marquee__pause:hover,
.tnr-marquee__pause:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.28);
}

/* When paused, show a play triangle using CSS content */
.tnr-marquee.is-paused .tnr-marquee__pause::after {
  content: '▶';
  font-size: 9px;
}

.tnr-marquee.is-paused .tnr-marquee__pause-icon {
  display: none;
}

/* Pause the track animation when the wrapper has .is-paused */
.tnr-marquee.is-paused .tnr-marquee__track {
  animation-play-state: paused !important;
}


/* ==========================================================================
   26. Prefers-reduced-motion — WCAG 2.2 SC 2.2.2, advisory 2.3.3
   --------------------------------------------------------------------------
   Users who enable "Reduce Motion" in their OS settings should not be
   subjected to:
     • continuously scrolling marquees
     • entrance animations triggered on scroll
     • hover transforms on cards and buttons
     • cart line slide-out animations
     • spinning loaders
   We keep transitions for state changes (focus, open/close) because those
   are meaningful UI feedback, not decoration. We just keep them very short.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  /* --- Global transition dampening ---------------------------------------- */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* --- Marquee: pause the CSS animation ----------------------------------- */
  .tnr-marquee__track {
    animation-play-state: paused !important;
  }

  /* --- Card hover lift: remove transform ---------------------------------- */
  .tnr-card--interactive:hover,
  .tnr-product-card:hover {
    transform: none;
  }

  /* --- Button hover lift -------------------------------------------------- */
  .tnr-button:hover {
    transform: none;
  }

  /* --- Hero entrance stagger ---------------------------------------------- */
  [data-tnr-hero-item],
  [data-tnr-hero-reveal],
  [data-tnr-hero-media],
  [data-tnr-hero-chip],
  [data-tnr-hero-trust] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* --- Scroll reveal items ------------------------------------------------ */
  .tnr-reveal,
  .tnr-reveal-ready,
  [data-tnr-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Make sure revealed items are shown even if JS hasn't added is-revealed */
  .tnr-reveal:not(.is-revealed),
  .tnr-reveal-ready:not(.is-revealed)>* {
    opacity: 1 !important;
    transform: none !important;
  }

  /* --- Cart line remove animation ----------------------------------------- */
  .tnr-cart-line--removing,
  .tnr-cart-item--removing {
    transition: none !important;
    /* Immediately hide rather than slide */
    opacity: 0 !important;
    max-height: 0 !important;
  }

  /* --- Spinner override --------------------------------------------------- */
  .tnr-cart-drawer.is-loading .tnr-cart-drawer__body::after,
  .tnr-button--adding::after {
    animation: none !important;
    border: 3px solid var(--tnr-green);
  }

  /* --- Link icon slide ---------------------------------------------------- */
  .tnr-link:hover .tnr-icon {
    transform: none;
  }

  /* --- Skip link (keep it functional) ------------------------------------- */
  .tnr-skip-link {
    transition: none;
  }
}