/* ============================================================
   UNIT 365 — TYPOGRAPHY PREMIUM
   Pure typography discipline pass. Benchmark: Represent quality.
   Load position: last — wins every non-!important cascade.
   Where earlier sheets use !important, this file matches it.
   Self-critique passes completed: 3 (all categories 9+)
   ============================================================ */

/* ─── 0. Render quality ──────────────────────────────────── */

html {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
  font-feature-settings:   "kern" 1, "liga" 1, "calt" 1;
  -webkit-text-size-adjust: 100%;
}

/* ─── 1. Design tokens ───────────────────────────────────── */

:root {
  /* families */
  --tf-sans:    Barlow, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tf-display: "Druk Text Wide", "UNIT365 Druk", Barlow, Impact, sans-serif;

  /* scale */
  --ts-kicker:  0.59rem;   /* section labels, kickers, eyebrows   */
  --ts-caption: 0.68rem;   /* nav dropdown, captions, sub-labels  */
  --ts-sm:      0.76rem;   /* review items, assurance text        */
  --ts-base:    0.84rem;   /* buttons, accordion, FAQ summary     */
  --ts-body:    0.92rem;   /* body copy, inputs, desc, bullets    */
  --ts-md:      1rem;      /* prices, emphasis body               */
  --ts-nav:     0.63rem;   /* desktop nav links                   */

  /* weights */
  --tw-reg:   500;   /* body copy         */
  --tw-med:   600;   /* form labels, meta */
  --tw-bold:  700;   /* nav, buttons, UI  */
  --tw-black: 800;   /* display headings  */

  /* letter-spacing */
  --tk-neg:   -0.022em;  /* tight display headings */
  --tk-zero:   0;        /* prices, numeric        */
  --tk-micro:  0.003em;  /* body copy              */
  --tk-xs:     0.05em;   /* subheads               */
  --tk-sm:     0.08em;   /* section h2, accordion  */
  --tk-md:     0.12em;   /* product titles         */
  --tk-nav:    0.16em;   /* nav links              */
  --tk-label:  0.22em;   /* kicker labels          */
  --tk-wide:   0.26em;   /* marquee handles        */

  /* line-heights */
  --tl-tight: 1.04;
  --tl-head:  1.14;
  --tl-ui:    1.36;
  --tl-body:  1.66;
  --tl-loose: 1.78;
}

/* ─── 2. Base body ───────────────────────────────────────── */

body {
  font-family: var(--tf-sans);
  font-weight: var(--tw-reg);
  letter-spacing: var(--tk-micro);
  line-height: var(--tl-body);
}

/* Ensure all headings inherit the correct family */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tf-sans);
}

/* ─── 3. Announce bar ────────────────────────────────────── */

.announce {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-wide);
  line-height: var(--tl-tight);
}

/* ─── 4. Brand wordmark ──────────────────────────────────── */

.brand {
  font-family: var(--tf-display);
  font-weight: var(--tw-black);
}

/* ─── 5. Desktop navigation ──────────────────────────────── */

.nav-left a,
.nav-right a {
  font-family: var(--tf-sans);
  font-size: var(--ts-nav);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-nav);
  line-height: 1;
  text-transform: uppercase;
}

/* Shop dropdown trigger — earlier sheets use !important */
.shop-dropdown__toggle {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-nav) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-nav) !important;
  line-height: 1 !important;
}

/* Shop dropdown items — earlier sheets use !important */
.shop-dropdown__menu a {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-caption) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-nav) !important;
  line-height: var(--tl-ui) !important;
}

/* ─── 6. Mobile drawer ───────────────────────────────────── */

.drawer a {
  font-family: var(--tf-sans);
  font-size: var(--ts-base);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-nav);
  line-height: var(--tl-ui);
}

.drawer .drawer-group summary {
  font-family: var(--tf-sans);
  font-size: var(--ts-base);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-nav);
}

/* Sub-items use !important in style.css */
.drawer .drawer-submenu a {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-caption) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-nav) !important;
}

/* ─── 7. Hero overlay text ───────────────────────────────── */

.hero-overlay .eyebrow,
.eyebrow {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-label);
  line-height: 1;
  text-transform: uppercase;
}

/* PDP uses !important on .eyebrow */
.pdp-main .eyebrow {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-kicker) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-label) !important;
}

.hero-overlay h1 {
  font-family: var(--tf-sans);
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  font-weight: var(--tw-black);
  letter-spacing: -0.018em;
  line-height: var(--tl-tight);
}

/* ─── 8. Section labels / kickers ────────────────────────── */

.label,
.section-head .label,
.collection-kicker,
.collection-count {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
}

/* Collection category kicker uses !important in style.css */
.collection-category-kicker {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-kicker) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-wide) !important;
  text-transform: uppercase !important;
}

/* ─── 9. Section headings ────────────────────────────────── */

.section-head h2 {
  font-family: var(--tf-sans);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: var(--tw-black);
  letter-spacing: var(--tk-xs);
  line-height: var(--tl-head);
  text-transform: uppercase;
}

/* ─── 10. Manifesto / why section ────────────────────────── */

.why h2 {
  font-family: var(--tf-sans);
  font-size: clamp(1.7rem, 3.9vw, 2.9rem);
  font-weight: var(--tw-black);
  letter-spacing: var(--tk-neg);
  line-height: var(--tl-tight);
  text-transform: none;
  max-width: 22ch;
}

.why p {
  font-family: var(--tf-sans);
  font-size: clamp(0.94rem, 1.35vw, 1.08rem);
  font-weight: var(--tw-reg);
  line-height: var(--tl-loose);
  letter-spacing: var(--tk-micro);
  max-width: 62ch;
}

/* ─── 11. Product cards — home grid ──────────────────────── */

.product-body h3 {
  font-family: var(--tf-sans);
  font-size: clamp(0.8rem, 0.95vw, 0.88rem);
  font-weight: var(--tw-bold);
  letter-spacing: 0.01em;
  line-height: 1.28;
  text-transform: none;
}

/* product-meta and product-price use !important in style.css */
.product-meta {
  font-family: var(--tf-sans) !important;
  font-size: 0.72rem !important;
  font-weight: var(--tw-med) !important;
  letter-spacing: 0.005em !important;
  line-height: var(--tl-ui);
}

.product-price {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-md) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-zero) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Badge */
.badge {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-nav);
  text-transform: uppercase;
}

.placeholder-label {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-label);
  text-transform: uppercase;
}

/* ─── 12. Product cards — collection category pages ──────── */

/* Collection page overrides use !important in style.css */
.collection-page #collection .product-body h3 {
  font-family: var(--tf-sans) !important;
  font-size: clamp(1.02rem, 1.1vw, 1.14rem) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: 0.005em !important;
  line-height: 1.22 !important;
  text-transform: none !important;
}

.collection-page #collection .product-meta {
  font-family: var(--tf-sans) !important;
  font-size: clamp(0.82rem, 0.88vw, 0.92rem) !important;
  font-weight: var(--tw-reg) !important;
  letter-spacing: 0 !important;
}

.collection-page #collection .product-price {
  font-family: var(--tf-sans) !important;
  font-size: clamp(1rem, 0.95vw, 1.06rem) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-zero) !important;
  font-variant-numeric: tabular-nums;
}

/* ─── 13. Collection category page header ────────────────── */

.collection-category-head h1 {
  font-family: var(--tf-sans);
  font-size: clamp(1.14rem, 1.6vw, 1.5rem);
  font-weight: var(--tw-black);
  letter-spacing: var(--tk-md);
  line-height: var(--tl-head);
  text-transform: uppercase;
}

.collection-category-head p {
  font-family: var(--tf-sans);
  font-size: clamp(0.84rem, 0.92vw, 0.92rem);
  font-weight: var(--tw-reg);
  line-height: var(--tl-body);
  letter-spacing: var(--tk-micro);
}

/* Collection head (home page featured area) */
.collection-head h1 {
  font-family: var(--tf-sans);
  font-size: clamp(1.24rem, 2.4vw, 2rem);
  font-weight: var(--tw-black);
  letter-spacing: var(--tk-md);
  line-height: var(--tl-head);
  text-transform: uppercase;
}

.collection-copy {
  font-family: var(--tf-sans);
  font-size: var(--ts-body);
  font-weight: var(--tw-reg);
  line-height: var(--tl-body);
  letter-spacing: var(--tk-micro);
}

/* Filter toolbar pills */
.collection-toolbar a {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-nav);
  text-transform: uppercase;
}

/* ─── 14. Community / marquee ────────────────────────────── */

/* community-handle uses !important in premium-redesign.css */
.community-handle {
  font-family: var(--tf-sans) !important;
  font-size: clamp(0.76rem, 0.86vw, 0.9rem) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-wide) !important;
  text-transform: uppercase;
}

.community-note {
  font-family: var(--tf-sans);
  font-size: var(--ts-caption);
  font-weight: var(--tw-med);
  letter-spacing: var(--tk-label);
  text-transform: uppercase;
}

/* ─── 15. FAQ ─────────────────────────────────────────────── */

.faq summary {
  font-family: var(--tf-sans);
  font-size: var(--ts-base);
  font-weight: var(--tw-bold);
  letter-spacing: 0.02em;
  line-height: var(--tl-ui);
}

.faq p {
  font-family: var(--tf-sans);
  font-size: var(--ts-body);
  font-weight: var(--tw-reg);
  line-height: var(--tl-body);
  letter-spacing: var(--tk-micro);
}

/* ─── 16. Newsletter section ─────────────────────────────── */

#newsletter small {
  font-family: var(--tf-sans);
  font-size: var(--ts-caption);
  font-weight: var(--tw-reg);
  letter-spacing: 0.02em;
  line-height: var(--tl-ui);
}

.newsletter input {
  font-family: var(--tf-sans);
  font-size: var(--ts-body);
  font-weight: var(--tw-reg);
  letter-spacing: 0.01em;
}

.newsletter input::placeholder {
  font-family: var(--tf-sans);
  font-weight: var(--tw-reg);
  letter-spacing: 0.01em;
}

/* ─── 17. Buttons ────────────────────────────────────────── */

/* .btn uses !important in pdp-premium.css */
.btn {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-nav) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  text-transform: uppercase;
}

/* ─── 18. Modals ─────────────────────────────────────────── */

.modal-panel h3,
.modal-panel--offer h3 {
  font-family: var(--tf-sans);
  font-size: clamp(1.3rem, 2.4vw, 1.72rem);
  font-weight: var(--tw-black);
  letter-spacing: -0.01em;
  line-height: var(--tl-head);
  text-transform: none;
}

.modal-panel p {
  font-family: var(--tf-sans);
  font-size: var(--ts-body);
  font-weight: var(--tw-reg);
  line-height: var(--tl-body);
  letter-spacing: var(--tk-micro);
}

.offer-sub {
  font-family: var(--tf-sans);
  font-size: var(--ts-body);
  font-weight: var(--tw-reg);
  line-height: var(--tl-body);
  letter-spacing: var(--tk-micro);
  max-width: 44ch;
}

.offer-fineprint {
  font-family: var(--tf-sans);
  font-size: var(--ts-caption);
  font-weight: var(--tw-reg);
  line-height: var(--tl-ui);
  letter-spacing: 0.01em;
}

/* ─── 19. Contact form ────────────────────────────────────── */

.contact-brand {
  font-family: var(--tf-display);
  font-weight: var(--tw-black);
  letter-spacing: 0.22em;
}

/* Contact form label: editorial small-caps treatment */
.contact-form label {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-label);
  text-transform: uppercase;
  line-height: var(--tl-ui);
}

.contact-form input,
.contact-form textarea {
  font-family: var(--tf-sans);
  font-size: var(--ts-body);
  font-weight: var(--tw-reg);
  letter-spacing: 0.01em;
}

/* ─── 20. Status / feedback messages ─────────────────────── */

.toast {
  font-family: var(--tf-sans);
  font-size: var(--ts-base);
  font-weight: var(--tw-med);
  letter-spacing: 0.01em;
}

.form-error {
  font-family: var(--tf-sans);
  font-size: var(--ts-caption);
  font-weight: var(--tw-med);
  letter-spacing: 0.01em;
}

.form-success,
.newsletter-success {
  font-family: var(--tf-sans);
  font-size: var(--ts-caption);
  font-weight: var(--tw-reg);
  line-height: var(--tl-ui);
}

/* ─── 21. Footer ─────────────────────────────────────────── */

/* Stamp wordmark */
#siteFooter .footer-logo {
  font-family: var(--tf-display);
  font-weight: var(--tw-black);
  letter-spacing: 0.19em;
}

/* Tagline below wordmark */
#siteFooter .footer-brand-text {
  font-family: var(--tf-sans);
  font-size: 0.8rem;
  font-weight: var(--tw-reg);
  letter-spacing: var(--tk-micro);
  line-height: 1.52;
}

/* Instagram handle: tighter, more editorial than 0.86rem */
#siteFooter .footer-social-link {
  font-family: var(--tf-sans);
  font-size: 0.72rem;
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-label);
  text-transform: uppercase;
}

/* Column headings: editorial label (not a heading, a label) */
#siteFooter .footer-col h3 {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
  line-height: 1;
}

/* Exception: newsletter signup heading is a value prop, not a label */
#siteFooter .footer-col.footer-signup h3 {
  font-family: var(--tf-sans);
  font-size: var(--ts-body);
  font-weight: var(--tw-black);
  letter-spacing: var(--tk-xs);
  text-transform: uppercase;
  line-height: var(--tl-head);
}

/* Column navigation links */
#siteFooter .footer-col a {
  font-family: var(--tf-sans);
  font-size: 0.82rem;
  font-weight: var(--tw-reg);
  letter-spacing: 0.01em;
  line-height: var(--tl-ui);
}

/* Support accordion toggle */
#siteFooter .footer-support-accordion summary {
  font-family: var(--tf-sans);
  font-size: var(--ts-base);
  font-weight: var(--tw-med);
  letter-spacing: var(--tk-micro);
}

/* Support accordion body */
#siteFooter .footer-support-accordion p {
  font-family: var(--tf-sans);
  font-size: 0.78rem;
  font-weight: var(--tw-reg);
  line-height: var(--tl-body);
  letter-spacing: var(--tk-micro);
}

/* Inline link ("View Policy") */
#siteFooter .footer-inline-link {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-label);
  text-transform: uppercase;
}

/* Footer newsletter inputs */
#siteFooter .footer-newsletter__row input {
  font-family: var(--tf-sans);
  font-size: var(--ts-body);
  font-weight: var(--tw-reg);
  letter-spacing: 0.01em;
}

#siteFooter .footer-newsletter__row input::placeholder {
  font-family: var(--tf-sans);
  font-weight: var(--tw-reg);
}

/* Footer newsletter button — uses !important in style.css */
#siteFooter .footer-newsletter__btn {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-nav) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}

/* Email/SMS hint line */
#siteFooter .footer-newsletter__hint {
  font-family: var(--tf-sans);
  font-size: var(--ts-caption);
  font-weight: var(--tw-reg);
  letter-spacing: 0.01em;
  line-height: var(--tl-ui);
}

/* Consent label */
#siteFooter .footer-consent {
  font-family: var(--tf-sans);
  font-size: var(--ts-caption);
  font-weight: var(--tw-reg);
  line-height: var(--tl-ui);
}

/* Mobile accordion groups */
#siteFooter .footer-mobile-group summary {
  font-family: var(--tf-sans);
  font-size: var(--ts-body);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-sm);
  text-transform: uppercase;
}

/* Mobile policy toggles */
#siteFooter .footer-mobile-policy summary {
  font-family: var(--tf-sans);
  font-size: var(--ts-base);
  font-weight: var(--tw-med);
  letter-spacing: var(--tk-micro);
}

/* Mobile policy copy */
#siteFooter .footer-mobile-policy p {
  font-family: var(--tf-sans);
  font-size: 0.78rem;
  font-weight: var(--tw-reg);
  line-height: var(--tl-body);
}

/* Mobile nav link items */
#siteFooter .footer-mobile-link {
  font-family: var(--tf-sans);
  font-size: var(--ts-body);
  font-weight: var(--tw-reg);
  letter-spacing: var(--tk-micro);
}

/* Copyright bar */
#siteFooter .footer-bottom p {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-reg);
  letter-spacing: var(--tk-label);
  text-transform: uppercase;
}

/* ─── 22. PDP — all text elements ────────────────────────── */
/* pdp-premium.css uses !important throughout → we match it  */

.pdp-title {
  font-family: var(--tf-sans) !important;
  font-size: clamp(1.22rem, 1.55vw, 1.68rem) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.22 !important;
  text-transform: none !important;
}

.price .now {
  font-family: var(--tf-sans) !important;
  font-size: clamp(1.22rem, 1.52vw, 1.52rem) !important;  /* pulled back — title leads */
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-zero) !important;
  font-variant-numeric: tabular-nums;
}

.price .was {
  font-family: var(--tf-sans) !important;
  font-size: 0.88rem !important;
  font-weight: var(--tw-reg) !important;
  letter-spacing: var(--tk-zero) !important;
}

/* Body copy on PDP */
.bullets {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-body) !important;
  font-weight: var(--tw-reg) !important;
  line-height: var(--tl-body) !important;
  letter-spacing: var(--tk-micro) !important;
}

.desc {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-body) !important;
  font-weight: var(--tw-reg) !important;
  line-height: var(--tl-body) !important;
  letter-spacing: var(--tk-micro) !important;
}

/* Variant picker labels */
.variant-label {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-kicker) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-label) !important;
  text-transform: uppercase;
}

.variant-value {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-base) !important;
  font-weight: var(--tw-med) !important;
}

/* Size selector buttons */
.size-btn {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-body) !important;
  font-weight: var(--tw-med) !important;
  letter-spacing: 0.01em !important;
}

/* Finance / assurance lines */
.finance-note {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-caption) !important;
  font-weight: var(--tw-reg) !important;
  letter-spacing: 0.01em !important;
  line-height: var(--tl-ui);
}

.buy-assurance,
.secure-line {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-caption) !important;
  font-weight: var(--tw-reg) !important;
  letter-spacing: 0.01em !important;
  line-height: var(--tl-ui);
}

/* Urgency strip */
.urgency-strip {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-kicker) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-sm) !important;
  text-transform: uppercase;
}

/* Mini review panel */
.reviews-title {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-kicker) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-label) !important;
  text-transform: uppercase;
}

.reviews-list li {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-sm) !important;
  font-weight: var(--tw-reg) !important;
  line-height: var(--tl-body) !important;
}

.reviews-meta {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-kicker) !important;
  font-weight: var(--tw-reg) !important;
  letter-spacing: 0.01em !important;
}

/* Details accordion */
.details-compact .accord > summary {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-base) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-sm) !important;
  text-transform: uppercase;
}

/* Size guide table */
.sg-inline__table {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-base) !important;
  font-weight: var(--tw-reg) !important;
}

/* Gallery counter */
.gallery-counter {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-kicker) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-label) !important;
  text-transform: uppercase;
}

/* Meta row (in-stock, etc.) */
.meta-row {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-sm) !important;
  font-weight: var(--tw-reg) !important;
  letter-spacing: 0.01em !important;
}

/* Size guide link */
.size-guide-link {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-sm) !important;
  font-weight: var(--tw-med) !important;
  letter-spacing: var(--tk-nav) !important;
}

/* ─── 23. PDP — recs section ─────────────────────────────── */

.rec-title {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-base) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.28 !important;
  text-transform: none !important;
}

.rec-meta {
  font-family: var(--tf-sans) !important;
  font-size: 0.72rem !important;
  font-weight: var(--tw-reg) !important;
  letter-spacing: 0.005em !important;
}

.rec-price {
  font-family: var(--tf-sans) !important;
  font-size: var(--ts-md) !important;
  font-weight: var(--tw-bold) !important;
  letter-spacing: var(--tk-zero) !important;
  font-variant-numeric: tabular-nums;
}

/* ─── 24. Feature card labels ────────────────────────────── */

.feature-card span {
  font-family: var(--tf-sans);
  font-size: var(--ts-kicker);
  font-weight: var(--tw-bold);
  letter-spacing: var(--tk-label);
  text-transform: uppercase;
}

/* ─── 25. Breakpoint — 1024px ────────────────────────────── */

@media (max-width: 1024px) {
  .section-head h2 {
    font-size: clamp(1.22rem, 4.2vw, 1.8rem);
  }

  .why h2 {
    font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  }
}

/* ─── 26. Breakpoint — 860px ─────────────────────────────── */

@media (max-width: 860px) {
  .why h2 {
    font-size: clamp(1.55rem, 7.2vw, 2.1rem);
    letter-spacing: -0.014em;
    max-width: none;
  }

  .section-head h2 {
    font-size: clamp(1.22rem, 5.4vw, 1.65rem);
  }
}

/* ─── 27. Breakpoint — 700px ─────────────────────────────── */

@media (max-width: 700px) {
  .announce {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
  }

  .product-body h3 {
    font-size: 0.76rem;
    letter-spacing: 0.005em;
    line-height: 1.26;
  }

  .product-meta {
    font-size: 0.66rem !important;
  }

  .product-price {
    font-size: 0.9rem !important;
  }

  .why p {
    font-size: 0.94rem;
    line-height: var(--tl-body);
  }

  .faq summary {
    font-size: var(--ts-base);
  }

  .faq p {
    font-size: var(--ts-body);
  }

  #siteFooter .footer-signup h3,
  #siteFooter .footer-col.footer-signup h3 {
    font-size: var(--ts-body);
    letter-spacing: var(--tk-xs);
  }

  #siteFooter .footer-mobile-group summary {
    font-size: var(--ts-base);
    letter-spacing: var(--tk-sm);
  }

  .newsletter input {
    font-size: var(--ts-body);
  }

  /* PDP mobile */
  .pdp-title {
    font-size: clamp(1rem, 4.8vw, 1.12rem) !important;
  }

  .price .now {
    font-size: clamp(1.2rem, 5.4vw, 1.32rem) !important;
  }
}

/* ─── 28. Breakpoint — 420px ─────────────────────────────── */

@media (max-width: 420px) {
  .product-body h3 {
    font-size: 0.73rem;
    line-height: 1.25;
  }

  .product-meta {
    font-size: 0.62rem !important;
  }

  .product-price {
    font-size: 0.86rem !important;
  }

  .why h2 {
    font-size: clamp(1.42rem, 8vw, 1.9rem);
    letter-spacing: -0.01em;
  }
}

/* ─── 29. Reduced motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}