/* ============================================================================
   Claire Organics — Header, nav, announcement bar, search
   ========================================================================== */

/* ---- announcement bar ---- */
/* The Announcement Bar app injects its own sticky strip at global/body_start, so
   with the app enabled the store shows two announcement bars. Hide it — but only
   while ours is actually on the page, so a store that drops this header section
   still gets the app's bar instead of no bar at all. A browser without :has()
   drops the rule entirely, which fails in that same safe direction.
   `!important` because the app's script calls jQuery .show()/.hide() on this id,
   and .show() writes an inline display that a plain rule would lose to.
   sections/header.liquid also REMOVES the node — see the note there for why
   hiding it is not sufficient on its own. */
body:has(.rd-announce) slider-announcement-bar-app,
body:has(.rd-announce) #announcement-bar,
body:has(.rd-announce) #announcement-bar-top {
  display: none !important;
}
.rd-announce {
  background: var(--rd-sage);
  color: var(--rd-btn-ink);
  font-family: var(--rd-sans);
  overflow: hidden;
  position: relative;
  z-index: 2000;
}
.rd-announce__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: var(--rd-page);
  margin: 0 auto;
  padding: 9px 16px;
  text-align: center;
}
.rd-announce__item {
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rd-announce__dot { opacity: .55; font-size: .6rem; }
/* A linked message must read as part of the bar, not as a themed link: the global
   `a { color: ink }` / `a:hover { color: sage }` in redesign-tokens.css would make
   it dark on the sage bar and recolour it on hover. Inherit the bar's colour, mark
   it as a link with an underline only, and hold that colour through every state. */
.rd-announce__item a,
.rd-announce__item a:hover,
.rd-announce__item a:focus,
.rd-announce__item a:active,
.rd-announce__item a:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* A message that carries a button leaves its own text plain and puts the link
   beside it as a pill.
   Only the message that HAS a button becomes a flex row (the modifier is set in
   the section, so plain messages keep their normal inline layout). Centring the
   two as flex siblings is what aligns them: any vertical-align value would pin
   the pill to the text's baseline or x-height, and the pill's border box is
   taller than the glyphs, so it always read as sitting low.
   The pill must also stay INSIDE the message's 20px line box, or it becomes the
   tallest thing on the row and pushes the whole bar down — hence line-height 1.05
   and 2px padding, which lands it at ~17px. */
.rd-announce__item--cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Every selector keeps the `.rd-announce__item` prefix so it outranks the
   underline block above — that one is (0,2,1) on its :hover/:focus states, which
   a bare `.rd-announce__btn:hover` at (0,2,0) would lose to. */
.rd-announce__item .rd-announce__btn,
.rd-announce__item .rd-announce__btn:hover,
.rd-announce__item .rd-announce__btn:focus,
.rd-announce__item .rd-announce__btn:active,
.rd-announce__item .rd-announce__btn:visited {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--rd-btn-ink) 55%, transparent);
  border-radius: 999px;
  color: inherit;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.05;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--rd-dur) var(--rd-ease),
              border-color var(--rd-dur) var(--rd-ease),
              color var(--rd-dur) var(--rd-ease);
}
.rd-announce__item .rd-announce__btn:hover,
.rd-announce__item .rd-announce__btn:focus {
  background: var(--rd-btn-ink);
  border-color: var(--rd-btn-ink);
  color: var(--rd-sage);
}

/* Marquee fallback — only when the messages are too wide for the bar.
   redesign-motion.js measures in the `--measuring` state (one line, no wrap) and
   promotes to `--marquee` only if the row actually overflows; otherwise the bar
   stays the centred static row above. The track then holds TWO identical groups
   and slides exactly -50%, so the loop is seamless. Duration is set inline from
   the group width, giving a constant slow px/sec regardless of message length. */
.rd-announce--measuring .rd-announce__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
/* Items default to flex-shrink:1, so without this they squeeze and wrap their
   own text instead of overflowing — scrollWidth would equal clientWidth and the
   overflow test would never fire. */
.rd-announce--measuring .rd-announce__track > *,
.rd-announce--marquee .rd-announce__group > * {
  flex: none;
  white-space: nowrap;
}
.rd-announce--marquee .rd-announce__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  max-width: none;
  margin: 0;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  animation: rd-announce-marquee var(--rd-marquee-duration, 40s) linear infinite;
  will-change: transform;
}
.rd-announce--marquee .rd-announce__group {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 14px;   /* keeps the seam spacing equal to the inner gaps */
  flex: none;
}
/* Let a reader stop the text to finish reading it. */
.rd-announce--marquee:hover .rd-announce__track,
.rd-announce--marquee:focus-within .rd-announce__track {
  animation-play-state: paused;
}
@keyframes rd-announce-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Never scroll text at people who asked for stillness — fall back to wrapping. */
@media (prefers-reduced-motion: reduce) {
  .rd-announce--marquee .rd-announce__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    max-width: var(--rd-page);
    margin: 0 auto;
    gap: 14px;
    padding: 9px 16px;
  }
}

/* ---- header shell ---- */
.header-bar {
  font-family: var(--rd-sans);
  font-size: 16px;
  background-color: var(--rd-surface);
  color: var(--rd-ink);
  border-bottom: 1px solid var(--rd-line);
}
/* keep the homepage header in normal flow (no transparent overlap of the hero) */
.template-index .header-bar { position: sticky; background-color: var(--rd-surface); }
.template-index .header-bar.sticky-topbar { position: -webkit-sticky; position: sticky; top: 0; z-index: 1999; }
.header-bar.sticky-topbar.on-stick-top { box-shadow: 0 6px 24px -18px rgba(44,52,42,.5); }

/* The header is capped WIDER than the 1320px content width so the menu has more
   room for links before it wraps. Only the header widens — page content keeps its
   own measure. */
.header-bar .wrapper,
.header-bar.sticky-topbar .header-wrapper { max-width: var(--rd-header-page); }
.template-index .header-bar.sticky-topbar .header-wrapper { padding-top: 14px; padding-bottom: 14px; }
.site-header .wrapper { padding: 18px 24px; }

/* logo */
.site-header__logo .logo-wrapper { max-width: 86px; }
.site-header__logo img { transition: opacity var(--rd-dur) var(--rd-ease); }

/* left utility (Store Location) */
.rd-header-util__link {
  font-family: var(--rd-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rd-ink-soft);
  white-space: nowrap;
}
.rd-header-util__link:hover { color: var(--rd-sage); }

/* ============================================================================
   Single-row header layout (desktop): logo left · nav (centered) · icons right
   ========================================================================== */
@media (min-width: 769px) {
  .header-bar .header-wrapper.wrapper,
  .template-index .header-bar.sticky-topbar .header-wrapper,
  .header-bar.sticky-topbar .header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--rd-header-page);
    padding: 16px 44px;
  }
  .logo-header { padding: 0; }
  .rd-header-util { display: none; }              /* Store Location lives in the footer */
  .logo-header { flex: 0 0 auto; width: auto; margin: 0; }
  .header-nav-bar {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 0;
    margin: 0;
    border-top: 0;
  }
  .header-nav-bar .site-nav {
    display: flex;
    /* wrap, never nowrap: with nowrap a menu wider than its track overflows in
       BOTH directions (it is centred) and paints over the logo and the icons.
       Wrapping lets a long menu run onto a second line instead. */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
  }
  .header-nav-bar .site-nav > li { flex: 0 0 auto; }
  .header-nav-bar .site-nav > li > .site-nav__link { padding: 6px 12px; }
  /* keep room for the dropdown caret so it doesn't overlap the label */
  .header-nav-bar .site-nav > li.site-nav--has-dropdown > .site-nav__link { padding-right: 28px; }
  .header-nav-bar .site-nav__link .arrow-icon { right: 9px; }
  .desktop-header-nav {
    flex: 0 0 auto;
    position: static;
    right: auto;
    padding-right: 0;
    width: auto;
  }
}

/* theme.css paints every header link #000 at (0,1,1) — the top-level menu and
   the search / account / cart / burger icons — where no setting reaches them.
   Same selector in a later sheet: they follow the heading colour like the rest
   of the header, while the logo keeps its own "Logo" colour (theme.css also
   whites out the homepage text logo). The hover / active rules below outrank
   both, so those states are unchanged. */
.header-bar a { color: var(--rd-ink); }
.header-bar .site-header__logo a,
.template-index .site-header__logo a { color: var(--rd-logo-ink); }

/* ---- nav links ---- */
.site-nav__link {
  font-family: var(--rd-sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--rd-ink);
  padding: 14px 14px;
}
.site-nav--active .site-nav__link { color: var(--rd-sage); }

/* sweep gold hovers → sage (covers all the high-specificity index/stuck rules) */
.header-bar a:hover, .header-bar a:active, .header-bar a:focus,
.header-bar button:hover, .header-bar button:active, .header-bar button:focus,
.site-nav__link:hover, .site-nav__link:active, .site-nav__link:focus,
.site-nav--has-dropdown:hover > .site-nav__link,
.site-nav--has-dropdown.nav-hover > .site-nav__link,
.site-nav__dropdown .site-nav__link:hover,
.site-nav__dropdown .site-nav__link:active,
.site-nav__dropdown .site-nav__link:focus,
.template-index .header-bar .header-bg-wrapper .header-wrapper .site-nav > li.site-nav--has-dropdown:hover > .site-nav__link,
.template-index .header-bar .header-bg-wrapper .header-wrapper .site-nav > li.site-nav--has-dropdown.nav-hover > .site-nav__link,
.template-index .header-bar.sticky-topbar.on-stick-top .nav-hover > a,
.template-index .header-bar.sticky-topbar.on-stick-top a:hover {
  color: var(--rd-sage);
  outline-color: var(--rd-sage);
}
/* subtle underline grow on top-level items */
.site-nav > li > .site-nav__link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 1.5px;
  background: var(--rd-sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--rd-dur) var(--rd-ease);
}
.site-nav > li:hover > .site-nav__link::after,
.site-nav > li.nav-hover > .site-nav__link::after,
.site-nav > li.site-nav--active > .site-nav__link::after { transform: scaleX(1); }

/* ---- dropdown flyouts ---- */
.site-nav__dropdown {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-card);
  box-shadow: var(--rd-shadow);
  padding: 10px 0;
  overflow: hidden;
}
.site-nav__dropdown > li > .site-nav__link {
  font-size: .8rem;
  color: var(--rd-ink);
  letter-spacing: .06em;
  padding: 8px 22px;
}
.site-nav__dropdown .site-nav__link {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--rd-ink-soft);
  padding: 6px 22px;
}

/* ---- header icons ---- */
.header-icon-nav .header-bar__module a .svg-icon { width: 1.25em; height: 1.25em; }
.header-bar .svg-icon { transition: fill var(--rd-dur) var(--rd-ease); }
.header-bar__sep { display: none; }

/* ---- cart-count bubble: the button colour, not the leftover gold #C9A549 ----
   theme.css paints it via `.header-wrapper .cart-page-link-wrapper .cart-count`
   (three classes), which outranked the two-class override that used to live here
   — so the badge stayed gold. Match that depth for the two header variants and
   keep the shallower selectors for the drawer/footer instances. */
.header-bar .cart-count,
.header-wrapper .cart-count,
.cart-page-link-wrapper .cart-count,
.mobile-cart-page-link .cart-count,
.footer-bar .cart-count,
.header-wrapper .cart-page-link-wrapper .cart-count,
.header-wrapper .mobile-cart-page-link .cart-count {
  background: var(--rd-sage);
  color: var(--rd-btn-ink);
}

/* ---- search field (kills the gold submit block) ---- */
.header-bar__search {
  background-color: var(--rd-bg);
  border: 1px solid var(--rd-line);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color var(--rd-dur) var(--rd-ease), box-shadow var(--rd-dur) var(--rd-ease);
}
.header-bar__search:focus-within { border-color: var(--rd-sage); box-shadow: 0 0 0 3px var(--rd-sage-tint); }
.header-bar__search input,
input.header-bar__search-input,
.header-bar__search-input[type="search"] {
  font-family: var(--rd-sans);
  font-size: .85rem;
  color: var(--rd-ink);
  background: transparent;
}
.header-bar__search .btn,
.header-bar__search .btn:hover,
.header-bar__search .btn:focus,
.header-bar__search-submit {
  background: transparent !important;
  color: var(--rd-sage) !important;
  box-shadow: none !important;
  border-radius: 0;
}
.header-bar__search .btn .icon,
.header-bar__search-submit .icon { color: var(--rd-sage); }

/* search popup field (EasyStore search component) */
.search__input.is-focus,
.search-bar .input-group-field:focus { border-color: var(--rd-sage); }

/* ---- header search ICON (matches account/cart) + overlay ---- */
.rd-search-link {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  color: var(--rd-ink);
  cursor: pointer;
}
.rd-search-link .svg-icon,
.rd-search-link .icon-search { width: 1.25em; height: 1.25em; fill: currentColor; }
.rd-search-link:hover { color: var(--rd-sage); }

.rd-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: flex-start;
  justify-content: center;
}
.rd-search-overlay:target { display: flex; }
.rd-search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 52, 42, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.rd-search-overlay__panel {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: 680px;
  margin-top: 13vh;
  background: var(--rd-surface);
  border-radius: var(--rd-radius-card);
  box-shadow: var(--rd-shadow);
  padding: clamp(28px, 4vw, 46px);
  text-align: center;
  animation: rd-fade-up .35s var(--rd-ease);
}
.rd-search-overlay__close {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--rd-ink-soft);
  text-decoration: none;
}
.rd-search-overlay__close:hover { color: var(--rd-sage); }
.rd-search-overlay__eyebrow {
  font-family: var(--rd-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rd-sage);
  margin: 0 0 18px;
}
.rd-search-overlay__form { display: flex; gap: 12px; align-items: center; }
.rd-search-overlay__form .rd-search-overlay__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-bottom: 1.5px solid var(--rd-line);
  border-radius: 0;
  background: transparent;
  font-family: var(--rd-serif);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--rd-ink);
  padding: 10px 4px;
}
.rd-search-overlay__form .rd-search-overlay__input::placeholder { color: #8a826f; }
.rd-search-overlay__form .rd-search-overlay__input:focus { outline: none; border-color: var(--rd-sage); box-shadow: none; }
.rd-search-overlay__submit { flex: 0 0 auto; border-radius: 999px; padding: 13px 30px; }

/* ============================================================================
   Mobile slide-out nav drawer — warm botanical system (was Baskerville/white).
   CSS-only; every JS hook (#MobileNav, MobileNavTrigger, mobile-nav__sublist-
   trigger, currency-picker) is left untouched. This is the PRIMARY nav on the
   majority of (mobile) traffic, so it carries the redesign too.
   ========================================================================== */
#MobileNav.mobile-nav {
  background: var(--rd-bg);
  font-family: var(--rd-sans);
}
.mobile-nav .mobile-nav__link { border-bottom: 1px solid var(--rd-line); }
.mobile-nav .mobile-nav__link > a,
.mobile-nav .mobile-nav__parent-link {
  font-family: var(--rd-sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rd-ink);
}
.mobile-nav .mobile-nav__link > a:hover,
.mobile-nav .mobile-nav__parent-link:hover,
.mobile-nav .site-nav--active > a { color: var(--rd-sage); }
/* sublists: warm surface, quieter sentence-case weight */
.mobile-nav .mobile-nav__sublist { background: var(--rd-surface); }
.mobile-nav .mobile-nav__sublist-link { border-top: 1px solid var(--rd-line); }
.mobile-nav .mobile-nav__sublist-link > a {
  font-family: var(--rd-sans);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--rd-ink-soft);
}
.mobile-nav .mobile-nav__sublist-link > a:hover { color: var(--rd-sage); }
/* expand chevrons + close (x) icon */
.mobile-nav .mobile-nav__sublist-trigger,
.mobile-nav .mobile-nav_icon-x .icon { color: var(--rd-ink-soft); }
.mobile-nav .mobile-nav__sublist-trigger:hover { color: var(--rd-sage); }
/* in-drawer search → sage pill treatment */
.mobile-nav .mobile-nav_search.header-bar__search {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: 999px;
}
.mobile-nav .mobile-nav_search.header-bar__search:focus-within {
  border-color: var(--rd-sage);
  box-shadow: 0 0 0 3px var(--rd-sage-tint);
}

/* ---- referral modal (mobile) ----
   The dialog is a position:fixed box inside a <details> that JS opens/closes via
   the `open` attribute. While closed it still gets laid out, which parks its
   absolutely-positioned × over the product slider's top-right corner. Gate both
   the dialog and its overlay on [open] so nothing exists until it's opened. */
.referral-modal details:not([open]) .referral-modal__dialog,
.referral-modal details:not([open]) .modal-overlay {
  display: none;
}