.zg-pdp[data-floating-media="true"] .zg-pdp__single,
        .zg-pdp[data-floating-media="true"] #package-gallery-slider {
            position: relative;
            isolation: isolate;
            display: flex;
            align-items: center;
            justify-content: center;
            height: clamp(260px, 36vw, 420px);
            aspect-ratio: auto;
            overflow: hidden;
            border: 1px solid var(--zg-line);
            border-radius: 16px;
            background: radial-gradient(ellipse at 50% 45%, rgba(126, 58, 242, .2), transparent 64%), var(--zg-deep);
        }

        .zg-pdp[data-floating-media="true"] #package-gallery-slider {
            justify-content: flex-start;
        }

        .zg-pdp[data-floating-media="true"] #package-gallery-slider .keen-slider__slide {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            max-height: none;
        }

        .zg-pdp[data-floating-media="true"] .zg-pdp__single>img,
        .zg-pdp[data-floating-media="true"] #package-gallery-slider .keen-slider__slide img {
            position: relative;
            z-index: 1;
            display: block;
            flex: none;
            width: 76%;
            max-width: 380px;
            height: 76%;
            max-height: 320px;
            margin: 0 auto;
            border: 0;
            border-radius: 0;
            aspect-ratio: auto;
            background: transparent;
            object-fit: contain;
            object-position: center;
            filter: drop-shadow(0 22px 12px rgba(0, 0, 0, .5));
            animation: zg-item-float 5s ease-in-out infinite;
            transition: scale 450ms ease, translate 450ms ease, rotate 450ms ease, filter 450ms ease;
        }

        .zg-pdp[data-floating-media="true"] .zg-thumb img {
            object-fit: contain;
            padding: 5px;
        }

        @media (hover: hover) and (pointer: fine) {
            .zg-pkg[data-floating-media="true"]:hover .zg-pkg__img,
            .zg-pkg[data-floating-media="true"]:focus-visible .zg-pkg__img {
                scale: 1.06;
                translate: 0 -5px;
                rotate: -3deg;
                filter: drop-shadow(0 18px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 12px rgba(145, 80, 255, .3));
            }
            .zg-pdp[data-floating-media="true"] .zg-pdp__single:hover>img,
            .zg-pdp[data-floating-media="true"] #package-gallery-slider:hover .keen-slider__slide img {
                scale: 1.04;
                translate: 0 -5px;
                rotate: -3deg;
                filter: drop-shadow(0 28px 16px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(145, 80, 255, .25));
            }
            .zg-pkg--out[data-floating-media="true"]:hover .zg-pkg__img {
                filter: grayscale(1) brightness(.5);
            }
        }

        @keyframes zg-item-float {
            0%,
            100% {
                transform: translateY(3px) rotate(-1.5deg);
            }
            50% {
                transform: translateY(-7px) rotate(1.5deg);
            }
        }

        @keyframes zg-item-shadow {
            0%,
            100% {
                transform: scaleX(1);
                opacity: .7;
            }
            50% {
                transform: scaleX(.82);
                opacity: .4;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .zg-pkg[data-floating-media="true"] .zg-pkg__img,
            .zg-pkg[data-floating-media="true"] .zg-pkg__media::before,
            .zg-pdp[data-floating-media="true"] .zg-pdp__single::before,
            .zg-pdp[data-floating-media="true"] #package-gallery-slider::before,
            .zg-pdp[data-floating-media="true"] .zg-pdp__single>img,
            .zg-pdp[data-floating-media="true"] #package-gallery-slider .keen-slider__slide img {
                animation: none;
                transition: none;
            }
            .zg-pkg[data-floating-media="true"]:is(:hover, :focus-visible) .zg-pkg__img,
            .zg-pdp[data-floating-media="true"] .zg-pdp__single:hover>img,
            .zg-pdp[data-floating-media="true"] #package-gallery-slider:hover .keen-slider__slide img {
                scale: 1;
                translate: none;
                rotate: none;
            }
        }

        /* Clash Royale category: portrait captures keep their full height. */

        .zg-catpage--clash .zg-pkg .zg-pkg__media {
            aspect-ratio: 9 / 16;
            flex-shrink: 0;
        }

        .zg-catpage--clash .zg-pkg .zg-pkg__img {
            object-fit: contain;
            object-position: center;
        }

        .zg-catpage--clash .zg-pkg:hover .zg-pkg__img {
            scale: 1;
        }

        /* Steam library covers: keep the entire portrait artwork visible. */

        .zg-pdp[data-steam-media="true"] .zg-pdp__frame {
            padding: 14px;
        }

        .zg-pdp[data-steam-media="true"] .zg-pdp__media {
            padding: 0;
        }

        .zg-pkg[data-steam-media="true"] .zg-pkg__media {
            aspect-ratio: 2 / 3;
            flex-shrink: 0;
        }

        .zg-pkg[data-steam-media="true"] .zg-pkg__img {
            object-fit: contain;
            object-position: center;
            transition: filter 350ms ease;
        }

        .zg-pkg[data-steam-media="true"]:hover .zg-pkg__img {
            scale: 1;
        }

        .zg-pkg[data-steam-media="true"] .zg-pkg__media::after {
            background: linear-gradient(90deg, transparent, rgba(147, 85, 255, .35), transparent) bottom / 100% 1px no-repeat;
        }

        .zg-pdp[data-steam-media="true"] .zg-pdp__single,
        .zg-pdp[data-steam-media="true"] #package-gallery-slider {
            width: min(100%, 520px);
            height: auto;
            aspect-ratio: 2 / 3;
            margin-inline: auto;
            border: 1px solid var(--zg-line);
            border-radius: 12px;
            overflow: hidden;
            background: var(--zg-deep);
        }

        .zg-pdp[data-steam-media="true"] #package-gallery-slider .keen-slider__slide {
            height: 100%;
            max-height: none;
        }

        .zg-pdp[data-steam-media="true"] .zg-pdp__single>img,
        .zg-pdp[data-steam-media="true"] #package-gallery-slider .keen-slider__slide img {
            display: block;
            width: 100%;
            height: 100%;
            max-height: none;
            aspect-ratio: auto;
            object-fit: contain;
            object-position: center;
            transition: filter 350ms ease;
        }

        .zg-pdp[data-steam-media="true"] .zg-thumb img {
            object-fit: contain;
        }

        @media (hover: hover) and (pointer: fine) {
            .zg-pkg[data-steam-media="true"]:not(.zg-pkg--out):is(:hover, : focus-visible) .zg-pkg__img, .zg-pdp[data-steam-media="true"] .zg-pdp__single:hover > img, .zg-pdp[data-steam-media="true"] #package-gallery-slider:hover img {
                filter: brightness(1.08);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .zg-pkg[data-steam-media="true"] .zg-pkg__img,
            .zg-pdp[data-steam-media="true"] .zg-pdp__single>img,
            .zg-pdp[data-steam-media="true"] #package-gallery-slider img {
                transition: none;
            }
        }

        /* Shared product backdrop, including empty cards and transparent artwork. */

        :root {
            --zg-product-backdrop: url('https://zyongg.com/cdn/stores/27104/assets/fdb3e79e-3732-4f53-9a64-0d1c72873a9a/822032de-6cf9-488d-98e7-767a32a07248.webp');
        }

        .zg-pkg .zg-pkg__media,
        .zg-pkg .zg-pkg__blank,
        .zg-pkg[data-floating-media="true"] .zg-pkg__media,
        .zg-pdp .zg-pdp__single,
        .zg-pdp #package-gallery-slider,
        .zg-pdp[data-floating-media="true"] .zg-pdp__single,
        .zg-pdp[data-floating-media="true"] #package-gallery-slider,
        .zg-pdp[data-steam-media="true"] .zg-pdp__single,
        .zg-pdp[data-steam-media="true"] #package-gallery-slider {
            background: var(--zg-deep) var(--zg-product-backdrop) center / cover no-repeat;
        }

        /* Steam detail: standalone full cover without an enclosing backdrop. */

        .zg-pdp[data-steam-media="true"] .zg-pdp__frame {
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .zg-pdp[data-steam-media="true"] .zg-pdp__single,
        .zg-pdp[data-steam-media="true"] #package-gallery-slider {
            width: 100%;
            max-width: none;
            border: 0;
            border-radius: 14px;
            background: transparent;
            box-shadow: none;
        }

        .zg-pdp[data-steam-media="true"] .zg-pdp__single>img {
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        /* Shared purchase benefits and payment panel (original Brawl preview class). */

        .zg-buy--brawl .zg-buy__trust {
            gap: 8px;
            padding-top: 18px;
            border-top-color: rgba(177, 112, 255, .18);
        }

        .zg-buy--brawl .zg-buy__trust li {
            gap: 10px;
            padding: 14px 5px 12px;
            border: 1px solid rgba(180, 127, 255, .2);
            border-radius: 14px;
            background: linear-gradient(155deg, rgba(133, 53, 247, .2), rgba(42, 9, 78, .35));
        }

        .zg-buy--brawl .zg-buy__trust svg {
            box-sizing: content-box;
            width: 21px;
            height: 21px;
            padding: 10px;
            border-radius: 12px;
            background: rgba(155, 85, 255, .16);
            color: #d5afff;
        }

        .zg-buy--brawl .zg-buy__trust li:first-child svg {
            color: #ffd56b;
            background: rgba(255, 196, 72, .12);
        }

        .zg-buy--brawl .zg-buy__trust b {
            font-size: 11px;
            font-weight: 700;
            line-height: 1.4;
            color: #f2e8ff;
        }

        .zg-buy--brawl .zg-buy__pay {
            margin-top: 12px;
            padding: 15px;
            border: 1px solid rgba(164, 113, 242, .25);
            border-radius: 14px;
            background: linear-gradient(110deg, rgba(111, 32, 210, .23), rgba(55, 215, 187, .06));
        }

        .zg-buy--brawl .zg-brawl-payment-copy {
            min-width: 0;
        }

        .zg-buy--brawl .zg-brawl-payment-copy>span {
            display: block;
            margin-bottom: 5px;
            color: #bd91f2;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .1em;
        }

        .zg-buy--brawl .zg-brawl-payment-copy p {
            color: #f5edff;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0;
            text-transform: none;
        }

        .zg-buy--brawl .zg-pay {
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        /* Brief hover feedback: no looping animations or layout shifts. */

        @media (hover: hover) and (pointer: fine) {
            .zg-buy--brawl .zg-buy__trust li {
                --zg-benefit-glow: 177, 112, 255;
                position: relative;
                overflow: hidden;
                isolation: isolate;
            }
            .zg-buy--brawl .zg-buy__trust li:first-child {
                --zg-benefit-glow: 255, 205, 92;
            }
            .zg-buy--brawl .zg-buy__trust li::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .16) 50%, transparent 80%);
                transform: translateX(-120%);
            }
            .zg-buy--brawl .zg-buy__trust li:hover {
                border-color: rgba(var(--zg-benefit-glow), .65);
                box-shadow: 0 8px 22px -8px rgba(var(--zg-benefit-glow), .45), inset 0 0 18px rgba(var(--zg-benefit-glow), .09);
            }
            .zg-buy--brawl .zg-buy__trust li:hover svg {
                filter: drop-shadow(0 0 5px rgba(var(--zg-benefit-glow), .6));
            }
        }

        @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
            .zg-buy--brawl .zg-buy__trust li {
                transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
            }
            .zg-buy--brawl .zg-buy__trust svg {
                transition: transform 300ms ease, filter 300ms ease;
            }
            .zg-buy--brawl .zg-buy__trust li:hover {
                transform: translateY(-4px);
            }
            .zg-buy--brawl .zg-buy__trust li:hover svg {
                transform: translateY(-2px) scale(1.1);
            }
            .zg-buy--brawl .zg-buy__trust li:first-child:hover svg {
                transform: translateY(-2px) scale(1.1) rotate(-9deg);
            }
            .zg-buy--brawl .zg-buy__trust li:hover::after {
                animation: zg-benefit-shine 700ms ease-out both;
            }
        }

        @keyframes zg-benefit-shine {
            from {
                transform: translateX(-120%);
            }
            to {
                transform: translateX(120%);
            }
        }

        @media (hover: hover) and (pointer: fine) {
            .zg-buy--brawl .zg-buy__pay:has(img[alt="PIX" i]) {
                position: relative;
                overflow: hidden;
                isolation: isolate;
            }
            .zg-buy--brawl .zg-buy__pay:has(img[alt="PIX" i])::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                background: linear-gradient(115deg, transparent 20%, rgba(74, 235, 204, .16) 50%, transparent 80%);
                transform: translateX(-120%);
            }
            .zg-buy--brawl .zg-buy__pay:has(img[alt="PIX" i]):hover {
                border-color: rgba(74, 235, 204, .6);
                box-shadow: 0 8px 22px -8px rgba(50, 210, 183, .35), inset 0 0 18px rgba(50, 210, 183, .08);
            }
            .zg-buy--brawl .zg-buy__pay:hover img[alt="PIX" i] {
                filter: drop-shadow(0 0 6px rgba(74, 235, 204, .55));
            }
        }

        @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
            .zg-buy--brawl .zg-buy__pay:has(img[alt="PIX" i]) {
                transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
            }
            .zg-buy--brawl .zg-buy__pay img[alt="PIX" i] {
                transition: transform 300ms ease, filter 300ms ease;
            }
            .zg-buy--brawl .zg-buy__pay:has(img[alt="PIX" i]):hover {
                transform: translateY(-3px);
            }
            .zg-buy--brawl .zg-buy__pay:hover img[alt="PIX" i] {
                transform: scale(1.1) rotate(-5deg);
            }
            .zg-buy--brawl .zg-buy__pay:has(img[alt="PIX" i]):hover::after {
                animation: zg-benefit-shine 850ms ease-out both;
            }
        }

        @media (max-width: 360px) {
            .zg-buy--brawl .zg-buy__trust {
                gap: 5px;
            }
            .zg-buy--brawl .zg-buy__trust b {
                font-size: 10px;
            }
            .zg-buy--brawl .zg-buy__pay {
                padding: 12px;
                flex-wrap: wrap;
            }
        }

        .zg-pkg__auto {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            max-width: 100%;
            overflow: hidden;
            padding: 6px 8px;
            border: 1px solid #8af6ca;
            border-radius: 999px;
            background: linear-gradient(120deg, #a0f7d3, #50dca8);
            color: #07392b;
            font: 700 11px/1.35 var(--zg-ui);
        }

        .zg-pkg__auto svg {
            flex: none;
            width: 23px;
            height: 20px;
            color: #07503a;
        }

        .zg-pkg__auto::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .65), transparent 80%);
            transform: translateX(-120%);
        }

        @media (hover: hover) and (pointer: fine) {
            .zg-pkg:hover .zg-pkg__auto {
                border-color: #c0ffe5;
                box-shadow: 0 0 20px -5px rgba(85, 239, 175, .65);
            }
        }

        @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
            .zg-pkg__auto {
                transition: border-color 250ms ease, box-shadow 250ms ease;
            }
            .zg-pkg__auto svg {
                transition: transform 280ms ease, filter 280ms ease;
            }
            .zg-pkg:hover .zg-pkg__auto svg {
                animation: zg-delivery-drive 750ms ease-in-out both;
            }
            .zg-pkg:hover .zg-pkg__auto::after {
                animation: zg-benefit-shine 750ms ease-out both;
            }
        }

        @media (hover: hover) and (pointer: fine) {
            .zg-pdp__auto:hover {
                border-color: #c0ffe5;
                box-shadow: 0 0 20px -5px rgba(85, 239, 175, .65);
            }
        }

        @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
            .zg-pdp__auto:hover svg {
                animation: zg-delivery-drive 750ms ease-in-out both;
            }
            .zg-pdp__auto:hover::after {
                animation: zg-benefit-shine 750ms ease-out both;
            }
        }

        @keyframes zg-delivery-drive {
            0%,
            100% {
                transform: translateX(0);
            }
            22% {
                transform: translateX(-3px) rotate(-8deg);
            }
            48% {
                transform: translateX(4px) translateY(-2px) rotate(4deg);
            }
            70% {
                transform: translateX(2px) translateY(1px);
            }
        }


        .zy-footer,
        .zy-guarantee {
            font-family: Arial, Helvetica, sans-serif
        }

        .zy-footer {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            background: var(--zg-bg);
            border-top: 1px solid #ffffff14;
            margin-top: 56px;
            color: #b7acc6
        }

        .zy-footer__glow {
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background: radial-gradient(ellipse at 0 100%, #7025d31c, transparent 40%), radial-gradient(ellipse at 100% 0, #7025d325, transparent 45%)
        }

        .zy-footer__glow::after {
            content: '';
            position: absolute;
            width: 420px;
            height: 420px;
            right: -270px;
            top: 50px;
            border: 1px solid #ac72ff20;
            border-radius: 90px;
            transform: rotate(35deg);
            box-shadow: 0 0 0 28px #ac72ff04, 0 0 0 56px #ac72ff03
        }

        .zy-footer__assurance {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding: 22px 0;
            border-bottom: 1px solid #ffffff12
        }

        .zy-footer__assurance .zy-guarantee {
            margin: 0;
            padding: 0;
            border: 0;
            background: none
        }

        .zy-footer__assurance>span {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 11px;
            color: #a99cbb
        }

        .zy-footer__assurance>span svg {
            width: 15px;
            height: 15px;
            color: #b79bdc
        }

        .zy-footer__grid {
            display: grid;
            grid-template-columns: 1.35fr .85fr 1fr 1.2fr;
            gap: 40px;
            padding: 40px 0
        }

        .zy-footer__brand .zg-brandmark {
            width: 126px;
            height: 45px;
            margin: -9px 0 12px
        }

        .zy-footer__brand h1,
        .zy-footer__tagline {
            font-size: 13px !important;
            font-weight: 600;
            line-height: 1.6;
            color: #e4dceb;
            margin: 0 0 7px
        }

        .zy-footer__brand>p:not(.zy-footer__tagline) {
            font-size: 12px;
            line-height: 1.8;
            margin: 0
        }

        .zy-footer__social {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 17px
        }

        .zy-footer__social a {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            border: 1px solid #ffffff15;
            border-radius: 8px;
            background: #ffffff04;
            transition: transform .2s, background .2s
        }

        .zy-footer__social svg {
            width: 15px;
            height: 15px;
            opacity: .8
        }

        .zy-footer__nav {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px
        }

        .zy-footer__nav h2 {
            font-size: 13px;
            font-weight: 600;
            color: #f6f0ff;
            margin: 0 0 6px
        }

        .zy-footer__nav a {
            font-size: 12px;
            line-height: 1.6;
            transition: color .2s, transform .2s
        }

        .zy-footer__contact {
            align-self: start;
            border: 1px solid #ffffff17;
            background: #ffffff03;
            border-radius: 14px;
            padding: 20px
        }

        .zy-footer__contact h2 {
            font-size: 18px;
            letter-spacing: -.025em;
            font-weight: 600;
            color: #f3edfc;
            line-height: 1.4;
            margin: 0
        }

        .zy-footer__contact p {
            font-size: 12px;
            line-height: 1.8;
            margin: 8px 0 17px
        }

        .zy-footer__cta {
            width: 100%;
            background: #8045d52b;
            border-color: #a777eb42
        }

        .zy-footer__bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
            border-top: 1px solid #ffffff12;
            padding: 22px 0;
            font-size: 10px;
            line-height: 1.8;
            color: #a498b5
        }

        .zy-footer__bottom p {
            margin: 0
        }

        .zy-footer__bottom .zg-seals {
            flex-wrap: wrap;
            gap: 16px
        }

        .zy-footer__signature {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #c3b4d7
        }

        .zy-footer__signature svg {
            width: 14px;
            height: 14px
        }

        .zy-guarantee {
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 16px 18px;
            border: 1px solid #ffffff12;
            border-radius: 12px;
            background: #ffffff03;
            color: #d6cbe5;
            margin-top: 18px;
            transition: background .2s, border-color .2s
        }

        .zy-icon {
            display: grid;
            place-items: center;
            flex: none;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: #a277ff12;
            color: #c7a7ff
        }

        .zy-icon svg {
            width: 21px;
            height: 21px;
            stroke-width: 1.65;
            transition: transform .25s
        }

        .zy-guarantee strong {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #eee8f7
        }

        .zy-guarantee span span {
            display: block;
            font-size: 11px;
            line-height: 1.6;
            color: #b5a8c6;
            margin-top: 3px
        }

        .zy-guarantee>svg {
            width: 16px;
            height: 16px;
            margin-left: auto;
            flex: none;
            transition: transform .25s
        }

        /* Zyon storefront v3: independent home cards, shared original price typography. */

        .zy-spotlight {
            width: min(1546px, calc(100% - 48px));
            margin: 48px auto 56px;
            font-family: Arial, Helvetica, sans-serif;
            color: #f5f5f7
        }

        .zy-spotlight__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 26px
        }

        .zy-spotlight__head h2 {
            display: flex;
            align-items: center;
            gap: 12px;
            font: 600 clamp(24px, 2vw, 30px)/1.25 Arial, Helvetica, sans-serif;
            letter-spacing: -.04em;
            margin: 0
        }

        .zy-spotlight__dot {
            width: 7px;
            height: 7px;
            background: #9f65ff;
            border-radius: 50%;
            box-shadow: 0 0 14px #994aff70
        }

        .zy-spotlight__head p {
            color: #c8c3d1;
            font-size: 13px;
            line-height: 1.6;
            margin: 9px 0 0
        }

        .zy-shuffle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 44px;
            padding: 0 17px;
            font: 500 12px Arial, Helvetica, sans-serif;
            color: #eae8ee;
            background: #ffffff05;
            border: 1px solid #ffffff24;
            border-radius: 999px;
            cursor: pointer;
            transition: background .2s, border-color .2s
        }

        .zy-shuffle svg {
            width: 15px;
            height: 15px;
            transition: rotate .3s
        }

        .zy-shuffle[hidden],
        .zy-spotlight[hidden] {
            display: none
        }

        .zy-spotlight__grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 16px
        }

        .zy-product {
            min-width: 0;
            display: flex
        }

        .zy-product:nth-child(n+7) {
            display: none
        }

        .zy-card {
            width: 100%;
            display: flex;
            flex-direction: column;
            background: var(--zg-panel);
            border: 1px solid #ffffff17;
            border-radius: 16px;
            overflow: hidden;
            color: inherit;
            text-decoration: none;
            transition: transform .24s, border-color .24s, box-shadow .24s
        }

        .zy-card__cover {
            position: relative;
            isolation: isolate;
            aspect-ratio: 16/10;
            flex: none;
            overflow: hidden;
            background: var(--zg-deep);
            display: grid;
            place-items: center
        }

        .zy-card__cover>img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 35%;
            transition: transform .4s cubic-bezier(.2, .7, .2, 1)
        }

        .zy-card__cover>svg {
            width: 30px;
            height: 30px;
            color: #79717f
        }

        .zy-card__cover::after {
            content: '';
            position: absolute;
            inset: auto 0 0;
            height: 30%;
            background: linear-gradient(transparent, rgba(26, 0, 63, .15));
            pointer-events: none
        }

        .zy-card__sale {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1;
            padding: 6px 9px;
            border-radius: 7px;
            background: #6900ff;
            color: #fff;
            font: 700 11px/1 Arial, Helvetica, sans-serif;
            box-shadow: 0 3px 10px #0004
        }

        .zy-card__body {
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1;
            padding: 16px
        }

        .zy-card__body h3 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 3em;
            margin: 0;
            color: #efedf3;
            font: 600 13px/1.5 Arial, Helvetica, sans-serif;
            letter-spacing: -.015em
        }

        .zy-card__price {
            margin-top: auto;
            padding-top: 12px;
            border-top: 1px solid #ffffff0c
        }

        .zy-card__price>s {
            display: block;
            min-height: 15px;
            margin-bottom: 5px;
            color: #89838f;
            font: 400 11px/15px Arial, Helvetica, sans-serif
        }

        .zy-card__price .zg-pkg__value {
            margin: 0;
            color: #fff
        }

        .zy-card__rating {
            min-height: 25px;
            display: flex;
            align-items: center
        }

        .zy-card__rating .zg-pkg__rate {
            font-size: 10px;
            padding-inline: 8px;
            height: 23px
        }

        .zy-card__buy {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-height: 42px;
            padding: 6px 7px 6px 16px;
            border-radius: 999px;
            background: #6900ff;
            color: white;
            font: 600 12px/1 Arial, Helvetica, sans-serif;
            transition: background .2s, box-shadow .2s
        }

        .zy-card__buy>span {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            flex: none;
            border-radius: 50%;
            background: #27005e
        }

        .zy-card__buy svg {
            width: 14px;
            height: 14px;
            transition: transform .25s
        }

        .zy-spotlight__assurance {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
            padding: 16px 2px;
            border-top: 1px solid #ffffff12;
            color: #c6c2cb;
            font: 400 12px/1.6 Arial, Helvetica, sans-serif;
            text-decoration: none
        }

        .zy-spotlight__assurance>svg {
            width: 18px;
            height: 18px;
            color: #fff;
            flex: none
        }

        .zy-spotlight__conditions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 6px;
            color: #928b9d;
            white-space: nowrap;
            font-size: 11px
        }

        .zy-spotlight__conditions svg {
            width: 13px;
            height: 13px
        }

        .zy-sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0
        }

        .zy-ticket {
            position: fixed;
            z-index: 80;
            left: 22px;
            bottom: 110px;
            font-family: Arial, Helvetica, sans-serif
        }

        .zy-ticket__trigger {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: 60px;
            height: 64px;
            padding: 0;
            border: 1px solid #b995ff55;
            border-radius: 18px;
            background: var(--zg-purple);
            color: white;
            box-shadow: 0 8px 26px #0005;
            cursor: pointer;
            transition: transform .2s, background .2s
        }

        .zy-ticket__trigger>svg {
            width: 27px;
            height: 27px;
            stroke-width: 1.7;
            transition: rotate .25s
        }

        .zy-ticket__trigger>span {
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .1em
        }

        .zy-ticket__panel {
            position: absolute;
            left: 74px;
            bottom: 0;
            width: 300px;
            box-sizing: border-box;
            padding: 24px;
            background: var(--zg-panel);
            border: 1px solid #ffffff26;
            border-radius: 18px;
            box-shadow: 0 16px 56px #0006;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateX(-12px) scale(.97);
            transform-origin: bottom left;
            transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s
        }

        .zy-ticket.is-open .zy-ticket__panel {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: none
        }

        .zy-ticket__close {
            position: absolute;
            right: 10px;
            top: 10px;
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: #adabb4;
            cursor: pointer
        }

        .zy-ticket__close svg {
            width: 16px;
            height: 16px
        }

        .zy-ticket__label {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .09em;
            color: #c9c5d0;
            margin-bottom: 15px
        }

        .zy-ticket__label svg {
            width: 17px;
            height: 17px;
            color: #fff
        }

        .zy-ticket__panel h2 {
            font: 600 22px/1.3 Arial, Helvetica, sans-serif;
            letter-spacing: -.035em;
            color: #fff;
            margin: 0 0 10px
        }

        .zy-ticket__panel p {
            font-size: 12px;
            color: #b0adb7;
            line-height: 1.6;
            margin: 0 0 19px
        }

        .zy-coupon__button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 9px;
            width: 100%;
            min-height: 48px;
            padding: 12px;
            border: 1px dashed #ffffff40;
            border-radius: 10px;
            background: #ffffff06;
            color: #fff;
            font: 500 11px Arial, Helvetica, sans-serif;
            cursor: pointer;
            transition: background .2s, border-color .2s
        }

        .zy-coupon__code {
            font-size: 17px;
            font-weight: 600;
            letter-spacing: .08em;
            border-right: 1px solid #ffffff24;
            padding-right: 12px
        }

        .zy-coupon__button svg {
            width: 15px;
            height: 15px;
            flex: none
        }

        .zy-coupon__button.is-copied {
            color: #a7ebc9;
            border-color: #7ed9b2;
            background: #64dba410
        }

        .zy-ticket__panel small {
            display: block;
            font-size: 9px;
            line-height: 1.6;
            color: #918c9b;
            margin-top: 12px
        }

        .zy-spotlight a:focus-visible,
        .zy-spotlight button:focus-visible,
        .zy-ticket button:focus-visible,
        .zy-footer a:focus-visible {
            outline: 2px solid #c7a4ff;
            outline-offset: 4px
        }

        .zy-eyebrow {
            display: block;
            color: #aaa4b3;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .12em;
            margin-bottom: 8px
        }

        .zy-footer__cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 44px;
            border-radius: 10px;
            font: 600 12px var(--zg-ui);
            color: #eee6ff
        }

        .zy-footer__cta svg {
            width: 16px;
            height: 16px
        }

        @media(hover:hover) {
            .zy-card:hover {
                transform: translateY(-4px);
                border-color: #a773ef70;
                box-shadow: 0 12px 28px #0004
            }
            .zy-card:hover .zy-card__cover>img {
                transform: scale(1.055)
            }
            .zy-card:hover .zy-card__buy {
                background: #7924ff;
                box-shadow: 0 4px 20px #6900ff25
            }
            .zy-card:hover .zy-card__buy svg {
                transform: translate(1px, -1px)
            }
            .zy-shuffle:hover {
                background: #ffffff0d;
                border-color: #ffffff45
            }
            .zy-shuffle:hover svg {
                rotate: 45deg
            }
            .zy-ticket__trigger:hover {
                background: #7936df;
                transform: translateY(-2px)
            }
            .zy-ticket__trigger:hover svg {
                rotate: -12deg
            }
            .zy-ticket__close:hover {
                background: #ffffff0d;
                color: #fff
            }
            .zy-footer__nav a:hover {
                color: white
            }
        }

        @media(max-width:1100px) {
            .zy-spotlight__grid {
                grid-template-columns: repeat(3, minmax(0, 1fr))
            }
            .zy-footer__grid {
                grid-template-columns: 1.2fr 1fr;
                gap: 32px
            }
            .zy-footer__assurance>span {
                max-width: 200px
            }
        }

        @media(max-width:600px) {
            .zy-spotlight {
                width: calc(100% - 28px);
                margin-block: 32px
            }
            .zy-spotlight__head {
                align-items: flex-start;
                gap: 16px;
                flex-direction: column;
                margin-bottom: 20px
            }
            .zy-spotlight__head h2 {
                font-size: 24px
            }
            .zy-spotlight__head p {
                font-size: 12px
            }
            .zy-spotlight__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px
            }
            .zy-card {
                border-radius: 13px
            }
            .zy-card__body {
                padding: 11px;
                gap: 10px
            }
            .zy-card__body h3 {
                font-size: 12px
            }
            .zy-card__buy {
                font-size: 10px;
                padding-left: 11px;
                gap: 4px
            }
            .zy-card__buy>span {
                width: 24px;
                height: 24px
            }
            .zy-card__rating .zg-pkg__rate {
                font-size: 9px;
                padding-inline: 5px
            }
            .zy-spotlight__assurance {
                font-size: 10px
            }
            .zy-spotlight__conditions {
                display: none
            }
            .zy-ticket {
                left: 14px;
                bottom: calc(88px + env(safe-area-inset-bottom, 0px))
            }
            .zy-ticket__trigger {
                width: 54px;
                height: 58px;
                border-radius: 16px
            }
            .zy-ticket__panel {
                left: 0;
                bottom: 72px;
                width: min(300px, calc(100vw - 28px));
                transform: translateY(10px) scale(.97)
            }
            .zy-footer {
                margin-top: 32px
            }
            .zy-footer__assurance {
                padding: 20px 0
            }
            .zy-footer__assurance>span {
                display: none
            }
            .zy-footer__grid {
                grid-template-columns: 1fr 1fr;
                gap: 28px 20px;
                padding: 28px 0
            }
            .zy-footer__brand,
            .zy-footer__contact {
                grid-column: 1/-1
            }
            .zy-footer__bottom {
                gap: 16px
            }
            .zy-footer__signature {
                display: none
            }
        }

        @media(prefers-reduced-motion:reduce) {
            .zy-spotlight *,
            .zy-ticket * {
                transition: none !important;
                animation: none !important
            }
            .zy-card:hover,
            .zy-card:hover .zy-card__cover>img {
                transform: none
            }
        }

        /* Zyon brand proportions and interaction polish. */

        .zy-footer>.zg-wrap {
            --zg-w: 1546px;
            width: min(var(--zg-w), calc(100% - 48px))
        }

        .zy-footer {
            margin-top: 0;
            border-top: 1px solid #6900ff44;
            color: #d2c9df
        }

        .zy-footer__grid {
            grid-template-columns: 1.25fr 1fr 1.1fr 1.15fr;
            gap: clamp(28px, 3vw, 64px);
            padding: 56px 0 48px
        }

        .zy-footer__brand .zg-brandmark {
            width: 180px;
            height: 65px;
            margin: -8px 0 20px
        }

        .zy-footer__brand h1,
        .zy-footer__tagline {
            font-size: 18px !important;
            line-height: 1.5
        }

        .zy-footer__brand>p:not(.zy-footer__tagline) {
            font-size: 15px;
            line-height: 1.8
        }

        .zy-footer__nav {
            gap: 13px
        }

        .zy-footer__nav h2 {
            font-size: 18px;
            margin-bottom: 12px;
            color: white
        }

        .zy-footer__nav a {
            display: flex;
            align-items: center;
            gap: 11px;
            min-height: 28px;
            font-size: 15px;
            line-height: 1.5;
            color: #d2c9df;
            transition: color .2s, translate .25s
        }

        .zy-footer__nav svg {
            width: 18px;
            height: 18px;
            flex: none;
            color: #fff;
            opacity: .8;
            stroke-width: 1.6;
            transition: transform .3s, opacity .2s
        }

        .zy-footer__contact {
            padding: 26px;
            border-color: #6900ff55;
            background: linear-gradient(140deg, #32007980, var(--zg-panel));
            border-radius: 18px
        }

        .zy-footer__contact h2 {
            font-size: 24px;
            color: white
        }

        .zy-footer__contact p {
            font-size: 15px;
            line-height: 1.7;
            margin: 12px 0 24px
        }

        .zy-footer__contact .zy-eyebrow {
            display: flex;
            align-items: center;
            gap: 8px;
            font: 600 11px Arial, Helvetica, sans-serif;
            color: #fff;
            letter-spacing: .06em
        }

        .zy-footer__contact .zy-eyebrow svg {
            width: 18px;
            height: 18px
        }

        .zy-footer__cta {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            min-height: 48px;
            border: 1px solid #8b3aff;
            background: #6900ff;
            border-radius: 999px;
            font: 600 14px Arial, Helvetica, sans-serif;
            transition: box-shadow .25s, background .25s, scale .2s
        }

        .zy-footer__bottom {
            font-size: 12px;
            padding: 26px 0 30px;
            color: #bfb2d2
        }

        .zy-footer__assurance {
            padding: 28px 0;
            gap: 30px
        }

        .zy-footer__assurance>span {
            font-size: 13px;
            color: #d2c9df
        }

        .zy-guarantee strong {
            font-size: 16px;
            color: white
        }

        .zy-guarantee span span {
            font-size: 13px;
            color: #bfb2d2
        }

        .zy-icon {
            width: 44px;
            height: 44px;
            background: #6900ff25;
            color: white
        }

        .zy-footer__social {
            gap: 10px;
            margin-top: 24px
        }

        .zy-footer__social a {
            width: 40px;
            height: 40px;
            border: 1px solid #6900ff55;
            background: #32007950;
            border-radius: 12px;
            transition: translate .25s, box-shadow .25s, background .25s
        }

        .zy-footer__social svg {
            width: 19px;
            height: 19px;
            opacity: 1
        }

        .zy-card {
            border-color: #6900ff45;
            background: linear-gradient(160deg, #32007970, var(--zg-panel) 55%);
            box-shadow: inset 0 1px 0 #ffffff08
        }

        .zy-card__body h3 {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0;
            color: white
        }

        .zy-card__buy {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            min-height: 46px;
            background: linear-gradient(100deg, #6900ff, #8000ff);
            font-size: 13px
        }

        .zy-card__buy::after,
        .zy-footer__cta::after {
            content: '';
            position: absolute;
            z-index: -1;
            inset: -50% auto -50% -60%;
            width: 45%;
            background: linear-gradient(90deg, transparent, #ffffff35, transparent);
            transform: skewX(-22deg);
            pointer-events: none
        }

        .zy-spotlight__head h2 {
            font-size: clamp(26px, 2.1vw, 34px);
            font-weight: 700;
            letter-spacing: -.035em
        }

        .zy-spotlight__head p {
            font-size: 15px;
            color: #c8c3d1
        }

        .zy-spotlight__assurance {
            color: #d2c9df;
            font-size: 13px
        }

        .zy-spotlight__assurance>svg {
            color: white
        }

        .zy-shuffle {
            border-color: #6900ff66;
            background: #32007945;
            font-size: 13px;
            color: white
        }

        .zg-nav .zg-pill,
        .zg-nav-mobile a,
        .zg-nav-mobile button {
            transition: scale .22s, filter .22s, box-shadow .22s, background .22s
        }

        .zg-nav .zg-pill svg,
        .zg-nav-mobile a svg,
        .zg-nav-mobile button svg,
        .zg-nav__brand svg,
        .zg-nav__social a svg {
            transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s
        }

        .zg-nav__social a {
            transition: translate .25s, background .25s, box-shadow .25s
        }

        @keyframes zy-sheen {
            from {
                left: -60%
            }
            to {
                left: 150%
            }
        }