/** Shopify CDN: Minification failed

Line 189:1 Unexpected "}"
Line 190:28 Unexpected "0%"
Line 190:88 Unexpected "100%"

**/
/*
 * ygh-design-system.css
 * The site-wide design tokens and the few rules EVERY section must share.
 * Loaded once from layout/theme.liquid, right after the fonts. Sections read
 * the tokens; they do not redefine them and they do not load fonts themselves.
 *
 * Fonts (loaded in theme.liquid):
 *   Headings   "Bootstrap Alternate Pro" 400, uppercase (self-hosted, snippets/css-variables.liquid)
 *   Body / UI  "IBM Plex Sans" 400 500 600 700
 *   Highlights "Roboto Condensed" 700 800 (heading pills, subheadings, condensed labels)
 *
 * The --np-* tokens in new-poly-base.css are the older name for the same values
 * and stay for the sections that use them; new work uses --ygh-*.
 */

:root {
  /* Brand greens */
  --ygh-green-dark:  #002e17;   /* forest: footer, dark bands, dark highlight pills, primary CTA hover fill */
  --ygh-green:       #159d59;   /* MAIN (medium) green, decided 2026-09-17: highlight pills, links, stars, accents */
  --ygh-green-accent:#159d59;   /* same as --ygh-green (kept for the highlight rule) */
  --ygh-green-button:#00934a;   /* legacy button fill still on every solid CTA; to migrate to --ygh-green once a hover shade is agreed */
  --ygh-green-hover: #008443;   /* hover of the legacy button fill */
  --ygh-green-light: #159d59;   /* was #74c865 until 2026-10-01 (Rai + Kris): every light-green highlight is now the main green */
  --ygh-green-mint:  #f1ffef;   /* pale section tint */
  --ygh-green-text:  #2f5233;   /* heading text on light backgrounds */

  /* Neutrals */
  --ygh-ink:        #1a1b18;
  --ygh-grey:       #5a5d56;    /* body copy */
  --ygh-grey-light: #dadee5;    /* borders, dividers */
  --ygh-white:      #ffffff;
  --ygh-sale-red:   #be3c3c;

  /* Type */
  --ygh-font-heading:   "Bootstrap Alternate Pro", "Rockwell", "Roboto Slab", Georgia, serif;
  --ygh-font-body:      "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --ygh-font-highlight: "Roboto Condensed", "Arial Narrow", sans-serif;
  --ygh-h1: 48px;               /* page hero heading, desktop */
  --ygh-h2: 36px;               /* section heading, desktop */
  --ygh-h4: 24px;               /* card / item title, desktop */
  --ygh-eyebrow: 14px;          /* eyebrow / kicker, every width */
  --ygh-heading-lh: 1.1;        /* one line-height for all headings */
  --ygh-heading-ls: 0.8px;

  /* Shape */
  --ygh-radius-button: 8px;     /* every button */
  --ygh-radius-card: 8px;       /* default for cards, inputs and panels (existing elements not changed yet) */
  --ygh-radius-highlight: 3px;  /* heading highlight pills */
}
@media (min-width: 750px) and (max-width: 1099px) {
  :root { --ygh-h1: 40px; --ygh-h2: 32px; --ygh-h4: 20px; }
}
@media (max-width: 749px) {
  :root { --ygh-h1: 36px; --ygh-h2: 30px; }
}

/* ------------------------------------------------------------------
   TABLET TIER, 750px to 1099px (added 2026-09-21).
   Sections set their heading size themselves (often inline, from a
   section setting), and none of them had a step between desktop and
   phone: a tablet got the full desktop heading in a much narrower column.
   These rules are the missing step, in one place:
     h1 40px / h2 32px / h4 (card titles) 20px.
   New sections: use var(--ygh-h1|h2|h4) and you get the tier for free.
   ------------------------------------------------------------------ */
@media (min-width: 750px) and (max-width: 1099px) {
  main h2:is([class*="__heading"], [class*="__title"], [class*="__h2"], [class$="-heading"], [class$="-title"]):not([class*="cbm__"]) {
    font-size: var(--ygh-h2) !important;
    line-height: var(--ygh-heading-lh) !important;
  }
  main h1:is(.nc-heading, .np-hero__heading, .nnvh__h1, .np-section-heading) { font-size: var(--ygh-h1) !important; }
  main h3:is(.nh-coll__title, .nh-products__title, .nh-rv__card-title, .ygr5-review__title, .npfq__result-title) { font-size: var(--ygh-h4) !important; }
  main h3:is(.nr-st__quote, .nvre__title) { font-size: 24px !important; }
}

/* ------------------------------------------------------------------
   Heading highlight: the ONE way a highlighted word looks.
   Author headings as rich text and italicise the words to highlight;
   the <em> becomes the pill. (The About family still renders the pill as
   <span class="hl">; the rule covers that too until they move to <em>.) The two rules below are what makes a pill
   survive a line break in one piece: it must be display:inline (an
   inline-block pill cannot break, so it either overflows or jumps to
   the next line) and box-decoration-break:clone (without it the box is
   cut open at the line end and again at the start of the next line).
   ------------------------------------------------------------------ */
h1 em, h2 em, h3 em, h4 em,
[class*="__title"] em, [class*="__heading"] em, [class*="-title"] em, [class*="-heading"] em,
.ygh-hl em,
h1 .hl, h2 .hl, h3 .hl, h4 .hl, [class*="__title"] .hl, [class*="__heading"] .hl, [class*="-title"] .hl, [class*="-heading"] .hl {
  display: inline !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
  border-radius: var(--ygh-radius-highlight) !important;
}

/* Ready-made pill for new sections: put .ygh-hl on the heading. */
.ygh-hl em {
  font-family: var(--ygh-font-highlight);
  font-style: normal;
  font-weight: 800;
  background: var(--ygh-green-accent);
  color: var(--ygh-white);
  padding: 0.04em 0.28em;
  letter-spacing: 0.02em;
}
.ygh-hl--light em { background: var(--ygh-green-light); }
.ygh-hl--dark em  { background: var(--ygh-green-dark); }

/* ------------------------------------------------------------------
   Theme buttons (.button) on the design-doc spec, site-wide (2026-09-28).
   The old stock-theme style (4px corners, 4px offset shadow, 13px text with
   wide tracking, dark #2f5233 fill) came from the theme settings; those
   settings also drive non-button radii (cart drawer, filters), so they stay
   and only elements with the .button class are restyled here.
   Now used by: blog (Post comment, View all), the Return to shop banner,
   the cart page, search, account/login. Our own sections use their own
   button classes and are not affected.
   ------------------------------------------------------------------ */
.button:not(.button--tertiary):not(.button--secondary):not(.button--cta):not(.button--link):not(.skip-to-content-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--ygh-radius-button);
  background: var(--ygh-green-button);
  color: var(--ygh-white);
  font-family: var(--ygh-font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.15s ease;
}
.button:not(.button--tertiary):not(.button--secondary):not(.button--cta):not(.button--link):not(.skip-to-content-link):hover {
  background: var(--ygh-green-hover);
  color: var(--ygh-white);
  box-shadow: none;
}
/* compact buttons inside cards / filters keep their size */
.button.button--small:not(.button--tertiary):not(.button--secondary):not(.button--cta):not(.button--link) {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
}
.button:focus-visible { outline: 3px solid var(--ygh-green-light); outline-offset: 2px; }
/* the old hover "shine" sweep and the pseudo-element border */
.button:not(.button--tertiary):not(.button--secondary)::after,
.button:not(.button--tertiary):not(.button--secondary)::before { display: none; }
/* outline and text variants: same corners, no offset shadow (doubled class beats the theme rule) */
.button.button--secondary.button--secondary, .button.button--tertiary.button--tertiary,
.button.button--secondary.button--secondary:hover, .button.button--tertiary.button--tertiary:hover {
  border-radius: var(--ygh-radius-button);
  box-shadow: none;
}
/* card quick-add collapses to a round icon on touch / phones (component-card.css): keep the circle */
@media screen and (hover: none) and (max-width: 1366px), screen and (max-width: 749px) {
  .card-information__button .button:not(.button--tertiary):not(.button--secondary):not(.button--cta):not(.button--link):not(.skip-to-content-link) { padding: 0; min-height: 3.6rem; border-radius: 50%; }
}

/* Limited drop urgency: "Only N in stock at this price" + stock bar (snippets/ygh-units.liquid, numbers from ygh-stock-schedule.js).
   Look = Kris's Fall Clearance v7.1: amber #E3A23B / ochre #B9822A on the dark green card. */
:root { --ygh-fall: #e3a23b; --ygh-fall-ochre: #b9822a; --ygh-fall-ink: #002e17; --ygh-fall-cream: #fbf2e2; }
.ygh-units { display: block; min-width: 0; }
.ygh-units[hidden] { display: none !important; }
.ygh-units__text { margin: 0; font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0; }
.ygh-units__before, .ygh-units__num { font-family: var(--np-font-highlight, "Roboto Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 17px; letter-spacing: .5px; text-transform: uppercase; color: var(--ygh-fall); }
.ygh-units__num { display: inline-block; min-width: .6em; text-align: center; margin-right: 4px; font-variant-numeric: tabular-nums; }
.ygh-units--dark .ygh-units__text { color: #fff; }
.ygh-units--light .ygh-units__text { color: var(--ygh-fall-ink); }
.ygh-units--light .ygh-units__before, .ygh-units--light .ygh-units__num { color: var(--ygh-fall-ochre); }
.ygh-units__num.is-tick { animation: ygh-units-tick .24s ease-out; }
.ygh-units__bar { position: relative; height: 6px; margin-top: 8px; border-radius: 3px; overflow: hidden; background: rgba(0, 46, 23, .12); }
.ygh-units--dark .ygh-units__bar { background: rgba(255, 255, 255, .14); }
.ygh-units__fill { position: relative; display: block; height: 100%; width: 0; overflow: hidden; background: linear-gradient(90deg, var(--ygh-fall-ochre), var(--ygh-fall)); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
 }
@keyframes ygh-units-tick { 0% { transform: translateY(-45%) scale(1.25); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Sale announcement bar: its [units] text stays hidden until ygh-stock-schedule.js has the real count (html.ygh-stock-pending is set
   in theme.liquid and cleared on the first pass). The animation is the failsafe: shown after 3 s even if the script never runs. */
html.ygh-stock-pending .announcement-bar--sale .announcement-text { visibility: hidden; animation: ygh-pending-reveal 0s linear 3s forwards; }
@keyframes ygh-pending-reveal { to { visibility: visible; } }
/* Desktop header: the SALE menu link in the fall orange (snippets/desktop-menu.liquid adds the class to a link titled "Sale") */
.header__menu-item--sale, .header__menu-item--sale .label { color: #d9811c !important; }
.header__menu-item--sale:hover, .header__menu-item--sale:hover .label { color: #b9661a !important; }