/* Breaking Budz approved cinematic skatepark hero. Layout only: catalog/checkout/admin untouched. */
html{scroll-padding-top:18px}
.site-shell{max-width:1500px;margin-inline:auto}
.brand-nav{
  min-height:78px;display:grid;grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr);
  gap:12px;align-items:center;padding:5px clamp(14px,3vw,38px);
  background:linear-gradient(95deg,#0a0412 0%,#190821 54%,#100818 100%);
  border-bottom:1px solid rgba(160,255,82,.5)
}
.brand-nav-home{justify-self:center;max-width:100%;min-width:0;z-index:2}
.brand-nav-wordmark{width:clamp(150px,24vw,234px);max-height:77px;object-position:center}
.site-menu-toggle{z-index:10;width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:#f9f0ff;cursor:pointer;border-radius:10px;justify-self:start;transition:background .2s,color .2s}
.site-menu-toggle:hover,.site-menu-toggle[aria-expanded="true"]{background:#352044;color:#aaff67}
.site-menu-toggle svg{width:28px;height:28px}
.brand-nav .cart-trigger{justify-self:end;margin-left:0;width:48px;height:48px;background:#180c26;border:1px solid rgba(184,94,227,.56);box-shadow:0 0 18px #a52ef231}
.site-quick-nav{position:absolute;top:76px;left:clamp(13px,3vw,38px);min-width:220px;z-index:18;padding:10px;border:1px solid #b944e8;border-radius:13px;background:#13091ef5;box-shadow:0 14px 46px #000b;backdrop-filter:blur(10px)}
.site-quick-nav a{color:#f8e5ff;display:block;text-decoration:none;font-size:14px;font-weight:750;padding:13px 14px;border-radius:9px;letter-spacing:.03em}
.site-quick-nav a:hover,.site-quick-nav a:focus-visible{background:#44205b;color:#bfff89}
.welcome-marquee{height:39px;border-top:1px solid #54b93577;border-bottom:1px solid #aefc8b9e;background:linear-gradient(90deg,#04180e,#090a12 25%,#0d1720 65%,#04180e);box-shadow:0 0 16px #2cff4955}
.marquee-track span{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.marquee-track b{color:#c7ff64}
/* The original approved graphic is the scene only; controls and lower content are live HTML. */
.hero.skate-hero{padding:0;min-height:0;position:relative;display:block;overflow:hidden;isolation:isolate;background:#08040f}
.skate-hero .hero-aura{pointer-events:none;left:50%;top:-18%;opacity:.7}
.skate-hero-layout{position:relative;z-index:1;width:min(100%,1080px);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,66px)}
.skate-art-wrap{position:relative;flex:0 1 560px;min-width:0;isolation:isolate;overflow:hidden;align-self:stretch}
.skate-art{display:block;width:100%;height:auto;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}
.skate-art-glow{position:absolute;inset:11% -4% 0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 48% 45%,#a940b83e,transparent 60%);animation:skate-pulse 9s ease-in-out infinite alternate}
@keyframes skate-pulse{to{opacity:.48;transform:scale(1.07)}}

.skate-hero-content{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px 12px}
.skate-scene-caption{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.3vw,16px);white-space:nowrap;font-weight:1000;line-height:1;letter-spacing:-.035em;font-family:Impact,"Arial Black",system-ui,sans-serif;font-style:italic;font-size:clamp(29px,4vw,55px);transform:rotate(-1deg);filter:drop-shadow(3px 5px 0 #080210)}
.skate-flower{color:#b2ff15;text-shadow:0 0 17px #72ff284b,2px 2px 0 #25520c,-2px -2px 0 #d0ff6e}
.skate-dot{color:#a9ff09;font-size:.75em;text-shadow:0 0 12px #78ff37}
.skate-hash{color:#ec5bfb;text-shadow:0 0 14px #d536f14c,2px 2px 0 #68118b,-2px -2px 0 #ffc4ff}
.skate-enter-menu{width:min(100%,430px);min-height:62px;padding:17px 22px;border-radius:24px;font-size:clamp(12px,1.3vw,16px);letter-spacing:.15em;justify-content:space-around;background:linear-gradient(108deg,#ff9d24 0%,#f34e8c 47%,#9200f5 100%);border:2px solid #ffb76e;box-shadow:0 0 6px #ffac5d,0 0 23px #f500c286,0 6px 25px #0008;text-shadow:0 1px 3px #290525}
.skate-enter-menu span{font-size:27px}
.skate-perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:10px;margin-top:6px}
.skate-perk{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;color:#f5edff;font:850 10px/1.35 system-ui,sans-serif;letter-spacing:.03em;text-shadow:0 2px 6px #000;min-width:0}
.skate-perk svg{color:#eac0ff;width:30px;height:30px;filter:drop-shadow(0 0 7px #ce77e068)}
.skate-hero-boundary{height:2px;background:linear-gradient(90deg,#801d91,#90ed56,#27eaff,#f94bc7,#801d91);box-shadow:0 0 12px #d340e4}
@media(min-width:820px){
 .skate-hero{background-image:radial-gradient(ellipse 38% 48% at 20% 42%,#7400a731,transparent 90%),radial-gradient(ellipse 42% 42% at 85% 35%,#358f4b25,transparent 90%)}
 .skate-hero-layout{padding:8px 22px 22px}
 .skate-art-wrap{border-radius:12px}
 .skate-hero-content{padding:30px 10px 35px;gap:36px}
}
@media(max-width:819px){
 .brand-nav{min-height:69px;grid-template-columns:42px minmax(0,1fr) 42px;gap:8px;padding:3px 13px}
 .brand-nav-wordmark{width:clamp(154px,47vw,200px);max-height:66px}
 .brand-nav .cart-trigger{height:40px;width:40px;border-radius:11px}
 .brand-nav .cart-trigger svg{width:24px;height:24px}
 .site-menu-toggle{height:42px;width:40px}
 .site-menu-toggle svg{width:26px}
 .site-quick-nav{top:68px}
 .skate-hero-layout{display:block;width:min(100%,570px)}
 .skate-art-wrap{width:100%;line-height:0}
 .skate-art{width:100%}
 .skate-hero-content{margin-top:-18px;padding:0 24px 30px;gap:18px;background:radial-gradient(ellipse 55% 26% at 50% 7%,rgba(107,16,163,.38),transparent 96%)}
 .skate-scene-caption{position:relative;z-index:4;margin-top:0;font-size:clamp(31px,9.2vw,49px);text-shadow:0 3px 14px #000}
 .skate-enter-menu{width:min(100%,390px);min-height:57px;padding:13px 15px;border-radius:23px;font-size:clamp(12px,3.2vw,16px);margin-top:1px}
 .skate-perks{margin-top:3px;gap:4px;width:100%;max-width:410px}
 .skate-perk{font-size:clamp(8px,2vw,10px);gap:5px}
 .skate-perk svg{width:23px;height:23px}
 .welcome-marquee{height:34px}
 .marquee-track span{font-size:10px;letter-spacing:.07em}
 .menu-section{padding-top:33px}
}
@media(max-width:355px){.skate-hero-content{padding-inline:10px}.skate-perk{font-size:7.5px}.skate-scene-caption{font-size:29px}}
@media(prefers-reduced-motion:reduce){.skate-art-glow{animation:none}}