:root{--mint:#C8FAEB;--pink:#E571EC;--black:#000;--white:#fff;--hero-mint:#C8FCE6}
*{box-sizing:border-box}body{margin:0;font-family:"Arial Black",Arial,sans-serif;background:var(--mint);color:#000}
a{color:inherit}img{max-width:100%;display:block}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 5vw;background:#000;color:var(--mint);flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:5}
header .brand img{height:44px;border-radius:4px}
nav a{margin-left:18px;text-decoration:none;text-transform:uppercase;font-size:14px}nav a:hover{color:var(--pink)}
main{padding:32px 5vw;max-width:1200px;margin:auto;min-height:70vh}
.hero{text-align:center;background:var(--hero-mint);margin:-32px calc(50% - 50vw) 32px;padding:24px 5vw 36px}.header-img{display:block;width:min(1100px,100%);height:auto;margin:0 auto 20px}
h1,h2{text-transform:uppercase;letter-spacing:1px}
.btn{display:inline-block;background:var(--pink);color:#000;border:3px solid #000;padding:12px 26px;font:inherit;text-transform:uppercase;cursor:pointer;box-shadow:5px 5px 0 #000;text-decoration:none}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #000}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.card{background:#fff;border:4px solid #000;box-shadow:8px 8px 0 #000;text-decoration:none;padding:12px}.card:hover{box-shadow:8px 8px 0 var(--pink)}
.ph{background:var(--pink);padding:2px 6px;font-size:12px}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:40px}.thumbs{display:flex;gap:8px;margin-top:8px}.thumbs img{width:80px;border:3px solid #000;cursor:pointer}
.main-img{border:4px solid #000}
.blurb{background:#000;color:var(--mint);padding:28px;margin-top:40px;font-family:Arial,sans-serif;border-left:12px solid var(--pink)}
p{font-family:Arial,sans-serif;line-height:1.5}
table{width:100%;border-collapse:collapse;background:#fff;border:4px solid #000}td,th{padding:10px;border-bottom:2px solid #000;text-align:left}
input,textarea{width:100%;padding:10px;border:3px solid #000;font:16px Arial;margin-bottom:12px}
footer{background:#000;color:var(--mint);text-align:center;padding:20px;font-size:13px}
@media(max-width:700px){.pdp{grid-template-columns:1fr}nav a{margin:0 10px 0 0}header{justify-content:center}}

.media{background:#0b0b0b;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid #000}
.media img{width:100%;height:100%;object-fit:contain}
.card .media{margin-bottom:4px}.card:hover .media img{transform:scale(1.03);transition:transform .3s}
.main-img.media{border:4px solid #000;box-shadow:10px 10px 0 var(--pink);max-height:80vh}
.ci{display:flex;align-items:center;gap:12px}.ci img{width:64px;height:80px;object-fit:contain;background:#0b0b0b;border:2px solid #000}
.btn:disabled{background:#bbb;color:#333;cursor:not-allowed;box-shadow:5px 5px 0 #555;transform:none}
.blurb .btn{box-shadow:5px 5px 0 var(--mint)}.blurb .btn:hover{box-shadow:3px 3px 0 var(--mint)}
/* Wiz Bot */
.wb{position:fixed;right:16px;bottom:16px;z-index:50;font-family:Arial,sans-serif}
.wb-bubble{width:64px;height:64px;border-radius:50%;background:var(--pink);border:4px solid #000;box-shadow:5px 5px 0 #000;cursor:pointer;padding:6px}
.wb-bubble img{width:100%;height:100%;object-fit:contain}
.wb-bubble:focus-visible,.wb-chip:focus-visible,.wb-close:focus-visible,.wb input:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.wb.open .wb-bubble{display:none}
.wb-panel{width:360px;max-width:calc(100vw - 32px);height:min(540px,calc(100vh - 100px));display:flex;flex-direction:column;background:var(--mint);border:4px solid #000;box-shadow:8px 8px 0 var(--pink)}
.wb-panel[hidden]{display:none}
.wb-head{display:flex;align-items:center;gap:10px;background:#000;color:var(--mint);padding:10px 12px;font-family:"Arial Black",Arial;text-transform:uppercase}
.wb-head img{width:32px;height:32px;background:var(--mint);border-radius:50%;padding:2px}
.wb-close{margin-left:auto;background:var(--pink);border:2px solid var(--mint);color:#000;font-size:22px;line-height:1;width:34px;height:34px;cursor:pointer}
.wb-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.wb-msg{max-width:85%;padding:9px 12px;border:3px solid #000;line-height:1.4;font-size:15px;word-wrap:break-word}
.wb-bot{background:#fff;align-self:flex-start;box-shadow:3px 3px 0 #000}
.wb-user{background:var(--pink);align-self:flex-end}
.wb-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:3px solid #000}
.wb-chip{background:#fff;border:2px solid #000;padding:6px 10px;font:bold 13px Arial;cursor:pointer;border-radius:16px}.wb-chip:hover{background:var(--pink)}
.wb-form{display:flex;gap:6px;padding:8px 12px 12px}.wb-form input{margin:0;flex:1;min-width:0}.wb-form .btn{padding:8px 14px;box-shadow:3px 3px 0 #000}
.wb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:700px){.wb{right:12px;bottom:12px}.wb-bubble{width:54px;height:54px}main,footer{padding-bottom:84px}
 .wb.open{left:0;right:0;bottom:0}.wb-panel{width:100%;max-width:none;height:85vh;box-shadow:none;border-width:4px 0 0}}

/* Wiz Bot v2: right-middle launcher */
.wb{right:0;bottom:auto;top:50%;transform:translateY(-50%)}
.wb-bubble{position:relative;width:76px;height:76px;padding:4px;background:var(--mint);box-shadow:5px 5px 0 var(--pink);margin-right:14px;animation:wbfloat 3.2s ease-in-out infinite;transition:transform .2s}
.wb-bubble:hover,.wb-bubble:focus-visible{animation:wbwiggle .5s ease-in-out;transform:scale(1.12)}
.wb-label{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;background:#000;color:var(--mint);font:900 12px "Arial Black",Arial;text-transform:uppercase;padding:6px 10px;border:2px solid var(--pink);opacity:0;transition:opacity .2s;pointer-events:none}
.wb-bubble:hover .wb-label,.wb-bubble:focus-visible .wb-label{opacity:1}
@keyframes wbfloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes wbwiggle{0%,100%{rotate:0deg}25%{rotate:-8deg}75%{rotate:8deg}}
.wb.open{right:16px}.wb-panel{height:min(540px,calc(100vh - 40px))}
.wb-head img{background:transparent;padding:0;width:38px;height:38px}
@media(prefers-reduced-motion:reduce){.wb-bubble{animation:none!important;transition:none}.wb-bubble:hover{transform:none}}
@media(max-width:700px){.wb{right:0;bottom:auto}.wb-bubble{width:52px;height:52px;margin-right:8px}main,footer{padding-bottom:32px}.wb-label{display:none}
 .wb.open{top:auto;bottom:0;left:0;right:0;transform:none}}

/* Wiz Bot v3: bigger launcher + speech bubble */
.wb:not(.open){display:flex;align-items:center;flex-direction:row-reverse;gap:18px;pointer-events:none}
.wb:not(.open)>*{pointer-events:auto}
.wb-bubble{width:190px;height:190px;padding:6px;border-width:5px;box-shadow:8px 8px 0 var(--pink);margin-right:18px}
.wb-bubble img{transform:scale(1.18)}
.wb-label{display:none}
.wb-say{position:relative;max-width:230px;background:#fff;color:#000;border:4px solid #000;box-shadow:6px 6px 0 var(--pink);padding:14px 16px;font:900 16px/1.3 "Arial Black",Arial,sans-serif;text-align:left;cursor:pointer;border-radius:22px;animation:wbpop .45s cubic-bezier(.2,1.6,.4,1) .4s both}
.wb-say::after{content:"";position:absolute;right:-22px;top:50%;margin-top:-12px;border:12px solid transparent;border-left:22px solid #000;border-right:0}
.wb-say::before{content:"";position:absolute;right:-14px;top:50%;margin-top:-7px;border:7px solid transparent;border-left:14px solid #fff;border-right:0;z-index:1}
.wb-say:hover{background:var(--mint)}.wb-say:hover::before{border-left-color:var(--mint)}
.wb-say:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.wb.open .wb-say{display:none}
@keyframes wbpop{from{opacity:0;transform:scale(.6) translateX(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wb-say{animation:none}}
@media(max-width:1100px){.wb-bubble{width:140px;height:140px}.wb-say{max-width:190px;font-size:14px}}
@media(max-width:700px){.wb-bubble{width:96px;height:96px;margin-right:8px;border-width:4px;box-shadow:5px 5px 0 var(--pink)}.wb:not(.open){gap:14px}
 .wb-say{max-width:150px;font-size:12px;padding:9px 11px;border-width:3px;box-shadow:4px 4px 0 var(--pink);border-radius:16px}
 }
.wb-bubble{overflow:hidden}

/* Wiz Bot v4: clean floating head, no circle */
.wb:not(.open){top:61%}
.wb-bubble{width:124px;height:124px;padding:0;margin-right:22px;background:transparent!important;border:0!important;border-radius:0;box-shadow:none!important;overflow:visible;
 filter:drop-shadow(0 10px 8px rgba(0,0,0,.28));animation:wbfloat4 3.4s ease-in-out infinite}
.wb-bubble img{transform:none;display:block}
@keyframes wbfloat4{0%,100%{translate:0 0;filter:drop-shadow(0 10px 8px rgba(0,0,0,.28))}50%{translate:0 -10px;filter:drop-shadow(0 20px 12px rgba(0,0,0,.16))}}
.wb-bubble:hover,.wb-bubble:focus-visible{transform:scale(1.08)}
.wb-bubble:focus-visible{outline:3px solid #000;outline-offset:4px;border-radius:12px}
.wb:not(.open){gap:12px}
.wb-say{max-width:200px;font-size:14px;padding:11px 14px;border-width:3px;box-shadow:5px 5px 0 var(--pink);border-radius:18px}
@media(prefers-reduced-motion:reduce){.wb-bubble{animation:none!important}}
@media(max-width:1100px){.wb-bubble{width:100px;height:100px}.wb-say{max-width:170px;font-size:13px}}
@media(max-width:700px){.wb-bubble{width:72px;height:72px;margin-right:10px;filter:drop-shadow(0 6px 5px rgba(0,0,0,.28))}.wb:not(.open){gap:10px}
 .wb-say{max-width:140px;font-size:11.5px;padding:8px 10px;border-radius:14px}}

/* ===== Mobile optimization (<=1099px / <=700px only) ===== */
.m-cart,.menu-btn{display:none}
html{-webkit-text-size-adjust:100%}
@media(max-width:1099px){html,body{overflow-x:hidden}}
@media(max-width:700px){
 body{font-size:16px}
 header{flex-wrap:nowrap;justify-content:flex-start;padding:8px 14px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));gap:10px;min-height:60px}
 header .brand{margin-right:auto;display:flex;align-items:center;min-height:44px}header .brand img{height:38px}
 .m-cart{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;text-decoration:none;text-transform:uppercase;font-size:14px;color:var(--mint)}
 .m-cart .cc{background:var(--pink);color:#000;border:2px solid var(--mint);min-width:24px;height:24px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 5px}
 .menu-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px 9px;background:var(--pink);border:2px solid var(--mint);cursor:pointer}
 .menu-btn span{display:block;height:3px;background:#000;transition:transform .2s,opacity .2s}
 .nav-open .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}.nav-open .menu-btn span:nth-child(2){opacity:0}.nav-open .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
 header nav{display:none;position:absolute;left:0;right:0;top:100%;background:#000;border-bottom:4px solid var(--pink);padding:6px 14px 12px}
 header.nav-open nav{display:block}
 header nav a{display:flex;align-items:center;min-height:48px;margin:0;font-size:16px;border-bottom:1px solid #333}header nav a:last-child{border:0}
 main{padding:20px 16px 28px}
 .hero{margin:-20px -16px 24px;padding:14px 12px 22px}.header-img{margin-bottom:14px}
 .hero .btn{display:block;width:100%;max-width:420px;margin:0 auto;font-size:18px;padding:15px 18px;text-align:center}
 h1{font-size:26px;line-height:1.15}h2{font-size:22px;margin:.6em 0 .5em}
 .btn{min-height:48px;font-size:16px}
 .grid{grid-template-columns:1fr;gap:20px}
 .card{box-shadow:6px 6px 0 #000;padding:10px}.card .media{aspect-ratio:auto;height:min(52vh,420px)}
 .card h3,.card p{margin:.4em 0}
 .blurb{padding:22px 18px;margin-top:32px;border-left-width:8px}.blurb p{font-size:16px;line-height:1.6;max-width:62ch}
 .blurb .btn,.pdp .btn,#cartbox .btn,main form .btn{display:block;width:100%;text-align:center}
 .pdp{gap:22px}.main-img.media{aspect-ratio:auto;height:min(58vh,480px);max-height:none;box-shadow:6px 6px 0 var(--pink)}
 .thumbs{flex-wrap:wrap}
 p,li,td,th{font-size:16px}input,textarea,select{font-size:16px!important;min-height:48px}
 table{display:block;overflow-x:auto}td,th{padding:8px}
 footer{padding:20px 16px calc(96px + env(safe-area-inset-bottom))}
 /* Wiz Bot: bottom-right floating head */
 .wb:not(.open){top:auto;bottom:calc(14px + env(safe-area-inset-bottom));right:calc(6px + env(safe-area-inset-right))}
 .wb-bubble{width:68px;height:68px;margin-right:4px}
 .wb-say{transition:opacity .4s,transform .4s}
 .wb.say-hidden .wb-say{opacity:0;transform:translateX(12px);pointer-events:none;visibility:hidden;transition:opacity .4s,transform .4s,visibility 0s .4s}

 .wb-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;height:92dvh;height:92vh;border-width:4px 0 0;box-shadow:0 -6px 0 var(--pink);padding-bottom:env(safe-area-inset-bottom)}
 @supports(height:1dvh){.wb-panel{height:92dvh}}
 .wb-close{width:44px;height:44px}.wb-chip{min-height:40px;font-size:14px}.wb-msg{font-size:16px}
 .wb-form input{font-size:16px!important;min-height:48px}.wb-form .btn{min-height:48px}
}
@media(prefers-reduced-motion:reduce){.wb-say,.menu-btn span{transition:none!important}}
 @media(max-width:700px){.wb-form .btn{width:auto;flex:0 0 auto}main{padding-bottom:96px}}

/* Wiz Bot v4: bubble only on hover (desktop), 2s flash on touch */
.wb .wb-say{transition:opacity .25s,transform .25s,visibility 0s}
.wb.say-hidden .wb-say{opacity:0;transform:translateX(12px);pointer-events:none;visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s}
@media(hover:hover) and (pointer:fine){.wb.say-hidden:not(.open):hover .wb-say,.wb.say-hidden:not(.open):focus-within .wb-say{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .25s,transform .25s,visibility 0s}}
@media(prefers-reduced-motion:reduce){.wb .wb-say{transition:none!important}}
/* Wiz Bot drag (touch/mobile) */
.wb.wb-draggable .wb-bubble{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wb.wb-draggable .wb-bubble img{pointer-events:none;-webkit-user-drag:none}
.wb.wb-placed:not(.open){right:auto!important;bottom:auto!important;transform:none!important}
.wb.wb-dragging .wb-bubble{animation:none!important;transform:scale(1.08)}
.wb.wb-snap:not(.open){transition:left .28s cubic-bezier(.2,.9,.3,1.1),top .28s ease}
.wb.wb-left:not(.open){flex-direction:row}
.wb.wb-left .wb-bubble{margin-right:0;margin-left:4px}
.wb.wb-left .wb-say::after{right:auto;left:-22px;border-left:0;border-right:22px solid #000}
.wb.wb-left .wb-say::before{right:auto;left:-14px;border-left:0;border-right:14px solid #fff}
.wb.wb-left.say-hidden .wb-say{transform:translateX(-12px)}
.wb.wb-placed.open{left:0!important;right:0!important;top:auto!important;bottom:0!important}
@media(prefers-reduced-motion:reduce){.wb.wb-snap:not(.open){transition:none}}
/* Wiz Bot drag v2: launcher box = head only; bubble out of layout */
.wb.wb-draggable:not(.open){display:block;gap:0;width:auto}
.wb.wb-draggable .wb-bubble{margin:0!important;display:block}
.wb.wb-draggable .wb-say{position:absolute;top:50%;right:calc(100% + 10px);left:auto;margin-top:-1.6em;width:max-content;max-width:150px}
.wb.wb-draggable.wb-left .wb-say{right:auto;left:calc(100% + 10px)}
.wb.wb-draggable.say-hidden .wb-say{display:none}
.wb.wb-dragging,.wb.wb-dragging *{transition:none!important}
/* Mobile/touch: no speech bubble at all */
@media (max-width:699.98px),(pointer:coarse){.wb .wb-say,.wb.say-hidden .wb-say{display:none!important}}

/* FAQ-only mode: typing bar hidden until the bot gets smarter */
.wb-form{display:none!important}
.wb-chips{max-height:none;flex-wrap:wrap;overflow:visible}
/* Drag on all devices (v3) */
.wb.wb-draggable .wb-bubble{cursor:grab}
.wb.wb-dragging .wb-bubble{cursor:grabbing}
.wb.wb-draggable.say-hidden .wb-say{display:block}
.wb.wb-dragging .wb-say{display:none!important}
@media (max-width:699.98px),(pointer:coarse){.wb .wb-say,.wb.say-hidden .wb-say{display:none!important}}
@media (min-width:700px) and (pointer:fine),(min-width:700px) and (pointer:none){
 .wb.wb-placed.open{left:auto!important;right:16px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
 .wb.wb-placed.wb-left.open{left:16px!important;right:auto!important}
 .wb.wb-left.say-hidden .wb-say{transform:translateX(-12px)}}
/* Follow on X button */
.blurb .btn.btn-follow{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background-color .2s,color .2s}
.btn-follow .x-ico{flex:0 0 auto;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn-follow::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none}
.blurb .btn.btn-follow:hover,.blurb .btn.btn-follow.is-hover{transform:translate(-2px,-3px) scale(1.04);box-shadow:8px 9px 0 var(--pink);background:var(--mint);color:#000}
.btn-follow:hover .x-ico,.btn-follow.is-hover .x-ico{transform:rotate(-12deg) scale(1.15)}
.btn-follow:hover::after,.btn-follow.is-hover::after{left:130%;transition:left .6s ease}
.blurb .btn.btn-follow:active{transform:translate(4px,4px) scale(.98);box-shadow:1px 1px 0 var(--pink);background:#fff;color:#000;transition-duration:.06s}
.btn-follow:focus-visible{outline:3px solid var(--mint);outline-offset:4px;box-shadow:5px 5px 0 var(--mint),0 0 0 7px var(--pink)}
@media (prefers-reduced-motion:reduce){.blurb .btn.btn-follow,.btn-follow .x-ico,.btn-follow::after{transition:none!important}.blurb .btn.btn-follow:hover,.blurb .btn.btn-follow.is-hover,.blurb .btn.btn-follow:active{transform:none}.btn-follow:hover .x-ico,.btn-follow.is-hover .x-ico{transform:none}.btn-follow::after{display:none}}