/*
Theme Name: Sneaker Store
Description: WooCommerce sneaker store theme with mega menu, shop filters, animated Black Friday banner and built-in offers.
Version: 1.3.0
Requires at least: 6.4
Requires PHP: 7.4
WC requires at least: 8.0
Text Domain: sneaker-store
*/
/* Layout: a stacked shop window. White product rails, broken up by black full-width promo bands. */
:root{
  --ink:#0f1b2d; --paper:#fff; --mist:#f4f6f8; --line:#e2e6ec; --muted:#5e6b7a; --sale:#e4460c; --gold:#ffb020; --mint:#22c55e; --blue:#16263f;
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--sale);outline-offset:2px}
h1,h2,h3,h4,p{margin:0}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;text-wrap:balance}
.wrap{max-width:1280px;margin-inline:auto;width:100%;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{width:100%}
.btn{transition:transform .15s,background .15s;display:inline-block;background:var(--ink);color:var(--paper);padding:13px 30px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.btn:hover{background:var(--sale);transform:translateY(-2px)}
.btn.inv{background:var(--paper);color:var(--ink)}
.btn.inv:hover{background:var(--sale);color:var(--paper)}

/* Top */
.topbar{background:var(--ink) ;color:var(--paper);font-size:13px;text-align:center;padding-block:8px}
.topbar{overflow:hidden;padding-block:8px}
.marq{display:flex;width:max-content;animation:marq 34s linear infinite}
.marq span{padding-inline:26px;white-space:nowrap;font-weight:500}
.marq b{color:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}
.topbar:hover .marq{animation-play-state:paused}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--paper);border-bottom:1px solid var(--line)}
.head-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:68px;gap:12px}
.logo{font:400 30px/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.logo span{color:var(--sale)}
.tools{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.icon{width:42px;height:42px;display:grid;place-items:center;position:relative}
.icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
.count{position:absolute;top:3px;right:1px;background:var(--sale);color:#fff;border-radius:50%;width:17px;height:17px;font-size:11px;font-weight:700;display:grid;place-items:center}
.burger{justify-self:start;display:none}
nav.main{border-top:1px solid var(--line)}
nav.main>.wrap>ul{display:flex;justify-content:center;flex-wrap:wrap;gap:0 4px;list-style:none;margin:0;padding:0}
.nl{display:block;padding:12px 13px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.nl:hover,.has:hover>.nl,.has.open>.nl{color:var(--sale)}
.nl.red{color:var(--sale)}
.mega{display:none;position:absolute;left:0;right:0;background:var(--paper);border-block:1px solid var(--line);max-height:70vh;overflow:auto;z-index:8}
.has:hover .mega,.has.open .mega{display:block}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px 28px;padding-block:24px}
.mega a{display:block;font-size:14px;padding-block:2px}
.mega a:hover{color:var(--sale)}
.mega .t{font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.mega .d{color:var(--muted);padding-left:10px;font-size:13px}

/* Hero */
.hero{background:linear-gradient(115deg,#0f1b2d 40%,#1e3454);color:var(--paper);overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:center;padding-block:34px}
.hero-left{display:grid;gap:18px;justify-items:start;min-width:0}
.kick{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.swing{position:relative;display:block;margin-left:46px;width:min(350px,calc(100% - 46px));transform-origin:0 12%;animation:sway 3.6s ease-in-out infinite;will-change:transform}
@keyframes sway{0%,100%{transform:perspective(900px) rotate(-3.5deg) rotateY(-6deg)}50%{transform:perspective(900px) rotate(4deg) rotateY(7deg)}}
.cord{position:absolute;left:-46px;top:-16px;width:62px;height:150px;overflow:visible;z-index:2}
.cord path{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:6 1.5}
.hangtag{position:relative;overflow:hidden;background:linear-gradient(150deg,#1e3454,#0f1b2d);border:1px solid #3f5472;border-radius:14px;padding:24px 22px 18px 34px;box-shadow:0 24px 50px rgba(0,0,0,.65);text-align:center}
.hangtag::before{content:"";position:absolute;inset:7px;border:1.5px dashed var(--gold);border-radius:9px;opacity:.75;pointer-events:none}
.hole{position:absolute;left:9px;top:42%;width:20px;height:20px;border-radius:50%;background:#050506;border:3px solid #a8a8b0}
.tag-name{font:400 22px/1 var(--display);text-transform:uppercase;letter-spacing:.05em;padding-bottom:9px;border-bottom:1px solid #66666f;margin-bottom:10px}
.tag-bf{font:400 clamp(62px,9vw,84px)/.98 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--gold);text-shadow:0 2px 0 #c97f00,0 4px 0 #8f5a00,0 7px 10px rgba(0,0,0,.5)}
.tag-bf span{display:block}
.tag-sub{border-top:2px solid var(--gold);margin-top:10px;padding-top:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.shine{position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,55%{left:-40%}100%{left:120%}}
.deal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:470px}
.tier{background:rgba(255,255,255,.07);border:1px solid #3f5472;border-radius:10px;padding:10px 6px;text-align:center}
.tier span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tier b{display:block;font:400 clamp(21px,2.4vw,28px)/1.15 var(--display);text-transform:uppercase}
.tier.free{background:var(--mint);border-color:var(--mint);color:var(--ink);box-shadow:0 0 18px rgba(34,197,94,.45);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 30px rgba(34,197,94,.8)}}
.plus{font:400 21px/1.2 var(--display);text-transform:uppercase;letter-spacing:.03em}
.plus em{font-style:normal;color:var(--gold)}
.scene{position:relative;aspect-ratio:1/.8;width:100%;max-width:100%;min-width:0}
.box{position:absolute;background:linear-gradient(180deg,#2a3d5c,#16263f);box-shadow:0 18px 30px rgba(0,0,0,.6)}
.lid{position:absolute;left:-2%;right:-2%;top:0;height:26%;background:linear-gradient(180deg,#3a5070,#22334e);box-shadow:0 3px 6px rgba(0,0,0,.6)}
.b1{left:22%;right:2%;top:42%;height:32%}
.b2{left:27%;right:6%;top:72%;height:26%;z-index:0}
.b1{z-index:1}
.shoe{position:absolute;overflow:visible;filter:drop-shadow(0 14px 12px rgba(0,0,0,.7));z-index:2}
.s1{width:64%;left:30%;top:9%;--u:#e4460c;--p:#b93708;--l:#ffd8c8;--s:#fff;animation:bob 3.6s ease-in-out infinite}
.s2{width:62%;left:0;bottom:1%;--u:#f4f6f8;--p:#dfe4ea;--l:#8a97a8;--s:#fff;z-index:3;animation:bob 3.6s ease-in-out infinite -1.8s}
@keyframes bob{50%{transform:translateY(-9px)}}
.up{fill:var(--u)}.pn{fill:var(--p)}.sl{fill:var(--s);stroke:var(--l);stroke-width:1.5}
.ln{fill:none;stroke:var(--l);stroke-width:2}.lc{fill:none;stroke:var(--l);stroke-width:6;stroke-linecap:round}.dt{fill:var(--l)}
.wa{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;z-index:7;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.wa svg{width:28px;height:28px;fill:#fff}
.clock-band{background:var(--sale) ;color:#fff}
.clock{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px;padding-block:14px}
.clock h2{font-size:22px}
.units{display:flex;gap:16px;font-variant-numeric:tabular-nums}
.units div{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.units b{display:block;font:400 28px/1.1 var(--display)}

/* Rails */
.sec{padding-block:44px}
.sec-head{display:flex;justify-content:center;margin-bottom:24px;text-align:center}
.sec-head h2{font-size:clamp(28px,4vw,40px)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 16px}
.card{display:flex;flex-direction:column;gap:3px;min-width:0}
.ph{position:relative;width:100%;aspect-ratio:5/3;max-width:100%;background:var(--mist);display:grid;place-items:center;margin-bottom:8px;overflow:hidden;border-radius:10px;transition:box-shadow .2s,transform .2s}
.card:hover .ph{transform:translateY(-4px);box-shadow:0 12px 24px rgba(15,27,45,.14)}
.ph svg{width:66%;overflow:visible;filter:drop-shadow(0 8px 6px rgba(15,27,45,.2));transition:transform .25s}
.card:hover .ph svg{transform:translateY(-5px) rotate(-5deg) scale(1.05)}
.qa{position:absolute;left:8px;right:8px;bottom:8px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:7px;border-radius:6px;transform:translateY(46px);transition:transform .2s}
.card:hover .qa,.ph:focus-visible .qa{transform:none}
.tag{position:absolute;top:8px;left:8px;background:var(--sale);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;z-index:1}
.rv{transform:translateY(20px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rv.in{transform:none}
.brand{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.name{font-weight:500;font-size:15px}
.price{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.dots{display:flex;gap:4px;margin-top:2px;font-size:12px;color:#14803c;font-weight:700}
/* Offers */
.offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.offer{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:6px;transition:transform .2s,box-shadow .2s}
.offer:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(15,27,45,.12)}
.offer b{font:400 28px/1.1 var(--display);text-transform:uppercase;color:var(--sale)}
.offer p{font-size:14px;color:var(--muted)}
.offer.hot{background:var(--ink);border-color:var(--ink);color:#fff}.offer.hot p{color:#c8d1dd}.offer.hot b{color:var(--gold)}
.brands{background:var(--ink);color:#fff;overflow:hidden;padding-block:16px}
.brands .marq{animation-duration:44s}
.brands span{font:400 26px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
/* Shop */
.shop{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start}
.flt{position:sticky;top:130px;max-height:calc(100vh - 150px);overflow:auto;padding-right:6px}
.flt h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-block:16px 8px}
.flt label.ck{display:flex;gap:8px;align-items:center;font-size:14px;padding-block:2px}
.flt .list{max-height:190px;overflow:auto}
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sz{border:1px solid var(--line);border-radius:6px;padding:7px 0;font-size:13px;text-align:center;transition:.15s}
.sz:hover{border-color:var(--ink)}.sz[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.sz:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);transition:transform .15s}
.sw:hover{transform:scale(1.12)}.sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--sale)}
input[type=range]{width:100%;accent-color:var(--sale)}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.bar select{border:1px solid var(--line);padding:8px;border-radius:6px;background:var(--paper);font:inherit;font-size:14px;color:var(--ink)}
.fbtn{display:none;border:1px solid var(--ink);border-radius:6px;padding:8px 14px;font-weight:700;font-size:14px}
.active{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.active button{background:var(--mist);border-radius:20px;padding:4px 11px;font-size:13px}
.note{background:#fff5e6;color:#7a4b00;font-size:13px;padding:8px 12px;border-radius:6px;margin-bottom:14px}
.empty{padding:40px;text-align:center;color:var(--muted);grid-column:1/-1}
.flt-close{display:none}
/* Product popup */
.pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(860px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;background:var(--paper);z-index:21;border-radius:14px;display:grid;grid-template-columns:1fr 1fr;animation:up .22s ease}
@keyframes up{from{transform:translate(-50%,-46%)}}
.pop-img{background:var(--mist);display:grid;place-items:center;padding:24px;min-width:0}
.pop-img svg{width:100%;overflow:visible;animation:bob 3.6s ease-in-out infinite}
.pop-in{padding:20px;display:grid;gap:10px;min-width:0;align-content:start}
.pop-in h2{font-size:30px}
.pop-in .x{position:absolute;right:8px;top:8px}
.perks{list-style:none;margin:0;padding:0;font-size:13px;display:grid;gap:3px;color:var(--muted)}
.perks b{color:var(--ink)}
.add{width:100%;background:var(--sale);color:#fff;padding:14px;font-weight:700;border-radius:8px;text-transform:uppercase;letter-spacing:.05em;transition:transform .15s}
.add:hover{transform:scale(1.02)}.add:disabled{background:#c7ced8;cursor:not-allowed;transform:none}
/* Cart */
.prog{background:var(--mist);border-radius:10px;padding:12px;margin-bottom:12px;font-size:14px;font-weight:700}
.track{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:8px}
.track i{display:block;height:100%;background:var(--mint);transition:width .4s}
.line{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:10px;padding-block:10px;border-bottom:1px solid var(--line);font-size:14px;align-items:center}
.line svg{width:76px;overflow:visible}
.qty{display:flex;gap:8px;align-items:center;margin-top:3px}.qty button{width:24px;height:24px;border:1px solid var(--line);border-radius:4px}
.sum{display:grid;gap:4px;margin-top:auto;padding-top:14px;font-size:14px}
.sum div{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.sum .save{color:#14803c;font-weight:700}.sum .tot{font-size:19px;font-weight:700;border-top:1px solid var(--line);padding-top:8px}
.code{display:flex;gap:6px;margin-top:10px}.code input{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:9px;font:inherit;background:var(--paper);color:var(--ink)}
.code button{background:var(--ink);color:#fff;border-radius:6px;padding:0 14px;font-weight:700;font-size:13px}
.msg{font-size:13px;color:var(--muted);min-height:18px}
.count.bump{animation:bump .35s}@keyframes bump{50%{transform:scale(1.6)}}
.welcome{position:fixed;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:min(310px,calc(100vw - 96px));background:var(--ink);color:#fff;border-radius:12px;padding:16px;z-index:7;box-shadow:0 12px 30px rgba(15,27,45,.4);animation:slide .4s ease;display:grid;gap:8px}
@keyframes slide{from{transform:translateY(40px)}}
.welcome b{font:400 24px/1.1 var(--display);text-transform:uppercase;color:var(--gold)}
.welcome .x{position:absolute;right:4px;top:4px;color:#fff}
.welcome .add{padding:9px;font-size:13px}
.more{display:flex;justify-content:center;margin-top:28px}
.alt{background:var(--mist)}
.alt .ph{background:var(--paper)}

/* Bands */
.banner{background:var(--ink);color:var(--paper);text-align:center;padding-block:76px}
.banner h2{font-size:clamp(44px,8vw,92px);margin-bottom:18px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tile{position:relative;overflow:hidden;display:flex;align-items:flex-end;background:var(--ink);transition:transform .2s;color:var(--paper);aspect-ratio:16/9;max-width:100%;padding:16px;font:400 clamp(20px,3vw,32px)/1.05 var(--display);text-transform:uppercase}
.tile:hover{transform:translateY(-4px);background:var(--sale)}
.tile svg{position:absolute;right:-6%;top:6%;width:72%;opacity:.9;overflow:visible;transition:transform .25s;--u:#2a3d5c;--p:#22334e;--l:#5e7290;--s:#fff}
.tile:hover svg{transform:rotate(-6deg) translateX(-8px)}
.tile b{position:relative;font-weight:400}
.slots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.slot{background:var(--mist);border:1px dashed #b5b5bd;color:var(--muted);display:grid;place-items:center;text-align:center;font-size:13px;padding:12px}
.slot.v{aspect-ratio:9/16;max-height:340px}
.slot.s{aspect-ratio:1;grid-auto-columns:150px}
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.feat h3{font-size:15px;text-transform:uppercase;letter-spacing:.04em;margin-block:8px 4px}
.feat p{font-size:14px;color:var(--muted)}
.feat svg{width:30px;height:30px;fill:none;stroke:var(--sale);stroke-width:1.7}
.pay{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pay span{border:1px solid var(--line);padding:6px 13px;font-size:13px;font-weight:500}
.foot-pay span{border-color:#3f5472}
.faq{max-width:760px;margin-inline:auto}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;padding-block:15px}
details p{padding-bottom:16px;color:var(--muted)}

/* Inner pages */
.page-head{background:var(--mist);padding-block:34px}
.page-head h1{font-size:clamp(34px,6vw,58px)}
.crumb{font-size:13px;color:var(--muted);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chips a{border:1px solid var(--line);padding:6px 13px;font-size:13px}
.chips a:hover{border-color:var(--ink)}
.prose{max-width:66ch;display:grid;gap:14px}
.prose .todo{background:var(--mist);border:1px dashed #b5b5bd;padding:16px;color:var(--muted)}

/* Footer */
footer{background:var(--ink);color:#d5dbe4;font-size:14px;padding-block:44px 24px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:30px}
footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer a:hover{color:#fff;text-decoration:underline}
footer .logo{color:#fff;display:block;margin-bottom:10px}
.copy{border-top:1px solid #2a3d5c;margin-top:30px;padding-top:16px;font-size:13px;color:#a4afbd}

/* Overlays */
.scrim{position:fixed;inset:0;background:rgba(11,11,13,.55);z-index:20}
.drawer{position:fixed;top:0;bottom:0;width:min(390px,90vw);background:var(--paper);z-index:21;display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top,0px)) 18px calc(16px + env(safe-area-inset-bottom,0px));overflow-y:auto}
.drawer.right{right:0}.drawer.left{left:0}
.dr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.dr-head h2{font-size:24px}
.x{font-size:28px;line-height:1;width:40px;height:40px}
.mob details{border:0;border-bottom:1px solid var(--line)}
.mob summary,.mob>a{display:block;padding-block:11px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.mob>a{border-bottom:1px solid var(--line)}
.mob details a{display:block;padding:5px 0 5px 12px;font-size:14px}
.mob details details a{padding-left:24px}
.mob details details summary{padding:6px 0 6px 12px;font-size:13px}
.search{position:fixed;top:0;left:0;right:0;background:var(--paper);z-index:21;padding-block:calc(18px + env(safe-area-inset-top,0px)) 18px;max-height:85vh;overflow:auto}
.search input{width:100%;border:0;border-bottom:2px solid var(--ink);font:400 22px var(--body);padding:8px 0;background:transparent;outline:0}
.res{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:3px 20px;margin-top:14px}
.res a{padding-block:4px;font-size:15px}.res a:hover{color:var(--sale)}

@media(max-width:900px){
  .burger{display:grid}
  .desk-gap{display:none}
  nav.main{display:none}
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .scene{max-width:520px;justify-self:center}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail .card:nth-child(n+5){display:none}
  .offers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop{grid-template-columns:minmax(0,1fr)}
  .fbtn{display:block}
  .flt{display:none;position:fixed;inset:0;top:0;z-index:21;max-height:none;background:var(--paper);padding:calc(16px + env(safe-area-inset-top,0px)) 18px 90px}
  .flt.open{display:block}
  .flt-close{display:block;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));background:var(--sale);color:#fff;padding:13px;border-radius:8px;font-weight:700}
  .pop{grid-template-columns:minmax(0,1fr)}
  .pop-img{padding:12px 50px}
  .qa{transform:none}
  .welcome{bottom:calc(84px + env(safe-area-inset-bottom,0px));width:calc(100vw - 32px)}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid>div:first-child{grid-column:1/-1}
  .logo{font-size:25px}
}
@media(max-width:520px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* WordPress and WooCommerce */
body{margin:0}
img{max-width:100%;height:auto}
.screen-reader-text{position:absolute;left:-9999px}
.logo img{max-height:52px;width:auto;display:block}
.nl{background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
ul.grid,ul.products{list-style:none;margin:0;padding:0}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.card:hover .ph img{transform:scale(1.05)}
.ph{aspect-ratio:1/1}
.card .price del{color:var(--muted);font-weight:400;margin-right:4px}
.card .price ins{text-decoration:none;color:var(--sale)}
.woocommerce ul.products,.woocommerce-page ul.products{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 16px}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products li.card{float:none!important;width:auto!important;margin:0!important;padding:0}
.flt a.sz{display:block}
.flt a.sw{display:block}
.sz.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sw.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--sale)}
.flt a.ck{display:block;font-size:14px;padding-block:3px}
.flt a.ck::before{content:"";display:inline-block;width:14px;height:14px;border:1px solid var(--muted);border-radius:3px;margin-right:8px;vertical-align:-2px}
.flt a.ck.on::before{background:var(--sale);border-color:var(--sale)}
.active a{background:var(--mist);border-radius:20px;padding:4px 11px;font-size:13px}
.woocommerce-result-count{margin:0!important;font-weight:700}
.woocommerce-ordering{margin:0!important}
.woocommerce-ordering select{border:1px solid var(--line);padding:8px;border-radius:6px;background:var(--paper)}
.shop-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce #respond input#submit{background:var(--ink)!important;color:#fff!important;border-radius:8px!important;padding:12px 20px!important}
.woocommerce .button.alt,.woocommerce button.button.alt,.woocommerce a.button.alt,.checkout-button,#place_order{background:var(--sale)!important;color:#fff!important;text-transform:uppercase;letter-spacing:.05em}
.woocommerce span.onsale{background:var(--sale)!important;border-radius:4px!important;min-height:auto;line-height:1.6;padding:2px 8px;min-width:0}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink)!important;font-weight:700}
.woocommerce-breadcrumb{font-size:13px!important;color:var(--muted)!important;margin:0 0 6px!important}
.drawer .woocommerce-mini-cart{list-style:none;margin:0;padding:0}
.drawer .woocommerce-mini-cart-item{position:relative;padding:10px 24px 10px 0;border-bottom:1px solid var(--line);font-size:14px}
.drawer .woocommerce-mini-cart-item img{width:60px;height:auto;float:left;margin-right:10px}
.drawer .woocommerce-mini-cart-item .remove{position:absolute;right:0;top:10px}
.drawer .woocommerce-mini-cart__total{display:flex;justify-content:space-between;font-weight:700;padding-block:12px}
.drawer .woocommerce-mini-cart__buttons{display:grid;gap:8px}
.drawer .woocommerce-mini-cart__buttons a{display:block;text-align:center;padding:12px;background:var(--ink);color:#fff;border-radius:8px;font-weight:700}
.drawer .woocommerce-mini-cart__buttons a.checkout{background:var(--sale)}
.scene-photo{width:100%;height:auto;border-radius:12px}
.woocommerce-product-search{display:flex;gap:8px}
.woocommerce-product-search input[type=search]{flex:1;min-width:0;border:0;border-bottom:2px solid var(--ink);font:400 20px var(--body);padding:8px 0;background:transparent;outline:0}
.perks{margin-top:14px}
.home-note{background:#fff5e6;color:#7a4b00;padding:12px;border-radius:6px;text-align:center}
.entry{max-width:66ch;display:grid;gap:12px}
.woocommerce-cart .sec>.wrap,.woocommerce-checkout .sec>.wrap{max-width:1100px}
@media(max-width:900px){.woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}

.b-kids{background:var(--sale)}
/* Product page */
.single-product div.product .product_title{font:400 clamp(30px,4vw,42px)/1.1 var(--display);text-transform:uppercase}
.single-product div.product p.price{font-size:28px;margin-block:8px 12px}
.single-product div.product p.price del{color:var(--muted);font-size:20px;font-weight:400}
.single-product div.product p.price ins{text-decoration:none;color:var(--sale)}
.ticks{list-style:none;margin:0 0 18px;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.ticks li{display:flex;gap:10px;align-items:center;font-size:15px}
.ticks li::before{content:"✓";flex:none;width:22px;height:22px;display:grid;place-items:center;background:var(--ink);color:var(--gold);border-radius:5px;font-size:13px;font-weight:700}
.single-product table.variations{width:100%}
.single-product table.variations th,.single-product table.variations td{display:block;padding:0;text-align:left}
.single-product table.variations select{width:100%;padding:13px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font:inherit;color:var(--ink);margin-block:6px 8px}
.single-product form.cart{display:block}
.single-product form.cart .quantity input{height:50px;width:64px;border:1px solid var(--line);border-radius:6px}
.single-product form.cart .single_add_to_cart_button{height:50px;padding-inline:34px!important;text-transform:uppercase;letter-spacing:.05em;background:var(--sale)!important}
.pdp-promo{display:grid;gap:2px;margin-top:16px;padding:16px 18px;border-radius:10px;background:var(--ink);color:#fff}
.pdp-promo b{font:400 24px/1.1 var(--display);text-transform:uppercase;color:var(--gold)}
.pdp-promo span{font-size:14px}

/* Banner photo: fade the edges into the background */
.scene-photo{border-radius:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);mask-composite:intersect}
@media(max-width:900px){.scene-photo{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%)}}

/* Category tiles with your own pictures */
.tile.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.tile.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0) 60%)}
.tile.has-img:hover{background:var(--ink)}
.tile.has-img:hover img{transform:scale(1.06)}
.tile.has-img b{z-index:1}