/** Shopify CDN: Minification failed

Line 339:28 Unexpected "`"

**/
/*
  Roots header system
  ===================

  Replaces Dawn's header proportions wholesale. The stock arrangement stacked a
  copper announcement stripe (39px) on a maroon header (125px) carrying a 78px
  logo: 164px of chrome before a shopper saw a product, and two competing colour
  blocks where the system calls for one.

  What this file establishes:

  1. ONE BAND. Announcement and header share scheme-2 (oxblood maroon) and read
     as a single lacquered block, divided by a hairline rather than a colour
     change. Copper returns as a 2px rule along the very top edge and as the
     divider diamond — a mark, not a fill (DESIGN.md, The Copper Restraint Rule).
     The copper announcement background also failed contrast: white on
     #B46A3C is 4.20:1, below the 4.5:1 floor for text under 18.66px. Ivory on
     maroon is 11.7:1.
  2. PROPORTION. 32px announcement + 76px header = 108px, condensing to 58px
     once scrolled. The logo is capped by HEIGHT (4.8rem), not width, so the
     bar cannot grow if someone changes the logo setting or swaps the asset.
  3. ONE BASELINE. Logo, nav and utilities all align to the same optical left
     edge as `.page-width` content below, so the header stops floating free of
     the page grid.

  UNIT CONTRACT: the root font size is 62.5%, so 1rem = 10px. Read the trailing
  comments, not the numbers.
*/

.header-wrapper {
  --roots-header-logo-height: 4.8rem; /* 48px */
  --roots-header-pad-block: 1.4rem; /* 14px */
  --roots-header-rule: rgba(var(--color-foreground), 0.14);
  --roots-nav-gap: 3.6rem; /* 36px between logo block and nav */

  position: relative;
}

/* One gutter for the whole page. Dawn gives the header and utility bar their
   own 3.2rem inset at >=750px and then a third value at >=990px, so the logo
   sat 18px inside the left edge that every section below it uses. These match
   `.page-width` exactly, at every breakpoint, so the logo, the first nav item
   and the first word of page content share one vertical line. The selectors
   are weighted to beat base.css's `.header:not(.drawer-menu).page-width`. */
.header-wrapper .header.page-width,
.header-wrapper .utility-bar__grid.page-width,
.announcement-bar-section .utility-bar__grid.page-width {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .header-wrapper .header.page-width,
  .header-wrapper .utility-bar__grid.page-width,
  .announcement-bar-section .utility-bar__grid.page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* The copper rim that used to run along the top edge of the page is gone.

   It was a 0.2rem full-bleed copper rule, carried by the announcement bar when
   one existed and by the header otherwise. On the maroon header it stopped
   reading as the lacquer line on a finished vessel and started reading as a
   stray yellow bar above the site — a browser-chrome artefact rather than a
   brand mark. The header's own maroon band is the top edge now, and it meets
   the viewport cleanly.

   Copper keeps every other role it holds in this system (rule marks, badges,
   active-state accents). This was the single place it ran full-bleed, and
   full-bleed is what made it read wrong. */

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.utility-bar {
  min-height: 3.2rem; /* 32px */
}

.utility-bar--bottom-border,
.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid var(--roots-header-rule);
}

.announcement-bar__message {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The eyebrow step, which is what this is: a tracked uppercase micro-label.
     Ivory on maroon is 11.7:1, so the 14px-bold floor the copper background
     forced (and did not actually clear — white on #B46A3C is 4.20:1) is gone. */
  font-size: var(--type-eyebrow);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  /* Dawn floors this at 3.8rem, which is what kept the bar 38px tall no matter
     what the type did. 3.2rem matches `.utility-bar`'s own floor. */
  min-height: 3.2rem;
  padding: 1rem 0;
  margin: 0;
}

.announcement-bar__message span {
  display: inline-flex;
  align-items: center;
}

/* The rule-diamond motif at its smallest legible size, used as the clause mark
   around the announcement. Drawn as a rotated square rather than set as a glyph. */
.announcement-bar__message span::before,
.announcement-bar__message span::after {
  content: '';
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
  margin-inline: 1.2rem;
  background-color: var(--roots-copper);
  rotate: 45deg;
}

/* On a 375px screen the tracked line plus two marks wraps to two lines and the
   bar grows to 44px. The marks are a desktop refinement, so they go first and
   the tracking tightens to the point where the sentence holds one line. */
@media screen and (max-width: 749px) {
  .announcement-bar__message {
    letter-spacing: 0.04em;
    padding: 1rem 0;
  }

  .announcement-bar__message span::before,
  .announcement-bar__message span::after {
    display: none;
  }
}

/* ==========================================================================
   Header shell
   ========================================================================== */

/* The condensed state changes real layout: the header sits in normal flow even
   while sticky, so easing its padding would re-lay-out every section below it
   on each of ~15 frames — and it fires mid-scroll, the worst moment to spend
   layout on. The change is discrete instead: one 10px step at the threshold,
   which is imperceptible during a scroll and costs a single reflow. */
.header {
  padding-top: var(--roots-header-pad-block);
  padding-bottom: var(--roots-header-pad-block);
  column-gap: var(--roots-nav-gap);
}

@media screen and (min-width: 990px) {
  /* Logo, then nav, then utilities pushed right. `1fr` on the icons column is
     what keeps the nav locked beside the logo instead of drifting to centre. */
  .header--middle-left.header--has-menu:not(.drawer-menu) {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: var(--roots-nav-gap);
  }
}

/* Logo -------------------------------------------------------------------- */

.header__heading-link {
  padding: 0;
  display: inline-flex;
  align-items: center;
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: 0; /* Dawn pulls this -0.75rem to offset its own padding */
  }
}

.header__heading-logo-wrapper {
  width: auto;
  display: flex;
}

/* Discrete for the same reason as the header padding above: the logo is in
   flow, so easing its height animates the header's height, and with it the
   position of the whole page. */
.header__heading-logo {
  height: var(--roots-header-logo-height);
  width: auto;
  max-width: none;
}

/* Wordmark fallback when no logo image is set */
.header__heading-link .h2 {
  font-size: var(--type-h3);
  letter-spacing: 0.02em;
  color: rgb(var(--color-heading));
}

/* Navigation -------------------------------------------------------------- */

.header__inline-menu {
  margin-left: 0;
}

.header__menu {
  padding: 0;
}

.header__inline-menu .list-menu--inline {
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.header__menu-item {
  position: relative;
  padding: 0.8rem 1.4rem;
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(var(--color-foreground), 0.82);
  white-space: nowrap;
  transition: color 180ms ease;
}

/* First item's optical left edge lines up with the logo, not its padding box */
.header__inline-menu .list-menu--inline > li:first-child .header__menu-item {
  margin-left: -1.4rem;
}

.header__menu-item:hover,
details[open] > .header__menu-item {
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

/* A copper rule under the active/hovered item, drawn on the header's own
   baseline rather than as a text underline, so items with a caret and items
   without share the same mark. */
.header__menu-item::after {
  content: '';
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 0;
  height: 0.15rem;
  background-color: var(--roots-copper);
  scale: 0 1;
  transform-origin: left center;
  transition: scale 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.header__menu-item:hover::after,
details[open] > .header__menu-item::after,
.header__menu-item:has(.header__active-menu-item)::after {
  scale: 1 1;
}

@media (prefers-reduced-motion: reduce) {
  .header__menu-item::after,
  .header__heading-logo,
  .header {
    transition: none;
  }
}

/* Dawn's underline treatments, replaced by the rule above */
.header__menu-item span,
.header__menu-item:hover span,
details[open] > .header__menu-item,
details[open]:hover > .header__menu-item,
.header__active-menu-item,
.header__menu-item:hover .header__active-menu-item {
  text-decoration: none;
  text-decoration-thickness: initial;
}

.header__active-menu-item {
  color: rgb(var(--color-foreground));
}

.header__menu-item .icon-caret {
  position: static;
  margin-left: 0.6rem;
  width: 0.9rem;
  height: 0.6rem;
  flex-shrink: 0;
  transition: rotate 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

details[open] > .header__menu-item .icon-caret {
  transform: none;
  rotate: 180deg;
}

/* Utilities --------------------------------------------------------------- */

.header__icons {
  align-items: center;
  gap: 0.2rem;
  padding-right: 0;
}

/* Dawn pulls the cart 1.2rem right to cancel `.header__icons`' own 0.8rem
   right padding. That padding is zeroed above, so the pull is now a 12px
   overhang past the page gutter — and the gutter is the one baseline the whole
   header is aligned to. */
.header__icon--cart {
  margin-right: 0;
}

/* The search trigger only breaks from this shared 40px sizing once the
   min-width: 990px pill treatment below overrides it back to auto. */
.header__icon .svg-wrapper {
  width: 4rem;
  height: 4rem;
}

/* --- optical sizing, not box sizing ---------------------------------------

   These four glyphs come from three different drawing grids, and a single
   shared `width` rendered them at three different sizes. What a shopper sees is
   the DRAWN mark, not the box it is declared in. Measured off the rendered
   page, in viewBox units:

     account   18x19 box, mark fills 18.0 of 19   (95%)
     search    18x19 box, mark fills 17.0 of 19   (89%)
     heart     20x20 box, mark fills 14.5 of 20   (73% — a heart is wide, not tall)
     cart      40x40 box, mark fills 17.3 of 40   (43%)

   At the old uniform 2rem that was a 19px account standing beside an 11px bag.
   Each box below is sized so every mark lands at ~19px drawn, which is why the
   numbers look uneven and are not: the bag needs a box more than twice the
   heart's to draw the same size. If an icon asset is ever replaced, re-measure
   its bbox rather than reaching for the shared value. */
   EVERY RULE BELOW CARRIES `.icon` AS WELL AS `svg`, AND THAT IS NOT
   BELT-AND-BRACES. These glyphs are inlined with `class="icon icon-cart"`, so
   the shared declaration below matches them twice — once at `(0,2,1)` through
   the element and once at `(0,3,0)` through the class — and a grouped selector
   list is scored per selector, not as a group. A per-icon override written
   against `svg` alone therefore loses to the shared rule it is meant to
   override, silently, and every glyph renders at the shared size. */
.header__icon .svg-wrapper > svg,
.header__icon .svg-wrapper > .icon {
  width: 1.8rem;
  height: 1.8rem;
}

.header__icon--search .svg-wrapper > svg,
.header__icon--search .svg-wrapper > .icon {
  width: 1.9rem;
  height: 1.9rem;
}

.header__icon--saved .svg-wrapper > svg,
.header__icon--saved .svg-wrapper > .icon {
  width: 2.2rem;
  height: 2.2rem;
}

/* The bag fills so little of its own drawing grid that it needs the whole 44px
   target to draw an 19px mark. The wrapper grows with it so the glyph is not
   painting outside the box it is centred in. */
.header__icon--cart .svg-wrapper {
  width: 4.4rem;
  height: 4.4rem;
}

.header__icon--cart .svg-wrapper > svg,
.header__icon--cart .svg-wrapper > .icon {
  width: 4.4rem;
  height: 4.4rem;
}

.header .cart-count-bubble {
  bottom: 0.3rem;
  left: 2.2rem;
  min-width: 1.8rem;
  height: 1.8rem;
  font-weight: var(--font-body-weight-bold);
}

/*
  Removed: the bordered, labelled search pill that replaced this icon from 990px
  up — a capsule with a copper ring, 1.4/1.6rem padding, a 1.7rem glyph and the
  word "Search" beside it, plus its own 1.2rem right margin to hold it off the
  three icons that followed.

  The row is four utility marks. Three were bare glyphs on a 40px target and the
  fourth was a labelled capsule, so one control announced itself in a row that
  had agreed not to, and it forced its own spacing rule to survive next to the
  others. The trigger is the same icon at every width now, sized by the
  optical-sizing block above with the rest of the row, and the gap between all
  four comes from `.header__icons` rather than from an exception.

  `.header__search` keeps `display: inline-flex` from base.css and the summary
  keeps the shared `.header__icon` sizing — there is nothing left to declare
  here, which is the point.
*/

/* Dawn marks the search summary as a `link`, which underlines whatever is
   inside it. The icon has no text, but the rule is kept because the close glyph
   swaps in from the same span when the disclosure opens. */
.header__search .header__icon--search,
.header__search .header__icon--search span {
  text-decoration: none;
}

/* Condensed sticky state --------------------------------------------------- */
/* The scrolled values come from the section's own settings (header.liquid), so
   the condensed bar stays proportional to whatever logo height is configured. */

/* ==========================================================================
   Mega menu — Roots panel
   ========================================================================== */

/* The panel spans the header, so the disclosure stays out of the way and the
   panel takes its width from `.header-wrapper` instead of from its trigger. */
.roots-menu--panel {
  position: static;
}

.roots-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 4;
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  border-top: 0.1rem solid var(--roots-header-rule);
  background-color: rgb(var(--color-background));
  overflow-y: auto;
  max-height: calc(100vh - var(--header-height, 11rem) - 4rem);
}

/* `auto-fit` with a real minimum, not `minmax(0, 1fr)` — the latter generates a
   track per available pixel and leaves 40-odd collapsed columns behind. */
.roots-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.roots-menu__card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.roots-menu__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-media);
  background-color: rgba(var(--color-foreground), 0.06);
}

.roots-menu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.roots-menu__card:hover .roots-menu__media img,
.roots-menu__card:focus-visible .roots-menu__media img {
  scale: 1.04;
}

@media (prefers-reduced-motion: reduce) {
  .roots-menu__media img {
    transition: none;
  }

  .roots-menu__card:hover .roots-menu__media img {
    scale: 1;
  }
}

.roots-menu__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.roots-menu__media--empty svg {
  width: 4rem;
  height: 4rem;
  color: rgba(var(--color-foreground), 0.35);
}

.roots-menu__card-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.roots-menu__card-title {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: var(--type-h4);
  line-height: 1.2;
  color: rgb(var(--color-heading));
  margin: 0;
}

.roots-menu__card:hover .roots-menu__card-title {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.1rem;
  text-decoration-color: var(--roots-copper);
}

.roots-menu__card-count {
  flex-shrink: 0;
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--font-body-weight-bold);
  color: rgb(var(--color-foreground));
}

/* Feature column — the wholesale/B2B door, given equal billing to the
   categories because both channels are first-class (PRODUCT.md §Users). */
.roots-menu__feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-media);
  min-height: 100%;
  text-decoration: none;
}

.roots-menu__feature-title {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: var(--type-h3);
  line-height: 1.15;
  color: rgb(var(--color-heading));
  margin: 0 0 var(--space-3);
}

/* Full-strength foreground, not the 0.75 body tint: on the walnut and maroon
   schemes this panel can carry, a tinted ivory lands at 3.5–4.0:1. */
.roots-menu__feature-text {
  display: block;
  font-size: var(--type-meta);
  line-height: 1.55;
  color: rgb(var(--color-foreground));
  margin: 0;
  max-width: 32ch;
}

.roots-menu__feature-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--type-eyebrow);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgb(var(--color-heading));
  text-decoration: none;
}

/* The rule is drawn at its extended length and scaled down at rest, so the
   hover grows it with a compositor transform rather than by re-laying-out the
   flex row it sits in. */
.roots-menu__feature-link::after {
  content: '';
  flex-shrink: 0; /* it is a flex item; without this the column squeezes it to 21px */
  width: 3rem;
  height: 0.1rem;
  background-color: currentcolor;
  scale: 0.6 1;
  transform-origin: left center;
  transition: scale 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.roots-menu__feature:hover .roots-menu__feature-link::after,
.roots-menu__feature:focus-visible .roots-menu__feature-link::after {
  scale: 1 1;
}

/* Panel footer rail — the catalogue-wide links that are not categories */
.roots-menu__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-7);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 0.1rem solid var(--roots-header-rule);
  list-style: none;
}

.roots-menu__rail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--type-meta);
  font-weight: 500;
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

.roots-menu__rail-link:hover {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-color: var(--roots-copper);
}

.roots-menu__rail-link svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Compact dropdown — for menu items whose children are pages, not collections */
.roots-menu--compact {
  position: relative;
}

.roots-menu--compact .roots-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: max-content;
  min-width: 22rem;
  padding: var(--space-3) 0;
  border-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.roots-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.roots-menu__list-link {
  display: block;
  padding: 0.9rem 2.4rem;
  font-size: var(--type-meta);
  color: rgb(var(--color-foreground));
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease;
}

.roots-menu__list-link:hover,
.roots-menu__list-link[aria-current='page'] {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-foreground), 0.06);
}

/* Panel motion: Dawn's own open transition, kept, since it is interaction
   feedback on a disclosure rather than ambient animation. */
.js .roots-menu__panel {
  opacity: 0;
  transform: translateY(-1rem);
}

details[open] > .roots-menu__panel {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .js .roots-menu__panel {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media screen and (max-width: 989px) {
  .header-wrapper {
    --roots-header-logo-height: 3.6rem; /* 36px */
    --roots-header-pad-block: 1.2rem; /* 12px */
  }

  /*
    A centred logo needs its two flanking tracks to be genuinely equal, and
    `1fr` is not: an `fr` track floors at min-content, so the utility cluster
    (three or four 40px targets) forced its own column wider than the menu
    button's and pushed the logo left of centre by half that difference. The
    explicit `minmax(0, 1fr)` is what makes the two sides measure the same, and
    it is the reason the utility row below is cut to two marks — with four, an
    honestly centred logo would have nowhere left to sit on a 375px bar.
  */
  .header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: var(--space-2);
  }

  .header--mobile-center .header__heading,
  .header--mobile-center .header__heading-link {
    justify-self: center;
  }

  header-drawer {
    justify-self: start;
  }

  .header__icons {
    gap: 0;
  }

  /*
    Saved items and account both move into the menu drawer on mobile so the
    logo can hold the centre. Account was already duplicated there — the drawer
    has carried a `medium-hide large-up-hide` account link all along — so this
    removes a duplicate rather than a destination, and saved items joins it.
  */
  /* Qualified by `.header__icons` to clear base.css's
     `.header__icon:not(.header__icon--summary) { display: flex }` — a `:not()`
     counts its argument, so that rule scores (0,2,0) and a lone class here
     loses to it. */
  .header__icons .header__icon--saved,
  .header__icons .header__icon--account {
    display: none;
  }
}

/* Drawer menu polish: Dawn ships 2rem items on a 1.8rem rhythm; this brings the
   drawer onto the same type scale and copper accent as the desktop nav. */
.menu-drawer__menu-item {
  font-size: var(--type-body);
  letter-spacing: 0.01em;
  padding: 1.4rem 2.4rem;
}

.menu-drawer__menu-item--active,
.menu-drawer__menu-item:focus,
.menu-drawer__submenu .menu-drawer__menu-item--active {
  background-color: rgba(var(--color-foreground), 0.05);
}

.menu-drawer__menu-item--active {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.5rem;
  text-decoration-thickness: 0.1rem;
  text-decoration-color: var(--roots-copper);
}

.menu-drawer__close-button {
  font-size: var(--type-meta);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--font-body-weight-bold);
  padding: 1.4rem 2.4rem;
}

.menu-drawer__utility-links {
  padding: var(--space-5) var(--space-5) var(--space-6);
}

/* --- drawer destinations (saved, account) ---------------------------------

   Two links that are each a place to go, not a pair of chips, so they stack as
   rows on the drawer's own hairline rather than sitting side by side. Dawn only
   ever sized the account glyph through its `account-icon` wrapper, which means
   a store with the avatar setting off shipped an unsized icon here; the rule
   below covers both wrappers. */
.menu-drawer__utility-links .menu-drawer__account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding-block: var(--space-4);
  font-size: var(--type-meta);
}

.menu-drawer__utility-links .menu-drawer__account + .menu-drawer__account {
  border-block-start: 0.1rem solid rgba(var(--color-foreground), 0.12);
}

.menu-drawer__account > .svg-wrapper,
.menu-drawer__account account-icon > .svg-wrapper {
  display: flex;
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0;
}

.menu-drawer__account > .svg-wrapper > svg,
.menu-drawer__account account-icon > .svg-wrapper > svg {
  width: 100%;
  height: 100%;
}

/* The heart is a wide, short mark on a 20x20 grid — see the optical-sizing
   note in the utility row above. */
.menu-drawer__saved > .svg-wrapper {
  width: 2.1rem;
  height: 2.1rem;
}

.menu-drawer__saved > .svg-wrapper svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Inline here rather than the header's corner disc: this row has a label, so
   the count is a trailing figure beside it and does not need to be a badge. */
.menu-drawer__saved-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  margin-inline-start: auto;
  padding-inline: 0.6rem;
  border-radius: var(--radius-pill);
  background-color: var(--roots-copper);
  color: var(--roots-ivory);
  font-size: 1.2rem;
  font-weight: var(--font-body-weight-bold);
  line-height: 1;
}

/* `hidden` on a custom element is inert once an author rule gives it a
   `display`: the UA's `[hidden]` rule loses to any author declaration, not on
   specificity but on cascade origin. Same reason the header count carries one. */
.menu-drawer__saved-count[hidden] {
  display: none;
}

/* --- saved items -----------------------------------------------------------

   The fourth mark in the utility row. DESIGN.md's Navigation note described
   "three equal marks with no word between them", and this makes it four — a
   deliberate amendment recorded there, because a wishlist reachable only from a
   product page is a feature a shopper can use once and never find again.

   The heart is drawn as an outline and only fills when something is saved, so
   the row stays four light marks at rest rather than gaining a solid shape. Its
   size is set with the rest of the row in the optical-sizing block above, not
   here — two rules setting one glyph's box is how the row drifted apart. */
.header__icon--saved .svg-wrapper > svg,
.header__icon--saved .svg-wrapper > .icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* The anchor for the count below. Dawn positions `.header__icon--cart` and
   nothing else, so without this the saved count resolved its `position:
   absolute` against `.header-wrapper` and rendered as a loose copper disc
   pinned to the bottom-left corner of the whole header bar, nowhere near the
   heart it belonged to. */
.header__icon--saved {
  position: relative;
}

/* Positioned on the same corner as the cart bubble, with the same geometry, so
   the two counts read as one system rather than as two conventions. */
.roots-wishlist-count {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0.3rem;
  left: 2.2rem;
  min-width: 1.8rem;
  height: 1.8rem;
  padding-inline: 0.4rem;
  border-radius: var(--radius-pill);
  background-color: var(--roots-copper);
  color: var(--roots-ivory);
  font-size: 1.2rem;
  font-weight: var(--font-body-weight-bold);
  line-height: 1;
}

/* `hidden` on a custom element does nothing without this: a bare custom element
   has no default `display`, so the UA's `[hidden] { display: none }` has nothing
   to override once the rule above sets `display: flex`. */
.roots-wishlist-count[hidden] {
  display: none;
}