/* ============================================================
   Renéra Design System — Colors & Type
   ───────────────────────────────────────────────────────────
   Source of truth: Renéra brand guidelines (Figma canonical).
   Enqueued globally via functions.php (reneranutrition_enqueue_design_system).
   Font paths are relative to this CSS file: ../fonts/
   ============================================================ */

/* —— Fallback families (self-hosted, perf 1.3) ——
   Newsreader / DM Sans / DM Mono — named fallbacks in the type stacks, and
   genuinely rendered on the auth pages (wp-login.css). Self-hosted (subsetted
   woff2 in ../fonts/google/) to drop the render-blocking external Google @import
   while keeping rendering identical. unicode-range = browsers fetch only the
   subset they need (latin for English). */
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/aFTU7PB1QTsUX8KYthSQBK6PYK3EXw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/aFTU7PB1QTsUX8KYthqQBK6PYK0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/aFTR7PB1QTsUX8KYvumzEY2tbYf-Vlh3uA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/aFTR7PB1QTsUX8KYvumzEYOtbYf-Vlg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/google/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYkzbARA_n8IsQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYgzbARA_n8IsQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYYzbARA_n8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439HyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439DyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439HyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439DyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439HyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK439DyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/google/cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* —— Recoleta (display serif) —— */
@font-face { font-family: 'Recoleta'; font-weight: 100; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-THIN.woff2') format('woff2'), url('../fonts/RECOLETA-THIN.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-LIGHT.woff2') format('woff2'), url('../fonts/RECOLETA-LIGHT.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-REGULAR.woff2') format('woff2'), url('../fonts/RECOLETA-REGULAR.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-MEDIUM.woff2') format('woff2'), url('../fonts/RECOLETA-MEDIUM.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-SEMIBOLD.woff2') format('woff2'), url('../fonts/RECOLETA-SEMIBOLD.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-BOLD.woff2') format('woff2'), url('../fonts/RECOLETA-BOLD.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETA-BLACK.woff2') format('woff2'), url('../fonts/RECOLETA-BLACK.TTF') format('truetype'); }

/* —— Recoleta Alt (wordmark variant) —— */
@font-face { font-family: 'Recoleta Alt'; font-weight: 100; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-THIN.woff2') format('woff2'), url('../fonts/RECOLETAALT-THIN.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-LIGHT.woff2') format('woff2'), url('../fonts/RECOLETAALT-LIGHT.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-REGULAR.woff2') format('woff2'), url('../fonts/RECOLETAALT-REGULAR.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-MEDIUM.woff2') format('woff2'), url('../fonts/RECOLETAALT-MEDIUM.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-SEMIBOLD.woff2') format('woff2'), url('../fonts/RECOLETAALT-SEMIBOLD.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-BOLD.woff2') format('woff2'), url('../fonts/RECOLETAALT-BOLD.TTF') format('truetype'); }
@font-face { font-family: 'Recoleta Alt'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('../fonts/RECOLETAALT-BLACK.woff2') format('woff2'), url('../fonts/RECOLETAALT-BLACK.TTF') format('truetype'); }


:root {
  /* ============================================================
     COLOUR — canonical per the brand color guide (Jul 2026).
     PRIMARY: 4 families (Woodland Green, Cherry Blossom, Dune,
     Cadet Grey) — each = main colour + light/dark support shades.
     SECONDARY: Seashell, Pure White, Pure Black.
     Monotone approach — pick one base, layer its shades; never
     mix more than two palettes in the same composition.
     The legacy ramp tokens (olive-, clay-, sand-, sky-) below
     are a frozen compatibility table for pre-existing page CSS —
     every entry is a literal hex; '= name' comments mark which
     guide colour it duplicates. Change a guide colour → update
     the matching ramp literals here too.

     Never write a glob like "olive-" + star + "/clay-" inside a
     comment: the star-slash pair closes the comment early, and the
     stray text then swallows the next declaration. That is exactly
     how --renera-woodland-green sat silently undefined (taking
     --renera-success and --renera-link-hover with it) until the
     admin Style Guide surfaced it on 2026-08-10.

     CHANGING A COLOUR? This file is the only CSS source; other
     surfaces sync from it — full registry in the header of
     includes/brand-colors.php (PHP palette for Stripe/emails,
     e2e rgb oracles, claude.ai design-project mirror).
     ============================================================ */

  /* —— BRAND GUIDE · PRIMARY COLORS —— */
  /* 1 — Woodland Green */
  --renera-woodland-green:       #5b7e50;   /* PMS 2265 C — main */
  --renera-woodland-green-light: #aedc91;   /* PMS 358 C */
  --renera-woodland-green-dark:  #354133;   /* PMS 350 C */
  /* 2 — Cherry Blossom */
  --renera-cherry-blossom:       #e9bba8;   /* PMS 489 C — main */
  --renera-cherry-blossom-light: #ffe8df;   /* PMS 9244 U */
  --renera-cherry-blossom-dark:  #bb8470;   /* PMS 10411 C — Terracotta */
  /* 3 — Dune */
  --renera-dune:                 #d6cdbc;   /* PMS 7534 C — main */
  --renera-dune-light:           #f3e9d5;   /* PMS 9224 C — warm parchment */
  --renera-dune-dark:            #7d776d;   /* Warm Gray 9 C */
  /* 4 — Cadet Grey */
  --renera-cadet-grey:           #cdd9e4;   /* PMS 650 C — main */
  --renera-cadet-grey-dark:      #425663;   /* PMS 2379 C — deep slate */

  /* —— BRAND GUIDE · SECONDARY COLORS —— */
  --renera-seashell:             #f6eee8;   /* default page surface */
  --renera-pure-white:           #ffffff;
  --renera-pure-black:           #000000;

  /* —— OLIVE (signature — most-used colour in the brand) —— */
  --renera-olive-900:  #232f1f;
  --renera-olive-800:  #354133;   /* = woodland-green-dark */
  --renera-olive-700:  #354133;   /* = woodland-green-dark — dominant brand fill (CTA, headers) */
  --renera-olive-600:  #464f39;
  --renera-olive-500:  #5b7e50;   /* = woodland-green — leaf accent */
  --renera-olive-400:  #767b68;
  --renera-olive-300:  #aedc91;   /* = woodland-green-light — light sage pop */
  --renera-olive-200:  #bcd7a5;
  --renera-olive-100:  #f1ffed;

  /* —— TERRACOTTA / CLAY (warm complement) —— */
  --renera-clay-700:   #bb8470;   /* = cherry-blossom-dark — terracotta accent fill */
  --renera-clay-500:   #e9bba8;   /* = cherry-blossom — pale terracotta */
  --renera-clay-300:   #e0ccbe;   /* warm sand hairline stroke */
  --renera-clay-200:   #ffe8df;   /* = cherry-blossom-light — palest peach */
  --renera-clay-100:   #fff6ef;   /* warm cream paper */

  /* Error / required red. The clay ramp is a warm terracotta accent, not a
     signal colour — at small sizes it reads as decoration rather than "fix
     this". This is the one true red in the system; use it for required-field
     marks and hard validation errors, never as a fill or a brand accent. */
  --renera-error-600:  #dc2626;

  /* —— SAND / CREAM (canonical page surface — not white) —— */
  --renera-sand-500:   #d6cdbc;   /* = dune */
  --renera-sand-400:   #f3e9d5;   /* = dune-light — warm parchment */
  --renera-sand-300:   #f6eee8;   /* = seashell — THE page background */
  --renera-sand-200:   #faf5ed;
  --renera-sand-100:   #fffaf3;

  /* —— SKY (cool counterpoint) —— */
  --renera-sky-700:    #425663;   /* = cadet-grey-dark — deep slate */
  --renera-sky-500:    #cdd9e4;   /* = cadet-grey — powder blue */

  /* —— NEUTRALS —— */
  --renera-ink:        #000000;   /* = pure-black */
  --renera-ink-soft:   #1B1B1B;   /* old ink, demoted — per colors_and_type.css in the design project */
  --renera-mute:       #7d776d;   /* = dune-dark */
  --renera-mute-2:     #c7c7c7;
  --renera-paper:      #ffffff;   /* = pure-white */
  --renera-line:       rgba(27, 27, 27, 0.10);

  /* —— THIRD-PARTY BRAND & OVERLAY (outside the five core palettes) —— */
  --renera-amazon-smile:  #f59e2c;                 /* Amazon store-badge swoosh — THIRD-PARTY brand colour, do NOT recolour in a Renéra rebrand */
  --renera-overlay-scrim: rgba(43, 38, 33, 0.55);  /* warm-dark wash over imagery (e.g. carousel caption chips) */

  /* —— SEMANTIC ROLES —— bound directly to the guide primitives above
     (no numbered-ramp bridge). Ramp tokens appear only where the shade
     has no guide name. */
  --renera-bg:         var(--renera-seashell);
  --renera-fg:         var(--renera-pure-black);
  --renera-accent:     var(--renera-woodland-green-dark);   /* #354133 */
  --renera-accent-2:   var(--renera-cherry-blossom-dark);
  --renera-success:    var(--renera-woodland-green);

  /* —— CLICKABLE ROLES —— single source of truth for buttons & links.
     Change these to restyle every primary button / action link site-wide. */
  --renera-btn-bg:         var(--renera-woodland-green-dark);    /* primary button, rest  */
  --renera-btn-fg:         var(--renera-sand-200);               /* no guide name for this cream */
  --renera-btn-bg-hover:   var(--renera-cherry-blossom-dark);    /* primary button, hover */
  --renera-btn-fg-hover:   var(--renera-olive-900);              /* no guide name for this shade */
  /* Icon buttons — the square/round glyph-only controls: quantity steppers,
     carousel and rail arrows, gallery nav. They all share ONE hover: the olive
     fill with a cream glyph. Change it here and every icon button follows.
     (Before 2026-08-11 the four steppers used a cream fill with an unchanged
     glyph while the five arrows used the olive fill — same control, two looks.) */
  --renera-iconbtn-bg-hover:        var(--renera-woodland-green-dark);
  --renera-iconbtn-fg-hover:        var(--renera-sand-200);
  /* Reversed, for icon buttons sitting on a dark olive panel. */
  --renera-iconbtn-bg-hover-invert: var(--renera-sand-200);
  --renera-iconbtn-fg-hover-invert: var(--renera-woodland-green-dark);

  --renera-link:           var(--renera-woodland-green-dark);    /* action / UI link      */
  --renera-link-hover:     var(--renera-woodland-green);
  --renera-link-underline: var(--renera-clay-300);               /* no guide name for this shade */

  /* ============================================================
     TYPOGRAPHY
     Recoleta (display serif) + DM Sans (body sans) +
     DM Mono (technical labels / eyebrows).
     Rooftop was removed 2026-07-18: its files were trial-licensed
     (TRIAL_*), unfit for a commercial store. DM Sans/DM Mono were
     already the bundled fallbacks and are now the canonical faces.
     ============================================================ */
  --renera-font-serif:     'Recoleta', 'Newsreader', 'Cormorant Garamond', Georgia, serif;
  --renera-font-serif-alt: 'Recoleta Alt', 'Recoleta', 'Newsreader', Georgia, serif;
  --renera-font-sans:      'DM Sans', system-ui, -apple-system, sans-serif;
  --renera-font-mono:      'DM Mono', ui-monospace, Menlo, monospace;

  --renera-fs-eyebrow: 11px;
  --renera-fs-xs:      12px;
  --renera-fs-sm:      14px;
  --renera-fs-base:    16px;
  --renera-fs-md:      18px;
  --renera-fs-lg:      22px;
  --renera-fs-xl:      28px;
  --renera-fs-2xl:     40px;
  --renera-fs-3xl:     56px;
  --renera-fs-4xl:     80px;
  --renera-fs-5xl:     128px;

  --renera-lh-tight:   1.05;
  --renera-lh-snug:    1.2;
  --renera-lh-normal:  1.55;
  --renera-lh-loose:   1.75;

  --renera-track-serif:   -0.012em;
  --renera-track-sans:     0.01em;
  --renera-track-eyebrow:  0.18em;

  /* ============================================================
     SPACING — 4-step base-4 scale
     ============================================================ */
  --renera-sp-1:   4px;
  --renera-sp-2:   8px;
  --renera-sp-3:   12px;
  --renera-sp-4:   16px;
  --renera-sp-5:   24px;
  --renera-sp-6:   32px;
  --renera-sp-7:   48px;
  --renera-sp-8:   64px;
  --renera-sp-9:   96px;
  --renera-sp-10:  128px;

  /* ============================================================
     RADII — squircle (22%) is the brand signature shape
     ============================================================ */
  --renera-r-sm:       4px;
  --renera-r-md:       10px;
  --renera-r-lg:       16px;
  --renera-r-xl:       24px;
  --renera-r-squircle: 22%;
  --renera-r-pill:     999px;

  /* ============================================================
     SHADOWS — minimal; brand is print-derived. Use hairline
     borders first; shadow only for floating product cards.
     ============================================================ */
  --renera-shadow-card: 0 1px 2px rgba(27,27,27,0.04), 0 8px 24px rgba(27,27,27,0.06);
  --renera-shadow-lift: 0 12px 40px rgba(35,47,31,0.10);

  /* ============================================================
     MOTION — restrained, paper-like
     ============================================================ */
  --renera-ease:      cubic-bezier(0.32, 0.04, 0.21, 1);
  --renera-dur-fast:  160ms;
  --renera-dur-base:  240ms;
  --renera-dur-slow:  400ms;
}

/* ============================================================
   JUSTIFIED BODY COPY — site-wide, desktop and mobile.
   Paragraphs sit flush on BOTH margins, the way Word's justify reads.
   This started as a blog-only rule (.rn-prose > p in post-detail.css,
   still there) and now applies to every <p> on the front end.
   Hyphenation ships with it: justification without hyphens opens rivers
   of white space between words, worst in the narrow mobile column.

   Scoped to <p> on purpose — NOT to <body>. text-align inherits, so
   justifying the body would stretch every wrapped heading, card title
   and menu label too. Headings and list items keep their ragged right.
   ============================================================ */
p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Centred blocks keep their centring. A container's `text-align: center`
   reaches its paragraphs by INHERITANCE, and any directly-matching rule —
   even the bare `p` above — beats an inherited value. So each centred
   section of the theme is named here to hand its paragraphs back.
   Add to this list when you add a centred block; an inline
   style="text-align:center" on the container is covered automatically. */
:is(
  .rn-section-header, .rn-story__header, .rn-trust-section__head,
  .rn-archive-hero__inner, .rn-article-hero--editorial .rn-article-hero__inner,
  .rn-empty, .rn-products-empty, .rn-cart-empty, .rn-cart-help, .rn-drawer__empty,
  .faq-hero .container, .faq-help-head,
  .rn-error-page .rn-stage-inner, .rn-form-footer,
  .rn-or__hero, .rn-or__support, .rn-badges__item,
  .rnm-phil, .rnm-trust, .rnm-quote
) p,
[style*="text-align:center"] p,
[style*="text-align: center"] p {
  text-align: center;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Not body copy — these read worse justified, so they keep their ragged right.
   · Display pull-quotes on the auth panes: a two-line quote justified pulls its
     first line apart.
   · Form-field paragraphs: wp-login and the WC forms wrap each label+input in a
     <p>, so justification stretches the label rather than any prose.
   · The auth lead/intro lines, which are short measures inside a narrow card.
   · Notices and validation messages — transient UI copy, not prose.
   Keeping these ragged is also what holds the auth visual baselines steady. */
.rn-wp-pane-quote, .rn-pane-quote,
.rn-wp-form-wrap .rn-wp-lead, .rn-form-pane .rn-lead,
#loginform p, #lostpasswordform p, #registerform p,
.woocommerce-form p, .woocommerce-form-register p, .woocommerce-form-login p,
.woocommerce-privacy-policy-text p,
.notice p, .rn-notice p,
.woocommerce-message, .woocommerce-error, .woocommerce-info,
.woocommerce-message p, .woocommerce-error p, .woocommerce-info p {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ============================================================
   TOUCH — no hover state on a touch screen.
   A phone has no pointer to hover with, so the browser applies :hover on tap
   and leaves it applied until the user taps somewhere else. Any hover fill
   therefore reads as a stuck "selected" state — the original bug report.
   Collapsing the hover tokens onto their rest values here makes every
   token-driven hover a no-op on touch, in ONE place: .rn-btn--primary,
   .rn-btn-primary (auth), .rnm-btn--primary, the WPForms submit, the error
   pages and the account buttons all follow without edits of their own.
   Pointer devices are completely unaffected.
   ============================================================ */
@media (hover: none) {
  :root {
    --renera-btn-bg-hover: var(--renera-btn-bg);
    --renera-btn-fg-hover: var(--renera-btn-fg);
  }
}

/* ============================================================
   TOUCH — no OS tap-highlight overlay on interactive controls;
   button labels aren't text-selectable (long-press on mobile
   otherwise selects the label instead of pressing the button).
   ============================================================ */
a, button, input[type="submit"], input[type="button"], [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
button, input[type="submit"], input[type="button"], [role="button"] {
  -webkit-user-select: none;
  user-select: none;
}

/* iOS Safari ZOOMS THE PAGE when a focused control computes under 16px —
   the checkout/cart fields sat at 15px and every tap-to-type broke the
   layout zoom. Keep text-entry controls at 16px on touch widths.
   !important on purpose: this sheet loads first (priority 5), so page
   stylesheets would otherwise win with their smaller sizes. */
@media (max-width: 1080px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="url"], select, textarea {
    font-size: 16px !important;
  }
}