@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;700;800&display=swap');
:root{--pink:#FF4DA6;--yellow:#FFD600;--lime:#A8EB12;--blue:#009BFF;--ink:#0a0710;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--ink);color:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;
 background-image:radial-gradient(1100px 600px at 88% -8%,rgba(255,77,166,.20),transparent 60%),radial-gradient(900px 560px at 2% 30%,rgba(0,155,255,.16),transparent 60%),radial-gradient(800px 600px at 60% 110%,rgba(168,235,18,.12),transparent 60%);background-attachment:fixed;}
/* halftone dots overlay */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
 background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);background-size:18px 18px;}
.disp{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;line-height:.9}
a{color:inherit;text-decoration:none}
main,header,section,footer{position:relative;z-index:1}

/* diagonal racing strip */
.diag-strip{height:12px;background:repeating-linear-gradient(135deg,#FFD600 0 18px,#0a0710 18px 36px);border-bottom:3px solid #000}

/* header */
.shop-head{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;position:sticky;top:0;z-index:20;
 background:rgba(10,7,16,.72);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.shop-head img{height:50px;width:50px;object-fit:contain;transition:.3s}
.shop-head a:hover img{transform:rotate(-7deg) scale(1.07)}
.shop-head .back{font-family:'Bebas Neue',sans-serif;letter-spacing:.14em;font-size:15px;color:rgba(255,255,255,.8);border:2px solid rgba(255,255,255,.22);
 border-radius:999px;padding:9px 18px;transition:.2s}
.shop-head .back:hover{background:var(--pink);border-color:var(--pink);color:#fff;transform:translateY(-2px)}

/* layout */
.product{max-width:1140px;margin:0 auto;padding:34px 22px 60px;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start}
@media(max-width:860px){.product{grid-template-columns:1fr;gap:26px;padding-top:20px}}

/* gallery */
.gallery{position:sticky;top:90px}
@media(max-width:860px){.gallery{position:static}}
.gallery .main{position:relative;border:4px solid #000;border-radius:28px;overflow:hidden;box-shadow:14px 14px 0 var(--pink);background:#0d0a12;transform:rotate(-.6deg)}
.gallery .main img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.badge-sticker{position:absolute;top:16px;left:16px;z-index:3;font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:15px;
 background:var(--yellow);color:#000;border:3px solid #000;border-radius:10px;padding:7px 13px;box-shadow:4px 4px 0 #000;transform:rotate(-5deg)}
.thumbs{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.thumbs button{width:86px;height:104px;border-radius:16px;overflow:hidden;border:3px solid #000;background:#0d0a12;cursor:pointer;padding:0;transition:.2s;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.thumbs button.on{border-color:var(--yellow);box-shadow:3px 3px 0 var(--yellow)}
.thumbs button:hover{transform:translateY(-3px)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* info */
.tag{display:inline-block;font-family:'Bebas Neue',sans-serif;letter-spacing:.16em;font-size:13px;color:#000;background:var(--lime);
 border:2px solid #000;border-radius:999px;padding:6px 16px;transform:rotate(-2deg);box-shadow:3px 3px 0 #000;margin-bottom:16px}
.info h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,7vw,78px);line-height:.86;text-shadow:3px 3px 0 rgba(255,77,166,.35)}
.price{font-family:'Bebas Neue',sans-serif;font-size:38px;color:var(--yellow);margin:8px 0 16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price-note{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--lime);letter-spacing:.02em}
.desc{color:rgba(255,255,255,.78);max-width:48ch;margin-bottom:8px;font-size:16px}
.lbl{font-family:'Bebas Neue',sans-serif;letter-spacing:.16em;font-size:12px;color:rgba(255,255,255,.55);margin:20px 0 9px}
.seg{display:inline-flex;padding:4px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.14);border-radius:999px;gap:4px}
.seg button{border:0;background:transparent;color:rgba(255,255,255,.7);cursor:pointer;font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:15px;padding:8px 20px;border-radius:999px;transition:.2s}
.seg button.on{background:var(--pink);color:#fff}
.sizes{display:flex;flex-wrap:wrap;gap:9px}
.sizes button{min-width:48px;padding:10px 15px;border-radius:13px;cursor:pointer;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:16px;transition:.18s}
.sizes button:hover{border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.sizes button.on{background:var(--yellow);color:#000;border-color:#000;box-shadow:3px 3px 0 #000}
.stepper{display:inline-flex;align-items:center;border:2px solid rgba(255,255,255,.18);border-radius:13px;overflow:hidden}
.stepper button{width:44px;height:44px;border:0;background:rgba(255,255,255,.05);color:#fff;font-size:21px;cursor:pointer;transition:.2s}
.stepper button:hover{background:var(--pink)}
.stepper span{min-width:48px;text-align:center;font-family:'Bebas Neue',sans-serif;font-size:19px}
.buy{margin-top:26px;width:100%;max-width:440px;border:4px solid #000;border-radius:18px;cursor:pointer;background:var(--pink);color:#fff;
 font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:24px;padding:17px;box-shadow:6px 6px 0 #000;transition:transform .16s,box-shadow .16s,background .2s}
.buy:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000;background:var(--yellow);color:#000}
.buy:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}
.buy[disabled]{opacity:.5;cursor:progress}
.err{color:#ff7a9c;font-size:13px;margin-top:10px;min-height:16px}
.share{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.share button{font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:14px;color:rgba(255,255,255,.85);border:2px solid rgba(255,255,255,.22);background:transparent;border-radius:999px;padding:9px 16px;cursor:pointer;transition:.2s}
.share button:hover{background:#fff;color:#000}

/* feature chips */
.features{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px;max-width:460px}
.features div{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.8);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px 13px}
.features .ic{font-size:18px;line-height:1}

/* more drops */
.more{max-width:1140px;margin:0 auto;padding:20px 22px 50px}
.more h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(30px,5vw,48px);margin-bottom:18px}
.more h2 span{color:var(--yellow)}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:620px){.more-grid{grid-template-columns:repeat(4,1fr)}}
.more-card{border:3px solid #000;border-radius:18px;overflow:hidden;background:#0d0a12;box-shadow:6px 6px 0 rgba(0,0,0,.5);transition:transform .4s,box-shadow .4s}
.more-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:10px 12px 0 var(--pink)}
.more-card img{width:100%;aspect-ratio:11/14;object-fit:cover;display:block}
.more-card .nm{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;font-size:15px;padding:9px 11px;line-height:1.05}

footer{text-align:center;padding:34px 20px 54px;color:rgba(255,255,255,.42);font-size:13px;border-top:1px solid rgba(255,255,255,.08)}
footer a{color:var(--yellow)}

/* ========== COLLECTION PAGES (Men's / Women's) ========== */
.coll-hero{position:relative;min-height:clamp(260px,42vw,460px);display:flex;align-items:flex-end;
 background-size:cover;background-position:center;border-bottom:3px solid #000}
.coll-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,16,.15) 0%,rgba(10,7,16,.55) 60%,rgba(10,7,16,.92) 100%)}
.coll-hero-inner{position:relative;z-index:2;max-width:1140px;margin:0 auto;width:100%;padding:0 22px 30px}
.coll-hero .tag{display:inline-block;font-family:'Bebas Neue',sans-serif;letter-spacing:.18em;font-size:12px;color:#000;background:var(--yellow);
 border:2px solid #000;border-radius:999px;padding:5px 14px;transform:rotate(-2deg);box-shadow:3px 3px 0 #000;margin-bottom:12px}
.coll-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(64px,12vw,140px);line-height:.82;color:#fff;text-shadow:4px 4px 0 var(--pink)}
.coll-hero h1 span{color:var(--yellow)}
.coll-hero p{color:rgba(255,255,255,.9);font-size:clamp(15px,2.2vw,20px);font-weight:600;margin-top:8px;max-width:40ch}
.coll-switch{display:flex;gap:10px;justify-content:center;padding:22px 16px 4px}
.coll-switch a{font-family:'Bebas Neue',sans-serif;letter-spacing:.14em;font-size:18px;color:rgba(255,255,255,.7);
 border:2px solid rgba(255,255,255,.22);border-radius:999px;padding:10px 26px;transition:.2s}
.coll-switch a:hover{border-color:#fff;color:#fff;transform:translateY(-2px)}
.coll-switch a.on{background:var(--pink);border-color:var(--pink);color:#fff}
.coll-grid-wrap{max-width:1140px;margin:0 auto;padding:26px 22px 60px}
.coll-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:760px){.coll-grid{grid-template-columns:repeat(3,1fr);gap:22px}}
.coll-card{border:3px solid #000;border-radius:20px;overflow:hidden;background:#0d0a12;box-shadow:7px 7px 0 rgba(0,0,0,.5);transition:transform .4s cubic-bezier(.2,.85,.25,1),box-shadow .4s}
.coll-card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:12px 16px 0 var(--pink)}
.cc-img{aspect-ratio:11/14;overflow:hidden;background:#0d0a12}
.cc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.85,.25,1)}
.coll-card:hover .cc-img img{transform:scale(1.05)}
.cc-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-top:2px solid rgba(255,255,255,.08)}
.cc-nm{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;font-size:16px;color:#fff;line-height:1.05}
.cc-pr{font-family:'Bebas Neue',sans-serif;background:var(--yellow);color:#000;border:2px solid #000;border-radius:999px;padding:2px 10px;font-size:14px;flex:none}
.coll-foot-note{text-align:center;color:rgba(255,255,255,.5);font-size:13px;margin-top:26px}

/* ---- buy row + add to cart ---- */
.buyrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;max-width:440px}
.buyrow .buy{margin-top:0;flex:1 1 200px}
.addcart{flex:1 1 160px;border:4px solid #000;border-radius:18px;cursor:pointer;background:#fff;color:#000;font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.05em;padding:15px 18px;box-shadow:5px 5px 0 #000;transition:transform .1s,box-shadow .1s,background .1s}
.addcart:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 #000;background:var(--yellow)}
.addcart:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}
.addcart[disabled]{opacity:.45;cursor:not-allowed;box-shadow:5px 5px 0 #000;transform:none;background:#fff}

/* ---- header cart button ---- */
.cartbtn{position:relative;margin-left:auto;background:#000;color:#fff;border:3px solid #000;border-radius:14px;width:48px;height:48px;font-size:22px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--pink);transition:transform .12s,box-shadow .12s}
.cartbtn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--pink)}
.cartcount{position:absolute;top:-8px;right:-8px;background:var(--pink);color:#fff;font-family:'Bebas Neue',sans-serif;font-size:13px;min-width:20px;height:20px;line-height:20px;border-radius:10px;padding:0 5px;border:2px solid #000}
.cartcount[data-n="0"]{display:none}

/* ---- slide-in cart drawer ---- */
.cart-ov{position:fixed;inset:0;z-index:300}
.cart-ov[hidden]{display:none}
.cart-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.cart-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);background:#100b18;border-left:4px solid #000;box-shadow:-14px 0 50px rgba(0,0,0,.6);display:flex;flex-direction:column;animation:cartIn .28s cubic-bezier(.2,.85,.25,1)}
@keyframes cartIn{from{transform:translateX(30px);opacity:.4}to{transform:translateX(0);opacity:1}}
.cart-top{display:flex;align-items:center;justify-content:space-between;padding:20px;font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.1em;border-bottom:2px solid rgba(255,255,255,.1)}
.cart-top button{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.cart-items{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.cart-empty{text-align:center;color:rgba(255,255,255,.55);padding:48px 0;font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:16px}
.ci{display:flex;gap:12px;align-items:center}
.ci>img{width:60px;height:60px;object-fit:cover;border-radius:10px;background:#fff;border:2px solid #000;flex:none}
.ci-m{flex:1;min-width:0}
.ci-n{font-weight:800;font-size:14px;line-height:1.2}
.ci-s{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}
.ci-step{display:inline-flex;align-items:center;gap:10px;margin-top:6px}
.ci-step button{width:26px;height:26px;border-radius:7px;border:2px solid rgba(255,255,255,.3);background:none;color:#fff;cursor:pointer;font-size:15px;line-height:1}
.ci-r{text-align:right;flex:none}
.ci-p{font-family:'Bebas Neue',sans-serif;font-size:18px}
.ci-rm{background:none;border:none;color:rgba(255,255,255,.45);font-size:11px;cursor:pointer;text-decoration:underline;margin-top:6px}
.cart-foot{padding:18px 20px;border-top:2px solid rgba(255,255,255,.1)}
.cart-sub{display:flex;justify-content:space-between;align-items:center;font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.06em;margin-bottom:14px}
.cart-checkout{width:100%;border:none;border-radius:14px;background:var(--pink);color:#fff;font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.06em;padding:15px;cursor:pointer;transition:background .15s}
.cart-checkout:hover{background:var(--yellow);color:#000}
.cart-checkout[disabled]{opacity:.5;cursor:not-allowed;background:var(--pink);color:#fff}
.cart-keep{display:block;text-align:center;color:rgba(255,255,255,.55);font-size:13px;margin-top:14px}

/* ---- color swatches (product page) ---- */
.colors{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 6px}
.colors button{font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;font-size:15px;padding:9px 18px;border-radius:12px;border:3px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.colors button:hover{border-color:var(--pink);transform:translateY(-1px)}
.colors button.on{background:var(--pink);border-color:var(--pink);color:#fff}

/* ---- front/back view toggle (color products) ---- */
.viewtoggle{display:flex;gap:8px;justify-content:center;margin-top:14px}
.viewtoggle[hidden]{display:none}
.viewtoggle button{font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;font-size:15px;padding:8px 24px;border-radius:999px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;transition:.15s}
.viewtoggle button:hover{border-color:var(--pink)}
.viewtoggle button.on{background:#fff;border-color:#fff;color:#000}

/* hover photo-swap on collection cards */
.cc-img{position:relative}
.cc-img .cc-alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.coll-card:hover .cc-alt{opacity:1}