.shop-banner{background:#050505;padding:clamp(8px,1.4vw,22px);border-bottom:1px solid #3e171a}
.shop-banner>a:first-child{display:block;max-width:2172px;margin:auto;border-radius:9px;transition:filter .2s}
.shop-banner img{display:block;width:100%;height:auto;border-radius:9px}
.shop-banner>a:first-child:hover{filter:brightness(1.12)}
.shop-banner a:focus-visible{outline:3px solid #ff3444;outline-offset:4px}
.main-nav .shop-nav-highlight{font-weight:900;background:linear-gradient(110deg,#fff 10%,#ff9399 38%,#ed1427 62%,#fff 90%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:shop-shimmer 5s ease-in-out infinite,shop-nudge 5s ease-in-out infinite;display:inline-block}
html[data-theme="light"] .shop-nav-highlight{background-image:linear-gradient(110deg,#fff 10%,#ff9399 38%,#ed1427 62%,#fff 90%)}
@keyframes shop-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes shop-nudge{0%,75%,100%{transform:translateX(0)}82%{transform:translateX(3px)}90%{transform:translateX(0)}}
.mobile-shop-cta{display:none}
@media(max-width:680px){.shop-banner{padding:8px}.shop-banner img{border-radius:4px}.mobile-shop-cta{display:flex;margin:12px auto 4px;max-width:320px;min-height:48px}.shop-banner>a:first-child{border-radius:4px}}
@media(prefers-reduced-motion:reduce){.main-nav .shop-nav-highlight{animation:none}.shop-banner>a:first-child{transition:none}}

/* Compact shop promotion; original homepage hero remains below. */
.shop-banner{padding:10px 24px;background:#080909}
.shop-banner>a:first-child{max-width:520px;margin:0 auto}
.shop-banner img{border-radius:5px}
@media(max-width:680px){.shop-banner{padding:8px 20px}.shop-banner>a:first-child{max-width:330px}.mobile-shop-cta{display:none}}

.hero-action-row{display:flex;align-items:center;gap:28px;padding-right:24px;max-width:100%}
.small-shop-banner{display:block;width:240px;flex:0 1 240px;min-width:0;border-radius:4px;transition:filter .2s}
.small-shop-banner img{display:block;width:100%;height:auto;border-radius:4px}
.small-shop-banner:hover{filter:brightness(1.15)}
.small-shop-banner:focus-visible{outline:2px solid #ff3344;outline-offset:4px}
.hero-action-row>.button{flex-shrink:0}
@media(max-width:680px){.hero-action-row{gap:14px;padding-right:8px}.hero-action-row>.button{min-width:135px;padding:14px 12px;gap:12px}.small-shop-banner{width:160px;flex-basis:160px}}

/* Stable dark backing keeps every gradient color readable in either theme. */
.main-nav .shop-nav-highlight,html[data-theme="light"] .main-nav .shop-nav-highlight{
 background:#171719;background-image:none;background-clip:border-box;-webkit-background-clip:border-box;
 color:#fff;font-size:17px;line-height:1.25;font-weight:900;padding:9px 13px;
 border:1px solid #f04450;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.18);
 animation:shop-nudge 5s ease-in-out infinite;
}
.main-nav .shop-nav-highlight span{
 display:block;background:linear-gradient(110deg,#fff 10%,#ffc2c6 35%,#ff6572 65%,#fff 90%);
 background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;
 animation:shop-shimmer 5s ease-in-out infinite;
}
.main-nav .shop-nav-highlight:hover{background-color:#252528;border-color:#ff8992}
.main-nav .shop-nav-highlight:focus-visible{outline:3px solid #ff6572;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.main-nav .shop-nav-highlight,.main-nav .shop-nav-highlight span{animation:none}}

/* Bright metal highlight: solid red fallback, clipping only when supported. */
.main-nav .shop-nav-highlight,html[data-theme="light"] .main-nav .shop-nav-highlight{
 background:#111113;color:#ff2020;border:1px solid #e31b23;
 box-shadow:0 0 8px rgba(255,25,25,.20);animation:none;font-weight:800;
 transition:box-shadow .2s ease,border-color .2s ease;
}
.main-nav .shop-nav-highlight span{
 background:none;color:#ff2020;-webkit-text-fill-color:#ff2020;animation:none;
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .main-nav .shop-nav-highlight span{
  background:linear-gradient(90deg,#ff2020 0%,#ff3b3b 25%,#ffffff 50%,#ff3b3b 75%,#ff2020 100%);
  background-size:200% auto;background-clip:text;-webkit-background-clip:text;
  color:#ff2020;-webkit-text-fill-color:transparent;
  animation:twzShopTunesGlow 3s linear infinite;
 }
}
@keyframes twzShopTunesGlow{0%{background-position:200% center}100%{background-position:0% center}}
.main-nav .shop-nav-highlight:hover{background:#111113;border-color:#ff4545;box-shadow:0 0 13px rgba(255,25,25,.35)}
@media(prefers-reduced-motion:reduce){.main-nav .shop-nav-highlight span{animation:none;background-position:100% center}}