/*
Theme Name: Hunting Store
Theme URI: https://highbasin.com
Description: Custom theme for High Basin — premium, American-made hunting gear. PHP templates, vanilla CSS with design tokens, vanilla JS, WooCommerce.
Author: High Basin
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: hunting-store
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  /* palette */
  --hb-charcoal:#1E1C18; --hb-earth:#302C24; --hb-antler:#C4965A;
  --hb-navy:#3D6E82; --hb-slate:#6699AA; --hb-birch:#EDE4D0;
  /* functional */
  --hb-bg:var(--hb-charcoal); --hb-surface:var(--hb-earth); --hb-text:var(--hb-birch);
  --hb-text-muted:color-mix(in srgb,var(--hb-birch) 70%,transparent);
  --hb-accent:var(--hb-antler); --hb-accent-2:var(--hb-navy); --hb-link:var(--hb-slate);
  --hb-border:color-mix(in srgb,var(--hb-birch) 12%,transparent); --hb-focus:var(--hb-slate);
  /* type */
  --hb-font-display:"Bebas Neue",sans-serif;
  --hb-font-body:"Inter",system-ui,-apple-system,sans-serif;
  --hb-fs-hero:clamp(2.75rem,6vw,5rem); --hb-fs-h1:clamp(2rem,4vw,3.25rem);
  --hb-fs-h2:clamp(1.5rem,3vw,2.25rem); --hb-fs-h3:clamp(1.25rem,2vw,1.5rem);
  --hb-fs-body:1rem; --hb-fs-sm:.875rem; --hb-fs-xs:.75rem;
  --hb-lh-tight:1.05; --hb-lh-snug:1.3; --hb-lh-body:1.6; --hb-ls-display:.02em;
  /* space / radius / elevation / layout */
  --hb-space-1:.25rem; --hb-space-2:.5rem; --hb-space-3:.75rem; --hb-space-4:1rem;
  --hb-space-6:1.5rem; --hb-space-8:2rem; --hb-space-12:3rem; --hb-space-16:4rem; --hb-space-24:6rem;
  --hb-radius-sm:2px; --hb-radius-md:4px; --hb-radius-lg:8px;
  --hb-shadow-1:0 1px 2px rgba(0,0,0,.4); --hb-shadow-2:0 4px 16px rgba(0,0,0,.45);
  --hb-container:1280px; --hb-gutter:clamp(1rem,4vw,2rem); --hb-header-h:72px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--hb-bg); color:var(--hb-text);
  font-family:var(--hb-font-body); font-size:var(--hb-fs-body); line-height:var(--hb-lh-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; }
h1,h2,h3,.hb-display{ font-family:var(--hb-font-display); line-height:var(--hb-lh-tight); letter-spacing:var(--hb-ls-display); font-weight:400; }
a{ color:var(--hb-link); text-decoration:none; }
a:hover{ text-decoration:underline; }
:where(a,button,input,select,textarea):focus-visible{ outline:2px solid var(--hb-focus); outline-offset:2px; }
.hb-container{ max-width:var(--hb-container); margin-inline:auto; padding-inline:var(--hb-gutter); }
.hb-section{ padding-block:var(--hb-space-24); }
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.hb-eyebrow{ display:block; margin-bottom:var(--hb-space-3); font-size:var(--hb-fs-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--hb-accent); }
.hb-eyebrow--center{ text-align:center; }

/* Buttons */
.hb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--hb-space-2);
  padding:var(--hb-space-3) var(--hb-space-8);
  font-family:var(--hb-font-display); font-size:1.125rem; letter-spacing:var(--hb-ls-display);
  border:1px solid transparent; border-radius:var(--hb-radius-md); cursor:pointer; text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.hb-btn:hover{ text-decoration:none; }
.hb-btn--primary{ background:var(--hb-accent); color:var(--hb-charcoal); }
.hb-btn--primary:hover{ background:color-mix(in srgb,var(--hb-antler) 88%,white); }
.hb-btn--ghost{ background:transparent; color:var(--hb-text); border-color:var(--hb-border); }
.hb-btn--ghost:hover{ border-color:var(--hb-accent); color:var(--hb-accent); }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.hs-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--hb-charcoal) 92%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--hb-border);
}
.hs-header__inner{ display:flex; align-items:center; gap:var(--hb-space-8); height:var(--hb-header-h); }
.hs-logo{ font-family:var(--hb-font-display); font-size:1.75rem; letter-spacing:var(--hb-ls-display); color:var(--hb-text); text-decoration:none; }
.hs-nav{ margin-inline:auto; }
.hs-nav__list{ display:flex; gap:var(--hb-space-8); list-style:none; margin:0; padding:0; }
.hs-nav__list a{ color:var(--hb-text); font-size:var(--hb-fs-sm); letter-spacing:.04em; text-transform:uppercase; text-decoration:none; }
.hs-nav__list a:hover{ color:var(--hb-accent); }
.hs-header__actions{ display:flex; align-items:center; gap:var(--hb-space-4); }
.hs-icon-btn{ position:relative; display:inline-flex; color:var(--hb-text); }
.hs-icon-btn:hover{ color:var(--hb-accent); }
.hs-icon-btn svg{ width:22px; height:22px; }
.hs-cart-count{
  position:absolute; top:-8px; right:-10px; min-width:18px; height:18px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--hb-font-body); font-size:11px; line-height:1;
  background:var(--hb-accent); color:var(--hb-charcoal); border-radius:9px;
}
.hs-nav-toggle{ display:none; flex-direction:column; gap:5px; width:40px; height:40px; padding:9px; background:transparent; border:0; cursor:pointer; margin-left:auto; }
.hs-nav-toggle span{ display:block; height:2px; background:var(--hb-text); border-radius:2px; }

@media (max-width:900px){
  .hs-nav-toggle{ display:flex; }
  .hs-nav{ position:absolute; left:0; right:0; top:var(--hb-header-h); margin:0; background:var(--hb-charcoal); border-bottom:1px solid var(--hb-border); max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .hs-nav.is-open{ max-height:70vh; }
  .hs-nav__list{ flex-direction:column; gap:0; padding:var(--hb-space-4) var(--hb-gutter); }
  .hs-nav__list li{ padding-block:var(--hb-space-3); border-bottom:1px solid var(--hb-border); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hs-hero{
  position:relative; padding-block:clamp(4rem,12vw,9rem);
  background:linear-gradient(180deg,color-mix(in srgb,var(--hb-charcoal) 60%,transparent),var(--hb-charcoal)),
             radial-gradient(120% 120% at 70% 0%,color-mix(in srgb,var(--hb-earth) 80%,transparent),var(--hb-charcoal));
}
.hs-hero__inner{ max-width:900px; }
.hs-hero__title{ margin:var(--hb-space-3) 0 var(--hb-space-4); font-size:var(--hb-fs-hero); color:var(--hb-text); }
.hs-hero__sub{ max-width:560px; margin:0 0 var(--hb-space-8); color:var(--hb-text-muted); font-size:1.0625rem; }
.hs-hero__cta{ display:flex; flex-wrap:wrap; gap:var(--hb-space-4); }

/* ==========================================================================
   Why High Basin
   ========================================================================== */
.hb-why__head{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hb-space-16); align-items:end; margin-bottom:var(--hb-space-12); }
.hb-why__title{ margin:0; font-size:var(--hb-fs-h1); color:var(--hb-text); }
.hb-why__intro{ margin:0; color:var(--hb-text-muted); }
.hb-values{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hb-border); }
.hb-value{ padding:var(--hb-space-8) var(--hb-space-6) var(--hb-space-8) 0; border-right:1px solid var(--hb-border); }
.hb-value:last-child{ border-right:0; }
.hb-value__icon{ display:block; color:var(--hb-accent); margin-bottom:var(--hb-space-4); }
.hb-value__icon svg{ width:24px; height:24px; }
.hb-value__title{ margin:0 0 var(--hb-space-2); font-family:var(--hb-font-body); font-weight:600; font-size:var(--hb-fs-body); color:var(--hb-text); }
.hb-value__text{ margin:0; color:var(--hb-text-muted); font-size:var(--hb-fs-sm); }
@media (max-width:900px){
  .hb-why__head{ grid-template-columns:1fr; gap:var(--hb-space-6); }
  .hb-values{ grid-template-columns:repeat(2,1fr); }
  .hb-value{ padding-right:var(--hb-space-6); border-right:0; }
  .hb-value:nth-child(odd){ border-right:1px solid var(--hb-border); }
}
@media (max-width:560px){
  .hb-values{ grid-template-columns:1fr; }
  .hb-value{ border-right:0; border-bottom:1px solid var(--hb-border); padding-right:0; }
}

/* ==========================================================================
   Brands row
   ========================================================================== */
.hs-brands{ padding-block:var(--hb-space-16); border-block:1px solid var(--hb-border); }
.hs-brands__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--hb-space-12); list-style:none; margin:var(--hb-space-6) 0 0; padding:0; }
.hs-brands__row a{ font-family:var(--hb-font-display); font-size:1.5rem; letter-spacing:var(--hb-ls-display); color:var(--hb-text-muted); text-decoration:none; }
.hs-brands__row a:hover{ color:var(--hb-accent); }

/* ==========================================================================
   Featured products
   ========================================================================== */
.hs-featured__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hb-space-8); margin-bottom:var(--hb-space-12); }
.hs-featured__title{ margin:0; font-size:var(--hb-fs-h1); color:var(--hb-text); }

/* product grid (home + shop) */
ul.products,
.woocommerce ul.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--hb-space-8); list-style:none; margin:0; padding:0; }
ul.products li.product,
.woocommerce ul.products li.product{ margin:0; width:auto; float:none; }
@media (max-width:900px){ ul.products,.woocommerce ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ ul.products,.woocommerce ul.products{ grid-template-columns:1fr; } }

/* product card */
.hb-card{ display:flex; flex-direction:column; gap:var(--hb-space-3); height:100%; padding:var(--hb-space-4); background:var(--hb-surface); border:1px solid var(--hb-border); border-radius:var(--hb-radius-md); }
.hb-card__link{ display:flex; flex-direction:column; gap:var(--hb-space-3); text-decoration:none; color:inherit; }
.hb-card__link:hover{ text-decoration:none; }
.hb-card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--hb-charcoal); border-radius:var(--hb-radius-sm); }
.hb-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.hb-card:hover .hb-card__media img{ transform:scale(1.04); }
.hb-card__title{ margin:0; font-family:var(--hb-font-body); font-weight:600; font-size:var(--hb-fs-body); line-height:var(--hb-lh-snug); color:var(--hb-text); }
.hb-card__rating{ display:flex; align-items:center; gap:var(--hb-space-2); font-size:var(--hb-fs-sm); }
.hb-card__reviews{ color:var(--hb-text-muted); }
.hb-card__price{ font-family:var(--hb-font-display); letter-spacing:var(--hb-ls-display); font-size:var(--hb-fs-h3); color:var(--hb-accent); }
.hb-badge{ position:absolute; top:var(--hb-space-2); left:var(--hb-space-2); padding:2px 8px; font-size:var(--hb-fs-xs); text-transform:uppercase; letter-spacing:.06em; background:var(--hb-charcoal); color:var(--hb-birch); border-radius:var(--hb-radius-sm); }
.hb-badge--sale{ background:var(--hb-accent); color:var(--hb-charcoal); }
.hb-badge--out{ background:var(--hb-earth); color:var(--hb-text-muted); }
.hs-featured__more{ margin-top:var(--hb-space-12); text-align:center; }

/* ==========================================================================
   Story
   ========================================================================== */
.hs-story__inner{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hb-space-16); align-items:center; }
.hs-story__title{ margin:0 0 var(--hb-space-4); font-size:var(--hb-fs-h1); color:var(--hb-text); }
.hs-story__content p{ color:var(--hb-text-muted); }
.hs-story__list{ list-style:none; margin:var(--hb-space-6) 0 0; padding:0; }
.hs-story__list li{ position:relative; padding-left:var(--hb-space-6); margin-bottom:var(--hb-space-3); color:var(--hb-text); }
.hs-story__list li::before{ content:"—"; position:absolute; left:0; color:var(--hb-accent); }
.hs-story__media{ aspect-ratio:5/4; background:var(--hb-surface); border:1px solid var(--hb-border); border-radius:var(--hb-radius-md); }
@media (max-width:900px){ .hs-story__inner{ grid-template-columns:1fr; gap:var(--hb-space-8); } }

/* ==========================================================================
   Quiz CTA
   ========================================================================== */
.hs-quiz{ padding-block:var(--hb-space-24); background:linear-gradient(180deg,var(--hb-earth),var(--hb-charcoal)); text-align:center; }
.hs-quiz__inner{ max-width:720px; }
.hs-quiz__title{ margin:var(--hb-space-3) 0 var(--hb-space-4); font-size:var(--hb-fs-h1); color:var(--hb-text); }
.hs-quiz__inner p{ margin:0 auto var(--hb-space-8); max-width:520px; color:var(--hb-text-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.hs-footer{ background:var(--hb-earth); border-top:1px solid var(--hb-border); }
.hs-footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--hb-space-8); padding-block:var(--hb-space-16); }
.hs-logo--footer{ font-size:1.75rem; margin-bottom:var(--hb-space-3); }
.hs-footer__brand p{ color:var(--hb-text-muted); max-width:320px; }
.hs-footer h4{ margin:0 0 var(--hb-space-4); font-family:var(--hb-font-body); font-size:var(--hb-fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--hb-text-muted); }
.hs-footer ul{ list-style:none; margin:0; padding:0; }
.hs-footer ul li{ margin-bottom:var(--hb-space-2); }
.hs-footer ul a{ color:var(--hb-text); font-size:var(--hb-fs-sm); }
.hs-footer ul a:hover{ color:var(--hb-accent); }
.hs-optin{ margin-top:var(--hb-space-6); }
.hs-optin__row{ display:flex; gap:var(--hb-space-2); max-width:360px; }
.hs-optin input{ flex:1; padding:var(--hb-space-3); background:var(--hb-charcoal); border:1px solid var(--hb-border); border-radius:var(--hb-radius-sm); color:var(--hb-text); }
.hs-footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--hb-space-4); padding-block:var(--hb-space-6); border-top:1px solid var(--hb-border); color:var(--hb-text-muted); font-size:var(--hb-fs-sm); }
@media (max-width:900px){ .hs-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .hs-footer__grid{ grid-template-columns:1fr; } }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* ==========================================================================
   Brand spotlight
   ========================================================================== */
.hs-brandfeature__grid{ display:grid; grid-template-columns:1fr 1fr; margin-top:var(--hb-space-6); border:1px solid var(--hb-border); border-radius:var(--hb-radius-md); overflow:hidden; }
.hs-brandfeature__media{ position:relative; min-height:420px; background:var(--hb-charcoal); }
.hs-brandfeature__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.hs-brandfeature__wordmark{ position:absolute; left:var(--hb-space-8); bottom:var(--hb-space-6); font-family:var(--hb-font-display); font-size:clamp(2rem,4vw,3.25rem); letter-spacing:var(--hb-ls-display); color:color-mix(in srgb,var(--hb-birch) 85%,transparent); }
.hs-brandfeature__body{ padding:clamp(1.5rem,4vw,3.5rem); display:flex; flex-direction:column; justify-content:center; background:var(--hb-surface); }
.hs-brandfeature__title{ margin:0 0 var(--hb-space-4); font-size:var(--hb-fs-h1); color:var(--hb-text); }
.hs-brandfeature__text{ margin:0 0 var(--hb-space-8); color:var(--hb-text-muted); }
.hs-brandfeature__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--hb-space-4); }
@media (max-width:900px){ .hs-brandfeature__grid{ grid-template-columns:1fr; } .hs-brandfeature__media{ min-height:280px; } }

/* ==========================================================================
   Staff pick / product spotlight
   ========================================================================== */
.hs-staffpick__grid{ display:grid; grid-template-columns:minmax(0,460px) 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; margin-top:var(--hb-space-6); }
.hs-staffpick__card{ background:var(--hb-surface); border:1px solid var(--hb-border); border-radius:var(--hb-radius-md); overflow:hidden; }
.hs-staffpick__media{ position:relative; aspect-ratio:1/1; background:var(--hb-charcoal); }
.hs-staffpick__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hs-staffpick__info{ padding:var(--hb-space-6); }
.hs-staffpick__cat{ display:block; margin-bottom:var(--hb-space-2); font-size:var(--hb-fs-sm); color:var(--hb-text-muted); }
.hs-staffpick__cat a{ color:var(--hb-text-muted); }
.hs-staffpick__name{ margin:0 0 var(--hb-space-2); font-family:var(--hb-font-body); font-weight:600; font-size:var(--hb-fs-h3); color:var(--hb-text); }
.hs-staffpick__price{ font-family:var(--hb-font-display); letter-spacing:var(--hb-ls-display); font-size:1.75rem; color:var(--hb-accent); margin-bottom:var(--hb-space-4); }
.hs-staffpick__actions .button{ width:100%; text-align:center; }
.hs-staffpick__headline{ margin:0 0 var(--hb-space-4); font-size:var(--hb-fs-h1); color:var(--hb-text); }
.hs-staffpick__text{ color:var(--hb-text-muted); }
.hs-staffpick__text p{ margin:0 0 var(--hb-space-4); }
.hs-staffpick__link{ display:inline-block; margin-top:var(--hb-space-4); color:var(--hb-link); font-size:var(--hb-fs-sm); }
@media (max-width:900px){ .hs-staffpick__grid{ grid-template-columns:1fr; gap:var(--hb-space-8); } }