body[data-page="store"] { --page-accent: #f4c95d; --page-accent-soft: rgba(244, 201, 93, .2); --page-glow: rgba(121, 215, 255, .18); } body[data-page="store"] #particles-canvas { opacity: .18; }
.store-hero { position: relative; z-index: 1; padding: 7.5rem 0 3.5rem; border-bottom: 1px solid var(--line); background: linear-gradient(105deg, rgba(244,201,93,.09), transparent 46%), rgba(9,14,26,.42); }
.store-hero__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); gap: 3.5rem; align-items: center; }
.store-hero h1 { max-width: 12ch; margin: .6rem 0 .9rem; font: clamp(2.55rem, 5vw, 4.35rem)/1.05 var(--font-heading); letter-spacing: 0; }
.store-hero > .container > div > p:last-child { max-width: 57ch; margin: 0; color: #c5d1e1; font-size: 1.05rem; line-height: 1.7; }
.store-delivery { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--line); gap: 1px; width: 100%; border-radius: 12px; overflow: hidden; }
.store-delivery article { min-height: 140px; padding: 1.1rem; background: rgba(10,15,28,.92); }
.store-delivery span { display: block; color: var(--page-accent); font: .7rem 'DM Mono', monospace; }
.store-delivery strong { display: block; margin: 1rem 0 .35rem; font: 1.05rem var(--font-heading); }
.store-delivery p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }

/* 3D STORE VISUAL STAGE & ORBITAL EMBLEM */
.store-hero__visual-container { display: flex; flex-direction: column; gap: 1.8rem; align-items: center; width: 100%; max-width: 420px; margin: 0 auto; }
.store-visual { display: flex; justify-content: center; align-items: center; perspective: 1000px; perspective-origin: 50% 46%; user-select: none; isolation: isolate; width: 100%; position: relative; padding: .5rem 0; }
.store-stage { position: relative; width: 320px; height: 320px; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; backface-visibility: hidden; transition: transform 0.15s cubic-bezier(0.2, 0, 0.2, 1); cursor: pointer; margin: 0 auto; }
.store-glow { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(244, 201, 93, 0.35) 0%, rgba(168, 85, 247, 0.25) 45%, transparent 75%); filter: blur(28px); animation: storeGlowPulse 4s ease-in-out infinite alternate; pointer-events: none; }
.store-orbit { position: absolute !important; inset: 0 !important; border-radius: 50% !important; pointer-events: none !important; margin: auto !important; }
.store-orbit--gold { width: 290px !important; height: 290px !important; border: 2px dashed rgba(244, 201, 93, 0.8) !important; box-shadow: 0 0 25px rgba(244, 201, 93, 0.4), inset 0 0 15px rgba(244, 201, 93, 0.25) !important; animation: storeOrbitOne 14s linear infinite !important; }
.store-orbit--purple { width: 300px !important; height: 300px !important; border: 2px solid rgba(168, 85, 247, 0.75) !important; box-shadow: 0 0 24px rgba(168, 85, 247, 0.45) !important; animation: storeOrbitTwo 18s linear infinite !important; }
.store-orbit--cyan { width: 280px !important; height: 280px !important; border: 1.5px dotted rgba(56, 189, 248, 0.7) !important; animation: storeOrbitThree 22s linear infinite !important; }

.store-card { position: relative; z-index: 3; width: 190px !important; height: 190px !important; display: flex; align-items: center; justify-content: center; background: rgba(14, 20, 36, 0.82) !important; border: 2px solid rgba(244, 201, 93, 0.6) !important; border-radius: 8px !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 35px rgba(244, 201, 93, 0.3) !important; transform: translateZ(45px); transition: box-shadow 0.35s ease, border-color 0.35s ease; overflow: hidden; }
.store-card img { width: 145px !important; height: 145px !important; max-width: 145px !important; max-height: 145px !important; object-fit: contain !important; filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.7)) !important; transition: transform 0.35s ease; display: block !important; }
.store-stage:hover .store-card { border-color: rgba(248, 214, 109, 0.95) !important; box-shadow: 0 30px 65px rgba(0, 0, 0, 0.8), 0 0 55px rgba(244, 201, 93, 0.55) !important; }
.store-stage:hover .store-card img { transform: scale(1.08) translateZ(20px); }

.store-chip { position: absolute !important; z-index: 10 !important; padding: 6px 14px !important; border: 1px solid rgba(244, 201, 93, 0.45) !important; border-radius: 999px !important; background: rgba(8, 12, 24, 0.94) !important; color: #F8D66D !important; font-size: .63rem !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important; pointer-events: none !important; white-space: nowrap !important; display: inline-block !important; }
.store-chip--top { right: -5px; top: 10px; transform: translateZ(65px); }
.store-chip--right { right: -15px; bottom: 20px; transform: translateZ(55px); color: #c084fc !important; border-color: rgba(168, 85, 247, 0.55) !important; }
.store-chip--bottom { left: -5px; bottom: 10px; transform: translateZ(60px); }
.store-chip--left { left: -15px; top: 20px; transform: translateZ(50px); color: #38bdf8 !important; border-color: rgba(56, 189, 248, 0.55) !important; }

@keyframes storeOrbitOne { 0% { transform: rotateX(65deg) rotateZ(0deg); } 100% { transform: rotateX(65deg) rotateZ(360deg); } }
@keyframes storeOrbitTwo { 0% { transform: rotateY(65deg) rotateZ(0deg); } 100% { transform: rotateY(65deg) rotateZ(-360deg); } }
@keyframes storeOrbitThree { 0% { transform: rotateX(40deg) rotateY(40deg) rotateZ(0deg); } 100% { transform: rotateX(40deg) rotateY(40deg) rotateZ(360deg); } }
@keyframes storeGlowPulse { from { opacity: 0.6; transform: scale(0.95); } to { opacity: 1; transform: scale(1.1); } }
.store-catalog { padding-top: clamp(2.8rem, 6vw, 5.25rem); }.store-heading { max-width: 620px; }.store-heading h2 { margin: .45rem 0; font: clamp(2rem, 3.5vw, 3rem)/1.1 var(--font-heading); }.store-heading p:last-child { margin: 0; color: var(--muted); line-height: 1.65; }.store-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .38fr); gap: 2.5rem; align-items: start; }.store-status { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.1rem 0; color: var(--muted); font: .72rem 'DM Mono', monospace; text-transform: uppercase; }.store-status span + span::before { content: '·'; margin-right: .8rem; color: var(--page-accent); }
.store-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0 1.4rem; }.store-tab { padding: .56rem .76rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font: .8rem var(--font-body); }.store-tab.is-active { color: #161208; border-color: var(--page-accent); background: var(--page-accent); font-weight: 700; }
.store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }.store-product { padding: 1.25rem; min-height: 265px; display: flex; flex-direction: column; background: rgba(11,16,29,.94); }.store-product__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.store-product__tag { color: var(--page-accent); font: .68rem 'DM Mono', monospace; text-transform: uppercase; }.store-product h3 { margin: .6rem 0 0; font: 1.35rem var(--font-heading); }.store-product__price { color: #f8e3a2; font-weight: 700; white-space: nowrap; }.store-product p { color: var(--muted); line-height: 1.55; }.store-product__delivery { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .7rem; color: #9bb5cf; font-size: .78rem; }.store-product__actions { display: flex; gap: .5rem; margin-top: .8rem; }.store-product__actions .btn { min-height: 40px; padding: .62rem .8rem; font-size: .82rem; }
.store-checkout { position: sticky; top: 96px; padding: 1.35rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(9,14,26,.92); }.store-checkout h2 { margin: .2rem 0 .5rem; font: 1.55rem var(--font-heading); }.store-checkout form { display: grid; gap: .8rem; margin-top: 1rem; }.store-checkout label { display: grid; gap: .35rem; color: #bdc9dc; font-size: .8rem; }.store-checkout input, .store-checkout textarea { width: 100%; padding: .75rem; color: var(--text); border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.04); resize: vertical; }.store-total { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.store-total strong { color: var(--page-accent); font: 1.15rem var(--font-heading); }.store-selection-item { padding: .85rem 0; display: flex; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); }.store-selection-item p { margin: .3rem 0 0; font-size: .8rem; }.store-selection-item button { border: 0; background: none; color: #e0b6b6; cursor: pointer; font-size: .78rem; }
.store-footnote { display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--line); }.store-footnote p { max-width: 68ch; color: var(--muted); line-height: 1.65; }.store-footnote a { color: var(--page-accent); white-space: nowrap; font-weight: 700; }
#store-modal { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 1rem; background: rgba(3,5,10,.8); backdrop-filter: blur(10px); } #store-modal > div { position: relative; width: min(620px,100%); max-height: 80vh; overflow: auto; padding: 1.6rem; border: 1px solid var(--line); border-radius: 8px; background: #090f1d; } #store-modal-close { position: absolute; top: .6rem; right: .7rem; width: 44px; height: 44px; border: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 1.8rem; }
@media (max-width: 850px) { .store-hero { padding-top: 6.4rem; }.store-hero__grid { grid-template-columns: 1fr; gap: 2rem; }.store-layout { grid-template-columns: 1fr; }.store-checkout { position: static; } } @media (max-width: 560px) { .store-delivery, .store-grid { grid-template-columns: 1fr; }.store-footnote { align-items: flex-start; flex-direction: column; gap: .5rem; } }
.store-bedrock-notice { margin: .75rem 0; padding: .75rem .85rem; border: 1px solid rgba(89, 207, 255, .42); border-radius: 8px; background: rgba(43, 174, 235, .1); color: #d9f4ff; font-size: .82rem; line-height: 1.45; }.store-bedrock-notice p { margin: .3rem 0 0; }.store-bedrock-notice code { color: #7ee8ff; font: .82rem var(--font-mono); }.store-faq h2 { margin-top: .2rem; }.store-faq .store-bedrock-notice { max-width: 720px; }

@media (max-width: 560px) {
    .store-hero { padding: 4.5rem 0 2.75rem; }
    .store-hero h1 { max-width: 100%; font-size: 2.35rem; line-height: 1.08; }
    .store-hero__visual-container { gap: 1.2rem; }
    .store-stage { width: min(300px, calc(100vw - 2rem)); height: min(300px, calc(100vw - 2rem)); }
    .store-orbit--gold { width: 91% !important; height: 91% !important; }
    .store-orbit--purple { width: 94% !important; height: 94% !important; }
    .store-orbit--cyan { width: 88% !important; height: 88% !important; }
    .store-card { width: 58% !important; height: 58% !important; }
    .store-card img { width: 78% !important; height: 78% !important; }
    .store-chip { padding: 5px 7px !important; font-size: .52rem !important; letter-spacing: .05em !important; }
    .store-chip--top { right: 0; top: 8px; }
    .store-chip--right { right: 0; bottom: 18px; }
    .store-chip--bottom { left: 0; bottom: 8px; }
    .store-chip--left { left: 0; top: 18px; }
    .store-delivery article { min-height: 0; }
    .store-product { min-height: 0; }
    .store-product__top, .store-product__delivery, .store-product__actions,
    .store-selection-item, .store-total { align-items: flex-start; flex-direction: column; }
    .store-product__price { white-space: normal; }
    .store-product__actions, .store-product__actions .btn { width: 100%; }
    .store-checkout { padding: 1rem; }
    #store-modal { padding: .5rem; }
    #store-modal > div { width: 100%; max-height: calc(100dvh - 1rem); padding: 1rem; }
}

@media (hover: hover) and (pointer: fine) {
    .store-stage { will-change: transform; }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
    .store-stage { transform: none !important; transition: none; cursor: default; }
    .store-glow, .store-orbit { animation-play-state: paused !important; }
    .store-card, .store-chip { transform: none !important; }
}