/* Headwind Supply Co. — retail rebuild v1 (design-only presentation layer).
   Loaded AFTER /css/site.css on retail pages. Uses the same brand tokens:
   navy #0a1526 · gold #e5a33c · gold-soft #f3c876 · paper #faf9f6.
   Mobile-first at 390px: Amazon rhythm — products in the first screen,
   dense 2-up grid, price loudest, one gold buy action per card. */

/* ---------- compact page framing ---------- */
.r-wrap{max-width:1120px;margin:0 auto;padding:0 14px}
@media (min-width:761px){.r-wrap{padding:0 24px}}

/* ---------- persistent store search (header, all widths) ---------- */
/* The base .hdsearch styles are injected by js/site.js with the chrome (the
   bar renders on every retail page; this sheet loads on only some of them).
   They are duplicated below so this file stays self-describing — keep them
   in sync with the "hw-hdsearch-base" block in site.js.
   IDLE STATE IS A HARD RULE: clean white pill, border fully transparent.
   The gold wrap below is for ACTIVE searching only (:focus-within). */
.hdsearch{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;
  padding:5px 6px 5px 16px;margin:10px 0 12px;border:2px solid transparent}
.hdsearch:focus-within{border-color:var(--gold)}
.hdsearch svg{flex-shrink:0;color:#5b616e}
.hdsearch input{flex:1;min-width:0;border:0;background:transparent;font-size:16px;color:var(--ink);font-family:inherit}
.hdsearch input:focus{outline:none}
.hdsearch input::placeholder{color:#8a8f98}
.hdsearch button{flex-shrink:0;background:var(--gold);color:#20160a;border:0;border-radius:999px;
  font-weight:800;font-size:14px;padding:9px 18px;cursor:pointer;font-family:inherit}
.hdsearch button:hover{filter:brightness(1.07)}
@media (max-width:760px){
  header.site .hd{padding:10px 0 2px}
  .hdsearch{margin:6px 0 10px}
}

/* ---------- slim hero strip (shop pages) ---------- */
.shopstrip{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;padding:18px 0 16px}
.shopstrip h1{font-size:clamp(21px,5.6vw,30px);font-weight:800;letter-spacing:-.015em;line-height:1.15;margin-bottom:4px}
.shopstrip h1 span{color:var(--gold-soft)}
.shopstrip p{font-size:14px;color:#c3ccd8;max-width:62ch}
.shopstrip .ss-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.shopstrip .ss-links a{color:#e8ecf3;text-decoration:none;font-size:13px;font-weight:700;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 14px}
.shopstrip .ss-links a:hover{border-color:var(--gold);color:var(--gold-soft)}

/* ---------- trust strip ---------- */
.truststrip{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;padding:10px 0;
  font-size:12.5px;font-weight:700;color:var(--navy)}
.truststrip span{white-space:nowrap}
.truststrip .tick{color:var(--ok);font-weight:800}
.truststrip a{color:var(--navy)}

/* ---------- sticky department bar ---------- */
.deptbar{position:sticky;top:0;z-index:90;background:rgba(250,249,246,.97);
  border-bottom:1px solid var(--line);padding:8px 0}
.deptbar .r-wrap{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.deptbar .r-wrap::-webkit-scrollbar{display:none}
.deptbar a,.deptbar button.dchip{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;border:2px solid var(--line);background:#fff;
  font-weight:700;font-size:13.5px;color:var(--ink);text-decoration:none;cursor:pointer;font-family:inherit;white-space:nowrap}
.deptbar a .cnt,.deptbar button.dchip .cnt{font-size:11.5px;font-weight:800;color:#8a6a1f;
  background:#faf0da;border-radius:999px;padding:1px 8px}
.deptbar a:hover,.deptbar button.dchip:hover{border-color:var(--gold)}
.deptbar a.on,.deptbar button.dchip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.deptbar a.on .cnt,.deptbar button.dchip.on .cnt{background:rgba(229,163,60,.25);color:var(--gold-soft)}

/* ---------- product grid: dense, products first ---------- */
.pgrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px 0 40px}
@media (min-width:761px){.pgrid2{grid-template-columns:repeat(3,1fr);gap:18px;padding:18px 0 56px}}
@media (min-width:1080px){.pgrid2{grid-template-columns:repeat(4,1fr)}}

/* ---------- the product card (sells on every screen) ---------- */
.pcard2{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;position:relative;color:var(--ink)}
.pcard2 .pvis{position:relative;aspect-ratio:1/1;background:#101c30;overflow:hidden;display:block}
.pcard2 .pvis img{width:100%;height:100%;object-fit:contain;display:block}
.pcard2 .dealbadge{position:absolute;top:8px;left:8px;z-index:2;background:#b91c1c;color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.05em;padding:4px 9px;border-radius:6px}
.pcard2 .pb{padding:10px 11px 12px;display:flex;flex-direction:column;flex:1}
.pcard2 .ptype{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a6a1f;margin-bottom:3px}
.pcard2 h3,.pcard2 h4{font-size:14px;font-weight:700;line-height:1.3;color:var(--ink);margin:0}
.pcard2 h3 a,.pcard2 h4 a{color:inherit;text-decoration:none}
.pcard2 .starslot{font-size:12px;color:#d99a26;letter-spacing:1.5px;min-height:16px;margin-top:2px;line-height:1.2}
.pcard2 .starslot:empty{display:none}
.pcard2 .starslot .rc{color:var(--muted);letter-spacing:0;font-size:11.5px;font-weight:600}
.pcard2 .price{font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--navy);line-height:1.15;margin-top:5px}
.pcard2 .price .was{font-size:13px;color:#8a8f98;text-decoration:line-through;font-weight:600;margin-left:5px}
.pcard2 .price .sale-p{color:#b91c1c}
.pcard2 .ship{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.pcard2 .ship b{color:var(--ok);font-weight:800}
.pcard2 .buybtn{margin-top:auto;padding-top:9px}
.pcard2 .buybtn button,.pcard2 .buybtn a{display:block;width:100%;text-align:center;background:var(--gold);
  color:#20160a;font-weight:800;font-size:14px;padding:11px 10px;border-radius:999px;border:0;
  cursor:pointer;text-decoration:none;font-family:inherit;line-height:1.2}
.pcard2 .buybtn button:hover,.pcard2 .buybtn a:hover{filter:brightness(1.07)}
.pcard2 .buybtn button.added{background:var(--ok);color:#fff}
@media (min-width:761px){
  .pcard2 h3,.pcard2 h4{font-size:15.5px}
  .pcard2 .price{font-size:24px}
  .pcard2 .pb{padding:14px 15px 16px}
}

/* ---------- horizontal product rail (homepage featured) ---------- */
.rail{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .pcard2{flex:0 0 46%;scroll-snap-align:start}
@media (min-width:761px){.rail .pcard2{flex-basis:23.5%}}

/* ---------- department entrances ---------- */
.dept-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px 0 8px}
@media (min-width:761px){.dept-cards{grid-template-columns:repeat(4,1fr);gap:18px}}
.dept-card{border-radius:14px;overflow:hidden;text-decoration:none;color:#fff;position:relative;
  display:flex;flex-direction:column;min-height:128px;background:var(--navy);border:1px solid rgba(255,255,255,.08)}
.dept-card .dimg{position:absolute;inset:0}
.dept-card .dimg img{width:100%;height:100%;object-fit:cover;display:block}
.dept-card .dimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,24,.18) 0%,rgba(6,12,24,.86) 82%)}
.dept-card .dbody{position:relative;margin-top:auto;padding:12px 13px}
.dept-card .dk{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:3px}
.dept-card h3{font-size:16.5px;font-weight:800;line-height:1.2;margin-bottom:2px}
.dept-card .dc{font-size:12px;font-weight:700;color:var(--gold-soft)}
@media (min-width:761px){.dept-card{min-height:180px}.dept-card h3{font-size:20px}.dept-card .dbody{padding:18px}}

/* ---------- section heads (compact) ---------- */
.rsec{padding:22px 0 2px}
.rsec h2{font-size:clamp(20px,5vw,28px);font-weight:800;letter-spacing:-.015em;color:var(--navy);margin-bottom:2px}
.rsec .rsub{color:var(--muted);font-size:14px;margin-bottom:6px}
.rsec .rsub a{color:var(--navy);font-weight:700}

/* ---------- unified navy footer band (every page) ---------- */
/* These rules are duplicated in the "hw-foot-base" block injected by
   js/footer.js, which ships the band styles with the markup so every
   page gets them — keep the two in sync (slim15, D1). */
footer.hw-foot{background:var(--navy);color:#c9d4e4;padding:34px 0 22px;font-size:14px;margin-top:0}
footer.hw-foot .ft-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid rgba(229,163,60,.35);border-radius:14px;padding:16px 18px;margin-bottom:24px;background:rgba(255,255,255,.03)}
footer.hw-foot .ft-cta strong{display:block;color:#fff;font-size:16px;margin-bottom:2px}
footer.hw-foot .ft-cta span{font-size:13.5px;color:#aeb9c9}
footer.hw-foot .nl-form{display:flex;flex-direction:column;gap:8px;flex:1;min-width:240px;max-width:360px}
footer.hw-foot .nl-inputwrap{position:relative;display:flex}
footer.hw-foot .nl-inputwrap input{width:100%;padding:11px 38px 11px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:15px;outline:none;font-family:inherit}
footer.hw-foot .nl-inputwrap input::placeholder{color:#9aa4b5}
footer.hw-foot .nl-inputwrap input:focus{border-color:var(--gold)}
footer.hw-foot .nl-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:#9aa4b5;font-size:18px;cursor:pointer;display:none;padding:4px 8px}
footer.hw-foot .nl-clear.show{display:block}
footer.hw-foot .nl-msg{font-size:12.5px;color:var(--gold-soft);min-height:16px}
footer.hw-foot .nl-code{display:inline-block;background:rgba(229,163,60,.15);border:1px dashed var(--gold);
  border-radius:8px;padding:7px 14px;font-weight:800;letter-spacing:.08em;color:var(--gold-soft);font-size:15px;margin-top:2px}
footer.hw-foot .btn-gold{display:inline-block;background:var(--gold);color:#20160a;font-weight:800;
  padding:11px 22px;border-radius:999px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;font-size:14.5px;font-family:inherit;text-align:center}
footer.hw-foot .btn-gold:hover{filter:brightness(1.08)}
footer.hw-foot .ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 14px;margin-bottom:22px}
@media (min-width:761px){footer.hw-foot .ft-cols{grid-template-columns:2fr 1fr 1fr 1fr}}
footer.hw-foot .ft-brandcol .ft-brand{color:#fff;font-weight:800;font-size:16px;letter-spacing:.06em;margin-bottom:6px}
footer.hw-foot .ft-brandcol .ft-brand b{color:var(--gold)}
footer.hw-foot .ft-brandcol p{font-size:13px;color:#8fa0b5;max-width:280px}
@media (max-width:760px){footer.hw-foot .ft-brandcol{grid-column:1/-1}}
footer.hw-foot .foot-col h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}
footer.hw-foot .foot-col a{display:block;color:#c9d4e4;text-decoration:none;font-size:14px;margin-bottom:8px}
footer.hw-foot .foot-col a:hover{color:var(--gold-soft)}
footer.hw-foot .foot-legal{text-align:center;color:#8fa0b5;font-size:12.5px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
footer.hw-foot .foot-policies{display:flex;gap:22px;justify-content:center;margin-top:10px;flex-wrap:wrap}
footer.hw-foot .foot-policies a{color:#c9d4e4;text-decoration:none;font-size:13.5px}
footer.hw-foot .foot-policies a:hover{color:var(--gold-soft)}
footer.hw-foot .ft-social{display:flex;gap:14px;justify-content:center;margin-top:14px;flex-wrap:wrap}
footer.hw-foot .ft-social a{color:#c9d4e4;font-weight:700;text-decoration:none;border-bottom:2px solid var(--gold);font-size:13.5px}

/* ---------- compact story band (homepage) ---------- */
.storyband{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:26px}
.storyband .sb-in{padding:30px 0 34px;max-width:72ch}
.storyband h2{font-size:clamp(22px,5.4vw,32px);color:var(--navy);font-weight:800;letter-spacing:-.015em;margin:8px 0 10px}
.storyband p{color:var(--muted);font-size:15px;margin-bottom:10px}
@media (min-width:900px){
  .storyband .sb-in{display:grid;grid-template-columns:300px 1fr;gap:36px;max-width:none;align-items:start}
  .storyband .sb-img{border-radius:16px;overflow:hidden;background:var(--navy)}
  .storyband .sb-img img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
}
@media (max-width:899px){.storyband .sb-img{display:none}}

/* ---------- digital department tweaks ---------- */
.pgrid2 .pcard2 .pvis.dig{background:#0e1d33}
.pgrid2 .pcard2 .pvis.dig img{object-fit:contain;padding:14px}
.pcard2 .inside{list-style:none;margin:6px 0 2px;display:grid;gap:4px}
.pcard2 .inside li{font-size:12.5px;color:var(--muted);padding-left:19px;position:relative;line-height:1.4}
.pcard2 .inside li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
@media (max-width:760px){.pcard2 .inside li:nth-child(n+3){display:none}}

/* ---------- product page: mobile buy bar ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:150;background:rgba(10,21,38,.98);
  border-top:1px solid rgba(229,163,60,.35);padding:9px 12px;display:none;align-items:center;gap:10px}
.buybar.show{display:flex}
.buybar img{width:44px;height:44px;object-fit:cover;border-radius:8px;flex-shrink:0}
.buybar .bb-info{flex:1;min-width:0;color:#fff}
.buybar .bb-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .bb-price{font-size:15px;color:var(--gold-soft);font-weight:800;white-space:nowrap}
.buybar button{flex-shrink:0;background:var(--gold);color:#20160a;border:0;border-radius:999px;
  font-weight:800;font-size:14.5px;padding:12px 22px;cursor:pointer;font-family:inherit}
.buybar button:active{filter:brightness(1.1)}
@media (min-width:761px){.buybar{display:none!important}}

/* ---------- customize-first add sheet (slim11, homepage rail) ---------- */
.asheet-backdrop{position:fixed;inset:0;background:rgba(10,21,38,.62);z-index:300;display:none;align-items:center;justify-content:center;padding:18px}
.asheet-backdrop.open{display:flex}
.asheet-panel{background:#fff;border-radius:18px;max-width:520px;width:100%;max-height:92vh;overflow-y:auto;position:relative;padding:20px 22px 24px;box-shadow:0 30px 80px rgba(10,21,38,.45)}
.asheet-close{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:999px;background:var(--navy);color:#fff;font-size:20px;line-height:1;cursor:pointer;z-index:2}
.asheet-media{background:#101c30;border-radius:12px;overflow:hidden;margin-bottom:14px}
.asheet-media img{width:100%;height:210px;object-fit:contain;display:block}
.asheet-kicker{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8a6a1f;margin-bottom:6px}
.asheet-title{font-size:23px;font-weight:800;letter-spacing:-.01em;color:var(--navy);margin-bottom:4px}
.asheet-price{font-size:25px;font-weight:800;color:var(--navy);margin-bottom:8px}
.asheet-label{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.asheet-sizes{display:flex;gap:8px;flex-wrap:wrap}
.asheet-size{border:2px solid var(--line);background:#fff;border-radius:10px;min-width:48px;padding:9px 10px;font-size:14px;font-weight:700;cursor:pointer;text-align:center;font-family:inherit}
.asheet-size.sel{border-color:var(--navy);background:var(--navy);color:#fff}
.asheet-size .upch{display:block;font-size:10.5px;color:#8a6a1f;font-weight:600}
.asheet-size.sel .upch{color:var(--gold-soft)}
.asheet-qty{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.asheet-qty button{width:40px;height:40px;border:0;background:none;font-size:19px;font-weight:800;cursor:pointer;color:var(--navy);font-family:inherit}
.asheet-qty span{min-width:32px;text-align:center;font-size:16px;font-weight:800}
.asheet-add{display:block;width:100%;margin-top:20px;background:var(--gold);color:#20160a;font-weight:800;padding:14px 30px;border-radius:999px;font-size:16px;border:0;cursor:pointer;text-align:center;font-family:inherit}
.asheet-add:hover{filter:brightness(1.05)}
.asheet-added{color:#1e7d46;font-weight:700;font-size:14.5px;margin-top:12px;display:none}
.asheet-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.asheet-viewcart{display:inline-block;background:var(--navy);color:#fff;font-weight:800;font-size:14px;padding:10px 20px;border-radius:999px;text-decoration:none}
.asheet-viewcart:hover{filter:brightness(1.18)}
.asheet-continue{display:inline-block;background:#fff;color:var(--navy);border:2px solid var(--navy);font-weight:800;font-size:14px;padding:8px 18px;border-radius:999px;cursor:pointer;font-family:inherit}
.asheet-continue:hover{border-color:var(--gold)}
.asheet-full{display:inline-block;margin-top:14px;color:#8a6a1f;font-weight:700;font-size:14.5px;text-decoration:none}
.asheet-trust{font-size:12.5px;color:var(--muted);margin-top:12px}
@media (max-width:760px){
  .asheet-backdrop{align-items:flex-end;padding:0}
  .asheet-panel{border-radius:20px 20px 0 0;max-height:88vh;width:100%}
  .asheet-media img{height:170px}
}