.home-showcase{gap:18px;margin-inline:auto;padding-top:18px;padding-bottom:4px;display:grid}.home-showcase+.catalog{padding-top:clamp(16px,2vw,26px);padding-bottom:clamp(36px,4vw,56px)}.showcase-rail{--rail-fade:56px;min-width:0;position:relative}.showcase-track{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;grid-auto-flow:column;gap:12px;margin:0;padding:2px 0 6px;list-style:none;display:grid;overflow-x:auto}.showcase-track::-webkit-scrollbar{display:none}.showcase-track.is-gliding{scroll-snap-type:none}.rail-dots{justify-content:center;padding-top:2px;display:flex}.rail-dot{cursor:pointer;width:24px;height:24px;transition:width var(--duration-panel) var(--ease-out);background:0 0;border:0;padding:0;position:relative}.rail-dot:before,.rail-dot.is-active:after{content:"";border-radius:999px;height:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.rail-dot:before{background:color-mix(in srgb, var(--text) 22%, transparent);width:8px;transition:width var(--duration-panel) var(--ease-out), background-color var(--duration-control) var(--ease-out)}.rail-dot.is-active{width:34px}.rail-dot.is-active:before{background:color-mix(in srgb, var(--accent) 30%, transparent);width:26px}.rail-dot.is-active:after{background:var(--accent);width:26px}.rail-dots.is-playing .rail-dot.is-active:after{transform-origin:0;animation:rail-dot-progress var(--rail-autoplay-ms) linear forwards}.rail-dot:focus-visible{outline:2px solid var(--ring);outline-offset:-2px;border-radius:999px}@keyframes rail-dot-progress{0%{transform:translate(-50%,-50%)scaleX(0)}to{transform:translate(-50%,-50%)scaleX(1)}}.showcase-track>li{scroll-snap-align:start;min-width:0;container-type:inline-size}.promo-rail .showcase-track{grid-auto-columns:max(262px,25% - 9px)}.promo-card{aspect-ratio:2;isolation:isolate;border-radius:var(--radius-xl);background:var(--promo-gradient);color:#fff;width:100%;min-height:132px;font:inherit;text-align:left;cursor:pointer;transition:transform var(--duration-control) var(--ease-out), box-shadow var(--duration-control) var(--ease-out);border:0;grid-template-rows:auto 1fr auto;place-items:start;gap:8px;padding:14px 16px;text-decoration:none;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #fff3,inset 0 0 0 1px #ffffff1a}.promo-card:before{z-index:-3;background:radial-gradient(circle at 62% 26%, #ffffffbd 0 2px, transparent 3px), radial-gradient(circle at 93% 16%, #ffffffa6 0 2px, transparent 3px), radial-gradient(circle at 57% 73%, #ffffff75 0 1px, transparent 2px), radial-gradient(circle at 79% 55%, transparent 0 57px, var(--promo-orbit) 58px 59px, transparent 61px 84px, #ffffff24 85px 86px, transparent 88px), radial-gradient(ellipse 62% 112% at 82% 62%, var(--promo-glow) 0%, transparent 70%), linear-gradient(120deg, transparent 37%, #ffffff1a 56%, transparent 78%);content:"";position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#0000 30%,#000 61%);mask-image:linear-gradient(90deg,#0000 30%,#000 61%)}.promo-card:after{z-index:-1;content:"";background:linear-gradient(90deg,#0a081e57 0%,#0a081e00 62%);position:absolute;inset:0}.promo-card:hover{box-shadow:inset 0 1px 0 #fff3, inset 0 0 0 1px #ffffff1a, var(--shadow-md);transform:translateY(-2px)}.promo-card:active{transform:scale(.985)}.promo-card:focus-visible{outline:3px solid var(--ring);outline-offset:3px}.promo-tag{letter-spacing:.05em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#fff3;border-radius:6px;padding:3px 8px;font-size:10.5px;font-weight:800;line-height:1.3}.promo-title{letter-spacing:-.01em;text-wrap:balance;text-shadow:0 1px 12px #0a081e47;max-width:57cqw;font-size:clamp(17px,1.45vw,21px);font-weight:800;line-height:1.12}.promo-cta{color:#18181b;background:#fff;border-radius:999px;align-items:center;gap:3px;padding:6px 10px 6px 13px;font-size:13px;font-weight:700;line-height:1.2;display:inline-flex;box-shadow:0 4px 14px #0a081e2e}.promo-art{z-index:-2;filter:drop-shadow(0 12px 22px #0a081e59);pointer-events:none;width:55cqw;height:auto;transition:transform var(--duration-panel) var(--ease-out);position:absolute;bottom:-10cqw;right:-4cqw}.promo-card:hover .promo-art{transform:scale(1.04)rotate(-2deg)}.promo-tone-violet{--promo-gradient:linear-gradient(135deg, #7160ea 0%, #4e37ca 55%, #281569 100%);--promo-glow:#b995ff9e;--promo-orbit:#e2c6ff61}.promo-tone-emerald{--promo-gradient:linear-gradient(135deg, #268e8a 0%, #176b77 55%, #13354e 100%);--promo-glow:#4ee2ca87;--promo-orbit:#94fce65c}.promo-tone-azure{--promo-gradient:linear-gradient(135deg, #447fdd 0%, #345bc1 55%, #252f78 100%);--promo-glow:#6dafff94;--promo-orbit:#bbdfff61}.promo-tone-rose{--promo-gradient:linear-gradient(135deg, #c966a8 0%, #a1418a 55%, #592361 100%);--promo-glow:#ff9bdc87;--promo-orbit:#ffcfef61}.rail-arrow{z-index:2;border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 86%, transparent);width:38px;height:38px;color:var(--text);box-shadow:var(--shadow-sm);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform var(--duration-press) var(--ease-out);border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:calc(50% - 3px);transform:translateY(-50%)}.rail-arrow:active{transform:translateY(-50%)scale(.92)}.showcase-rail:has(.rail-dots) .rail-arrow{top:calc(50% - 13px)}.rail-arrow-prev{left:-12px}.rail-arrow-next{right:-12px}@media (min-width:641px) and (max-width:1399px){.promo-rail .showcase-track{-webkit-mask-image:linear-gradient(to right, #000 calc(100% - var(--rail-fade)), transparent);mask-image:linear-gradient(to right, #000 calc(100% - var(--rail-fade)), transparent)}.promo-rail:has(.rail-arrow-prev) .showcase-track{-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--rail-fade), #000 calc(100% - var(--rail-fade)), transparent);mask-image:linear-gradient(to right, transparent, #000 var(--rail-fade), #000 calc(100% - var(--rail-fade)), transparent)}.promo-rail .rail-arrow-prev{left:6px}.promo-rail .rail-arrow-next{right:6px}}@media (hover:none){.promo-rail .rail-arrow{display:none}}@media (min-width:1400px){.promo-rail .rail-arrow-prev{left:-52px}.promo-rail .rail-arrow-next{right:-52px}}@media (max-width:640px){.home-showcase{gap:16px;padding-top:12px}.promo-rail .showcase-track{grid-auto-columns:min(86%,340px)}.rail-arrow{width:34px;height:34px}.rail-arrow-prev{left:4px}.rail-arrow-next{right:4px}}@container (max-width:279px){.promo-card{gap:6px;padding:13px 14px}.promo-title{font-size:16px}.promo-cta{padding:5px 9px 5px 11px;font-size:12.5px}}
