/* KRONMC ItemShop — demonstracyjna warstwa sklepu w budowie */

.item-shop-page {
    --shop-cyan: #55d9ff;
    --shop-cyan-rgb: 85, 217, 255;
    --shop-amber: #ffaa00;
    --shop-amber-rgb: 255, 170, 0;
    --shop-green: #55ff55;
    background: #090909;
}

.item-shop-page .nav-link small {
    display: inline-flex;
    margin-left: .25rem;
    padding: .14rem .3rem;
    border: 1px solid rgba(255,170,0,.3);
    border-radius: 3px;
    background: rgba(255,170,0,.08);
    color: #ffaa00;
    font-family: var(--font-ui);
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
    vertical-align: .12em;
}

.shop-backdrop {
    background:
        radial-gradient(circle at 78% 15%, rgba(85,217,255,.1), transparent 31rem),
        radial-gradient(circle at 20% 60%, rgba(255,170,0,.07), transparent 34rem),
        #090909;
}

.shop-backdrop-grid {
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, #000, transparent 78%);
}

.shop-hero {
    position: relative;
    min-height: 100svh;
    padding: clamp(8.5rem, 15vh, 11rem) 0 6rem;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(6,6,6,.96) 0%, rgba(6,6,6,.78) 43%, rgba(6,6,6,.32) 76%),
        linear-gradient(180deg, transparent 54%, #090909 100%),
        url("world-scenes/world-aerial-night.webp") center / cover no-repeat;
}

.shop-hero-noise {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .16;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 74% 42%, rgba(85,217,255,.13), transparent 28rem);
    pointer-events: none;
}

.shop-three-stage {
    position: absolute;
    z-index: -1;
    inset: 0 0 0 43%;
    pointer-events: none;
}

.shop-three-stage canvas {
    width: 100%;
    height: 100%;
    opacity: .92;
    filter: drop-shadow(0 30px 70px rgba(0,0,0,.58));
}

.shop-three-fallback {
    position: absolute;
    inset: 16% 9% 12% 10%;
    opacity: .42;
    border: 1px solid rgba(85,217,255,.2);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(85,217,255,.18), transparent 42%),
        repeating-radial-gradient(circle, transparent 0 44px, rgba(255,170,0,.075) 45px 46px);
}

.shop-three-stage.is-ready .shop-three-fallback { opacity: .08; }

.shop-hero-grid {
    display: grid;
    min-height: calc(100svh - 15rem);
    grid-template-columns: minmax(0, 1.06fr) minmax(360px, .72fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.shop-hero-copy { position: relative; z-index: 2; max-width: 790px; }

.shop-status-pill {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 1.4rem;
    padding: .58rem .82rem;
    align-items: center;
    gap: .55rem;
    border: 1px solid rgba(255,170,0,.42);
    border-radius: 999px;
    background: rgba(0,0,0,.72);
    color: #ddd;
    font-family: var(--font-display);
    font-size: .64rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 0 24px rgba(255,170,0,.08);
}

.shop-status-pill span {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: #ffaa00;
    box-shadow: 0 0 12px rgba(255,170,0,.65);
}

.shop-overline {
    margin: 0;
    color: #ffaa00;
    font-family: var(--font-display);
    font-size: .69rem;
    letter-spacing: .15em;
}

.shop-hero h1 {
    max-width: 12ch;
    margin: 1rem 0 1.2rem;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6.6vw, 7.2rem);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: .94;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #000, 0 15px 40px #000;
}

.shop-hero h1 span { color: #ffaa00; text-shadow: 2px 2px 0 #3a2500; }

.shop-hero-lead {
    max-width: 68ch;
    margin: 0;
    color: #c4c4c4;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.8;
    text-shadow: 0 3px 18px #000;
}

.shop-hero-actions { display: flex; margin-top: 1.65rem; flex-wrap: wrap; gap: .7rem; }
.shop-hero-actions .btn { min-height: 52px; padding-inline: 1.25rem; }

.shop-trust-list {
    display: flex;
    margin: 1.4rem 0 0;
    padding: 0;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
}

.shop-trust-list li {
    display: inline-flex;
    min-height: 36px;
    padding: .5rem .68rem;
    align-items: center;
    gap: .42rem;
    border: 1px solid #353535;
    border-radius: 4px;
    background: rgba(20,20,20,.9);
    color: #aaa;
    font-size: .7rem;
    font-weight: 700;
}
.shop-trust-list .icon { width: 15px; height: 15px; color: #55ff55; }

.shop-hero-showcase {
    position: relative;
    z-index: 3;
    display: grid;
    min-height: 610px;
    place-items: center;
}

.shop-hero-showcase > img {
    position: relative;
    z-index: 3;
    width: min(115%, 660px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 35px 50px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(255,170,0,.16));
    transform-origin: 50% 58%;
}

.shop-showcase-ring {
    position: absolute;
    z-index: 1;
    width: 76%;
    aspect-ratio: 1;
    border: 1px solid rgba(85,217,255,.22);
    border-radius: 50%;
}
.shop-showcase-ring::before,
.shop-showcase-ring::after {
    position: absolute;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #ffaa00;
    box-shadow: 0 0 15px rgba(255,170,0,.8);
    content: "";
}
.shop-showcase-ring::before { top: 14%; left: 13%; }
.shop-showcase-ring::after { right: 10%; bottom: 22%; }
.shop-showcase-ring--two { width: 58%; border-color: rgba(255,170,0,.2); transform: rotate(34deg); }

.shop-showcase-label {
    position: absolute;
    z-index: 5;
    display: grid;
    min-width: 130px;
    padding: .62rem .72rem;
    gap: .12rem;
    border: 1px solid #3c3c3c;
    border-radius: 5px;
    background: rgba(10,10,10,.86);
    box-shadow: 0 14px 35px rgba(0,0,0,.42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.shop-showcase-label small { color: #777; font-family: var(--font-display); font-size: .5rem; letter-spacing: .12em; }
.shop-showcase-label strong { color: #ffaa00; font-family: var(--font-display); font-size: .68rem; font-weight: 400; letter-spacing: .07em; }
.shop-showcase-label--top { top: 16%; right: -1rem; }
.shop-showcase-label--bottom { bottom: 13%; left: -1rem; }

.shop-market-terminal {
    position: absolute;
    z-index: 6;
    right: -1.2rem;
    bottom: 1.5rem;
    display: grid;
    width: min(270px,72%);
    padding: .72rem;
    gap: .3rem;
    border: 1px solid rgba(255,170,0,.28);
    border-radius: 6px;
    background: rgba(7,7,7,.88);
    box-shadow: 0 24px 55px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.shop-market-terminal::before { position: absolute; top: 0; left: 0; width: 38%; height: 1px; background: linear-gradient(90deg,#ffaa00,transparent); content: ""; }
.shop-market-terminal > span { display: flex; min-height: 28px; padding: .25rem .4rem; align-items: center; justify-content: space-between; gap: .7rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.shop-market-terminal > span:last-child { border-bottom: 0; }
.shop-market-terminal small { color: #666; font-family: var(--font-display); font-size: .45rem; letter-spacing: .09em; }
.shop-market-terminal strong { color: #ccc; font-family: var(--font-display); font-size: .5rem; font-weight: 400; letter-spacing: .06em; }
.shop-market-terminal > span:first-child strong { color: #ffaa00; }

.shop-scroll-cue {
    position: absolute;
    z-index: 5;
    bottom: 1.5rem;
    left: 50%;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #777;
    font-family: var(--font-display);
    font-size: .52rem;
    letter-spacing: .12em;
    transform: translateX(-50%);
}
.shop-scroll-cue span { width: 8px; height: 20px; border: 1px solid #666; border-radius: 999px; }

.shop-showroom {
    position: relative;
    height: 210vh;
    min-height: 1450px;
    border-block: 1px solid rgba(255,170,0,.15);
    background: #050505;
}
.shop-showroom-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
    isolation: isolate;
}
.shop-showroom-sticky::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(90deg,rgba(5,5,5,.96) 0%,rgba(5,5,5,.5) 28%,transparent 48%,rgba(5,5,5,.54) 73%,rgba(5,5,5,.96) 100%);
    content: "";
    pointer-events: none;
}
.shop-showroom-sticky::after {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(85,217,255,.45),#ffaa00,transparent);
    box-shadow: 0 0 24px rgba(85,217,255,.2);
    content: "";
}
.shop-showroom-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
.shop-showroom-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.shop-showroom-atmosphere::before {
    position: absolute;
    inset: 10% 14%;
    border: 1px solid rgba(85,217,255,.09);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 52%,rgba(255,170,0,.11),transparent 26%), radial-gradient(circle at 50% 50%,rgba(85,217,255,.09),transparent 52%);
    box-shadow: 0 0 120px rgba(85,217,255,.06);
    content: "";
}
.shop-showroom-atmosphere::after {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(circle at center,#000,transparent 72%);
    mask-image: radial-gradient(circle at center,#000,transparent 72%);
    content: "";
}
.shop-showroom-layout {
    position: relative;
    z-index: 3;
    display: grid;
    height: 100%;
    padding-top: clamp(6.8rem,11vh,8.8rem);
    padding-bottom: clamp(1.6rem,4vh,3rem);
    grid-template-columns: minmax(250px,.72fr) minmax(320px,1.15fr) minmax(250px,.72fr);
    grid-template-rows: auto 1fr auto;
    gap: 1.4rem 2rem;
    pointer-events: none;
}
.shop-showroom-heading { grid-column: 1 / 3; align-self: start; max-width: 670px; }
.shop-showroom-heading > p:first-child { display: flex; margin: 0 0 .9rem; align-items: center; gap: 1rem; color: #ffaa00; font-family: var(--font-display); font-size: .57rem; letter-spacing: .13em; }
.shop-showroom-heading > p:first-child::after { width: 80px; height: 1px; background: linear-gradient(90deg,rgba(255,170,0,.65),transparent); content: ""; }
.shop-showroom-heading > p:first-child b { color: #777; font-weight: 400; }
.shop-showroom-heading h2 { margin: 0; color: #fff; font-family: var(--font-display); font-size: clamp(2.7rem,5.6vw,6.2rem); font-weight: 400; letter-spacing: -.025em; line-height: .94; text-transform: uppercase; text-shadow: 3px 3px 0 #000,0 20px 50px #000; }
.shop-showroom-heading h2 span { color: transparent; -webkit-text-stroke: 1px rgba(255,170,0,.72); }
.shop-showroom-heading > p:last-child { max-width: 58ch; margin: 1rem 0 0; color: #929292; line-height: 1.7; }

.shop-showroom-nav {
    display: grid;
    width: min(100%,330px);
    align-self: end;
    gap: .3rem;
    grid-column: 1;
    grid-row: 2;
    pointer-events: auto;
}
.shop-showroom-nav button {
    position: relative;
    display: grid;
    min-height: 58px;
    padding: .48rem .65rem;
    align-items: center;
    grid-template-columns: 34px 1fr;
    gap: .55rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 5px;
    background: rgba(12,12,12,.66);
    color: #747474;
    text-align: left;
    cursor: pointer;
    transition: border-color 200ms ease,background 200ms ease,color 200ms ease,transform 200ms ease;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.shop-showroom-nav button > span:first-child { font-family: var(--font-display); font-size: .56rem; }
.shop-showroom-nav button > span:nth-child(2) { display: grid; gap: .1rem; }
.shop-showroom-nav small { color: #626262; font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.shop-showroom-nav strong { color: #b7b7b7; font-family: var(--font-display); font-size: .6rem; font-weight: 400; letter-spacing: .045em; text-transform: uppercase; }
.shop-showroom-nav i { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg,#ffaa00,#55d9ff); transform: scaleX(0); transform-origin: left; }
.shop-showroom-nav button:hover { border-color: rgba(255,170,0,.32); color: #fff; transform: translateX(4px); }
.shop-showroom-nav button.is-active { border-color: rgba(255,170,0,.5); background: linear-gradient(90deg,rgba(255,170,0,.14),rgba(13,13,13,.8)); color: #ffaa00; box-shadow: inset 3px 0 #ffaa00,0 12px 30px rgba(0,0,0,.25); }
.shop-showroom-nav button.is-active small { color: #b88c43; }
.shop-showroom-nav button.is-active strong { color: #fff; }

.shop-showroom-product {
    width: min(100%,360px);
    padding: 1.15rem;
    align-self: center;
    justify-self: end;
    grid-column: 3;
    grid-row: 2;
    border: 1px solid rgba(85,217,255,.2);
    border-radius: 7px;
    background: linear-gradient(145deg,rgba(19,19,19,.82),rgba(7,7,7,.68));
    box-shadow: 0 26px 70px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.07);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.shop-showroom-product::before { display: block; width: 54px; height: 2px; margin-bottom: 1rem; background: linear-gradient(90deg,#55d9ff,#ffaa00); box-shadow: 0 0 16px rgba(85,217,255,.45); content: ""; }
.shop-showroom-product > p:first-child { margin: 0; color: #55d9ff; font-family: var(--font-display); font-size: .55rem; letter-spacing: .11em; text-transform: uppercase; }
.shop-showroom-product h3 { margin: .55rem 0 .7rem; color: #fff; font-family: var(--font-display); font-size: clamp(1.8rem,3vw,3.2rem); font-weight: 400; line-height: 1; text-transform: uppercase; }
.shop-showroom-product > p:nth-child(3) { margin: 0; color: #9c9c9c; font-size: .78rem; line-height: 1.7; }
.shop-showroom-product > div { display: flex; margin-top: 1rem; flex-wrap: wrap; gap: .35rem; }
.shop-showroom-product > div span { padding: .34rem .44rem; border: 1px solid #333; border-radius: 3px; background: rgba(0,0,0,.36); color: #777; font-family: var(--font-display); font-size: .43rem; letter-spacing: .06em; }

.shop-showroom-footer { display: grid; align-items: center; grid-column: 1 / -1; grid-row: 3; grid-template-columns: 1fr auto 1fr; gap: 1rem; pointer-events: auto; }
.shop-showroom-mode { display: inline-flex; align-items: center; gap: .55rem; color: #6e6e6e; font-family: var(--font-display); font-size: .48rem; letter-spacing: .09em; }
.shop-showroom-mode i { width: .48rem; height: .48rem; border-radius: 50%; background: #55d9ff; box-shadow: 0 0 13px rgba(85,217,255,.75); }
.shop-showroom-footer > div { display: flex; gap: .45rem; }
.shop-showroom-footer button { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #393939; border-radius: 5px; background: rgba(18,18,18,.84); color: #aaa; cursor: pointer; }
.shop-showroom-footer button:hover { border-color: #ffaa00; color: #ffaa00; }
.shop-showroom-footer svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.shop-showroom-footer > a { display: inline-flex; justify-self: end; align-items: center; gap: .5rem; color: #b7b7b7; font-family: var(--font-display); font-size: .55rem; letter-spacing: .07em; text-transform: uppercase; }
.shop-showroom-footer > a:hover { color: #ffaa00; }

.shop-construction,
.shop-catalog,
.shop-fair,
.shop-final { position: relative; padding: clamp(5rem, 9vw, 8rem) 0; }

.shop-construction { border-top: 1px solid rgba(255,170,0,.18); background: #0b0b0b; }

.shop-construction-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(1.2rem, 3.3vw, 2.4rem);
    border: 2px solid #333;
    border-top-color: #474747;
    border-left-color: #474747;
    border-radius: 9px;
    background: linear-gradient(145deg, #1d1d1d, #111 76%);
    box-shadow: 0 24px 60px rgba(0,0,0,.48);
}
.shop-construction-panel::before {
    position: absolute;
    inset: 0;
    opacity: .09;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 40px 40px;
    content: "";
    pointer-events: none;
}

.shop-construction-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.shop-construction-head p { margin: 0 0 .3rem; color: #ffaa00; font-family: var(--font-display); font-size: .58rem; letter-spacing: .13em; }
.shop-construction-head h2 { margin: 0; color: #fff; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3.5rem); font-weight: 400; text-transform: uppercase; }
.shop-construction-head > span { display: inline-flex; padding: .55rem .7rem; align-items: center; gap: .5rem; border: 1px solid rgba(255,170,0,.32); border-radius: 4px; background: rgba(255,170,0,.07); color: #d5b778; font-size: .68rem; font-weight: 800; }
.shop-construction-head > span i { width: .44rem; height: .44rem; border-radius: 50%; background: #ffaa00; box-shadow: 0 0 10px rgba(255,170,0,.7); }

.shop-build-track {
    position: relative;
    display: grid;
    margin: 2rem 0 0;
    padding: 0;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1rem;
    list-style: none;
}
.shop-build-track::before { position: absolute; top: 21px; right: 15%; left: 15%; height: 1px; background: linear-gradient(90deg,#ffaa00,#555,#333); content: ""; }
.shop-build-track li { position: relative; display: flex; min-width: 0; align-items: flex-start; gap: .75rem; }
.shop-build-track li > span { position: relative; z-index: 1; display: grid; flex: 0 0 44px; height: 44px; place-items: center; border: 1px solid #444; border-radius: 5px; background: #151515; color: #777; font-family: var(--font-display); font-size: .6rem; }
.shop-build-track .is-current > span { border-color: #ffaa00; background: rgba(255,170,0,.12); color: #ffaa00; box-shadow: 0 0 18px rgba(255,170,0,.12); }
.shop-build-track div { display: grid; gap: .22rem; padding-top: .15rem; }
.shop-build-track small { color: #777; font-size: .65rem; }
.shop-build-track strong { color: #ddd; font-size: .82rem; }

.shop-construction-note { position: relative; margin: 2rem 0 0; padding: 1rem 1.1rem; border-left: 3px solid #ffaa00; background: rgba(255,170,0,.055); color: #aaa; }
.shop-construction-note strong { color: #ffaa00; }

.shop-catalog {
    border-top: 1px solid rgba(255,255,255,.05);
    background:
        linear-gradient(180deg, rgba(9,9,9,.91), rgba(9,9,9,.98)),
        url("world-scenes/crown-city-panorama.webp") center / cover fixed no-repeat;
}

.shop-section-heading {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px, .62fr);
    align-items: end;
    gap: 2rem;
}
.shop-section-heading .section-title { max-width: 13ch; margin-bottom: 0; }
.shop-section-heading > p { margin: 0 0 .4rem; color: #aaa; line-height: 1.75; }

.shop-catalog-metrics {
    display: grid;
    margin: 2rem 0 0;
    padding: 0;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .65rem;
    list-style: none;
}
.shop-catalog-metrics li {
    display: grid;
    min-height: 104px;
    padding: 1rem;
    align-content: center;
    border: 1px solid #333;
    border-radius: 6px;
    background: linear-gradient(145deg,rgba(255,170,0,.055),rgba(18,18,18,.94));
}
.shop-catalog-metrics strong { color: #ffaa00; font-family: var(--font-display); font-size: 1.65rem; font-weight: 400; line-height: 1; }
.shop-catalog-metrics span { margin-top: .42rem; color: #777; font-size: .65rem; letter-spacing: .035em; text-transform: uppercase; }

.shop-filter-bar {
    position: sticky;
    z-index: 20;
    top: 88px;
    display: grid;
    margin: 2.5rem 0 1.25rem;
    padding: .65rem;
    align-items: center;
    grid-template-columns: minmax(210px,.35fr) minmax(0,1fr);
    gap: 1rem;
    border: 1px solid #333;
    border-radius: 6px;
    background: rgba(16,16,16,.94);
    box-shadow: 0 15px 32px rgba(0,0,0,.32);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.shop-search {
    display: flex;
    min-height: 44px;
    padding: 0 .8rem;
    align-items: center;
    gap: .55rem;
    border: 1px solid #3b3b3b;
    border-radius: 4px;
    background: #0d0d0d;
    color: #777;
}
.shop-search:focus-within { border-color: #ffaa00; box-shadow: 0 0 0 3px rgba(255,170,0,.1); color: #ffaa00; }
.shop-search .icon { width: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shop-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: .78rem; }
.shop-search input::placeholder { color: #666; }
.shop-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .55; }
.shop-filter-controls { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; }
.shop-filter-controls > div { display: flex; min-width: 0; flex-wrap: wrap; gap: .42rem; }
.shop-filter-bar button {
    min-height: 44px;
    padding: .55rem .72rem;
    border: 1px solid #3b3b3b;
    border-radius: 4px;
    background: #222;
    color: #aaa;
    font-family: var(--font-display);
    font-size: .58rem;
    letter-spacing: .035em;
    cursor: pointer;
}
.shop-filter-bar button span { margin-left: .35rem; color: #666; }
.shop-filter-bar button:hover { border-color: #666; color: #fff; }
.shop-filter-bar button.is-active { border-color: #ffaa00; background: rgba(255,170,0,.12); color: #ffaa00; }
.shop-filter-bar button.is-active span { color: #ffaa00; }
.shop-filter-controls > p { margin: 0; color: #777; font-size: .7rem; white-space: nowrap; }

.shop-product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; perspective: 1400px; }

.shop-product-card {
    --product-rgb: 85,217,255;
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(210px,.82fr) minmax(0,1fr);
    overflow: hidden;
    border: 2px solid #333;
    border-top-color: #474747;
    border-left-color: #474747;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(var(--product-rgb),.06), #171717 45%, #0e0e0e);
    box-shadow: 0 18px 40px rgba(0,0,0,.42);
    transform-style: preserve-3d;
    will-change: transform;
}
.shop-product-card::before { position: absolute; z-index: 5; inset: 0; opacity: 0; background: radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(var(--product-rgb),.13),transparent 42%); content: ""; pointer-events: none; transition: opacity 220ms ease; }
.shop-product-card::after { position: absolute; inset: 0; opacity: 0; border: 1px solid rgba(var(--product-rgb),.5); border-radius: inherit; box-shadow: inset 0 0 42px rgba(var(--product-rgb),.075); content: ""; pointer-events: none; transition: opacity 200ms ease; }
.shop-product-card:hover::before,
.shop-product-card:focus-within::before,
.shop-product-card:hover::after,
.shop-product-card:focus-within::after { opacity: 1; }
.shop-product-card[hidden] { display: none; }
.shop-product-card--amber { --product-rgb: 255,170,0; }
.shop-product-card--gold { --product-rgb: 255,194,71; }
.shop-product-card--night { --product-rgb: 67,127,185; }
.shop-product-card--founder { --product-rgb: 255,170,0; }
.shop-product-card--archive { --product-rgb: 76,202,226; }
.shop-product-card--mecenas { --product-rgb: 255,142,44; }
.shop-product-card--ember { --product-rgb: 255,126,28; }
.shop-product-card--ice { --product-rgb: 126,210,255; }
.shop-product-card--obsidian { --product-rgb: 65,215,235; }
.shop-product-card--dawn { --product-rgb: 255,146,42; }
.shop-product-card--crystal { --product-rgb: 57,224,255; }
.shop-product-card--chapter { --product-rgb: 255,174,61; }
.shop-product-card--builder { --product-rgb: 255,158,38; }
.shop-product-card--explorer { --product-rgb: 91,193,132; }
.shop-product-card--violet { --product-rgb: 116,108,239; }

.shop-product-visual {
    position: relative;
    display: grid;
    min-height: 390px;
    place-items: center;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at 50% 58%, rgba(var(--product-rgb),.18), transparent 42%),
        linear-gradient(180deg, rgba(var(--product-rgb),.05), rgba(0,0,0,.38));
}
.shop-product-visual::before {
    position: absolute;
    inset: 0;
    opacity: .11;
    background-image:
        linear-gradient(rgba(var(--product-rgb),.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--product-rgb),.35) 1px, transparent 1px);
    background-size: 38px 38px;
    content: "";
}
.shop-product-visual::after { position: absolute; bottom: 8%; left: 50%; width: 58%; height: 15%; border: 1px solid rgba(var(--product-rgb),.42); border-radius: 50%; background: radial-gradient(ellipse,rgba(var(--product-rgb),.14),transparent 67%); box-shadow: 0 0 25px rgba(var(--product-rgb),.16); content: ""; transform: translateX(-50%); }
.shop-product-visual img { position: relative; z-index: 2; width: 112%; max-width: none; height: auto; object-fit: contain; filter: drop-shadow(0 22px 28px rgba(0,0,0,.72)); transform: translateZ(36px); transform-origin: 50% 58%; will-change: transform; }
.shop-product-index { position: absolute; z-index: 4; top: .8rem; left: .8rem; color: rgba(var(--product-rgb),.48); font-family: var(--font-display); font-size: .62rem; letter-spacing: .08em; }
.shop-product-state { position: absolute; z-index: 4; top: .65rem; right: .65rem; padding: .28rem .4rem; border: 1px solid rgba(var(--product-rgb),.3); border-radius: 3px; background: rgba(0,0,0,.68); color: rgb(var(--product-rgb)); font-family: var(--font-display); font-size: .48rem; letter-spacing: .07em; text-transform: uppercase; }

.shop-product-body { display: flex; padding: clamp(1.2rem,2.3vw,1.75rem); flex-direction: column; }
.shop-product-body > p:first-child { margin: 0; color: rgb(var(--product-rgb)); font-family: var(--font-display); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.shop-product-body h3 { margin: .45rem 0 .65rem; color: #fff; font-family: var(--font-display); font-size: clamp(1.5rem,2.6vw,2.3rem); font-weight: 400; line-height: 1; text-transform: uppercase; text-shadow: 2px 2px 0 #000; }
.shop-product-copy { margin: 0; color: #999; font-size: .82rem; line-height: 1.65; }
.shop-product-body ul { display: grid; margin: 1rem 0 1.2rem; padding: 0; gap: .48rem; list-style: none; }
.shop-product-body li { position: relative; padding-left: 1rem; color: #bbb; font-size: .75rem; }
.shop-product-body li::before { position: absolute; top: .58em; left: 0; width: .36rem; height: .36rem; border-radius: 50%; background: rgb(var(--product-rgb)); box-shadow: 0 0 8px rgba(var(--product-rgb),.5); content: ""; }

.shop-product-buy { display: flex; margin-top: auto; padding-top: 1rem; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid #2f2f2f; }
.shop-product-buy > span { display: grid; gap: .15rem; }
.shop-product-buy small { color: #666; font-size: .56rem; text-transform: uppercase; }
.shop-product-buy strong { color: #bbb; font-size: .7rem; }
.shop-product-buy button {
    min-height: 40px;
    padding: .55rem .7rem;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    background: #202020;
    color: #747474;
    font-family: var(--font-display);
    font-size: .52rem;
    letter-spacing: .04em;
    cursor: not-allowed;
}

.shop-empty-state {
    min-height: 360px;
    padding: 2rem;
    place-items: center;
    align-content: center;
    border: 1px dashed #444;
    border-radius: 8px;
    background: rgba(12,12,12,.84);
    text-align: center;
}
.shop-empty-state:not([hidden]) { display: grid; }
.shop-empty-state > span { width: 52px; height: 52px; border: 2px solid #555; border-radius: 50%; box-shadow: inset 0 0 0 9px #171717; }
.shop-empty-state h3 { margin: 1.1rem 0 .35rem; color: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; text-transform: uppercase; }
.shop-empty-state p { margin: 0 0 1.2rem; color: #888; }

.shop-fair { border-top: 1px solid rgba(255,170,0,.16); background: #0b0b0b; }
.shop-fair-panel {
    display: grid;
    min-height: 410px;
    padding: clamp(1.5rem,4vw,3.5rem);
    grid-template-columns: minmax(0,1fr) minmax(320px,.72fr);
    align-items: center;
    gap: 3rem;
    overflow: hidden;
    border: 2px solid #333;
    border-top-color: #484848;
    border-left-color: #484848;
    border-radius: 9px;
    background:
        linear-gradient(90deg, rgba(13,13,13,.98) 0 50%, rgba(13,13,13,.68) 72%, rgba(13,13,13,.42)),
        url("world-scenes/survival-fields-night.webp") center / cover;
    box-shadow: 0 25px 58px rgba(0,0,0,.46);
}
.shop-fair-panel h2,
.shop-final-card h2 { margin: .65rem 0 .8rem; color: #fff; font-family: var(--font-display); font-size: clamp(2rem,4.5vw,4.5rem); font-weight: 400; line-height: 1; text-transform: uppercase; text-shadow: 2px 2px 0 #000; }
.shop-fair-panel > div > p:last-child,
.shop-final-card > div > p:last-child { max-width: 65ch; margin: 0; color: #aaa; line-height: 1.75; }
.shop-fair-panel ul { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(3,1fr); gap: .7rem; list-style: none; }
.shop-fair-panel li { display: grid; min-height: 140px; padding: 1rem; place-content: center; border: 1px solid #3b3b3b; border-radius: 5px; background: rgba(10,10,10,.78); text-align: center; }
.shop-fair-panel li strong { color: #ffaa00; font-family: var(--font-display); font-size: 2.3rem; font-weight: 400; }
.shop-fair-panel li span { color: #888; font-size: .65rem; }

.shop-final { background: #090909; }
.shop-final-card {
    display: grid;
    padding: clamp(1.4rem,3vw,2.4rem);
    grid-template-columns: 110px minmax(0,1fr) auto;
    align-items: center;
    gap: clamp(1.2rem,3vw,2.2rem);
    border: 2px solid #333;
    border-top-color: #474747;
    border-left-color: #474747;
    border-radius: 8px;
    background: linear-gradient(145deg,#1d1d1d,#101010);
    box-shadow: 0 22px 52px rgba(0,0,0,.48);
}
.shop-final-card > img { width: 110px; height: 110px; border: 1px solid rgba(255,170,0,.35); border-radius: 7px; background: #080808; object-fit: cover; }
.shop-final-card h2 { max-width: 17ch; margin-block: .35rem .55rem; font-size: clamp(1.7rem,3.3vw,3rem); }
.shop-final-card .btn { white-space: nowrap; }

.shop-magnetic { will-change: transform; }

@media (max-width: 1160px) {
    .shop-hero-grid { grid-template-columns: minmax(0,1fr) minmax(310px,.62fr); }
    .shop-hero h1 { font-size: clamp(3.4rem,7vw,6rem); }
    .shop-product-card { grid-template-columns: 1fr; }
    .shop-product-visual { min-height: 330px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
    .shop-product-visual img { width: min(92%,430px); }
    .shop-final-card { grid-template-columns: 90px minmax(0,1fr); }
    .shop-final-card > img { width: 90px; height: 90px; }
    .shop-final-card .btn { grid-column: 2; width: fit-content; }
    .shop-showroom-layout { grid-template-columns: minmax(220px,.7fr) minmax(260px,1fr) minmax(220px,.7fr); gap-inline: 1rem; }
    .shop-showroom-product { width: min(100%,310px); }
}

@media (max-width: 1000px) {
    .shop-showroom { height: 175vh; min-height: 1250px; }
    .shop-showroom-layout { grid-template-columns: minmax(240px,.72fr) minmax(320px,1fr); }
    .shop-showroom-heading { grid-column: 1 / -1; max-width: 610px; }
    .shop-showroom-heading h2 { font-size: clamp(2.7rem,7vw,5.2rem); }
    .shop-showroom-product { grid-column: 2; }
    .shop-showroom-sticky::before { background: linear-gradient(90deg,rgba(5,5,5,.94),rgba(5,5,5,.36) 44%,rgba(5,5,5,.6)); }
}

@media (max-width: 860px) {
    .item-shop-page .nav-link small { display: none; }
    .shop-hero { min-height: auto; padding-bottom: 7rem; }
    .shop-three-stage { inset: 36% -18% 0 30%; opacity: .64; }
    .shop-hero-grid { min-height: 0; grid-template-columns: 1fr; }
    .shop-hero-copy { max-width: 720px; }
    .shop-hero-showcase { min-height: 520px; }
    .shop-hero-showcase > img { width: min(100%,580px); }
    .shop-section-heading { grid-template-columns: 1fr; align-items: start; }
    .shop-section-heading > p { max-width: 65ch; }
    .shop-catalog-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .shop-filter-bar { position: static; grid-template-columns: 1fr; align-items: stretch; }
    .shop-filter-controls { align-items: flex-start; flex-direction: column; }
    .shop-filter-controls > p { white-space: normal; }
    .shop-fair-panel { grid-template-columns: 1fr; }
    .shop-market-terminal { right: 0; }
}

@media (max-width: 680px) {
    .shop-hero h1 { font-size: clamp(2.75rem,13.4vw,4.6rem); }
    .shop-hero-lead { color: #ddd; }
    .shop-three-stage { display: none; }
    .shop-market-terminal { right: 0; bottom: 0; width: min(260px,82%); }
    .shop-showcase-label { min-width: 112px; }
    .shop-showcase-label--top { right: 0; }
    .shop-showcase-label--bottom { left: 0; }
    .shop-scroll-cue { display: none; }
    .shop-construction-head { align-items: flex-start; flex-direction: column; }
    .shop-build-track { grid-template-columns: 1fr; gap: 1.2rem; }
    .shop-build-track::before { top: 22px; bottom: 22px; left: 21px; width: 1px; height: auto; background: linear-gradient(#ffaa00,#555,#333); }
    .shop-product-grid { grid-template-columns: 1fr; }
    .shop-product-visual { min-height: 330px; }
    .shop-fair-panel ul { grid-template-columns: 1fr; }
    .shop-fair-panel li { min-height: 100px; }
    .shop-final-card { grid-template-columns: 1fr; text-align: left; }
    .shop-final-card .btn { grid-column: 1; width: 100%; white-space: normal; }
    .shop-showroom { height: auto; min-height: 0; }
    .shop-showroom-sticky { position: relative; height: auto; min-height: 0; padding: 5.5rem 0 3.5rem; }
    .shop-showroom-canvas { display: none; }
    .shop-showroom-sticky::before { background: radial-gradient(circle at 50% 43%,rgba(85,217,255,.11),transparent 29rem),linear-gradient(rgba(5,5,5,.35),#050505); }
    .shop-showroom-layout { height: auto; padding-block: 0; grid-template-columns: 1fr; grid-template-rows: auto; gap: 1.4rem; }
    .shop-showroom-heading,
    .shop-showroom-nav,
    .shop-showroom-product,
    .shop-showroom-footer { width: 100%; max-width: none; grid-column: 1; grid-row: auto; }
    .shop-showroom-heading h2 { font-size: clamp(2.55rem,12vw,4rem); }
    .shop-showroom-product { justify-self: stretch; }
    .shop-showroom-nav { grid-template-columns: repeat(2,minmax(0,1fr)); align-self: auto; }
    .shop-showroom-nav button { min-height: 64px; }
    .shop-showroom-footer { grid-template-columns: 1fr auto; }
    .shop-showroom-footer > div { grid-column: 2; grid-row: 1; }
    .shop-showroom-footer > a { grid-column: 1 / -1; justify-self: stretch; justify-content: center; min-height: 46px; border: 1px solid #353535; border-radius: 4px; }
}

@media (max-width: 420px) {
    .shop-hero { padding: 6.6rem 0 3.25rem; }
    .shop-hero-grid { gap: .85rem; }
    .shop-status-pill { margin-bottom: .85rem; padding: .48rem .64rem; font-size: .55rem; }
    .shop-overline { font-size: .6rem; }
    .shop-hero h1 { margin-block: .72rem .9rem; font-size: clamp(2.35rem, 11.7vw, 3rem); }
    .shop-hero-lead { font-size: .93rem; line-height: 1.65; }
    .shop-hero-actions { margin-top: 1.15rem; }
    .shop-hero-actions .btn { width: 100%; }
    .shop-trust-list { margin-top: .85rem; gap: .32rem; }
    .shop-trust-list li { min-height: 32px; padding: .4rem .5rem; font-size: .62rem; }
    .shop-hero-showcase { min-height: 315px; }
    .shop-hero-showcase > img { width: min(100%, 335px); }
    .shop-showcase-ring { width: 83%; }
    .shop-showcase-label { min-width: 104px; padding: .5rem .58rem; font-size: .52rem; }
    .shop-showcase-label strong { font-size: .57rem; }
    .shop-showcase-label--top { top: 12%; }
    .shop-showcase-label--bottom { bottom: 8%; }
    .shop-market-terminal { position: relative; right: auto; bottom: auto; width: 100%; margin-top: -1.1rem; }
    .shop-catalog-metrics { gap: .45rem; }
    .shop-catalog-metrics li { min-height: 88px; padding: .8rem; }
    .shop-catalog-metrics strong { font-size: 1.35rem; }
    .shop-catalog-metrics span { font-size: .56rem; }
    .shop-filter-bar button { flex: 1 1 calc(50% - .5rem); }
    .shop-product-visual { min-height: 290px; }
    .shop-product-buy { align-items: stretch; flex-direction: column; }
    .shop-product-buy button { width: 100%; }
    .shop-showroom-nav { grid-template-columns: 1fr; }
    .shop-showroom-heading > p:first-child { align-items: flex-start; flex-direction: column; gap: .45rem; }
    .shop-showroom-heading > p:first-child::after { display: none; }
    .shop-showroom-mode { font-size: .43rem; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-product-card,
    .shop-hero-showcase > img,
    .shop-showcase-ring,
    .shop-magnetic,
    .shop-showroom-nav button,
    .shop-showroom-nav i { transform: none !important; transition: none !important; }
    .shop-showroom { height: auto; min-height: 0; }
    .shop-showroom-sticky { position: relative; }
}