/* =============================================================================
   Forging Shop — Homepage sections
   Extracted from root index.html; shared shell in components.css
   ============================================================================= */

.pg[hidden] {
  display: none !important;
}

.home-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px 0;
  color: var(--ink-2);
  font-weight: 300;
}

#shop .pg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
}

@media (max-width: 1080px) {
  #shop .pg {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #shop .pg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

#shop .pg .pc,
#shop .pg .product {
  margin: 0;
  width: auto;
  max-width: none;
  float: none;
}

/* ---------- HERO SLIDER (bottom-bar layout) ---------- */
.hs{position:relative;background:#08080A;overflow:hidden}
.hs-vp{overflow:hidden}
.hs-tr{display:flex;transition:transform .75s cubic-bezier(.16,1,.3,1)}
.hs-sl{position:relative;flex:0 0 100%;min-height:clamp(500px,50vw,640px);display:flex;align-items:flex-end}
.hs-sl .ph{position:absolute;inset:0;z-index:0}
.hs-sl .ph img{width:100%;height:100%;object-fit:cover;object-position:80% center;display:block}
.hs-sl .vg{position:absolute;inset:0;z-index:1;pointer-events:none;background:
   linear-gradient(90deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.62) 28%,rgba(8,8,10,.22) 52%,rgba(8,8,10,.05) 72%,transparent 100%),
   linear-gradient(180deg,rgba(8,8,10,.12) 0%,rgba(8,8,10,.05) 45%,rgba(8,8,10,.72) 100%)}
/* full-bleed content width — same side padding as header .hbar-wrap */
.hs-sl .in{position:relative;z-index:3;width:100%;max-width:none;margin:0;
   padding:clamp(28px,4vw,48px) clamp(24px,3vw,64px) clamp(36px,4.5vw,56px);
   padding-right:clamp(64px,7vw,96px);
   display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,64px)}
.hs-sl .lft{max-width:min(980px,78%);min-width:0;flex:1 1 auto}
.hs-sl h1,.hs-sl h2{font-family:var(--an);font-weight:400;font-size:clamp(46px,6.4vw,92px);line-height:1.02;letter-spacing:.006em;color:#fff;text-transform:uppercase;margin:0;white-space:nowrap}
.hs-sl .copy{font-family:var(--b);font-weight:400;font-size:clamp(14px,1.15vw,16px);line-height:1.55;color:rgba(255,255,255,.88);margin-top:clamp(14px,1.5vw,20px);max-width:52ch}
/* previous outline CTA — brand ember */
.hs-sl .cta-o{display:inline-flex;align-items:center;justify-content:center;gap:14px;flex-shrink:0;
   background:transparent;color:#fff;border:2px solid var(--red);
   font-family:var(--cd);font-weight:700;font-size:clamp(15px,1.4vw,19px);letter-spacing:.2em;text-transform:uppercase;
   padding:clamp(14px,1.3vw,17px) clamp(34px,3.4vw,52px);white-space:nowrap}
.hs-sl .cta-o i{font-size:.72em}
@media(max-width:900px){
  .hs-sl{min-height:clamp(460px,86vw,580px)}
  .hs-sl .ph img{object-position:70% center}
  .hs-sl .vg{background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.25) 38%,rgba(8,8,10,.9) 100%)}
  .hs-sl .in{flex-direction:column;align-items:flex-start;gap:22px;padding:clamp(28px,5vw,40px) clamp(24px,3vw,64px);padding-right:clamp(52px,8vw,72px)}
  .hs-sl .lft{max-width:100%}
  .hs-sl h1,.hs-sl h2{white-space:normal}
  .hs-sl .cta-o{align-self:flex-start}
}
/* vertical slide rail — forge pill + pause */
.hs-dots{position:absolute;right:clamp(14px,2vw,26px);top:50%;transform:translateY(-50%);z-index:6;margin:0;padding:0;
   display:flex;flex-direction:column;align-items:center;gap:10px}
.hs-dots .in-d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
   width:auto;height:auto;position:relative;padding:18px 10px;margin:0;max-width:none;
   background:rgba(11,11,12,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
   border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.hs-dots .in-d::before{content:"";position:absolute;top:22px;bottom:22px;left:50%;width:1px;margin-left:-.5px;
   background:linear-gradient(180deg,transparent 0%,var(--red) 20%,var(--red-l) 50%,var(--red) 80%,transparent 100%);
   opacity:.85;pointer-events:none;box-shadow:0 0 10px rgba(200,50,30,.45)}
.dt{width:24px;height:24px;flex:0 0 24px;box-sizing:border-box;background:transparent;border:0;
   border-radius:999px;padding:0;position:relative;z-index:1;cursor:pointer;
   transition:transform var(--t)}
.dt::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
   background:rgba(221,221,221,1);border:1.5px solid transparent;border-radius:999px;box-sizing:border-box;
   transition:transform var(--t),background var(--t),border-color var(--t),box-shadow var(--t),height var(--t),width var(--t),margin var(--t)}
.dt:hover::before{background:rgba(255,255,255,.7);transform:scale(1.15)}
.dt[aria-selected=true]::before,.dt[aria-current=true]::before{width:12px;height:28px;margin:-14px 0 0 -6px;background:rgba(221,221,221,1);border-color:#fff;
   box-shadow:0 0 0 1px rgba(200,50,30,.55),0 0 14px rgba(200,50,30,.4);transform:none}
.dt[aria-selected=true]:hover::before,.dt[aria-current=true]:hover::before{background:#b1b1b1}
.hs-pause{width:44px;height:44px;flex:0 0 44px;box-sizing:border-box;display:grid;place-items:center;
   padding:0;margin:0;cursor:pointer;color:rgba(221,221,221,1);font-size:12px;line-height:1;
   background:rgba(11,11,12,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
   border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:0 12px 32px rgba(0,0,0,.35);
   transition:color var(--t),background var(--t),border-color var(--t),box-shadow var(--t),transform var(--t)}
.hs-pause i{display:block;line-height:1}
.hs-pause:hover{color:#fff;background:rgba(11,11,12,.58);border-color:rgba(255,255,255,.28)}
.hs-pause[aria-pressed=true]{color:#fff;border-color:rgba(200,50,30,.55);
   box-shadow:0 0 0 1px rgba(200,50,30,.55),0 0 14px rgba(200,50,30,.4),0 12px 32px rgba(0,0,0,.35)}
.hs-pause:focus-visible{outline:3px solid var(--red);outline-offset:3px}
@media(max-width:760px){
  .hs-dots{right:10px;gap:8px}
  .hs-dots .in-d{padding:14px 8px;gap:10px}
  .hs-pause{width:40px;height:40px;flex-basis:40px;font-size:11px}
}

/* ---------- MARQUEE ---------- */
.mq{overflow:hidden;background:var(--black);color:#fff;position:relative;border-block:1px solid rgba(255,255,255,.08)}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:clamp(48px,8vw,120px);z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--black),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--black),transparent)}
.mq-rail{display:flex;flex-direction:column;gap:0}
.mq-t{display:flex;width:max-content;animation:mq-sl 58s linear infinite}
@keyframes mq-sl{to{transform:translateX(-50%)}}
.mq:hover .mq-t{animation-play-state:paused!important}
.mq-pause{position:absolute;right:clamp(10px,1.6vw,20px);top:50%;transform:translateY(-50%);z-index:3;width:32px;height:32px;display:grid;place-items:center;padding:0;border-radius:999px;color:#DDD;font-size:10px;background:rgba(11,11,12,.72);border:1px solid rgba(255,255,255,.28);transition:color var(--t),border-color var(--t),background var(--t)}
.mq-pause:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.mq-pause[aria-pressed=true]{color:#fff;border-color:rgba(200,50,30,.75)}
.mq-pause:focus-visible{outline:3px solid var(--red-l);outline-offset:2px}
.mqi{display:flex;align-items:center;gap:12px;padding:16px clamp(20px,2.8vw,40px);white-space:nowrap}
.mqi .icn{
  width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;
  background:var(--red);color:#fff;font-size:14px;
  border:0;border-radius:22px 8px 0 14px;position:relative;
}
.mqi .icn::after{content:none}
.mqi .tx{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.mqi b{font-family:var(--d);font-weight:700;font-size:13px;letter-spacing:.12em;display:block;text-transform:uppercase;color:#fff;line-height:1.2}
.mqi em{font-style:normal;font-size:12px;color:#8A9096;font-weight:400;letter-spacing:.02em;line-height:1.2;display:block}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:38px;flex-wrap:wrap;margin-bottom:clamp(30px,3.4vw,48px)}
.tab{font-family:var(--d);font-weight:700;font-size:clamp(14px,1.3vw,17px);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);padding-bottom:11px;border-bottom:3px solid transparent;transition:var(--t)}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--ink);border-color:var(--red)}
@media(max-width:600px){
  .tabs{flex-wrap:nowrap;gap:24px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;white-space:nowrap;min-height:44px;font-size:13px}
}

/* ---------- CATEGORY ---------- */
.cg{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(14px,1.6vw,22px)}
@media(max-width:1000px){.cg{grid-template-columns:repeat(2, minmax(0, 1fr))}}
.ct{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--black);display:flex;align-items:flex-end;padding:clamp(20px,2.4vw,34px)}
.ct img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.68;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity var(--t2)}
.ct:hover img{transform:scale(1.08);opacity:.82}
.ct .gr{position:absolute;inset:0;background:linear-gradient(transparent 34%,rgba(11,11,12,.9))}
.ct .tx{position:relative;z-index:2;width:100%}
.ct h3{color:#fff;font-size:clamp(19px,1.9vw,26px);margin-bottom:10px}
.ct .go{display:inline-flex;align-items:center;gap:10px;font-family:var(--d);font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.72;transition:color var(--t),opacity var(--t)}
.ct .go i{display:inline-block;transition:transform var(--t)}
.ct:hover .go{opacity:1;color:var(--red-l)}
.ct:hover .go i{transform:translateX(5px)}

/* ---------- SPLIT FEATURE + BRAND MASK ---------- */
.sp{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(34px,6vw,100px)}
@media(max-width:900px){.sp{grid-template-columns:minmax(0, 1fr)}}
.sp .ph{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--black)}
.sp .ph img{width:100%;height:100%;object-fit:cover}
/* Brand shape — border-radius clip (no SVG mask) */
.brand-mask{border-radius:var(--brand-radius);overflow:hidden}
.blade-frame .plate{position:absolute;left:12%;bottom:14%;z-index:3;background:rgba(11,11,12,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);padding:8px 12px;font-family:var(--d);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#C2D6E1}
.sp h2{font-size:clamp(34px,5vw,68px);margin-bottom:26px}
.sp .lede{margin-bottom:38px}
.sp .rev{order:2}
@media(max-width:900px){.sp .rev{order:0}}
.stats{display:flex;gap:clamp(26px,4vw,56px);flex-wrap:wrap;margin:38px 0}
.stats b{font-family:var(--d);font-weight:800;font-size:clamp(30px,3.2vw,46px);display:block;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#8B9096;margin-top:9px;display:block}
.stat-inf{display:inline-block;color:var(--red-l);animation:inf-live 3.6s ease-in-out infinite;transform-origin:center;will-change:transform,filter}
@keyframes inf-live{
  0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 0 transparent);opacity:.88}
  40%{transform:scale(1.06) rotate(6deg);filter:drop-shadow(0 0 10px rgba(255,106,77,.35));opacity:1}
  70%{transform:scale(1.02) rotate(-4deg);filter:drop-shadow(0 0 6px rgba(255,106,77,.22));opacity:.96}
}

/* ---------- REVIEWS ---------- */
.rg{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(18px,2.4vw,34px)}
@media(max-width:900px){.rg{grid-template-columns:minmax(0, 1fr)}}
.rc{background:#fff;padding:clamp(28px,3vw,44px);border:1px solid var(--line);transition:transform var(--t2),border-color var(--t),box-shadow var(--t2);cursor:default;position:relative}
.rc::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform var(--t2)}
.rc:hover{transform:translateY(-6px);border-color:#C9CDD0;box-shadow:0 18px 40px rgba(17,18,20,.08)}
.rc:hover::after{transform:scaleY(1)}
.rc .s{color:var(--gold-ui);font-size:13px;margin-bottom:20px;display:flex;gap:4px;align-items:center}
.rc .s i{font-size:12px}
.stat-inf i{font-size:.9em}
.rc:hover .s{color:var(--red)}
.rc q{display:block;font-family:var(--d);font-weight:400;font-size:clamp(17px,1.6vw,21px);line-height:1.45;letter-spacing:-.02em;quotes:none;margin-bottom:26px;transition:color var(--t)}
.rc .who{font-family:var(--d);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;transition:color var(--t)}
.rc:hover .who{color:var(--red)}
.rc .ctx{font-size:12.5px;color:var(--ink-3);margin-top:4px}

/* ---------- HOME CLOSER (shop CTAs; newsletter lives in the footer) ---------- */
.nl{text-align:center;position:relative;overflow:hidden}
.nl .fire{position:absolute;left:50%;top:118%;transform:translateX(-50%);width:900px;height:520px;background:radial-gradient(ellipse,rgba(200,50,30,.3),transparent 66%)}
.nl .in{position:relative;z-index:2;max-width:740px;width:100%;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box}
.nl h2{font-size:clamp(34px,5.4vw,72px);margin-bottom:22px}
.nl-cta{display:flex;gap:12px;max-width:580px;width:100%;margin:38px auto 0;flex-wrap:wrap;justify-content:center}
.nl-cta .btn{flex:1 1 220px;min-width:0}
@media(max-width:480px){.nl-cta .btn{flex:1 1 100%;width:100%}}
.nl .lede,.nl .fine{overflow-wrap:break-word}
.nl .fine{font-size:12.5px;color:#7E848A;margin-top:20px}

.mq.is-paused .mq-t {
  animation-play-state: paused !important;
}

/* Keep marquee scrolling even when OS prefers-reduced-motion is on */
html.reduce-motion .mq-t {
  animation: mq-sl 58s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .mq-t {
    animation: mq-sl 58s linear infinite !important;
  }
  .stat-inf {
    animation: none !important;
  }
}

.ws-band {
  background: var(--wash);
  padding: clamp(36px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
}
.ws-band .copy {
  max-width: 60ch;
}
.ws-band h2 {
  font-size: clamp(28px, 3.6vw, 48px);
  margin: 18px 0;
}

.rc .s {
  color: var(--gold-ui);
}
.rc .s i {
  color: inherit;
}

.head.is-center {
  justify-content: center;
  text-align: center;
}

.sp-title {
  margin-top: 20px;
}

.nl-title {
  margin-top: 20px;
}