/* ============ Hockey Stuff NZ ============
   Palette derived from the brand logo:
   ink navy, alpine blue, slate, ice panel  */
:root{
  --ink:#101830;
  --blue:#1E5FA8;
  --blue-deep:#164A86;
  --slate:#6E7681;
  --ice:#F2F6FB;
  --line:#E4E9F0;
  --white:#FFFFFF;
  --radius:16px;
  --skew:-8deg;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{
  background:var(--white);color:var(--ink);
  font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:120px; /* room for cart bar */
}
img{max-width:100%;display:block}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

.eyebrow{font-family:'Space Grotesk';font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
h1,h2{font-family:Archivo,sans-serif;font-weight:900;font-style:italic;letter-spacing:-.015em;line-height:1.02}
h1{font-size:clamp(40px,6.5vw,68px);margin:14px 0 18px}
h2{font-size:clamp(26px,4vw,38px);margin:10px 0 6px}

/* ---------- header ---------- */
.site-header{
  max-width:1120px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo-img{width:min(190px,44vw);height:auto}
.site-header nav{display:flex;align-items:center;gap:22px}
.site-header nav a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;
}
.site-header nav a:hover{color:var(--blue)}
.nav-cart span{
  display:inline-block;min-width:22px;text-align:center;
  background:var(--blue);color:#fff;border-radius:999px;
  font-family:'Space Grotesk';font-size:12.5px;font-weight:700;padding:2px 6px;margin-left:4px;
}

/* ---------- hero ---------- */
.hero{
  max-width:1120px;margin:0 auto;padding:38px 24px 56px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
}
.lead{color:var(--slate);font-size:17.5px;max-width:46ch;margin-bottom:26px}
.hero-note{margin-top:16px;font-family:'Space Grotesk';font-size:12.5px;letter-spacing:.04em;color:var(--slate)}
.hero-art{
  background:var(--ice);border-radius:var(--radius);
  padding:28px;display:flex;justify-content:center;
}
.tripod-diagram{width:min(340px,100%);height:auto}

/* signature skewed CTA — echoes the italic wordmark */
.btn{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;
  font-family:Archivo,sans-serif;font-style:italic;font-weight:800;font-size:16px;
  padding:14px 26px;transform:skewX(var(--skew));border-radius:8px;
}
.btn > *{display:inline-block;transform:skewX(calc(var(--skew) * -1))}
.btn-primary{background:var(--blue);color:#fff;transition:background .15s}
.btn-primary:hover{background:var(--blue-deep)}
.btn-primary:disabled{background:var(--slate);cursor:wait}

/* ---------- ridge divider ---------- */
.ridge svg{display:block;width:100%;height:44px}

/* ---------- shop ---------- */
.shop{background:var(--ice);padding:26px 24px 70px}
.section-head{max-width:1120px;margin:0 auto 26px}
.grid{
  max-width:1120px;margin:0 auto;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
/* with one product, keep the card from stretching edge-to-edge */
.grid:has(.card:only-child){grid-template-columns:minmax(290px,430px)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
}
.card-media{
  background:linear-gradient(180deg,#fff, var(--ice));
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:22px;
}
.card-media img,.card-media svg{max-height:100%;width:auto}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{font-family:Archivo;font-style:italic;font-weight:800;font-size:21px;letter-spacing:-.01em}
.card-desc{color:var(--slate);font-size:14.5px;flex:1}
.price{font-family:'Space Grotesk';font-weight:700;font-size:20px}
.price small{font-weight:500;font-size:12px;color:var(--slate);letter-spacing:.06em}
.card-buy{display:flex;gap:10px;align-items:center;margin-top:4px}
.stepper{
  display:flex;align-items:center;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;
}
.stepper button{
  background:#fff;border:none;width:38px;height:42px;font-size:19px;cursor:pointer;color:var(--ink);
}
.stepper button:hover{background:var(--ice)}
.stepper output{
  min-width:34px;text-align:center;font-family:'Space Grotesk';font-weight:700;font-size:15px;
}
.card-buy .btn{flex:1;text-align:center;padding:11px 14px;font-size:15px}
.added-flash{animation:flash .5s ease}
@keyframes flash{0%{background:var(--blue-deep)}100%{background:var(--blue)}}

/* ---------- info strip ---------- */
.info{
  max-width:1120px;margin:0 auto;padding:54px 24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
}
.info-col h3{font-family:Archivo;font-style:italic;font-weight:800;font-size:18px;margin-bottom:6px}
.info-col p{color:var(--slate);font-size:14.5px}

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink);color:#B9C2D4;padding:34px 24px 40px;text-align:center;font-size:14px;
}
.site-footer a{color:#fff}
.foot-mark{
  font-family:Archivo;font-style:italic;font-weight:900;font-size:24px;color:#fff;margin-bottom:6px;letter-spacing:-.01em;
}
.foot-mark span{color:#5B93D6}

/* ---------- sticky cart bar ---------- */
.cart-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px clamp(16px,4vw,40px);
  box-shadow:0 -6px 24px rgba(16,24,48,.18);
}
.cart-sums{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;font-size:13.5px;color:#B9C2D4}
.cart-sums strong{color:#fff;font-family:'Space Grotesk';font-size:15px;margin-left:4px}
.cart-total strong{font-size:18px;color:#7FB2EE}
.cart-actions{display:flex;gap:12px;align-items:center}
.btn-ghost{
  background:transparent;border:1.5px solid #3A4666;color:#B9C2D4;border-radius:8px;
  padding:11px 16px;font-weight:600;font-size:14px;cursor:pointer;
}
.btn-ghost:hover{border-color:#fff;color:#fff}
.cart-error{
  position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:51;
  background:#B01E32;color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;max-width:90vw;
}

/* ---------- responsive ---------- */
@media (max-width:840px){
  .hero{grid-template-columns:1fr;padding-top:16px}
  .info{grid-template-columns:1fr;gap:26px;padding:44px 24px}
}
@media (max-width:560px){
  .site-header{flex-direction:column;gap:12px}
  body{padding-bottom:170px}
  .cart-bar{justify-content:center;text-align:center}
  .cart-sums{justify-content:center;gap:12px}
  .cart-actions{width:100%;justify-content:center}
  .cart-actions .btn{flex:1}
}