@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --paper:#eee9dc;
  --paper-2:#e5dfd0;
  --ink:#33271f;
  --brown:#6f5846;
  --brown-light:#a48d76;
  --red:#a7463e;
  --line:rgba(51,39,31,.22);
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 49.95%,rgba(51,39,31,.025) 50%,transparent 50.05%);
  z-index:-1;
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.065;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
.section{max-width:var(--max);margin:auto;padding-left:32px;padding-right:32px}
.nav{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 32px;
  font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em;
  mix-blend-mode:multiply;
}
.brand{display:flex;gap:10px;align-items:center;font-weight:500}
.brand-mark{font-size:20px;line-height:0}
.nav-meta{display:flex;gap:28px}
.nav-meta b{font-weight:500;color:var(--red)}
.nav-meta a{border-bottom:1px solid currentColor;padding-bottom:3px}

.hero{min-height:100vh;position:relative;padding-top:140px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:40px}
.hero-copy{padding-bottom:60px}
.eyebrow,.hero-foot,.tracking-code,.kit-top,.details-label,.detail span,.group-buy-top,.checkout-note,.footer,.nav{
  font-family:"DM Mono",monospace;
}
.eyebrow{font-size:11px;letter-spacing:.12em;margin:0 0 24px}
.stamp-dot{display:inline-block;width:7px;height:7px;background:var(--red);margin-right:8px;transform:rotate(45deg)}
h1{
  margin:0;
  font-size:clamp(78px,11vw,170px);
  line-height:.77;
  letter-spacing:-.075em;
  font-weight:700;
}
h1 em,h2 em{font-style:normal;color:var(--red)}
.hero-line{font-size:20px;max-width:390px;line-height:1.35;margin:38px 0}
.hero-actions{display:flex;align-items:center;gap:26px}
.button{
  display:inline-flex;align-items:center;justify-content:space-between;
  min-width:205px;padding:15px 17px;
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.07em;
  border:1px solid var(--ink);transition:.3s ease;
}
.button-red{background:var(--red);border-color:var(--red);color:var(--paper)}
.button-red:hover{transform:translateY(-3px);box-shadow:7px 7px 0 rgba(51,39,31,.18)}
.text-link{font-family:"DM Mono",monospace;font-size:10px;border-bottom:1px solid var(--ink);padding-bottom:5px}
.hero-art{position:relative}
.hero-image-wrap{position:relative;transform:rotate(-1.5deg);filter:drop-shadow(0 30px 28px rgba(64,47,34,.15));animation:float 7s ease-in-out infinite}
.hero-image-wrap:after{
  content:"";position:absolute;inset:4% 2%;border:1px solid rgba(51,39,31,.18);pointer-events:none
}
.hero-image-wrap img{display:block;width:100%;height:auto}
.tracking-label{
  position:absolute;z-index:2;right:-2%;top:8%;
  background:var(--red);color:var(--paper);padding:14px 18px;
  transform:rotate(7deg);text-align:center;box-shadow:5px 5px 0 rgba(51,39,31,.14)
}
.tracking-label span{display:block;font-weight:700;font-size:20px;letter-spacing:.06em}
.tracking-label small{font-family:"DM Mono",monospace;font-size:8px}
.tracking-code{font-size:9px;letter-spacing:.15em;margin-top:14px;opacity:.7}
/* Hero inspection bar: viewport-width aligned with the header, but part of the hero flow. */
.hero-foot{
  position:absolute !important;
  z-index:5;
  left:50%;
  right:auto;
  bottom:20px;
  width:min(1180px,calc(100% - 28px));
  transform:translateX(-50%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:clamp(24px,5vw,70px);
  font-size:9px;
  letter-spacing:.08em;
  border-top:1px solid var(--line);
  padding-top:12px;
  pointer-events:none;
}
.hero-foot span{white-space:nowrap}
.hero-foot span:last-child{pointer-events:auto;cursor:pointer}


.manifest{display:grid;grid-template-columns:.55fr 1fr;gap:80px;padding-top:150px;padding-bottom:120px;border-top:1px solid var(--line)}
.section-heading span{font:10px "DM Mono",monospace}
.section-heading h2,.novelty-intro h2,.group-buy h2{
  font-size:clamp(56px,8vw,115px);line-height:.82;letter-spacing:-.065em;margin:22px 0 0
}
.manifest-copy{padding-top:35px;max-width:620px}
.large-copy{font-size:clamp(25px,3vw,42px);line-height:1.1;letter-spacing:-.035em;margin:0 0 35px}
.small-copy{font:13px/1.7 "DM Mono",monospace;max-width:460px;opacity:.75}

.kits{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-bottom:160px}
.kit-card{background:#e5dfd1;border:1px solid var(--line);padding:18px}
.kit-offset{margin-top:120px}
.kit-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.08em;border-bottom:1px solid var(--line);padding-bottom:12px}
.kit-image{overflow:hidden;margin-top:18px}
.kit-image img{display:block;width:100%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.kit-card:hover img{transform:scale(1.025)}
.kit-bottom{display:grid;grid-template-columns:.6fr 1fr;gap:20px;border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.kit-bottom h3{font-size:26px;letter-spacing:-.04em;margin:0}
.kit-bottom p{font:11px/1.6 "DM Mono",monospace;margin:0;opacity:.7}

.details{background:var(--ink);color:var(--paper);max-width:none;padding-top:90px;padding-bottom:90px;display:grid;grid-template-columns:.35fr 1fr;gap:70px}
.details-label{font-size:10px;letter-spacing:.1em}
.details-label span{color:#cdbda9;font-size:18px}
.details-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(238,233,220,.25)}
.detail{padding:24px 0;border-bottom:1px solid rgba(238,233,220,.25);display:flex;flex-direction:column;gap:9px}
.detail:nth-child(odd){padding-right:25px}
.detail:nth-child(even){padding-left:25px;border-left:1px solid rgba(238,233,220,.25)}
.detail span{font-size:8px;letter-spacing:.12em;opacity:.55}
.detail strong{font-size:14px;font-weight:500;letter-spacing:.02em}
.edit-note{grid-column:2;font:9px/1.6 "DM Mono",monospace;opacity:.45;margin:0}

.novelties{padding-top:170px;padding-bottom:170px;display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}
.novelty-intro>span{font:10px "DM Mono",monospace}
.novelty-list{border-top:1px solid var(--line)}
.novelty{display:grid;grid-template-columns:1fr 40px 1.4fr;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);transition:.3s}
.novelty b{font-size:clamp(20px,2vw,30px);letter-spacing:-.04em}
.novelty span{font:9px "DM Mono",monospace;opacity:.5}
.novelty p{font:10px/1.5 "DM Mono",monospace;margin:0;opacity:.65}
.novelty:hover{padding-left:15px;color:var(--red)}

.gallery{padding-bottom:170px}
.gallery-frame{position:relative;overflow:hidden}
.gallery-frame img{display:block;width:100%;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.gallery-frame:hover img{transform:scale(1.025)}
.gallery-overlay{position:absolute;bottom:0;left:0;right:0;padding:14px 16px;display:flex;justify-content:space-between;color:var(--paper);background:linear-gradient(transparent,rgba(30,20,15,.62));font:9px "DM Mono",monospace;letter-spacing:.08em}

.group-buy{max-width:none;background:var(--paper-2);padding-top:90px;padding-bottom:120px}
.group-buy-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;border-bottom:1px solid var(--line);padding-bottom:14px}
.group-buy-main{max-width:var(--max);margin:auto;padding:90px 32px 0;display:grid;grid-template-columns:1fr .8fr;gap:100px}
.buy-panel{border-top:1px solid var(--ink);align-self:end}
.buy-row{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);font:9px "DM Mono",monospace}
.buy-row strong{font-weight:500}
.button.full{width:100%;margin-top:28px}
.checkout-note{font-size:8px;line-height:1.6;opacity:.55;margin-top:12px}

.footer{max-width:none;padding:25px 32px;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:8px;letter-spacing:.08em}
.footer div{display:flex;gap:24px}.footer-right{justify-content:flex-end}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-delay{transition-delay:.16s}
@keyframes float{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-9px)}}

@media(max-width:800px){
  .nav{padding:16px 18px}.nav-meta span{display:none}.nav-meta{gap:12px}
  .section{padding-left:18px;padding-right:18px}
  .hero{padding-top:115px;display:block;min-height:auto;padding-bottom:100px}
  .hero-copy{padding-bottom:50px}.hero-line{font-size:17px}
  h1{font-size:clamp(68px,19vw,120px)}
  .hero-art{width:calc(100% + 5px);margin-left:-2px}
  .tracking-label{right:0;top:5%;padding:10px 12px}.tracking-label span{font-size:14px}
  /* On phones the inspection prompt disappears; the bar remains in the hero flow. */
  .hero-foot{
    position:absolute !important;
    left:50%;
    right:auto;
    bottom:14px;
    width:calc(100% - 36px);
    transform:translateX(-50%);
    margin:0;
    padding-top:10px;
    gap:10px;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .hero-foot span:last-child{display:none}
  .manifest,.novelties,.details{display:block}
  .manifest{padding-top:100px;padding-bottom:80px}.manifest-copy{padding-top:55px}
  .kits{grid-template-columns:1fr;gap:30px;padding-bottom:100px}.kit-offset{margin-top:0}
  .kit-bottom{grid-template-columns:1fr}
  .details{padding-left:18px;padding-right:18px}.details-grid{margin-top:50px}
  .edit-note{margin-top:20px}
  .novelties{padding-top:100px;padding-bottom:100px}.novelty-list{margin-top:70px}
  .novelty{grid-template-columns:1fr 25px}.novelty p{grid-column:1 / -1;margin-top:-8px}
  .gallery{padding-bottom:100px}
  .group-buy-main{display:block;padding:65px 18px 0}.buy-panel{margin-top:65px}
  .footer{padding:22px 18px;display:block}.footer div{justify-content:space-between}.footer-right{margin-top:12px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}


.stef-nav{display:flex;align-items:center;gap:9px;position:absolute;left:50%;transform:translateX(-50%);opacity:.82}
.stef-nav img{width:48px;height:22px;object-fit:contain;object-position:left center;filter:saturate(.8)}
.stef-nav span{font:8px "DM Mono",monospace;letter-spacing:.13em;color:var(--red)}

.creator-card{
  display:flex;align-items:center;gap:16px;
  border-bottom:1px solid var(--line);
  padding:0 0 18px;margin-bottom:4px
}
.creator-card img{width:74px;height:38px;object-fit:contain;object-position:left center}
.creator-card div{display:flex;flex-direction:column;gap:5px}
.creator-card span{font:8px "DM Mono",monospace;letter-spacing:.1em;opacity:.55}
.creator-card strong{font-size:14px;font-weight:500}

.footer{position:relative;flex-wrap:wrap;gap:18px}
.footer-brand{display:flex!important;align-items:center;gap:14px}
.footer-brand img{width:48px;height:27px;object-fit:contain;object-position:left center}
.footer-brand div{display:flex;flex-direction:column;gap:4px}
.footer-brand span{font-size:7px;opacity:.6}
.legal{
  width:100%;border-top:1px solid var(--line);padding-top:14px;margin-top:3px;
  display:grid;grid-template-columns:1fr 1fr;gap:30px;
  font:7px/1.65 "DM Mono",monospace;opacity:.5
}
.legal p{margin:0}

@media(max-width:800px){
  .stef-nav{display:none}
  .legal{grid-template-columns:1fr}
  .footer-brand{margin-bottom:12px}
}


/* v3 — frosted navigation + centered designer credit */
.nav{
  position:fixed;
  top:14px;
  left:50%;
  right:auto;
  width:min(1180px,calc(100% - 28px));
  transform:translateX(-50%);
  padding:13px 18px;
  border:1px solid rgba(51,39,31,.13);
  border-radius:18px;
  background:linear-gradient(
    180deg,
    rgba(245,241,231,.72) 0%,
    rgba(235,229,216,.48) 100%
  );
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  box-shadow:
    0 10px 30px rgba(51,39,31,.07),
    inset 0 1px 0 rgba(255,255,255,.55);
  mix-blend-mode:normal;
  overflow:visible;
}
.nav:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.18),
    transparent 25%,
    transparent 75%,
    rgba(255,255,255,.14)
  );
  pointer-events:none;
}
/* Vertical frosted diffusion below every pinned header.
   The mask makes the blur strongest at the header edge and fade smoothly away. */
.nav:after{
  content:"";
  position:absolute;
  left:-1px;
  top:calc(100% + 1px);
  width:calc(100% + 2px);
  height:110px;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg, rgba(245,241,231,.12) 0%, rgba(245,241,231,.06) 30%, rgba(245,241,231,0) 100%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 22%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.92) 22%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%);
}
.nav>*{position:relative;z-index:1}

.stef-nav{
  left:50%;
  gap:7px;
  opacity:.78;
}
.stef-nav img{
  width:55px;
  height:25px;
  object-fit:contain;
  object-position:left center;
  filter:none;
}
.stef-nav span{
  font-size:7px;
  letter-spacing:.15em;
}

/* Designer card: mark above, credit below, with a deliberate visual center. */
.creator-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:0 0 20px;
  margin-bottom:4px;
}
.creator-card img{
  display:block;
  width:104px;
  height:46px;
  object-fit:contain;
  object-position:left center;
}
.creator-credit{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
}
.creator-credit span{
  font:8px "DM Mono",monospace;
  letter-spacing:.12em;
  opacity:.55;
}
.creator-credit strong{
  font-size:17px;
  font-weight:500;
  letter-spacing:-.02em;
}

/* Footer branding gets the same visual hierarchy. */
.footer-brand img{
  width:62px;
  height:34px;
}
.footer-brand div{
  align-items:flex-start;
}

/* Slightly stronger separation so the frosted header remains readable over the hero. */
.hero{padding-top:150px}

@media(max-width:800px){
  .nav{
    top:9px;
    overflow:visible;
    width:calc(100% - 18px);
    border-radius:15px;
    padding:11px 13px;
  }
  .hero{padding-top:112px}
  .creator-card{align-items:flex-start}
  .creator-card img{width:96px;height:42px}
}


/* v4 — final header + inline designer lockup */
.nav{
  top:14px;
  left:50%;
  right:auto;
  width:min(1180px,calc(100% - 28px));
  height:58px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:140px 1fr 140px;
  align-items:center;
  padding:8px 10px 8px 14px;
  border:1px solid rgba(51,39,31,.13);
  border-radius:18px;
  background:linear-gradient(
    180deg,
    rgba(245,241,231,.72) 0%,
    rgba(235,229,216,.48) 100%
  );
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  box-shadow:
    0 10px 30px rgba(51,39,31,.07),
    inset 0 1px 0 rgba(255,255,255,.55);
  mix-blend-mode:normal;
  overflow:hidden;
}
.nav:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.18),
    transparent 25%,
    transparent 75%,
    rgba(255,255,255,.14)
  );
  pointer-events:none;
}
.nav>*{position:relative;z-index:1}

.stef-header-mark{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  height:100%;
}
.stef-header-mark img{
  display:block;
  width:68px;
  height:36px;
  object-fit:contain;
  object-position:left center;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2.5vw,32px);
}
.nav-links a{
  font:8px "DM Mono",monospace;
  letter-spacing:.10em;
  opacity:.72;
  transition:opacity .25s ease,color .25s ease;
}
.nav-links a:hover{opacity:1;color:var(--red)}

.nav-cta{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:106px;
  padding:10px 12px;
  border-radius:9px;
  background:rgba(51,39,31,.92);
  color:var(--paper);
  font:8px "DM Mono",monospace;
  letter-spacing:.08em;
  transition:transform .25s ease,background .25s ease;
}
.nav-cta:hover{
  transform:translateY(-2px);
  background:var(--red);
}
.nav-cta span{font-size:11px}

.creator-card{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:18px;
  min-height:58px;
  border-bottom:1px solid var(--line);
  padding:0 0 18px;
  margin-bottom:4px;
}
.creator-card img{
  flex:0 0 auto;
  display:block;
  width:88px;
  height:42px;
  object-fit:contain;
  object-position:left center;
}
.creator-credit{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-width:0;
}
.creator-credit span{
  font:8px "DM Mono",monospace;
  letter-spacing:.12em;
  opacity:.55;
}
.creator-credit strong{
  font-size:17px;
  font-weight:500;
  letter-spacing:-.02em;
  white-space:nowrap;
}

@media(max-width:800px){
  .nav{
    top:9px;
    width:calc(100% - 18px);
    height:52px;
    grid-template-columns:72px 1fr 94px;
    border-radius:15px;
    padding:7px 8px 7px 11px;
  }
  .stef-header-mark img{width:58px;height:31px}
  .nav-links{gap:0}
  .nav-links a{display:none}
  .nav-links a:first-child{display:block}
  .nav-cta{min-width:88px;padding:9px 10px}
  .creator-card{align-items:center;gap:15px}
  .creator-card img{width:76px;height:38px}
}

.gb-counter{max-width:720px;margin:40px auto;padding:28px;border:1px solid rgba(58,42,29,.18);background:rgba(255,250,239,.65)}.gb-counter__top{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}.gb-counter__number{text-align:center;font-size:clamp(3rem,8vw,6rem);font-weight:800;line-height:1;margin:22px 0 4px}.gb-counter__label{text-align:center;font-size:.72rem;letter-spacing:.18em}.gb-progress{height:12px;background:rgba(58,42,29,.1);margin:24px 0 14px;overflow:hidden}.gb-progress span{display:block;height:100%;width:0%;background:#9b3f35;transition:width .7s ease}.gb-counter__remaining{text-align:center;font-size:.78rem;letter-spacing:.12em}


/* Final polish: centered designer credit + even group-buy info rows */
.creator-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:58px;text-align:center;gap:6px;padding:0 0 18px;margin-bottom:4px;}
.creator-card img{display:none!important;}
.creator-credit{align-items:center;text-align:center;}
.buy-row{min-height:50px;box-sizing:border-box;align-items:center;padding:0;}
.buy-row span,.buy-row strong{display:flex;align-items:center;min-height:50px;}

/* Final alignment fixes */
.designer-card, .designer, .designer-section {
  text-align: center;
}
.designer-card img.stef-mark, .designer img.stef-mark, .designer-section img.stef-mark {
  display: none !important;
}
.designer-card > *, .designer > *, .designer-section > * {
  margin-left: auto;
  margin-right: auto;
}
.info-grid, .details-grid, .detail-grid {
  align-items: stretch;
}
.info-grid > *, .details-grid > *, .detail-grid > * {
  min-height: 100%;
  box-sizing: border-box;
}

/* Checkout header: use the exact same header geometry as the main site. */
.nav{position:fixed !important;top:14px;left:50%;right:auto;z-index:1000;}
.checkout-nav{
  display:grid;
  grid-template-columns:140px 1fr 140px;
  align-items:center;
}
.checkout-nav .nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2.5vw,32px);
  min-width:0;
  overflow:visible;
  white-space:nowrap;
}
.checkout-nav .nav-cta{
  justify-self:end;
}

/* Release state is controlled by the live API response. */
.release-link[aria-disabled="true"]{background:#aaa49b!important;border-color:#aaa49b!important;color:var(--paper)!important;cursor:default!important;box-shadow:none!important;transform:none!important;opacity:.82;pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important}
body.release-closed .qty button,body.release-closed .qty input{cursor:default!important;pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important}

/* GMK PACKAGE release-hold polish */
.kits{grid-template-columns:repeat(3,minmax(0,1fr));}
.legal a{text-decoration:underline;text-underline-offset:3px;}
@media(max-width:980px){.kits{grid-template-columns:1fr 1fr}.kit-offset{margin-top:0}.kits .kit-card:nth-child(3){grid-column:1 / -1;max-width:calc(50% - 14px);width:100%;justify-self:center;}}
@media(max-width:800px){.nav{top:9px}.kits{grid-template-columns:1fr}.kits .kit-card:nth-child(3){grid-column:auto;max-width:none;justify-self:stretch}.checkout-nav{grid-template-columns:72px 1fr 94px;gap:0}.checkout-nav .nav-links{gap:0;overflow:hidden;white-space:nowrap}.checkout-nav .nav-links a{display:none}.checkout-nav .nav-links a:first-child{display:block}.checkout-nav .nav-cta{min-width:88px;padding:9px 10px}}

/* Release hold: disabled purchase controls remain visually present but cannot be used. */
.release-link.is-disabled,
.release-link[aria-disabled="true"],
.stripe-btn.is-disabled {
  background: #aaa49b !important;
  border-color: #aaa49b !important;
  color: #eee9dc !important;
  cursor: not-allowed !important;
  opacity: .78;
  filter: grayscale(1);
  pointer-events: none;
}

/* Hero release pill — replaces the original SPECIAL DELIVERY / 001 eyebrow in the exact same flow position. */
.release-pill.hero-release-pill{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:max-content;
  height:28px;
  box-sizing:border-box;
  padding:4px 8px;
  margin:0 0 24px;
  border:1px solid #aaa49b !important;
  border-radius:999px;
  background:rgba(255,250,239,.68);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(58,42,29,.04);
  color:var(--ink) !important;
  font:9px/1 'DM Mono',monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.release-pill.hero-release-pill .release-pill-dot{
  width:12px !important;
  height:12px !important;
  min-width:12px !important;
  flex:0 0 12px !important;
  border-radius:50%;
  display:block;
  box-sizing:border-box;
  border:1px solid #aaa49b !important;
  background:#b74439;
}
.release-pill.hero-release-pill.is-open .release-pill-dot{background:#4f9b68;}
.release-pill.hero-release-pill.is-closed .release-pill-dot{background:#b74439;}
.release-pill.hero-release-pill.is-open,
.release-pill.hero-release-pill.is-closed{
  border-color:#aaa49b !important;
  color:var(--ink) !important;
}

.group-buy-action{margin-top:18px;min-height:52px;display:flex;align-items:center;justify-content:center;}
.group-buy-action.is-closed{font:8px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.65;border:1px solid var(--line);background:rgba(58,42,29,.035);}
.group-buy-action .button{width:100%;box-sizing:border-box;}
/* FINAL HEADER POSITIONING */
html { scroll-padding-top: 92px; }
body { --gmk-header-height: 86px; }
.nav {
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  right: auto !important;
  z-index: 1000 !important;
  transform: translateX(-50%) !important;
}
@media (max-width: 800px) {
  .nav {
    position: fixed !important;
    top: 9px !important;
    z-index: 1000 !important;
    transform: translateX(-50%) !important;
  }
}


/* FINAL PINNED HEADER — intentionally fixed to the viewport on every page */
html { scroll-padding-top: 100px !important; }
.nav {
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483647 !important;
  transform: translateX(-50%) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 800px) {
  .nav {
    position: fixed !important;
    top: 9px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 2147483647 !important;
  }
}

/* Permanent frosted header diffusion: a soft vertical blur zone beneath every header. */
.nav {
  position: fixed !important;
  z-index: 2147483647 !important;
  isolation: isolate;
}
.nav::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: -28px;
  right: -28px;
  height: 78px;
  pointer-events: none;
  z-index: -1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(to bottom, rgba(255,250,239,.18) 0%, rgba(255,250,239,.08) 28%, rgba(255,250,239,.025) 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.34) 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.34) 58%, transparent 100%);
}
@media (max-width: 800px) {
  .nav::after {
    height: 64px;
    left: -18px;
    right: -18px;
  }
}

/* UNIVERSAL HEADER DIFFUSION — applies to every .nav header on every page */
.nav {
  isolation: isolate !important;
}
.nav::after {
  content: "" !important;
  position: absolute !important;
  top: calc(100% - 1px) !important;
  left: -32px !important;
  right: -32px !important;
  height: 92px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: linear-gradient(
    to bottom,
    rgba(255,250,239,.20) 0%,
    rgba(255,250,239,.12) 22%,
    rgba(255,250,239,.055) 48%,
    rgba(255,250,239,.018) 72%,
    transparent 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.82) 22%,
    rgba(0,0,0,.50) 48%,
    rgba(0,0,0,.18) 72%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.82) 22%,
    rgba(0,0,0,.50) 48%,
    rgba(0,0,0,.18) 72%,
    transparent 100%
  ) !important;
}
.nav > * { position: relative; z-index: 1 !important; }
@media (max-width: 800px) {
  .nav::after {
    left: -20px !important;
    right: -20px !important;
    height: 76px !important;
  }
}


/* ============================================================
   HEADER GLASS / VIEWPORT DIFFUSION v4
   The diffusion is a separate, full-viewport layer behind the
   fixed header. It is intentionally NOT a pseudo-element of .nav.
   Strongest at the top of the viewport, then softly disappears.
   ============================================================ */
body::after{
  content:"" !important;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100vw !important;
  height:170px !important;
  pointer-events:none !important;
  z-index:999 !important;
  background:linear-gradient(
    to bottom,
    rgba(245,241,231,.58) 0%,
    rgba(245,241,231,.46) 18%,
    rgba(245,241,231,.31) 38%,
    rgba(245,241,231,.17) 58%,
    rgba(245,241,231,.065) 78%,
    rgba(245,241,231,0) 100%
  ) !important;
  -webkit-backdrop-filter:blur(38px) saturate(108%) !important;
  backdrop-filter:blur(38px) saturate(108%) !important;
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 18%,
    rgba(0,0,0,.92) 38%,
    rgba(0,0,0,.62) 58%,
    rgba(0,0,0,.24) 80%,
    transparent 100%
  ) !important;
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 18%,
    rgba(0,0,0,.92) 38%,
    rgba(0,0,0,.62) 58%,
    rgba(0,0,0,.24) 80%,
    transparent 100%
  ) !important;
}

/* Disable the old header-width diffusion. The new layer above owns it. */
.nav::after{
  display:none !important;
}

/* Keep the actual header visually above the diffusion, with a restrained
   frosted surface so the page imagery cannot read through sharply. */
.nav{
  z-index:2147483647 !important;
  background:linear-gradient(
    180deg,
    rgba(245,241,231,.84) 0%,
    rgba(235,229,216,.67) 100%
  ) !important;
  -webkit-backdrop-filter:blur(20px) saturate(112%) !important;
  backdrop-filter:blur(20px) saturate(112%) !important;
  box-shadow:
    0 10px 30px rgba(51,39,31,.055),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

@media(max-width:800px){
  body::after{
    height:145px !important;
    background:linear-gradient(
      to bottom,
      rgba(245,241,231,.62) 0%,
      rgba(245,241,231,.48) 20%,
      rgba(245,241,231,.30) 42%,
      rgba(245,241,231,.13) 64%,
      rgba(245,241,231,.04) 82%,
      rgba(245,241,231,0) 100%
    ) !important;
    -webkit-backdrop-filter:blur(34px) saturate(108%) !important;
    backdrop-filter:blur(34px) saturate(108%) !important;
  }
  .nav{
    background:linear-gradient(
      180deg,
      rgba(245,241,231,.87) 0%,
      rgba(235,229,216,.70) 100%
    ) !important;
  }
}

/* ============================================================
   HEADER GLASS BALANCE v5
   Keep the full-viewport diffusion underneath, but make the
   actual rounded header much less frosted so imagery/color can
   pass through naturally. The header remains crisp; the blur
   belongs to the viewport layer behind it.
   ============================================================ */
.nav{
  background:rgba(245,241,231,.70) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:
    0 10px 30px rgba(51,39,31,.045),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

@media(max-width:800px){
  .nav{
    background:rgba(245,241,231,.73) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}


/* RELEASE STATUS UNAVAILABLE — neutral state when the API request fails. */
.release-pill.hero-release-pill.is-unavailable .release-pill-dot{background:#aaa49b;}
.release-pill.hero-release-pill.is-unavailable{border-color:#aaa49b !important;color:var(--ink) !important;}
.group-buy-action.is-unavailable{font:8px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.65;border:1px solid var(--line);background:rgba(58,42,29,.035);}

/* ============================================================
   HEADER NAV TRUE CENTERING v7
   The navigation is centered against the full rounded header
   itself, never against the space between the left mark and CTA.
   ============================================================ */
.nav{
  position:fixed !important;
}
.nav .nav-links{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:max-content !important;
  margin:0 !important;
  z-index:3 !important;
}

@media(max-width:800px){
  .nav .nav-links{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}

/* ============================================================
   HEADER PILL STANDARD — shared exact geometry and typography
   across every GMK PACKAGE page.
   ============================================================ */
.nav{
  width:min(1180px,calc(100% - 28px)) !important;
  height:58px !important;
  border-radius:999px !important;
}
.nav-links a,
.nav-cta{
  font-family:"DM Mono",monospace !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}
.nav-cta{
  min-width:106px !important;
  padding:10px 12px !important;
  border-radius:999px !important;
}
.nav-cta span{font-size:8px !important;line-height:1 !important}
@media(max-width:800px){
  .nav{width:calc(100% - 18px) !important;height:58px !important;border-radius:999px !important}
  .nav-cta{min-width:88px !important;padding:9px 10px !important}
  .nav-cta span{font-size:8px !important}
}

/* FINAL HEADER OVERRIDE */
.nav{
  width:min(1180px,calc(100% - 28px)) !important;
  height:58px !important;
  border-radius:999px !important;
  overflow:hidden !important;
}

.nav-links{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:max-content !important;
  margin:0 !important;
}

.nav-links a{
  font-family:"DM Mono",monospace !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

.nav-cta{
  min-width:106px !important;
  padding:10px 12px !important;
  border-radius:999px !important;
  font-family:"DM Mono",monospace !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

.nav-cta span{
  font-size:8px !important;
  line-height:1 !important;
}

@media(max-width:800px){
  .nav{
    width:calc(100% - 18px) !important;
    height:58px !important;
    border-radius:999px !important;
  }

  .nav-cta{
    min-width:88px !important;
    padding:9px 10px !important;
  }
}

/* ===== DEFINITIVE HEADER ===== */
header.nav{
  position:fixed !important;
  top:14px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;

  width:min(1180px,calc(100% - 28px)) !important;
  height:58px !important;
  min-height:58px !important;

  border-radius:9999px !important;
  overflow:hidden !important;
}

header.nav .nav-links{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;

  display:flex !important;
  width:max-content !important;
  margin:0 !important;
}

header.nav .nav-links a{
  font-family:"DM Mono",monospace !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

header.nav .nav-cta{
  position:absolute !important;
  right:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;

  min-width:106px !important;
  height:auto !important;
  padding:10px 12px !important;

  border-radius:9999px !important;

  font-family:"DM Mono",monospace !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

header.nav .nav-cta span{
  font-size:8px !important;
  line-height:1 !important;
}

@media(max-width:800px){
  header.nav{
    width:calc(100% - 18px) !important;
    height:58px !important;
    min-height:58px !important;
  }

  header.nav .nav-cta{
    right:7px !important;
    min-width:88px !important;
    padding:9px 10px !important;
  }
}