/* ═══════════════════════════════════════════════════════════
   BAD INTENTIONS CLOTHING CO.
   Mobile-first storefront. Products render from
   assets/data/products.json (synced from Promio).
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#F4F3F0;
  --white:#FFFFFF;
  --ink:#0D0D0D;
  --ink-soft:#3A3936;
  --muted:#78756F;
  --line:#DFDCD5;
  --wine:#582840;
  --wine-soft:#7A3A58;
  --pad:clamp(1rem,4.5vw,3.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16px/1.55 Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul{list-style:none; margin:0; padding:0}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.03em; line-height:.95}
p{margin:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:.7rem 1rem}
.skip-link:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--wine); outline-offset:2px}

.kicker{
  font-size:.63rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.9rem; border:1px solid var(--ink);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.btn--dark{background:var(--ink); color:var(--paper)}
.btn--dark:hover{background:var(--wine); border-color:var(--wine)}
.btn--light{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.btn--light:hover{background:var(--wine); border-color:var(--wine); color:var(--paper)}
.btn--wide{width:100%}

/* ── ticker ──────────────────────────────────────────────── */
.ticker{overflow:hidden; white-space:nowrap; padding:.6rem 0}
.ticker--top{background:var(--ink); color:var(--paper)}
.ticker--mid{background:var(--wine); color:#F6EEF2; padding:.8rem 0}
.ticker__track{
  display:inline-flex; align-items:center; gap:1.5rem; padding-left:1.5rem;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  animation:marquee 38s linear infinite;
}
.ticker__track i{font-style:normal; font-size:.5rem; opacity:.6}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:.5rem; padding:.7rem var(--pad);
}
.nav__side{display:flex; align-items:center; gap:1.5rem}
.nav__side--right{justify-content:flex-end}
.nav__links{display:none; gap:1.5rem; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600}
.nav__links a:hover,.nav__links--tail:hover{color:var(--wine)}
.burger{display:flex; flex-direction:column; gap:4px; width:30px; padding:4px 0; margin-left:-4px}
.burger span{display:block; height:1.5px; width:18px; background:var(--ink)}
.nav__brand img{width:clamp(78px,16vw,100px)}
.icon-btn{position:relative; width:36px; height:36px; display:grid; place-items:center}
.icon-btn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4}
.icon-btn__count{
  position:absolute; top:1px; right:0; min-width:15px; height:15px; padding:0 3px;
  background:var(--wine); color:#fff; font-size:.58rem; line-height:15px;
  text-align:center; font-weight:700; border-radius:8px;
}

/* ── hero banner ─────────────────────────────────────────
   Wide, low campaign banner: garment centred, headline left,
   underlined call to action along the bottom.                */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:var(--paper);
  height:clamp(300px,46svh,400px);
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(110% 80% at 50% 40%, rgba(122,58,88,.32) 0%, transparent 64%),
    linear-gradient(180deg,#141414 0%,#0A0A0A 100%);
}
.hero__shot{
  position:absolute; inset:0; margin:auto; width:auto; height:74%;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
}
.hero__title{
  position:absolute; left:var(--pad); top:50%; transform:translateY(-50%);
  font-size:clamp(1.7rem,6.4vw,3rem); line-height:.94;
  text-transform:uppercase; letter-spacing:-.04em;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.hero__note{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  display:none; text-align:right; color:#C6C2BD;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.7;
}
.hero__cta{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  white-space:nowrap; padding-bottom:.25rem; border-bottom:1px solid currentColor;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:color .2s;
}
.hero__cta:hover{color:var(--wine-soft)}

/* ── category tiles ──────────────────────────────────────── */
.tiles{display:grid; border-bottom:1px solid var(--line)}
.tile{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem var(--pad); border-top:1px solid var(--line);
  transition:background .25s;
}
.tiles .tile:first-child{border-top:0}
.tile:hover{background:var(--white)}
.tile__label{font-size:.95rem; font-weight:600; letter-spacing:-.01em}
.tile__go{font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* ── rail ────────────────────────────────────────────────── */
.rail-wrap{padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(2rem,6vw,3.5rem)}
.rail__head{
  display:grid; gap:.5rem; padding:0 var(--pad) 1.4rem;
  grid-template-columns:1fr auto; align-items:end;
}
.rail__head .kicker{grid-column:1/-1}
.rail__title{font-size:clamp(1.5rem,5.5vw,2.4rem); text-transform:uppercase}
.rail__nav{display:flex; gap:.4rem}
.rail__btn{
  width:38px; height:38px; border:1px solid var(--line); background:var(--white);
  font-size:1.1rem; line-height:1; transition:.2s;
}
.rail__btn:hover{border-color:var(--ink)}
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:74%;
  gap:.7rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 var(--pad) .5rem; scrollbar-width:none;
  /* without this, snapping ignores the padding and eats the left gutter */
  scroll-padding-left:var(--pad);
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}

/* ── product card ────────────────────────────────────────── */
.card{display:flex; flex-direction:column; background:transparent}
.card__media{
  position:relative; aspect-ratio:4/5; background:var(--white);
  border:1px solid var(--line); display:grid; place-items:center; overflow:hidden;
}
.card__media img{
  width:86%; transition:transform .7s var(--ease), opacity .4s var(--ease);
  grid-area:1/1;
}
.card:hover .card__media img{transform:scale(1.04)}
.card__media img.card__alt{opacity:0}
.card:hover .card__media img.card__alt{opacity:1}
.card__badge{
  position:absolute; top:0; left:0; z-index:2; padding:.36rem .6rem;
  background:var(--ink); color:var(--paper);
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.card__badge--sale{background:var(--wine)}
.card__quick{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:.75rem;
  background:var(--ink); color:var(--paper);
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transform:translateY(100%); transition:transform .3s var(--ease);
}
.card:hover .card__quick,.card:focus-within .card__quick{transform:none}
.card__body{padding:.75rem 0 0; display:grid; gap:.35rem}
.card__name{font-size:.78rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase}
.card__prices{display:flex; align-items:baseline; gap:.5rem; font-size:.8rem}
.card__was{color:var(--muted); text-decoration:line-through; font-size:.72rem}
.card__now--sale{color:var(--wine); font-weight:600}
.card__swatches{display:flex; gap:.28rem; flex-wrap:wrap; align-items:center}
.card__sw{width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.22)}
.card__more{font-size:.6rem; color:var(--muted); letter-spacing:.06em}

/* anchored sections must clear the sticky nav */
#drop,#shop,#story,#care,#top{scroll-margin-top:72px}

/* ── sections / grid ─────────────────────────────────────── */
.section{padding:clamp(2.5rem,7vw,5rem) var(--pad)}
.section__head{display:grid; gap:.6rem; margin-bottom:1.6rem}
.section__title{font-size:clamp(1.6rem,6vw,2.6rem); text-transform:uppercase}
.filters{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem}
.chip{
  padding:.5rem .9rem; border:1px solid var(--line); background:var(--white);
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--muted); transition:.2s;
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.is-active{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem 
}
.grid__empty{margin-top:1.5rem; color:var(--muted); font-size:.85rem}
.card.is-hidden{display:none}

/* ── editorial ───────────────────────────────────────────── */
.editorial{display:grid; border-top:1px solid var(--line)}
.editorial__media{background:var(--ink); display:grid; place-items:center; padding:2.5rem var(--pad)}
.editorial__media img{width:min(70%,330px)}
.editorial__copy{display:grid; gap:1rem; padding:clamp(2rem,7vw,4rem) var(--pad); align-content:center}
.editorial__copy p{color:var(--ink-soft); font-size:.92rem; max-width:52ch}
.editorial__copy .btn{justify-self:start; margin-top:.4rem}

/* ── signup ──────────────────────────────────────────────── */
.signup{
  display:grid; gap:.7rem; justify-items:center; text-align:center;
  padding:clamp(2.5rem,8vw,5rem) var(--pad); background:var(--white);
  border-top:1px solid var(--line);
}
.signup__title{font-size:clamp(1.5rem,6vw,2.4rem); text-transform:uppercase}
.signup__lead{color:var(--muted); font-size:.88rem; max-width:42ch}
.signup__form{display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; margin-top:.7rem; width:min(100%,430px)}
.signup__form input{
  flex:1 1 200px; min-width:0; padding:.9rem 1rem; border:1px solid var(--ink);
  background:transparent; font:inherit; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
}
.signup__form input::placeholder{color:var(--muted)}
.signup__note{font-size:.72rem; color:var(--wine); min-height:1.1em; letter-spacing:.06em}

/* ── footer ──────────────────────────────────────────────── */
.footer{background:var(--ink); color:var(--paper); padding:clamp(2.5rem,7vw,4rem) var(--pad) 1.5rem}
.footer__cols{display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem}
.footer__h{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.8rem; font-weight:600}
.footer__cols li{margin-bottom:.5rem}
.footer__cols a{font-size:.82rem; color:#A9A5A0; transition:color .2s}
.footer__cols a:hover{color:var(--paper)}
.footer__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:2.5rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.14);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#8E8A85;
}
.footer__mark{width:96px; filter:brightness(0) invert(1); opacity:.85}

/* ── drawers / modal ─────────────────────────────────────── */
.drawer{position:fixed; inset:0; z-index:100; display:grid}
.drawer[hidden]{display:none}
.drawer::before{
  content:""; position:absolute; inset:0; background:rgba(10,10,10,.5);
  opacity:0; transition:opacity .3s var(--ease);
}
.drawer.is-open::before{opacity:1}
.drawer__panel{
  position:relative; background:var(--paper); display:flex; flex-direction:column;
  transition:transform .4s var(--ease);
}
.drawer--menu .drawer__panel{width:min(84vw,320px); height:100%; padding:1.2rem var(--pad); transform:translateX(-100%)}
.drawer--cart .drawer__panel{width:min(92vw,400px); height:100%; margin-left:auto; transform:translateX(100%)}
.drawer.is-open .drawer__panel{transform:none}
.drawer__close{position:absolute; top:.7rem; right:.9rem; z-index:3; width:34px; height:34px; font-size:1.6rem; line-height:1; color:var(--muted)}
.drawer__close:hover{color:var(--ink)}
.drawer__nav{margin-top:2.8rem; display:grid}
.drawer__nav a{
  display:block; padding:.85rem 0; border-bottom:1px solid var(--line);
  font-size:1.05rem; font-weight:600; text-transform:uppercase; letter-spacing:-.01em;
}
.drawer__head{padding:1.1rem var(--pad) .9rem; border-bottom:1px solid var(--line)}

.cart__items{flex:1; overflow-y:auto; padding:.8rem var(--pad)}
.cart__empty{color:var(--muted); font-size:.85rem; padding:2rem 0}
.cart__line{display:grid; grid-template-columns:58px 1fr auto; gap:.8rem; padding:.9rem 0; border-bottom:1px solid var(--line)}
.cart__line img{width:58px; height:70px; object-fit:contain; background:var(--white); border:1px solid var(--line)}
.cart__ln{font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em}
.cart__lm{font-size:.7rem; color:var(--muted); margin-top:.2rem}
.cart__qty{display:inline-flex; align-items:center; gap:.5rem; margin-top:.45rem; border:1px solid var(--line); padding:.1rem .45rem}
.cart__qty button{width:16px; color:var(--muted); line-height:1}
.cart__qty button:hover{color:var(--ink)}
.cart__qty span{font-size:.72rem; min-width:1ch; text-align:center}
.cart__lp{font-size:.78rem; font-weight:600}
.cart__rm{display:block; margin-top:.45rem; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.cart__rm:hover{color:var(--wine)}
.cart__foot{padding:1rem var(--pad) 1.4rem; border-top:1px solid var(--line)}
.cart__sum{display:flex; justify-content:space-between; font-size:.9rem; font-weight:600; margin-bottom:.3rem}
.cart__note{font-size:.68rem; color:var(--muted); margin-bottom:.9rem; line-height:1.5}
.notify{display:flex; gap:.4rem; flex-wrap:wrap}
.notify input{
  flex:1 1 150px; min-width:0; padding:.75rem .8rem; border:1px solid var(--ink);
  background:transparent; font:inherit; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
}
.notify input::placeholder{color:var(--muted)}
.notify .btn{padding:.75rem 1.1rem}
.msg{margin-top:.6rem; font-size:.68rem; color:var(--wine); min-height:1em; line-height:1.5}

.drawer--modal{place-items:end center}
.modal__panel{
  position:relative; width:100%; max-height:92svh; overflow-y:auto;
  background:var(--paper); transform:translateY(100%); transition:transform .4s var(--ease);
}
.drawer--modal.is-open .modal__panel{transform:none}
.modal__media{background:var(--white); border-bottom:1px solid var(--line); padding:1.5rem; display:grid; justify-items:center; gap:.7rem}
.modal__media img{width:min(58%,220px)}
.modal__views{display:flex; gap:.4rem}
.modal__views button{width:38px; height:46px; border:1px solid var(--line); background:var(--white); padding:2px}
.modal__views button.is-active{border-color:var(--ink)}
.modal__views img{width:100%; height:100%; object-fit:contain}
.modal__body{padding:1.4rem var(--pad) 2rem; display:grid; gap:.55rem}
.modal__name{font-size:1.5rem; text-transform:uppercase}
.modal__price{font-size:1rem; font-weight:600}
.modal__desc{font-size:.86rem; color:var(--ink-soft); max-width:48ch}
.picker__label{font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin-top:.7rem; color:var(--muted)}
.picker__label span{color:var(--ink)}
.swatches{display:flex; flex-wrap:wrap; gap:.4rem}
.sw{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(0,0,0,.22);
  position:relative; transition:box-shadow .2s;
}
.sw.is-active{box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink)}
.sizes{display:flex; flex-wrap:wrap; gap:.35rem}
.size{
  min-width:46px; padding:.55rem .6rem; border:1px solid var(--line); background:var(--white);
  font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted);
  transition:.2s;
}
.size:hover{border-color:var(--ink); color:var(--ink)}
.size.is-active{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.size[hidden]{display:none}
.spec{margin:1.1rem 0 0; border-top:1px solid var(--line)}
.spec div{display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line)}
.spec dt{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.spec dd{margin:0; font-size:.8rem; text-align:right}
.modal__ship{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:.4rem}
.modal .btn{margin-top:1rem}

.toast{
  position:fixed; left:50%; bottom:1.2rem; transform:translate(-50%,150%); z-index:150;
  padding:.8rem 1.4rem; background:var(--ink); color:var(--paper);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  opacity:0; pointer-events:none; transition:transform .4s var(--ease), opacity .3s;
}
.toast.is-up{transform:translate(-50%,0); opacity:1}
body.is-locked{overflow:hidden}

/* ═══ ≥ 640px ════════════════════════════════════════════ */
@media (min-width:640px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tile{flex-direction:column; align-items:flex-start; gap:2.5rem; border-top:0; border-left:1px solid var(--line); padding:1.5rem}
  .tiles .tile:first-child{border-left:0}
  .rail{grid-auto-columns:40%}
  .grid{grid-template-columns:repeat(3,1fr); gap:1rem}
  .footer__cols{grid-template-columns:repeat(4,1fr)}
  .modal__panel{max-width:900px; max-height:88svh}
  .drawer--modal{place-items:center}
  .modal__panel{transform:translateY(20px)}
  .modal__media{border-bottom:0}
}

/* ═══ ≥ 900px ════════════════════════════════════════════ */
@media (min-width:900px){
  .burger{display:none}
  .nav__links{display:flex}
  .hero{height:auto; aspect-ratio:2.7/1; min-height:400px; max-height:620px}
  .hero__shot{height:82%}
  .hero__note{display:block}
  .hero__cta{bottom:2rem}
  .rail{grid-auto-columns:26%}
  .grid{grid-template-columns:repeat(4,1fr)}
  .editorial{grid-template-columns:1fr 1fr}
  .editorial__media{padding:3.5rem}
  .modal__panel{display:grid; grid-template-columns:1fr 1fr}
  .modal__media{border-right:1px solid var(--line); align-content:center}
  .modal__media img{width:min(76%,300px)}
  .modal__body{align-content:center; padding:2rem 2.2rem}
}