/*
=====================================================================
 Belldiva site chrome (announce bar, top nav, logo, footer)
 Part of the Belldiva design system. Enqueued by functions.php as
 `belldiva-chrome`; see assets/css/belldiva.css for the index.
=====================================================================
*/

/* Hide Salient's header; the Belldiva chrome below is the sole nav. */
#header-outer,
#header-space,
#search-outer { display: none !important; }

/* Salient's off-canvas menu and cart open only from that hidden header, but
   they stay in the tab order, so keyboard focus vanished into them ("Close
   Menu", "Close Cart") on every page. Nothing can open them, so remove them. */
#slide-out-widget-area,
#slide-out-widget-area-bg,
.slide_out_area_close,
.nectar-slide-in-cart,
.nectar-slide-in-cart-bg { display: none !important; }

/* The newsletter bar sits outside .bd, so `.bd :focus-visible` misses it,
   and WPForms removes the browser outline. Gold on the deep green: 5.77:1. */
.bd-newsletter-form-wrap input:focus-visible,
.bd-newsletter-form-wrap button:focus-visible {
  outline: 2px solid #B8935C !important;
  outline-offset: 2px !important;
}
body { padding-top: 0 !important; }

.bd-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Announcement bar
   Dark strip above the nav: positioning line on the left, social and
   account on the right. Hidden entirely when the client clears the text
   and has set no social links, rather than collapsing to an empty band.
   ===================================================================== */
.bd-announce {
  background: var(--deep);
  color: color-mix(in srgb, var(--ground) 88%, transparent);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bd-announce-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  min-height: 30px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  line-height: 1;
}
/* One strict line: Salient's global p/padding rules and the icon row's
   line-height were pushing the two halves onto different baselines. */
.bd-announce-msg { margin: 0 !important; padding: 0 !important; line-height: 1; }
.bd-announce-side, .bd-announce-account { line-height: 1; }
.bd-announce .bd-social svg { width: 13px; height: 13px; }
.bd-announce-msg a { color: inherit; border-bottom: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.bd-announce-msg a:hover { color: var(--gold); }
.bd-announce-side { display: flex; align-items: center; gap: 18px; }
.bd-announce-account { display: flex; align-items: center; gap: 8px; }
.bd-announce-account a { color: inherit; }
.bd-announce-account a:hover { color: var(--gold); }
.bd-announce-account span { opacity: 0.45; }

/* Social row, shared by the announce bar, the mobile drawer and the footer. */
.bd-social { display: flex; align-items: center; gap: 12px; }
.bd-social a { display: flex; color: inherit; transition: color 0.15s ease, transform 0.15s ease; }
.bd-social a:hover { color: var(--gold); transform: translateY(-1px); }
.bd-social svg { width: 17px; height: 17px; }
.bd-social--sm svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  /* The positioning line is the first thing to go: social and account are
     functional, the strapline is decorative and repeats on every page. */
  .bd-announce-msg { display: none; }
  .bd-announce-inner { justify-content: center; padding: 0 20px; }
}

/* =====================================================================
   Top navigation
   ===================================================================== */
.bd-topnav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bd-topnav-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
body.admin-bar .bd-topnav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .bd-topnav { top: 46px; } }
/* At 600px and below WordPress lets the admin bar scroll away with the page
   (position: absolute), so leaving room for it opened a 46px gap above the
   header as soon as a signed-in phone user scrolled. */
@media (max-width: 600px) { body.admin-bar .bd-topnav { top: 0; } }

/* Nav sits as free-floating words: no pill, no track behind it. */
.bd-tabs { display: flex; }
.bd-tab-list {
  display: flex; gap: 26px; flex-wrap: wrap; list-style: none; margin: 0;
  padding: 0; background: none; border-radius: 0;
}
.bd-tab-list li { margin: 0; }
.bd-tab-list a {
  display: block; position: relative;
  font-size: 0.72rem; letter-spacing: 0.085em; text-transform: uppercase;
  padding: 6px 0; color: var(--ink); white-space: nowrap;
  transition: color 0.15s ease;
}
.bd-tab-list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s var(--ease-standard);
}
.bd-tab-list a:hover { color: var(--gold-deep); }
.bd-tab-list a:hover::after { transform: scaleX(1); }
.bd-tab-list .current-menu-item > a,
.bd-tab-list .current_page_item > a,
.bd-tab-list .current-menu-ancestor > a { color: var(--ink); }
.bd-tab-list .current-menu-item > a::after,
.bd-tab-list .current_page_item > a::after,
.bd-tab-list .current-menu-ancestor > a::after { transform: scaleX(1); }
/* Salient draws bullet separators and list markers on menu items. Kill every
   source so the words really do float on their own. */
.bd-tab-list li { list-style: none; }
.bd-tab-list li::marker { content: ''; }
.bd-tab-list li::before,
.bd-tab-list li::after { content: none !important; display: none !important; }
.bd-tab-list .sf-sub-indicator,
.bd-tab-list .nectar-menu-label { display: none; }

/* The drawer-only footer block; hidden on desktop where the announce bar
   already carries social and account. */
.bd-tabs-foot { display: none; }

.bd-nav-icons { display: flex; align-items: center; gap: 16px; color: var(--ink); flex-shrink: 0; }
.bd-nav-icons a,
.bd-nav-icons button { display: flex; color: inherit; position: relative; background: none; border: 0; padding: 0; cursor: pointer; }
.bd-nav-icons svg { width: 1.125rem; height: 1.125rem; }

.bd-nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; flex-direction: column; gap: 4px; }
.bd-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform 0.2s var(--ease-standard), opacity 0.2s var(--ease-standard); }
.bd-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bd-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bd-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================================
   Search panel
   An overlay under the nav rather than a jump to /?s=, so the visitor
   never loses the page they were reading.
   ===================================================================== */
.bd-search-panel {
  border-top: 1px solid var(--line);
  background: var(--ground-raised);
}
.bd-search-panel form {
  max-width: var(--wrap-max); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 12px;
}
.bd-search-panel input[type="search"] {
  flex: 1; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; padding: 10px 2px;
  font-size: var(--text-md); color: var(--ink);
  font-family: inherit;
}
.bd-search-panel input[type="search"]:focus { outline: none; border-bottom-color: var(--gold-deep); }
.bd-search-panel button[type="submit"] {
  border: 1px solid var(--deep); background: var(--deep); color: var(--ground);
  font-size: var(--text-2xs); letter-spacing: 0.09em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
}
.bd-search-panel button[type="submit"]:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.bd-search-close { background: none; border: 0; cursor: pointer; color: var(--ink-soft); display: flex; padding: 6px; }
.bd-search-close svg { width: 18px; height: 18px; }
.bd-search-close:hover { color: var(--ink); }

/* Ten items (Makeup added 2026-09-16) fit at 1440 but wrapped "Blog" onto a
   second line at 1200. Tighter pitch on laptop widths keeps one row down to
   the drawer breakpoint. */
@media (max-width: 1320px) and (min-width: 1101px) {
  .bd-tab-list { gap: 16px; }
  .bd-tab-list a { font-size: 0.66rem; letter-spacing: 0.06em; }
}

/* =====================================================================
   Mobile drawer
   Breakpoint is 1100px, not the 980px the page grids use: with ten nav
   items the tab row no longer fits between the logo and the icons at
   1024, so that width gets the drawer.
   ===================================================================== */
@media (max-width: 1100px) {
  .bd-nav-toggle { display: flex; order: 3; }
  .bd-topnav-inner { position: relative; flex-wrap: wrap; }
  .bd-nav-icons { order: 2; margin-left: auto; margin-right: 4px; }
  .bd-tabs { display: none; order: 4; width: 100%; }
  .bd-tabs.bd-open { display: block; padding-bottom: 8px; }
  .bd-tab-list {
    flex-direction: column; gap: 0;
    border-radius: 12px; background: var(--ground-raised);
    border: 1px solid var(--line); box-shadow: var(--shadow); padding: 6px;
  }
  .bd-tab-list li + li { border-top: 1px solid var(--line-soft); }
  .bd-tab-list a { text-align: left; padding: 13px 12px; font-size: 0.78rem; }
  .bd-tab-list a::after { display: none; }
  .bd-tabs-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 14px 4px;
  }
  .bd-tabs-account {
    font-size: 0.72rem; letter-spacing: 0.085em; text-transform: uppercase;
    color: var(--ink); border-bottom: 1px solid var(--gold);
  }
}

/* =====================================================================
   Logo
   The lockup is a wide mark (roughly 1.19:1), not the square the old `B`
   placeholder assumed, so it is sized by HEIGHT and left to find its own
   width. .bd-logo-ph is the last-resort fallback if the image is missing.
   ===================================================================== */
.bd-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; }
/* Two-class selector (not just `.bd-logo-img`) is needed to outrank WooCommerce's own
   `.woocommerce-page img { height: auto; max-width: 100% }`, which otherwise wins on
   specificity on woo pages (My Account, Cart, Checkout) and lets the logo render at its
   native intrinsic width instead of the fixed nav/footer height, blowing out the header. */
.bd-logo .bd-logo-img { display: block; width: auto; height: 100%; object-fit: contain; }
.bd-logo-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--deep, #0F231B); color: var(--gold, #B8935C);
  font-family: 'Kholic', Georgia, serif; font-weight: 400; line-height: 1;
  border: 1px solid var(--gold-deep, #8C6B3E); border-radius: 2px;
  aspect-ratio: 1;
}
/* The horizontal lockup is roughly 6.3:1, so height drives the size. */
.bd-logo--nav { height: 2.5rem; }
.bd-logo--nav .bd-logo-ph { font-size: 1.5rem; }
.bd-logo--footer { height: 2.875rem; }
.bd-logo--banner { position: absolute; top: 0; right: 28px; height: 96px; }
.bd-logo--banner .bd-logo-ph { font-size: 2.75rem; }

/* Phones: logo, icons and menu button on ONE row. At 28px padding, 24px
   gaps and a 32px logo they came to about 412px, so on a 390px phone the
   menu button wrapped onto a second row of its own. */
@media (max-width: 600px) {
  .bd-topnav-inner { padding: 10px 16px; gap: 12px; }
  .bd-nav-icons { margin-right: 0; gap: 14px; }
}

@media (max-width: 1100px) {
  .bd-logo--nav { height: 32px; }
  .bd-logo--nav .bd-logo-ph { font-size: 1.25rem; }
  .bd-logo--banner { height: 64px; right: 20px; }
  .bd-logo--banner .bd-logo-ph { font-size: 1.75rem; }
}
@media (max-width: 600px) {
  .bd-logo--nav { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-social a,
  .bd-tab-list a,
  .bd-tab-list a::after,
  .bd-nav-toggle span { transition: none; }
}

/* =====================================================================
   Footer
   The "green block". Coded rather than built from Salient widget areas,
   so it deploys with the theme. Tokens resolve here because .bd-footer
   is one of the three selectors _tokens.css declares them on.
   ===================================================================== */
#footer-outer { background: var(--deep); }

.bd-footer {
  background: var(--deep);
  color: color-mix(in srgb, var(--ground) 76%, transparent);
  font-size: var(--text-sm);
}
.bd-footer-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-8);
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--space-8);
}
.bd-footer-brand { max-width: 320px; }
.bd-footer-line {
  margin: var(--space-4) 0 var(--space-5);
  line-height: 1.65;
  color: color-mix(in srgb, var(--ground) 66%, transparent);
  font-size: var(--text-sm);
}
.bd-footer-social { color: var(--ground); }

.bd-footer-col h3 {
  margin: 0 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.bd-footer-col ul { list-style: none; margin: 0; padding: 0; }
.bd-footer-col li { margin: 0 0 var(--space-2); }
.bd-footer-col li::marker { content: ''; }
.bd-footer-col a {
  color: inherit;
  transition: color 0.15s ease;
  border-bottom: 1px solid transparent;
}
.bd-footer-col a:hover { color: var(--ground); border-bottom-color: var(--gold); }

.bd-footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--ground) 14%, transparent);
}
.bd-footer-bottom-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--ground) 58%, transparent);
}
.bd-footer-bottom-inner p { margin: 0; }
/* The legal notice: its own full-width line under the copyright, a little
   brighter than the copyright line so it reads easily. */
.bd-footer-bottom-inner { row-gap: var(--space-2); }
.bd-footer-bottom-inner .bd-footer-disclosure {
  flex-basis: 100%; order: 2; max-width: 75rem;
  line-height: 1.6; color: color-mix(in srgb, var(--ground) 74%, transparent);
}

@media (max-width: 1000px) {
  .bd-footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .bd-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 620px) {
  .bd-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    padding: var(--space-12) 20px var(--space-8);
  }
  .bd-footer-bottom-inner { padding: var(--space-5) 20px; flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   Brands mega panel
   Hangs off the Brands nav item. Grouped by real vertical (Beauty,
   Skincare, Men's, Wellness) rather than by the two retailer names the
   legacy menu used. Content comes from data/brands.json at render time,
   so it never drifts from the Brands page.
   ===================================================================== */
.bd-tab-list .bd-has-mega { position: static; }
.bd-mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--ground-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(20,17,10,0.10);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s var(--ease-standard), transform 0.16s var(--ease-standard), visibility 0.16s;
  z-index: 40;
}
.bd-tab-list .bd-has-mega:hover .bd-mega,
.bd-tab-list .bd-has-mega:focus-within .bd-mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.bd-mega-inner {
  /* Compact, retailer-style: tight columns, small type, short rows. The
     panel should read as a list you scan, not a section of a page. */
  max-width: calc(var(--wrap-max) - 160px); margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(180px, 0.9fr);
  gap: var(--space-6);
}
.bd-mega-col h3 {
  margin: 0 0 var(--space-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-deep);
}
.bd-mega-col ul { list-style: none; margin: 0; padding: 0; }
.bd-mega-col li { margin: 0; }
.bd-mega-col li::marker { content: ''; }
.bd-mega-col a {
  display: block; padding: 3px 0;
  font-size: 0.82rem; line-height: 1.35; color: var(--ink);
  letter-spacing: 0; text-transform: none;
  border-bottom: 0;
}
.bd-mega-col a:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.bd-mega-more {
  display: inline-block; margin-top: 6px;
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.bd-mega-cta {
  background: var(--deep-tint);
  border-radius: 4px;
  padding: var(--space-4);
  align-self: start;
}
.bd-mega-cta h3 { border-bottom: 0; padding-bottom: 0; }
.bd-mega-cta p { margin: 0 0 var(--space-3); font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5; }
.bd-mega-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--deep); color: var(--ground);
  padding: 8px 14px; border-radius: 999px;
}
.bd-mega-btn:hover { background: var(--gold-deep); }
/* The generic .bd-tab-list a rules (nav tab colour, underline, white-space)
   outrank the panel's own classes; restate what the panel needs. */
.bd-tab-list .bd-mega a { white-space: normal; padding: 3px 0; }
.bd-tab-list .bd-mega a::after { display: none; }
.bd-tab-list .bd-mega .bd-mega-btn,
.bd-tab-list .bd-mega .bd-mega-btn:hover {
  color: var(--ground); padding: 8px 14px; white-space: nowrap;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.bd-tab-list .bd-mega .bd-mega-more { padding: 0; margin-top: 6px; }

/* The panel is a desktop affordance; on mobile the drawer lists Brands as a
   plain link through to the full directory. */
@media (max-width: 1100px) {
  .bd-mega { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-mega { transition: none; }
}