/*
Theme Name: USA Standard Research
Theme URI: https://usastandardresearch.com
Author: USA Standard Research
Author URI: https://usastandardresearch.com
Description: Custom WooCommerce storefront theme for USA Standard Research, built 1:1 from the Figma developer handoff (file ZtWAfDvuLH1kToY0Bg8EuN, frame USR-0001 / home / 1440). Research-grade peptides storefront. For Laboratory & Research Use Only.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: usastandardresearch
Tags: e-commerce, custom-colors, custom-menu
*/

/* =========================================================================
   1. DESIGN TOKENS (from docs/DESIGN-SPEC.md — Figma ZtWAfDvuLH1kToY0Bg8EuN)
   ========================================================================= */
:root {
  /* Colour tokens */
  --usr-navy: #13266B;        /* primary surfaces, headings, buttons */
  --usr-red: #B5172F;         /* accent, badges, error text */
  --usr-cream: #FDF8F0;       /* page background */
  --usr-white: #FFFFFF;       /* cards */
  --usr-ink: #191919;         /* body text */
  --usr-secondary: #4A4A4A;   /* secondary text */
  --usr-muted: #666666;       /* muted text */
  --usr-tint-blue: #F1F5FF;   /* light blue panels */
  --usr-tint-red: #FBE9EC;    /* light red panels */
  --usr-sky: #9FBEFF;         /* accents on navy */
  --usr-rose: #EA8CA2;        /* red-family text on navy (never pure red on navy) */
  --usr-link-blue: #264BD0;   /* links */
  --usr-success: #1D7A3C;     /* functional success green */

  /* Typography — Aeonik when licensed; Figtree is the metric-matched stand-in */
  --usr-font-sans: "Aeonik", "Figtree", "Helvetica Neue", Arial, sans-serif;
  --usr-font-mono: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* Type ramp (size / line-height) */
  --usr-fs-display: 56px;   --usr-lh-display: 60px;
  --usr-fs-h1: 48px;        --usr-lh-h1: 52px;
  --usr-fs-h2: 35.2px;      --usr-lh-h2: 38px;
  --usr-fs-h3: 24px;        --usr-lh-h3: 27px;
  --usr-fs-h4: 19.5px;      --usr-lh-h4: 24px;
  --usr-fs-price: 18.6px;   --usr-lh-price: 20.4px;   /* Bold */
  --usr-fs-button: 14.7px;  --usr-lh-button: 18px;    /* Bold — buttons + product names */
  --usr-fs-body-l: 16px;    --usr-lh-body-l: 24.8px;
  --usr-fs-body: 14.1px;    --usr-lh-body: 21.8px;
  --usr-fs-small: 13.8px;   --usr-lh-small: 21.3px;
  --usr-fs-label: 12.8px;   --usr-lh-label: 19.8px;   /* Bold, +0.8% tracking, uppercase */

  --usr-ls-heading: -0.015em; /* headings letter-spacing −1.5% */
  --usr-ls-label: 0.008em;    /* label letter-spacing +0.8% */

  /* Layout */
  --usr-container: 1348px;
  --usr-gutter: 46px;          /* at 1440 */
  --usr-gutter-mobile: 22px;   /* at 390 */

  /* Chrome heights (Figma frame 7:2 top chrome) */
  --usr-ticker-h: 35px;        /* node 7:3 */
  --usr-ruo-bar-h: 33px;       /* node 7:14 */
  --usr-header-h: 79px;        /* node 7:2586 */
  --usr-chips-h: 56px;         /* node 7:2556 (55.83 + 1px border) */

  /* Misc */
  --usr-radius: 8px;
  --usr-radius-pill: 999px;
  --usr-shadow-header: 0 2px 8px rgba(19, 38, 107, 0.08);
  --usr-drawer-w: 420px;       /* node 7:2619 */
  --usr-z-header: 100;
  --usr-z-drawer: 200;
}

/* =========================================================================
   2. BASE / RESET
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--usr-cream);
  color: var(--usr-ink);
  font-family: var(--usr-font-sans);
  font-size: var(--usr-fs-body-l);
  line-height: var(--usr-lh-body-l);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  color: var(--usr-navy);
  font-weight: 500; /* headings Medium */
  letter-spacing: var(--usr-ls-heading);
}
h1 { font-size: var(--usr-fs-h1); line-height: var(--usr-lh-h1); }
h2 { font-size: var(--usr-fs-h2); line-height: var(--usr-lh-h2); }
h3 { font-size: var(--usr-fs-h3); line-height: var(--usr-lh-h3); }
h4 { font-size: var(--usr-fs-h4); line-height: var(--usr-lh-h4); }

p { margin: 0 0 1em; }

a { color: var(--usr-link-blue); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

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

ul, ol { margin: 0; padding: 0; }

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

code, kbd, samp, .usr-mono { font-family: var(--usr-font-mono); } /* molecular data: monospace */

:focus-visible { outline: 2px solid var(--usr-link-blue); outline-offset: 2px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--usr-navy); color: var(--usr-white);
  padding: 10px 16px; z-index: 999;
}
/* Focus must fully undo .screen-reader-text clipping (position needs !important
   to beat the sr-text rule) — review fix #14. */
.skip-link:focus {
  position: fixed !important;
  left: 0; top: 0;
  width: auto; height: auto;
  margin: 0;
  padding: 12px 20px;
  clip: auto; clip-path: none;
  overflow: visible;
  white-space: normal;
  background: var(--usr-navy);
  color: var(--usr-white);
  z-index: 300; /* above header (100) and drawers (200) */
}

.usr-no-scroll { overflow: hidden; }

/* =========================================================================
   3. LAYOUT — container / gutters
   ========================================================================= */
.usr-container {
  max-width: calc(var(--usr-container) + (var(--usr-gutter) * 2));
  margin: 0 auto;
  padding-left: var(--usr-gutter);
  padding-right: var(--usr-gutter);
}

/* =========================================================================
   4. TYPE UTILITIES
   ========================================================================= */
.usr-label {
  font-size: var(--usr-fs-label);
  line-height: var(--usr-lh-label);
  font-weight: 700;
  letter-spacing: var(--usr-ls-label);
  text-transform: uppercase;
}
.usr-price {
  font-size: var(--usr-fs-price);
  line-height: var(--usr-lh-price);
  font-weight: 700;
  color: var(--usr-navy);
}
.usr-small { font-size: var(--usr-fs-small); line-height: var(--usr-lh-small); }

/* =========================================================================
   5. BUTTONS (generic component)
   ========================================================================= */
.usr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 21px;
  border: 1px solid var(--usr-navy);
  border-radius: var(--usr-radius-pill);
  background: var(--usr-navy);
  color: var(--usr-white);
  font-size: var(--usr-fs-button);
  line-height: var(--usr-lh-button);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.usr-btn:hover, .usr-btn:focus { background: #0E1D52; border-color: #0E1D52; color: var(--usr-white); text-decoration: none; }
.usr-btn--red { background: var(--usr-red); border-color: var(--usr-red); }
.usr-btn--red:hover, .usr-btn--red:focus { background: #971327; border-color: #971327; }
.usr-btn--outline { background: transparent; color: var(--usr-navy); }
.usr-btn--outline:hover, .usr-btn--outline:focus { background: var(--usr-navy); color: var(--usr-white); }
.usr-btn--ghost { background: transparent; border-color: transparent; color: var(--usr-navy); }
.usr-btn[disabled], .usr-btn.is-disabled {
  background: var(--usr-muted); border-color: var(--usr-muted);
  cursor: not-allowed; opacity: 0.7;
}

/* =========================================================================
   6. FORMS + STATES (default / focused / invalid / submitting / success / server-error)
   ========================================================================= */
.usr-input {
  width: 100%;
  padding: 11px 15px;
  border: 1px solid rgba(19, 38, 107, 0.25);
  border-radius: var(--usr-radius);
  background: var(--usr-white);
  color: var(--usr-ink);
  font-size: var(--usr-fs-body);
  line-height: 17px;
}
.usr-input::placeholder { color: var(--usr-muted); }
.usr-input:focus { outline: 2px solid var(--usr-link-blue); outline-offset: 0; border-color: var(--usr-link-blue); }
.usr-field.is-invalid .usr-input,
.usr-input[aria-invalid="true"] { border-color: var(--usr-red); outline-color: var(--usr-red); }

.usr-form-msg {
  display: none;
  margin-top: 6px;
  font-size: var(--usr-fs-small);
  line-height: var(--usr-lh-small);
}
.usr-form-msg::before {
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
}
form[data-state="invalid"] .usr-form-msg--invalid,
form[data-state="server-error"] .usr-form-msg--server-error,
form[data-state="success"] .usr-form-msg--success { display: block; }
.usr-form-msg--invalid, .usr-form-msg--server-error { color: var(--usr-red); }
.usr-form-msg--invalid::before, .usr-form-msg--server-error::before { content: "\26A0"; } /* ⚠ inline icon */
.usr-form-msg--success { color: var(--usr-success); }
.usr-form-msg--success::before { content: "\2713"; } /* ✓ */
form[data-state="submitting"] [type="submit"] { opacity: 0.6; pointer-events: none; }
form[data-state="success"] .usr-newsletter__fields { display: none; }
/* On-navy (footer) variants — never pure red on navy: use rose */
.usr-on-navy .usr-form-msg--invalid,
.usr-on-navy .usr-form-msg--server-error { color: var(--usr-rose); }
.usr-on-navy .usr-form-msg--success { color: var(--usr-sky); }

/* =========================================================================
   7. TRUST TICKER — v2 node 7:3 "Quality and trust highlights" (h 35px)
   ========================================================================= */
.usr-ticker {
  height: var(--usr-ticker-h);
  background: linear-gradient(90deg, #13266B 0%, #13266B 55%, #13266B 100%); /* v2 gradient stops */
  color: var(--usr-white);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.usr-ticker__track {
  display: flex;
  width: max-content;
  animation: usr-marquee 36s linear infinite;
}
.usr-ticker:hover .usr-ticker__track { animation-play-state: paused; }
.usr-ticker__group {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 0 0 24px; /* diamond starts 24px in */
  white-space: nowrap;
}
.usr-ticker__group li {
  display: flex;
  align-items: center;
  gap: 24px;           /* diamond → text gap (Figma ≈23.7px) */
  margin-right: 24px;  /* text → next diamond gap */
  font-size: 11px; /* v2 */
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.usr-ticker__diamond {
  color: #264BD0; /* v2 */
  font-size: 8.3px;
  line-height: 12.91px;
}
@keyframes usr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .usr-ticker__track { animation: none; flex-wrap: wrap; width: 100%; }
  .usr-ticker { height: auto; min-height: var(--usr-ticker-h); }
  .usr-ticker__group[aria-hidden="true"] { display: none; }
}

/* =========================================================================
   8. ANNOUNCEMENT BAR — promo copy slot + live countdown (static, not sticky)
   ========================================================================= */
.usr-announcement {
  background: var(--usr-red);
  color: var(--usr-white);
  text-align: center;
}
.usr-announcement__inner {
  margin: 0;
  padding: 8px var(--usr-gutter-mobile);
  font-size: var(--usr-fs-small);
  line-height: 18px;
  font-weight: 700;
}
.usr-announcement__countdown {
  margin-left: 10px;
  font-family: var(--usr-font-mono);
  font-weight: 400;
  font-size: var(--usr-fs-label);
  letter-spacing: var(--usr-ls-label);
}
.usr-announcement__countdown:empty { display: none; }
.usr-announcement.is-expired { display: none; }

/* =========================================================================
   9. RUO NOTICE BAR — v2 node 7:14 (h 33px, static)
   ========================================================================= */
.usr-ruo-bar {
  height: var(--usr-ruo-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #B5172F;
  color: #FFFFFF;
  text-align: center;
}
.usr-ruo-bar p {
  margin: 0;
  padding: 0 var(--usr-gutter-mobile);
  font-size: 12.5px; /* v2 */
  line-height: 19.34px;
  font-weight: 500;
  letter-spacing: 0.499px;
  text-transform: uppercase;
}

/* =========================================================================
   10. MAIN HEADER — node 7:2586 (h 79px, sticky, white + shadow)
   ========================================================================= */
.usr-header {
  position: sticky;
  top: 0;
  z-index: var(--usr-z-header);
  height: var(--usr-header-h);
  background: var(--usr-white);
  box-shadow: var(--usr-shadow-header);
}
.usr-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 24px;
}
.usr-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.usr-header__logo img { width: 185px; height: 33px; object-fit: contain; }
.usr-header__logo-text {
  color: var(--usr-navy);
  font-size: var(--usr-fs-h4);
  line-height: var(--usr-lh-h4);
  font-weight: 700;
  letter-spacing: var(--usr-ls-heading);
  white-space: nowrap;
}
.usr-header__logo:hover, .usr-header__logo:focus { text-decoration: none; }

/* Hamburger (mobile menu toggle) */
.usr-header__hamburger {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--usr-navy);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Primary nav — node 7:2589 */
.usr-nav { margin-left: 23px; }
.usr-nav__list {
  display: flex;
  align-items: center;
  gap: 24px; /* Figma item gap ≈23.7px */
  list-style: none;
  margin: 0;
  padding: 0;
}
.usr-nav__item { position: relative; }
.usr-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  color: var(--usr-navy);
  font-size: var(--usr-fs-button);
  line-height: 17px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.usr-nav__link:hover, .usr-nav__link:focus { color: var(--usr-link-blue); text-decoration: none; }
.usr-nav__badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--usr-radius-pill);
  background: var(--usr-red);
  color: var(--usr-white);
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: var(--usr-ls-label);
  text-transform: uppercase;
}

/* Mega-nav placeholder (Shop) — opens on hover / focus-within */
.usr-meganav {
  position: absolute;
  top: 100%;
  left: -22px;
  z-index: 10;
  display: none;
  min-width: 640px;
  padding: 26px 30px;
  background: var(--usr-white);
  border: 1px solid rgba(19, 38, 107, 0.1);
  border-radius: 0 0 var(--usr-radius) var(--usr-radius);
  box-shadow: 0 12px 32px rgba(19, 38, 107, 0.14);
}
.usr-nav__item--mega:hover .usr-meganav,
.usr-nav__item--mega:focus-within .usr-meganav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 30px; }
.usr-meganav__heading {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  color: var(--usr-muted);
}
.usr-meganav a {
  display: block;
  padding: 6px 0;
  color: var(--usr-navy);
  font-size: var(--usr-fs-body);
  line-height: var(--usr-lh-body);
  font-weight: 500;
  text-decoration: none;
}
.usr-meganav a:hover, .usr-meganav a:focus { color: var(--usr-link-blue); }
.usr-meganav__secondary {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(19, 38, 107, 0.1);
  display: flex;
  gap: 24px;
}

/* Header actions — support / search / account / cart */
.usr-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.usr-header__support {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 20px;
  color: var(--usr-navy);
  font-size: var(--usr-fs-body);
  line-height: 23px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.usr-header__support svg { width: 26px; height: 26px; }
.usr-header__support:hover, .usr-header__support:focus { color: var(--usr-link-blue); text-decoration: none; }
.usr-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--usr-radius-pill);
  color: var(--usr-navy);
}
.usr-header__icon:hover, .usr-header__icon:focus { background: var(--usr-tint-blue); color: var(--usr-navy); }
.usr-header__icon svg { width: 17px; height: 17px; }

/* Cart button — node 7:2614 (95×40 pill, count badge 20×20) */
.usr-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 19px 0 20px;
  border-radius: var(--usr-radius-pill);
  background: var(--usr-navy);
  color: var(--usr-white);
  font-size: var(--usr-fs-body);
  line-height: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}
.usr-cart-btn:hover, .usr-cart-btn:focus { background: #0E1D52; color: var(--usr-white); text-decoration: none; }
.usr-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: var(--usr-radius-pill);
  background: var(--usr-red);
  color: var(--usr-white);
  font-size: var(--usr-fs-label);
  line-height: 14px;
  font-weight: 700;
}

/* =========================================================================
   11. CATEGORY CHIP ROW — node 7:2556 (h 56px incl 1px bottom border)
   ========================================================================= */
.usr-chips {
  background: var(--usr-white);
  border-bottom: 1px solid rgba(19, 38, 107, 0.12);
}
.usr-chips__list {
  display: flex;
  align-items: center;
  gap: 8px; /* Figma chip gap 8px */
  list-style: none;
  margin: 0;
  padding: 10px var(--usr-gutter-mobile);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.usr-chips__list::-webkit-scrollbar { display: none; }
.usr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border: 1px solid rgba(19, 38, 107, 0.2);
  border-radius: var(--usr-radius-pill);
  background: var(--usr-white);
  color: var(--usr-navy);
  font-size: var(--usr-fs-label);
  line-height: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.usr-chip:hover, .usr-chip:focus { background: var(--usr-tint-blue); text-decoration: none; color: var(--usr-navy); }
.usr-chip.is-active { background: var(--usr-navy); border-color: var(--usr-navy); color: var(--usr-white); }
.usr-chip svg { width: 16px; height: 16px; }
.usr-chip__count { font-weight: 400; color: inherit; opacity: 0.7; }

/* =========================================================================
   12. DRAWERS — cart (right, node 7:2619) + mobile menu (left) + overlay
   ========================================================================= */
.usr-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--usr-z-drawer) - 1);
  background: rgba(25, 25, 25, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.usr-drawer-overlay.is-open { opacity: 1; }
.usr-drawer-overlay[hidden] { display: none; }

.usr-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: var(--usr-z-drawer);
  width: var(--usr-drawer-w);
  max-width: calc(100vw - 40px);
  background: var(--usr-white);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
  visibility: hidden;
}
.usr-drawer--right { right: 0; transform: translateX(100%); }
.usr-drawer--left { left: 0; transform: translateX(-100%); }
.usr-drawer.is-open { transform: translateX(0); visibility: visible; }
.usr-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 67px; /* node 7:2620 */
  flex-shrink: 0;
  padding: 0 22px;
  background: var(--usr-cream);
  border-bottom: 1px solid rgba(19, 38, 107, 0.12);
}
.usr-drawer__title {
  margin: 0;
  color: var(--usr-navy);
  font-size: 17px;
  line-height: 21px;
  font-weight: 700;
  letter-spacing: var(--usr-ls-heading);
}
.usr-drawer__close {
  border: 0;
  background: none;
  padding: 0 4px;
  color: var(--usr-navy);
  font-size: 24px;
  line-height: 27px;
  cursor: pointer;
}
.usr-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}
.usr-cart-empty {
  margin: 66px 0 0;
  text-align: center;
  color: var(--usr-secondary);
  font-size: var(--usr-fs-body-l);
  line-height: var(--usr-lh-body-l);
}

/* Mobile menu drawer contents */
.usr-menu-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.usr-menu-drawer__nav a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid rgba(19, 38, 107, 0.08);
  color: var(--usr-navy);
  font-size: var(--usr-fs-body-l);
  font-weight: 700;
  text-decoration: none;
}
.usr-menu-drawer__nav .usr-label { display: block; margin: 20px 0 4px; color: var(--usr-muted); }
.usr-menu-drawer__nav .is-sub a { font-weight: 400; }

/* =========================================================================
   13. FOOTER — node 7:2496 (navy, h ≈719px)
   ========================================================================= */
.usr-footer {
  background: var(--usr-navy);
  color: var(--usr-white);
}
.usr-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.usr-footer a:hover, .usr-footer a:focus { color: var(--usr-white); text-decoration: underline; }

/* Trust strip — node 7:2497 (4 columns, bottom hairline) */
.usr-footer__trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 54px 0 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.usr-footer__trust-title {
  margin: 0 0 4px;
  color: var(--usr-white);
  font-size: var(--usr-fs-button);
  line-height: 18px;
  font-weight: 700;
  letter-spacing: normal;
}
.usr-footer__trust-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--usr-fs-label);
  line-height: 15px;
}

/* Main columns — brand 449 / 311 / 311 / 311 (Figma x: 46, 495, 806, 1117) */
.usr-footer__cols {
  display: grid;
  grid-template-columns: 449fr 311fr 311fr 311fr;
  gap: 24px;
  padding: 48px 0 34px;
}
.usr-footer__logo { display: inline-block; margin: 0 0 16px; }
.usr-footer__logo img { width: 173px; height: 31px; object-fit: contain; }
.usr-footer__logo-text {
  color: var(--usr-white);
  font-size: var(--usr-fs-h4);
  font-weight: 700;
  letter-spacing: var(--usr-ls-heading);
  white-space: nowrap;
}
.usr-footer__tagline {
  max-width: 344px;
  margin: 0 0 23px;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--usr-fs-small);
  line-height: 19.4px;
}
.usr-footer__social {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0 0 23px;
  padding: 0;
}
.usr-footer__social a {
  font-size: var(--usr-fs-body);
  line-height: 20.3px;
  text-decoration: underline;
}
.usr-footer__support-link {
  display: flex;
  align-items: center;
  max-width: 416px;
  margin: 0 0 22px;
  padding: 9px 17px;
  border: 1px solid rgba(159, 190, 255, 0.4); /* sky @ 40% */
  border-radius: var(--usr-radius);
  color: var(--usr-sky) !important;
  font-size: var(--usr-fs-small);
  line-height: 16px;
  font-weight: 700;
}
.usr-footer__support-link:hover, .usr-footer__support-link:focus { border-color: var(--usr-sky); text-decoration: none !important; }

/* Newsletter — nodes 7:2512–7:2519 */
.usr-footer__news-title {
  margin: 0 0 12px;
  color: var(--usr-white);
  font-size: var(--usr-fs-h4);
  line-height: 20.3px;
  font-weight: 500;
  letter-spacing: var(--usr-ls-heading);
}
.usr-footer__news-sub {
  max-width: 333px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--usr-fs-label);
  line-height: 17.8px;
}
.usr-newsletter { max-width: 384px; }
.usr-newsletter__fields { display: flex; gap: 8px; }
.usr-newsletter .usr-input {
  width: 270px;
  height: 41px;
  border-color: transparent;
}
.usr-newsletter [type="submit"] {
  height: 41px;
  padding: 0 21px;
  flex-shrink: 0;
  border-radius: var(--usr-radius);
}

/* Footer nav columns */
.usr-footer__heading {
  margin: 0 0 7px;
  color: var(--usr-sky);
  font-size: var(--usr-fs-label);
  line-height: 20.3px;
  font-weight: 700;
  letter-spacing: var(--usr-ls-label);
  text-transform: uppercase;
}
.usr-footer__menu { list-style: none; margin: 0; padding: 0; }
.usr-footer__menu li { margin-bottom: 13.8px; }
.usr-footer__menu a {
  font-size: var(--usr-fs-body);
  line-height: 17px;
}

/* Bottom disclaimers — node 7:2545 (top hairline) */
.usr-footer__legal {
  padding: 16px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.usr-footer__note {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--usr-fs-label);
  line-height: 15px;
}
.usr-footer__ruo {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--usr-fs-small);
  line-height: 20px;
}
.usr-footer__ruo strong { color: var(--usr-rose); } /* red-family on navy = rose */

/* =========================================================================
   14. PRODUCT CARD SHELL (generic component)
   ========================================================================= */
.usr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--usr-white);
  border: 1px solid rgba(19, 38, 107, 0.1);
  border-radius: var(--usr-radius);
  overflow: hidden;
}
.usr-card__media {
  position: relative;
  aspect-ratio: 1 / 1; /* product imagery 1:1 ≥1200×1200 */
  background: var(--usr-tint-blue);
}
.usr-card__media img { width: 100%; height: 100%; object-fit: cover; }
.usr-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  z-index: 1;
}
.usr-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--usr-radius-pill);
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: var(--usr-ls-label);
  text-transform: uppercase;
}
.usr-badge--preorder { background: var(--usr-navy); color: var(--usr-white); }
.usr-badge--sale { background: var(--usr-red); color: var(--usr-white); }
.usr-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 16px 22px 22px;
}
.usr-card__name {
  margin: 0;
  color: var(--usr-navy);
  font-size: var(--usr-fs-button);
  line-height: var(--usr-lh-button);
  font-weight: 700;
  letter-spacing: normal;
}
.usr-card__name a { color: inherit; text-decoration: none; }
.usr-card__name a:hover, .usr-card__name a:focus { color: var(--usr-link-blue); }
.usr-card__price {
  margin: 0;
  font-size: var(--usr-fs-price);
  line-height: var(--usr-lh-price);
  font-weight: 700;
  color: var(--usr-navy);
}
.usr-card__price .from { font-size: var(--usr-fs-label); font-weight: 400; color: var(--usr-muted); }
.usr-card__cta { margin-top: auto; }
.usr-card__cta .usr-btn { width: 100%; }
.usr-card.is-soldout .usr-card__media { opacity: 0.55; }

/* =========================================================================
   15. CONTENT / LOOP (minimal)
   ========================================================================= */
.usr-main { padding: 40px 0 80px; }
.usr-main article + article { margin-top: 48px; }
.usr-main .entry-title a { color: var(--usr-navy); }

/* =========================================================================
   16. BREAKPOINTS (per spec: 1360 / 1080 / 900 / 720 / 560 / 480)
   ========================================================================= */
@media (max-width: 1080px) {
  /* nav condenses — collapse text nav into the drawer */
  .usr-nav, .usr-header__support { display: none; }
  .usr-header__hamburger { display: inline-flex; }
}
@media (max-width: 900px) {
  .usr-footer__trust { grid-template-columns: repeat(2, 1fr); }
  .usr-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  :root { --usr-header-h: 64px; }
  .usr-container { padding-left: var(--usr-gutter-mobile); padding-right: var(--usr-gutter-mobile); }
  .usr-header__logo img { width: 150px; height: 27px; }
  .usr-cart-btn { padding: 0 12px; }
  .usr-cart-btn .usr-cart-btn__text { display: none; }
}
@media (max-width: 560px) {
  .usr-footer__trust, .usr-footer__cols { grid-template-columns: 1fr; }
  .usr-newsletter__fields { flex-direction: column; }
  .usr-newsletter .usr-input { width: 100%; }
}
@media (max-width: 480px) {
  :root { --usr-gutter-mobile: 16px; }
}

/* =========================================================================
   17. REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .usr-drawer, .usr-drawer-overlay, .usr-btn { transition: none; }
}

/* =========================================================================
   Cart drawer — populated (agent: cart)
   1:1 from Figma "USR / Cart drawer — populated state / 1440 + 390":
   desktop Aside 420×900 (x1180,y460 in cart-drawer.json), mobile 358.8×780
   (= 92vw of 390). All values below are measured from that JSON.
   Only additive rules — nothing above this marker was changed.
   ========================================================================= */

/* Shell — Aside fill #FDF8F0, shadow -20px 0 50px rgba(0,0,0,.25) */
#usr-cart-drawer {
  width: min(var(--usr-drawer-w), 92vw); /* 420 desktop / 358.8@390 */
  background: var(--usr-cream);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.25);
}
#usr-cart-drawer.is-updating { cursor: progress; }
#usr-cart-drawer.is-updating .usr-cart { opacity: 0.6; pointer-events: none; transition: opacity 0.15s ease; }

/* Head — Background+HorizontalBorder 420×67, fill #13266B */
#usr-cart-drawer .usr-drawer__head {
  height: 67px;
  padding: 0 20px 0 22px;
  gap: 12px;
  background: var(--usr-navy);
  border-bottom: 0;
}
#usr-cart-drawer .usr-drawer__title {
  color: var(--usr-cream);
  font-size: 17.6px;      /* Figtree 700 17.6/19.36 */
  line-height: 19.36px;
  letter-spacing: -0.022em; /* −0.387px @17.6 */
}
.usr-cart__clear {
  margin-left: auto;
  padding: 6px 15px;               /* pill 81.4×26, text 11.6/12 */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--usr-radius-pill);
  color: var(--usr-cream);
  font-size: 11.6px;
  line-height: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.usr-cart__clear:hover, .usr-cart__clear:focus { border-color: rgba(255, 255, 255, 0.7); color: var(--usr-white); text-decoration: none; }
#usr-cart-drawer .usr-drawer__close {
  color: var(--usr-cream);
  font-size: 22.5px;  /* '×' 22.52/22.52 */
  line-height: 26.5px;
}

/* Fragment wrapper (div.usr-cart) — scroll body + sticky foot */
.usr-cart { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#usr-cart-drawer .usr-drawer__body { padding: 0; }
.usr-cart__scroll--empty { padding: 22px; }

/* Free shipping — box [20,67 380×66.8] #E8F6EE, border rgba(21,127,75,.28), r11 */
.usr-cart__ship {
  margin: 0 20px;
  padding: 10px 16px 13px;
  background: #E8F6EE;
  border: 1px solid rgba(21, 127, 75, 0.28);
  border-radius: 11px;
}
.usr-cart__ship-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.usr-cart__ship-msg {
  margin: 0;
  color: #157F4B;
  font-size: 12.8px;      /* 700 12.8/19.84 */
  line-height: 19.84px;
  font-weight: 700;
}
.usr-cart__ship-nice { color: var(--usr-ink); font-weight: 400; } /* " Nice." override 400 #191919 */
.usr-cart__ship-amount .woocommerce-Price-amount { color: inherit; }
.usr-cart__ship-check { color: #157F4B; font-size: 16px; line-height: 24.8px; }
.usr-cart__ship-track {
  margin-top: 9px;
  height: 7px;             /* track 348×7, r999, rgba(19,38,107,.10) */
  border-radius: var(--usr-radius-pill);
  background: rgba(19, 38, 107, 0.10);
  overflow: hidden;
}
.usr-cart__ship-fill {
  height: 100%;
  border-radius: var(--usr-radius-pill);
  background: linear-gradient(90deg, #1A7F4B 0%, #157F4B 100%);
}

/* Prize wheel — panel [0,145 420×123.5], gradient #1B1A10→#13266B, border #9FBEFF, r12 */
.usr-cart__prize {
  margin: 11px 0 15px;     /* ship ends 133.8 → panel 145; items start 283.7 */
  padding: 11px 15px 15px; /* title +10.8y, bar inset 15.4 */
  background: linear-gradient(135deg, #1B1A10 0%, #13266B 70%);
  border: 1px solid var(--usr-sky);
  border-radius: 12px;
}
.usr-cart__prize-title { margin: 0; font-size: 11.5px; line-height: 17.77px; font-weight: 700; }
.usr-cart__prize-name { color: var(--usr-cream); }   /* '🎡 Prize Wheel · ' #FDF8F0 */
.usr-cart__prize-tier { color: var(--usr-link-blue); } /* 'Tier 3 unlocked' #264BD0 */
.usr-cart__prize-copy {
  margin: 9px 0 0;
  color: var(--usr-secondary); /* #4A4A4A on navy — dim, per design */
  font-size: 12px;             /* 400 12/17.4 */
  line-height: 17.4px;
}
.usr-cart__prize-track {
  margin-top: 15px;
  height: 6px;               /* bar 389.2×6, r3, track #13266B */
  border-radius: 3px;
  background: var(--usr-navy);
  overflow: hidden;
}
.usr-cart__prize-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #B5172F 0%, #9FBEFF 100%);
}
.usr-cart__prize-scale { position: relative; height: 15px; margin-top: 6px; }
.usr-cart__prize-now,
.usr-cart__prize-mark {
  position: absolute;
  top: 0;
  font-size: 6px;            /* 6/6.24, tracking +0.99px */
  line-height: 7px;
  letter-spacing: 0.99px;
}
.usr-cart__prize-now { left: 0; max-width: 24px; color: var(--usr-secondary); }
.usr-cart__prize-mark { transform: translateX(-100%); color: var(--usr-link-blue); font-weight: 700; white-space: nowrap; }

/* Line items — rows [18,283.7 384×103], hairline rgba(19,38,107,.10) */
.usr-cart__items { list-style: none; margin: 0; padding: 0 18px; }
.usr-cart__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;                 /* thumb 62 → text x92 */
  padding: 13px 0 16px;
  border-bottom: 1px solid rgba(19, 38, 107, 0.10);
}
.usr-cart__item-thumb {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;              /* box 62×62, image 48×48, r9 */
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--usr-white);
  border: 1px solid rgba(19, 38, 107, 0.10);
  border-radius: 9px;
}
.usr-cart__item-thumb img { width: 48px; height: 48px; object-fit: contain; }
.usr-cart__item-main { flex: 1; min-width: 0; }
.usr-cart__item-name {
  display: block;
  color: var(--usr-ink);
  font-size: 12.6px;         /* 700 12.6/19.57 */
  line-height: 19.57px;
  font-weight: 700;
  text-decoration: none;
}
.usr-cart__item-name:hover, .usr-cart__item-name:focus { color: var(--usr-navy); text-decoration: underline; }
.usr-cart__item-strength {
  margin: 0;
  color: var(--usr-secondary);
  font-size: 11px;           /* 400 11/17.06 */
  line-height: 17.06px;
}
.usr-cart__item-controls { display: flex; align-items: center; gap: 16px; margin-top: 13px; }
.usr-cart__qty { display: flex; align-items: center; gap: 6px; }
.usr-cart__qty-btn {
  width: 24px;
  height: 24px;              /* 24×24, r6, border rgba(19,38,107,.10) */
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--usr-white);
  border: 1px solid rgba(19, 38, 107, 0.10);
  border-radius: 6px;
  color: var(--usr-ink);
  font-size: 14.4px;
  line-height: 1;
  cursor: pointer;
}
.usr-cart__qty-btn:hover, .usr-cart__qty-btn:focus { border-color: var(--usr-navy); }
.usr-cart__qty-value {
  min-width: 18px;
  text-align: center;
  color: var(--usr-ink);
  font-size: 16px;           /* 400 16/24.8 */
  line-height: 24.8px;
}
.usr-cart__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--usr-red);
  font-size: 13.1px;         /* 500 13.1/15.72 */
  line-height: 15.72px;
  font-weight: 500;
  text-decoration: none;
}
.usr-cart__remove:hover, .usr-cart__remove:focus { color: #8F1225; text-decoration: underline; }
.usr-cart__remove-x { font-size: 10.4px; line-height: 12.48px; }
.usr-cart__item-prices { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.usr-cart__item-price {
  color: var(--usr-navy);
  font-size: 12.62px;        /* 500 12.62/19.6, −0.189px */
  line-height: 19.6px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.usr-cart__item-price .woocommerce-Price-amount { color: inherit; }
.usr-cart__item-compare {
  margin-top: 2px;
  color: var(--usr-secondary);
  font-size: 12.2px;         /* 500 12.2/18.85, strikethrough */
  line-height: 18.85px;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: line-through;
}
.usr-cart__item-compare .woocommerce-Price-amount { color: inherit; }
.usr-cart__item-bulk {
  margin-top: 3px;
  color: #0F5132;
  font-size: 11px;           /* 500 11/17.04 */
  line-height: 17.04px;
  font-weight: 500;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* Upsell — wrap [20,398.8 380×347.9] #FDF8F0, border rgba(181,23,47,.22), r12 */
.usr-cart__upsell {
  margin: 12px 20px 20px;
  padding: 16px;
  background: var(--usr-cream);
  border: 1px solid rgba(181, 23, 47, 0.22);
  border-radius: 12px;
}
.usr-cart__upsell-head { display: flex; align-items: flex-start; gap: 11px; }
.usr-cart__upsell-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;              /* '!' badge 22×22, #B5172F, r6 */
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--usr-red);
  border-radius: 6px;
  color: var(--usr-white);
  font-size: 15.2px;
  line-height: 1;
  font-weight: 700;
}
.usr-cart__upsell-title { margin: 0; color: var(--usr-ink); font-size: 12.6px; line-height: 19.57px; font-weight: 700; }
.usr-cart__upsell-sub {
  margin: 5px 0 0;
  color: var(--usr-secondary);
  font-size: 12.8px;         /* 400 12.8/18.17 */
  line-height: 18.17px;
}
.usr-cart__upsell-card {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 8px;
  padding: 9px 10px;         /* cards 348 wide, r9 */
  background: var(--usr-white);
  border: 1px solid rgba(19, 38, 107, 0.08);
  border-radius: 9px;
}
.usr-cart__upsell-head + .usr-cart__upsell-card { margin-top: 16px; }
.usr-cart__upsell-card.is-recommended { border-color: rgba(181, 23, 47, 0.30); }
.usr-cart__upsell-thumb {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;              /* 40×40, #F1F5FF, r7 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--usr-tint-blue);
  border-radius: 7px;
  overflow: hidden;
}
.usr-cart__upsell-thumb img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; }
.usr-cart__upsell-info { flex: 1; min-width: 0; }
.usr-cart__upsell-name {
  margin: 0;
  color: var(--usr-ink);
  font-size: 13.1px;         /* 500 13.1/16.4 */
  line-height: 16.4px;
  font-weight: 500;
}
.usr-cart__upsell-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  background: rgba(181, 23, 47, 0.10);
  border-radius: 4px;
  color: var(--usr-red);
  font-size: 9.6px;          /* 700 9.6/12, +0.48px, uppercase */
  line-height: 12px;
  font-weight: 700;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}
.usr-cart__upsell-price {
  margin: 1px 0 0;
  color: var(--usr-secondary);
  font-size: 11px;           /* 500 11/17.06 */
  line-height: 17.06px;
  font-weight: 500;
}
.usr-cart__upsell-price .woocommerce-Price-amount { color: inherit; }
.usr-cart__upsell-add {
  flex: 0 0 auto;
  padding: 9px 15px;         /* button 54.3×32.5, r8 */
  background: var(--usr-navy);
  border: 1px solid var(--usr-navy);
  border-radius: 8px;
  color: var(--usr-white);
  font-size: 12.1px;         /* 700 12.1/14.52 */
  line-height: 14.52px;
  font-weight: 700;
  text-decoration: none;
}
.usr-cart__upsell-add:hover, .usr-cart__upsell-add:focus { background: #0E1D52; border-color: #0E1D52; color: var(--usr-white); text-decoration: none; }

/* Foot — [0,492 420×408] #FFFFFF, top hairline rgba(19,38,107,.10) */
.usr-cart__foot {
  flex-shrink: 0;
  padding: 19px 22px 20px;
  background: var(--usr-white);
  border-top: 1px solid rgba(19, 38, 107, 0.10);
}
.usr-cart__total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.usr-cart__total-row .usr-cart__total-label {
  color: var(--usr-ink);
  font-size: 16px;           /* 700 16/24.8 */
  line-height: 24.8px;
  font-weight: 700;
}
.usr-cart__total-row .usr-cart__total-amount {
  color: var(--usr-navy);
  font-size: 16px;           /* 500 16/24.8, −0.24px */
  line-height: 24.8px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.usr-cart__total-row .usr-cart__total-amount .woocommerce-Price-amount { color: inherit; }
.usr-cart__total-row--discount { margin-top: 2px; }
.usr-cart__total-row--discount .usr-cart__total-label,
.usr-cart__total-row--discount .usr-cart__total-amount {
  color: #0F5132;            /* 700/500 14/21.7 */
  font-size: 14px;
  line-height: 21.7px;
}
.usr-cart__total-row--estimate { margin-top: 3px; }

/* Discount-code notice — [22,597.3 376×58.7] #FDF8F0, border rgba(181,23,47,.18), r10 */
.usr-cart__promo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 9px;
  padding: 12px 13px;
  background: var(--usr-cream);
  border: 1px solid rgba(181, 23, 47, 0.18);
  border-radius: 10px;
}
.usr-cart__promo-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;              /* '%' badge 20×20, #B5172F, r6 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--usr-red);
  border-radius: 6px;
  color: var(--usr-white);
  font-size: 12.8px;
  line-height: 1;
  font-weight: 700;
}
.usr-cart__promo-text {
  margin: 0;
  color: var(--usr-ink);
  font-size: 12.7px;         /* 400 12.7/17.8 */
  line-height: 17.8px;
}
.usr-cart__shipnote {
  margin: 12px 0 0;
  color: var(--usr-secondary);
  font-size: 12.5px;         /* 400 12.5/19.33 */
  line-height: 19.33px;
}

/* Secure Checkout — [22,720.7 376×47] #B5172F, r999, glow 0 14px 34px rgba(218,48,61,.65) */
.usr-cart__checkout {
  display: block;
  margin-top: 18px;
  height: 47px;
  border-radius: var(--usr-radius-pill);
  background: var(--usr-red);
  color: var(--usr-white);
  font-size: 15.7px;         /* 500 15.7/18.84 */
  line-height: 47px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(218, 48, 61, 0.65);
  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.usr-cart__checkout:hover, .usr-cart__checkout:focus { background: #9E1329; color: var(--usr-white); text-decoration: none; }
.usr-cart__checkout.is-disabled,
.usr-cart__checkout[aria-disabled="true"] {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}

/* RUO agreement — text 400 11.5/16.13 #4A4A4A below the button (design order);
   checkbox added to close the capture's "CHECKOUT GAP" (researcher/21+ gate). */
.usr-cart__ruo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px auto 0;
  max-width: 376px;
  color: var(--usr-secondary);
  font-size: 11.5px;
  line-height: 16.13px;
  cursor: pointer;
}
.usr-cart__ruo-box {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 1px 0 0;
  accent-color: var(--usr-red);
}
.usr-cart__ruo.is-nudged { animation: usr-ruo-nudge 0.35s ease; color: var(--usr-red); }
@keyframes usr-ruo-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Mobile 390 — Aside 358.8×780: same anatomy, tightened side padding */
@media (max-width: 480px) {
  .usr-cart__ship { margin: 0 16px; }
  .usr-cart__items { padding: 0 16px; }
  .usr-cart__upsell { margin: 12px 16px 16px; }
  .usr-cart__foot { padding: 16px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .usr-cart__ruo.is-nudged { animation: none; }
}

/* Title count — plain cream text inside "Your Cart (N)", not the header badge */
#usr-cart-drawer .usr-drawer__title .usr-cart-count {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* Drawer inline error — usr_set_qty validation message (review fix #2) */
.usr-cart__error {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid #E5484D;
  border-radius: 8px;
  background: #FDEBEC;
  color: #A1252A;
  font-size: 13px;
  line-height: 1.4;
}

/* =========================================================================
   Wide-viewport header chrome (appended — wide-layout fix)
   >1440: ticker marquee + category chip row content are capped to the
   container (1348 + 2×46 = 1440) and centered; the bars' backgrounds keep
   bleeding full-width. No computed change at ≤1440.
   .usr-ticker__viewport is the clipping window the marquee track scrolls
   inside (header.php); at ≤1440 it spans the full ticker, identically to
   the previous direct-child layout.
   ========================================================================= */
.usr-ticker__viewport {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
@media (min-width: 1441px) {
  .usr-ticker__viewport,
  .usr-chips__list {
    max-width: calc(var(--usr-container) + (var(--usr-gutter) * 2));
  }
  .usr-chips__list {
    margin: 0 auto;
  }
}

/* =========================================================================
   POLISH PASS (appended — global craft sweep: selection, focus contrast,
   interaction states, tap targets, chip-row scrollbar, blog fallback)
   Nothing above this marker was rewritten. Rules here only fire on
   interaction, only apply on coarse pointers / narrow viewports, or are
   computed no-ops at the 1440 design canvas.
   ========================================================================= */

/* ---- Selection color — navy on light surfaces, sky on navy surfaces ---- */
::selection { background: var(--usr-navy); color: var(--usr-white); }
.usr-footer ::selection,
.usr-on-navy ::selection,
.usr-hero-navy ::selection,
.usr-stats ::selection,
.usr-heroes ::selection,
.usr-feature ::selection,
.usr-proof ::selection,
.usr-beyond ::selection,
.usr-usa ::selection,
.usr-testing ::selection,
.usr-hero__band ::selection,
.usr-aff-hero ::selection,
.usr-feature-navy ::selection,
.usr-cta-panel ::selection,
.usr-panel-navy ::selection,
.usr-pdp-volume__head ::selection,
#usr-cart-drawer .usr-drawer__head ::selection {
  background: var(--usr-sky);
  color: var(--usr-navy);
}

/* ---- Focus rings on navy surfaces --------------------------------------
   The global ring is link-blue (#264BD0): 6.6:1 on cream but only 2.0:1 on
   navy. Sky (#9FBEFF) is 7.4:1 on navy — swap the ring color there. */
.usr-footer :focus-visible,
.usr-on-navy :focus-visible,
.usr-hero-navy :focus-visible,
.usr-stats :focus-visible,
.usr-heroes:focus-visible,
.usr-feature :focus-visible,
.usr-proof :focus-visible,
.usr-beyond :focus-visible,
.usr-usa :focus-visible,
.usr-testing :focus-visible,
.usr-hero__band :focus-visible,
.usr-aff-hero :focus-visible,
.usr-feature-navy :focus-visible,
.usr-cta-panel :focus-visible,
.usr-panel-navy :focus-visible,
.usr-pdp-volume__head :focus-visible,
#usr-cart-drawer .usr-drawer__head :focus-visible {
  outline-color: var(--usr-sky);
}

/* ---- Header / chrome interaction smoothing (150ms, color-only) --------- */
.usr-nav__link,
.usr-header__support,
.usr-header__icon,
.usr-chip,
.usr-cart-btn,
.usr-drawer__close,
.usr-footer a,
.usr-footer__support-link,
.usr-cart__clear,
.usr-cart__qty-btn,
.usr-cart__remove,
.usr-cart__upsell-add {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Pressed feedback on the solid buttons (1px settle, no transition). */
.usr-btn:active,
.usr-cart-btn:active,
.usr-cart__checkout:active,
.usr-cart__upsell-add:active { transform: translateY(1px); }
.usr-chip:active { background: var(--usr-tint-blue); }
.usr-chip.is-active:active { background: var(--usr-navy); }

/* ---- Drawer close — real button box + hover wash + bigger hit area ----- */
.usr-drawer__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin-right: -6px; /* keep the glyph optically where the 4px-padded text sat */
  border-radius: var(--usr-radius-pill);
}
.usr-drawer__close::after { content: ""; position: absolute; inset: -5px; }
.usr-drawer__close:hover { background: rgba(19, 38, 107, 0.08); }
#usr-cart-drawer .usr-drawer__close:hover { background: rgba(253, 248, 240, 0.14); }

/* ---- Tap targets ≥44px on touch (visuals unchanged — hit areas only) --- */
@media (pointer: coarse) {
  .usr-header__icon,
  .usr-cart__qty-btn,
  .usr-cart__remove,
  .usr-chip { position: relative; }
  .usr-header__icon::after,
  .usr-cart__qty-btn::after { content: ""; position: absolute; inset: -10px; }
  .usr-cart__remove::after { content: ""; position: absolute; inset: -8px 0; }
  .usr-chip::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
}

/* ---- Category chip row: desktop scroll affordance ----------------------
   The row fits at 1440 (no computed change there); when it overflows on
   smaller desktop viewports, show a thin brand scrollbar instead of nothing.
   Touch keeps the native hidden-scrollbar swipe behaviour. */
@media (pointer: fine) {
  .usr-chips__list {
    scrollbar-width: thin;
    scrollbar-color: rgba(19, 38, 107, 0.3) transparent;
  }
  .usr-chips__list::-webkit-scrollbar { display: block; height: 5px; }
  .usr-chips__list::-webkit-scrollbar-thumb { background: rgba(19, 38, 107, 0.25); border-radius: var(--usr-radius-pill); }
  .usr-chips__list::-webkit-scrollbar-track { background: transparent; }
}

/* ---- Blog fallback loop (index.php) ------------------------------------ */
.usr-blog-title {
  margin: 0 0 8px;
  color: var(--usr-navy);
  font-size: 40px;
  line-height: 46px;
  font-weight: 500;
  letter-spacing: var(--usr-ls-heading);
}
.usr-blog-sub {
  margin: 0 0 36px;
  color: var(--usr-secondary);
  font-size: var(--usr-fs-body-l);
  line-height: var(--usr-lh-body-l);
  max-width: 70ch;
}
.usr-main .entry-title {
  margin: 0 0 6px;
  font-size: var(--usr-fs-h3);
  line-height: var(--usr-lh-h3);
}
.usr-main .entry-title a { text-decoration: none; }
.usr-main .entry-title a:hover,
.usr-main .entry-title a:focus { color: var(--usr-link-blue); text-decoration: underline; }
.usr-main .entry-content { max-width: 70ch; color: var(--usr-secondary); }
.usr-blog-empty {
  padding: 64px 32px;
  background: var(--usr-white);
  border: 1px solid rgba(19, 38, 107, 0.1);
  border-radius: 18px;
  text-align: center;
  color: var(--usr-secondary);
}
.usr-blog-empty p { margin: 0 0 20px; }
.usr-main .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}
.usr-main .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(19, 38, 107, 0.2);
  border-radius: var(--usr-radius-pill);
  background: var(--usr-white);
  color: var(--usr-navy);
  font-size: var(--usr-fs-body);
  font-weight: 700;
  text-decoration: none;
}
.usr-main .pagination .page-numbers.current { background: var(--usr-navy); border-color: var(--usr-navy); color: var(--usr-white); }
.usr-main .pagination a.page-numbers:hover,
.usr-main .pagination a.page-numbers:focus { background: var(--usr-tint-blue); text-decoration: none; }

/* ---- Reduced motion covers the new press feedback ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .usr-btn:active,
  .usr-cart-btn:active,
  .usr-cart__checkout:active,
  .usr-cart__upsell-add:active { transform: none; }
  .usr-nav__link,
  .usr-header__support,
  .usr-header__icon,
  .usr-chip,
  .usr-cart-btn,
  .usr-drawer__close,
  .usr-footer a,
  .usr-cart__clear,
  .usr-cart__qty-btn,
  .usr-cart__remove,
  .usr-cart__upsell-add,
  .usr-cart__checkout { transition: none; }
}