/*
Theme Name: W R GoatZ
Theme URI: https://wrgoatz.com
Author: Antigravity Pair
Description: Custom WooCommerce theme built from index.html for W R GoatZ community.
Version: 1.0.0
Text Domain: wrgoatz
*/

:root{
  --violet:#5B2EFF;
  --violet-deep:#3D14C9;
  --lime:#C6FF3D;
  --lime-soft:#E4FF9C;
  --ink:#151122;
  --paper:#FFFDF4;
  --char:#1C1B1F;
  --char2:#242329;
  --char3:#2E2D34;
  --tang:#FF6B2C;
  --pink:#FF5FB8;
  --display:'Rubik Bubbles',system-ui,sans-serif;
  --pixel:'Silkscreen',monospace;
  --body:'Space Grotesk',system-ui,sans-serif;
  --radius:22px;
  --stroke:3px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--char);color:var(--paper);position:relative;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
:focus-visible{outline:4px solid var(--tang);outline-offset:3px}
.wrap{width:min(1180px,92vw);margin:0 auto}
.pixel{font-family:var(--pixel);letter-spacing:.06em;text-transform:uppercase}
.display{font-family:var(--display);font-weight:400;line-height:.95}
h1,h2,h3{font-weight:400}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.5rem;border-radius:999px;border:var(--stroke) solid var(--ink);font-weight:700;font-size:1rem;background:var(--lime);color:var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:var(--paper)}
.btn.violet{background:var(--violet);color:var(--paper)}
.btn.tang{background:var(--tang);color:var(--ink)}
.btn.big{padding:1.1rem 2rem;font-size:1.15rem}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--stroke) solid var(--ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:88px;width:min(1440px,95vw) !important;}
.logo{display:inline-flex;align-items:center;gap:.7rem;background:var(--violet);border:var(--stroke) solid var(--ink);border-radius:999px;padding:.4rem 1.1rem .4rem .9rem;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.logo:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.logo .mark{font-family:var(--display);font-size:2.2rem;line-height:1;text-shadow:2px 2px 0 var(--ink)}
.logo .mark .w1{color:var(--lime)}
.logo .mark .w2{color:#fff}
.logo .mark .wz{color:var(--lime)}
.logo .sub{font-family:var(--pixel);font-size:.62rem;letter-spacing:.1em;color:#fff;text-transform:uppercase;line-height:1.2;max-width:70px}
.nav ul{display:flex;gap:1.8rem;list-style:none;font-weight:700;font-size:1.15rem}
.nav ul a{position:relative;padding:.25rem 0;white-space:nowrap !important;}
.nav ul a{color:var(--ink)}
.nav ul a.merchlink{background:var(--lime);border:2px solid var(--ink);border-radius:999px;padding:.35rem .9rem;box-shadow:3px 3px 0 var(--ink)}
.nav ul a.merchlink::after{display:none}
.nav ul a::after{content:"";position:absolute;left:0;bottom:-3px;height:4px;width:0;background:var(--lime);border-radius:2px;transition:width .2s}
.nav ul a:hover::after{width:100%}
.nav .btn{padding:.75rem 1.4rem;font-size:1.05rem;box-shadow:4px 4px 0 var(--ink)}
.burger{display:none;background:none;border:var(--stroke) solid var(--ink);border-radius:12px;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:20px;height:3px;background:var(--ink);border-radius:2px}
@media(max-width:1150px){
  .nav ul{display:none;position:absolute;top:88px;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:var(--stroke) solid var(--ink);padding:1rem 4vw 1.4rem;gap:1rem}
  .nav ul.open{display:flex}
  .nav ul{background:var(--paper)!important;border-bottom-color:var(--ink)!important}
  .nav .btn.desk{display:none}
  .burger{display:flex}
}

@media(min-width:1151px) and (max-width:1250px) {
  .nav ul {
    gap: 1.1rem !important;
    font-size: 1.0rem !important;
  }
}

/* ---------- hero ---------- */
.hero{position:relative;background:transparent;color:var(--lime);overflow:hidden;min-height:92vh;display:flex;align-items:center;border-bottom:var(--stroke) solid var(--ink)}
.slangwall{position:fixed;inset:-12% -8%;z-index:0;pointer-events:none;user-select:none;transform:rotate(-6deg);opacity:.32}
.slangwall .row{display:flex;gap:4vw;white-space:nowrap;font-family:var(--display);font-size:clamp(2.6rem,7vw,6rem);line-height:1;padding:.6vw 0;animation:drift 38s linear infinite;width:max-content}
.slangwall .row:nth-child(even){animation-direction:reverse;animation-duration:46s}
.slangwall .row:nth-child(3n){animation-duration:54s}
.slangwall .row span:nth-child(6n+1){color:var(--lime)}
.slangwall .row span:nth-child(6n+2){color:var(--paper)}
.slangwall .row span:nth-child(6n+3){color:var(--violet);filter:brightness(1.35)}
.slangwall .row span:nth-child(6n+4){color:var(--tang)}
.slangwall .row span:nth-child(6n+5){color:var(--pink)}
.slangwall .row span:nth-child(6n+6){color:#4DE3FF}
.slangwall .row:nth-child(odd) span{transform:rotate(-2deg)}
.slangwall .row:nth-child(even) span{transform:rotate(2deg)}
.slangwall .row span{display:inline-block}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero .wrap{position:relative;z-index:2;text-align:center;padding:5rem 0 6rem}
.hero .eyebrow{display:inline-block;background:var(--lime);color:var(--ink);font-family:var(--pixel);font-size:clamp(.85rem,1.6vw,1.25rem);font-weight:700;padding:1rem 1.8rem;border-radius:999px;border:var(--stroke) solid var(--ink);box-shadow:6px 6px 0 var(--ink);margin-bottom:2rem;line-height:1.3;max-width:94vw}
.hero h1{font-family:var(--display);font-size:clamp(4.2rem,15vw,12rem);line-height:.85;color:var(--lime);text-shadow:6px 6px 0 var(--ink);letter-spacing:.01em}
.hero h1 .l1{display:block;font-size:.9em}
.hero h1 .l2{display:block;color:var(--paper)}
.hero-badge{position:relative;display:inline-block;padding:1.2rem clamp(1.4rem,4vw,3rem) 1.4rem;animation:bob 4.5s ease-in-out infinite;will-change:transform}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
.hero-badge .blob{position:absolute;left:-8%;top:-7%;width:116%;height:114%;z-index:0;overflow:visible}
.hero-badge .blob path{fill:var(--char);stroke:var(--paper);stroke-width:4px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(6px 6px 0 var(--ink))}
.hero-badge h1{position:relative;z-index:1;margin:0}
.hero .tag{position:relative;z-index:2;font-family:var(--pixel);font-size:clamp(.8rem,2vw,1.15rem);color:var(--paper);margin:0 auto 0;letter-spacing:.2em}
.hero p.lead{max-width:600px;margin:2.4rem auto 2.2rem;font-size:1.15rem;color:#D8D4E8}
.hero-logo{position:relative;z-index:2;width:min(820px,94vw);margin:0 auto -4rem;animation:bob 5s ease-in-out infinite}
.hero-logo .clip{clip-path:url(#logoBlob);-webkit-clip-path:url(#logoBlob);background:var(--char)}
.hero-logo video{display:block;width:100%;height:auto}
.hero-logo .outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hero-logo .outline path{fill:none;stroke:var(--paper);vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.hero-logo .outline .p1{stroke-width:2.6px;opacity:.95;stroke-dasharray:180 6 40 4;animation:sketch 9s linear infinite}
.hero-logo .outline .p2{stroke-width:1.4px;opacity:.55;transform:translate(.004px,-.003px) rotate(.4deg);transform-origin:center;stroke-dasharray:90 5 30 3;animation:sketch 13s linear infinite reverse}
.hero-logo .outline .p3{stroke-width:1px;opacity:.35;transform:translate(-.003px,.004px) rotate(-.5deg);transform-origin:center;stroke-dasharray:60 8;animation:sketch 17s linear infinite}
@keyframes sketch{to{stroke-dashoffset:-1000}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero .cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.spark{position:absolute;color:var(--lime);font-size:2.4rem;animation:twinkle 2.6s ease-in-out infinite;z-index:3}
@keyframes twinkle{0%,100%{transform:scale(.7) rotate(0);opacity:.6}50%{transform:scale(1.15) rotate(20deg);opacity:1}}
.chip-row{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2.6rem}
.chip{font-family:var(--pixel);font-size:.62rem;padding:.5rem .8rem;border-radius:999px;background:var(--char2);border:2px solid var(--lime);color:var(--lime)}

/* ---------- ticker ---------- */
.ticker{background:var(--lime);border-bottom:var(--stroke) solid var(--ink);overflow:hidden;padding:.8rem 0}
.ticker .track{display:flex;gap:3rem;white-space:nowrap;font-family:var(--pixel);font-size:.9rem;font-weight:700;color:var(--ink);animation:drift 22s linear infinite}
.ticker .track span::before{content:"✦";margin-right:1.2rem;color:var(--violet)}

/* ---------- sections ---------- */
section{padding:5.5rem 0;position:relative;z-index:1}
.ticker,.brands,footer{position:relative;z-index:1}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.sec-head h2{font-family:var(--display);font-size:clamp(2.6rem,6vw,4.6rem);line-height:.95;color:var(--paper)}
.sec-head h2 em{font-style:normal;color:var(--ink);background:var(--lime);padding:0 .3em;border-radius:14px}
.sec-head p{max-width:420px;font-size:1.05rem}
.kicker{font-family:var(--pixel);font-size:.7rem;color:var(--lime);margin-bottom:.9rem;display:block}

/* stats */
.stats{background:rgba(28,27,31,.55)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.stat{border:var(--stroke) solid var(--ink);border-radius:var(--radius);padding:1.6rem 1.4rem;background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--lime);transform:rotate(var(--tilt,0deg));transition:transform .2s}
.stat:hover{transform:rotate(0) translateY(-4px)}
.stat b{font-family:var(--display);font-size:clamp(2.2rem,4.5vw,3.4rem);color:var(--violet);display:block;line-height:1}
.stat span{font-weight:600}
.stat:nth-child(1){--tilt:-2deg}.stat:nth-child(2){--tilt:1.5deg;background:var(--lime)}.stat:nth-child(3){--tilt:-1deg}.stat:nth-child(4){--tilt:2deg;background:var(--violet);color:var(--paper)}.stat:nth-child(4) b{color:var(--lime)}
@media(max-width:860px){.stats .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats .grid{grid-template-columns:1fr}}

/* features - sticker cards */
.features{background:rgba(91,46,255,.92);border-top:var(--stroke) solid var(--ink);border-bottom:var(--stroke) solid var(--ink)}
.features .sec-head h2{color:var(--lime)}
.features .sec-head h2 em{background:var(--paper);color:var(--violet)}
.features .sec-head p{color:#E8E2FF}
.features .kicker{color:var(--lime)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.card{position:relative;border:var(--stroke) solid var(--ink);border-radius:var(--radius);padding:1.8rem 1.6rem 1.6rem;background:var(--paper);color:var(--ink);box-shadow:7px 7px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:11px 11px 0 var(--ink)}
.card .ico{width:60px;height:60px;border-radius:18px;border:var(--stroke) solid var(--ink);display:grid;place-items:center;font-size:1.7rem;margin-bottom:1.1rem;background:var(--lime)}
.card h3{font-family:var(--display);font-size:1.7rem;color:var(--violet);margin-bottom:.5rem}
.card p{color:#3d3850}
.card .stick{position:absolute;top:-14px;right:16px;background:var(--tang);color:var(--ink);font-family:var(--pixel);font-size:.55rem;padding:.4rem .7rem;border-radius:999px;border:2px solid var(--ink);transform:rotate(6deg)}
.card .link{display:inline-block;margin-top:1rem;font-weight:700;color:var(--violet);border-bottom:3px solid var(--lime)}
.card.v{background:var(--char);color:var(--paper);box-shadow:7px 7px 0 var(--lime)}.card.v h3{color:var(--lime)}.card.v p{color:#D8D4E8}.card.v .link{color:var(--lime)}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

/* how it works */
.how{background:rgba(28,27,31,.55)}
.how .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.step{padding:1.4rem 1.2rem;border-radius:var(--radius);border:3px dashed var(--lime);background:var(--char2);color:var(--paper)}
.step .n{font-family:var(--display);font-size:2.6rem;color:var(--lime);line-height:1;margin-bottom:.4rem}
.step h4{font-size:1.15rem;margin-bottom:.3rem;font-weight:700}
@media(max-width:860px){.how{background:rgba(28,27,31,.55)}
.how .steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.how{background:rgba(28,27,31,.55)}
.how .steps{grid-template-columns:1fr}}

/* events */
.events{background:rgba(36,35,41,.88);color:var(--paper);border-top:var(--stroke) solid var(--ink);border-bottom:var(--stroke) solid var(--ink)}
.events .sec-head h2{color:var(--lime)}
.events .sec-head h2 em{background:var(--paper);color:var(--violet)}
.events .sec-head p{color:#e8e2ff}
.ev-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:1.4rem}
.ev{border:var(--stroke) solid var(--ink);border-radius:var(--radius);padding:1.5rem;background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;justify-content:space-between;min-height:220px;transition:transform .2s}
.ev:hover{transform:translateY(-4px)}
.ev.feature{grid-row:span 2;background:var(--lime);min-height:100%}
.ev .date{font-family:var(--pixel);font-size:.62rem;background:var(--ink);color:var(--lime);padding:.4rem .7rem;border-radius:999px;align-self:flex-start;margin-bottom:1rem}
.ev h3{font-family:var(--display);font-size:1.6rem;color:var(--violet);line-height:1;margin-bottom:.4rem}
.ev.feature h3{font-size:clamp(2rem,4vw,3.2rem)}
.ev .meta{font-size:.9rem;font-weight:600;color:#3d3850}
.ev .btn{margin-top:1.2rem;align-self:flex-start;padding:.6rem 1.1rem;font-size:.9rem;box-shadow:3px 3px 0 var(--ink)}
@media(max-width:860px){.ev-grid{grid-template-columns:1fr 1fr}.ev.feature{grid-column:span 2;grid-row:auto}}
@media(max-width:520px){.ev-grid{grid-template-columns:1fr}.ev.feature{grid-column:auto}}

/* brands */
.brands{padding:2.5rem 0;border-bottom:var(--stroke) solid var(--ink);background:rgba(255,253,244,.96)}
.brands .kicker{color:var(--violet)}
.brands .kicker{text-align:center}
.brands .track{display:flex;gap:2.5rem;white-space:nowrap;animation:drift 30s linear infinite;font-family:var(--display);font-size:1.7rem;color:var(--ink);opacity:.8}
.brands .track span{padding:.3rem 1rem;border:3px solid var(--ink);border-radius:999px}
.brands .track span:nth-child(odd){background:var(--lime)}
.brands .clip{overflow:hidden}

/* voices */
.voices{background:rgba(28,27,31,.55)}
.voices .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.voice{border:var(--stroke) solid var(--ink);border-radius:var(--radius);padding:1.6rem;background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--ink);position:relative;transform:rotate(var(--tilt,0));transition:transform .2s}
.voice:hover{transform:rotate(0) scale(1.02)}
.voice:nth-child(1){--tilt:-1.5deg}.voice:nth-child(2){--tilt:1deg;background:var(--lime)}.voice:nth-child(3){--tilt:-1deg;background:var(--violet);color:var(--paper)}.voice:nth-child(3) .who small{color:var(--lime)}
.voice q{font-size:1.1rem;font-weight:500;display:block;margin-bottom:1.2rem}
.voice q::before,.voice q::after{content:none}
.voice .who{display:flex;align-items:center;gap:.8rem}
.voice .av{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:var(--violet);color:var(--lime);font-family:var(--display);display:grid;place-items:center;font-size:1.1rem}
.voice .who b{display:block}
.voice .who small{font-family:var(--pixel);font-size:.55rem;color:var(--violet)}
@media(max-width:860px){.voices{background:rgba(28,27,31,.55)}
.voices .grid{grid-template-columns:1fr}}

/* merch */
.merch{background:rgba(28,27,31,.55)}
.merch .sec-head h2 em{background:var(--lime);color:var(--ink)}
.m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.m-card{border:var(--stroke) solid var(--ink);border-radius:var(--radius);background:var(--paper);color:var(--ink);box-shadow:7px 7px 0 var(--ink);overflow:hidden;position:relative;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.m-card:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:11px 11px 0 var(--lime)}
.m-card img{width:100%;height:auto;display:block;border-bottom:var(--stroke) solid var(--ink)}
.m-card .info{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.m-card h3{font-family:var(--display);font-size:1.35rem;color:var(--violet);line-height:1}
.m-card .price{font-weight:700;font-size:1.05rem}
.m-card .price s{color:#8a8496;font-weight:500;margin-left:.4rem}
.m-card .btn{margin-top:auto;padding:.6rem 1rem;font-size:.9rem;box-shadow:3px 3px 0 var(--ink);align-self:flex-start}
.m-card .stick{position:absolute;top:12px;left:12px;background:var(--tang);color:var(--ink);font-family:var(--pixel);font-size:.55rem;padding:.4rem .7rem;border-radius:999px;border:2px solid var(--ink);transform:rotate(-5deg);z-index:2}
.m-card .stick.lime{background:var(--lime)}
.m-card .stick.pink{background:var(--pink)}
.m-row2{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-top:1.6rem}
.m-mini{border:3px dashed var(--lime);border-radius:var(--radius);padding:1.1rem 1.2rem;background:var(--char2);color:var(--paper)}
.m-mini b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--lime);margin-bottom:.2rem}
.m-mini span{font-size:.9rem;color:#D8D4E8}
.m-mini .p{font-family:var(--pixel);font-size:.7rem;color:var(--paper);margin-top:.5rem;display:block}
.drop-bar{margin-top:2.2rem;border:var(--stroke) solid var(--ink);border-radius:999px;background:var(--lime);color:var(--ink);box-shadow:6px 6px 0 var(--ink);display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1.4rem;flex-wrap:wrap}
.drop-bar b{font-family:var(--display);font-size:1.3rem}
.drop-bar .pixel{font-size:.7rem}
@media(max-width:1000px){.m-grid,.m-row2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.m-grid,.m-row2{grid-template-columns:1fr}}

/* app cta */
.app{background:rgba(28,27,31,.55);border-top:var(--stroke) solid var(--char3)}
.app .box{background:var(--violet);border:var(--stroke) solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);padding:3.5rem 3rem;display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;color:var(--paper);position:relative;overflow:hidden}
.app h2{font-family:var(--display);font-size:clamp(2.6rem,6vw,4.4rem);color:var(--lime);line-height:.95;margin-bottom:1rem}
.app p{font-size:1.15rem;color:#e8e2ff;margin-bottom:1.6rem;max-width:480px}
.app .stores{display:flex;gap:1rem;flex-wrap:wrap}
.phone{justify-self:center;width:230px;height:440px;border:5px solid var(--ink);border-radius:36px;background:var(--paper);box-shadow:8px 8px 0 var(--ink);position:relative;overflow:hidden;transform:rotate(4deg)}
.phone .notch{width:90px;height:22px;background:var(--ink);border-radius:0 0 14px 14px;margin:0 auto}
.phone .screen{padding:1rem}
.phone .pill{height:14px;border-radius:7px;background:var(--lime);border:2px solid var(--ink);margin:.55rem 0}
.phone .pill.v{background:var(--violet)}
.phone .pill.short{width:60%}
.phone .big{font-family:var(--display);font-size:1.5rem;color:var(--violet);margin:.4rem 0 .6rem}
.phone .card-mini{border:2px solid var(--ink);border-radius:14px;padding:.6rem;margin-top:.7rem;background:#fff;font-size:.72rem;font-weight:700}
.phone .card-mini small{display:block;font-family:var(--pixel);font-size:.45rem;color:var(--violet)}
@media(max-width:860px){.app .box{grid-template-columns:1fr;padding:2.4rem 1.6rem}.phone{display:none}}

/* footer */
footer{background:rgba(17,16,21,.94);color:var(--paper);padding:3.5rem 0 2rem}
footer .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}
footer h5{font-family:var(--pixel);font-size:.65rem;color:var(--lime);margin-bottom:1rem}
footer li{list-style:none;margin:.45rem 0;color:#cfc8ea}
footer li a:hover{color:var(--lime)}
footer .logo{background:var(--char2);box-shadow:4px 4px 0 var(--lime)}
footer .brand p{margin-top:.8rem;color:#cfc8ea;max-width:340px}
footer .bottom{border-top:2px solid #332a55;padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:#9b93b8}
.social{display:flex;gap:.6rem;margin-top:1.2rem}
.social a{width:40px;height:40px;border-radius:12px;border:2px solid var(--lime);display:grid;place-items:center;font-family:var(--pixel);font-size:.6rem;color:var(--lime)}
.social a:hover{background:var(--lime);color:var(--ink)}
@media(max-width:860px){footer .top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){footer .top{grid-template-columns:1fr}}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- WooCommerce shop adjustments ---------- */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.6rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.products::before, ul.products::after {
  display: none !important;
}
ul.products li.product,
.m-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 480px !important;
}
ul.products li.product {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  list-style: none !important;
}
ul.products li.product img,
.m-card img {
  width: 100% !important;
  height: 220px !important;
  object-fit: contain !important;
  background-color: #eef2f7 !important;
  border-bottom: var(--stroke) solid var(--ink) !important;
}
ul.products li.product .info,
.m-card .info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
ul.products li.product .info h3 a,
.m-card h3 a {
  color: var(--violet) !important;
  text-decoration: none !important;
}
ul.products li.product .info h3 a:hover,
.m-card h3 a:hover {
  color: var(--violet-deep) !important;
}
ul.products li.product .info .btn,
.m-card .btn {
  margin-top: auto !important;
}
ul.products li.product .info .btn.button,
.m-card .btn.button {
  background: var(--lime) !important;
  color: var(--ink) !important;
  border: var(--stroke) solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  padding: .6rem 1rem !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  text-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform .15s, box-shadow .15s !important;
  text-decoration: none !important;
}
ul.products li.product .info .btn.button:hover,
.m-card .btn.button:hover {
  transform: translate(-2px,-2px) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
  background: var(--lime) !important;
  color: var(--ink) !important;
}
ul.products li.product .info .btn.button:active,
.m-card .btn.button:active {
  transform: translate(3px,3px) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
}
.woocommerce-result-count {
  color: var(--paper) !important;
  font-size: 0.9rem !important;
}
.woocommerce-ordering select {
  background: var(--char2) !important;
  color: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  padding: 0.5rem !important;
  border-radius: 8px !important;
  font-family: var(--body) !important;
}
@media(max-width:1000px){
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media(max-width:540px){
  ul.products {
    grid-template-columns: 1fr !important;
  }
}
.woocommerce-pagination {
  margin-top: 3rem !important;
}
.woocommerce-pagination ul.page-numbers {
  display: inline-flex !important;
  gap: 0.5rem !important;
  border: none !important;
  list-style: none !important;
  padding: 0 !important;
}
.woocommerce-pagination ul.page-numbers li {
  border: none !important;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border: var(--stroke) solid var(--ink) !important;
  border-radius: 12px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
.woocommerce-pagination ul.page-numbers li span.current {
  background: var(--lime) !important;
}

/* ---------- WooCommerce Sidebar Widgets Overrides ---------- */

/* Global Sidebar Layout */
.shop-sidebar {
  align-self: start;
}

/* Global Widget Box Styling */
.shop-sidebar .widget {
  background: var(--char2) !important;
  border: var(--stroke) solid var(--ink) !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  margin-bottom: 2rem !important;
}

.shop-sidebar .widget:last-child {
  margin-bottom: 0 !important;
}

/* Headings */
.shop-sidebar .widget-title {
  font-family: var(--pixel) !important;
  font-size: 0.85rem !important;
  color: var(--lime) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-top: 0 !important;
  margin-bottom: 1.2rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid var(--ink) !important;
  display: block !important;
}

/* List Widgets (Categories, Attributes, Nav) */
.shop-sidebar .widget ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.shop-sidebar .widget ul li {
  padding: 0.6rem 0 !important;
  border-bottom: 1px dashed #332a55 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.9rem !important;
}

.shop-sidebar .widget ul li:last-child {
  border-bottom: none !important;
}

.shop-sidebar .widget ul li a {
  color: var(--paper) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.15s !important;
}

.shop-sidebar .widget ul li a:hover {
  color: var(--lime) !important;
}

/* Count badge */
.shop-sidebar .widget ul li .count {
  font-family: var(--pixel) !important;
  font-size: 0.6rem !important;
  color: var(--lime) !important;
  background: var(--ink) !important;
  border: 1px solid var(--lime) !important;
  padding: 0.15rem 0.4rem !important;
  border-radius: 999px !important;
}

/* Active Filters Tag Style */
.widget_layered_nav_filters ul li {
  border-bottom: none !important;
  display: inline-block !important;
  margin-right: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}

.widget_layered_nav_filters ul li a {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--pink) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-family: var(--body) !important;
  font-weight: 700 !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  text-decoration: none !important;
  transition: transform 0.1s !important;
}

.widget_layered_nav_filters ul li a:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  background: var(--pink) !important;
  color: var(--ink) !important;
}

/* Price filter widget styling */
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: var(--char3) !important;
  border: 2px solid var(--ink) !important;
  height: 8px !important;
  border-radius: 999px !important;
}
.widget_price_filter .price_slider_wrapper .ui-slider-range {
  background: var(--lime) !important;
}
.widget_price_filter .price_slider_wrapper .ui-slider-handle {
  background: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}
.widget_price_filter .price_slider_amount {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 1.2rem !important;
}
.widget_price_filter .price_slider_amount .button {
  padding: 0.5rem 1rem !important;
  font-size: 0.8rem !important;
  background: var(--lime) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-weight: 700 !important;
}
.widget_price_filter .price_slider_amount .price_label {
  font-size: 0.9rem !important;
  color: var(--paper) !important;
  font-weight: 600 !important;
}

/* Search widget styling */
.widget_product_search .woocommerce-product-search {
  display: flex !important;
  gap: 0.5rem !important;
}

.widget_product_search .search-field {
  flex: 1 !important;
  background: var(--char) !important;
  color: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  padding: 0.6rem 0.8rem !important;
  border-radius: 10px !important;
  font-family: var(--body) !important;
  font-size: 0.9rem !important;
  width: 100% !important;
}

.widget_product_search button {
  background: var(--lime) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  padding: 0.6rem 1rem !important;
  border-radius: 10px !important;
  font-family: var(--pixel) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  cursor: pointer !important;
}

.widget_product_search button:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
}

/* Products lists widgets */
.widget_products ul li {
  display: flex !important;
  gap: 0.8rem !important;
  padding: 0.8rem 0 !important;
  border-bottom: 1px dashed #332a55 !important;
}

.widget_products ul li img {
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
  border: 2px solid var(--ink) !important;
  border-radius: 8px !important;
  margin: 0 !important;
  float: none !important;
}

.widget_products ul li .product-title {
  font-family: var(--body) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: var(--paper) !important;
  line-height: 1.3 !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
}

.widget_products ul li .amount {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--lime) !important;
}

/* Star ratings in widgets */
.widget_rating_filter ul li {
  border-bottom: none !important;
}

.widget_rating_filter ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: var(--paper) !important;
}

.widget_rating_filter .star-rating {
  font-size: 0.85rem !important;
  color: var(--lime) !important;
}

@media(max-width: 860px) {
  .shop-container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ---------- WooCommerce Single Product Page Styling ---------- */
.woocommerce #content div.product,
.woocommerce div.product,
.woocommerce-page #content div.product,
.woocommerce-page div.product {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
}
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

@media(max-width: 860px) {
  .woocommerce #content div.product,
  .woocommerce div.product,
  .woocommerce-page #content div.product,
  .woocommerce-page div.product {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Gallery styling */
.woocommerce-product-gallery {
  background: #eef2f7 !important;
  border: var(--stroke) solid var(--ink) !important;
  border-radius: var(--radius) !important;
  box-shadow: 7px 7px 0 var(--ink) !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
}

.woocommerce-product-gallery img {
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 10 !important;
  border: 2px solid var(--ink) !important;
  border-radius: 50% !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  background: #fff !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
}

.woocommerce-product-gallery .flex-control-thumbs {
  display: flex !important;
  gap: 0.8rem !important;
  margin-top: 0 !important;
  padding: 1rem !important;
  list-style: none !important;
  background: var(--char2) !important;
  border-top: var(--stroke) solid var(--ink) !important;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  width: 70px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  float: none !important;
}

/* Summary container content */
.summary.entry-summary h1.product_title {
  font-family: var(--display) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  color: var(--lime) !important;
  line-height: 1.1 !important;
  margin-bottom: 1rem !important;
}

.summary.entry-summary p.price,
.summary.entry-summary span.price {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--paper) !important;
  margin-bottom: 1.5rem !important;
}

.summary.entry-summary p.price ins,
.summary.entry-summary span.price ins {
  text-decoration: none !important;
  color: var(--lime) !important;
}

.summary.entry-summary p.price del,
.summary.entry-summary span.price del {
  color: #8a8496 !important;
  font-size: 1.1rem !important;
  margin-right: 0.5rem !important;
}

.summary.entry-summary .woocommerce-product-details__short-description {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  margin-bottom: 2rem !important;
  color: #d8d4e8 !important;
}

/* Quantity and Add to Cart Form */
.woocommerce .quantity .qty {
  width: 80px !important;
  height: 48px !important;
  background: var(--char2) !important;
  color: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 12px !important;
  padding: 0.5rem !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.woocommerce form.cart {
  display: flex !important;
  gap: 1rem !important;
  align-items: center !important;
  margin-bottom: 2.5rem !important;
}

.woocommerce form.cart .single_add_to_cart_button {
  background: var(--lime) !important;
  color: var(--ink) !important;
  border: var(--stroke) solid var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  padding: 0.8rem 2rem !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-shadow: none !important;
}

.woocommerce form.cart .single_add_to_cart_button:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
  background: var(--lime) !important;
  color: var(--ink) !important;
}

/* Metadata */
.product_meta {
  border-top: 1px dashed var(--char3) !important;
  padding-top: 1.5rem !important;
  font-family: var(--body) !important;
  font-size: 0.85rem !important;
  color: #9b93b8 !important;
  line-height: 1.6 !important;
}

.product_meta span {
  display: block !important;
}

.product_meta a {
  color: var(--lime) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.product_meta a:hover {
  text-decoration: underline !important;
}

/* Description / Reviews Tabs */
.woocommerce-tabs {
  margin-top: 4rem !important;
  border-top: 2px solid var(--ink) !important;
  padding-top: 2.5rem !important;
  grid-column: 1 / -1 !important;
}

.woocommerce-tabs ul.tabs {
  display: flex !important;
  gap: 0.5rem !important;
  border-bottom: var(--stroke) solid var(--ink) !important;
  padding: 0 !important;
  background: transparent !important;
  margin-bottom: 2rem !important;
  list-style: none !important;
}

.woocommerce-tabs ul.tabs li {
  background: var(--char2) !important;
  border: var(--stroke) solid var(--ink) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-tabs ul.tabs li a {
  display: block !important;
  padding: 0.8rem 1.5rem !important;
  color: var(--paper) !important;
  font-family: var(--pixel) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.woocommerce-tabs ul.tabs li.active {
  background: var(--lime) !important;
  border-color: var(--ink) !important;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--ink) !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel {
  background: var(--char2) !important;
  border: var(--stroke) solid var(--ink) !important;
  border-radius: var(--radius) !important;
  padding: 2.5rem 2rem !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
  color: var(--paper) !important;
  line-height: 1.8 !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
  font-family: var(--display) !important;
  font-size: 1.6rem !important;
  color: var(--lime) !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.2 !important;
}

/* Related products and Upsells */
section.related.products,
section.upsells.products {
  margin-top: 2rem !important;
  border-top: 2px solid var(--ink) !important;
  padding-top: 2rem !important;
  grid-column: 1 / -1 !important;
}

section.related.products h2,
section.upsells.products h2 {
  font-family: var(--display) !important;
  font-size: 2.2rem !important;
  color: var(--paper) !important;
  margin-bottom: 2.5rem !important;
  line-height: 1.2 !important;
}