/* Hillstone Shop theme — "Bench Black & Signal Green": carbon black, sage paper, signal green.
   Loads after style/responsive/appearance; overrides tokens + surfaces only. */
:root{
  --hs-black:#0e110f;--hs-ink:#0e110f;--hs-ink-2:#1c231f;--hs-slate:#3f4a43;--hs-mist:#a9b8ad;
  --hs-paper:#f1f4f0;--hs-paper-2:#e3e9e3;--hs-card:#fafcf9;--hs-line:#cfd8d1;--hs-bone:#e9efe9;
  --hs-green:#1f9d55;--hs-green-hi:#3ccf7a;--hs-green-ink:#146b39;--hs-green-soft:#ddf1e4;
  --hs-signal:#1f9d55;--hs-signal-2:#146b39;--hs-signal-soft:#ddf1e4;--hs-ochre:#b7791f;
  --forest:var(--hs-ink);--forest-2:var(--hs-ink-2);--moss:var(--hs-green);--charcoal:var(--hs-ink);--ink:#1a201c;
  --warm:var(--hs-paper);--paper:var(--hs-paper-2);--beige:#dfe7e0;--sand:#b9c6bc;--line:var(--hs-line);--gray:#e2e7e2;--mute:#4d5951;
  --rust:#b3261e;--ok:#1f9d55;--warn:var(--hs-ochre);
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;--body:"Archivo",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:3px;--shadow:0 1px 2px rgba(14,17,15,.08),0 14px 30px -16px rgba(14,17,15,.4);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* Enforce black/green chrome even when merchant colors are stored (html:root outranks the inline :root) */
html:root{--hdr-bg:#f1f4f0;--hdr-fg:#0e110f;--ftr-bg:#0e110f;--ftr-fg:#b4c2b8}
body{background:var(--hs-paper);color:var(--ink)}
::selection{background:var(--hs-signal);color:#fff}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.025em}
h1{text-wrap:balance}
.eyebrow{color:var(--hs-signal);font-weight:500}
.eyebrow::before{height:3px;width:16px}
:focus-visible{outline:2px solid var(--hs-signal);outline-offset:3px;border-radius:2px}
.skip:focus{background:var(--hs-ink);color:var(--hs-paper)}

/* Logo sizing (300x56 wordmark) */
.logo.logo-only{display:inline-flex;align-items:center;width:260px;max-width:100%;flex:none;text-decoration:none;transition:opacity .2s}
.logo.logo-only .logo-img{width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:300/56;object-fit:contain}
.logo.logo-only:hover{opacity:.85}
.drawer-head .logo.logo-only{width:180px}
.footer .logo.logo-only{width:240px}
.admin-side .logo.logo-only{width:160px}
.admin-side .logo-img{max-width:none}
@media(max-width:600px){.logo.logo-only{width:160px}.logo.logo-only .logo-img{max-width:none;max-height:none}}

/* Buttons */
.btn{--bg:var(--hs-ink);--fg:var(--hs-paper);font-weight:700;letter-spacing:.01em;position:relative;transition:transform .18s var(--ease),background-color .18s,box-shadow .18s,border-color .18s,color .18s}
.btn:hover{--bg:var(--hs-ink-2);box-shadow:inset 0 -3px 0 var(--hs-signal),0 10px 20px -12px rgba(14,17,15,.6)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-ghost{--bg:transparent;--fg:var(--hs-ink);border-color:var(--hs-line)}
.btn-ghost:hover{--bg:var(--hs-card);border-color:var(--hs-ink);box-shadow:none}
.btn-light{--bg:var(--hs-paper);--fg:var(--hs-ink)}
.btn-light:hover{--bg:#ffffff}
.btn-dark{--bg:var(--hs-ink);--fg:var(--hs-paper)}
.btn-danger{--bg:#b3261e;--fg:#fff}
.btn-danger:hover{--bg:#8f1e18;box-shadow:0 10px 20px -12px rgba(179,38,30,.6)}
.btn:focus-visible{outline-offset:3px}
.link{color:var(--hs-ink);text-decoration-color:var(--hs-signal);text-underline-offset:3px;text-decoration-thickness:2px}
.link:hover{color:var(--hs-signal-2)}

/* Chrome */
.announce{background:var(--hs-ink);color:var(--hs-paper-2);border-bottom:3px solid var(--hs-signal)}
.header{background:rgba(241,244,240,.96);border-bottom:1px solid var(--hs-line)}
.search input{background:var(--hs-card);border-color:var(--hs-line);transition:border-color .18s,box-shadow .18s}
.search input:focus{border-color:var(--hs-ink);box-shadow:0 0 0 3px rgba(31,157,85,.22)}
.ac{border-color:var(--hs-line);box-shadow:var(--shadow)}
.ac a:hover,.ac a.active{background:var(--hs-signal-soft)}
.tool{transition:color .18s,background-color .18s}
.tool:hover{color:var(--hs-signal-2)}
.badge{background:var(--hs-signal);color:#fff;font-family:var(--mono)}
.nav{background:var(--hs-paper);border-top:1px solid var(--hs-line)}
.nav a{font-weight:600}
.nav a::after{background:var(--hs-signal);height:3px}
.nav a:hover,.nav a.on{color:var(--hs-ink)}
.drawer-panel{background:var(--hs-paper)}
.drawer-panel a{transition:color .15s,padding-left .2s var(--ease)}
.drawer-panel a:hover{color:var(--hs-signal-2);padding-left:6px}
.flash{border-left:4px solid var(--ok)}
.flash.error,.flash.danger{border-left-color:var(--hs-signal)}
.flash.warning{border-left-color:var(--hs-ochre)}

/* Hero / sections */
.hero::before{background:linear-gradient(10deg,rgba(10,13,11,.92) 15%,rgba(10,13,11,.35) 70%,rgba(10,13,11,.15))}
.hero h1 em{font-style:normal;color:#3ccf7a}
.band,.dark{background:var(--hs-ink);color:var(--hs-paper-2)}
.dark h1,.dark h2,.dark h3,.band h2{color:var(--hs-paper)}
.cat{border-color:var(--hs-line);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.cat:hover{border-color:var(--hs-ink);box-shadow:var(--shadow)}
.cat .num{font-family:var(--mono);color:var(--hs-signal)}

/* Product cards */
.card{background:var(--hs-card);border-color:var(--hs-line);border-radius:6px}
.card:hover{border-color:var(--hs-ink);box-shadow:0 2px 0 var(--hs-ink),0 18px 32px -20px rgba(14,17,15,.5)}
.card h3 a{text-decoration:none;background:linear-gradient(var(--hs-signal),var(--hs-signal)) 0 100%/0 2px no-repeat;transition:background-size .25s var(--ease)}
.card h3 a:hover{background-size:100% 2px}
.brand{font-family:var(--mono);color:var(--hs-slate);letter-spacing:.08em}
.tag{background:var(--hs-ink);color:var(--hs-paper);border-radius:2px;font-family:var(--mono)}
.tag.sale{background:var(--hs-signal);color:#fff}
.price{color:var(--hs-ink);font-weight:800}
.off{color:var(--hs-signal-2)}
.stock::before{background:var(--ok)}
.stock.low::before{background:var(--hs-ochre)}
.cmp-toggle{transition:background-color .18s,color .18s,border-color .18s}
.cmp-toggle:hover{border-color:var(--hs-ink)}
.cmp-toggle.on{background:var(--hs-ink);color:var(--hs-paper);border-color:var(--hs-ink)}
.stars{color:var(--hs-ochre)}
.cmp-demo .win{color:var(--hs-signal-2)}

/* Shop / forms */
.chip{border-color:var(--hs-line);transition:border-color .15s,background-color .15s}
.chip:hover{border-color:var(--hs-ink);background:var(--hs-card)}
.filters input[type=radio],.filters input[type=checkbox],.check input{accent-color:var(--hs-signal)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=search],select,textarea{background:var(--hs-card);border-color:var(--hs-line);border-radius:4px;transition:border-color .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{border-color:var(--hs-ink);box-shadow:0 0 0 3px rgba(31,157,85,.22);outline:none}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--hs-signal)}
.err{color:var(--hs-signal-2)}
.panel{background:var(--hs-card);border-color:var(--hs-line)}
.note{background:var(--hs-paper-2);border-left:3px solid var(--hs-ink)}
.alert{background:var(--hs-signal-soft);border-left:3px solid var(--hs-signal);color:#0f4527}

/* PDP / cart / checkout */
.thumbs button.on{border-color:var(--hs-signal)}
.tabs button.on{border-color:var(--hs-signal);color:var(--hs-ink)}
.qty button:hover{background:var(--hs-paper-2)}
.spec-table th{font-family:var(--mono);color:var(--hs-slate)}
.ship-meter i{background:var(--hs-signal)}
.ship-opt:has(input:checked){border-color:var(--hs-ink);box-shadow:inset 3px 0 0 var(--hs-signal)}
.fieldset legend i{background:var(--hs-ink);color:var(--hs-paper)}
.cmp-tray{background:var(--hs-ink);border-top:3px solid var(--hs-signal)}
.side-nav a.on,.side-nav a:hover{color:var(--hs-ink);border-color:var(--hs-signal)}
.prose a{text-decoration-color:var(--hs-signal)}
.table tr:hover td{background:var(--hs-paper-2)}
.error-code{color:var(--hs-signal);font-family:var(--display);font-weight:800}

/* Auth */
.auth-art{background:linear-gradient(0deg,rgba(10,13,11,.94),rgba(10,13,11,.4)),url("../images/hero.jpg") center/cover;border-right:4px solid var(--hs-signal)}
.auth-art h2{font-weight:800;color:var(--hs-paper)}

/* Footer */
.footer{background:var(--ftr-bg);color:var(--ftr-fg);border-top:4px solid var(--hs-signal)}
.footer h4{font-family:var(--mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--hs-paper)}
.footer a{transition:color .15s}
.footer ul a:hover{color:var(--hs-paper);text-decoration-color:var(--hs-signal)}
.footer .nl-form input{background:#141915;border-color:#2f3a33;color:var(--hs-paper)}
.footer .nl-form .btn{--bg:var(--hs-signal);--fg:#fff;border-color:var(--hs-signal)}
.footer .nl-form .btn:hover{--bg:var(--hs-signal-2);box-shadow:none}
.footer-base{border-top-color:#2b332e;font-family:var(--mono);font-size:.75rem}

/* Admin: light sidebar so the default dark wordmark reads */
.admin{background:var(--hs-paper)}
.admin-side{background:var(--hs-card);color:var(--hs-slate);border-right:1px solid var(--hs-line)}
.admin-side a.nl{color:var(--hs-ink);border-radius:4px;transition:background-color .15s,color .15s,box-shadow .15s}
.admin-side a.nl:hover{background:var(--hs-paper-2);color:var(--hs-ink)}
.admin-side a.nl.on{background:var(--hs-ink);color:var(--hs-paper);box-shadow:inset 3px 0 0 var(--hs-signal)}
.admin-head h1{font-weight:800}
.stat{background:var(--hs-card);border-color:var(--hs-line);border-top:3px solid var(--hs-ink)}
.stat span{font-family:var(--mono);color:var(--hs-slate)}
.status.Paid,.status.Delivered{background:#dcefe5;color:#1f5a40}
.skel{background:linear-gradient(90deg,#e3e9e3,#f1f4f0,#e3e9e3);background-size:200% 100%}

/* Black/green chrome: light header bar (dark wordmark), black nav rail, black footer */
.announce{background:var(--hs-green);color:var(--hs-black);border-bottom:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em}
.header{border-bottom:0;box-shadow:0 1px 0 var(--hs-line)}
.header .nav{background:var(--hs-black);border-top:0}
.header .nav a{color:var(--hs-bone)}
.header .nav a:hover,.header .nav a.on{color:#fff}
.header .nav a::after{background:var(--hs-green-hi)}
.header .tool:hover{color:var(--hs-green-ink)}
.btn:hover{box-shadow:inset 0 -3px 0 var(--hs-green-hi),0 10px 20px -12px rgba(14,17,15,.6)}
.btn-ghost:hover{box-shadow:none}
.tag.sale{background:var(--hs-green-ink)}
.alert{background:#fbe9e7;border-left-color:var(--rust);color:#6a1a14}
.err{color:var(--rust)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--rust)}
.error-code{color:var(--hs-green-ink)}
.footer{border-top:4px solid var(--hs-green)}
.footer h4{color:var(--hs-green-hi)}
.footer a:hover,.footer ul a:hover{color:#fff;text-decoration-color:var(--hs-green-hi)}
.footer .nl-form .btn{--bg:var(--hs-green);--fg:var(--hs-black);border-color:var(--hs-green)}
.footer .nl-form .btn:hover{--bg:var(--hs-green-hi)}
.cmp-tray{border-top-color:var(--hs-green)}
.cmp-tray .btn-light{--bg:var(--hs-green);--fg:var(--hs-black)}
.auth-art{border-right-color:var(--hs-green)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .btn:hover,.btn:active,.card:hover,.cat:hover{transform:none}
}