:root{
  --magenta:#e6007a;
  --magenta-deep:#a3005a;
  --black:#0a0a0a;
  --ink:#0a0a0a;
  --neon:#e8ff2e;
  --panel:#151515;
  --border:#2a2a2a;
  --text-dim:#9a9a9a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:'Rubik',Tahoma,sans-serif;line-height:1.6}
h1,h2,h3,.brand__name{font-family:'Lalezar',sans-serif;letter-spacing:.5px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.container{max-width:1400px;margin-inline:auto;padding-inline:20px}

/* ---- Nav ---- */
.nav{position:sticky;inset-block-start:0;z-index:90;background:var(--black);color:#fff}
.nav__inner{padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{width:38px;height:38px;background:var(--magenta);display:flex;align-items:center;justify-content:center;font-family:'Lalezar',sans-serif;font-size:20px}
.brand__name{font-size:20px}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{color:#fff;font-size:14.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.nav__links a:hover{color:var(--neon)}
.nav__links a:last-child{color:var(--neon)}
.nav__burger{display:none;background:none;border:2px solid var(--neon);color:var(--neon);width:44px;height:44px;font-size:18px}
.mobile-nav{display:none;flex-direction:column;background:var(--black);border-block-start:1px solid var(--border)}
.mobile-nav.is-open{display:flex}
.mobile-nav a{padding:14px 20px;color:#fff;border-block-end:1px solid var(--border);font-size:15px}
.mobile-nav a:last-child{border-block-end:none;color:var(--neon)}

/* ---- Hero: full-bleed edge-to-edge ---- */
.hero{position:relative;color:#fff}
.hero__img{width:100%;height:78vh;min-height:460px;object-fit:cover;filter:brightness(.55) saturate(1.15)}
.hero__overlay{position:absolute;inset:0;display:flex;align-items:flex-end;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 55%)}
.hero__content{padding:0 24px 50px;max-width:680px}
.hero__title{font-size:clamp(38px,7vw,74px);margin:0 0 14px;line-height:1.05;color:#fff}
.hero__title span{color:var(--neon)}
.hero__lead{font-size:16px;color:#e6e6e6;margin:0 0 26px}
.btn{display:inline-block;padding:15px 34px;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.5px}
.btn--neon{background:var(--neon);color:var(--black)}
.btn--magenta{background:var(--magenta);color:#fff}

/* ---- Product grid: full-bleed, no container padding on desktop ---- */
.shop{padding:60px 0 100px}
.shop__head{padding:0 24px;margin-block-end:30px}
.shop__head h2{font-size:clamp(26px,4vw,40px);margin:0 0 8px}
.shop__head p{color:#666;margin:0}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.product-card{position:relative;border:1px solid #eee;overflow:hidden;aspect-ratio:3/4}
.product-card__img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.product-card:hover .product-card__img{transform:scale(1.08) skewY(-1deg)}
.product-card__info{
  position:absolute;inset-inline:0;inset-block-end:0;padding:16px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
}
.product-card__name{font-size:15px;font-weight:700;margin:0 0 4px}
.product-card__price{font-size:14px;color:var(--neon);font-weight:700}
.product-card__badge{position:absolute;inset-block-start:12px;inset-inline-start:12px;background:var(--magenta);color:#fff;font-size:11px;font-weight:700;padding:4px 10px}

/* ---- Product modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.modal-backdrop.is-open{display:flex}
.modal{background:#fff;max-width:880px;width:100%;max-height:90vh;overflow-y:auto;position:relative;display:grid;grid-template-columns:1fr 1fr}
.modal__close{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:36px;height:36px;background:var(--black);color:#fff;font-size:16px;z-index:2}
.modal__img{width:100%;height:100%;object-fit:cover;min-height:340px}
.modal__body{padding:30px}
.modal__body h3{margin:0 0 8px;font-size:26px}
.modal__price{font-size:22px;color:var(--magenta);font-weight:700;margin-block-end:20px}
.option-group{margin-block-end:20px}
.option-group label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;color:#888;margin-block-end:8px}
.option-swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{border:2px solid #ddd;padding:8px 16px;font-size:13px;font-weight:700}
.swatch.is-active{border-color:var(--magenta);background:var(--magenta);color:#fff}
.add-to-cart-btn{width:100%;background:var(--black);color:#fff;padding:16px;font-size:15px;font-weight:700;text-transform:uppercase}
.add-to-cart-btn:hover{background:var(--magenta)}

/* ---- Cart drawer (RTL: hidden off inline-start = right edge) ---- */
.cart-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:210;display:none}
.cart-drawer-backdrop.is-open{display:block}
.cart-drawer{
  position:fixed;inset-block:0;inset-inline-start:0;width:88%;max-width:400px;background:#fff;z-index:220;
  transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;
}
.cart-drawer.is-open{transform:none}
.cart-drawer__head{padding:20px;border-block-end:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.cart-drawer__items{flex:1;overflow-y:auto;padding:16px 20px}
.cart-item{display:flex;gap:12px;padding:14px 0;border-block-end:1px solid #f0f0f0}
.cart-item img{width:64px;height:80px;object-fit:cover}
.cart-item__name{font-size:14px;font-weight:700;margin:0 0 4px}
.cart-item__meta{font-size:12px;color:#888}
.cart-item__remove{color:var(--magenta);font-size:12px;margin-block-start:6px}
.cart-drawer__footer{padding:20px;border-block-start:1px solid #eee}
.cart-total{display:flex;justify-content:space-between;font-weight:700;margin-block-end:14px;font-size:16px}
.cart-empty{padding:60px 20px;text-align:center;color:#999}

/* ---- Cart FAB: hidden until first item, per global cart-UX rule ---- */
.cart-fab{
  position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:150;
  width:58px;height:58px;border-radius:50%;background:var(--magenta);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 6px 20px rgba(230,0,122,.5);
  transform:scale(0);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;
}
.cart-fab.is-visible{transform:scale(1);opacity:1}
.cart-fab.is-bumping{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.cart-fab__badge{
  position:absolute;inset-block-start:-4px;inset-inline-end:-4px;background:var(--neon);color:var(--black);
  font-size:11px;font-weight:700;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}

/* ---- Checkout flow ---- */
.checkout-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:250;display:none;align-items:center;justify-content:center;padding:16px}
.checkout-backdrop.is-open{display:flex}
.checkout-modal{background:#fff;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;padding:34px;position:relative}
.checkout-modal__close{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:34px;height:34px;background:#f2f2f2;font-size:15px}
.checkout-steps{display:flex;gap:6px;margin-block-end:26px}
.checkout-steps span{flex:1;height:4px;background:#eee}
.checkout-steps span.is-done{background:var(--magenta)}
.checkout-step{display:none}
.checkout-step.is-active{display:block}
.form-row{margin-block-end:16px}
.form-row label{display:block;font-size:13px;font-weight:700;margin-block-end:6px}
.form-row input,.form-row select{width:100%;padding:12px;border:1px solid #ddd;font-family:inherit}
.ship-options{display:flex;flex-direction:column;gap:10px;margin-block-end:20px}
.ship-option{border:1px solid #ddd;padding:14px;display:flex;justify-content:space-between;cursor:pointer}
.ship-option.is-active{border-color:var(--magenta);background:#fff5fa}
.checkout-success{text-align:center;padding:20px 0}
.checkout-success h3{font-size:24px}

/* ---- Footer ---- */
.footer{background:var(--black);color:#999;padding:44px 24px 30px;text-align:center;font-size:13.5px}
.footer .brand__name{color:#fff;font-size:18px}

/* ---- Back pill + WA FAB ---- */
.back-pill{position:fixed;inset-block-start:16px;inset-inline-start:16px;z-index:95;background:rgba(0,0,0,.85);color:var(--neon);padding:8px 16px;border-radius:999px;font-size:13px;border:1px solid var(--neon)}
.wa-fab{position:fixed;inset-block-end:96px;inset-inline-start:24px;z-index:95;width:50px;height:50px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4);color:#0a0a0a}

/* ---- Bottom app tab bar (mobile only — archetype D) ---- */
.tab-bar{display:none}

/* ---- Footer detail columns ---- */
.footer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin-inline:auto;padding:0 24px;text-align:start}
.footer__col p{margin:4px 0;font-size:13.5px;color:var(--text-dim)}
.footer__col p strong{color:#fff}
.footer__copy{text-align:center;margin-block-start:24px;font-size:13px;color:var(--text-dim)}

@media (max-width:1024px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .modal{grid-template-columns:1fr}
  .modal__img{min-height:260px}
  .nav__links{display:none}
  .nav__burger{display:block}
  .footer__grid{grid-template-columns:1fr;gap:18px;text-align:center}

  body{padding-block-end:64px}
  .tab-bar{
    display:flex;position:fixed;inset-block-end:0;inset-inline:0;z-index:140;
    background:var(--black);border-block-start:1px solid var(--border);
    padding-block:6px;padding-block-end:calc(6px + env(safe-area-inset-bottom));
  }
  .tab-bar__item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:none;border:none;color:var(--text-dim);font-size:10.5px;font-weight:600;
    padding:4px 0;
  }
  .tab-bar__item.is-active{color:var(--neon)}
  .tab-bar__icon{font-size:19px;line-height:1}

  /* clear the tab bar (~66px) — raise both FABs above it */
  .cart-fab{inset-block-end:78px}
  .wa-fab{inset-block-end:150px}
}
@media (max-width:420px){
  .hero__content{padding:0 18px 36px}
  .cart-fab{inset-block-end:74px}
  .wa-fab{inset-block-end:140px}
}