/* ==========================================================================
   AlphaBuds BC — Redesign 2026 : Core design system
   Loaded late; scoped by (added by JS as early as possible).
   ========================================================================== */

:root{
  /* Ink & surface */
  --os-ink:#101710;
  --os-ink-2:#2b352c;
  --os-muted:#5c6a60;
  --os-line:#e3e9e3;
  --os-line-2:#eef2ee;
  --os-surface:#ffffff;
  --os-surface-2:#f7f9f6;
  --os-surface-3:#eef3ec;

  /* Brand */
  --os-green:#17753c;
  --os-green-600:#125e30;
  --os-green-700:#0d4623;
  --os-green-050:#e9f4ec;
  --os-leaf:#3fa15f;

  /* Accents */
  --os-gold:#b8862b;
  --os-gold-050:#fbf3e2;
  --os-red:#b3261e;
  --os-red-050:#fdeceb;

  /* Shape */
  --os-r-sm:8px;
  --os-r:12px;
  --os-r-lg:18px;
  --os-r-pill:999px;

  /* Shadow */
  --os-sh-1:0 1px 2px rgba(16,23,16,.06), 0 1px 3px rgba(16,23,16,.05);
  --os-sh-2:0 4px 12px rgba(16,23,16,.07), 0 2px 4px rgba(16,23,16,.04);
  --os-sh-3:0 12px 32px rgba(16,23,16,.12), 0 4px 8px rgba(16,23,16,.05);

  /* Layout */
  --os-max:1360px;
  --os-gap:20px;

  /* Type */
  --os-font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* --------------------------------------------------------------------------
   Base typography — deliberately narrow selectors so we don't fight plugins
   -------------------------------------------------------------------------- */
body{
  font-family:var(--os-font);
  color:var(--os-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--os-font);
  /* `inherit`, not a hard ink value: several pages ship their own hero with a
     dark background and rely on the surrounding colour. Forcing near-black here
     made "Contact Us" invisible on its own navy band. body sets the base ink. */
  color:inherit;
  letter-spacing:-.02em;
  font-weight:750;
  line-height:1.15;
  margin-bottom:.5em;
}
h1{font-size:clamp(1.85rem,3.4vw,2.65rem);}
h2{font-size:clamp(1.45rem,2.5vw,2.05rem);}
h3{font-size:clamp(1.15rem,1.8vw,1.45rem);}
p{line-height:1.65;}
a{color:var(--os-green);}
a:hover{color:var(--os-green-600);}

/* Kill the theme's blanket uppercase on headings — it reads as shouty */
.uppercase,
h3.uppercase,
h5.uppercase{
  text-transform:none;
  letter-spacing:-.02em;
}

/* Focus visibility — accessibility baseline the old site lacked */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--os-leaf);
  outline-offset:2px;
  border-radius:4px;
}

/* Screen-reader-only helper */
.os-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.os-skip{
  position:absolute;left:-9999px;top:0;z-index:100000;
  background:var(--os-green);color:#fff;padding:12px 20px;border-radius:0 0 var(--os-r) 0;
  font-weight:700;text-decoration:none;
}
.os-skip:focus{left:0;}

/* --------------------------------------------------------------------------
   Shared shell
   -------------------------------------------------------------------------- */
.os-wrap{max-width:var(--os-max);margin:0 auto;padding:0 20px;}
.os-section{padding:clamp(30px,4.2vw,56px) 0;}
.os-section--tint{background:var(--os-surface-2);}

.os-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:22px;
}
.os-head__t{margin:0;font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:750;letter-spacing:-.025em;}
.os-head__s{margin:6px 0 0;color:var(--os-muted);font-size:.94rem;line-height:1.5;}
.os-head__link{
  flex:none;font-weight:650;font-size:.9rem;color:var(--os-green);
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  padding:8px 4px;white-space:nowrap;
}
.os-head__link:hover{gap:10px;}
.os-head__link svg{transition:transform .18s ease;}
.os-head__link:hover svg{transform:translateX(3px);}

/* Buttons ------------------------------------------------------------------ */
.os-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--os-font);font-weight:700;font-size:.95rem;line-height:1;
  padding:14px 24px;border-radius:var(--os-r-pill);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .16s ease,color .16s ease,
  border-color .16s ease,box-shadow .16s ease,transform .12s ease;
  text-transform:none;letter-spacing:0;min-height:46px;
}
.os-btn:active{transform:translateY(1px);}
.os-btn--primary{background:var(--os-green);color:#fff;box-shadow:var(--os-sh-1);}
.os-btn--primary:hover{background:var(--os-green-600);color:#fff;box-shadow:var(--os-sh-2);}
.os-btn--ghost{background:transparent;color:var(--os-ink);border-color:var(--os-line);}
.os-btn--ghost:hover{background:var(--os-surface-2);border-color:var(--os-ink);color:var(--os-ink);}
.os-btn--light{background:#fff;color:var(--os-ink);}
.os-btn--light:hover{background:#f0f4ef;color:var(--os-ink);}
.os-btn--onDark{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(6px);}
.os-btn--onDark:hover{background:rgba(255,255,255,.24);color:#fff;}
.os-btn--sm{padding:10px 16px;font-size:.86rem;min-height:38px;}
.os-btn--block{display:flex;width:100%;}

/* Pills / chips ------------------------------------------------------------ */
.os-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:var(--os-r-pill);
  background:#fff;border:1.5px solid var(--os-line);
  font-size:.87rem;font-weight:650;color:var(--os-ink-2);
  text-decoration:none;white-space:nowrap;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.os-chip:hover{border-color:var(--os-green);color:var(--os-green);background:var(--os-green-050);}
.os-chip[aria-current="true"],.os-chip.is-on{
  background:var(--os-green);border-color:var(--os-green);color:#fff;
}
.os-chip__n{font-size:.78rem;opacity:.7;font-weight:600;}

/* Scroll rail (horizontal chip strips) ------------------------------------- */
.os-rail{
  display:flex;gap:9px;overflow-x:auto;padding:2px 0 8px;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.os-rail::-webkit-scrollbar{display:none;}
.os-rail>*{scroll-snap-align:start;flex:none;}

/* Badges ------------------------------------------------------------------- */
.os-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.7rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;line-height:1;
}
.os-badge--sale{background:var(--os-red);color:#fff;}
.os-badge--new{background:var(--os-green);color:#fff;}
.os-badge--low{background:var(--os-gold-050);color:#7a5a12;border:1px solid #e8d3a4;}
.os-badge--out{background:#eceeec;color:#5c6a60;}

/* ==========================================================================
   Specificity hardening.
   `a{color:var(--os-green)}` is (0,1,1) and was beating single-class
   component rules, which turned white-on-dark link text green. Re-assert every
   anchor-based component at equal-or-higher specificity.
   ========================================================================== */
a.os-hcard,
a.os-hcard .os-hcard__t{color:#fff;}
a.os-hcard .os-hcard__s{color:rgba(255,255,255,.72);}
a.os-hcard:hover{color:#fff;}

a.os-cat,
a.os-cat .os-cat__t{color:#fff;}
a.os-cat .os-cat__n{color:rgba(255,255,255,.8);}

a.os-nav__link{color:#dfe8df;}
.os-nav__item:hover > a.os-nav__link,
a.os-nav__link:hover{color:#fff;}
a.os-nav__link--sale{color:#ffd9a6;}

a.os-util__item{color:var(--os-muted);}
a.os-util__item:hover{color:var(--os-green);}

a.os-act{color:var(--os-ink-2);}
a.os-act:hover{color:var(--os-green);}

a.os-chip{color:var(--os-ink-2);}
a.os-chip:hover{color:var(--os-green);}
a.os-chip.is-on,
a.os-chip[aria-current="true"]{color:#fff;}

a.os-mega__link{color:var(--os-ink-2);}
a.os-mega__link:hover{color:var(--os-green);}

a.os-tab{color:var(--os-muted);}
a.os-tab.is-on{color:var(--os-green);}

.os-dnav a{color:var(--os-ink);}
.os-dnav a:hover{color:var(--os-green);}

a.os-pc,
a.os-pc .os-pc__t{color:var(--os-ink);}
a.os-pc:hover .os-pc__t{color:var(--os-green);}
a.os-pc .os-pc__eyebrow,
a.os-pc .os-pc__rate{color:var(--os-muted);}
a.os-pc .os-pc__price{color:var(--os-ink);}
a.os-pc .os-pc__cta{color:var(--os-green-700);}
a.os-pc:hover .os-pc__cta{color:#fff;}

a.os-btn--primary,
a.os-btn--primary:hover,
a.os-btn--onDark,
a.os-btn--onDark:hover{color:#fff;}
a.os-btn--ghost,
a.os-btn--light,
a.os-btn--ghost:hover,
a.os-btn--light:hover{color:var(--os-ink);}

a.os-hero__pt,.os-hero__pt{color:rgba(255,255,255,.9);}
.os-trust__t,.os-trust__s{color:inherit;}

/* A class rule setting `display` outranks the UA `[hidden]` rule, which left
   every announcement slide visible at once. */
[hidden]{display:none!important;}

/* Icon sizing.
   Flatsome's flex rules were shrinking inline SVGs to ~7px wide (the burger
   rendered as a hairline). Icons must never be a flex shrink target, and the
   width/height attributes must be honoured. */
.os-iconbtn svg,
.os-act svg,
.os-tab svg,
.os-nav__link svg,
.os-util__item svg,
.os-hcard svg,
.os-hcard__ico svg,
.os-trust__i svg,
.os-btn svg,
.os-chip svg,
.os-crumbs svg,
.os-head__link svg,
.os-rnav svg,
.os-ann__slide svg,
.os-search__btn svg,
.os-strain__ico svg,
.os-cathero__count svg,
.os-drawer svg,
.os-mega svg{
  flex:0 0 auto;
  max-width:none;
  min-width:0;
}
.os-iconbtn svg{width:24px;height:24px;}
.os-tab svg{width:21px;height:21px;}
.os-act svg{width:21px;height:21px;}