{"version":"1.0","directionName":"The Graphic Splash Panel","globalCss":":root {\n --bg: #0F0F12;\n --card-bg: #16161C;\n --text: #FDFDFD;\n --muted: #A0A0B0;\n --yellow: #FFCC00;\n --magenta: #E60067;\n --ink-blue: #1D3557;\n --black: #000000;\n --border-thick: 8px solid #000000;\n --border-thin: 3px solid #000000;\n --ds-bg: #0F0F12;\n --ds-card-bg: #16161C;\n --ds-text: #FDFDFD;\n --ds-muted: #A0A0B0;\n --ds-yellow: #FFCC00;\n --ds-magenta: #E60067;\n --ds-ink-blue: #1D3557;\n --ds-black: #000000;\n --ds-mint: #00F5D4;\n --ds-border-thick: 8px solid #000000;\n --ds-border-mid: 4px solid #000000;\n --ds-border-thin: 2px solid #000000;\n --c-bg: #0F0F12;\n --c-ink: #FDFDFD;\n --c-primary: #FFCC00;\n --c-accent: #1D3557;\n --c-secondary: #E60067;\n --c-success: #FFCC00;\n --theme-primary: #FFCC00;\n --theme-bg: #0F0F12;\n --theme-ink: #FDFDFD;\n --theme-accent: #1D3557;\n --theme-secondary: #E60067;\n --theme-success: #FFCC00;\n --bg-elevated: #E60067;\n --surface: #E60067;\n --surface-alt: #E60067;\n --ink: #FDFDFD;\n --ink-muted: #A0A0B0;\n --border: #cccccc;\n --bg-page: #0F0F12;\n --page-bg: #0F0F12;\n --text-primary: #FDFDFD;\n --text-muted: #A0A0B0;\n --surface-ink: #F9FAFB;\n --surface-ink-muted: #D1D5DB;\n --c-ink-muted: #A0A0B0;\n --theme-ink-muted: #A0A0B0;\n --bg-dark: #0F0F12;\n --bg-card: #E60067;\n --ds-bg-dark: #0F0F12;\n --ds-bg-card: #E60067;\n --ds-text-primary: #FDFDFD;\n --ds-text-muted: #A0A0B0;\n}\n\n@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Work+Sans:ital,wght@0,400;0,600;0,800;1,700&display=swap');\n\n \n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n \n\n /* HEADER */\n[data-layout-root] .comic-header {\n position: sticky;\n top: 0;\n z-index: 100;\n background: var(--bg);\n border-bottom: 6px solid var(--black);\n box-shadow: 0 8px 0 var(--yellow);\n }\n\n[data-layout-root] .header-inner {\n max-width: 1300px;\n margin: 0 auto;\n padding: 0.75rem 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n }\n\n[data-layout-root] .logo-badge {\n background: var(--yellow);\n color: var(--black);\n font-family: 'Bangers', cursive;\n font-size: 2.2rem;\n letter-spacing: 2px;\n padding: 0.2rem 1.2rem;\n border: var(--border-thin);\n box-shadow: 4px 4px 0 var(--magenta);\n text-decoration: none;\n transform: rotate(-2deg);\n display: inline-block;\n }\n\n[data-layout-root] .ds-nav-links {\n display: flex;\n gap: 1rem;\n list-style: none;\n }\n\n[data-layout-root] .nav-link {\n color: var(--text);\n text-decoration: none;\n font-weight: 800;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n padding: 0.4rem 0.8rem;\n border: 2px solid transparent;\n transition: all 0.2s ease;\n }\n\n[data-layout-root] .nav-link:hover {\n background: var(--magenta);\n color: var(--text);\n border: 2px solid var(--black);\n transform: skewX(-10deg);\n }\n\n[data-layout-root] .header-actions {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n }\n\n[data-layout-root] .action-badge {\n background: var(--card-bg);\n color: var(--text);\n border: 2px solid var(--yellow);\n padding: 0.4rem 0.8rem;\n font-weight: 700;\n font-size: 0.85rem;\n text-decoration: none;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n gap: 0.4rem;\n }\n\n[data-layout-root] .cart-btn {\n background: var(--magenta);\n color: var(--text);\n border: 2px solid var(--black);\n box-shadow: 3px 3px 0 var(--yellow);\n font-family: 'Bangers', cursive;\n font-size: 1.2rem;\n letter-spacing: 1px;\n padding: 0.4rem 1rem;\n text-decoration: none;\n }\n\n[data-layout-root] .mobile-menu-btn {\n display: none;\n background: var(--yellow);\n color: var(--black);\n font-family: 'Bangers', cursive;\n font-size: 1.1rem;\n padding: 0.4rem 0.8rem;\n border: 2px solid var(--black);\n text-decoration: none;\n }\n\n /* MAIN WRAPPER */\n[data-layout-root] main {\n background: var(--bg);\n display: flex;\n flex-direction: column;\n gap: 4rem;\n padding-bottom: 5rem;\n }\n\n /* HERO SECTION */\n[data-layout-root] .hero-section {\n background: var(--bg);\n position: relative;\n padding: 3.5rem 1.5rem 2rem;\n max-width: 1300px;\n margin: 0 auto;\n width: 100%;\n }\n\n[data-layout-root] .ds-hero-grid {\n display: grid;\n grid-template-columns: 1.1fr 1.3fr;\n gap: 2.5rem;\n align-items: center;\n }\n\n[data-layout-root] .ds-hero-content {\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n }\n\n[data-layout-root] .product-tag {\n display: inline-block;\n align-self: flex-start;\n background: var(--ink-blue);\n color: var(--yellow);\n font-family: 'Bangers', cursive;\n font-size: 1.25rem;\n letter-spacing: 1.5px;\n padding: 0.3rem 0.9rem;\n border: var(--border-thin);\n box-shadow: 4px 4px 0 var(--black);\n transform: rotate(-1deg);\n }\n\n[data-layout-root] .ds-hero-title {\n font-family: 'Bangers', cursive;\n font-size: 4rem;\n line-height: 0.95;\n letter-spacing: 2px;\n color: var(--yellow);\n text-shadow: 4px 4px 0 var(--black), -2px -2px 0 var(--magenta);\n text-transform: uppercase;\n }\n\n[data-layout-root] .ds-hero-description {\n font-size: 1.15rem;\n color: var(--muted);\n max-width: 520px;\n font-weight: 400;\n line-height: 1.6;\n }\n\n[data-layout-root] .cta-banner {\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-top: 0.5rem;\n flex-wrap: wrap;\n }\n\n[data-layout-root] .btn-action {\n background: var(--yellow);\n color: var(--black);\n font-family: 'Bangers', cursive;\n font-size: 1.8rem;\n letter-spacing: 1.5px;\n padding: 0.8rem 2rem;\n border: var(--border-thick);\n box-shadow: 8px 8px 0 var(--magenta);\n text-decoration: none;\n display: inline-block;\n transform: skewX(-8deg);\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n }\n\n[data-layout-root] .btn-action:hover {\n transform: skewX(-8deg) translate(-3px, -3px);\n box-shadow: 11px 11px 0 var(--magenta);\n background: #FFE033;\n }\n\n[data-layout-root] .nostalgia-stamp {\n font-family: 'Bangers', cursive;\n color: var(--magenta);\n font-size: 1.2rem;\n letter-spacing: 1px;\n border: 2px dashed var(--magenta);\n padding: 0.4rem 0.8rem;\n transform: rotate(3deg);\n }\n\n /* MONOLITHIC SPLASH SIGNATURE EFFECT */\n[data-layout-root] .splash-signature {\n position: relative;\n width: 100%;\n height: 520px;\n display: grid;\n grid-template-columns: 2fr 1fr 1.2fr;\n gap: 12px;\n background: var(--black);\n padding: 12px;\n border: var(--border-thick);\n box-shadow: 14px 14px 0 var(--black), 20px 20px 0 var(--yellow);\n transform: skewY(-2.5deg);\n overflow: hidden;\n }\n\n[data-layout-root] .splash-panel {\n position: relative;\n height: 100%;\n overflow: hidden;\n border: 4px solid var(--black);\n background: #000;\n }\n\n[data-layout-root] .splash-panel img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: contrast(1.15) saturate(1.2);\n transition: transform 0.4s ease;\n }\n\n[data-layout-root] .splash-panel:hover img {\n transform: scale(1.08) rotate(1deg);\n }\n\n[data-layout-root] .panel-caption {\n position: absolute;\n bottom: 12px;\n left: 12px;\n background: var(--yellow);\n color: var(--black);\n font-family: 'Bangers', cursive;\n font-size: 1.1rem;\n padding: 0.2rem 0.7rem;\n border: 2px solid var(--black);\n box-shadow: 3px 3px 0 var(--black);\n text-transform: uppercase;\n z-index: 2;\n }\n\n[data-layout-root] .panel-burst {\n position: absolute;\n top: 15px;\n right: 15px;\n background: var(--magenta);\n color: var(--text);\n font-family: 'Bangers', cursive;\n font-size: 1.3rem;\n padding: 0.5rem 0.8rem;\n clip-path: polygon(50% 0%, 65% 28%, 100% 15%, 78% 48%, 100% 80%, 63% 72%, 50% 100%, 35% 71%, 0 85%, 22% 47%, 0 15%, 33% 27%);\n z-index: 3;\n text-shadow: 1px 1px 0 var(--black);\n animation: pulse 2s infinite ease-in-out;\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.08); }\n }\n\n /* SUPPORT SECTION 1 */\n[data-layout-root] .support-section-1 {\n max-width: 1300px;\n margin: 0 auto;\n padding: 0 1.5rem;\n width: 100%;\n }\n\n[data-layout-root] .section-header-banner {\n background: var(--magenta);\n color: var(--text);\n border: var(--border-thick);\n box-shadow: 8px 8px 0 var(--black);\n padding: 1rem 2rem;\n margin-bottom: 2.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transform: rotate(-0.5deg);\n }\n\n[data-layout-root] .section-header-banner h2 {\n font-family: 'Bangers', cursive;\n font-size: 2.8rem;\n letter-spacing: 2px;\n text-shadow: 3px 3px 0 var(--black);\n text-transform: uppercase;\n }\n\n[data-layout-root] .issue-tag {\n background: var(--yellow);\n color: var(--black);\n font-family: 'Bangers', cursive;\n font-size: 1.3rem;\n padding: 0.3rem 1rem;\n border: 2px solid var(--black);\n }\n\n[data-layout-root] .splash-story-grid {\n display: grid;\n grid-template-columns: 1.8fr 1fr;\n gap: 2rem;\n }\n\n[data-layout-root] .main-graphic-frame {\n background: var(--card-bg);\n border: var(--border-thick);\n box-shadow: 10px 10px 0 var(--black), 16px 16px 0 var(--ink-blue);\n padding: 1.5rem;\n position: relative;\n }\n\n[data-layout-root] .graphic-img-wrapper {\n position: relative;\n width: 100%;\n height: 420px;\n border: 4px solid var(--black);\n overflow: hidden;\n }\n\n[data-layout-root] .graphic-img-wrapper img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n[data-layout-root] .comic-box-caption {\n background: #FFF;\n color: var(--black);\n border: 3px solid var(--black);\n padding: 0.8rem 1.2rem;\n font-size: 0.95rem;\n font-weight: 700;\n font-style: italic;\n margin-top: 1.2rem;\n box-shadow: 4px 4px 0 var(--black);\n }\n\n[data-layout-root] .comic-box-caption span {\n background: var(--yellow);\n padding: 0.1rem 0.4rem;\n font-style: normal;\n font-family: 'Bangers', cursive;\n font-size: 1.1rem;\n margin-right: 0.4rem;\n }\n\n[data-layout-root] .side-panels-stack {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n }\n\n[data-layout-root] .feature-panel-card {\n background: var(--card-bg);\n border: 4px solid var(--black);\n box-shadow: 6px 6px 0 var(--black);\n padding: 1.2rem;\n display: flex;\n gap: 1rem;\n align-items: center;\n }\n\n[data-layout-root] .panel-thumb {\n width: 110px;\n height: 110px;\n flex-shrink: 0;\n border: 3px solid var(--black);\n overflow: hidden;\n }\n\n[data-layout-root] .panel-thumb img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n[data-layout-root] .panel-info h3 {\n font-family: 'Bangers', cursive;\n font-size: 1.5rem;\n color: var(--yellow);\n letter-spacing: 1px;\n margin-bottom: 0.3rem;\n }\n\n[data-layout-root] .panel-info p {\n font-size: 0.9rem;\n color: var(--muted);\n line-height: 1.4;\n }\n\n /* SUPPORT SECTION 2 */\n[data-layout-root] .support-section-2 {\n max-width: 1300px;\n margin: 0 auto;\n padding: 0 1.5rem;\n width: 100%;\n }\n\n[data-layout-root] .spec-sheet-container {\n background: #15151A;\n border: var(--border-thick);\n box-shadow: 12px 12px 0 var(--black), 18px 18px 0 var(--magenta);\n padding: 2.5rem;\n position: relative;\n }\n\n[data-layout-root] .spec-sheet-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n border-bottom: 4px solid var(--black);\n padding-bottom: 1.5rem;\n margin-bottom: 2rem;\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n[data-layout-root] .spec-title-group h2 {\n font-family: 'Bangers', cursive;\n font-size: 3.2rem;\n color: var(--yellow);\n letter-spacing: 2px;\n line-height: 1;\n }\n\n[data-layout-root] .spec-title-group p {\n color: var(--muted);\n font-size: 1rem;\n margin-top: 0.5rem;\n }\n\n[data-layout-root] .price-stamp-box {\n background: var(--yellow);\n color: var(--black);\n border: var(--border-thick);\n padding: 0.6rem 1.5rem;\n text-align: center;\n transform: rotate(2deg);\n box-shadow: 5px 5px 0 var(--black);\n }\n\n[data-layout-root] .price-stamp-box .price-num {\n font-family: 'Bangers', cursive;\n font-size: 2.8rem;\n line-height: 1;\n }\n\n[data-layout-root] .price-stamp-box .price-sub {\n font-size: 0.75rem;\n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n[data-layout-root] .spec-items-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2.5rem;\n }\n\n[data-layout-root] .spec-item-box {\n background: #1D1D26;\n border: 3px solid var(--black);\n padding: 1.25rem;\n position: relative;\n box-shadow: 4px 4px 0 var(--black);\n }\n\n[data-layout-root] .spec-num {\n background: var(--magenta);\n color: var(--text);\n font-family: 'Bangers', cursive;\n font-size: 1.2rem;\n padding: 0.1rem 0.6rem;\n border: 2px solid var(--black);\n display: inline-block;\n margin-bottom: 0.75rem;\n }\n\n[data-layout-root] .spec-item-box h4 {\n font-family: 'Bangers', cursive;\n font-size: 1.6rem;\n color: var(--text);\n letter-spacing: 1px;\n margin-bottom: 0.4rem;\n }\n\n[data-layout-root] .spec-item-box p {\n font-size: 0.9rem;\n color: var(--muted);\n }\n\n[data-layout-root] .collections-pills {\n display: flex;\n gap: 0.75rem;\n flex-wrap: wrap;\n align-items: center;\n padding-top: 1rem;\n border-top: 2px dashed #333;\n }\n\n[data-layout-root] .pill-label {\n font-family: 'Bangers', cursive;\n font-size: 1.2rem;\n color: var(--yellow);\n margin-right: 0.5rem;\n }\n\n[data-layout-root] .collection-pill {\n background: var(--ink-blue);\n color: var(--text);\n border: 2px solid var(--black);\n padding: 0.3rem 0.9rem;\n font-size: 0.85rem;\n font-weight: 700;\n text-transform: uppercase;\n text-decoration: none;\n letter-spacing: 0.5px;\n }\n\n[data-layout-root] .collection-pill:hover {\n background: var(--yellow);\n color: var(--black);\n }\n\n /* RESPONSIVE & MOBILE ACCESSIBILITY */\n @media (max-width: 992px) {\n[data-layout-root] .ds-hero-grid {\n grid-template-columns: 1fr;\n }\n[data-layout-root] .splash-signature {\n height: 420px;\n grid-template-columns: 1fr 1fr;\n }\n[data-layout-root] .splash-panel:nth-child(3) {\n display: none;\n }\n[data-layout-root] .splash-story-grid {\n grid-template-columns: 1fr;\n }\n[data-layout-root] .ds-hero-title {\n font-size: 3.2rem;\n }\n }\n\n @media (max-width: 760px) {\n[data-layout-root] .comic-header .header-inner {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n[data-layout-root] .comic-header [data-slot=\"nav\"],\n[data-layout-root] .comic-header [data-slot=\"search\"],\n[data-layout-root] .comic-header [data-slot=\"login\"],\n[data-layout-root] .comic-header [data-slot=\"currency\"] {\n display: none !important;\n }\n[data-layout-root] .comic-header [data-slot=\"logo\"] {\n display: flex !important;\n margin-right: auto !important;\n }\n[data-layout-root] .comic-header [data-slot=\"cart\"],\n[data-layout-root] .comic-header [data-slot=\"mobile-menu\"] {\n display: flex !important;\n align-items: center !important;\n }\n[data-layout-root] .mobile-menu-btn {\n display: inline-block;\n }\n[data-layout-root] .splash-signature {\n height: 320px;\n grid-template-columns: 1fr;\n transform: none;\n }\n[data-layout-root] .splash-panel:nth-child(2) {\n display: none;\n }\n[data-layout-root] .ds-hero-title {\n font-size: 2.6rem;\n }\n[data-layout-root] .btn-action {\n font-size: 1.4rem;\n width: 100%;\n text-align: center;\n }\n[data-layout-root] .section-header-banner {\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n }\n }\n\n /* REDUCED MOTION FALLBACK */\n @media (prefers-reduced-motion: reduce) {\n *, ::before, ::after {\n animation: none !important;\n transition: none !important;\n }\n[data-layout-root] .panel-burst {\n animation: none !important;\n }\n[data-layout-root] .splash-signature {\n transform: none !important;\n }\n[data-layout-root] .btn-action {\n transform: none !important;\n }\n[data-layout-root] .splash-panel img {\n transition: none !important;\n }\n[data-layout-root] .splash-panel:hover img {\n transform: none !important;\n }\n }\n \n\n@media (max-width:760px){\n[data-layout-root] header{max-width:100%!important;min-width:0!important;display:flex!important;align-items:center!important;gap:12px!important;overflow:visible!important}\n[data-layout-root] header [data-slot=\"nav\"],header [data-slot=\"search\"],header [data-slot=\"login\"],header [data-slot=\"currency\"]{display:none!important}\n[data-layout-root] header [data-slot=\"logo\"]{display:flex!important;visibility:visible!important;opacity:1!important;position:static!important;margin-right:auto!important;min-width:0!important}\n[data-layout-root] header [data-slot=\"cart\"],header [data-slot=\"mobile-menu\"]{display:flex!important;visibility:visible!important;opacity:1!important;position:static!important;transform:none!important;white-space:nowrap!important}\n[data-layout-root] header *:has(>[data-slot=\"cart\"]),header *:has(>[data-slot=\"mobile-menu\"]){display:flex!important;visibility:visible!important;align-items:center!important;gap:10px!important}\n}\n\n[data-layout-root] .ds-trust-section {\n background: #0F0F12;\n padding: 3rem 1.5rem;\n position: relative;\n }\n\n[data-layout-root] .ds-trust-container {\n max-width: 1300px;\n margin: 0 auto;\n }\n\n[data-layout-root] .ds-banner-header {\n background: #E60067;\n color: #FDFDFD;\n border: 8px solid #000000;\n box-shadow: 8px 8px 0 #000000;\n padding: 1.25rem 2rem;\n margin-bottom: 2.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n transform: rotate(-0.5deg);\n }\n\n[data-layout-root] .ds-banner-title {\n font-family: 'Bangers', cursive;\n font-size: 2.5rem;\n letter-spacing: 2px;\n color: #FFCC00;\n text-shadow: 3px 3px 0 #000000;\n line-height: 1;\n margin: 0;\n }\n\n[data-layout-root] .ds-banner-badge {\n background: #FFCC00;\n color: #000000;\n font-family: 'Bangers', cursive;\n font-size: 1.25rem;\n padding: 0.3rem 1rem;\n border: 3px solid #000000;\n box-shadow: 4px 4px 0 #000000;\n transform: rotate(2deg);\n }\n\n[data-layout-root] .ds-trust-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n gap: 1.75rem;\n }\n\n[data-layout-root] .ds-trust-card {\n background: #16161C;\n border: 4px solid #000000;\n box-shadow: 6px 6px 0 #000000;\n padding: 1.75rem 1.5rem;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n[data-layout-root] .ds-trust-card:hover {\n transform: translateY(-4px);\n box-shadow: 8px 10px 0 #FFCC00;\n }\n\n[data-layout-root] .ds-starburst {\n position: absolute;\n top: -16px;\n right: -12px;\n background: #FFCC00;\n color: #000000;\n font-family: 'Bangers', cursive;\n font-size: 0.95rem;\n padding: 0.4rem 0.6rem;\n clip-path: polygon(50% 0%, 65% 28%, 100% 15%, 78% 48%, 100% 80%, 63% 72%, 50% 100%, 35% 71%, 0 85%, 22% 47%, 0 15%, 33% 27%);\n border: 1px solid #000;\n line-height: 1;\n text-align: center;\n }\n\n[data-layout-root] .ds-trust-icon {\n font-family: 'Bangers', cursive;\n font-size: 1.8rem;\n color: #FFCC00;\n background: #1D3557;\n width: 52px;\n height: 52px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 3px solid #000000;\n box-shadow: 3px 3px 0 #000000;\n margin-bottom: 0.5rem;\n }\n\n[data-layout-root] .ds-trust-title {\n font-family: 'Bangers', cursive;\n font-size: 1.6rem;\n color: #FDFDFD;\n letter-spacing: 1px;\n line-height: 1.1;\n }\n\n[data-layout-root] .ds-trust-desc {\n font-size: 0.95rem;\n color: #A0A0B0;\n line-height: 1.5;\n }\n\n /* FEATURES SECTION */\n[data-layout-root] .ds-features-section {\n background: #0F0F12;\n padding: 3.5rem 1.5rem;\n position: relative;\n }\n\n[data-layout-root] .ds-features-container {\n max-width: 1300px;\n margin: 0 auto;\n }\n\n[data-layout-root] .ds-features-grid {\n display: grid;\n grid-template-columns: 1.1fr 0.9fr;\n gap: 2.5rem;\n align-items: start;\n }\n\n @media (max-width: 900px) {\n[data-layout-root] .ds-features-grid {\n grid-template-columns: 1fr;\n }\n }\n\n[data-layout-root] .ds-feature-list {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n }\n\n[data-layout-root] .ds-feature-item {\n background: #16161C;\n border: 4px solid #000000;\n box-shadow: 6px 6px 0 #E60067;\n padding: 1.5rem;\n display: flex;\n gap: 1.25rem;\n align-items: flex-start;\n }\n\n[data-layout-root] .ds-feature-badge {\n background: #FFCC00;\n color: #000000;\n font-family: 'Bangers', cursive;\n font-size: 1.8rem;\n width: 48px;\n height: 48px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 3px solid #000000;\n box-shadow: 3px 3px 0 #000000;\n transform: rotate(-2deg);\n }\n\n[data-layout-root] .ds-feature-content {\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n }\n\n[data-layout-root] .ds-feature-title {\n font-family: 'Bangers', cursive;\n font-size: 1.75rem;\n color: #FFCC00;\n letter-spacing: 1px;\n line-height: 1.1;\n }\n\n[data-layout-root] .ds-feature-text {\n color: #A0A0B0;\n font-size: 0.95rem;\n line-height: 1.5;\n }\n\n[data-layout-root] .ds-showcase-panel {\n background: #16161C;\n border: 8px solid #000000;\n box-shadow: 10px 10px 0 #FFCC00;\n padding: 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n position: sticky;\n top: 100px;\n }\n\n[data-layout-root] .ds-panel-card {\n position: relative;\n border: 4px solid #000000;\n background: #000000;\n overflow: hidden;\n }\n\n[data-layout-root] .ds-panel-img-wrap {\n width: 100%;\n height: 320px;\n overflow: hidden;\n position: relative;\n }\n\n[data-layout-root] .ds-panel-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: contrast(1.1) saturate(1.15);\n transition: transform 0.4s ease;\n }\n\n[data-layout-root] .ds-panel-card:hover .ds-panel-img {\n transform: scale(1.05);\n }\n\n[data-layout-root] .ds-panel-burst {\n position: absolute;\n top: 12px;\n right: 12px;\n background: #E60067;\n color: #FDFDFD;\n font-family: 'Bangers', cursive;\n font-size: 1.2rem;\n padding: 0.4rem 0.8rem;\n border: 2px solid #000000;\n transform: rotate(4deg);\n box-shadow: 3px 3px 0 #000000;\n }\n\n[data-layout-root] .ds-panel-info {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n\n[data-layout-root] .ds-product-price {\n font-family: 'Bangers', cursive;\n font-size: 2.2rem;\n color: #FFCC00;\n text-shadow: 2px 2px 0 #000000;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n }\n\n[data-layout-root] .ds-price-tag {\n background: #1D3557;\n color: #FDFDFD;\n font-size: 0.9rem;\n padding: 0.2rem 0.6rem;\n border: 2px solid #000;\n font-family: 'Work Sans', sans-serif;\n font-weight: 800;\n text-transform: uppercase;\n }\n\n[data-layout-root] .ds-product-cta {\n background: #FFCC00;\n color: #000000;\n font-family: 'Bangers', cursive;\n font-size: 1.8rem;\n letter-spacing: 1.5px;\n padding: 0.8rem 1.5rem;\n border: 4px solid #000000;\n box-shadow: 6px 6px 0 #E60067;\n text-decoration: none;\n text-align: center;\n display: block;\n transform: skewX(-6deg);\n transition: all 0.2s ease;\n }\n\n[data-layout-root] .ds-product-cta:hover {\n transform: skewX(-6deg) translate(-2px, -2px);\n box-shadow: 8px 8px 0 #E60067;\n background: #FFE033;\n }\n\n[data-layout-root] .ds-gallery-strip {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 0.75rem;\n }\n\n[data-layout-root] .ds-gallery-item {\n height: 100px;\n border: 3px solid #000000;\n overflow: hidden;\n background: #000;\n }\n\n[data-layout-root] .ds-gallery-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: grayscale(0.2) contrast(1.1);\n }\n\n @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Work+Sans:ital,wght@0,400;0,600;0,800;1,700&display=swap');\n\n \n\n[data-layout-root] .ds-pdp-root {\n background-color: var(--ds-bg);\n color: var(--ds-text);\n font-family: 'Work Sans', sans-serif;\n line-height: 1.5;\n background-image: radial-gradient(rgba(255, 204, 0, 0.12) 15%, transparent 16%);\n background-size: 20px 20px;\n padding-bottom: 5rem;\n overflow-x: hidden;\n }\n\n /* BREADCRUMBS */\n[data-layout-root] .ds-breadcrumbs-nav {\n max-width: 1300px;\n margin: 0 auto;\n padding: 1.5rem 1.5rem 0.5rem;\n }\n\n[data-layout-root] .ds-breadcrumb-ribbon {\n display: inline-flex;\n align-items: center;\n gap: 0.6rem;\n background: var(--ds-ink-blue);\n color: var(--ds-yellow);\n border: var(--ds-border-thin);\n box-shadow: 4px 4px 0 var(--ds-black);\n padding: 0.4rem 1rem;\n font-family: 'Bangers', cursive;\n font-size: 1.1rem;\n letter-spacing: 1px;\n transform: rotate(-1deg);\n }\n\n[data-layout-root] .ds-breadcrumb-ribbon a {\n color: var(--ds-text);\n text-decoration: none;\n transition: color 0.2s;\n }\n\n[data-layout-root] .ds-breadcrumb-ribbon a:hover {\n color: var(--ds-yellow);\n }\n\n[data-layout-root] .ds-breadcrumb-sep {\n color: var(--ds-magenta);\n }\n\n /* MAIN PDP LAYOUT */\n[data-layout-root] .ds-pdp-main {\n max-width: 1300px;\n margin: 1.5rem auto 0;\n padding: 0 1.5rem;\n display: grid;\n grid-template-columns: 1.25fr 1fr;\n gap: 2.5rem;\n align-items: start;\n }\n\n @media (max-width: 992px) {\n[data-layout-root] .ds-pdp-main {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n }\n\n /* GALLERY STYLING & CONTAINER */\n[data-layout-root] .ds-gallery-panel-wrapper {\n position: relative;\n background: var(--ds-black);\n border: var(--ds-border-thick);\n box-shadow: 10px 10px 0 var(--ds-yellow), 16px 16px 0 var(--ds-black);\n padding: 1rem;\n transform: skewY(-1deg);\n }\n\n[data-layout-root] .ds-starburst-badge {\n position: absolute;\n top: -18px;\n right: -18px;\n z-index: 10;\n background: var(--ds-mint);\n color: var(--ds-black);\n font-family: 'Bangers', cursive;\n font-size: 1.15rem;\n padding: 0.8rem 1rem;\n text-align: center;\n line-height: 1;\n clip-path: polygon(50% 0%, 65% 28%, 100% 15%, 78% 48%, 100% 80%, 63% 72%, 50% 100%, 35% 71%, 0 85%, 22% 47%, 0 15%, 33% 27%);\n box-shadow: 0 0 10px rgba(0,0,0,0.5);\n transform: rotate(12deg);\n font-weight: bold;\n text-transform: uppercase;\n }\n\n[data-layout-root] .ds-pdp-root .slot-gallery {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n[data-layout-root] .ds-pdp-root .slot-gallery img {\n width: 100%;\n height: auto;\n object-fit: cover;\n border: var(--ds-border-mid);\n background: var(--ds-card-bg);\n filter: contrast(1.1) saturate(1.15);\n }\n\n /* PRODUCT ACTION & DETAILS PANEL */\n[data-layout-root] .ds-details-panel {\n background: var(--ds-card-bg);\n border: var(--ds-border-thick);\n box-shadow: 8px 8px 0 var(--ds-magenta), 14px 14px 0 var(--ds-black);\n padding: 2rem;\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n position: relative;\n }\n\n[data-layout-root] .ds-badge-row {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n flex-wrap: wrap;\n }\n\n[data-layout-root] .ds-mint-tag {\n background: var(--ds-yellow);\n color: var(--ds-black);\n font-family: 'Bangers', cursive;\n font-size: 1.1rem;\n padding: 0.2rem 0.8rem;\n border: var(--ds-border-thin);\n box-shadow: 3px 3px 0 var(--ds-black);\n text-transform: uppercase;\n transform: rotate(-2deg);\n }\n\n[data-layout-root] .ds-issue-tag {\n background: var(--ds-magenta);\n color: var(--ds-text);\n font-family: 'Bangers', cursive;\n font-size: 1.1rem;\n padding: 0.2rem 0.8rem;\n border: var(--ds-border-thin);\n box-shadow: 3px 3px 0 var(--ds-black);\n text-transform: uppercase;\n }\n\n /* SLOT STYLING IN DETAILED FORM */\n[data-layout-root] .ds-pdp-root .slot-title,\n[data-layout-root] .ds-pdp-root .slot-title .slot-product-name,\n[data-layout-root] .ds-pdp-root .slot-title h1 {\n font-family: 'Bangers', cursive;\n font-size: 3.2rem;\n line-height: 0.95;\n letter-spacing: 1.5px;\n color: var(--ds-yellow);\n text-shadow: 3px 3px 0 var(--ds-black), -2px -2px 0 var(--ds-magenta);\n text-transform: uppercase;\n margin: 0;\n }\n\n[data-layout-root] .ds-pdp-root .slot-price,\n[data-layout-root] .ds-pdp-root .slot-price .slot-price-amount {\n font-family: 'Bangers', cursive;\n font-size: 2.5rem;\n color: var(--ds-text);\n letter-spacing: 1px;\n display: flex;\n align-items: baseline;\n gap: 0.75rem;\n margin: 0.25rem 0;\n }\n\n[data-layout-root] .ds-pdp-root .slot-price ins,\n[data-layout-root] .ds-pdp-root .slot-price span {\n color: var(--ds-mint);\n text-shadow: 2px 2px 0 var(--ds-black);\n }\n\n[data-layout-root] .ds-pdp-root .slot-price del {\n color: var(--ds-muted);\n font-size: 1.6rem;\n text-decoration: line-through;\n }\n\n[data-layout-root] .ds-pdp-root .slot-description {\n font-size: 1.05rem;\n color: var(--ds-muted);\n line-height: 1.6;\n border-top: var(--ds-border-thin);\n border-bottom: var(--ds-border-thin);\n padding: 1rem 0;\n margin: 0.25rem 0;\n }\n\n[data-layout-root] .ds-pdp-root .slot-description p {\n margin-bottom: 0.5rem;\n }\n\n /* VARIANTS SLOT */\n[data-layout-root] .ds-pdp-root .slot-variants {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n\n[data-layout-root] .ds-pdp-root .slot-variant-label,\n[data-layout-root] .ds-pdp-root .slot-variants label {\n font-family: 'Bangers', cursive;\n font-size: 1.25rem;\n color: var(--ds-yellow);\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n[data-layout-root] .ds-pdp-root .slot-variant-options,\n[data-layout-root] .ds-pdp-root .slot-variants div {\n display: flex;\n flex-wrap: wrap;\n gap: 0.6rem;\n }\n\n[data-layout-root] .ds-pdp-root .slot-variant-btn,\n[data-layout-root] .ds-pdp-root .slot-variants button {\n background: var(--ds-bg);\n color: var(--ds-text);\n border: var(--ds-border-mid);\n padding: 0.5rem 1rem;\n font-family: 'Work Sans', sans-serif;\n font-weight: 700;\n text-transform: uppercase;\n cursor: pointer;\n box-shadow: 3px 3px 0 var(--ds-black);\n transition: all 0.15s ease;\n }\n\n[data-layout-root] .ds-pdp-root .slot-variant-btn:hover,\n[data-layout-root] .ds-pdp-root .slot-variant-btn.selected,\n[data-layout-root] .ds-pdp-root .slot-variants button.active {\n background: var(--ds-magenta);\n color: var(--ds-text);\n box-shadow: 4px 4px 0 var(--ds-yellow);\n transform: translateY(-2px);\n }\n\n /* QUANTITY SLOT */\n[data-layout-root] .ds-pdp-root .slot-quantity {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n[data-layout-root] .ds-pdp-root .slot-quantity label {\n font-family: 'Bangers', cursive;\n font-size: 1.25rem;\n color: var(--ds-yellow);\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n[data-layout-root] .ds-pdp-root .slot-quantity-controls,\n[data-layout-root] .ds-pdp-root .slot-quantity input,\n[data-layout-root] .ds-pdp-root .slot-quantity div {\n display: inline-flex;\n align-items: center;\n border: var(--ds-border-mid);\n background: var(--ds-bg);\n box-shadow: 3px 3px 0 var(--ds-black);\n }\n\n[data-layout-root] .ds-pdp-root .slot-quantity input {\n background: transparent;\n color: var(--ds-text);\n border: none;\n padding: 0.5rem;\n width: 60px;\n text-align: center;\n font-weight: 800;\n font-size: 1.1rem;\n }\n\n[data-layout-root] .ds-pdp-root .slot-quantity button {\n background: var(--ds-ink-blue);\n color: var(--ds-yellow);\n border: none;\n width: 38px;\n height: 38px;\n font-weight: 900;\n font-size: 1.2rem;\n cursor: pointer;\n }\n\n /* CTA SLOTS: ADD TO CART & BUY NOW */\n[data-layout-root] .ds-pdp-root .slot-add-to-cart {\n display: block !important;\n width: 100% !important;\n margin-top: 0.5rem;\n }\n\n[data-layout-root] .ds-pdp-root .slot-add-to-cart-control,\n[data-layout-root] .ds-pdp-root .slot-add-to-cart button,\n[data-layout-root] .ds-pdp-root .slot-add-to-cart a {\n display: block !important;\n width: 100% !important;\n background: var(--ds-yellow) !important;\n color: var(--ds-black) !important;\n font-family: 'Bangers', cursive !important;\n font-size: 2rem !important;\n letter-spacing: 2px !important;\n padding: 1rem 1.5rem !important;\n border: var(--ds-border-thick) !important;\n box-shadow: 8px 8px 0 var(--ds-magenta) !important;\n text-align: center !important;\n text-decoration: none !important;\n text-transform: uppercase !important;\n cursor: pointer !important;\n transform: skewX(-6deg);\n transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;\n }\n\n[data-layout-root] .ds-pdp-root .slot-add-to-cart-control:hover,\n[data-layout-root] .ds-pdp-root .slot-add-to-cart button:hover {\n transform: skewX(-6deg) translate(-2px, -2px);\n box-shadow: 11px 11px 0 var(--ds-magenta) !important;\n background: #FFE033 !important;\n }\n\n[data-layout-root] .ds-pdp-root .slot-buy-now {\n display: block !important;\n width: 100% !important;\n }\n\n[data-layout-root] .ds-pdp-root .slot-buy-now-control,\n[data-layout-root] .ds-pdp-root .slot-buy-now button,\n[data-layout-root] .ds-pdp-root .slot-buy-now a {\n display: block !important;\n width: 100% !important;\n background: var(--ds-magenta) !important;\n color: var(--ds-text) !important;\n font-family: 'Bangers', cursive !important;\n font-size: 1.5rem !important;\n letter-spacing: 1.5px !important;\n padding: 0.8rem 1.5rem !important;\n border: var(--ds-border-mid) !important;\n box-shadow: 6px 6px 0 var(--ds-black) !important;\n text-align: center !important;\n text-decoration: none !important;\n text-transform: uppercase !important;\n cursor: pointer !important;\n transition: transform 0.15s ease, box-shadow 0.15s ease !important;\n }\n\n[data-layout-root] .ds-pdp-root .slot-buy-now-control:hover,\n[data-layout-root] .ds-pdp-root .slot-buy-now button:hover {\n transform: translate(-2px, -2px);\n box-shadow: 8px 8px 0 var(--ds-yellow) !important;\n }\n\n /* QUICK TRUST LIST UNDER CTAS */\n[data-layout-root] .ds-quick-trust-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 0.75rem;\n margin-top: 0.5rem;\n padding-top: 1rem;\n border-top: 2px dashed rgba(255, 204, 0, 0.3);\n }\n\n[data-layout-root] .ds-trust-chip {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.85rem;\n font-weight: 700;\n color: var(--ds-text);\n text-transform: uppercase;\n }\n\n[data-layout-root] .ds-trust-chip-icon {\n width: 24px;\n height: 24px;\n background: var(--ds-yellow);\n color: var(--ds-black);\n border: 1px solid var(--ds-black);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Bangers', cursive;\n font-size: 0.9rem;\n flex-shrink: 0;\n }\n\n /* SHIPPING & DELIVERY SECTION */\n[data-layout-root] .ds-shipping-section {\n max-width: 1300px;\n margin: 4rem auto 0;\n padding: 0 1.5rem;\n }\n\n[data-layout-root] .ds-section-banner {\n background: var(--ds-magenta);\n color: var(--ds-text);\n border: var(--ds-border-thick);\n box-shadow: 8px 8px 0 var(--ds-black);\n padding: 1rem 2rem;\n margin-bottom: 2.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transform: rotate(-0.5deg);\n }\n\n[data-layout-root] .ds-section-banner h2 {\n font-family: 'Bangers', cursive;\n font-size: 2.5rem;\n letter-spacing: 2px;\n text-shadow: 2px 2px 0 var(--ds-black);\n text-transform: uppercase;\n margin: 0;\n }\n\n[data-layout-root] .ds-shipping-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1.75rem;\n }\n\n @media (max-width: 868px) {\n[data-layout-root] .ds-shipping-grid {\n grid-template-columns: 1fr;\n }\n }\n\n[data-layout-root] .ds-shipping-card {\n background: var(--ds-card-bg);\n border: var(--ds-border-mid);\n box-shadow: 6px 6px 0 var(--ds-black);\n padding: 1.75rem;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n }\n\n[data-layout-root] .ds-card-num {\n position: absolute;\n top: -15px;\n right: 15px;\n background: var(--ds-yellow);\n color: var(--ds-black);\n font-family: 'Bangers', cursive;\n font-size: 1.5rem;\n padding: 0.2rem 0.8rem;\n border: var(--ds-border-thin);\n box-shadow: 3px 3px 0 var(--ds-black);\n }\n\n[data-layout-root] .ds-shipping-card h3 {\n font-family: 'Bangers', cursive;\n font-size: 1.6rem;\n color: var(--ds-yellow);\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n[data-layout-root] .ds-shipping-card p {\n color: var(--ds-muted);\n font-size: 0.95rem;\n line-height: 1.5;\n }\n\n /* TRUST HIGHLIGHTS / COLLECTOR GUARANTEE SECTION */\n[data-layout-root] .ds-trust-section {\n max-width: 1300px;\n margin: 4rem auto 0;\n padding: 0 1.5rem;\n }\n\n[data-layout-root] .ds-guarantee-box {\n background: var(--ds-ink-blue);\n border: var(--ds-border-thick);\n box-shadow: 10px 10px 0 var(--ds-yellow), 16px 16px 0 var(--ds-black);\n padding: 2.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2.5rem;\n align-items: center;\n position: relative;\n overflow: hidden;\n }\n\n @media (max-width: 868px) {\n[data-layout-root] .ds-guarantee-box {\n grid-template-columns: 1fr;\n }\n }\n\n[data-layout-root] .ds-guarantee-burst-wrap {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n[data-layout-root] .ds-big-starburst {\n width: 220px;\n height: 220px;\n background: var(--ds-yellow);\n color: var(--ds-black);\n font-family: 'Bangers', cursive;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 1.5rem;\n clip-path: polygon(50% 0%, 65% 28%, 100% 15%, 78% 48%, 100% 80%, 63% 72%, 50% 100%, 35% 71%, 0 85%, 22% 47%, 0 15%, 33% 27%);\n transform: rotate(-6deg);\n box-shadow: 0 0 20px rgba(0,0,0,0.8);\n }\n\n[data-layout-root] .ds-big-starburst span:nth-child(1) {\n font-size: 1.2rem;\n color: var(--ds-magenta);\n letter-spacing: 1px;\n }\n\n[data-layout-root] .ds-big-starburst span:nth-child(2) {\n font-size: 2.8rem;\n line-height: 0.9;\n }\n\n[data-layout-root] .ds-big-starburst span:nth-child(3) {\n font-size: 1.1rem;\n background: var(--ds-black);\n color: var(--ds-text);\n padding: 0.2rem 0.5rem;\n margin-top: 0.3rem;\n }\n\n[data-layout-root] .ds-guarantee-content {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n[data-layout-root] .ds-guarantee-content h2 {\n font-family: 'Bangers', cursive;\n font-size: 3rem;\n color: var(--ds-yellow);\n line-height: 1;\n letter-spacing: 1.5px;\n text-shadow: 3px 3px 0 var(--ds-black);\n text-transform: uppercase;\n }\n\n[data-layout-root] .ds-guarantee-content p {\n font-size: 1.1rem;\n color: var(--ds-text);\n line-height: 1.6;\n }\n\n[data-layout-root] .ds-guarantee-points {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n margin-top: 0.5rem;\n }\n\n @media (max-width: 580px) {\n[data-layout-root] .ds-guarantee-points {\n grid-template-columns: 1fr;\n }\n }\n\n[data-layout-root] .ds-point-item {\n background: rgba(0,0,0,0.4);\n border: var(--ds-border-thin);\n padding: 0.8rem 1rem;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-weight: 700;\n }\n\n[data-layout-root] .ds-point-bullet {\n color: var(--ds-mint);\n font-size: 1.4rem;\n }\n\n /* EXTRA SLOT REGIONS */\n[data-layout-root] .ds-extra-slots-wrap {\n max-width: 1300px;\n margin: 3.5rem auto 0;\n padding: 0 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 2.5rem;\n }\n\n[data-layout-root] .ds-reviews-box {\n background: var(--ds-card-bg);\n border: var(--ds-border-mid);\n padding: 2rem;\n box-shadow: 6px 6px 0 var(--ds-black);\n }\n\n @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Work+Sans:wght@400;600;800&display=swap');\n\n[data-layout-root] .ds-footer {\n --ds-bg: #0F0F12;\n --ds-card-bg: #16161C;\n --ds-text: #FDFDFD;\n --ds-muted: #A0A0B0;\n --ds-yellow: #FFCC00;\n --ds-magenta: #E60067;\n --ds-ink-blue: #1D3557;\n --ds-black: #000000;\n --ds-border-thick: 6px solid #000000;\n --ds-border-thin: 3px solid #000000;\n\n background-color: var(--ds-bg);\n color: var(--ds-text);\n font-family: 'Work Sans', sans-serif;\n border-top: var(--ds-border-thick);\n position: relative;\n box-shadow: 0 -8px 0 var(--ds-yellow);\n background-image: radial-gradient(rgba(255, 204, 0, 0.12) 15%, transparent 16%);\n background-size: 20px 20px;\n }\n\n[data-layout-root] .ds-footer-ticker {\n background: var(--ds-yellow);\n color: var(--ds-black);\n font-family: 'Bangers', cursive;\n font-size: 1.25rem;\n letter-spacing: 2px;\n padding: 0.6rem 0;\n border-bottom: var(--ds-border-thin);\n overflow: hidden;\n white-space: nowrap;\n position: relative;\n }\n\n[data-layout-root] .ds-footer-ticker-inner {\n display: flex;\n gap: 2rem;\n animation: ds-ticker-slide 25s linear infinite;\n width: max-content;\n }\n\n @keyframes ds-ticker-slide {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n[data-layout-root] .ds-footer-container {\n max-width: 1300px;\n margin: 0 auto;\n padding: 4rem 1.5rem 2rem;\n }\n\n[data-layout-root] .ds-footer-grid {\n display: grid;\n grid-template-columns: 1.2fr 2fr 1.3fr;\n gap: 3rem;\n margin-bottom: 3.5rem;\n }\n\n[data-layout-root] .ds-footer-brand {\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n }\n\n[data-layout-root] .ds-footer-logo-badge {\n background: var(--ds-yellow);\n color: var(--ds-black);\n font-family: 'Bangers', cursive;\n font-size: 2.5rem;\n letter-spacing: 2px;\n padding: 0.2rem 1.2rem;\n border: var(--ds-border-thin);\n box-shadow: 4px 4px 0 var(--ds-magenta);\n text-decoration: none;\n transform: rotate(-2deg);\n display: inline-block;\n align-self: flex-start;\n }\n\n[data-layout-root] .ds-footer-tagline {\n color: var(--ds-muted);\n font-size: 0.95rem;\n line-height: 1.6;\n max-width: 320px;\n }\n\n[data-layout-root] .ds-footer-social-list {\n display: flex;\n gap: 0.75rem;\n list-style: none;\n margin-top: 0.5rem;\n }\n\n[data-layout-root] .ds-footer-social-link {\n background: var(--ds-card-bg);\n color: var(--ds-yellow);\n border: 2px solid var(--ds-black);\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n text-decoration: none;\n box-shadow: 3px 3px 0 var(--ds-magenta);\n transition: transform 0.15s ease, background 0.15s ease;\n }\n\n[data-layout-root] .ds-footer-social-link:hover {\n transform: translate(-2px, -2px);\n background: var(--ds-magenta);\n color: var(--ds-text);\n }\n\n[data-layout-root] .ds-footer-nav-wrapper {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1.5rem;\n }\n\n[data-layout-root] .ds-footer-col-title {\n font-family: 'Bangers', cursive;\n color: var(--ds-yellow);\n font-size: 1.6rem;\n letter-spacing: 1.5px;\n margin-bottom: 1rem;\n text-shadow: 2px 2px 0 var(--ds-black);\n text-transform: uppercase;\n }\n\n[data-layout-root] .ds-footer-menu {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n }\n\n[data-layout-root] .ds-footer-menu-link {\n color: var(--ds-text);\n text-decoration: none;\n font-weight: 600;\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: color 0.15s ease, padding-left 0.15s ease;\n display: inline-block;\n }\n\n[data-layout-root] .ds-footer-menu-link:hover {\n color: var(--ds-yellow);\n padding-left: 4px;\n }\n\n[data-layout-root] .ds-footer-newsletter-card {\n background: var(--ds-card-bg);\n border: var(--ds-border-thick);\n box-shadow: 8px 8px 0 var(--ds-black);\n padding: 1.5rem;\n position: relative;\n overflow: hidden;\n }\n\n[data-layout-root] .ds-footer-starburst {\n position: absolute;\n top: -10px;\n right: -10px;\n background: var(--ds-magenta);\n color: var(--ds-text);\n font-family: 'Bangers', cursive;\n font-size: 0.9rem;\n padding: 0.6rem;\n clip-path: polygon(50% 0%, 65% 28%, 100% 15%, 78% 48%, 100% 80%, 63% 72%, 50% 100%, 35% 71%, 0 85%, 22% 47%, 0 15%, 33% 27%);\n transform: rotate(12deg);\n text-transform: uppercase;\n text-align: center;\n line-height: 1;\n z-index: 2;\n }\n\n[data-layout-root] .ds-footer-form {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n margin-top: 1rem;\n }\n\n[data-layout-root] .ds-footer-input {\n background: var(--ds-bg);\n border: 3px solid var(--ds-black);\n color: var(--ds-text);\n padding: 0.75rem 1rem;\n font-family: 'Work Sans', sans-serif;\n font-size: 0.9rem;\n outline: none;\n }\n\n[data-layout-root] .ds-footer-input:focus {\n border-color: var(--ds-yellow);\n }\n\n[data-layout-root] .ds-footer-btn {\n background: var(--ds-yellow);\n color: var(--ds-black);\n font-family: 'Bangers', cursive;\n font-size: 1.4rem;\n letter-spacing: 1px;\n padding: 0.6rem 1rem;\n border: 3px solid var(--ds-black);\n box-shadow: 4px 4px 0 var(--ds-magenta);\n cursor: pointer;\n text-transform: uppercase;\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n }\n\n[data-layout-root] .ds-footer-btn:hover {\n transform: translate(-2px, -2px);\n box-shadow: 6px 6px 0 var(--ds-magenta);\n }\n\n[data-layout-root] .ds-footer-bottom-bar {\n border-top: 2px dashed var(--ds-muted);\n padding-top: 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 1.5rem;\n }\n\n[data-layout-root] .ds-footer-copyright-text {\n color: var(--ds-muted);\n font-size: 0.85rem;\n font-weight: 600;\n }\n\n[data-layout-root] .ds-footer-payment-icons {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n }\n\n[data-layout-root] .ds-footer-payment-badge {\n background: var(--ds-card-bg);\n color: var(--ds-text);\n border: 2px solid var(--ds-black);\n padding: 0.25rem 0.6rem;\n font-family: 'Bangers', cursive;\n font-size: 0.9rem;\n letter-spacing: 1px;\n box-shadow: 2px 2px 0 var(--ds-yellow);\n }\n\n @media (max-width: 1024px) {\n[data-layout-root] .ds-footer-grid {\n grid-template-columns: 1fr;\n gap: 2.5rem;\n }\n\n[data-layout-root] .ds-footer-nav-wrapper {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n @media (max-width: 640px) {\n[data-layout-root] .ds-footer-nav-wrapper {\n grid-template-columns: 1fr;\n }\n\n[data-layout-root] .ds-footer-bottom-bar {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n/* === Header safety rules (post-processed, not AI-generated) === */\n[data-layout-root] .global-header [data-slot=\"cart\"],\n[data-layout-root] .global-header [data-slot=\"search\"],\n[data-layout-root] .global-header [data-slot=\"login\"],\n[data-layout-root] .global-header [data-slot=\"currency\"],\n[data-layout-root] .global-header [data-slot=\"mobile-menu\"] {\n flex-shrink: 0 !important;\n min-width: fit-content !important;\n}\n[data-layout-root] .global-header [data-slot=\"nav\"] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n[data-layout-root] .global-header {\n max-height: 120px;\n}\n/* Line-height safety \u2014 prevent AI from setting tiny line-heights globally */\n[data-layout-root] {\n line-height: 1.5;\n}\n[data-layout-root] h1, [data-layout-root] h2, [data-layout-root] h3,\n[data-layout-root] h4, [data-layout-root] h5, [data-layout-root] h6 {\n line-height: 1.2;\n}\n[data-layout-root] p, [data-layout-root] li, [data-layout-root] span,\n[data-layout-root] a, [data-layout-root] label {\n line-height: inherit;\n}\n/* \u2500\u2500 Contrast safety (dark theme) \u2500\u2500 */\n/* Product page slots \u2014 often left unstyled by the AI */\n[data-layout-root] .slot-title,\n[data-layout-root] .slot-title h1,\n[data-layout-root] .slot-title .slot-product-name {\n color: var(--surface-ink, var(--theme-ink, var(--ink, #111111)));\n}\n[data-layout-root] .slot-price,\n[data-layout-root] .slot-price .slot-price-amount {\n color: var(--surface-ink, var(--theme-ink, var(--ink, #111111)));\n}\n[data-layout-root] .slot-description,\n[data-layout-root] .slot-description p {\n color: var(--surface-ink-muted, var(--ink-muted, #c9bfb0));\n}\n[data-layout-root] .slot-variant-label {\n color: var(--surface-ink-muted, var(--ink-muted, #c9bfb0));\n}\n[data-layout-root] .slot-variant-btn {\n color: var(--surface-ink, var(--theme-ink, var(--ink, #111111)));\n border-color: rgba(255,255,255,0.12);\n}\n/* Common generated marketing sections */\n[data-layout-root] .feature-title,\n[data-layout-root] .feature-name,\n[data-layout-root] .editorial-title,\n[data-layout-root] .trust-value,\n[data-layout-root] .hero-price,\n[data-layout-root] .feature-content,\n[data-layout-root] .feature-content h1,\n[data-layout-root] .feature-content h2,\n[data-layout-root] .feature-content h3,\n[data-layout-root] .feature-content h4,\n[data-layout-root] .action-icon {\n color: var(--theme-ink, var(--ink, #111111));\n}\n[data-layout-root] .trust-label,\n[data-layout-root] .feature-tag,\n[data-layout-root] .feature-description,\n[data-layout-root] .detail-item p,\n[data-layout-root] .trust-item p,\n[data-layout-root] .feature-action {\n color: var(--ink-muted, #c9bfb0);\n}\n/* Icon / SVG contrast */\n[data-layout-root] svg {\n fill: currentColor;\n}\n\n/* === Storefront root surface (post-processed, not AI-generated) === */\n[data-layout-root] {\n min-height: 100vh;\n background-color: var(--bg-page, var(--page-bg, var(--ds-bg-dark, var(--bg-dark, var(--background, var(--color-background, var(--theme-bg, var(--c-bg, var(--bg, #ffffff)))))))));\n color: var(--ds-text-primary, var(--text-primary, var(--foreground, var(--color-text, var(--color-ink, var(--theme-ink, var(--c-ink, var(--ink, #111827))))))));\n}\n\n[data-layout-root] [class*=\"grid\"] > *, [data-layout-root] [class*=\"layout\"] > * { min-width: 0; min-height: 0; }\n\n[data-layout-root] .v8-support-panel { color: var(--surface-ink); --ink-muted: var(--surface-ink-muted); }\n\n/* launchify-runtime-slot-guards:v1 */\n/* Generated headers often use a child span as a decorative dot. At runtime,\n the storefront replaces that markup with the functional logo text span.\n Keep the concept-owned logo container, but prevent decorative child rules\n from collapsing or absolutely positioning the injected brand name. */\n[data-layout-root] [data-slot=\"logo\"].dynamic-header-logo > .dynamic-header-logo-text {\n display: inline !important;\n position: static !important;\n inset: auto !important;\n width: auto !important;\n height: auto !important;\n min-width: 0 !important;\n min-height: 0 !important;\n max-width: none !important;\n max-height: none !important;\n margin: 0 !important;\n padding: 0 !important;\n background: transparent !important;\n border: 0 !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n transform: none !important;\n font: inherit !important;\n letter-spacing: inherit !important;\n color: inherit !important;\n}\n\n/* Visual QA auto-fixes */\n.product-reviews__empty {\n color: #000000; /* Increases contrast ratio of empty state review callout text against the magenta background to 9.5:1 for standard accessibility. */\n}\n","globalHtml":"","fonts":["Bangers","Work Sans"],"animations":[],"theme":{"mode":"dark","palette":{"primary":"#FFCC00","secondary":"#E60067","accent":"#1D3557","success":"#000000"},"surfaces":{"bg":"#0F0F12","bgElevated":"#E60067","surface":"#E60067","surfaceAlt":"#E60067","ink":"#FDFDFD","inkMuted":"#A0A0B0","border":"#cccccc","surfaceInk":"#F9FAFB","surfaceInkMuted":"#D1D5DB"},"typography":{"headingFont":"Bangers","bodyFont":"Work Sans"},"tone":"modern","density":"normal","motion":2,"stylePack":"kinetic-minimalism","surface":"flat","radius":0},"header":{"html":"

\n COMICA\n \n \n\n

\n SEARCH\n USD ($)\n LOG IN\n PULL BAG (1)\n \n

","css":""},"footer":{"html":"","css":""},"pages":{"home":{"sections":[{"id":"home-main","type":"home_main","html":"

\n \n

\n FEEL THE ELECTRIC THRILL OF VINTAGE NEWSPRINT & RAW INK\n

\n\n

\n A curated indie-comic bundle packed with a limited-edition graphic novel, vintage-style issue reprints, and collectible newsprint inserts. Built for 80s nostalgia fans, it feels like a perfect pull from a classic comic stand.\n

\n\n \n

\n $\"\"$ \n

PANEL 01 // GRAPHIC NOVEL

\n\n

\n $\"Vintage-Style$ \n

PANEL 02 // REPRINTS

\n\n

\n $\"Collectible$ \n

PANEL 03 // INSERTS

KA-POW!

\n\n\n\n

\n \n\n

9.8+

\u26a1

MINT STARBURST CONDITION

Every issue in the Retro Lightning Box Set is hand-graded, double-bagged, and boarded with archival polypropylene sheets.

\n\n

SAFE

\ud83d\udce6

LIGHTNING ARMOR SHIPPING

Custom heavy-duty corrugated mailers built to withstand spine creases and bent corners during high-speed transit.

\n\n

24H

\ud83d\ude80

EXPRESS STAND DISPATCH

Orders placed before 2 PM EST are processed same-day with tracked collector notification updates.

\n\n

RARE

\ud83c\udfa8

INDIE VAULT EXCLUSIVES

Includes rare variant foil covers, newsprint promo inserts, and author-signed line art prints available nowhere else.

\n\n\n

\n \n\n

\n \n

AUTHENTIC 80s NEWSPRINT & RAW INK

Printed on tactile, heavy newsprint stock using traditional CMYK halftone dot patterns that capture the exact smell, feel, and vibration of classic comic stand issues.

\n\n

FULL-IMMERSION RETRO LIGHTNING CASE

Housed inside a magnetic-latch collector's vault box wrapped in full-color retro comic art, custom-molded to protect your physical library indefinitely.

\n\n

EXCLUSIVE VARIANT COVER REPRINTS

Contains 3 virgin variant covers without trade dress, showcasing pure high-contrast graphic splash art from underground indie legends.

\n\n

COLLECTOR SPEC & CERTIFICATE

Hand-numbered stamp of authenticity with full grade report verification notes for serious pop culture investors and graphic novel purists.

\n\n \n

\n $\"{{products.[0].name}}\"\n$ \n

SPECIAL EDITION

\n\n

\n {{products.[0].price}}\n IN STOCK\n

\n\n

\n {{products.[0].description}}\n

\n\n \n CLAIM YOUR BOX SET NOW\n \n\n \n

\n {{#each homeVisuals}}\n

\n $\"{{this.alt}}\"$ \n

\n {{/each}}\n

","css":"","dataBindings":{"shop":{"source":"storefront","query":"shopInfo"},"homeVisuals":{"source":"static","value":[{"url":"https://images.unsplash.com/photo-1698177077434-17523aea69c6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4OTM0MjR8MHwxfHNlYXJjaHwzfHx2aW50YWdlJTIwY29taWMlMjBib29rJTIwcmFja3xlbnwxfDB8fHwxNzg1MjQ5NjI2fDA&ixlib=rb-4.1.0&q=80&w=1080","alt":"comica vintage","theme":"vintage","query":"vintage comic book rack","source":"unsplash","photographer":"Mick Haupt","photographerUrl":"https://unsplash.com/@rocinante_11","role":"campaign","cropHint":"wide-or-art-directed","fitHint":"cover","mobileTreatment":"reframe around the primary subject"},{"url":"https://images.unsplash.com/photo-1497633762265-9d179a990aa6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4OTM0MjR8MHwxfHNlYXJjaHwyfHxjb2xvcmZ1bCUyMGdyYXBoaWMlMjBub3ZlbCUyMHN0YWNrfGVufDF8MHx8fDE3ODUyNDk2MjZ8MA&ixlib=rb-4.1.0&q=80&w=1080","alt":"comica colorful","theme":"colorful","query":"colorful graphic novel stack","source":"unsplash","photographer":"Kimberly Farmer","photographerUrl":"https://unsplash.com/@kimberlyfarmer","role":"lifestyle","cropHint":"subject-safe","fitHint":"cover","mobileTreatment":"preserve the principal subject and avoid text collisions"},{"url":"https://images.unsplash.com/photo-1629998867511-c0ae031398b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4OTM0MjR8MHwxfHNlYXJjaHwzfHxwZXJzb24lMjByZWFkaW5nJTIwY29taWMlMjBib29rfGVufDF8MHx8fDE3ODUyNDk1MTJ8MA&ixlib=rb-4.1.0&q=80&w=1080","alt":"comica person","theme":"person","query":"person reading comic book","source":"unsplash","photographer":"Mufid Majnun","photographerUrl":"https://unsplash.com/@mufidpwt","role":"detail","cropHint":"close-or-medium","fitHint":"contain-or-cover","mobileTreatment":"preserve the principal subject and avoid text collisions"}]},"products":{"source":"storefront","query":"productList","limit":4},"collections":{"source":"storefront","query":"collectionList","limit":4}}}]},"product":{"sections":[{"id":"product-detail","type":"product_detail","html":"

\n \n \n\n \n

\n \n

\n MINT
GRADE\n

\n\n \n

\n \u2605 FREE COMIC BOOK DAY SPECIAL\n LIMITED VAULT DROP\n

\n\n \n

\u2713

\n 100% Bagged & Boarded\n

\u2605

\n Guaranteed 9.8+ Condition\n

\u26a1

\n Armor-Clad Crusher Shipping\n

\ud83d\udee1

\n Official Vault Authenticity\n

\n\n \n

\n \n\n

ARCHIVAL BAG & BOARD INCLUDED

Every single comic book in this set arrives pre-encapsulated in heavyweight 2mil poly bags with 24pt acid-free backing boards for maximum shelf preservation.

\n\n

ARMOR-CLAD CRUSHER BOXES

Engineered specifically for comic collectors. Double-walled corrugated armor buffers every corner against spine creases and crushed edges during transit.

\n\n

DISPATCHED WITH SPEED

Full tracking provided standard. Priority handling for box sets guarantees swift dispatch directly from our climate-controlled vault floor.

\n\n \n

\n COMICA APPROVED\n 9.8+\n MINT GRADE\n

\n\n

THE PERFECT GRADE GUARANTEE

We are die-hard collectors first. If your box set arrives with binding imperfections, soft corners, or cover stress lines beyond pristine grade standards, our rapid swap guarantee kicks in instantly.

\n \n

\n \u25ba\n Zero Spine Roll Assurance\n

\n \u25ba\n UV-Shielded Storage Bags\n

\n \u25ba\n 100% Authentic First Prints\n

\n \u25ba\n Hassle-Free Collector Returns\n

\n\n \n

","css":""}]},"collection":{"sections":[]}},"generationIntent":{"referenceMode":"custom","designMode":"A dramatic comic splash page architectu...","density":"medium","homeSectionCount":3,"openingSectionType":"product-showcase","openingSectionGoal":"A dramatic comic splash page architecture built around massive black gutter frames and diagonal dynamic action panels.","headerPattern":"diagonal-panel-header-framed-wi...","copyTone":"Dramatic, cinematic, epic narrative tone.","imageStrategy":"High-dynamic-range product shot sliced dramatically across three diagonal panel frames with bold comic line art overlays.","compositionStrategy":{"opening_relationship":"Paces the shop floor like a dramatic splash page in a graphic novel, slicing product images across bold 15-degree diagonal panel borders.","reading_path":"A dramatic comic splash page architecture built around massive black gutter frames and diagonal dynamic action panels.","product_presentation":"High-dynamic-range product shot sliced dramatically across three diagonal panel frames with bold comic line art overlays."},"motionDirection":{"mode":"immersive","purpose":"As the user scrolls, diagonal gutter panel frames shift outward in parallax, revealing hidden interior artwork from the graphic novel.","techniques":["As the user scrolls, diagonal gutter panel frames shift outward in parallax, revealing hidden interior artwork from the..."],"reduced_motion":"Preserve the final composition without animation"},"headerStrategy":{"structure":"Diagonal panel header framed with thick ink borders and action-oriented navigation badges.","mobile_behavior":"Keep search, account, language, cart, and menu reachable"},"imageAssetPlan":{"primary_role":"High-dynamic-range product shot sliced dramatically across three diagonal panel frames with bold comic line art overlays.","mobile_treatment":"Recompose without cropping away the product"},"productPageExtras":["shipping_delivery","trust highlights"],"homePageRules":["This is a single-product store \u2014 the entire homepage must orbit around selling this one product.","Do NOT show category launchers, collection grids, or multi-product browsing sections.","The hero MUST feature the product prominently \u2014 not a generic lifestyle banner.","Use sections for features, benefits, testimonials, brand story, and trust \u2014 but always tie back to the product."]},"generationPlan":{"header":{"pattern":"commerce-search","notes":["Create a strong retail header with utility/support affordances.","Keep it compact, aligned, and ready for search/cart/login injected slots.","The cart slot (data-slot='cart') MUST be visible on ALL screen sizes."]},"home":{"sectionCount":3,"sections":[{"id":"home-opening","name":"Product hero showcase","purpose":"A dramatic comic splash page architecture built around massive black gutter frames and diagonal dynamic action panels.","layout":"product-showcase","bindings":["products","homeVisuals","hero"]},{"id":"home-trust","name":"Trust strip","purpose":"Highlight delivery, quality, warranty, or value props.","layout":"compact icon/value row","bindings":["shop"]},{"id":"home-features","name":"Product features / benefits","purpose":"Showcase 3-4 key features of the product with icons and concise descriptions.","layout":"feature grid or alternating image-text rows","bindings":["products","homeVisuals"]}]},"product":{"notes":["Honor the required product slot order.","Include shipping/delivery details below the main hero when requested."]},"collection":{"notes":["Lead with a concise collection banner and then a real product grid."]},"footer":{"notes":["Footer should feel useful and commercially complete, not decorative only."]}}}

\n FEEL THE ELECTRIC THRILL OF VINTAGE NEWSPRINT & RAW INK\n

100% ARCHIVAL GRADE // FREE COMIC STAND GUARANTEE

MINT STARBURST CONDITION

LIGHTNING ARMOR SHIPPING

EXPRESS STAND DISPATCH

INDIE VAULT EXCLUSIVES

DESTRUCTIVE DETAIL // INSIDE THE BOX SET

AUTHENTIC 80s NEWSPRINT & RAW INK

FULL-IMMERSION RETRO LIGHTNING CASE

EXCLUSIVE VARIANT COVER REPRINTS

COLLECTOR SPEC & CERTIFICATE

INVASION-PROOF SHIPPING & VAULT PACKAGING

ARCHIVAL BAG & BOARD INCLUDED

ARMOR-CLAD CRUSHER BOXES

DISPATCHED WITH SPEED

THE PERFECT GRADE GUARANTEE