/* ===== TRL theme: "Clinical sage" (v2, 2026-10-08) — refines "Deep sage".
   Mint = actions only. Emerald = lab proof (COA, lot, verified). ===== */
  :root {
    --sage-deep: #0F2E23;   /* header, hero, footer */
    --sage-darker: #0A211A; /* top compliance bar, footer base */
    --sage-light: #F3F6F4;  /* page background (cleaner than v1 #EEF2EF) */
    --white: #FFFFFF;       /* cards */
    --mint: #10B981;        /* main button */
    --emerald: #047857;     /* links, hover */
    --line: #DCE5DF;        /* card borders */
    --text: #0F2E23;
    --muted: #52615A;       /* green-grey, 6:1 on page */
    --proof-bg: #ECF7F1;    /* COA / verified chips */
    --proof-line: #A7D7C2;
    --field-line: #C9D6CE;
    --on-dark: #A9C4B8;     /* soft text on dark green */
    --photo-bg: #DCE7E1;    /* edge colour of the vial photos' light-sage studio backdrop (2026-10-08) */
    --accent: #FF9473;      /* coral accent on dark green (labels, details; never buttons) */
    --accent-ink: #C0492A;  /* coral for small text on light backgrounds (4.6:1) */
  }
  * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--sage-light); color: var(--text); font-family: 'Inter', system-ui, sans-serif; line-height: 1.6; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }

  h1, h2, h3, .head { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; }
  .wrap { max-width: var(--wrap-max, 1160px); margin: 0 auto; padding: 0 var(--wrap-pad, 24px); }

  /* Buttons: 8px corners */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 8px; font-weight: 600; font-size: 15px; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; font-family: inherit; }
  .btn-primary { background: var(--mint); color: #04231A; }
  .btn-primary:hover { background: #34D399; }
  .btn-ghost { border-color: #4C7D69; color: #fff; background: transparent; }
  .btn-ghost:hover { border-color: #fff; }
  .btn-dark { background: var(--sage-deep); color: #fff; }
  .btn-dark:hover { background: var(--emerald); }
  .btn-outline { border-color: var(--sage-deep); color: var(--sage-deep); background: transparent; }
  .btn-outline:hover { background: var(--sage-deep); color: #fff; }

  /* Top compliance bar */
  .topbar { background: var(--sage-darker); color: #CFE0D6; font-size: 11px; letter-spacing: .06em; }
  .topbar .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; gap: 12px; }
  .topbar .wrap > span:first-child { text-wrap: balance; }  /* the longer Spanish RUO line splits evenly on phones instead of leaving one word alone */
  .lang { background: none; border: 1px solid #3E6B59; color: #fff; border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 11px; }
  .lang { white-space: nowrap; flex: none; }
  @media (max-width: 480px) { .topbar { font-size: 12px; letter-spacing: .02em; } .topbar .lang { font-size: 12px; } }
  /* Puerto Rico tag in the top bar (text hidden on phones, flag stays) and in the footer */
  .tb-right { display: inline-flex; align-items: center; gap: 14px; flex: none; }
  .pr-tag { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); white-space: nowrap; }
  .pr-flag { width: 18px; height: 12px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
  @media (max-width: 640px) { .pr-txt { display: none; } .tb-right { gap: 10px; } }
  @media (max-width: 420px) { .topbar .pr-tag { display: none; } }  /* keep the RUO line on one row */
  .pr-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--accent); font-size: 13px; }
  @media (min-width: 901px) { .pr-line { white-space: nowrap; } }
  .lang:hover { border-color: var(--mint); }
  .lang b { color: var(--mint); font-weight: 500; }

  /* Header */
  .header { background: var(--sage-deep); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #1D4A3A; }
  .header .wrap { display: flex; justify-content: space-between; align-items: center; height: 76px; }
  /* Logo: leaf icon cropped from logo-wordmark.png + the name as real text (readable at any size).
     --h = logo height. The image is zoomed to 125% so the leaf icon (left part of the PNG) fills the full height. */
  .tlogo { --h: 46px; display: inline-flex; align-items: center; gap: 10px; color: #fff; line-height: 1; }
  .tlogo-icon { width: calc(var(--h) * .76); height: var(--h); flex: none;
                background: url(images/logo-wordmark.png) calc(var(--h) * -.09) calc(var(--h) * -.07) / auto 125% no-repeat; }
  .tlogo-text { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  .tlogo-text b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: calc(var(--h) * .43); letter-spacing: .08em; }
  .tlogo-text small { font-family: 'JetBrains Mono', monospace; font-size: calc(var(--h) * .26); letter-spacing: .18em; color: #6EE7B7; font-weight: 500; }
  .mm-head .tlogo { --h: 40px; }
  footer .tlogo { --h: 52px; margin-bottom: 14px; }
  .nav { display: flex; gap: 28px; align-items: center; font-size: 14px; color: var(--on-dark); }
  .nav a:hover { color: #fff; }
  .nav .cta { background: var(--mint); color: #04231A; padding: 9px 18px; border-radius: 8px; font-weight: 600; }
  .nav .cta:hover { background: #34D399; color: #04231A; }
  .burger { display: none; background: none; border: 1px solid #3E6B59; border-radius: 8px; padding: 9px 10px; cursor: pointer; }
  .burger span { display: block; width: 20px; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; }
  @media (max-width: 900px) { .nav { display: none; } .burger { display: block; } }
  .mobile-menu { position: fixed; inset: 0; z-index: 70; background: var(--sage-deep); display: none; flex-direction: column; padding: 24px; overflow-y: auto; }
  .mobile-menu.open { display: flex; }
  .mm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
  .mm-head img { height: 40px; width: auto; }
  .mm-close { background: none; border: 1px solid #3E6B59; border-radius: 8px; color: #fff; font-size: 16px; padding: 8px 13px; cursor: pointer; }
  .mm-links { display: flex; flex-direction: column; }
  .mm-links a { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 24px; color: #fff; padding: 14px 4px; border-bottom: 1px solid #1D4A3A; }
  .mm-links a.mm-cta { background: var(--mint); color: #04231A; text-align: center; border-radius: 8px; margin-top: 20px; border: none; font-size: 17px; }

  /* Footer */
  footer { background: var(--sage-darker); color: var(--on-dark); padding: 56px 0 28px; font-size: 14px; }
  .f-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, max-content); gap: clamp(32px, 4vw, 56px); margin-bottom: 36px; }  /* brand column takes the slack, so the 4 link columns sit the same distance apart */
  /* line the footer columns and bottom line up with the text inside the RUO box (18px padding + 1px border) */
  .f-grid, .f-bottom { padding: 0 32px; }
  footer .ruo-box { padding: 18px 31px; }  /* text starts 32px in, same as the columns above */
  @media (max-width: 640px) { .f-grid, .f-bottom { padding: 0 17px; } footer .ruo-box { padding: 16px; } }
  /* Phones/tablets: logo + blurb on its own full-width row, then the 4 link
     columns as a tidy 2x2 grid so headings line up (Shop|Quality, Support|Legal). */
  @media (max-width: 1100px) {
    .f-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
    .f-grid > div:first-child { grid-column: 1 / -1; }
  }
  footer img.logo { height: 56px; width: auto; margin-bottom: 14px; }
  footer h4 { color: var(--accent); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
  /* research-use line under the logo: small and muted so it reads as fine print */
  footer .f-ruo { margin: 14px 0 0; max-width: 300px; font-size: 12px; line-height: 1.5; opacity: .7; }
  footer ul { list-style: none; margin: 0; padding: 0; }
  footer li { margin-bottom: 8px; }
  footer a:hover { color: #fff; }
  .ruo-box { border: 1px solid #27614D; background: rgba(16,185,129,.06); border-radius: 12px; padding: 18px; font-size: 12px; line-height: 1.7; color: #CFE0D6; margin-bottom: 22px; }
  .ruo-box strong { color: #fff; }
  .ruo-row { display: flex; gap: 14px; align-items: flex-start; }
  .ruo-row + .ruo-row { margin-top: 12px; }
  .ruo-row .ruo-row-ic { flex: none; margin-top: 2px; color: var(--accent); }
  .f-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 11px; color: #7FA392; }

  /* Age gate and cookies */
  .age-gate { position: fixed; inset: 0; z-index: 9999; background: rgba(10,33,26,.97); display: flex; align-items: center; justify-content: center; padding: 24px; transition: opacity .4s; }
  .age-card { max-width: 520px; width: 100%; background: #fff; border-radius: 20px; padding: 40px 32px; text-align: center; }
  .age-card img { height: 84px; width: auto; margin: 0 auto 18px; }
  .age-card .eyebrow { color: var(--emerald); }
  .age-card h2 { font-size: 26px; margin-bottom: 12px; }
  .age-card p { font-size: 14px; color: var(--muted); margin: 0 0 24px; }
  .age-card .btns { display: flex; flex-direction: column; gap: 10px; }
  .age-card .fine { font-size: 10px; letter-spacing: .08em; color: #7B8A83; margin-top: 20px; margin-bottom: 0; text-transform: uppercase; }
  .cookie-banner { position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 480px; margin: 0 auto; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 30px rgba(15,46,35,.18); z-index: 9000; font-size: 13px; display: none; }
  .cookie-banner.show { display: block; }
  .cookie-banner p { margin: 0 0 12px; color: var(--muted); }
  .cookie-banner .btns { display: flex; gap: 8px; }
  .cookie-banner .btn { padding: 8px 14px; font-size: 13px; }

  :focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }


/* ===================================================================
   Compatibility layer for inner pages (converted from the old dark theme)
   =================================================================== */
.display { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important; font-weight: 700; letter-spacing: -0.02em !important; line-height: 1.12; }
h1.display { font-size: clamp(32px, 4.6vw, 52px) !important; }
h2.display { font-size: clamp(26px, 3.2vw, 38px) !important; }
.mono, .legal-hero-num, .toc-title, .section-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* Retire decorative effects from the old theme */
.cursor-dot, .cursor-ring, .orb, .legal-orb, .peptide-svg, .grid-bg::before { display: none !important; }
body::before { display: none !important; }
html, body { cursor: auto !important; overflow-x: clip !important; overflow-y: visible !important; }
.reveal-up, .reveal-text-inner, .reveal-text-line { opacity: 1 !important; transform: none !important; }
.reveal-text-line { overflow: visible !important; }

/* Tighter vertical rhythm than the old 128px sections */
main section[class*="py-32"], section.relative[class*="py-32"] { padding-top: 64px !important; padding-bottom: 64px !important; }
section[class*="py-24"] { padding-top: 56px !important; padding-bottom: 56px !important; }
section[class*="min-h-"] { min-height: 0 !important; }
section.page-hero { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (max-width: 640px) { section.page-hero { padding-top: 36px !important; padding-bottom: 40px !important; } }

/* Dark green hero band on every inner page */
section.page-hero { background: var(--sage-deep); color: #fff; position: relative; z-index: 1; }

/* Shared button names used by older pages */
.btn-magnetic { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 8px; font-weight: 600; font-size: 14px; letter-spacing: 0 !important; text-transform: none !important; font-family: 'Inter', sans-serif !important; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn-primary { background: var(--mint) !important; color: #04231A !important; border: 1.5px solid var(--mint) !important; font-weight: 600; }
.btn-primary:hover { background: #34D399 !important; border-color: #34D399 !important; color: #04231A !important; }
.btn-ghost { background: transparent; color: var(--sage-deep); border: 1.5px solid var(--sage-deep); }
.btn-ghost:hover { background: var(--sage-deep); color: #fff; }
.page-hero .btn-ghost { color: #fff; border-color: #4C7D69; }
.page-hero .btn-ghost:hover { border-color: #fff; background: transparent; }

/* Form fields: clear, high-contrast, 16px (no iOS zoom) */
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], select, textarea {
  font-size: 16px; border-radius: 8px !important; background: #fff; color: var(--text);
}
input::placeholder, textarea::placeholder { color: #7B8A83; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(16,185,129,.35); outline-offset: 0; border-color: var(--emerald) !important; }

/* Images that sat on dark backgrounds */
img { max-width: 100%; }

/* Footer compat: old pages had nav spacing above sections; keep footer last */
footer { margin-top: 0; }

/* Skip link + current page in nav */
.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--sage-deep); padding: 10px 16px; z-index: 10000; border-radius: 0 0 8px 0; font-weight: 600; }
.skip-link:focus { left: 0; }
.nav a[aria-current="page"], .mm-links a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--mint); }

/* Old page scripts still try to restyle #mainNav on scroll; keep the new header fixed in place */
#mainNav { background: var(--sage-deep) !important; padding: 0 !important; backdrop-filter: none !important; border-bottom: 1px solid #1D4A3A !important; position: sticky !important; top: 0 !important; }

/* Big hero titles from the old theme */
.hero-title { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: clamp(34px, 5.2vw, 60px) !important; line-height: 1.1 !important; font-weight: 700; letter-spacing: -0.02em !important; text-transform: none !important; }
.hero-title [style*="italic"] { font-style: normal !important; color: #6EE7B7 !important; }
.vertical-text { display: none !important; }
.filter-bar { top: 76px !important; }
.page-hero [style*="coral"] { color: #6EE7B7 !important; font-style: normal !important; }
.page-hero .section-eyebrow, .page-hero .section-eyebrow::before { color: #6EE7B7; }
.page-hero .section-eyebrow::before { background: #6EE7B7; }
main [style*="italic"] { font-style: normal !important; color: var(--emerald) !important; }

/* Phone-width safety: grid children may shrink, so forms never push the page wider */
.grid > * { min-width: 0; }
@media (max-width: 767px) { form.grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .form-section { padding: 22px 18px !important; } }

/* Product photos: nudge the teal backdrop toward the site's deep green so photos and page feel like one set */
/* Vial photos: the calm sage tint + sage background (#4E7363) are baked into the JPGs (2026-10-08), so no CSS filter */
img[src*="/vials/"] { background: var(--photo-bg); border-radius: inherit; }
/* 2026-11-08g: the radial mask that used to fade every vial JPG into the card was removed. It cut off the edges of wide photos
   (RS-h2o's 4-vial group) and made small vials look faded. The JPG edge colour (#DCE7E1) equals --photo-bg, so the photo and the card
   are already one colour at the edges; the soft light glow in the middle is part of the studio photo and has no hard edge. */


/* ===================================================================
   v2 shared components (header cart, order bar, proof chip, toast)
   =================================================================== */
.hdr-actions { display: flex; align-items: center; gap: 10px; }
.hdr-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid #3E6B59; color: #fff; background: transparent; }
.hdr-cart:hover { border-color: var(--mint); }
.hdr-cart .n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--mint); color: #04231A; font: 600 11px/20px 'Inter', sans-serif; text-align: center; }
.hdr-cart .n[hidden] { display: none; }
.burger { width: 44px; height: 44px; padding: 0; display: none; align-items: center; justify-content: center; flex-direction: column; }
@media (max-width: 900px) { .burger { display: inline-flex; } .header .wrap { height: 64px; } .header .tlogo { --h: 40px; }
  /* Phones/tablets: menu button left, logo centred, cart right */
  .header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .header .wrap > a:first-child { grid-column: 2; grid-row: 1; }
  .header .hdr-actions { display: contents; }
  .header .burger { grid-column: 1; grid-row: 1; justify-self: start; }
  .header .hdr-cart { grid-column: 3; grid-row: 1; justify-self: end; }
}
/* (side padding under 640px now comes from --wrap-pad in the LAYOUT STANDARD block at the end of this file) */

/* Proof chip: links straight to a lot's COA PDF */
.coa-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--proof-line); background: var(--proof-bg); color: var(--emerald); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.coa-chip:hover { background: #fff; }
.coa-chip.pending { border-color: var(--line); background: var(--sage-light); color: var(--muted); }
.coa-chip svg { flex: none; }

/* Order bar: pinned to the bottom whenever the order has items */
.order-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 520px; margin: 0 auto; display: none; align-items: center; justify-content: space-between; gap: 14px; background: var(--sage-deep); color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 8px 8px 8px 12px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); }
.order-bar.show { display: flex; }
/* left: bag icon + (total, then "2 items · View order" underneath); right: Pay button */
.order-bar .ob-sum { background: none; border: 0; color: inherit; text-align: left; padding: 0; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 12px; min-height: 48px; flex: 1; min-width: 0; }
.order-bar .ob-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(16,185,129,.16); color: var(--mint); display: grid; place-items: center; }
.order-bar .ob-txt { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.order-bar .ob-t { font-weight: 700; font-size: 18px; line-height: 1.2; }
.order-bar .ob-n { font-size: 12.5px; line-height: 1.3; color: var(--on-dark); white-space: nowrap; }
.order-bar .ob-pay { background: var(--mint); color: #04231A; font-weight: 700; font-size: 15px; padding: 0 24px; height: 48px; display: inline-flex; align-items: center; border-radius: 12px; white-space: nowrap; }
.order-bar .ob-pay:hover { background: #34D399; }
body.has-order-bar { padding-bottom: 84px; }
body.has-order-bar .cookie-banner { bottom: 96px; }

/* Toast used by quick-add outside the catalog */
.trl-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 80; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; font-size: 14px; box-shadow: 0 8px 24px rgba(15,46,35,.16); opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100% - 32px); }
.trl-toast.show { opacity: 1; }

/* "Repeat last order" only shows when this phone has one saved */
.reorder-only { display: none !important; }
html.has-reorder .reorder-only { display: inline-flex !important; }

/* Generic surface + chips used on several pages */
.surface { background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald); }
.page-hero .eyebrow, .hero .eyebrow { color: #6EE7B7; }
.ruo-line { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }

/* Inner-page heroes: shorter on phones so content starts above the fold */
section.page-hero h1, section.page-hero .hero-title { font-size: var(--fs-h1) !important; line-height: var(--lh-h1) !important; }
@media (max-width: 640px) { section.page-hero { padding-top: 28px !important; padding-bottom: 32px !important; } }

/* Slim header (checkout / thank-you): keep the "keep shopping" link visible on phones */
@media (max-width: 900px) { .header .wrap > .nav:last-child { display: flex; font-size: 14px; } .header .wrap > .nav:last-child a { padding: 12px 0; } }

/* v2 refinements for the older inner pages (about, contact, affiliates, legal) */
.faq-item { background: #fff; border: 1px solid var(--line) !important; border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.faq-question { min-height: 56px; padding: 14px 16px !important; text-align: left; }
.faq-q-text { font-family: 'Inter', sans-serif !important; font-weight: 600; font-size: 16px !important; letter-spacing: 0 !important; text-transform: none !important; }
.faq-answer-inner { padding: 0 16px 16px !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--muted) !important; }
.btn-magnetic { border-radius: 10px !important; min-height: 48px; }
.form-label, label.mono { letter-spacing: 0 !important; text-transform: none !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500; color: var(--text) !important; }
.form-input, .form-textarea, .form-select { border-radius: 8px !important; border-color: var(--field-line) !important; background-color: #fff !important; font-size: 16px !important; }
.standard-card, .value-card, .info-card, .contact-card, .stat-card, .legal-card, .toc { border-radius: 14px !important; }
main .mono.uppercase[class*="tracking-[0.3em]"], main .mono.uppercase[class*="tracking-[0.4em]"] { letter-spacing: .08em !important; }
@media (max-width: 640px) {
  main section[class*="px-6"] { padding-left: 16px !important; padding-right: 16px !important; }
  main h2.display { font-size: clamp(24px, 7vw, 32px) !important; line-height: 1.15 !important; }
}


/* ===================================================================
   TYPE SCALE + SPACING (v2.1, 2026-10-08)
   One scale for every page. Sizes grow smoothly from phone (375px) to
   desktop (1280px+). Use these variables instead of fixed sizes.
   =================================================================== */
:root {
  --fs-display: clamp(30px, 2.6vw + 20px, 54px);  /* home hero only */
  --fs-h1: clamp(30px, 1.8vw + 22px, 44px);       /* page title */
  --fs-h2: clamp(24px, 1.2vw + 18px, 34px);       /* section title */
  --fs-h3: clamp(18px, 0.45vw + 15.5px, 21px);    /* card / sub-section title */
  --fs-lead: clamp(16px, 0.25vw + 15px, 18px);    /* intro text under a title */
  --fs-body: 16px;
  --fs-card: 15px;                                /* text inside cards */
  --fs-value: clamp(18px, 0.4vw + 15.5px, 20px);  /* the key detail in a card: phone, email, hours */
  --fs-small: 13.5px;                             /* notes, captions */
  --fs-eyebrow: 12px;                             /* small mono label above a title */
  --lh-display: 1.12; --lh-h1: 1.15; --lh-h2: 1.2; --lh-h3: 1.3; --lh-text: 1.6;
  --sp-section: clamp(48px, 4vw + 32px, 80px);    /* space between page sections */
  --sp-title: 12px;                               /* title -> its intro text */
  --sp-content: 32px;                             /* section header -> its content */
}
body { font-size: var(--fs-body); line-height: var(--lh-text); }
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
p { text-wrap: pretty; }

/* ---- Headings (also tames the old Tailwind sizes on inner pages) ---- */
main h1, main .hero-title, main h1.display { font-size: var(--fs-h1) !important; line-height: var(--lh-h1) !important; letter-spacing: -0.02em !important; margin-bottom: 0 !important; }
main .hero h1 { font-size: var(--fs-display) !important; line-height: var(--lh-display) !important; }
main h2, main h2.display { font-size: var(--fs-h2) !important; line-height: var(--lh-h2) !important; letter-spacing: -0.015em !important; }
main h3, main h3.display { font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; letter-spacing: -0.01em !important; }
/* Old pages split titles over two lines with <br> and a second colored italic part.
   Let titles wrap naturally and keep one color, like the new pages. */
main h1 br, main h2 br, main h3 br { display: none; }
main h1 > span + span::before, main h2 > span + span::before { content: " "; }
main h1 [style*="italic"], main h2 [style*="italic"], main h1 span[style], main h2 span[style] { font-style: normal !important; color: inherit !important; }
main .page-hero h1, main .page-hero h1 * { color: #fff !important; }
.reveal-text-line { display: inline !important; }
.reveal-text-line + .reveal-text-line::before { content: " "; }

/* Old pages: section titles carried mb-8 / mb-12 / mb-16. Normalize the rhythm. */
main h2.display { margin-bottom: var(--sp-title) !important; }
main h2.display + :not(p) { margin-top: var(--sp-content) !important; }
main h3.display { margin-bottom: 8px !important; }

/* ---- Text ---- */
main .page-hero p, main p.lead, main .text-base.md\:text-lg, main p.text-lg { font-size: var(--fs-lead) !important; line-height: 1.55 !important; max-width: 62ch; }
main p.text-sm, main .text-sm.leading-relaxed { font-size: var(--fs-card) !important; line-height: var(--lh-text) !important; }
main p.text-xs { font-size: var(--fs-small) !important; line-height: 1.5 !important; }
main p.text-base { font-size: var(--fs-body) !important; line-height: var(--lh-text) !important; }
/* Oversized pull quotes (text-3xl/4xl paragraphs) become a calm lead-sized statement */
main p.display, main p[class*="text-3xl"], main p[class*="text-4xl"] { font-size: calc(var(--fs-h3) + 2px) !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; }

/* Small labels above titles ("/01 — Misión", status pills) */
.section-eyebrow, .status-badge, main .mono[class*="tracking-[0.3em]"], main .mono[class*="tracking-[0.4em]"], .legal-hero-num, .num-badge { font-size: var(--fs-eyebrow) !important; letter-spacing: .08em !important; }
.section-eyebrow { margin-bottom: var(--sp-title) !important; gap: 10px !important; }
.section-eyebrow::before { width: 20px !important; }

/* ---- Section spacing ---- */
main section[class*="py-32"], main section[class*="py-24"], main section[class*="py-20"], main section.relative[class*="py-"] { padding-top: var(--sp-section) !important; padding-bottom: var(--sp-section) !important; }
section.page-hero { padding-top: clamp(32px, 3vw + 20px, 56px) !important; padding-bottom: clamp(32px, 3vw + 20px, 56px) !important; }
section.page-hero h1 { margin-top: 4px !important; }
section.page-hero h1 + p, section.page-hero h1 + div { margin-top: var(--sp-title) !important; }
main [class*="mb-16"], main [class*="mb-20"] { margin-bottom: var(--sp-content) !important; }
main [class*="mt-16"], main [class*="mt-20"] { margin-top: var(--sp-content) !important; }

/* ---- Legal pages: document headings sit below page titles in the scale ---- */
.legal-body h2 { font-size: clamp(20px, 0.6vw + 17px, 24px) !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; margin-top: 40px !important; margin-bottom: 12px !important; }
.legal-body h3 { font-size: var(--fs-eyebrow) !important; letter-spacing: .08em !important; margin-top: 20px !important; }
.legal-body p, .legal-body li { font-size: var(--fs-body) !important; line-height: 1.7 !important; color: #2B3D35 !important; }
.legal-body { max-width: 72ch !important; }

/* ---- Footer + compliance box: readable small print ---- */
.ruo-box { font-size: 13px; line-height: 1.6; }
footer h4 { font-size: 12px; }
footer li a { display: inline-block; padding: 3px 0; }

/* Titles that sit inside a card use the card-title size, not the section size */
main .ask h2, main .reorder-card h2, main .wa h2, main .card h3, main .pc h3 { font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; }
main .wa h2 { font-size: calc(var(--fs-h3) + 3px) !important; }
main .acct-wrap .h-title { font-size: var(--fs-h2) !important; }

/* Tiny 10px mono notes under forms (old pages) -> readable small print */
main p[class*="text-[10px]"], main p[class*="text-[9px]"] { font-family: 'Inter', sans-serif !important; font-size: var(--fs-small) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted) !important; line-height: 1.5 !important; }
/* Inner-page titles: one color, like the home page (beats the old two-tone rules) */
main section.page-hero h1 span[style], main section.page-hero h1 .reveal-text-inner, main section h2.display span[style] { color: inherit !important; font-style: normal !important; }

/* Call-to-action buttons: Title Case in English only. Spanish uses sentence case ("Confirmar y pagar"), so no transform there. */
:where(:lang(en)) :is(.btn, .cta, .mm-cta, .ob-pay, .pc-add, .m-add, .bundle-cta, .btn-pay, .btn-magnetic, .btn-primary, .btn-secondary, .btn-submit, .btn-view, .btn-download, .primary, .lang-cta) { text-transform: capitalize; }

/* Key detail inside a card (phone number, email, hours): one size everywhere so none looks bigger than the others */
.card-value { font-size: var(--fs-value) !important; line-height: 1.3 !important; font-weight: 700; letter-spacing: -0.01em !important; }

/* Primary buttons: no coral/orange wipe on hover (about, afiliados, coas, contacto had one). Hover is the lighter mint set above. */
.btn-primary::before { display: none !important; }

/* ===== Category bubbles: ONE shared look (home, catalogo, coas). Tala 2026-11-04.
   Markup:  <div class="filter-scroll"> <button|a class="filter-pill [active]"><span translate="no">Name</span><span class="count">12</span></button> ... </div>
   assets/pill-scroll.js adds the arrow buttons and the "more to scroll" fade. Change the look HERE only. ===== */
.filter-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding: 1px 0; }
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 39px; padding: 0 18px;
  background: transparent; border: 1px solid rgba(15,46,35,.15); border-radius: 999px;
  color: var(--muted); font: 400 14px/1 'Inter', sans-serif; letter-spacing: 0; text-transform: none;
  white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.filter-pill:hover { border-color: rgba(4,120,87,.5); color: var(--emerald); }
.filter-pill.active { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; font-weight: 700; }
.filter-pill:focus-visible { outline: 3px solid rgba(16,185,129,.45); outline-offset: 2px; }
/* light count badge (12px, not coas' old 9px: DESIGN.md says nothing customer-facing below 12px) */
.filter-pill .count { margin: 0; padding: 3px 7px; background: rgba(15,46,35,.1); border-radius: 999px; font: 500 12px/1 'Inter', sans-serif; color: inherit; }
.filter-pill.active .count { background: rgba(238,242,239,.15); color: #fff; }
.filter-pill .ex { font: 500 11px 'JetBrains Mono', monospace; opacity: 1; }
@media (max-width: 640px) { .filter-pill .ex { display: none; } }

/* --- Bubble row layout (rebuilt 2026-11-06c) ---
   <div class="ps-wrap">  = flex row: [ .ps-view (the row + its two edge fades) ] [ .ps-nav (arrows) ]
   - The row is free native scrolling: no snap, no smooth-scroll CSS, no mask on the scroller (a mask on a scroller left a blank gap in iPhone Safari).
   - Edge fades are two separate overlays (not on the scroller), pointer-events:none so they never block a swipe or tap.
     Fade colour = --ps-bg (defaults to the page colour; override on a wrapper if a row sits on another colour).
   - Arrows: desktop/tablet only, in their OWN column to the right of the row. The column exists only when the bubbles do not all fit.
     An arrow with nowhere to go stays in place but dimmed (never hides, so nothing jumps). Phones: no arrows, swipe. */
.ps-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.ps-view { position: relative; flex: 1 1 0; min-width: 0; }
.ps-view > .filter-scroll { max-width: 100%; }
.ps-fade { position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1; }
.ps-fade-l { left: 0;  background: linear-gradient(to right, var(--ps-bg, var(--sage-light)), transparent); }
.ps-fade-r { right: 0; background: linear-gradient(to left,  var(--ps-bg, var(--sage-light)), transparent); }
.ps-view.ps-more-l > .ps-fade-l, .ps-view.ps-more-r > .ps-fade-r { opacity: 1; }
.ps-nav { flex: none; display: flex; gap: 6px; }
.ps-nav.ps-off { display: none; }
.ps-btn { flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--sage-deep); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s, opacity .2s; }
.ps-btn:hover:not(:disabled) { color: var(--emerald); border-color: rgba(4,120,87,.5); }
.ps-btn:focus-visible { outline: 3px solid rgba(16,185,129,.45); outline-offset: 2px; }
.ps-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 767px) { .ps-nav { display: none !important; } }
@media (hover:hover) and (pointer:fine) {
  .filter-scroll.ps-on { cursor: grab; }
  .filter-scroll.ps-on.ps-drag { cursor: grabbing; user-select: none; }
  .filter-scroll.ps-on.ps-drag * { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .filter-pill { transition: none; } }

/* =====================================================================
   LAYOUT STANDARD (2026-11-04): one width, one hero, one stat style.
   Header, hero and body on every public page share these numbers.
   Change them HERE only; do not set widths or hero padding in a page.
   ===================================================================== */
:root { --wrap-max: 1160px; --wrap-pad: 24px; --hero-pad: clamp(32px, 3vw + 20px, 56px); }
@media (max-width: 640px) { :root { --wrap-pad: 16px; } }

/* Tailwind-built pages (coas, about, contacto, checkout): their sections use px-6/md:px-12 and an
   inner max-w-7xl. Make the section padding equal "half the free space + the wrap padding", so the
   content starts at exactly the same left edge as the header logo (same as .wrap). */
main section[class*="px-6"] {
  padding-left: max(var(--wrap-pad), calc((100% - var(--wrap-max)) / 2 + var(--wrap-pad))) !important;
  padding-right: max(var(--wrap-pad), calc((100% - var(--wrap-max)) / 2 + var(--wrap-pad))) !important;
}
main .max-w-7xl { max-width: none !important; }

/* One hero height rule (top and bottom) for every inner page. Home keeps its own bigger hero. */
section.page-hero { padding-top: var(--hero-pad) !important; padding-bottom: var(--hero-pad) !important; }

/* Hero eyebrow: small mono tag above the H1 (same on every page) */
main .page-hero .hero-eyebrow-row { margin: 0 0 var(--sp-title) !important; }
main .page-hero .status-badge, main .page-hero .section-eyebrow, main .page-hero .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-weight: 500; font-size: var(--fs-eyebrow) !important; line-height: 1.3; letter-spacing: .08em !important;
  text-transform: uppercase; color: #6EE7B7 !important; margin: 0 !important;
}
/* every eyebrow gets the same small mint dot (coas/about/contacto have a real .status-dot; catalogo/checkout get it here) */
main .page-hero .section-eyebrow::before, main .page-hero .hero-eyebrow::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #6EE7B7; flex: none; }
main .page-hero .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6EE7B7; box-shadow: none; animation: none; flex: none; }

/* Hero intro paragraph: one size, colour and line length */
main .page-hero .hero-intro { margin: var(--sp-title) 0 0 !important; display: block; }
main .page-hero .hero-intro p, main .page-hero p.hero-lede {
  color: #D5F5E8 !important; font-size: var(--fs-lead) !important; line-height: 1.55 !important; max-width: 62ch; margin: 0;
}
main .page-hero p.hero-lede { margin-top: var(--sp-title) !important; }

/* Stat row: numbered blocks (/01 label, value, caption) used in the hero where a page has stats */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin-top: var(--sp-content); }
@media (max-width: 767px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } }
.stat { border-left: 1px solid rgba(110, 231, 183, .3); padding-left: 16px; }
.stat .stat-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-eyebrow); letter-spacing: .08em; color: #6EE7B7; opacity: .7; margin-bottom: 8px; }
.stat .stat-val { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(26px, 2vw + 14px, 36px); line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.stat .stat-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); margin-top: 6px; line-height: 1.4; }

/* Catálogo: the three proof chips use the same left-rule style as .stat, but stay a compact row */
.page-hero .proof { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: var(--sp-content); }
.page-hero .proof .pi { border-left: 1px solid rgba(110, 231, 183, .3); padding-left: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #D5F5E8; }
@media (max-width: 640px) { .page-hero .proof { gap: 10px 20px; } }


/* MOBILE HEADER POLISH (2026-11-05, Tala): phones only. Icon and logo text sit closer (8px gap). Menu and cart buttons stay 44px (touch target). */
@media (max-width: 640px) {
  .header .tlogo { gap: 8px; }
}


/* ===================================================================
   PHONE BOTTOM NAV (2026-11-07): Shop, Cart, My Account. Phones only (under 860px);
   desktop is untouched. Built by assets/shell.js, not added on checkout, thank-you,
   pay page or admin panel (same rule as the order bar).
   Stacking from the bottom of the screen (phones):
     nav (64px + iPhone safe area)  >  order bar "Pagar" (8px above the nav)  >  cookie banner / toast.
   =================================================================== */
.bnav { display: none; }
@media (max-width: 859px) {
  :root { --bnav-h: 64px; }
  .bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr);
    min-height: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--sage-deep); border-top: 1px solid rgba(255,255,255,.08); }
  .bnav .bn-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 48px; height: var(--bnav-h); padding: 8px 4px; color: var(--on-dark); text-decoration: none; }
  .bnav .bn-ic { position: relative; display: inline-flex; }
  .bnav .bn-t { font: 600 12px/1.2 'Inter', sans-serif; white-space: nowrap; }
  .bnav .bn-item[aria-current="page"] { color: var(--mint); }
  /* current page: thin mint line on top of its tab */
  .bnav .bn-item[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; border-radius: 0 0 2px 2px; background: var(--mint); }
  .bnav .bn-item:focus-visible { outline: 2px solid var(--mint); outline-offset: -4px; border-radius: 8px; }
  /* cart count: same look as the header cart badge */
  .bnav .n { position: absolute; top: -6px; left: 14px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--mint); color: #04231A; font: 600 11px/20px 'Inter', sans-serif; text-align: center; }
  .bnav .n[hidden] { display: none; }

  /* ---- ONE cart/pay bar (audit batch 3, 2026-11-08) ----
     Before: a floating 66px card with an 8px gap above the nav (product photos showed through the gap), and the cart
     count was shown a second time on the nav "Carrito" tab. Now: a flush full-width strip sitting directly on the nav
     (one block, one hairline between them), the total + "Pagar" live only here. Phones only; desktop keeps the floating card. */
  :root { --ob-h: 61px; --bnav-tot: 65px; }   /* Pay bar = 6px + 48px button + 6px + 1px top line; nav = 64px + its 1px top border */
  body.has-bnav .order-bar { left: 0; right: 0; max-width: none; margin: 0; border-radius: 0; border: 0; border-top: 1px solid rgba(255,255,255,.14);
    bottom: calc(var(--bnav-tot) + env(safe-area-inset-bottom, 0px)); padding: 6px 16px; gap: 12px; box-shadow: none; }
  /* the Pay bar already shows the count: no second badge on the nav Cart tab while it is showing */
  body.has-order-bar .bnav .n { display: none; }
  /* room so the footer and last content are not hidden behind the nav (+ the Pay bar when it shows) */
  body.has-bnav { padding-bottom: calc(var(--bnav-tot) + env(safe-area-inset-bottom, 0px)); }
  body.has-bnav.has-order-bar { padding-bottom: calc(var(--bnav-tot) + var(--ob-h) + env(safe-area-inset-bottom, 0px)); }
  /* cookie banner and toasts clear the nav (and the Pay bar when it is showing) by 12px */
  body.has-bnav .cookie-banner { bottom: calc(var(--bnav-tot) + env(safe-area-inset-bottom, 0px) + 12px); }
  body.has-bnav.has-order-bar .cookie-banner { bottom: calc(var(--bnav-tot) + var(--ob-h) + env(safe-area-inset-bottom, 0px) + 12px); }
  body.has-bnav .trl-toast, body.has-bnav .toast { bottom: calc(var(--bnav-tot) + env(safe-area-inset-bottom, 0px) + 12px); }
  body.has-bnav.has-order-bar .trl-toast, body.has-bnav.has-order-bar .toast { bottom: calc(var(--bnav-tot) + var(--ob-h) + env(safe-area-inset-bottom, 0px) + 12px); }

  /* ---- Catalog filters on phones (audit batch 3) ----
     Pills: 8px gap (was 10), 16px side padding (was 18), 8px gap between icon/label and count (was 6). Height stays 44px.
     Sticky: only the category pills stay pinned under the header; the search box scrolls away (-4px top hides it behind the header,
     so the pills sit 8px under the header). Pinned strip 133px -> 67px. Nothing is removed: scroll up to see the search again. */
  .filter-scroll { gap: 8px; }
  body .filter-pill { padding: 0 16px; gap: 8px; }
  body .tools { top: 4px; }
  body .tools .wrap { gap: 12px; padding-top: 12px; padding-bottom: 12px; }
}

/* ===== Phone footer (2026-11-07, Tala approved): one left edge, 44px link rows, stronger RUO box ===== */
@media (max-width: 640px) {
  footer { padding: 48px 0 32px; font-size: 15px; }              /* top 56 -> 48 (= --sp-section minimum), bottom 28 -> 32; the bottom nav space is added on top by body padding */
  /* ONE left edge: the 16px page gutter. Logo, link columns, RUO box and bottom line all start at 16px (before: columns and bottom line sat at 33px, the box at 16px). */
  .f-grid, .f-bottom { padding: 0; }
  footer .tlogo { margin-bottom: 16px; }
  /* Link columns share row lines (subgrid): in each pair the lists start at the same height, however many lines a heading takes, with no reserved empty space.
     Row gap is 0 here; the 32px between the brand block and each pair is padding. (Browsers without subgrid, pre-2023, just fall back to the old uneven start.) */
  .f-grid { gap: 0 16px; margin-bottom: 32px; }
  .f-grid > div:first-child { padding-bottom: 32px; }
  .f-grid > div:nth-child(n+2) { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .f-grid > div:nth-child(n+4) { padding-top: 32px; }
  footer .pr-line { margin-top: 16px; font-size: 14px; }
  footer h4 { margin: 0 0 8px; line-height: 1.4; }
  /* Links: 44px tall tap rows (before 28px), 15px text, no extra gap between rows. */
  footer li { margin: 0; }
  footer li a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; line-height: 1.35; font-size: 15px; }
  /* RUO box: stronger border and tint so it reads as the key notice; 14px text (was 13). NEW derived border colour = --emerald 55% in --sage-darker. */
  footer .ruo-box { padding: 16px; margin-bottom: 24px; font-size: 14px; line-height: 1.6; color: #DCE8E1; background: rgba(16,185,129,.10); border-color: color-mix(in srgb, var(--emerald) 55%, var(--sage-darker)); }
  .ruo-row + .ruo-row { margin-top: 16px; }
  /* Bottom line: stacked, 13px (was 11px), lighter colour (--on-dark, ~8:1), phone number is a 44px tap row. */
  .f-bottom { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--on-dark); }
  .f-bottom a[href^="tel"] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ===== Tap targets on phones (audit batch 2, 2026-11-08) =====
   Every link, button, pill and control that was under 44px tall is raised to 44px. Padding / min-height only,
   no font-size changes. Small text-only targets use padding + an equal negative margin, so the page layout does not move.
   Inline links inside a sentence are left alone on purpose (WCAG 2.5.8 exempts them). */
@media (max-width: 767px) {
  /* Language toggle: 44px tall; the top bar keeps its height by dropping its own vertical padding */
  .topbar .wrap { padding-top: 0; padding-bottom: 0; }
  .topbar .lang { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; }
  /* Filter / category pills (home, catalog, COAs) */
  body .filter-pill { height: auto; min-height: 44px; }
  /* COA chips */
  body .coa-chip { min-height: 44px; }
  /* Footer logo link: make the link as tall as the logo it wraps */
  .logo-link { display: inline-block; }
  /* Contents lists on the policy pages (envios, faq) */
  .toc a { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
}

/* ===================================================================
   PHONE POLISH (2026-11-08d, Tala): top bar, header, cookie sheet, pills, category row. Phones/tablets only (under 860px); desktop untouched.
   Placed last on purpose so it wins over the earlier phone rules above.
   =================================================================== */
@media (max-width: 859px) {
  /* ---- 1. Top bar: ONE slim line, 34px. RUO text 12px on one row (mono: 44 characters need ~306px, so it fits fully from 390px up;
     on narrower phones the very end is cut with an ellipsis as a last resort). Language toggle = compact text "ES | EN" (no box), 44px tap area. ---- */
  .topbar { font-size: 12px; letter-spacing: -.04em; position: relative; z-index: 51; }   /* z-index: the toggle's 44px tap area may overlap the header's top edge */
  .topbar .wrap { height: 34px; padding-top: 0; padding-bottom: 0; gap: 6px; }
  .topbar .wrap > span:first-child { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; }
  .topbar .pr-tag { display: none; }                       /* flag + "Puerto Rico" give way so the RUO line keeps the row */
  .topbar .lang { position: relative; min-height: 32px; height: 32px; min-width: 36px; padding: 0; border: 0; border-radius: 8px; justify-content: flex-end; font-size: 12px; letter-spacing: 0; line-height: 1; }   /* text-only toggle, no box: frees 8px for the RUO line */
  .topbar .lang .lb { display: none; }                      /* brackets off on phones: "ES | EN" */
  .topbar .lang .sep { font-size: 0; }
  .topbar .lang .sep::before { content: '|'; font-size: 12px; margin: 0 2px; opacity: .55; }
  .topbar .lang::after { content: ''; position: absolute; inset: -6px -4px -6px -8px; }   /* tap area 44px tall (32 + 6 + 6), 48px wide */

  /* ---- 2. Header: menu and cart 40px visible, 44px tap area, logo centred (1fr | auto | 1fr), same 16px gutter both sides ---- */
  .header .burger, .header .hdr-cart { width: 40px; height: 40px; border-radius: 10px; position: relative; }
  .header .burger::after, .header .hdr-cart::after { content: ''; position: absolute; inset: -2px; }  /* 44px tap area */
  .header .hdr-cart .n { top: -7px; right: -7px; }

  /* ---- 3. Cookie notice = bottom sheet: 16px side margins, 16px padding, 8px above the bottom nav (or above the Pay bar when it shows), max 30% of the screen,
     "Entendido" + "Privacidad" side by side, equal width, 48px tall ---- */
  .cookie-banner { left: 16px; right: 16px; max-width: none; margin: 0; padding: 16px; border-radius: 16px; font-size: 14px; max-height: 30vh; max-height: 30svh; overflow-y: auto; }
  .cookie-banner p { margin: 0 0 12px; line-height: 1.45; }
  .cookie-banner .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cookie-banner .btn { width: 100%; min-height: 48px; padding: 0 12px; font-size: 15px; text-align: center; }
  body.has-bnav .cookie-banner { bottom: calc(var(--bnav-tot) + env(safe-area-inset-bottom, 0px) + 8px); }
  body.has-bnav.has-order-bar .cookie-banner { bottom: calc(var(--bnav-tot) + var(--ob-h) + env(safe-area-inset-bottom, 0px) + 8px); }

  /* ---- 4. Round badges and bubbles -> rounded rectangles (8px = the DESIGN.md button radius), one size, text centred ----
     Changed: .coa-chip (COA chip on product cards: home, catalogo, coas), .filter-pill (category bubbles: home "Por área de investigación", catalogo, coas)
     and the small count badge inside .filter-pill. NOT changed: the cart-count badge (a number, stays a circle). */
  body .coa-chip { border-radius: 8px; min-width: 76px; justify-content: center; text-align: center; padding: 0 12px; }
  body .pc .coa-chip { min-width: 124px; }   /* catalogo: "COA · 99.8%" and "COA a pedido" share one width */
  body .filter-pill { border-radius: 8px; justify-content: center; }
  body .filter-pill .count { border-radius: 6px; }
}

/* ---- 6. Category rows (.filter-scroll): horizontal scroll hardening, all widths (bug is phone-only; these lines do nothing on desktop) ----
   - overflow-y: hidden. overflow-x:auto alone forces overflow-y:auto, so a 1px height rounding on iPhone turns the row into a tiny vertical scroller that grabs the finger.
   - overscroll-behavior-x: contain: the end of the row no longer chains into the page (no rubber-band jump).
   - touch-action: pan-x pan-y: the browser decides the axis at once, no waiting for a double-tap check.
   - phones: the row runs edge to edge (bubbles slide under the screen edge instead of vanishing at the 16px gutter) and the last bubble gets a 16px tail via ::after
     (Safari used to drop the end padding of a flex scroller, so the last bubble sat flush against the edge or was clipped). */
.filter-scroll { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; padding: 5px 0; margin: -4px 0; }  /* 5px = room for the 3px + 2px focus ring inside the clip; -4px keeps the old height (it was padding 1px) */
@media (max-width: 767px) {
  .ps-wrap { max-width: none; margin-left: calc(var(--wrap-pad, 16px) * -1); margin-right: calc(var(--wrap-pad, 16px) * -1); }   /* max-width: none, or the 100% cap cancels the bleed */
  .filter-scroll { padding-left: var(--wrap-pad, 16px); padding-right: 0; scroll-padding-left: var(--wrap-pad, 16px); }
  .filter-scroll::after { content: ''; flex: 0 0 calc(var(--wrap-pad, 16px) - 8px); }   /* + the 8px flex gap = 16px tail */
}