/*
 * Origin Precision commerce foundation.
 * Keeps WooCommerce on the same public shell as the bespoke BV Coco pages
 * without loading the retired general-template stylesheet.
 */
:root {
  --forest: #173d31;
  --forest-deep: #0f2f26;
  --forest-soft: #275447;
  --ivory: #f8f5ec;
  --mineral: #e9e2d5;
  --white: #fffdf8;
  --gold: #b8954b;
  --gold-text: #806026;
  --ink: #222222;
  --muted: #666159;
  --line: #d6ccbc;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, "Helvetica Neue", sans-serif;
  --shell: min(1280px, calc(100vw - 72px));
  --pad: clamp(82px, 8vw, 132px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding: var(--pad) 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.eyebrow { display: block; margin: 0 0 22px; color: var(--gold-text); font-size: 10px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--forest); font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(64px,7vw,108px); line-height: .89; letter-spacing: -.055em; margin-bottom: 34px; }
h2 { font-size: clamp(48px,5.1vw,76px); line-height: .96; letter-spacing: -.045em; margin-bottom: 28px; }
h3 { font-size: clamp(28px,3vw,46px); line-height: 1; letter-spacing: -.035em; }
p { color: var(--muted); font-size: 16px; line-height: 1.68; }
.lead { font-size: clamp(18px,1.5vw,21px); line-height: 1.55; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid var(--forest); border-radius: 0; background: transparent; color: var(--forest); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.button--solid { background: var(--forest); color: var(--ivory); }
.button--gold { border-color: var(--gold); background: var(--gold); color: var(--forest-deep); }
.button--gold:hover { background: #c6a35d; }
.button--light { border-color: rgba(255,255,255,.44); color: var(--ivory); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; padding: 7px 0 5px; border-bottom: 1px solid var(--gold); color: var(--forest); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }

.site-header { position: relative; z-index: 100; height: 86px; border-bottom: 1px solid rgba(23,61,49,.16); background: rgba(248,245,236,.96); }
.header-inner { display: flex; height: 100%; align-items: center; gap: 28px; }
.brand { width: 194px; line-height: 0; }
.brand img { width: 100%; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a { position: relative; color: var(--forest); font-size: 11px; text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--gold-text); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); background: transparent; color: var(--forest); }
.menu-toggle span { display: block; width: 20px; height: 1px; margin: 5px auto; background: var(--forest); transition: transform .2s, opacity .2s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.site-footer { padding: 64px 0 28px; border-top: 1px solid rgba(255,255,255,.12); background: var(--forest-deep); color: #cbd5d0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .7fr .7fr; gap: 70px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-brand img { width: 220px; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 430px; margin-top: 20px; color: #9eafa7; font-size: 12px; }
.footer-col b { display: block; margin-bottom: 18px; color: var(--gold); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.footer-col a { display: flex; min-height: 40px; align-items: center; margin: 0; color: #d5ded9; font-size: 12px; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; color: #84978e; font-size: 9px; letter-spacing: .08em; line-height: 1.55; text-transform: uppercase; }
.footer-bottom a { color: inherit; }

@media (max-width: 1120px) {
  .nav .site-menu { gap: 20px; }
}

@media (max-width: 980px) {
  :root { --shell: min(100% - 42px,820px); }
  .nav { display: none; }
  .nav.is-open { position: fixed; top: 86px; right: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; padding: 18px 24px 30px; border-top: 1px solid var(--line); background: var(--ivory); box-shadow: 0 24px 44px rgba(15,47,38,.14); }
  .nav.is-open .site-menu { width: 100%; }
  .nav.is-open a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .menu-toggle { display: block; margin-left: auto; }
  .header-cta { display: none !important; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 620px) {
  :root { --shell: calc(100% - 30px); --pad: 58px; }
  .site-header { height: 76px; }
  .nav.is-open { top: 76px; }
  .brand { width: 166px; }
  h1 { font-size: 48px; line-height: .96; }
  h2 { font-size: 40px; line-height: .98; }
  .button { min-height: 50px; font-size: 11px; }
  .site-footer { padding-top: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}