@import url("https://use.typekit.net/lvn0eze.css");
@import url("https://use.typekit.net/boh8wds.css"); /* Fields kit */ /* Adobe Fonts kit — loaded site-wide so every page gets brand fonts, not Georgia fallback */
html{scrollbar-gutter:stable both-edges !important}
/* ============================================================================
   bp-header.css — THE single source of truth for the header + announce bar.
   Loaded LAST on every page (homepage included). Edit HERE and every page
   updates together. Everything is !important so this file wins over any older
   per-page header rules — change one value, the whole site syncs.
   ============================================================================ */

/* ---- announce bar: text + flag removed, kept as a thin black line ---- */
.bp-announce{background:#000000 !important;font-size:0 !important;line-height:0 !important;
  height:8px !important;padding:0 !important;
  position:relative !important;z-index:1000000 !important;box-shadow:none !important}
.bp-announce i{display:none !important}

/* ---- header bar: brand green, light text ---- */
.bp-header{background:#f7f5f0 !important;border-bottom:1px solid rgba(17,17,17,.28) !important;
  box-shadow:none !important;width:100% !important;position:relative !important;z-index:1000000 !important}
.bp-header-row{display:grid !important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;align-items:center !important;
  height:auto !important;padding:clamp(34px,4vw,60px) clamp(18px,4vw,56px) clamp(14px,1.8vw,26px) !important;max-width:1500px !important;margin:0 auto !important;column-gap:.75rem !important}
.bp-header-nav{justify-self:start !important;display:flex !important;align-items:center !important;gap:28px !important;
  font-family:waverly-cf,system-ui,-apple-system,sans-serif!important;font-size:13px !important;font-weight:400 !important;
  letter-spacing:.2em !important;text-transform:uppercase !important;color:#111111 !important}
.bp-header-nav a{text-decoration:none !important;color:#111111 !important;transition:opacity .25s ease !important}
.bp-header-nav a:hover{opacity:.7 !important}
.bp-header-logo{justify-self:center !important;display:block !important;font-size:0 !important;line-height:0 !important;color:transparent !important;text-decoration:none !important;margin:0 !important}
.bp-header-icons{justify-self:end !important;display:flex !important;align-items:center !important;gap:22px !important;
  font-size:15.5px !important;color:#111111 !important}
.bp-header-icons a{color:#111111 !important;text-decoration:none !important;transition:opacity .25s ease !important}
.bp-header-icons a:hover{opacity:.6 !important}
.bp-header-icons svg{width:clamp(26px,6.5vw,44px) !important;height:clamp(26px,6.5vw,44px) !important;stroke-width:1.8 !important;display:block !important;color:#111111 !important;fill:none !important}
.bp-hamburger{display:inline-flex !important;align-items:center !important;justify-self:start !important;background:none !important;border:none !important;color:#111111 !important;cursor:pointer !important;padding:0 !important}
.bp-hamburger svg{width:clamp(26px,6.5vw,44px) !important;height:clamp(26px,6.5vw,44px) !important;display:block !important;color:#111111 !important;fill:none !important}

/* ---- header helpers (cart badge, account link, separators) — kept HERE so this
   file is the one and only place header CSS lives; pages no longer carry any ---- */
.bp-header-nav .bp-sep{color:#d1d1d1 !important}
.bp-account-link{font-family:waverly-cf,system-ui,-apple-system,sans-serif!important;font-size:13px !important;font-weight:400 !important;letter-spacing:.18em !important;text-transform:uppercase !important;white-space:nowrap !important;color:#111111 !important}
.bp-header-icons .ic{display:inline-flex !important;align-items:center !important}
.bp-cart-wrap{position:relative !important;display:inline-flex !important;align-items:flex-start !important}
.bp-cart-badge,.bp-cart-badge-dot{position:absolute !important;top:-.55rem !important;right:-.65rem !important;font-size:10px !important;background:#111111 !important;color:#fff !important;width:15px !important;height:15px !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;font-family:waverly-cf,system-ui,-apple-system,sans-serif!important}

/* ---- responsive sizing (matches the reference homepage exactly) ---- */
@media (max-width:820px){ .bp-header-row{height:auto !important;padding:26px 28px 14px !important} }
@media (max-width:480px){
  .bp-header-row{height:auto !important;padding:22px 22px 12px !important}

  .bp-announce{font-size:0 !important;padding:0 !important;height:6px !important}
}
@media (max-width:360px){ .bp-header-row{padding:22px 16px 12px !important} }

/* ============================================================================
   Header wordmark → brand logo image. Cream logotype (transparent PNG) sized to
   the header bar; hides the live text on every page in one place. Aspect ~7.27:1.
   ============================================================================ */

/* the logo is a real <img> in the HTML on every page */


/* ============================================================================
   BRAND WORDMARK — the single largest element on the site.
   Transparent, tight-cropped, lossless PNG (1281x177, aspect 7.2373).
   Sized by width with height:auto so it NEVER letterboxes or scales down.
   ============================================================================ */
.bp-header-logo{
  justify-self:center !important;
  display:block !important;
  width:clamp(300px, 64vw, 900px) !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:7.2373 !important;
  font-size:0 !important; line-height:0 !important; color:transparent !important;
}
.bp-header-logo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  image-rendering:auto !important;
}
@media (max-width:820px){ .bp-header-logo{ width:clamp(260px,68vw,560px) !important } }
@media (max-width:480px){ .bp-header-logo{ width:clamp(200px,60vw,330px) !important } }