/* =========================================================================
   Pecan & Petal :: UrbanStems-style header
   Slice: header  |  target: hcf-flowers (Storefront child) + WooCommerce

   COLOR RULE: the central theme layer (zzz-pnp-overrides.php) owns the palette
   and exposes it at :root as --pnp-bronze / --pnp-bronze-dark / --pnp-peach /
   --pnp-coral / --pnp-ink. This file NEVER hardcodes a palette hex. It maps
   those central tokens once into header-local --pnp-h-* roles (below) and then
   references only those roles, so a palette retune in one place flows through
   the whole header. The only literal colors are #fff for text/badges on the
   dark bronze bands (per the brand spec), a white surface fallback for the
   dropdown panels, and black/white alpha for shadows and on-dark hairlines.
   ========================================================================= */

.pnp-announce,
.pnp-header,
.pnp-drawer {
  /* --- map central palette -> header color roles (one place to retune) --- */
  --pnp-h-band:         var(--pnp-bronze);          /* dark announcement band  */
  --pnp-h-band-ink:     #fff;                        /* text on dark bands      */
  --pnp-h-bg:           var(--pnp-peach);            /* header bar, seamless    */
  --pnp-h-surface:      var(--pnp-panel, #fff);      /* mega + drawer panels    */
  --pnp-h-ink:          var(--pnp-ink);              /* primary text on light   */
  --pnp-h-accent:       var(--pnp-bronze);           /* links + icons on light  */
  --pnp-h-accent-strong: var(--pnp-bronze-dark);
  --pnp-h-spark:        var(--pnp-coral);            /* Sale / Subscribe        */

  /* derived tints, kept palette-driven via color-mix (no raw hex) */
  --pnp-h-line:         color-mix(in srgb, var(--pnp-bronze) 15%, transparent);
  --pnp-h-line-strong:  color-mix(in srgb, var(--pnp-bronze) 28%, transparent);
  --pnp-h-wash:         color-mix(in srgb, var(--pnp-bronze) 8%, transparent);
  --pnp-h-ph:           color-mix(in srgb, var(--pnp-bronze) 10%, var(--pnp-peach));

  /* type + shape */
  --pnp-h-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --pnp-h-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pnp-h-radius: 10px;
  --pnp-h-shadow: 0 18px 44px rgba(0, 0, 0, .14);
  --pnp-h-shadow-sm: 0 6px 20px rgba(0, 0, 0, .08);
  --pnp-h-maxw: 1280px;
  --pnp-h-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Storefront's default masthead is emptied (rendering moves to
   storefront_before_header); hide the leftover shell. Remove this rule if you
   integrate on the storefront_header hook instead. */
#masthead.site-header { display: none !important; }

/* shared container */
.pnp-container {
  width: 100%;
  max-width: var(--pnp-h-maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}

.pnp-header *,
.pnp-announce *,
.pnp-drawer * { box-sizing: border-box; }

/* =========================================================================
   1. ANNOUNCEMENT BAND
   ========================================================================= */
.pnp-announce {
  background: var(--pnp-h-band);
  color: var(--pnp-h-band-ink);
  font-family: var(--pnp-h-font-body);
  text-align: center;
}
.pnp-announce__track {
  position: relative;
  display: grid;
  min-height: 2.35rem;
  place-items: center;
  padding: .5rem 3rem;
}
.pnp-announce__msg {
  grid-area: 1 / 1;
  margin: 0;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--pnp-h-band-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--pnp-h-ease);
}
.pnp-announce__msg.is-active { opacity: 1; visibility: visible; }

/* =========================================================================
   2. STICKY HEADER (main bar + nav)
   ========================================================================= */
.pnp-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--pnp-h-bg);
  color: var(--pnp-h-ink);
  font-family: var(--pnp-h-font-body);
  transition: box-shadow .25s var(--pnp-h-ease);
}
.pnp-header.is-stuck { box-shadow: var(--pnp-h-shadow-sm); }

/* ---- main bar grid: [lead] [logo] [util] ---- */
.pnp-header__main { border-bottom: 1px solid var(--pnp-h-line); }
.pnp-header__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.05rem;
  transition: padding-block .2s var(--pnp-h-ease);
}
.pnp-header.is-stuck .pnp-header__grid { padding-block: .65rem; }

.pnp-header__lead { display: flex; align-items: center; gap: .5rem; justify-self: start; min-width: 0; }
.pnp-util { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.4rem); justify-self: end; }

/* ---- logo (centred) ---- */
.pnp-logo {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  justify-self: center;
  text-decoration: none;
  color: var(--pnp-h-ink);
  white-space: nowrap;
}
.pnp-logo__mark { display: inline-flex; flex: 0 0 auto; }
.pnp-logo__mark svg { display: block; width: 72px; height: 72px; transition: width .2s var(--pnp-h-ease), height .2s var(--pnp-h-ease); }
.pnp-header.is-stuck .pnp-logo__mark svg { width: 60px; height: 60px; }
.pnp-logo__txt { line-height: 1; text-align: left; }
.pnp-logo__txt b {
  display: block;
  font-family: var(--pnp-h-font-display);
  font-weight: 600;
  font-size: 2.8rem;
  letter-spacing: .005em;
  color: var(--pnp-h-ink);
}
.pnp-logo__txt > span {
  display: block;
  margin-top: .36rem;
  font-family: var(--pnp-h-font-body);
  font-size: 1.05rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pnp-h-accent);
}

/* ---- hamburger (mobile only) ---- */
.pnp-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pnp-h-ink);
  cursor: pointer;
}
.pnp-hamburger svg { width: 24px; height: 24px; }
.pnp-hamburger:hover { background: var(--pnp-h-wash); }

/* =========================================================================
   3. SEARCH (bar variant + shared)
   ========================================================================= */
.pnp-search { position: relative; }
.pnp-search--bar { width: 100%; max-width: 340px; }
.pnp-search__form {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .9rem;
  background: var(--pnp-h-surface);
  border: 1px solid var(--pnp-h-line-strong);
  border-radius: 999px;
  transition: border-color .15s var(--pnp-h-ease), box-shadow .15s var(--pnp-h-ease);
}
.pnp-search__form:focus-within {
  border-color: var(--pnp-h-accent);
  box-shadow: 0 0 0 3px var(--pnp-h-wash);
}
.pnp-search__icon { display: inline-flex; flex: 0 0 auto; color: var(--pnp-h-accent); }
.pnp-search__icon svg { width: 18px; height: 18px; }
.pnp-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--pnp-h-font-body);
  font-size: .92rem;
  color: var(--pnp-h-ink);
}
.pnp-search__input::placeholder { color: color-mix(in srgb, var(--pnp-ink) 55%, transparent); }

/* top-searches dropdown */
.pnp-search__suggest {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--pnp-h-surface);
  border: 1px solid var(--pnp-h-line);
  border-radius: var(--pnp-h-radius);
  box-shadow: var(--pnp-h-shadow);
  padding: .85rem;
}
.pnp-search__suggest[hidden] { display: none; }
.pnp-search__suggest-title {
  margin: 0 .4rem .5rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pnp-h-accent);
}
.pnp-search__suggest ul { list-style: none; margin: 0; padding: 0; }
.pnp-search__suggest li a {
  display: block;
  padding: .5rem .6rem;
  border-radius: 7px;
  text-decoration: none;
  font-size: .92rem;
  color: var(--pnp-h-ink);
}
.pnp-search__suggest li a:hover,
.pnp-search__suggest li a.is-active { background: var(--pnp-h-wash); color: var(--pnp-h-accent-strong); }

/* =========================================================================
   4. UTILITY CLUSTER (account / cart / agent / search-toggle)
   ========================================================================= */
.pnp-util__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .16rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: var(--pnp-h-ink);
  font-family: var(--pnp-h-font-body);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pnp-util__link:hover { color: var(--pnp-h-accent-strong); }
.pnp-util__icon { position: relative; display: inline-flex; color: var(--pnp-h-accent); }
.pnp-util__icon svg { width: 23px; height: 23px; }
.pnp-util__label { line-height: 1; }
.pnp-util__link--search-toggle { display: none; }

/* cart count badge */
.pnp-cart { position: relative; }
.pnp-cart__count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--pnp-h-spark);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.pnp-cart__count[data-count="0"] { display: none; }

/* preserved Agent badge link */
.pnp-util__link--agent { text-decoration: none; }
.pnp-util__badge {
  position: relative;
  display: block;
  width: 23px;
  height: 23px;
  overflow: hidden;
  line-height: 0;
}
.pnp-util__badge iframe {
  position: absolute;
  top: -2px;
  left: -8px;
  width: 66px;
  max-width: none;
  border: 0;
  pointer-events: none;
  transform: scale(.56);
  transform-origin: top left;
}

/* =========================================================================
   5. PRIMARY NAV + MEGA MENUS
   ========================================================================= */
.pnp-nav { position: relative; }
.pnp-nav__inner {
  position: relative;               /* positioning context for full-width megas */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.pnp-nav__primary,
.pnp-nav__util { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.pnp-nav__primary { gap: clamp(.4rem, 1.6vw, 1.9rem); }
.pnp-nav__util { gap: clamp(.6rem, 1.4vw, 1.5rem); }

.pnp-nav__item { position: static; display: flex; align-items: center; }
.pnp-nav__link {
  display: inline-block;
  padding: .95rem 0;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--pnp-h-ink);
  border-bottom: 2px solid transparent;
  transition: color .15s var(--pnp-h-ease), border-color .15s var(--pnp-h-ease);
}
.pnp-nav__item:hover > .pnp-nav__link,
.pnp-nav__item:focus-within > .pnp-nav__link { color: var(--pnp-h-accent); }

.pnp-nav__caret {
  display: inline-flex;
  align-items: center;
  padding: .25rem;
  margin-left: .1rem;
  border: 0;
  background: transparent;
  color: var(--pnp-h-accent);
  cursor: pointer;
}
.pnp-caret__i { width: 15px; height: 15px; transition: transform .2s var(--pnp-h-ease); }
.pnp-nav__item:hover .pnp-caret__i,
.pnp-nav__item:focus-within .pnp-caret__i,
.pnp-nav__item.is-open .pnp-caret__i { transform: rotate(180deg); }

/* utility nav row (Same-Day / Sale / Subscribe / Rewards) */
.pnp-nav__uitem a {
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--pnp-h-ink);
  transition: color .15s var(--pnp-h-ease);
}
.pnp-nav__uitem a:hover { color: var(--pnp-h-accent-strong); }
.pnp-nav__uitem.is-sale a { color: var(--pnp-h-spark); font-weight: 700; }
.pnp-nav__uitem.is-spark a { position: relative; }
.pnp-nav__uitem.is-spark a::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pnp-h-spark);
}

/* ---- the mega panel ---- */
.pnp-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.25rem;
  padding: 1.85rem 2rem;
  background: var(--pnp-h-surface);
  border: 1px solid var(--pnp-h-line);
  border-top: 0;
  border-radius: 0 0 var(--pnp-h-radius) var(--pnp-h-radius);
  box-shadow: var(--pnp-h-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s var(--pnp-h-ease), transform .18s var(--pnp-h-ease), visibility .18s;
}
/* hover bridge so the pointer can cross the gap without closing */
.pnp-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.pnp-nav__item:hover > .pnp-mega,
.pnp-nav__item:focus-within > .pnp-mega,
.pnp-nav__item.is-open > .pnp-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pnp-mega__cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2rem; }
.pnp-mega__heading {
  display: block;
  margin-bottom: .85rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pnp-h-accent);
}
.pnp-mega__col ul { list-style: none; margin: 0; padding: 0; }
.pnp-mega__col li { margin: 0 0 .1rem; }
.pnp-mega__col li a {
  display: block;
  padding: .35rem .5rem;
  margin-left: -.5rem;
  border-radius: 7px;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--pnp-h-ink);
  transition: background .12s var(--pnp-h-ease), color .12s var(--pnp-h-ease);
}
.pnp-mega__col li a:hover { background: var(--pnp-h-wash); color: var(--pnp-h-accent-strong); }

/* feature tile */
.pnp-mega__feature {
  display: block;
  width: 232px;
  text-decoration: none;
  color: var(--pnp-h-ink);
}
.pnp-mega__feature-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--pnp-h-radius);
  background: var(--pnp-h-ph) center / cover no-repeat;
  box-shadow: var(--pnp-h-shadow-sm);
}
.pnp-mega__feature-txt { display: block; margin-top: .7rem; }
.pnp-mega__feature-txt b {
  display: block;
  font-family: var(--pnp-h-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
}
.pnp-mega__feature-txt span { display: block; margin-top: .15rem; font-size: .84rem; color: var(--pnp-h-accent); }
.pnp-mega__feature:hover .pnp-mega__feature-txt b { color: var(--pnp-h-accent-strong); }

/* =========================================================================
   6. MOBILE DRAWER
   ========================================================================= */
.pnp-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
}
.pnp-drawer.is-open { visibility: visible; pointer-events: auto; }
.pnp-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .42);
  opacity: 0;
  transition: opacity .25s var(--pnp-h-ease);
}
.pnp-drawer.is-open .pnp-drawer__overlay { opacity: 1; }
.pnp-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--pnp-h-surface);
  box-shadow: var(--pnp-h-shadow);
  transform: translateX(-100%);
  transition: transform .28s var(--pnp-h-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pnp-drawer.is-open .pnp-drawer__panel { transform: translateX(0); }

.pnp-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--pnp-h-line);
}
.pnp-drawer__brand { font-family: var(--pnp-h-font-display); font-weight: 600; font-size: 1.2rem; color: var(--pnp-h-ink); }
.pnp-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pnp-h-ink);
  cursor: pointer;
}
.pnp-drawer__close:hover { background: var(--pnp-h-wash); }
.pnp-drawer__close svg { width: 22px; height: 22px; }

.pnp-search--drawer { margin: 1rem 1.25rem .25rem; }

.pnp-drawer__nav { padding: .5rem .75rem 0; }
.pnp-drawer__toplink,
.pnp-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .95rem .5rem;
  border: 0;
  border-bottom: 1px solid var(--pnp-h-line);
  background: transparent;
  font-family: var(--pnp-h-font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--pnp-h-ink);
  text-decoration: none;
  cursor: pointer;
}
.pnp-drawer__toggle svg { width: 18px; height: 18px; color: var(--pnp-h-accent); transition: transform .2s var(--pnp-h-ease); }
.pnp-drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.pnp-drawer__panel-body { padding: .35rem .5rem .9rem; }
.pnp-drawer__panel-body[hidden] { display: none; }
.pnp-drawer__lead {
  display: block;
  padding: .5rem 0;
  font-weight: 700;
  color: var(--pnp-h-accent-strong);
  text-decoration: none;
}
.pnp-drawer__heading {
  display: block;
  margin: .7rem 0 .25rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pnp-h-accent);
}
.pnp-drawer__panel-body a:not(.pnp-drawer__lead) {
  display: block;
  padding: .42rem 0 .42rem .6rem;
  font-size: .94rem;
  color: var(--pnp-h-ink);
  text-decoration: none;
}
.pnp-drawer__panel-body a:hover { color: var(--pnp-h-accent-strong); }

.pnp-drawer__util { list-style: none; margin: .5rem 0 0; padding: .5rem 1.25rem; border-top: 1px solid var(--pnp-h-line); }
.pnp-drawer__uitem a { display: block; padding: .6rem 0; font-size: .98rem; font-weight: 600; color: var(--pnp-h-ink); text-decoration: none; }
.pnp-drawer__uitem.is-sale a { color: var(--pnp-h-spark); }
.pnp-drawer__uitem a:hover { color: var(--pnp-h-accent-strong); }

.pnp-drawer__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid var(--pnp-h-line);
}
.pnp-drawer__footlink {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 0;
  color: var(--pnp-h-ink);
  text-decoration: none;
  font-size: .96rem;
  font-weight: 600;
}
.pnp-drawer__footlink svg { width: 22px; height: 22px; color: var(--pnp-h-accent); }
.pnp-drawer__footlink:hover { color: var(--pnp-h-accent-strong); }
.pnp-drawer__agentdot { width: 10px; height: 10px; border-radius: 50%; background: var(--pnp-h-spark); flex: 0 0 auto; margin: 0 6px; }

/* body scroll lock while the drawer is open */
html.pnp-no-scroll, html.pnp-no-scroll body { overflow: hidden; }

/* =========================================================================
   7. RESPONSIVE
   ========================================================================= */

/* below the desktop nav breakpoint: hamburger + drawer take over */
@media (max-width: 1023px) {
  .pnp-nav { display: none; }
  .pnp-hamburger { display: inline-flex; }
  .pnp-search--bar { display: none; }
  .pnp-util__link--search-toggle { display: inline-flex; }
  .pnp-util__label { display: none; }
  .pnp-header__grid { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .pnp-logo__txt > span { display: none; }
  .pnp-logo__mark svg,
  .pnp-header.is-stuck .pnp-logo__mark svg { width: 52px; height: 52px; }
  .pnp-logo__txt b { font-size: 2rem; }
}

/* tighten the util cluster on small phones */
@media (max-width: 560px) {
  .pnp-util { gap: .75rem; }
  .pnp-logo__mark svg,
  .pnp-header.is-stuck .pnp-logo__mark svg { width: 44px; height: 44px; }
  .pnp-logo__txt b { font-size: 1.55rem; }
  .pnp-util__link--search-toggle { display: none; } /* search lives in the drawer */
}

/* keep megas from overflowing on mid-size desktops */
@media (min-width: 1024px) and (max-width: 1180px) {
  .pnp-mega { padding: 1.5rem 1.5rem; gap: 1.5rem; }
  .pnp-mega__feature { width: 200px; }
}

/* =========================================================================
   8. ACCESSIBILITY / MOTION
   ========================================================================= */
.pnp-header a:focus-visible,
.pnp-header button:focus-visible,
.pnp-drawer a:focus-visible,
.pnp-drawer button:focus-visible,
.pnp-search__input:focus-visible {
  outline: 2px solid var(--pnp-h-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .pnp-announce__msg,
  .pnp-header,
  .pnp-header__grid,
  .pnp-logo__mark svg,
  .pnp-mega,
  .pnp-caret__i,
  .pnp-drawer__overlay,
  .pnp-drawer__panel,
  .pnp-drawer__toggle svg { transition: none !important; }
}