/* =============================================================================
   SHOP PAGE — Netflix-Style Unified Layout
   Light theme, hero banner, horizontal scroll rows
   ============================================================================= */

/* =============================================================================
   STICKY HEADER + BALANCE TAB + COLLECTION DROPDOWN
   ============================================================================= */

/* Sticky wrapper — holds utility bar; tab hangs out via absolute + overflow */
.shop-sticky-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    overflow: visible;
}

/* Remove sticky from the utility bar itself when inside shop wrapper */
.shop-sticky-header .utility-bar {
    position: static;
    margin-bottom: 0;
}

/* Tab wrapper — floats over shop content, takes no layout space */
.shop-balance-tab-wrap {
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    padding-right: var(--space-4);
    z-index: 2;
}

/* The tab — small nub hanging off the bar's bottom edge */
.shop-balance-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--balance-tab-padding);
    background: var(--balance-tab-bg);
    border: none;
    border-radius: 0 0 var(--balance-tab-radius) var(--balance-tab-radius);
    cursor: pointer;
    white-space: nowrap;
    color: var(--balance-tab-chevron-color);
    transition: color var(--balance-tab-transition);
    pointer-events: auto;
}

.shop-balance-tab:hover {
    color: var(--balance-tab-chevron-hover);
}

/* Green pill badge inside the tab */
.shop-balance-tab__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--balance-tab-pill-padding);
    background: var(--balance-tab-pill-bg);
    border: 1px solid var(--balance-tab-pill-border);
    border-radius: var(--balance-tab-pill-radius);
    font-size: var(--balance-tab-pill-size);
    font-weight: var(--balance-tab-pill-weight);
    color: var(--balance-tab-pill-color);
}

/* Chevron — rotates when expanded */
.shop-balance-tab__chevron {
    transition: transform var(--balance-tab-transition);
}

.shop-balance-tab[aria-expanded="true"] .shop-balance-tab__chevron {
    transform: rotate(180deg);
}

/* Collection overlay — covers shop content, sits below sticky header */
.shop-collection-overlay {
    position: relative;
    z-index: calc(var(--z-sticky) - 1);
    display: none;
    background: var(--gallery-canvas);
}

.shop-collection-overlay[hidden] {
    display: none;
}

.shop-collection-overlay--open {
    display: block;
}

.shop-collection-overlay__content {
    min-height: 60vh;
    /* Clear the balance tab nub hanging below the sticky header */
    padding-top: var(--space-8, 2rem);
}

/* Kill top spacing when safe loads inside shop overlay */
.shop-collection-overlay .safe {
    padding-top: 0;
}

.shop-collection-overlay .safe-vault {
    margin-top: 0;
}

/* ── Light Theme Scope ── */
.shop-light {
    background: var(--surface-app);
    color: var(--shop-card-text-primary, var(--zine-text-primary));
    min-height: 100%;
    flex: 1;
    /* Mobile Chrome fix (ticket #484): clip any horizontal overflow leaking
       out of a shop-rail track so vertical scroll never drags the page sideways. */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

#zone-shop.utility-zone {
    overflow-x: clip;
    overscroll-behavior-x: contain;
}

@supports not (overflow: clip) {
    .shop-light,
    .shop-root,
    .shop-main,
    #zone-shop.utility-zone {
        overflow-x: hidden;
    }
}

.shop-page {
    /* Steven 2026-07-22 comp-match: real page gutters — no card or heading
       ever touches the viewport edge. Inner rails zero their own x-padding
       below so the gutter is applied exactly once. */
    padding: 0 var(--space-4) var(--space-10);
}
@media (min-width: 768px) {
    .shop-page { padding: 0 var(--space-6) var(--space-10); }
}
.shop-page .shop-rail { --rail-pad-x: 0; }
.shop-page .shop-rail__header { padding-left: 0; padding-right: 0; }
.shop-page .shop-category-pills { padding-left: 0; padding-right: 0; padding-top: var(--space-2); }

/* Force sidebar-matching background on the main-area + drawer-panel when shop is loaded.
   Specificity must out-beat `body.drawer-layout .main-area` (layout.css:6392) which
   otherwise paints the area with --drawer-surface (#fff). */
body.shop-page .main-area,
body.drawer-layout .main-area:has(.shop-light),
body.shop-page.drawer-layout .main-area {
    background: var(--surface-app);
}

body.shop-page .main-area__content,
body.drawer-layout .main-area__content:has(.shop-light) {
    background: var(--surface-app);
}

body.shop-page .drawer-panel,
body.drawer-layout .drawer-panel:has(.shop-light) {
    background: var(--surface-app);
}

/* =============================================================================
   HERO BANNER
   ============================================================================= */
.nf-hero {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.nf-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.nf-hero__fade {
    position: absolute;
    inset: 0;
    /* Note: can't use CSS var inside rgba() — keeping hardcoded fade that matches --shop-pdp-bg (#f5f5f7) */
    background: linear-gradient(
        to bottom,
        rgba(245, 245, 247, 0) 40%,
        rgba(245, 245, 247, 0.4) 70%,
        rgba(245, 245, 247, 0.8) 100%
    );
}

.nf-hero__content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.nf-hero__badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--color-green-500, var(--status-success));
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-xs);
    margin-bottom: 8px;
}

.shop-light .nf-hero__title {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--color-yellow-400) !important;  /* intentional: yellow on hero image overlay */
    margin: 0 0 4px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.nf-hero__title-sub {
    letter-spacing: 0.1em;
}

.nf-hero__subtitle {
    font-size: var(--text-sm);
    color: rgba(0, 0, 0, 0.85);
    margin: 10px 0 16px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.nf-hero__actions {
    display: flex;
    gap: 10px;
}

.nf-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
    border: none;
}

.nf-hero__btn:hover {
    transform: none;
}

.nf-hero__btn--primary {
    background: var(--shop-card-text-primary, var(--zine-text-primary));
    color: var(--text-inverse);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nf-hero__btn--primary:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.nf-hero__btn--ghost {
    background: rgba(0, 0, 0, 0.85);
    color: var(--shop-card-text-primary, var(--zine-text-primary));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nf-hero__btn--ghost:hover {
    background: var(--surface-primary);
}


/* =============================================================================
   FEATURED BOOK CARD — cap width on desktop
   ============================================================================= */
.nf-book-card {
    max-width: 480px;
}

/* =============================================================================
   FEATURED CAROUSEL — Full-width colored slides
   ============================================================================= */
.feat-carousel {
    position: relative;
    width: 100%;
    overflow: visible;
    z-index: 0;
}

/* Carousel section background matches active slide */
.feat-carousel.feat-carousel--purple { background: var(--shop-carousel-bg-purple); }
.feat-carousel.feat-carousel--blue   { background: var(--shop-carousel-bg-blue); }
.feat-carousel.feat-carousel--green  { background: var(--shop-carousel-bg-green); }
.feat-carousel.feat-carousel--highlight-yellow { background: var(--shop-carousel-bg-yellow); }

.feat-carousel__track {
    position: relative;
    width: 100%;
}

.feat-carousel__slide {
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    padding-bottom: var(--space-3);
    color: var(--shop-carousel-color);
    overflow: hidden;
    cursor: pointer;
    min-height: var(--shop-carousel-min-height);
    position: relative;
}

.feat-carousel__slide--active {
    display: flex;
}

/* Inner wrapper: image left + text right, centered like an article */
.feat-carousel__inner {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
}

/* Slide color themes removed — section background provides the color */

/* ── Content (left side) ── */
.feat-carousel__content {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

.feat-carousel__eyebrow {
    font-size: var(--shop-carousel-eyebrow-size);
    font-weight: var(--shop-carousel-eyebrow-weight);
    letter-spacing: var(--shop-carousel-eyebrow-tracking);
    text-transform: uppercase;
    opacity: 0.85;
}

.feat-carousel__title {
    font-family: var(--shop-carousel-title-font);
    font-size: var(--shop-carousel-title-size);
    font-weight: var(--shop-carousel-title-weight);
    line-height: var(--shop-carousel-title-leading);
    margin: 0;
}

.feat-carousel__ad {
    font-size: var(--shop-carousel-ad-size);
    line-height: var(--shop-carousel-ad-leading);
    margin: var(--space-1) 0 0;
    opacity: 0.92;
    max-width: 320px;
}

.feat-carousel__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--shop-carousel-badge-size);
    font-weight: var(--shop-carousel-badge-weight);
    background: rgba(255,255,255,0.2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full, 9999px);
    width: fit-content;
}
.feat-carousel__badge--free {
    background: rgba(255,255,255,0.3);
}

.feat-carousel__price {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--shop-carousel-price-size);
    font-weight: var(--shop-carousel-price-weight);
}

/* ── Image (right side — background-image to avoid global img reset) ── */
.feat-carousel__image {
    flex: 0 0 var(--shop-carousel-img-size);
    width: var(--shop-carousel-img-size);
    min-height: var(--shop-carousel-img-size);
    border-radius: var(--shop-carousel-img-radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 4px 20px rgba(0,0,0,0.25));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Mobile top row: icon + title side by side ── */
.feat-carousel__toprow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.feat-carousel__toprow-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.feat-carousel__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md, 12px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Desktop: hide the inline icon, show the large image */
@media (min-width: 768px) {
    .feat-carousel__icon {
        display: none;
    }
}

/* Mobile: hide the large side image and nav arrows, use icon instead */
@media (max-width: 767px) {
    .feat-carousel__image {
        display: none;
    }
    .feat-carousel__inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .feat-carousel__arrow {
        display: none;
    }
}

/* ── Nav arrows ── */
.feat-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: var(--shop-carousel-arrow-size);
    height: var(--shop-carousel-arrow-size);
    border-radius: var(--radius-full, 9999px);
    border: none;
    background: var(--shop-carousel-arrow-bg);
    color: var(--shop-carousel-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}
.feat-carousel__arrow:hover { background: var(--shop-carousel-arrow-bg-hover); }
.feat-carousel__arrow--left  { left: var(--space-3); }
.feat-carousel__arrow--right { right: var(--space-3); }

/* ── Dots (inside slide color) ── */
.feat-carousel__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-4);
    background: transparent;
}

.feat-carousel__dot {
    width: var(--shop-carousel-dot-size);
    height: var(--shop-carousel-dot-size);
    border-radius: var(--radius-full, 9999px);
    border: none;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.feat-carousel__dot--active {
    background: #fff;
    transform: scale(1.3);
}

/* ── Fade: slide color extends behind the pills below ── */
.feat-carousel__fade {
    display: none; /* fade handled by slide padding-bottom + pill overlap */
}

/* ── Admin kebab on slide ── */
.feat-carousel__kebab {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 5;
}

/* ── Desktop ── */
@media (min-width: 768px) {
    .feat-carousel__track {
        min-height: var(--shop-carousel-min-height-desktop);
    }
    .feat-carousel__slide {
        padding: var(--shop-carousel-padding-desktop);
    }
    .feat-carousel__title {
        font-size: var(--shop-carousel-title-size-desktop);
    }
    .feat-carousel__image {
        flex-basis: var(--shop-carousel-img-size-desktop);
        width: var(--shop-carousel-img-size-desktop);
        min-height: var(--shop-carousel-img-size-desktop);
    }
    .feat-carousel__arrow {
        width: var(--shop-carousel-arrow-size-desktop);
        height: var(--shop-carousel-arrow-size-desktop);
    }
    .feat-carousel__arrow--left  { left: var(--space-4); }
    .feat-carousel__arrow--right { right: var(--space-4); }
}

/* =============================================================================
   NETFLIX ROW — Section title + horizontal scroll rail
   ============================================================================= */
.nf-row {
    padding: 16px 0 8px;
    /* Mobile scroll fix: allow child scroll container to work within clipped viewport */
    min-width: 0;
    max-width: 100%;
}

.nf-row__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px 10px;
}

.nf-row__title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--shop-card-text-primary);
    margin: 0;
}

.nf-row__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--shop-card-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-md);
}

.nf-row__action {
    margin-left: auto;
}

.nf-row__scroll {
    display: flex;
    gap: 12px;
    padding: 8px 20px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Mobile scroll fix: create scrolling context within clipped parent */
    max-width: 100%;
    min-width: 0;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}

.nf-row__scroll::-webkit-scrollbar {
    display: none;
}

/* =============================================================================
   CARDS — Base
   ============================================================================= */
.nf-card {
    position: relative;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: var(--shop-card-bg);
    border-radius: var(--shop-card-radius);
    overflow: hidden;
    border: var(--shop-card-border);
    box-shadow: var(--shop-card-shadow);
    transition: var(--shop-card-transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.nf-card:hover {
    transform: none;
    box-shadow: var(--shop-card-shadow-hover);
}

/* ── Pack-card overrides for horizontal scroll rows ── */
.nf-scroll-card {
    flex-shrink: 0;
    scroll-snap-align: start;
    width: 170px;
    min-height: 230px;
}

/* ── Legacy nf-card--app (unused, kept for reference) ── */
.nf-card__hero {
    width: 100%;
    height: 110px;
    overflow: hidden;
    position: relative;
}

.nf-card__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.nf-card--app:hover .nf-card__hero img {
    transform: scale(1.05);
}

.nf-card__hero-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-purple-500, var(--color-purple-500)), var(--accent-tertiary, var(--accent-tertiary)));
}

.nf-card__hero-icon i {
    width: 40px;
    height: 40px;
    color: var(--text-inverse);
}

.nf-card__body {
    padding: 10px 12px 0;
    flex: 1;
}

.nf-card__name {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--shop-card-text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nf-card__meta {
    font-size: var(--text-xs);
    color: var(--shop-card-text-meta);
    margin-top: 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nf-card__foot {
    padding: 8px 12px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nf-card__price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-green-600, var(--pdp-buy-alt-color));
}

.nf-card__coiny-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.nf-card__tag {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.nf-card__tag--owned {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-green-500, var(--status-success));
}

.nf-card__tag--free {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-green-500, var(--status-success));
}

/* ── Quest cards (~50vw, max 280px) ── */
.nf-card--quest {
    width: 50vw;
    max-width: 280px;
    min-width: 220px;
}

.nf-card__quest-hero {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
}

.nf-card__quest-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nf-card__quest-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent-tertiary, var(--accent-tertiary)), var(--color-purple-500, var(--color-purple-500)), var(--color-purple-500, var(--color-purple-500)));
}

.nf-card__quest-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
}

.nf-card__quest-content {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
}

.nf-card__quest-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.9);
    color: var(--text-inverse);  /* on dark image overlay */
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-xs);
    margin-bottom: 4px;
}

.nf-card__quest-title {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-inverse);  /* on dark image overlay */
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nf-card__quest-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.nf-card__quest-progress {
    flex: 1;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.nf-card__quest-progress-bar {
    height: 100%;
    background: var(--color-green-500, var(--status-success));
    border-radius: var(--radius-xs);
    transition: width 0.4s ease;
}

.nf-card__quest-stats {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--shop-card-text-secondary);
    white-space: nowrap;
}

.nf-card__quest-reward {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-green-500, var(--status-success));
    white-space: nowrap;
}

/* ── Quest card: Accomplished/Completed state ── */
.nf-card--quest--completed {
    position: relative;
    border: 1px solid rgba(16, 185, 129, 0.35);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08), 0 2px 12px rgba(16, 185, 129, 0.12);
}

.nf-card--quest--completed .nf-card__quest-hero img {
    filter: saturate(0.85) brightness(0.92);
}

.nf-card--quest--completed .nf-card__quest-overlay {
    background: linear-gradient(to top, rgba(16, 185, 129, 0.55) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
}

.nf-card__quest-completed-stamp {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(16, 185, 129, 0.92);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.nf-card__quest-completed-stamp iconify-icon {
    width: 12px;
    height: 12px;
}

.nf-card__quest-badge--success {
    background: rgba(16, 185, 129, 0.9);
}

.nf-card__quest-stats--success {
    color: var(--color-green-500, var(--status-success));
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Tool & Effect cards (~150w x 200h) ── */
.nf-card--tool,
.nf-card--effect {
    width: var(--shop-effect-width, 150px);
    min-height: var(--shop-effect-min-height, 200px);
}

.nf-card__rarity-tag {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 6px 12px 0;
    color: var(--shop-card-text-secondary);
}

.nf-card__rarity-tag--active {
    color: var(--color-green-500, var(--status-success));
}

.nf-card__icon-area {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nf-card__tool-img {
    width: var(--shop-effect-preview-size, 56px);
    height: var(--shop-effect-preview-size, 56px);
    object-fit: contain;
    border-radius: var(--radius-md);
}

.nf-card__tool-emoji,
.nf-card__effect-emoji {
    font-size: 40px;
    line-height: 1;
}

/* ── Effect preview circles ── */
.effect-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface-primary);
    position: relative;
    overflow: hidden;
}

/* Lumina Rings — colored ring border with glow */
.effect-preview--lumina-teal {
    background: var(--color-dark-700);
    border: 3px solid var(--color-teal-500);
    box-shadow: 0 0 12px rgba(20,184,166,0.5), inset 0 0 8px rgba(20,184,166,0.15);
}
.effect-preview--lumina-gold {
    background: var(--color-dark-700);
    border: 3px solid var(--color-yellow-500);
    box-shadow: 0 0 12px rgba(234,179,8,0.5), inset 0 0 8px rgba(234,179,8,0.15);
}
.effect-preview--lumina-violet {
    background: var(--color-dark-700);
    border: 3px solid var(--color-purple-700);
    box-shadow: 0 0 12px rgba(124,58,237,0.5), inset 0 0 8px rgba(124,58,237,0.15);
}

/* Magic Mist — swirling teal/purple/gold gradient */
.effect-preview--magic-mist {
    background: radial-gradient(circle at 30% 40%, rgba(20,184,166,0.4), transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(124,58,237,0.35), transparent 50%),
                radial-gradient(circle at 50% 30%, rgba(234,179,8,0.25), transparent 50%),
                #0a1628;
    animation: mist-swirl 4s ease-in-out infinite;
}
@keyframes mist-swirl {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(15deg); }
}

/* Spinning Octagon — colorful octagon shape */
.effect-preview--spinning-octagon {
    background: conic-gradient(from 0deg, var(--color-red-400), var(--highlight-yellow), var(--color-brightcyan-500), var(--color-purple-200), var(--color-blue-500), var(--color-purple-700), var(--color-red-400));
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    animation: spin-preview 6s linear infinite;
}
@keyframes spin-preview {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Smile — dark circle with golden smile arc */
.effect-preview--smile {
    background: var(--color-dark-700);
}
.effect-preview--smile::after {
    content: '';
    position: absolute;
    bottom: 30%;
    left: 22%;
    right: 22%;
    height: 20%;
    border: 2px solid var(--color-yellow-400);
    border-top: none;
    border-radius: 0 0 80px 80px;
}

/* Fireworks — dark sky with colorful dots */
.effect-preview--fireworks {
    background: var(--color-dark-800);
}
.effect-preview--fireworks::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 3px at 25% 25%, #ff0040 70%, transparent 100%),
        radial-gradient(circle 2px at 65% 20%, #ffd700 70%, transparent 100%),
        radial-gradient(circle 2px at 40% 60%, #00bfff 70%, transparent 100%),
        radial-gradient(circle 3px at 75% 55%, #ff8c00 70%, transparent 100%),
        radial-gradient(circle 2px at 30% 75%, #00ff88 70%, transparent 100%),
        radial-gradient(circle 2px at 60% 80%, var(--color-magenta-500) 70%, transparent 100%);
    animation: twinkle-preview 2s ease-in-out infinite;
}
@keyframes twinkle-preview {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Water / Ocean Wave — blue ripple rings */
.effect-preview--water {
    background: var(--color-dark-700);
    border: 2px solid rgba(0,180,255,0.3);
    box-shadow: inset 0 0 0 6px rgba(0,180,255,0.12), inset 0 0 0 12px rgba(0,180,255,0.06);
}
.effect-preview--water::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,180,255,0.25);
}

/* Wind — wispy white lines */
.effect-preview--wind {
    background: var(--color-dark-700);
}
.effect-preview--wind::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 15%;
    width: 70%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(200,230,255,0.4), transparent);
    box-shadow:
        0 -8px 0 0 rgba(200,230,255,0.2),
        0 8px 0 0 rgba(200,230,255,0.25),
        0 16px 0 0 rgba(200,230,255,0.15);
}

/* Plants / Nature Growth — green leaf dots on vines */
.effect-preview--plants {
    background: var(--color-dark-700);
}
.effect-preview--plants::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 3px at 30% 25%, var(--color-green-500) 60%, transparent 100%),
        radial-gradient(circle 2px at 55% 45%, var(--color-green-400) 60%, transparent 100%),
        radial-gradient(circle 3px at 70% 70%, var(--color-green-500) 60%, transparent 100%),
        radial-gradient(circle 2px at 25% 65%, var(--color-green-600) 60%, transparent 100%);
}

/* Lasers — red beams */
.effect-preview--lasers {
    background: var(--color-dark-800);
}
.effect-preview--lasers::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg, transparent 10%, rgba(255,50,50,0.7) 50%, transparent 90%);
    transform: translate(-50%, -50%) rotate(-30deg);
    box-shadow: 0 0 6px rgba(255,0,0,0.4);
}
.effect-preview--lasers::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg, transparent 10%, rgba(255,50,50,0.6) 50%, transparent 90%);
    transform: translate(-50%, -50%) rotate(30deg);
    box-shadow: 0 0 6px rgba(255,0,0,0.3);
}

/* Lightning — white bolt on dark background */
.effect-preview--lightning {
    background: var(--color-dark-800);
}
.effect-preview--lightning::before {
    content: '';
    position: absolute;
    top: 12%;
    left: 38%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 20px solid rgba(200,240,255,0.8);
    transform: skewX(-5deg);
    filter: drop-shadow(0 0 4px rgba(0,255,255,0.5));
}
.effect-preview--lightning::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 42%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 16px solid rgba(200,240,255,0.6);
    transform: skewX(8deg);
    filter: drop-shadow(0 0 3px rgba(0,255,255,0.4));
}

/* Fire — orange/red glow */
.effect-preview--fire {
    background: radial-gradient(ellipse at 50% 80%, rgba(255,100,0,0.5) 0%, rgba(255,50,0,0.2) 40%, var(--color-dark-800) 70%);
}
.effect-preview--fire::before {
    content: '';
    position: absolute;
    bottom: 20%;
    left: 30%;
    width: 40%;
    height: 50%;
    background: radial-gradient(ellipse at center bottom, rgba(255,180,0,0.6), rgba(255,80,0,0.3) 50%, transparent 80%);
    border-radius: 50% 50% 20% 20%;
    filter: blur(2px);
}

/* Neon Glow */
.effect-preview--neon {
    background: var(--color-dark-800);
    border: 2px solid #0ff;
    box-shadow: 0 0 10px rgba(0,255,255,0.4), inset 0 0 8px rgba(0,255,255,0.1);
}

/* Wood / Wooden Frame */
.effect-preview--wood {
    background: var(--color-dark-700);
    border: 3px solid var(--zine-text-em);
    box-shadow: inset 0 0 6px rgba(139,69,19,0.3);
}

/* Bamboo Grove */
.effect-preview--bamboo {
    background: var(--color-dark-700);
    border: 3px solid var(--color-green-600);
    box-shadow: inset 0 0 6px rgba(34,139,34,0.3);
}

/* ── Card buttons ── */
.nf-card__btn {
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.nf-card__btn--use {
    background: var(--color-green-500, var(--status-success));
    color: var(--text-inverse);
}

.nf-card__btn--use:hover {
    background: var(--color-green-600, var(--pdp-buy-alt-color));
}

.nf-card__btn--equip {
    background: transparent;
    color: var(--shop-card-text-secondary);
    border: var(--shop-card-border);
}

.nf-card__btn--equip:hover {
    border-color: rgba(0, 0, 0, 0.25);
    color: var(--shop-card-text-primary);
}

.nf-card__btn--buy {
    background: rgba(13, 148, 136, 0.1);
    color: var(--accent-primary, var(--color-teal-600));
}

.nf-card__btn--buy:hover {
    background: rgba(13, 148, 136, 0.18);
}

/* ── Toggle (for owned effects) ── */
.nf-card__foot--toggle {
    gap: 8px;
}

.nf-card__toggle-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--shop-card-text-secondary);
}

.nf-card__toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.nf-card__toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.nf-card__toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

.nf-card__toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
    background: var(--surface-primary);
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.nf-card__toggle-input:checked + .nf-card__toggle-slider {
    background: var(--color-green-500, var(--status-success));
}

.nf-card__toggle-input:checked + .nf-card__toggle-slider::before {
    transform: translateX(16px);
}

.nf-card--owned-effect {
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* =============================================================================
   SLIDE-UP MODAL
   ============================================================================= */
.slideup-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-fab);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.slideup-modal--open {
    pointer-events: auto;
}

.slideup-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slideup-modal--open .slideup-modal__backdrop {
    opacity: 1;
}

.slideup-modal__panel {
    position: relative;
    background: var(--shop-card-bg, var(--color-white));
    border-radius: 20px 20px 0 0;
    min-height: 40vh;
    max-height: 90vh;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    border-bottom: none;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.12);
}

.slideup-modal--open .slideup-modal__panel {
    transform: translateY(0);
}

.slideup-modal__handle {
    width: 36px;
    height: 4px;
    background: rgba(0,0,0,0.15);
    border-radius: var(--radius-xs);
    margin: 8px auto 4px;
    flex-shrink: 0;
}

.slideup-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}

.slideup-modal__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--shop-card-text-primary);
}

.slideup-modal__close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: var(--shop-card-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.slideup-modal__close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--shop-card-text-primary);
}

.slideup-modal__close svg {
    width: 18px;
    height: 18px;
}

.slideup-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* ── Full-screen app detail variant ── */
.slideup-modal__panel--app-detail {
    background: var(--shop-pdp-bg, var(--shop-pdp-bg));
    min-height: 100vh;
    max-height: 100vh;
    border-radius: 0;
}
.slideup-modal__panel--app-detail .slideup-modal__handle { background: rgba(0,0,0,0.15); }
.slideup-modal__panel--app-detail .slideup-modal__header {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.slideup-modal__panel--app-detail .slideup-modal__title {
    color: var(--shop-card-text-primary);
}
.slideup-modal__panel--app-detail .slideup-modal__close {
    background: rgba(0,0,0,0.05);
    color: var(--shop-card-text-secondary);
}
.slideup-modal__panel--app-detail .slideup-modal__close:hover {
    background: rgba(0,0,0,0.1);
    color: var(--shop-card-text-primary);
}

/* =============================================================================
   ADMIN KEBAB MENU — three-dot menu on app cards (super_admin only)
   ============================================================================= */
.shop-admin-kebab {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    color: var(--text-inverse);  /* intentional: white on dark overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}
.shop-admin-kebab:hover {
    background: rgba(0,0,0,0.65);
    color: var(--text-inverse);
}
/* Positioned variant for inside cards */
.shop-admin-kebab--card {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: var(--z-dropdown);
}
.shop-admin-kebab__menu {
    display: none;
    position: absolute;
    top: 32px;
    right: 0;
    min-width: 140px;
    background: var(--shop-card-bg);
    border: var(--shop-card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.shop-admin-kebab__menu--open {
    display: block;
}
.shop-admin-kebab__menu button,
.shop-admin-kebab__menu a {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    color: var(--shop-card-text-meta);
    font-size: var(--text-xs);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s;
}
.shop-admin-kebab__menu button:hover,
.shop-admin-kebab__menu a:hover {
    background: rgba(0,0,0,0.04);
    color: var(--shop-card-text-primary);
}
.shop-admin-kebab__menu button + button,
.shop-admin-kebab__menu button + a,
.shop-admin-kebab__menu a + button {
    border-top: 1px solid rgba(0,0,0,0.06);
}
/* Let kebab dropdown escape card overflow clip */
.nf-card:has(.shop-admin-kebab) {
    overflow: visible;
}
.nf-card:has(.shop-admin-kebab) .nf-card__quest-hero,
.nf-card:has(.shop-admin-kebab) .nf-card__icon-area {
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}
/* Same pattern for shop-long-card — allow kebab menu to overflow. The hero
   still clips the image, but the card root + hero open up when menu is active. */
.shop-long-card:has(.shop-admin-kebab__menu--open) {
    overflow: visible;
}
.shop-long-card:has(.shop-admin-kebab__menu--open) .shop-long-card__hero {
    overflow: visible;
}

/* =============================================================================
   PACK-CARD SHOP VARIANTS — footer button overrides for shop context
   ============================================================================= */

/* "Open" button for owned/free apps — green accent */
.pack-card__footer-btn--owned {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: var(--color-green-500, var(--status-success)) !important;
}
.pack-card__footer-btn--owned:hover {
    background: rgba(16, 185, 129, 0.35) !important;
    border-color: var(--color-green-500, var(--status-success)) !important;
}

/* Price button for purchasable apps — shows Coiny icon + amount */
.pack-card__footer-btn--buy {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--color-green-600, var(--pdp-buy-alt-color)) !important;
    background: rgba(5, 150, 105, 0.08) !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
}
.pack-card__footer-btn--buy:hover {
    background: rgba(5, 150, 105, 0.15) !important;
    border-color: rgba(5, 150, 105, 0.5) !important;
}

/* =============================================================================
   PURCHASE MODAL (inside slideup-modal — dark background)
   ============================================================================= */
.purchase-modal__preview {
    margin: 0 -20px 16px;
}

.purchase-modal__image {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    border-radius: var(--radius-md);
    margin: 0 auto;
    padding: 0 20px;
}

.purchase-modal__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.purchase-modal__item-name {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--shop-card-text-primary);
    margin: 0 0 4px;
}

.purchase-modal__item-desc {
    font-size: var(--text-sm);
    color: var(--shop-card-text-secondary);
    margin: 0 0 20px;
}

.purchase-modal__breakdown {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-md);
    padding: 4px 16px;
    margin-bottom: 20px;
}

.purchase-modal__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: var(--text-sm);
    color: var(--shop-card-text-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.purchase-modal__row:last-child {
    border-bottom: none;
}

.purchase-modal__row--after {
    color: var(--shop-card-text-primary);
    font-weight: var(--font-semibold);
}

.purchase-modal__price {
    color: var(--color-green-600, var(--pdp-buy-alt-color));
    font-weight: var(--font-semibold);
}

.purchase-modal__confirm-btn {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--color-green-500, var(--status-success));
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 8px;
}

.purchase-modal__confirm-btn:hover {
    background: var(--color-green-600, var(--pdp-buy-alt-color));
}

.purchase-modal__confirm-btn:disabled {
    background: rgba(0,0,0,0.05);
    color: var(--text-muted);
    cursor: not-allowed;
}

.purchase-modal__cancel-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: none;
    border: none;
    color: var(--shop-card-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    text-align: center;
}

.purchase-modal__cancel-btn:hover {
    color: var(--text-muted);
}

/* Insufficient balance modal */
.insufficient-lumina {
    text-align: center;
    padding: 20px 0;
}

.insufficient-lumina__icon {
    margin-bottom: 12px;
}

.insufficient-lumina__icon svg {
    width: 48px;
    height: 48px;
}

.insufficient-lumina__title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--shop-card-text-primary);
    margin: 0 0 8px;
}

.insufficient-lumina__message {
    font-size: var(--text-sm);
    color: var(--shop-card-text-secondary);
    margin: 0 0 8px;
}

.insufficient-lumina__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0 0 20px;
}

.insufficient-lumina__dismiss,
.insufficient-lumina__action {
    display: inline-block;
    padding: 12px 32px;
    background: var(--color-green-500, var(--status-success));
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
}

.insufficient-lumina__dismiss:hover,
.insufficient-lumina__action:hover {
    background: var(--color-green-600, var(--pdp-buy-alt-color));
}

/* =============================================================================
   GET COINY CARDS
   ============================================================================= */
.nf-card--coiny {
    width: var(--shop-coiny-width, 150px);
    min-height: var(--shop-coiny-min-height, 200px);
}

.nf-card__icon-area--coiny {
    background: linear-gradient(135deg, var(--shop-coiny-accent-subtle), rgba(34,197,94,0.1));
}

.nf-card__btn--coiny-buy {
    width: 100%;
    padding: 8px 12px;
    background: var(--shop-coiny-accent, var(--status-success));
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: background 0.15s;
}

.nf-card__btn--coiny-buy:hover {
    background: var(--color-green-600, var(--pdp-buy-alt-color));
}

.nf-card--coiny .nf-card__foot {
    padding: var(--space-2) var(--space-3) var(--space-3);
}
.nf-card__foot--center {
    justify-content: center;
}

/* ── Stripe payment form inside modal ── */
.stripe-payment-form {
    text-align: center;
}

.stripe-payment-form__summary {
    margin-bottom: 20px;
}

.stripe-payment-form__coiny-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stripe-payment-form__coiny-icon svg {
    width: 48px;
    height: 48px;
}

.stripe-payment-form__amount {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--shop-card-text-primary);
    margin: 0 0 4px;
}

.stripe-payment-form__price {
    font-size: var(--text-sm);
    color: var(--shop-card-text-secondary);
}

.stripe-payment-form__card-wrapper {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 16px;
    text-align: left;
}

.stripe-payment-form__card-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--shop-card-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

#stripe-card-element {
    padding: 4px 0;
}

#stripe-card-errors {
    color: var(--status-error, var(--color-red-500));
    font-size: var(--text-xs);
    margin-top: 8px;
    min-height: 20px;
    text-align: left;
}

.stripe-payment-form__submit {
    width: 100%;
    padding: 14px;
    background: var(--color-green-500, var(--status-success));
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 8px;
}

.stripe-payment-form__submit:hover {
    background: var(--color-green-600, var(--pdp-buy-alt-color));
}

.stripe-payment-form__submit:disabled {
    background: rgba(0,0,0,0.05);
    color: var(--text-muted);
    cursor: not-allowed;
}

.stripe-payment-form__cancel {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--shop-card-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
}

.stripe-payment-form__cancel:hover {
    color: var(--text-muted);
}

.stripe-payment-form__success {
    padding: 20px 0;
}

.stripe-payment-form__success-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.stripe-payment-form__success h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--shop-card-text-primary);
    margin: 0 0 8px;
}

.stripe-payment-form__success p {
    font-size: var(--text-sm);
    color: var(--shop-card-text-secondary);
    margin: 0;
}

.stripe-payment-form__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
    font-size: var(--text-xs);
    color: var(--shop-card-text-meta);
}

.stripe-payment-form__secure svg {
    width: 12px;
    height: 12px;
}

/* =============================================================================
   FEATURED CAROUSEL CARD — Image-led premium card for shop hero carousel
   Reference: /home/bohoteam/app/uploads/2026/03/d5c7b032-b966-4404-9bd0-746af7809354.png

   Anatomy:
     ┌──────────────────────────┐
     │                          │  ← Full-bleed hero image (object-fit: cover)
     │                          │
     │                          │
     │      FEATURED            │  ← Eyebrow label (entity type), spaced caps
     │      Pudding Heroes      │  ← Serif title, large
     │      $3.99               │  ← Price in green
     └──────────────────────────┘
   ============================================================================= */

/* ── Container ── */
.feat-card {
    position: relative;
    width: var(--shop-feat-card-width);
    aspect-ratio: var(--shop-feat-card-aspect, 9 / 16);
    border-radius: var(--shop-feat-card-radius, var(--radius-card));
    overflow: hidden;
    flex-shrink: 0;
    scroll-snap-align: start;
    cursor: pointer;
    background: var(--color-gray-800);
    box-shadow: var(--shadow-lg);
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}
.feat-card:hover {
    transform: none;
    box-shadow: var(--shadow-xl);
}

/* ── Hero image (fills entire card) ── */
.feat-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
/* Book covers: show whole cover, don't crop */
.feat-card[data-category="book"] {
    background: var(--surface-app);
}
.feat-card[data-category="book"] .feat-card__image {
    object-fit: contain;
    padding: 16px 12px 60px;
}

/* ── Gradient scrim (bottom → dark for text legibility) ── */
.feat-card__scrim {
    position: absolute;
    inset: 0;
    background: var(--shop-feat-card-gradient);
    z-index: 2;
    pointer-events: none;
}

/* ── Content overlay (pinned to bottom, frosted glass) ── */
.feat-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

/* ── Eyebrow label (entity type: APP, PACK, ITEM, FEATURED, etc.) ── */
.feat-card__eyebrow {
    font-size: var(--shop-feat-eyebrow-size, 11px);
    font-weight: var(--shop-feat-eyebrow-weight, 600);
    text-transform: uppercase;
    letter-spacing: var(--shop-feat-eyebrow-tracking, 0.12em);
    color: var(--text-inverse);
    background: var(--color-black);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    display: inline-block;
    line-height: 1.2;
}

/* Black-highlight badge variant (used for ITEM eyebrow labels) */
.feat-card__eyebrow--highlight {
    background: var(--shop-feat-eyebrow-highlight-bg);
    color: var(--shop-feat-eyebrow-highlight-color);
    padding: var(--shop-feat-eyebrow-highlight-py) var(--shop-feat-eyebrow-highlight-px);
    border-radius: var(--radius-sm);
    display: inline-block;
    line-height: 1.2;
}

/* ── Title ── */
.feat-card__title {
    font-family: var(--shop-feat-title-font, var(--font-serif));
    font-size: var(--shop-feat-title-size, var(--text-sm));
    font-weight: var(--shop-feat-title-weight, 400);
    letter-spacing: var(--shop-feat-title-tracking, -0.03em);
    line-height: var(--shop-feat-title-leading, 1.1);
    color: var(--text-primary);
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Price ── */
.feat-card__price {
    font-size: var(--shop-feat-price-size, var(--text-xs));
    font-weight: var(--shop-feat-price-weight, 500);
    color: var(--shop-feat-price-color, var(--color-green-600));
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}
.feat-card__price-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* ── Fallback when no hero image ── */
.feat-card--no-image {
    background: linear-gradient(160deg, var(--color-gray-800), var(--color-gray-900));
}
.feat-card--no-image .feat-card__scrim {
    background: transparent;
}
.feat-card__fallback-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    z-index: 1;
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 0.12);
}

/* ── Free / Owned badge (replaces price when applicable) ── */
.feat-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 2px 0;
}
.feat-card__badge--free {
    color: var(--color-green-600);
}
.feat-card__badge--owned {
    color: var(--text-muted);
}

/* ── Zine card in feed — tall portrait cover, no overlay title ── */
.feat-card--zine {
    width: 100%;
    aspect-ratio: 2 / 3;
    scroll-snap-align: none;
}
.feat-card--zine .feat-card__image {
    object-position: top center;
}

/* ── Zine info strip (below cover image) ── */
.zine-card__info {
    display: block;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-primary);
    text-decoration: none;
    color: inherit;
}
.zine-card__brand {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.2;
}
.zine-card__topic {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    margin: var(--space-1) 0 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Zine card wrapper — cover image + info strip + DS engagement row */
.feed-card--zine-wrap {
    padding: 0;
    overflow: hidden;
    background: var(--feed-card-bg);
    border: var(--feed-card-border);
    border-radius: var(--feed-card-radius);
    box-shadow: var(--feed-card-shadow);
}
.feed-card--zine-wrap .feat-card--zine {
    display: block;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
}
.feed-card--zine-wrap .feat-card--zine:hover {
    transform: none;
}
.feed-card--zine-wrap .feed-card__actions {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-default);
}
.feed-card--zine-wrap .feed-card__comment-form {
    padding: 0 var(--space-4) var(--space-4);
}

/* Zine staging card — dashed border, owner row with publish button */
.feed-card--zine-staging {
    border: 2px dashed var(--border-subtle, var(--text-muted));
    box-shadow: none;
}
.feed-card__staging-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--surface-secondary, var(--pdp-bg));
}
.feed-card__staging-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.feed-card__staging-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.feed-card__staging-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feed-card__publish-btn {
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .feat-card__content {
        padding: var(--space-3);
    }
    .feat-card__title {
        font-size: var(--text-lg);
    }
}

/* =============================================================================
   SHOP FEAT — Amazon-style Featured Cards (carousel slides, legacy)
   ============================================================================= */
.shop-feat {
    width: 100%;
    min-height: var(--shop-feat-min-height, 320px);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
.shop-feat__head {
    padding: 24px 20px 14px;
    min-height: 80px;
    position: relative;
    z-index: 2;
}
.shop-feat__headline {
    font-size: var(--shop-feat-headline-size, 22px);
    font-weight: var(--font-bold);
    line-height: 1.15;
    margin: 0;
    color: var(--text-inverse);  /* on branded gradient background */
}
.shop-feat__sub {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    margin-top: 6px;
    opacity: 0.8;
}
.shop-feat__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 0 14px 10px;
    flex: 1;
    position: relative;
    z-index: 2;
}
.shop-feat__hero-img {
    grid-column: 1 / -1;
    height: var(--shop-feat-hero-height, 140px);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.shop-feat__hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-feat__thumb {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.shop-feat__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-feat__actions {
    display: flex;
    gap: 8px;
    padding: 0 14px 16px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}
.shop-feat__cta {
    padding: 10px 20px;
    border-radius: var(--shop-feat-cta-radius, 10px);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-inverse);  /* on branded gradient background */
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.15s;
}
.shop-feat__cta:hover {
    background: rgba(0,0,0,0.35);
}
.shop-feat__cta--primary {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
}
.shop-feat__badge {
    position: absolute;
    bottom: 14px;
    right: 14px;
    padding: 4px 12px;
    border-radius: var(--radius-full, 20px);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    backdrop-filter: blur(12px);
    z-index: 3;
}
.shop-feat__badge--price {
    background: rgba(34,197,94,0.15);
    color: var(--color-green-600, var(--pdp-buy-alt-color));
    border: 1px solid rgba(34,197,94,0.25);
}
.shop-feat__badge--owned {
    background: rgba(16,185,129,0.12);
    color: var(--color-green-500, var(--status-success));
    border: 1px solid rgba(16,185,129,0.2);
}
.shop-feat__badge--status {
    background: rgba(16,185,129,0.15);
    color: var(--color-green-500, var(--status-success));
    border: 1px solid rgba(16,185,129,0.2);
}

/* Featured gradient backgrounds per type */
/* intentional: branded gradient backgrounds for featured card types */
.shop-feat--book    { background: linear-gradient(160deg, var(--color-teal-600, var(--color-teal-600)), var(--color-teal-700)); }
.shop-feat--app     { background: linear-gradient(160deg, var(--color-purple-600, var(--color-purple-700)), var(--text-secondary)); }
.shop-feat--event   { background: linear-gradient(160deg, var(--color-pink-700, var(--color-red-600)), var(--zine-text-em)); }
.shop-feat--quest   { background: linear-gradient(160deg, var(--color-yellow-500, var(--color-orange-600)), var(--color-red-600)); }
.shop-feat--effect  { background: linear-gradient(160deg, var(--color-purple-600, var(--color-purple-700)), var(--text-primary)); }
.shop-feat--coiny   { background: linear-gradient(160deg, var(--color-green-600, var(--color-green-600)), var(--filter-pill-bg-active)); }

/* =============================================================================
   SHOP TICKET — Event Ticket Cards (perforated tear line)
   ============================================================================= */
.shop-ticket {
    width: var(--shop-ticket-width, 200px);
    flex-shrink: 0;
    background: var(--shop-card-bg);
    border-radius: var(--shop-card-radius);
    border: var(--shop-card-border);
    overflow: hidden;
    transition: var(--shop-card-transition);
    position: relative;
    cursor: pointer;
    box-shadow: var(--shop-card-shadow);
}
.shop-ticket:hover {
    transform: var(--shop-card-hover-lift);
    box-shadow: var(--shop-card-shadow-hover);
}
.shop-ticket__img {
    height: var(--shop-ticket-img-height, 100px);
    overflow: hidden;
}
.shop-ticket__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-ticket__img--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--shop-ticket-accent-subtle), rgba(131,24,67,0.1));
}
.shop-ticket__img--fallback i {
    width: 36px;
    height: 36px;
    color: var(--shop-ticket-accent);
}
.shop-ticket__top {
    padding: 14px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.shop-ticket__type {
    font-size: var(--shop-ticket-type-size, 10px);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--shop-ticket-accent);
}
.shop-ticket__name {
    font-size: var(--shop-ticket-name-size, 15px);
    font-weight: var(--font-bold);
    color: var(--shop-card-text-primary);
    margin: 0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shop-ticket__venue {
    font-size: var(--shop-app-desc-size, 11px);
    color: var(--shop-card-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.shop-ticket__date {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--shop-ticket-accent);
}
/* Perforated tear line */
.shop-ticket__tear {
    height: 20px;
    position: relative;
    overflow: hidden;
}
.shop-ticket__tear::before {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: 50%;
    border-top: 2px dashed var(--border-subtle);
}
.shop-ticket__tear::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--shop-pdp-bg, var(--shop-pdp-bg));
    box-shadow: 192px 0 0 var(--shop-pdp-bg, var(--shop-pdp-bg));
}
.shop-ticket__bottom {
    padding: 6px 14px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.shop-ticket__price {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-green-600, var(--pdp-buy-alt-color));
    font-weight: var(--font-bold);
}
.shop-ticket__book {
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    background: var(--shop-ticket-accent-subtle);
    color: var(--shop-ticket-accent);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.shop-ticket__book:hover {
    background: rgba(190,24,93,0.18);
}
.shop-ticket__capacity {
    padding: 0 14px;
    margin-bottom: 4px;
}
.shop-ticket__capacity-bar {
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.06);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-bottom: 4px;
}
.shop-ticket__capacity-fill {
    height: 100%;
    background: var(--color-pink-400, var(--color-red-400));
    border-radius: var(--radius-xs);
    transition: width 0.3s;
}
.shop-ticket__capacity-text {
    font-size: var(--text-xs);
    color: var(--shop-card-text-secondary);
}

/* =============================================================================
   APP TICKET — Horizontal embed card for feed posts
   Slate bg left (text) + hero image right, scallop notches on seam
   Used when a user shares an app/event/booking in a post
   ============================================================================= */
.app-ticket {
    display: flex;
    width: 100%;
    max-width: var(--ticket-max-width);
    min-height: var(--ticket-min-height);
    border-radius: var(--ticket-radius);
    overflow: hidden;
    background: var(--ticket-bg);
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
    position: relative;
}
.app-ticket:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
/* ── Left: text content ── */
.app-ticket__body {
    flex: 1;
    min-width: 0;
    padding: var(--ticket-body-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    position: relative;
    z-index: 2;
}
.app-ticket__eyebrow {
    font-size: var(--ticket-eyebrow-size);
    font-weight: var(--ticket-eyebrow-weight);
    text-transform: uppercase;
    letter-spacing: var(--ticket-eyebrow-tracking);
    color: var(--ticket-eyebrow-color);
}
.app-ticket__title {
    font-size: var(--ticket-title-size);
    font-weight: var(--ticket-title-weight);
    color: var(--text-inverse);
    line-height: var(--leading-tight);
    margin: var(--space-1) 0;
}
.app-ticket__sub {
    font-size: var(--text-sm);
    color: var(--ticket-sub-color);
    line-height: var(--leading-snug);
}
.app-ticket__meta {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 13px;
    padding-top: 8px;
}
.app-ticket__status {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--ticket-status-color);
    font-family: var(--font-mono, monospace);
}
.app-ticket__booking {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
    color: var(--color-dark-900);
    background: var(--accent-primary);
}
.app-ticket__booking--waitlisted {
    color: var(--color-dark-900);
    background: var(--highlight-yellow);
}
.app-ticket__booking--checked_in {
    color: var(--color-white);
    background: var(--accent-secondary);
}
.app-ticket__detail {
    font-size: var(--text-xs);
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-ticket__detail::before {
    content: '';
    width: 1px;
    height: 21px;
    background: rgba(255,255,255,0.15);
    flex-shrink: 0;
}
/* ── Right: hero image ── */
.app-ticket__image {
    width: var(--ticket-image-width);
    min-width: var(--ticket-image-width);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.app-ticket__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ── Scallop notches on the seam ── */
.app-ticket__notch {
    position: absolute;
    right: var(--ticket-image-width);
    transform: translateX(50%);
    width: var(--ticket-notch-size);
    height: var(--ticket-notch-size);
    border-radius: var(--radius-full);
    background: var(--ticket-notch-bg);
    z-index: 3;
}
.app-ticket__notch--top { top: -10px; }
.app-ticket__notch--bottom { bottom: -10px; }
/* ── No-image fallback ── */
.app-ticket--no-image .app-ticket__image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
}
.app-ticket--no-image .app-ticket__image svg {
    width: 48px;
    height: 48px;
    color: rgba(255,255,255,0.1);
}

/* ── Creator action card treatment ────────────────────────────────────────── */
[data-shop-creator-action] {
    --shop-create-bg: var(--color-purple-700);
    --shop-create-bg-deep: var(--color-dark-900);
    --shop-create-ink: var(--color-white);
    --shop-create-soft: color-mix(in srgb, var(--shop-create-ink) 72%, transparent);
    --shop-create-line: color-mix(in srgb, var(--shop-create-ink) 18%, transparent);
    --shop-create-chip: color-mix(in srgb, var(--shop-create-ink) 14%, transparent);
    --shop-evolution-deg: 0deg;
    --shop-evolution-bar-size: 0%;
    --shop-evolution-meter-size: var(--size-16);
    --shop-evolution-meter-inset: var(--space-1);
    --shop-evolution-pct-size: var(--text-lg);
    --shop-evolution-complete-size: calc(var(--text-xs) * 0.67);
}

/* ── evolve-meter design token (used by shop-evolution + standalone) ──
   Public surface:
     --evolve-meter-size            outer ring diameter
     --evolve-meter-track-thickness ring stroke width
     --evolve-meter-bg              ink behind the icon (filled portion)
     --evolve-meter-ink             ring + icon colour
     --evolve-meter-track           empty ring colour
     --evolve-meter-chip-bg         percentage chip background
     --evolve-meter-chip-fg         percentage chip text
     --evolve-meter-pulse-duration  flasher pulse cycle (slow by default)
   data-evolution-percent maps to --shop-evolution-deg and rail size below.
   At [data-evolution-percent="100"] the meter inverts: ring becomes the
   ink colour and the core flips to that ink, with the icon drawn in --shop-create-bg.
   ────────────────────────────────────────────────────────────────────────── */
:where([data-shop-creator-action], .evolve-meter-host, .shop-evolution) {
    --evolve-meter-size: var(--shop-evolution-meter-size, var(--size-16));
    --evolve-meter-track-thickness: var(--shop-evolution-meter-inset, var(--space-1));
    --evolve-meter-bg: var(--shop-create-bg, var(--color-purple-700));
    --evolve-meter-ink: var(--shop-create-ink, var(--color-white));
    /* Track must read as a full ring "going around" behind the fill — keep it
       clearly visible on both purple and dark card surfaces. */
    --evolve-meter-track: color-mix(in srgb, var(--shop-create-ink, var(--color-white)) 28%, transparent);
    --evolve-meter-chip-bg: var(--color-white);
    --evolve-meter-chip-fg: var(--color-purple-700);
    --evolve-meter-version-bg: var(--color-white);
    --evolve-meter-version-fg: var(--color-purple-700);
    --evolve-meter-pulse-duration: 3.2s;
}

.shop-evolution {
    --shop-evolution-deg: 0deg;
    --shop-evolution-bar-size: 0%;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: var(--shop-evolution-meter-size) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3);
    border: 1px solid var(--shop-create-line);
    border-radius: var(--radius-lg);
    background: var(--shop-create-chip);
    color: var(--shop-create-ink);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.shop-evolution:hover {
    border-color: color-mix(in srgb, var(--shop-create-ink) 36%, transparent);
}

.shop-evolution:focus-visible {
    outline: 2px solid var(--shop-create-ink);
    outline-offset: 3px;
}

.shop-evolution__meter {
    position: relative;
    width: var(--evolve-meter-size);
    height: var(--evolve-meter-size);
    border-radius: var(--radius-full);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background:
        conic-gradient(
            var(--evolve-meter-ink) 0 var(--shop-evolution-deg),
            var(--evolve-meter-track) var(--shop-evolution-deg) 360deg
        );
    box-shadow: var(--shadow-lg);
}

.shop-evolution__meter::before {
    content: '';
    position: absolute;
    inset: var(--evolve-meter-track-thickness);
    border-radius: var(--radius-full);
    background: var(--evolve-meter-bg);
}

.shop-evolution__pct,
.shop-evolution__complete {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    color: var(--shop-create-ink);
    line-height: 1;
    letter-spacing: 0;
}

.shop-evolution__pct {
    font-size: var(--shop-evolution-pct-size);
    font-weight: 900;
}

.shop-evolution__complete {
    margin-top: var(--space-1);
    font-size: var(--shop-evolution-complete-size);
    font-weight: 800;
    text-transform: uppercase;
    opacity: 0.82;
}

.shop-evolution__icon {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    height: auto;
    font-size: calc(var(--evolve-meter-size) * 0.5);
    color: var(--evolve-meter-ink);
    line-height: 1;
}

/* Percentage chip — orbits the ring at the end of the progress arc.
   Geometry uses CSS trig: at angle θ (0deg = 12 o'clock, clockwise) the
   chip's centre lands at (sin θ · r, -cos θ · r) from the meter centre.
   The angle is read directly from --shop-evolution-deg, which is set on
   .shop-evolution per data-evolution-percent. */
.shop-evolution__chip {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    min-width: calc(var(--evolve-meter-size) * 0.42);
    height: calc(var(--evolve-meter-size) * 0.42);
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--evolve-meter-chip-bg);
    color: var(--evolve-meter-chip-fg);
    font-family: var(--font-body);
    font-size: calc(var(--evolve-meter-size) * 0.22);
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
    --_evolve-chip-r: calc(var(--evolve-meter-size) / 2);
    --_evolve-chip-deg: var(--shop-evolution-deg, 0deg);
    transform:
        translate(-50%, -50%)
        translate(
            calc(sin(var(--_evolve-chip-deg)) * var(--_evolve-chip-r)),
            calc(-1 * cos(var(--_evolve-chip-deg)) * var(--_evolve-chip-r))
        );
    transition: transform var(--dur-base, 240ms) var(--ease-out, ease-out);
}

.shop-evolution__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.shop-evolution__topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.shop-evolution__label,
.shop-evolution__version {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0;
}

.shop-evolution__label {
    flex: 1 1 var(--size-20);
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.15;
}

.shop-evolution__version {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    background: var(--evolve-meter-version-bg);
    color: var(--evolve-meter-version-fg);
    border: 1px solid var(--evolve-meter-version-bg);
}

.shop-evolution__headline {
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.1;
    color: var(--shop-create-ink);
}

.shop-evolution__state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    width: max-content;
    max-width: 100%;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    background: var(--shop-create-chip);
    border: 1px solid var(--shop-create-line);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    color: var(--shop-create-ink);
}

.shop-evolution__state-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--shop-create-ink);
    box-shadow: 0 0 var(--space-2) var(--shop-create-soft);
    animation: shop-evolution-dot-pulse var(--evolve-meter-pulse-duration, 3.2s) var(--ease-default) infinite;
}

.shop-evolution__message,
.shop-evolution__detail {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.35;
    color: var(--shop-create-ink);
    opacity: 0.8;
}

.shop-evolution__detail {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-evolution__rail {
    position: relative;
    height: var(--space-1);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--shop-create-line);
}

.shop-evolution__rail-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--shop-evolution-bar-size);
    border-radius: inherit;
    overflow: hidden;
    background: var(--shop-create-ink);
}

.shop-evolution__rail-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--shop-create-soft),
        transparent
    );
    transform: translateX(-100%);
    /* Sweep matches the slow status-dot pulse — never the 300ms UI duration,
       which reads as frantic blinking. */
    animation: shop-evolution-rail-sweep var(--evolve-meter-pulse-duration, 3.2s) var(--ease-default) infinite;
}

@keyframes shop-evolution-dot-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.78);
    }
}

@keyframes shop-evolution-rail-sweep {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-evolution__state-dot,
    .shop-evolution__rail-fill::after {
        animation: none;
    }
}

.shop-evolution[data-evolution-percent="0"] { --shop-evolution-deg: 0deg; --shop-evolution-bar-size: 0%; }
.shop-evolution[data-evolution-percent="1"] { --shop-evolution-deg: 3.6deg; --shop-evolution-bar-size: 1%; }
.shop-evolution[data-evolution-percent="2"] { --shop-evolution-deg: 7.2deg; --shop-evolution-bar-size: 2%; }
.shop-evolution[data-evolution-percent="3"] { --shop-evolution-deg: 10.8deg; --shop-evolution-bar-size: 3%; }
.shop-evolution[data-evolution-percent="4"] { --shop-evolution-deg: 14.4deg; --shop-evolution-bar-size: 4%; }
.shop-evolution[data-evolution-percent="5"] { --shop-evolution-deg: 18deg; --shop-evolution-bar-size: 5%; }
.shop-evolution[data-evolution-percent="6"] { --shop-evolution-deg: 21.6deg; --shop-evolution-bar-size: 6%; }
.shop-evolution[data-evolution-percent="7"] { --shop-evolution-deg: 25.2deg; --shop-evolution-bar-size: 7%; }
.shop-evolution[data-evolution-percent="8"] { --shop-evolution-deg: 28.8deg; --shop-evolution-bar-size: 8%; }
.shop-evolution[data-evolution-percent="9"] { --shop-evolution-deg: 32.4deg; --shop-evolution-bar-size: 9%; }
.shop-evolution[data-evolution-percent="10"] { --shop-evolution-deg: 36deg; --shop-evolution-bar-size: 10%; }
.shop-evolution[data-evolution-percent="11"] { --shop-evolution-deg: 39.6deg; --shop-evolution-bar-size: 11%; }
.shop-evolution[data-evolution-percent="12"] { --shop-evolution-deg: 43.2deg; --shop-evolution-bar-size: 12%; }
.shop-evolution[data-evolution-percent="13"] { --shop-evolution-deg: 46.8deg; --shop-evolution-bar-size: 13%; }
.shop-evolution[data-evolution-percent="14"] { --shop-evolution-deg: 50.4deg; --shop-evolution-bar-size: 14%; }
.shop-evolution[data-evolution-percent="15"] { --shop-evolution-deg: 54deg; --shop-evolution-bar-size: 15%; }
.shop-evolution[data-evolution-percent="16"] { --shop-evolution-deg: 57.6deg; --shop-evolution-bar-size: 16%; }
.shop-evolution[data-evolution-percent="17"] { --shop-evolution-deg: 61.2deg; --shop-evolution-bar-size: 17%; }
.shop-evolution[data-evolution-percent="18"] { --shop-evolution-deg: 64.8deg; --shop-evolution-bar-size: 18%; }
.shop-evolution[data-evolution-percent="19"] { --shop-evolution-deg: 68.4deg; --shop-evolution-bar-size: 19%; }
.shop-evolution[data-evolution-percent="20"] { --shop-evolution-deg: 72deg; --shop-evolution-bar-size: 20%; }
.shop-evolution[data-evolution-percent="21"] { --shop-evolution-deg: 75.6deg; --shop-evolution-bar-size: 21%; }
.shop-evolution[data-evolution-percent="22"] { --shop-evolution-deg: 79.2deg; --shop-evolution-bar-size: 22%; }
.shop-evolution[data-evolution-percent="23"] { --shop-evolution-deg: 82.8deg; --shop-evolution-bar-size: 23%; }
.shop-evolution[data-evolution-percent="24"] { --shop-evolution-deg: 86.4deg; --shop-evolution-bar-size: 24%; }
.shop-evolution[data-evolution-percent="25"] { --shop-evolution-deg: 90deg; --shop-evolution-bar-size: 25%; }
.shop-evolution[data-evolution-percent="26"] { --shop-evolution-deg: 93.6deg; --shop-evolution-bar-size: 26%; }
.shop-evolution[data-evolution-percent="27"] { --shop-evolution-deg: 97.2deg; --shop-evolution-bar-size: 27%; }
.shop-evolution[data-evolution-percent="28"] { --shop-evolution-deg: 100.8deg; --shop-evolution-bar-size: 28%; }
.shop-evolution[data-evolution-percent="29"] { --shop-evolution-deg: 104.4deg; --shop-evolution-bar-size: 29%; }
.shop-evolution[data-evolution-percent="30"] { --shop-evolution-deg: 108deg; --shop-evolution-bar-size: 30%; }
.shop-evolution[data-evolution-percent="31"] { --shop-evolution-deg: 111.6deg; --shop-evolution-bar-size: 31%; }
.shop-evolution[data-evolution-percent="32"] { --shop-evolution-deg: 115.2deg; --shop-evolution-bar-size: 32%; }
.shop-evolution[data-evolution-percent="33"] { --shop-evolution-deg: 118.8deg; --shop-evolution-bar-size: 33%; }
.shop-evolution[data-evolution-percent="34"] { --shop-evolution-deg: 122.4deg; --shop-evolution-bar-size: 34%; }
.shop-evolution[data-evolution-percent="35"] { --shop-evolution-deg: 126deg; --shop-evolution-bar-size: 35%; }
.shop-evolution[data-evolution-percent="36"] { --shop-evolution-deg: 129.6deg; --shop-evolution-bar-size: 36%; }
.shop-evolution[data-evolution-percent="37"] { --shop-evolution-deg: 133.2deg; --shop-evolution-bar-size: 37%; }
.shop-evolution[data-evolution-percent="38"] { --shop-evolution-deg: 136.8deg; --shop-evolution-bar-size: 38%; }
.shop-evolution[data-evolution-percent="39"] { --shop-evolution-deg: 140.4deg; --shop-evolution-bar-size: 39%; }
.shop-evolution[data-evolution-percent="40"] { --shop-evolution-deg: 144deg; --shop-evolution-bar-size: 40%; }
.shop-evolution[data-evolution-percent="41"] { --shop-evolution-deg: 147.6deg; --shop-evolution-bar-size: 41%; }
.shop-evolution[data-evolution-percent="42"] { --shop-evolution-deg: 151.2deg; --shop-evolution-bar-size: 42%; }
.shop-evolution[data-evolution-percent="43"] { --shop-evolution-deg: 154.8deg; --shop-evolution-bar-size: 43%; }
.shop-evolution[data-evolution-percent="44"] { --shop-evolution-deg: 158.4deg; --shop-evolution-bar-size: 44%; }
.shop-evolution[data-evolution-percent="45"] { --shop-evolution-deg: 162deg; --shop-evolution-bar-size: 45%; }
.shop-evolution[data-evolution-percent="46"] { --shop-evolution-deg: 165.6deg; --shop-evolution-bar-size: 46%; }
.shop-evolution[data-evolution-percent="47"] { --shop-evolution-deg: 169.2deg; --shop-evolution-bar-size: 47%; }
.shop-evolution[data-evolution-percent="48"] { --shop-evolution-deg: 172.8deg; --shop-evolution-bar-size: 48%; }
.shop-evolution[data-evolution-percent="49"] { --shop-evolution-deg: 176.4deg; --shop-evolution-bar-size: 49%; }
.shop-evolution[data-evolution-percent="50"] { --shop-evolution-deg: 180deg; --shop-evolution-bar-size: 50%; }
.shop-evolution[data-evolution-percent="51"] { --shop-evolution-deg: 183.6deg; --shop-evolution-bar-size: 51%; }
.shop-evolution[data-evolution-percent="52"] { --shop-evolution-deg: 187.2deg; --shop-evolution-bar-size: 52%; }
.shop-evolution[data-evolution-percent="53"] { --shop-evolution-deg: 190.8deg; --shop-evolution-bar-size: 53%; }
.shop-evolution[data-evolution-percent="54"] { --shop-evolution-deg: 194.4deg; --shop-evolution-bar-size: 54%; }
.shop-evolution[data-evolution-percent="55"] { --shop-evolution-deg: 198deg; --shop-evolution-bar-size: 55%; }
.shop-evolution[data-evolution-percent="56"] { --shop-evolution-deg: 201.6deg; --shop-evolution-bar-size: 56%; }
.shop-evolution[data-evolution-percent="57"] { --shop-evolution-deg: 205.2deg; --shop-evolution-bar-size: 57%; }
.shop-evolution[data-evolution-percent="58"] { --shop-evolution-deg: 208.8deg; --shop-evolution-bar-size: 58%; }
.shop-evolution[data-evolution-percent="59"] { --shop-evolution-deg: 212.4deg; --shop-evolution-bar-size: 59%; }
.shop-evolution[data-evolution-percent="60"] { --shop-evolution-deg: 216deg; --shop-evolution-bar-size: 60%; }
.shop-evolution[data-evolution-percent="61"] { --shop-evolution-deg: 219.6deg; --shop-evolution-bar-size: 61%; }
.shop-evolution[data-evolution-percent="62"] { --shop-evolution-deg: 223.2deg; --shop-evolution-bar-size: 62%; }
.shop-evolution[data-evolution-percent="63"] { --shop-evolution-deg: 226.8deg; --shop-evolution-bar-size: 63%; }
.shop-evolution[data-evolution-percent="64"] { --shop-evolution-deg: 230.4deg; --shop-evolution-bar-size: 64%; }
.shop-evolution[data-evolution-percent="65"] { --shop-evolution-deg: 234deg; --shop-evolution-bar-size: 65%; }
.shop-evolution[data-evolution-percent="66"] { --shop-evolution-deg: 237.6deg; --shop-evolution-bar-size: 66%; }
.shop-evolution[data-evolution-percent="67"] { --shop-evolution-deg: 241.2deg; --shop-evolution-bar-size: 67%; }
.shop-evolution[data-evolution-percent="68"] { --shop-evolution-deg: 244.8deg; --shop-evolution-bar-size: 68%; }
.shop-evolution[data-evolution-percent="69"] { --shop-evolution-deg: 248.4deg; --shop-evolution-bar-size: 69%; }
.shop-evolution[data-evolution-percent="70"] { --shop-evolution-deg: 252deg; --shop-evolution-bar-size: 70%; }
.shop-evolution[data-evolution-percent="71"] { --shop-evolution-deg: 255.6deg; --shop-evolution-bar-size: 71%; }
.shop-evolution[data-evolution-percent="72"] { --shop-evolution-deg: 259.2deg; --shop-evolution-bar-size: 72%; }
.shop-evolution[data-evolution-percent="73"] { --shop-evolution-deg: 262.8deg; --shop-evolution-bar-size: 73%; }
.shop-evolution[data-evolution-percent="74"] { --shop-evolution-deg: 266.4deg; --shop-evolution-bar-size: 74%; }
.shop-evolution[data-evolution-percent="75"] { --shop-evolution-deg: 270deg; --shop-evolution-bar-size: 75%; }
.shop-evolution[data-evolution-percent="76"] { --shop-evolution-deg: 273.6deg; --shop-evolution-bar-size: 76%; }
.shop-evolution[data-evolution-percent="77"] { --shop-evolution-deg: 277.2deg; --shop-evolution-bar-size: 77%; }
.shop-evolution[data-evolution-percent="78"] { --shop-evolution-deg: 280.8deg; --shop-evolution-bar-size: 78%; }
.shop-evolution[data-evolution-percent="79"] { --shop-evolution-deg: 284.4deg; --shop-evolution-bar-size: 79%; }
.shop-evolution[data-evolution-percent="80"] { --shop-evolution-deg: 288deg; --shop-evolution-bar-size: 80%; }
.shop-evolution[data-evolution-percent="81"] { --shop-evolution-deg: 291.6deg; --shop-evolution-bar-size: 81%; }
.shop-evolution[data-evolution-percent="82"] { --shop-evolution-deg: 295.2deg; --shop-evolution-bar-size: 82%; }
.shop-evolution[data-evolution-percent="83"] { --shop-evolution-deg: 298.8deg; --shop-evolution-bar-size: 83%; }
.shop-evolution[data-evolution-percent="84"] { --shop-evolution-deg: 302.4deg; --shop-evolution-bar-size: 84%; }
.shop-evolution[data-evolution-percent="85"] { --shop-evolution-deg: 306deg; --shop-evolution-bar-size: 85%; }
.shop-evolution[data-evolution-percent="86"] { --shop-evolution-deg: 309.6deg; --shop-evolution-bar-size: 86%; }
.shop-evolution[data-evolution-percent="87"] { --shop-evolution-deg: 313.2deg; --shop-evolution-bar-size: 87%; }
.shop-evolution[data-evolution-percent="88"] { --shop-evolution-deg: 316.8deg; --shop-evolution-bar-size: 88%; }
.shop-evolution[data-evolution-percent="89"] { --shop-evolution-deg: 320.4deg; --shop-evolution-bar-size: 89%; }
.shop-evolution[data-evolution-percent="90"] { --shop-evolution-deg: 324deg; --shop-evolution-bar-size: 90%; }
.shop-evolution[data-evolution-percent="91"] { --shop-evolution-deg: 327.6deg; --shop-evolution-bar-size: 91%; }
.shop-evolution[data-evolution-percent="92"] { --shop-evolution-deg: 331.2deg; --shop-evolution-bar-size: 92%; }
.shop-evolution[data-evolution-percent="93"] { --shop-evolution-deg: 334.8deg; --shop-evolution-bar-size: 93%; }
.shop-evolution[data-evolution-percent="94"] { --shop-evolution-deg: 338.4deg; --shop-evolution-bar-size: 94%; }
.shop-evolution[data-evolution-percent="95"] { --shop-evolution-deg: 342deg; --shop-evolution-bar-size: 95%; }
.shop-evolution[data-evolution-percent="96"] { --shop-evolution-deg: 345.6deg; --shop-evolution-bar-size: 96%; }
.shop-evolution[data-evolution-percent="97"] { --shop-evolution-deg: 349.2deg; --shop-evolution-bar-size: 97%; }
.shop-evolution[data-evolution-percent="98"] { --shop-evolution-deg: 352.8deg; --shop-evolution-bar-size: 98%; }
.shop-evolution[data-evolution-percent="99"] { --shop-evolution-deg: 356.4deg; --shop-evolution-bar-size: 99%; }
.shop-evolution[data-evolution-percent="100"] { --shop-evolution-deg: 360deg; --shop-evolution-bar-size: 100%; }

/* ── 100% complete: meter inverts to white with the DNA icon punched out. ── */
.shop-evolution[data-evolution-percent="100"] {
    --evolve-meter-ink: var(--color-white);
    --evolve-meter-bg: var(--color-white);
    --evolve-meter-track: var(--color-white);
    /* Flip the chip so it stays visible on the all-white ring. */
    --evolve-meter-chip-bg: var(--shop-create-bg, var(--color-purple-700));
    --evolve-meter-chip-fg: var(--color-white);
}
.shop-evolution[data-evolution-percent="100"] .shop-evolution__icon {
    color: var(--shop-create-bg, var(--color-purple-700));
}
.shop-evolution[data-evolution-percent="100"] .shop-evolution__state-dot {
    animation: none;
}
.shop-evolution[data-evolution-percent="100"] .shop-evolution__meter {
    box-shadow: 0 6px 22px rgba(255, 255, 255, 0.32);
}

.shop-evolution-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal, 1000) + 30);
    display: grid;
    place-items: center;
    padding: var(--space-5);
}

.shop-evolution-modal[hidden] {
    display: none;
}

.shop-evolution-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.shop-evolution-modal__panel {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    border-radius: 18px;
    background: #fff;
    color: var(--text-primary, #0f172a);
    padding: var(--space-6);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.shop-evolution-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.shop-evolution-modal__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
    margin-bottom: var(--space-3);
}

.shop-evolution-modal__title {
    margin: 0 0 var(--space-4);
    padding-right: var(--space-10);
    font-family: var(--font-body);
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--text-primary, #0f172a);
}

.shop-evolution-modal__count,
.shop-evolution-modal__access,
.shop-evolution-modal__help,
.shop-evolution-modal__detail {
    margin: 0;
    color: var(--text-secondary, #475569);
    font-size: 15px;
    line-height: 1.55;
}

.shop-evolution-modal__count {
    color: var(--text-primary, #0f172a);
    font-weight: 700;
}

.shop-evolution-modal__access {
    margin-top: var(--space-3);
}

.shop-evolution-modal__help {
    margin-top: var(--space-2);
    color: var(--color-green-700, #047857);
    font-weight: 700;
}

.shop-evolution-modal__detail {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.1));
}

.shop-create-mark {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--shop-create-ink);
    pointer-events: none;
    text-align: center;
}

.shop-create-mark__logo {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    width: var(--size-20);
    height: var(--size-20);
    object-fit: contain;
}

.app-ticket__image .shop-create-mark__logo {
    position: static;
    inset: auto;
    object-fit: contain;
}

.shop-create-mark__glyph {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--size-6) + var(--space-1));
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--shop-create-line);
    background: var(--shop-create-chip);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    color: var(--shop-create-ink);
    box-shadow: var(--shadow-lg);
}

.shop-long-card[data-shop-creator-action] {
    align-self: flex-start;
    background: var(--shop-create-bg);
    color: var(--shop-create-ink);
}

.shop-long-card[data-shop-creator-action] .shop-long-card__hero,
.shop-long-card[data-shop-creator-action] .shop-long-card__body {
    background: var(--shop-create-bg);
    color: var(--shop-create-ink);
}

.shop-long-card[data-shop-creator-action] .shop-long-card__hero {
    aspect-ratio: var(--rail-creator-hero-ratio, 1 / 1);
    background-image: none;
    background: var(--shop-create-bg);
}

.shop-long-card[data-shop-creator-action] .shop-long-card__body {
    gap: var(--space-3);
    padding: var(--space-5);
}

.shop-long-card[data-shop-creator-action] .shop-long-card__rule {
    display: none;
}

.shop-long-card[data-shop-creator-action] .shop-long-card__foot {
    margin-top: var(--space-1);
}

.shop-long-card[data-shop-creator-action] .shop-long-card__meta {
    display: none;
}

.shop-long-card[data-shop-creator-action="event"] .shop-long-card__tag,
.shop-long-card[data-shop-creator-action="quest"] .shop-long-card__tag,
.shop-zine-card[data-shop-creator-action="zine"] .shop-zine-card__tag {
    display: none;
}

.shop-rail--apps .shop-long-card[data-shop-creator-action="quest"] .shop-create-mark {
    justify-content: flex-end;
    padding-bottom: var(--space-5);
}

.shop-long-card[data-shop-creator-action] .shop-create-mark {
    justify-content: center;
}

.shop-long-card[data-shop-creator-action] .shop-create-mark__logo {
    width: var(--size-16);
    height: var(--size-16);
}

.shop-long-card[data-shop-creator-action] .shop-evolution {
    --shop-evolution-meter-size: var(--size-12);
    --shop-evolution-pct-size: var(--text-base);
    --shop-evolution-complete-size: calc(var(--text-xs) * 0.6);
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    gap: var(--space-2);
    padding: var(--space-2);
}

.shop-long-card[data-shop-creator-action] .shop-evolution__detail {
    -webkit-line-clamp: 3;
}

.shop-long-card[data-shop-creator-action] .shop-long-card__tag,
.shop-zine-card[data-shop-creator-action] .shop-zine-card__tag,
.app-ticket[data-shop-creator-action] .app-ticket__eyebrow {
    background: var(--shop-create-chip);
    border: 1px solid var(--shop-create-line);
    color: var(--shop-create-ink);
}

.shop-long-card[data-shop-creator-action] .shop-long-card__name,
.shop-long-card[data-shop-creator-action] .shop-long-card__desc,
.shop-long-card[data-shop-creator-action] .shop-long-card__meta {
    color: var(--shop-create-ink);
}

.shop-long-card[data-shop-creator-action] .shop-long-card__desc,
.shop-long-card[data-shop-creator-action] .shop-long-card__meta {
    opacity: 0.78;
}

.shop-long-card[data-shop-creator-action] .shop-long-card__rule {
    border-color: var(--shop-create-line);
}

.shop-long-card[data-shop-creator-action] .shop-long-card__cta,
.shop-long-card[data-shop-creator-action]:hover .shop-long-card__cta {
    flex: 1 1 100%;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    background: var(--shop-create-ink);
    color: var(--shop-create-bg-deep);
    font-size: var(--text-sm);
    font-weight: 700;
}

.app-ticket[data-shop-creator-action] {
    background: var(--shop-create-bg);
    color: var(--shop-create-ink);
    border: 1px solid var(--shop-create-line);
}

.app-ticket[data-shop-creator-action] .app-ticket__body,
.app-ticket[data-shop-creator-action] .app-ticket__image {
    background: var(--shop-create-bg);
}

.app-ticket[data-shop-creator-action] .app-ticket__image {
    min-height: var(--ticket-min-height);
    background-image: linear-gradient(180deg, var(--shop-create-bg) 0%, var(--shop-create-bg-deep) 100%);
}

.app-ticket[data-shop-creator-action] .app-ticket__title,
.app-ticket[data-shop-creator-action] .app-ticket__sub,
.app-ticket[data-shop-creator-action] .app-ticket__status,
.app-ticket[data-shop-creator-action] .app-ticket__detail {
    color: var(--shop-create-ink);
}

.app-ticket[data-shop-creator-action] .app-ticket__sub,
.app-ticket[data-shop-creator-action] .app-ticket__detail {
    opacity: 0.78;
}

.app-ticket[data-shop-creator-action] .app-ticket__notch {
    background: var(--shop-create-bg);
}

.app-ticket[data-shop-creator-action] .shop-create-mark__logo {
    width: var(--size-14);
    height: var(--size-14);
}

.app-ticket[data-shop-creator-action] .shop-create-mark__glyph {
    font-size: var(--text-xs);
}

.app-ticket[data-shop-creator-action] .shop-evolution {
    --shop-evolution-meter-size: var(--size-14);
    --shop-evolution-pct-size: var(--text-sm);
    --shop-evolution-complete-size: calc(var(--text-xs) * 0.6);
    gap: var(--space-2);
    padding: var(--space-2);
    margin-top: var(--space-1);
}

/* Creator ticket stays ticket-sized: long evolution copy lives in the dialog. */
.app-ticket[data-shop-creator-action] .shop-evolution__message,
.app-ticket[data-shop-creator-action] .shop-evolution__detail {
    display: none;
}

.app-ticket[data-shop-creator-action] .shop-evolution {
    --shop-evolution-meter-size: var(--size-12);
    --shop-evolution-pct-size: var(--text-base);
}

.shop-zine-card[data-shop-creator-action] {
    background: var(--shop-create-bg);
    background-image: none;
    color: var(--shop-create-ink);
    border: 1px solid var(--shop-create-line);
}

.shop-zine-card[data-shop-creator-action]::before {
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--shop-create-bg-deep) 90%, transparent) 100%
    );
}

.shop-zine-card[data-shop-creator-action] .shop-zine-card__cover {
    display: none;
}

.shop-zine-card[data-shop-creator-action] .shop-zine-card__house {
    background: var(--shop-create-chip);
    border-color: var(--shop-create-line);
}

.shop-zine-card[data-shop-creator-action] .shop-create-mark {
    top: var(--size-12);
    bottom: auto;
    height: var(--size-24, 96px);
    gap: var(--space-2);
    justify-content: flex-start;
    z-index: 2;
}

/* Keep the creator card body short so it never climbs into the ZINE mark:
   the meter + headline tell the story; long copy lives in the dialog. */
.shop-zine-card[data-shop-creator-action] .shop-evolution__message,
.shop-zine-card[data-shop-creator-action] .shop-evolution__detail {
    display: none;
}

.shop-zine-card[data-shop-creator-action] .shop-evolution {
    --shop-evolution-meter-size: var(--size-12);
    --shop-evolution-pct-size: var(--text-base);
}

.shop-zine-card[data-shop-creator-action] .shop-create-mark__logo {
    width: var(--size-14);
    height: var(--size-14);
}

.shop-zine-card[data-shop-creator-action] .shop-zine-card__title,
.shop-zine-card[data-shop-creator-action] .shop-zine-card__desc,
.shop-zine-card[data-shop-creator-action] .shop-zine-card__issue {
    color: var(--shop-create-ink);
}

.shop-zine-card[data-shop-creator-action] .shop-zine-card__desc,
.shop-zine-card[data-shop-creator-action] .shop-zine-card__issue {
    opacity: 0.78;
}

.shop-zine-card[data-shop-creator-action] .shop-zine-card__pill,
.shop-zine-card[data-shop-creator-action] .shop-zine-card__pill--owned {
    background: var(--shop-create-ink);
    color: var(--shop-create-bg-deep);
}

.shop-zine-card[data-shop-creator-action] .shop-evolution {
    --shop-evolution-meter-size: var(--size-14);
    --shop-evolution-pct-size: var(--text-sm);
    --shop-evolution-complete-size: calc(var(--text-xs) * 0.6);
    padding: var(--space-2);
}

.shop-zine-card[data-shop-creator-action] .shop-evolution__detail {
    -webkit-line-clamp: 2;
}

.shop-quest-b2-wrap[data-shop-creator-action] .quest-card-v2 {
    background: var(--shop-create-bg);
    border-color: var(--shop-create-line);
    color: var(--shop-create-ink);
}

.shop-quest-b2-wrap[data-shop-creator-action] {
    background: var(--shop-create-bg);
    border-radius: var(--radius-card);
}

.shop-quest-b2-wrap[data-shop-creator-action] .quest-card-v2__body {
    background: var(--shop-create-bg);
}

.shop-quest-b2-wrap[data-shop-creator-action] .quest-card-v2__creator-name,
.shop-quest-b2-wrap[data-shop-creator-action] .quest-card-v2__title,
.shop-quest-b2-wrap[data-shop-creator-action] .quest-card-v2__details,
.shop-quest-b2-wrap[data-shop-creator-action] .quest-card-v2__meta,
.shop-quest-b2-wrap[data-shop-creator-action] .quest-card-v2__description {
    color: var(--shop-create-ink);
}

.shop-quest-b2-wrap[data-shop-creator-action] .quest-card-v2__details,
.shop-quest-b2-wrap[data-shop-creator-action] .quest-card-v2__description {
    opacity: 0.78;
}

.shop-quest-b2-wrap[data-shop-creator-action] .quest-card-v2__hero-image {
    position: relative;
    min-height: calc(var(--size-32) + var(--space-5));
    background-image: linear-gradient(180deg, var(--shop-create-bg) 0%, var(--shop-create-bg-deep) 100%);
    border-top: 0;
}

.shop-quest-b2-wrap[data-shop-creator-action] .shop-evolution {
    --shop-evolution-meter-size: var(--size-14);
    --shop-evolution-pct-size: var(--text-sm);
    --shop-evolution-complete-size: calc(var(--text-xs) * 0.6);
    padding: var(--space-2);
}

.shop-quest-b2-wrap[data-shop-creator-action] .shop-evolution__detail {
    -webkit-line-clamp: 2;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .app-ticket__title { font-size: var(--ticket-title-size-mobile); }
    .app-ticket__body { padding: var(--ticket-body-padding-mobile); }
    .app-ticket__image { width: var(--ticket-image-width-mobile); min-width: var(--ticket-image-width-mobile); }
    .app-ticket__notch { right: var(--ticket-image-width-mobile); }
}

/* =============================================================================
   FEATURED CARD — Ticket Variant
   Adds physical-ticket styling (cutout notches + perforated dot border) to the
   full-bleed featured card. The hero image stays; ticket elements overlay.
   ============================================================================= */
.feat-card--ticket {
    position: relative;
    overflow: visible;
}
/* Circular cutout notches on left & right edges */
.feat-card--ticket .feat-card__notch {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);
}
.feat-card--ticket .feat-card__notch--left  { left: -12px; }
.feat-card--ticket .feat-card__notch--right { right: -12px; }
/* Perforated dot border runs vertically between notches */
.feat-card--ticket .feat-card__perf {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    pointer-events: none;
}
.feat-card--ticket .feat-card__perf--left {
    left: 0;
    border-left: 3px dotted rgba(255,255,255,0.25);
}
.feat-card--ticket .feat-card__perf--right {
    right: 0;
    border-right: 3px dotted rgba(255,255,255,0.25);
}
/* Horizontal perforated line across the card (tear line) */
.feat-card--ticket .feat-card__tear {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    border-top: 2px dashed rgba(255,255,255,0.2);
    z-index: 4;
    pointer-events: none;
}
/* Override border-radius to clip the image within a ticket shape */
.feat-card--ticket {
    border-radius: var(--radius-card);
    overflow: hidden;
}
/* On dark preview backgrounds, notch color matches dark bg */
.ds-preview-box__body--dark .feat-card--ticket .feat-card__notch {
    background: var(--surface-app, var(--pdp-text-primary));
}

/* =============================================================================
   SHOP APP — Hero Image App Cards
   Full-bleed background image, dark gradient overlay, white text, dark CTA
   ============================================================================= */
.shop-app {
    width: var(--shop-card-app-min-w);
    min-width: var(--shop-card-app-min-w);
    max-width: var(--shop-card-app-min-w);
    aspect-ratio: var(--shop-feat-card-aspect, 9 / 16);
    flex-shrink: 0;
    background-color: var(--accent-dark, var(--text-primary));  /* intentional: dark fallback behind hero image */
    background-size: cover;
    background-position: center;
    border-radius: var(--shop-card-radius);
    border: none;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0;
    position: relative;
    overflow: hidden;
    transition: var(--shop-card-transition);
    cursor: pointer;
    box-shadow: var(--shop-card-shadow);
}
/* Full-bleed hero image (items rail books/goods) — never renders at the
   image's intrinsic size; it fills the card behind the gradient overlay. */
.shop-app__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Gradient overlay — bottom-only, starts at text area, no darkening on image */
.shop-app::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
    pointer-events: none;
}
.shop-app:hover {
    transform: var(--shop-card-hover-lift);
    box-shadow: var(--shop-card-shadow-hover);
}
/* All content sits above the overlay */
.shop-app__badge,
.shop-app__xp,
.shop-app__icon,
.shop-app__name,
.shop-app__desc,
.shop-app__house,
.shop-app__cta {
    position: relative;
    z-index: 2;
}
/* ── Top row: house header (left) + App badge (right) ── */
.shop-app__header {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: auto;
}
/* House pill — frosted capsule with icon + name */
.shop-app__house-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 3px 10px 3px 3px;
    border-radius: var(--radius-full, 9999px);
}
.shop-app__house-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-app__house-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-app__house {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: rgba(255,255,255,0.9);
    line-height: 1;
    white-space: nowrap;
}
/* Type badge — frosted glass pill, pushed right inside header */
.shop-app__badge {
    margin-left: auto;
    font-size: var(--shop-app-badge-size, 10px);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-inverse);  /* on dark image overlay */
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 3px 10px;
    border-radius: var(--shop-app-badge-radius, var(--radius-full));
}
/* Icon — hidden, app icon is full-bleed background */
.shop-app__icon {
    display: none;
}
/* ── Bottom content area — anchored to bottom ── */
/* Name — large bold white, left-aligned */
.shop-app__name {
    font-size: var(--shop-app-name-size);
    font-weight: var(--font-extrabold, 800);
    color: var(--text-inverse);  /* on dark image overlay */
    line-height: 1.12;
    margin-bottom: 4px;
}
/* Description — short tagline */
.shop-app__desc {
    font-size: var(--shop-app-desc-size, 13px);
    color: rgba(255,255,255,0.65);
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* XP badge — frosted */
.shop-app__xp {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.12);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    position: relative;
    z-index: 2;
}
/* CTA button — frosted pill */
.shop-app__cta {
    width: 100%;
    padding: 10px;
    border-radius: var(--shop-app-cta-radius, var(--radius-full));
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-inverse);  /* on dark image overlay */
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 12px;
    transition: background 0.15s;
}
.shop-app__cta:hover {
    background: rgba(0,0,0,0.7);
}
/* Owned — frosted glass */
.shop-app__cta--owned {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.15);
}
.shop-app__cta--owned:hover {
    background: rgba(255,255,255,0.22);
}
/* Buy — frosted glass with Coiny icon */
.shop-app__cta--buy {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

/* The inline coiny SVG has no intrinsic size — pin it to icon scale. */
.shop-app__coiny-icon {
    width: var(--size-4);
    height: var(--size-4);
    flex-shrink: 0;
}
.shop-app__cta--buy:hover {
    background: rgba(255,255,255,0.2);
}

/* =============================================================================
   PRODUCT SHOT VARIANT — light bottom, dark text, no dark gradient
   ============================================================================= */
.shop-app--product-shot::before {
    background: none;
}
.shop-app--product-shot .shop-app__name,
.shop-app--product-shot .shop-app__desc,
.shop-app--product-shot .shop-app__cta,
.shop-app--product-shot .shop-app__cta--buy,
.shop-app--product-shot .shop-app__xp {
    background: rgba(243, 242, 247, 0.85);
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
.shop-app--product-shot .shop-app__name {
    padding-top: var(--space-3);
    border-top: 1px solid rgba(0,0,0,0.08);
}
.shop-app--product-shot .shop-app__cta {
    margin-bottom: calc(-1 * var(--space-4));
    padding-bottom: var(--space-4);
}
.shop-app--product-shot .shop-app__name {
    color: var(--text-primary);
    text-shadow: none;
}
.shop-app--product-shot .shop-app__desc {
    color: var(--text-secondary);
}
.shop-app--product-shot .shop-app__house {
    color: rgba(0,0,0,0.7);
}
.shop-app--product-shot .shop-app__house-pill {
    background: rgba(0,0,0,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.shop-app--product-shot .shop-app__badge {
    color: var(--text-primary);
    background: rgba(0,0,0,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.shop-app--product-shot .shop-app__xp {
    color: var(--text-secondary);
    background: rgba(0,0,0,0.06);
}
.shop-app--product-shot .shop-app__cta {
    background: rgba(0,0,0,0.85);
    color: var(--text-inverse);
    border-color: transparent;
}
.shop-app--product-shot .shop-app__cta:hover {
    background: rgba(0,0,0,0.95);
}

/* ── Zine shop card — 2:3 portrait to match generated cover art ── */
.shop-app--zine {
    aspect-ratio: 2 / 3;
}

/* =============================================================================
   SHOP QUEST — Square Badge Quest Cards
   ============================================================================= */
.shop-quest {
    width: var(--shop-quest-width, 160px);
    height: var(--shop-quest-height, 190px);
    flex-shrink: 0;
    background: var(--shop-card-bg);
    border-radius: var(--shop-card-radius);
    border: var(--shop-card-border);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-2);
    position: relative;
    transition: var(--shop-card-transition);
    cursor: pointer;
    box-shadow: var(--shop-card-shadow);
}
.shop-quest:hover {
    transform: var(--shop-card-hover-lift);
    box-shadow: var(--shop-card-shadow-hover);
}
.shop-quest__reward {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--shop-quest-accent);
    background: var(--shop-quest-accent-subtle);
    padding: 3px 7px;
    border-radius: var(--radius-sm);
}
.shop-quest__icon {
    width: var(--shop-quest-icon-size);
    height: var(--shop-quest-icon-size);
    border-radius: var(--shop-quest-icon-radius);
    overflow: hidden;
    background: linear-gradient(160deg, rgba(34,197,94,0.12), rgba(6,182,212,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-quest__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-quest__icon i {
    width: 28px;
    height: 28px;
    color: var(--color-green-500);
}
.shop-quest__name {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--shop-card-text-primary);
    line-height: var(--leading-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shop-quest__status {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--status-success);
}
.shop-quest__accept {
    width: 100%;
    padding: 7px;
    border-radius: var(--radius-sm);
    background: var(--shop-quest-accent-subtle);
    color: var(--shop-quest-accent);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto;
    transition: background var(--duration-fast);
}
.shop-quest__accept:hover {
    background: rgba(217,119,6,0.18);
}
.shop-quest__meta {
    font-size: var(--text-xs);
    color: var(--shop-card-text-secondary);
}

/* ── Shop Quest B2 wrapper (quest_card macro inside shop scroll) ── */
.shop-quest-b2-wrap {
    position: relative;
    display: block;
    flex-shrink: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.shop-quest-b2-wrap .quest-card-v2 {
    width: 260px;
    pointer-events: none;
}

.shop-quest-b2-wrap .shop-admin-kebab {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: var(--z-dropdown, 5);
}

/* Quest grid overrides */
.nf-row__scroll--quests {
    gap: var(--shop-grid-gap);
}

.nf-row__scroll--quests.ds-shop-grid .shop-quest-b2-wrap {
    width: 100%;
}

.nf-row__scroll--quests.ds-shop-grid .shop-quest-b2-wrap .quest-card-v2 {
    width: 100%;
    pointer-events: none;
}

@media (max-width: 639px) {
    .shop-quest-b2-wrap .quest-card-v2 {
        width: 100%;
    }
}

/* =============================================================================
   SHOP PDP — Product Detail Page Modal
   ============================================================================= */
.shop-pdp-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-critical-above);
    display: none;
    background: var(--shop-pdp-bg);
    overflow-y: auto;
    animation: shopPdpSlideIn 0.3s ease;
}
.shop-pdp-overlay.active {
    display: block;
}
@keyframes shopPdpSlideIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.shop-pdp__close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: var(--shop-card-border);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    color: var(--text-secondary, var(--color-gray-700));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10002;
    transition: all 0.15s;
    box-shadow: var(--shop-card-shadow);
}
.shop-pdp__close:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: var(--status-error, var(--color-red-500));
}
.shop-pdp__hero {
    height: var(--shop-pdp-hero-height, 280px);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(13,148,136,0.12), rgba(6,182,212,0.08));
}
.shop-pdp__hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--shop-pdp-bg, var(--shop-pdp-bg)), transparent);
    z-index: 2;
}
.shop-pdp__hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.shop-pdp__hero-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(13,148,136,0.9);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    z-index: 3;
}
.shop-pdp__body {
    padding: 0 24px 40px;
    max-width: var(--shop-pdp-body-max-width, 520px);
    margin: -40px auto 0;
    position: relative;
    z-index: 3;
}
.shop-pdp__category {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-primary, var(--color-teal-600));
    margin-bottom: 6px;
}
.shop-pdp__title {
    font-size: var(--shop-pdp-title-size, 24px);
    font-weight: var(--font-bold);
    color: var(--shop-card-text-primary);
    margin: 0 0 12px;
    line-height: 1.2;
}
.shop-pdp__desc {
    font-size: var(--text-sm);
    color: var(--shop-card-text-secondary);
    line-height: 1.6;
    margin: 0 0 20px;
}
.shop-pdp__pricing {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--shop-card-bg);
    border-radius: var(--radius-md);
    border: var(--shop-card-border);
    box-shadow: var(--shop-card-shadow);
}
.shop-pdp__price-main {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-green-600, var(--pdp-buy-alt-color));
    display: flex;
    align-items: center;
    gap: 8px;
}
.shop-pdp__price-alt {
    font-size: var(--text-sm);
    color: var(--shop-card-text-secondary);
    font-weight: var(--font-semibold);
}
.shop-pdp__actions {
    display: flex;
    gap: 10px;
}
.shop-pdp__buy {
    flex: 1;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--shop-pdp-buy-bg, var(--color-teal-600));
    color: var(--color-black);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}
.shop-pdp__buy:hover {
    background: var(--shop-pdp-buy-bg-hover, var(--color-teal-700));
}
.shop-pdp__wish {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--shop-card-bg);
    border: var(--shop-card-border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    box-shadow: var(--shop-card-shadow);
}
.shop-pdp__wish:hover {
    background: rgba(239,68,68,0.06);
    color: var(--status-error, var(--color-red-500));
    border-color: rgba(239,68,68,0.2);
}
/* Provider row inside PDP */
.shop-pdp__provider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--shop-card-bg);
    border: var(--shop-card-border);
    border-radius: var(--shop-card-radius);
    margin-bottom: 20px;
    box-shadow: var(--shop-card-shadow);
}
.shop-pdp__provider-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.shop-pdp__provider-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-pdp__provider-text {
    font-size: var(--text-xs);
    color: var(--shop-card-text-meta);
}
.shop-pdp__provider-name {
    color: var(--shop-card-text-primary);
    font-weight: var(--font-semibold);
}

/* Events notch color: match shop background */
.shop-events-stack .app-ticket__notch {
    background: var(--shop-pdp-bg, var(--shop-pdp-bg));
}

/* =============================================================================
   EVENTS ROW — columns of fixed-size tickets, stacked up to 3 high, that
   scroll to the right like every other rail. Tickets never stretch.
   ============================================================================= */
/* Double class beats the generic .shop-rail__track flex rule later in the file. */
.shop-rail__track.shop-events-stack,
.shop-events-stack {
    display: grid;
    grid-auto-flow: column;
    /* minmax(0, auto): rows size to their tickets; unused rows collapse to 0. */
    grid-template-rows: repeat(3, minmax(0, auto));
    grid-auto-columns: var(--rail-card-w, var(--shop-rail-ticket-w));
    gap: var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}
.shop-events-stack::-webkit-scrollbar {
    display: none;
}
.shop-events-stack .app-ticket {
    width: 100%;
    max-width: none;
    /* Every ticket is exactly --ticket-min-height tall — identical to Backpack
       tickets. Rows auto-size to this, so all rows stay uniform and unused
       rows still collapse. */
    height: var(--ticket-min-height);
    min-height: 0;
    scroll-snap-align: start;
}
.shop-events-stack .app-ticket__body {
    overflow: hidden;
}
/* At the fixed 144px ticket height every text row must hold one line and
   refuse to flex-shrink, otherwise long titles clip mid-line and the creator
   ticket's meter squeezes the title out entirely. */
.shop-events-stack .app-ticket__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    flex-shrink: 0;
}
.shop-events-stack .app-ticket__eyebrow,
.shop-events-stack .app-ticket__meta {
    flex-shrink: 0;
}
.shop-events-stack .app-ticket__sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
/* Compact meter inside the 144px event ticket: keep label + percent + rail,
   drop the state pill / message / detail lines. */
.shop-events-stack .app-ticket[data-shop-creator-action] .shop-evolution__detail,
.shop-events-stack .app-ticket[data-shop-creator-action] .shop-evolution__state,
.shop-events-stack .app-ticket[data-shop-creator-action] .shop-evolution__message {
    display: none;
}
.shop-events-stack .app-ticket[data-shop-creator-action] .shop-evolution {
    /* Pin BOTH size vars: the grid column reads --shop-evolution-meter-size
       but the circle itself reads the derived --evolve-meter-size, which
       resolves higher up — overriding only the first leaves a 64px circle
       overflowing a 40px column. */
    --shop-evolution-meter-size: var(--size-10, 40px);
    --evolve-meter-size: var(--size-10, 40px);
    --shop-evolution-pct-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
    min-height: 0;
    flex-shrink: 0;
}
.shop-events-stack .app-ticket[data-shop-creator-action] .app-ticket__body {
    justify-content: center;
    gap: var(--space-2);
}
.shop-events-stack .app-ticket[data-shop-creator-action] .shop-evolution__copy {
    gap: var(--space-1);
}
.shop-events-stack .app-ticket[data-shop-creator-action] .shop-evolution__topline {
    flex-wrap: nowrap;
}
.shop-events-stack .app-ticket[data-shop-creator-action] .shop-evolution__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Desktop ticket body is only ~133px wide next to the 144px image column —
       full --text-xs mono caps truncates "EVENT CREATOR". */
    font-size: calc(var(--text-xs) * 0.85);
}
/* Fewer than three events: don't reserve three empty rows. */
.shop-events-stack .app-ticket:only-child {
    grid-row: 1;
}

/* =============================================================================
   GRID-MODE OVERRIDES — when nf-row__scroll also has ds-shop-grid
   Converts horizontal scroll rail to responsive grid.
   ============================================================================= */
.nf-row__scroll.ds-shop-grid {
    display: grid;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    flex-wrap: wrap;
}

/* Apps grid: cards fill cells */
.nf-row__scroll--apps.ds-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--shop-card-app-min-w), 1fr));
}

/* Effects grid: compact */
.nf-row__scroll--effects.ds-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--shop-card-effect-min-w), 1fr));
}
.nf-row__scroll--effects.ds-shop-grid .nf-card--effect,
.nf-row__scroll--effects.ds-shop-grid .nf-card--tool {
    width: 100%;
    min-width: 0;
}

/* Coiny grid: compact */
.nf-row__scroll--coiny.ds-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--shop-card-coiny-min-w), 1fr));
}
.nf-row__scroll--coiny.ds-shop-grid .nf-card--coiny {
    width: 100%;
    min-width: 0;
}

/* Quests grid */
.nf-row__scroll--quests.ds-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--shop-card-quest-min-w), 1fr));
}

@media (max-width: 767px) {
    .nf-row__scroll.ds-shop-grid {
        padding: var(--space-2) var(--space-3) var(--space-3);
        gap: var(--shop-grid-gap-mobile);
    }
    .nf-row__scroll--apps.ds-shop-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--shop-card-app-min-w-mobile), 1fr));
    }
    .nf-row__scroll--effects.ds-shop-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--shop-card-effect-min-w-mobile), 1fr));
    }
    .nf-row__scroll--coiny.ds-shop-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--shop-card-coiny-min-w-mobile), 1fr));
    }
    .nf-row__scroll--quests.ds-shop-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--shop-card-quest-min-w-mobile), 1fr));
    }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 767px) {
    .nf-hero {
        height: 260px;
    }

    .nf-hero__title {
        font-size: var(--text-3xl);
    }

    .nf-row__header {
        padding: 0 16px 8px;
    }

    .nf-row__scroll {
        padding: 0 16px 8px;
        gap: 10px;
    }

    .nf-scroll-card {
        width: 155px;
        min-height: 210px;
    }

    .nf-card--quest {
        width: 60vw;
        max-width: 260px;
        min-width: 200px;
    }

    .nf-card--tool,
    .nf-card--effect {
        width: 140px;
        min-height: 190px;
    }

    .nf-card--coiny {
        width: 135px;
        min-height: 185px;
    }

    .shop-ticket {
        width: 170px;
    }
    .shop-ticket__img { height: 80px; }

    .shop-app {
        width: 100%;
        min-width: var(--shop-card-app-min-w-mobile);
        padding: var(--space-3);
    }
    .shop-app--zine {
        aspect-ratio: 2 / 3;
    }
    .shop-app__name { font-size: var(--shop-app-name-size-mobile); }

    .shop-quest {
        width: 145px;
        height: 175px;
        padding: 14px;
    }
    .shop-quest__icon { width: 48px; height: 48px; border-radius: var(--radius-md); }

    .slideup-modal__panel {
        min-height: 50vh;
        max-height: 95vh;
    }
}

@media (min-width: 768px) {
    .nf-hero {
        height: 360px;
    }

    .nf-hero__content {
        bottom: 32px;
        left: 32px;
    }

    .nf-hero__title {
        font-size: var(--text-4xl);
    }

    .nf-row__header {
        padding: 0 24px 12px;
    }

    .nf-row__scroll {
        padding: 0 24px 8px;
        gap: 14px;
    }

    .nf-scroll-card {
        width: 180px;
        min-height: 240px;
    }

    .nf-card--tool,
    .nf-card--effect {
        width: 160px;
        min-height: 210px;
    }

    .nf-card--coiny {
        width: 155px;
        min-height: 205px;
    }
}

/* ============================================================================
   FEATURED CAROUSEL — .feat-hero (editorial shop hero carousel)
   New namespace distinct from .feat-card (vertical poster still used elsewhere).
   Uses existing tokens only — no new tokens added.
   ============================================================================ */

.feat-hero {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 var(--radius-hero) var(--radius-hero);
    background: var(--color-dark-800);
    color: #fff;
    box-shadow: var(--shadow-xl);
    isolation: isolate;
    min-height: 420px;
}

.feat-hero__glow {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    filter: blur(90px);
    opacity: 0.55;
    transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.feat-hero__glow--a {
    background: radial-gradient(circle at 20% 30%, var(--accent-tertiary) 0%, transparent 55%);
}

.feat-hero__glow--b {
    background: radial-gradient(circle at 80% 70%, var(--color-purple-700) 0%, transparent 55%);
    opacity: 0.35;
}

/* Palette tints — glow colors per slide */
.feat-hero__slide--green ~ .feat-hero__glow--a,
.feat-hero[data-slide] .feat-hero__slide--green[data-slide-index="0"] ~ .feat-hero__glow--a {}
.feat-hero:has(.feat-hero__slide--green:not([hidden])) .feat-hero__glow--a {
    background: radial-gradient(circle at 20% 30%, var(--accent-primary) 0%, transparent 55%);
}
.feat-hero:has(.feat-hero__slide--green:not([hidden])) .feat-hero__glow--b {
    background: radial-gradient(circle at 80% 70%, var(--color-green-500) 0%, transparent 55%);
}
.feat-hero:has(.feat-hero__slide--amber:not([hidden])) .feat-hero__glow--a {
    background: radial-gradient(circle at 20% 30%, var(--color-yellow-400) 0%, transparent 55%);
}
.feat-hero:has(.feat-hero__slide--amber:not([hidden])) .feat-hero__glow--b {
    background: radial-gradient(circle at 80% 70%, var(--color-orange-500) 0%, transparent 55%);
}
.feat-hero:has(.feat-hero__slide--cyan:not([hidden])) .feat-hero__glow--a {
    background: radial-gradient(circle at 20% 30%, var(--color-cyan-500) 0%, transparent 55%);
}
.feat-hero:has(.feat-hero__slide--cyan:not([hidden])) .feat-hero__glow--b {
    background: radial-gradient(circle at 80% 70%, var(--color-cyan-700) 0%, transparent 55%);
}
.feat-hero:has(.feat-hero__slide--rose:not([hidden])) .feat-hero__glow--a {
    background: radial-gradient(circle at 20% 30%, var(--color-red-500) 0%, transparent 55%);
}
.feat-hero:has(.feat-hero__slide--rose:not([hidden])) .feat-hero__glow--b {
    background: radial-gradient(circle at 80% 70%, var(--color-magenta-500) 0%, transparent 55%);
}

.feat-hero__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    background-image:
        radial-gradient(circle at 15% 35%, rgba(255,255,255,0.9) 0%, transparent 1.5%),
        radial-gradient(circle at 65% 85%, rgba(255,255,255,0.9) 0%, transparent 1.5%),
        radial-gradient(circle at 85% 25%, rgba(255,255,255,0.9) 0%, transparent 1.5%),
        radial-gradient(circle at 35% 75%, rgba(255,255,255,0.9) 0%, transparent 1.5%);
    background-size: 120px 120px;
    mix-blend-mode: overlay;
}

.feat-hero__slide {
    position: relative;
    z-index: 2;
    padding: var(--space-12) var(--space-8);
}

.feat-hero__slide[hidden] {
    display: none;
}

.feat-hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-12);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.feat-hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.feat-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.9);
}

.feat-hero__kicker-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-primary);
}

.feat-hero__slide--amber .feat-hero__kicker-dot {
    background: var(--color-yellow-400);
    box-shadow: 0 0 8px var(--color-yellow-400);
}

.feat-hero__slide--cyan .feat-hero__kicker-dot {
    background: var(--color-cyan-500);
    box-shadow: 0 0 8px var(--color-cyan-500);
}

.feat-hero__slide--rose .feat-hero__kicker-dot {
    background: var(--color-red-500);
    box-shadow: 0 0 8px var(--color-red-500);
}

.feat-hero__slide--purple .feat-hero__kicker-dot {
    background: var(--accent-tertiary);
    box-shadow: 0 0 8px var(--accent-tertiary);
}

.feat-hero__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.01em;
    color: #fff;
}

.feat-hero__lede {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.5;
    margin: 0;
    color: rgba(255,255,255,0.78);
    max-width: 46ch;
}

.feat-hero__cta-row {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

.feat-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.feat-hero__pill--cta {
    background: #fff;
    color: var(--color-dark-900);
}

.feat-hero__pill--cta:hover {
    transform: none;
    background: rgba(255,255,255,0.9);
}

.feat-hero__pill--owned {
    background: rgba(51, 230, 88, 0.18);
    border-color: rgba(51, 230, 88, 0.5);
    color: var(--accent-primary);
}

.feat-hero__coin {
    color: var(--color-yellow-400);
    font-size: 12px;
    line-height: 1;
}

.feat-hero__byline {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
}

.feat-hero__creator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.10);
    border: 1px solid var(--btn-glass-border);
    color: var(--color-white);
    font-size: 12px;
    line-height: 1;
    max-width: 220px;
}
.feat-hero__creator-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 22px;
    background: rgba(255,255,255,0.12);
}
.feat-hero__creator-name {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Art side ─────────────────────────────────── */

.feat-hero__art {
    display: flex;
    justify-content: center;
    align-items: center;
}

.feat-hero__art-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-color: rgba(255,255,255,0.04);
    background-image: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(0,0,0,0.18));
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(255,255,255,0.1);
    transform: rotate(-3deg);
    box-shadow: var(--shadow-xl);
    transition: transform var(--dur-fast) var(--ease-out);
}

.feat-hero__art-card:hover {
    transform: rotate(-1deg) scale(1.01);
}

/* When the art card is a link (clickable into PDP / app) */
.feat-hero__art-card--link {
    display: block;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}
.feat-hero__art-card--link:focus-visible {
    outline: 2px solid var(--color-cyan-500, #00f3ff);
    outline-offset: 4px;
}

.feat-hero__art-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feat-hero__art-swatch {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, var(--accent-tertiary) 0%, var(--color-purple-700) 100%);
}

.feat-hero__slide--green .feat-hero__art-swatch {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--color-green-500) 100%);
}

.feat-hero__slide--amber .feat-hero__art-swatch {
    background: linear-gradient(135deg, var(--color-yellow-400) 0%, var(--color-orange-500) 100%);
}

.feat-hero__slide--cyan .feat-hero__art-swatch {
    background: linear-gradient(135deg, var(--color-cyan-500) 0%, var(--color-cyan-700) 100%);
}

.feat-hero__slide--rose .feat-hero__art-swatch {
    background: linear-gradient(135deg, var(--color-red-500) 0%, var(--color-magenta-500) 100%);
}

.feat-hero__art-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.03) 48%, transparent 100%);
}

.feat-hero__art-masthead {
    position: absolute;
    z-index: 3;
    top: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.feat-hero__art-tagline {
    position: absolute;
    z-index: 3;
    bottom: var(--space-5);
    left: var(--space-4);
    right: var(--space-4);
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}

.feat-hero__art-stamp {
    position: absolute;
    z-index: 3;
    top: var(--space-4);
    right: var(--space-4);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    color: #fff;
}

/* ── Controls (prev / dots / next) ──────────────── */

.feat-hero__controls {
    position: absolute;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: var(--radius-full);
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(8px);
}

.feat-hero__arrow {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-out);
}

.feat-hero__arrow:hover {
    background: rgba(255,255,255,0.18);
}

.feat-hero__dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.feat-hero__dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.feat-hero__dot-pip {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.35);
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.feat-hero__dot-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.feat-hero__dot.is-active {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

.feat-hero__dot.is-active .feat-hero__dot-pip {
    background: #fff;
    transform: scale(1.2);
}

/* ── Mobile ─────────────────────────────────── */

@media (max-width: 720px) {
    .feat-hero {
        min-height: 0;
    }

    .feat-hero__slide {
        padding: var(--space-4) var(--space-4) var(--space-5);
    }

    .feat-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .feat-hero__copy {
        gap: var(--space-3);
    }

    .feat-hero__kicker {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-xs);
        letter-spacing: var(--shop-carousel-eyebrow-tracking);
    }

    .feat-hero__art {
        order: -1;
    }

    .feat-hero__art-card {
        max-width: min(76vw, 300px);
        border-radius: var(--shop-carousel-img-radius);
        transform: rotate(-2deg);
    }

    .feat-hero__title {
        font-size: var(--shop-carousel-title-size);
    }

    .feat-hero__lede {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: var(--text-sm);
        line-height: var(--leading-normal);
    }

    .feat-hero__cta-row {
        gap: var(--space-3);
        margin-top: 0;
    }

    .feat-hero__pill {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }

    .feat-hero__controls {
        position: static;
        margin: var(--space-3) auto 0;
        width: max-content;
        padding: var(--space-1);
    }

    .feat-hero__arrow {
        width: var(--space-8);
        height: var(--space-8);
    }

    .feat-hero__dot-label {
        display: none;
    }

    .feat-hero__dot.is-active .feat-hero__dot-label {
        display: inline;
    }
}

/* ============================================================================
   SHOP RAIL — .shop-rail (editorial header + horizontal scroll of long cards)
   Matches the "Apps for your House" design: mono-caps eyebrow with rule,
   bold sans headline, italic Literata lede, See-all + arrow controls, and a
   horizontal rail of .shop-long-card tiles.
   Uses only existing tokens.
   ============================================================================ */

.shop-rail {
    display: block;
    padding: var(--space-8) 0;
    /* Mobile Chrome fix (ticket #484): keep the rail pinned to its container so
       the internal horizontal track never widens the page. */
    max-width: 100%;
    /* ── Per-section rail tokens ──
       Every rail owns its card geometry through these scoped vars; the shared
       card rules below only ever read the vars. A section adapts by overriding
       its own block here (desktop) or in the 767px block (mobile) — never by
       restyling the shared card rules. Values derive from the global
       --shop-rail-* tokens in tokens.css. */
    --rail-card-w: var(--shop-rail-card-w);
    --rail-gap: var(--space-5);
    --rail-pad-x: var(--space-6);
    --rail-creator-hero-ratio: 16 / 9;
}

.shop-rail--zines {
    --rail-card-w: var(--shop-rail-zine-w);
    --rail-card-h: var(--shop-rail-zine-h);
}

.shop-rail--events {
    --rail-card-w: var(--shop-rail-ticket-w);
}

.shop-rail--quests {
    --rail-card-h: var(--shop-rail-quest-h);
}

@media (max-width: 767px) {
    .shop-rail {
        --rail-gap: var(--space-4);
        --rail-pad-x: var(--space-4);
        /* Creator-card glyph heroes stay shallow on phones so a single card
           never fills the viewport. */
        --rail-creator-hero-ratio: 16 / 7;
    }
}

.shop-rail__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-8);
    padding: 0 var(--space-6) var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.shop-rail__header-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    min-width: 0;
    flex: 1;
}

.shop-rail__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
}

.shop-rail__eyebrow-rule {
    display: inline-block;
    width: 48px;
    height: 1px;
    background: var(--border-color, rgba(0,0,0,0.15));
}

.shop-rail__eyebrow-count {
    color: var(--text-secondary, #64748b);
}

.shop-rail__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text-primary, #0f172a);
}

.shop-rail__lede {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.5;
    margin: 0;
    color: var(--text-secondary, #475569);
    max-width: 56ch;
}

.shop-rail__nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-shrink: 0;
}

.shop-rail__see-all {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    background: #fff;
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #0f172a);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.shop-rail__see-all:hover {
    background: var(--color-gray-50, #f8fafc);
    transform: none;
}

.shop-rail__arrow {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: #fff;
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.shop-rail__arrow:hover {
    background: var(--color-gray-50, #f8fafc);
    transform: none;
}

.shop-rail__track {
    display: flex;
    gap: var(--rail-gap, var(--space-5));
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-2, 8px) var(--rail-pad-x, var(--space-6)) var(--space-8);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: var(--space-6);
    /* Let vertical drags that start on a card scroll the page, while native
       horizontal panning still moves the rail. */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    max-width: 100%;
    min-width: 0;
}

.shop-rail__track::-webkit-scrollbar {
    display: none;
}

/* ── Shop Long Card ─────────────────────────────── */

.shop-long-card {
    position: relative;
    flex: 0 0 var(--rail-card-w, var(--shop-rail-card-w));
    width: var(--rail-card-w, var(--shop-rail-card-w));
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

/* Cards never change size between mobile and desktop — one definitive width. */
.shop-rail--apps .shop-long-card {
    flex: 0 0 var(--rail-card-w, var(--shop-rail-card-w));
    width: var(--rail-card-w, var(--shop-rail-card-w));
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Apps rail uses a dark-surface card treatment.
   Tokens live on the rail so individual cards inherit the scheme; the
   chip + version pill stay white-bg / purple-fg via the meter tokens. ── */
.shop-rail--apps {
    --rail-creator-hero-ratio: 16 / 8.25;
    --apps-card-bg: var(--color-dark-900);
    --apps-card-ink: var(--color-white);
    --apps-card-line: color-mix(in srgb, var(--apps-card-ink) 24%, transparent);
    --apps-card-chip: color-mix(in srgb, var(--apps-card-ink) 14%, transparent);
}
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) {
    background: var(--apps-card-bg);
    color: var(--apps-card-ink);
}
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__body,
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__hero {
    background: var(--apps-card-bg);
    color: var(--apps-card-ink);
}
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__name,
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__desc,
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__meta,
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__source,
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__tag {
    color: var(--apps-card-ink);
}
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__tag {
    background: var(--apps-card-chip);
    border: 1px solid var(--apps-card-line);
}
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__rule {
    border-color: var(--apps-card-line);
}
.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__cta {
    background: var(--apps-card-ink);
    color: var(--apps-card-bg);
}

.shop-long-card:hover {
    transform: none;
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.1);
}

.shop-long-card__hero {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-rail--apps .shop-long-card__hero,
.shop-rail--apps .shop-long-card[data-shop-creator-action] .shop-long-card__hero {
    aspect-ratio: 16 / 10;
    min-height: 0;
}

.shop-rail--apps .shop-long-card[data-shop-creator-action] .shop-create-mark {
    gap: var(--space-5);
    padding: var(--space-6);
}

.shop-rail--apps .shop-long-card[data-shop-creator-action] .shop-create-mark__logo {
    display: block;
    width: var(--size-16);
    height: var(--size-16);
    opacity: 1;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.16));
}

.shop-rail--apps .shop-long-card[data-shop-creator-action="app"] .shop-create-mark__glyph {
    min-height: var(--size-11, 44px);
    padding: 0 var(--space-5);
    gap: var(--space-3);
    border-color: color-mix(in srgb, var(--shop-create-ink) 28%, transparent);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    box-shadow: none;
}

.shop-rail--apps .shop-long-card[data-shop-creator-action="app"] .shop-create-mark__glyph::before {
    content: "+";
    font-family: var(--font-body);
    font-size: 1.35em;
    font-weight: 300;
    line-height: 0.85;
}

.shop-long-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shop-long-card__swatch {
    position: absolute;
    inset: 0;
}

.shop-sumo-preview {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 35% 48%, rgba(145, 82, 118, 0.18), transparent 35%),
        linear-gradient(180deg, #3f1455 0%, #15071f 78%, #0a0710 100%);
    isolation: isolate;
}

.shop-sumo-preview__orb,
.shop-sumo-preview__platform,
.shop-sumo-preview__sumo,
.shop-sumo-preview__sumo span {
    position: absolute;
    display: block;
}

.shop-sumo-preview__orb {
    border-radius: var(--radius-full);
    background: rgba(197, 176, 141, 0.34);
    filter: blur(0.2px);
}

.shop-sumo-preview__orb--left {
    width: 40%;
    aspect-ratio: 1 / 1.05;
    left: 5%;
    top: 14%;
}

.shop-sumo-preview__orb--mid {
    width: 47%;
    aspect-ratio: 1 / 1.12;
    left: 21%;
    top: 1%;
}

.shop-sumo-preview__orb--right {
    width: 40%;
    aspect-ratio: 1 / 1.08;
    right: 9%;
    top: 22%;
}

.shop-sumo-preview__orb--small-left {
    width: 28%;
    aspect-ratio: 1 / 1.05;
    left: 2%;
    top: 42%;
}

.shop-sumo-preview__orb--small-right {
    width: 31%;
    aspect-ratio: 1 / 1.05;
    right: 5%;
    top: 13%;
}

.shop-sumo-preview__platform {
    z-index: 2;
    height: clamp(5px, 0.5vw, 9px);
    border-radius: var(--radius-full);
    background: #bf7a34;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.shop-sumo-preview__platform--back {
    right: -1%;
    bottom: 9%;
    width: 36%;
}

.shop-sumo-preview__platform--front {
    right: 5%;
    bottom: 5%;
    width: 49%;
}

.shop-sumo-preview__platform--ledge {
    right: 34%;
    bottom: 1.7%;
    width: 57%;
}

.shop-sumo-preview__sumo {
    z-index: 3;
    left: 47%;
    bottom: 0;
    width: clamp(64px, 7vw, 112px);
    height: clamp(96px, 10vw, 164px);
    color: #020104;
}

.shop-sumo-preview__sumo-head {
    width: 36%;
    aspect-ratio: 1;
    left: 31%;
    top: 0;
    border-radius: var(--radius-full);
    background: currentColor;
}

.shop-sumo-preview__sumo-body {
    width: 34%;
    height: 50%;
    left: 34%;
    top: 26%;
    border-radius: 16px 16px 7px 7px;
    background: currentColor;
}

.shop-sumo-preview__sumo-arm {
    width: 30%;
    height: 8%;
    top: 43%;
    border-radius: var(--radius-full);
    background: currentColor;
}

.shop-sumo-preview__sumo-arm--left {
    left: 5%;
    transform: rotate(-30deg);
}

.shop-sumo-preview__sumo-arm--right {
    right: 2%;
    transform: rotate(29deg);
}

.shop-sumo-preview__sumo-leg {
    width: 16%;
    height: 28%;
    bottom: -4%;
    border-radius: var(--radius-full);
    background: currentColor;
}

.shop-sumo-preview__sumo-leg--left {
    left: 28%;
    transform: rotate(8deg);
}

.shop-sumo-preview__sumo-leg--right {
    right: 24%;
    transform: rotate(-4deg);
}

/* Palette tints — used when no image, and as subtle bg behind images */
.shop-long-card--blue .shop-long-card__hero { background: var(--color-blue-100, #dbeafe); }
.shop-long-card--amber .shop-long-card__hero { background: #fef3c7; }
.shop-long-card--green .shop-long-card__hero { background: #dcfce7; }
.shop-long-card--rose .shop-long-card__hero { background: #ffe4e6; }
.shop-long-card--purple .shop-long-card__hero { background: var(--accent-tertiary-subtle, rgba(147, 51, 234,0.12)); }
.shop-long-card--cyan .shop-long-card__hero { background: #cffafe; }

.shop-long-card__tag {
    /* In-flow above the card title (like zine cards) — never overlays the hero. */
    align-self: flex-start;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--color-yellow-400);
    color: var(--color-dark-900);
    line-height: 1;
}

.shop-long-card__source {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: calc(100% - var(--space-16));
    min-height: var(--size-10);
    padding: 0 var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    background: rgba(12, 8, 22, 0.84);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.26);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-long-card__source-dot {
    flex: 0 0 auto;
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--radius-full);
    background: #9ebbf8;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.shop-long-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    padding: var(--space-5) var(--space-5) var(--space-5);
    background: #fff;
    flex: 1;
}

.shop-rail--apps .shop-long-card__body {
    padding: var(--space-5);
    min-height: 0;
    gap: var(--space-4);
}

.shop-rail--apps .shop-long-card__name {
    font-size: var(--text-3xl);
    line-height: 1.08;
}

.shop-rail--apps .shop-long-card__desc {
    font-size: var(--text-lg);
    line-height: 1.45;
    -webkit-line-clamp: 3;
}

.shop-rail--apps .shop-long-card:not([data-shop-creator-action]) {
    --shop-create-ink: var(--apps-card-ink);
    --shop-create-bg: var(--apps-card-bg);
    --shop-create-soft: color-mix(in srgb, var(--apps-card-ink) 72%, transparent);
    --shop-create-line: color-mix(in srgb, var(--apps-card-ink) 12%, transparent);
    --shop-create-chip: color-mix(in srgb, var(--apps-card-ink) 5%, transparent);
}

.shop-rail--apps .shop-long-card .shop-evolution {
    --shop-evolution-meter-size: var(--size-16);
    --shop-evolution-pct-size: var(--text-lg);
    --shop-evolution-complete-size: 9px;
    gap: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-xl);
}

.shop-rail--apps .shop-long-card .shop-evolution__headline {
    font-size: var(--text-xl);
}

.shop-rail--apps .shop-long-card .shop-evolution__state {
    font-size: var(--text-sm);
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    background: transparent;
    border: 0;
    padding: 0;
    opacity: 0.76;
}

.shop-rail--apps .shop-long-card .shop-evolution__topline {
    gap: var(--space-2);
}

.shop-rail--apps .shop-long-card .shop-evolution__label,
.shop-rail--apps .shop-long-card .shop-evolution__version {
    font-size: var(--text-xs);
}

.shop-rail--apps .shop-long-card .shop-evolution__rail,
.shop-rail--apps .shop-long-card .shop-evolution__message,
.shop-rail--apps .shop-long-card .shop-evolution__detail {
    display: none;
}

.shop-rail--apps .shop-long-card[data-shop-creator-action] .shop-evolution__rail {
    display: block;
    height: var(--space-1);
    margin-top: var(--space-1);
}

.shop-long-card__name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text-primary, #0f172a);
}

.shop-long-card__desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary, #475569);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-long-card__rule {
    height: 0;
    border-top: 1px dashed var(--border-color, rgba(0,0,0,0.15));
    margin: var(--space-2, 8px) 0 0;
}

.shop-long-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-top: auto;
}

.shop-long-card__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shop-long-card__meta-sep {
    opacity: 0.6;
}

.shop-long-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: var(--color-dark-900);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out);
}

.shop-long-card:hover .shop-long-card__cta {
    background: var(--accent-primary-hover, #2bd04e);
}

.shop-long-card__cta-arrow {
    font-size: 14px;
    line-height: 1;
}

/* Price inside the CTA button — keeps coiny + Get on one pill. */
.shop-long-card__cta-price {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-weight: 800;
}
.shop-long-card__cta-price svg {
    display: inline-block;
}
.shop-long-card__cta-sep {
    opacity: 0.55;
    padding: 0 2px;
}

/* Filtered to one category (pill or /shop/<section> subpage): the rail wraps
   into rows instead of scrolling sideways — cards keep the same fixed width. */
.shop-root.shop-category--apps .shop-rail--apps .shop-rail__nav,
.shop-root--section .shop-rail__nav {
    display: none;
}

.shop-root.shop-category--apps .shop-rail--apps .shop-rail__track,
.shop-root--section .shop-rail__track {
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
    max-width: 1200px;
    margin: 0 auto;
}

/* Events subpage: the rail's column-stack grid must give way to a wrapped
   vertical flow so the page scrolls down like every other section. */
.shop-root--section .shop-rail__track.shop-events-stack,
.shop-root--pillfilter .shop-rail__track.shop-events-stack {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
}
.shop-root--section .shop-events-stack .app-ticket,
.shop-root--pillfilter .shop-events-stack .app-ticket {
    flex: 0 0 var(--rail-card-w, var(--shop-rail-ticket-w));
    width: var(--rail-card-w, var(--shop-rail-ticket-w));
}

/* ── Pill category view (.shop-root--pillfilter) ──
   Activating a category pill turns the one visible rail into the same
   wrapped vertical grid the /shop/<section> pages use — no page change.
   Rail arrows and "See all" are meaningless in a grid, so they hide. */
.shop-root--pillfilter .shop-rail__track {
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
    max-width: 1200px;
    margin: 0 auto;
}
.shop-root--pillfilter .shop-rail__arrow,
.shop-root--pillfilter .shop-rail__see-all {
    display: none;
}
.shop-batch-sentinel {
    flex: 1 1 100%;
    height: 1px;
}

/* Full-width cards with larger covers on phones — pill view and the legacy
   section pages share the treatment. */
@media (max-width: 767px) {
    .shop-root--pillfilter .shop-rail--apps .shop-long-card,
    .shop-root--section .shop-rail--apps .shop-long-card,
    .shop-root--pillfilter .shop-rail__track--quests .shop-quest-b2-wrap,
    .shop-root--section .shop-rail__track--quests .shop-quest-b2-wrap,
    .shop-root--pillfilter .shop-rail__track--items .shop-long-card,
    .shop-root--section .shop-rail__track--items .shop-long-card,
    .shop-root--pillfilter .shop-rail__track--items .shop-app,
    .shop-root--section .shop-rail__track--items .shop-app,
    .shop-root--pillfilter .shop-rail__track--items .nf-card--effect,
    .shop-root--section .shop-rail__track--items .nf-card--effect {
        flex-basis: 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .shop-root--pillfilter .shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__hero,
    .shop-root--section .shop-rail--apps .shop-long-card:not([data-shop-creator-action]) .shop-long-card__hero {
        aspect-ratio: 4 / 3;
    }
}

/* ── Mobile — layout only; cards keep the exact same width as desktop ── */

@media (max-width: 767px) {
    .shop-rail__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
        padding: 0 var(--space-4) var(--space-6);
    }

    .shop-rail__nav {
        width: 100%;
        justify-content: flex-start;
    }

    .shop-rail__track {
        padding-bottom: var(--space-6);
        scroll-padding-left: var(--rail-pad-x, var(--space-4));
    }
}

/* ── Rail prev/next wiring (vanilla, no macro-local JS needed) ─── */


/* ═══════════════════════════════════════════════════════════════════
   SHOP → three-tab full-screen modal (Shop · Collection · Vault)
   Added 2026-04-23 — replaces old sticky header + collection overlay
═══════════════════════════════════════════════════════════════════ */

/* Full-viewport overlay for /shop is handled by the universal
   body.drawer-layout .drawer-panel--right rule in layout.css —
   shared with Messages and Backpack. */

/* Shop root — tab state container */
.shop-root {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    /* Steven 2026-07-22 comp-match: ONE page. The dark surface lives only on
       the sticky .shop-chrome bar; the page below is a single light sheet —
       no dark shell peeking around content (the "two containers" look). */
    background: var(--surface-app);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

/* ── Top chrome ─────────────────────────────────────────────────── */
.shop-chrome {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--color-dark-800);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Brand badge (Steven 2026-08-06): white-circle idiom matching .drawer-x —
   white glyph, thin white outlined ring, no fill. Mirrors the close button
   visual language so both ends of the header bar read the same way. */
.shop-chrome__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-10);
    height: var(--size-10);
    flex: 0 0 auto;
    color: var(--color-white);
    text-decoration: none;
    background: transparent;
    border: 2px solid var(--btn-glass-border);
    border-radius: var(--radius-full);
    transition: background 120ms;
}
.shop-chrome__brand:hover {
    background: rgba(255,255,255,0.08);
}
.shop-chrome__brand-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

/* Title typography now comes from the shared .toll-bench-header__title
   class (layout.css, Steven 2026-08-03); this keeps only slot geometry.
   Gap tightened to --space-2 (8px) to match the Toll Bench header fix
   (commit e39ffe576). */
.shop-chrome__wordmark {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-left: var(--space-2);
}

.shop-tabs {
    display: inline-flex;
    gap: 4px;
    justify-self: center;
    padding: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--btn-glass-border);
    border-radius: var(--radius-full);
}

.shop-tab-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-gray-400);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.shop-tab-btn:hover { color: var(--color-white); }
.shop-tab-btn.is-active {
    background: var(--color-cyan-500);
    color: var(--color-dark-900);
}

.shop-tab-btn__short { display: none; }
@media (max-width: 720px) {
    .shop-tab-btn__full { display: none; }
    .shop-tab-btn__short { display: inline; }
    .shop-tab-btn { padding: 8px 12px; }
    .shop-chrome { gap: 8px; padding: 10px 12px; }
}

.shop-chrome__right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
}

.shop-chrome__balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(51, 230, 88, 0.12);
    border: 1px solid rgba(51, 230, 88, 0.35);
    color: var(--color-green-500);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

/* Close X now uses the shared .drawer-x pattern (layout.css). */

/* ── Main / tab panels ──────────────────────────────────────────── */
.shop-main {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.shop-tab {
    display: none;
    min-width: 0;
    max-width: 100%;
}
.shop-tab.is-active { display: block; }

.shop-root[data-pdp-open="true"] .shop-tab { display: none; }

/* Shop tab stays light-themed (existing content untouched) */
.shop-tab--shop.shop-light {
    background: var(--surface-app);
}

/* Slate-themed tabs (Collection + Vault) */
.shop-slate {
    background: var(--color-dark-800);
    color: var(--color-white);
    min-height: calc(100vh - 64px);
    padding: 32px 20px 80px;
}

.shop-slate__hero {
    max-width: 960px;
    margin: 0 auto 24px;
    text-align: center;
    padding: 24px 0 8px;
}

/* Left-aligned hero variant (Collection tab) */
.shop-slate__hero--left {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
    padding-left: 4px;
}

/* Generic prose container on slate */
.shop-slate__prose {
    color: var(--color-gray-300, #d4d4d8);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 4px 32px;
}
.shop-slate__prose p { margin: 0 0 14px; }
.shop-slate__prose strong { color: var(--color-white); }

/* "How it's made" blog layout (Steven Ochs) — left-aligned */
.shop-slate__prose--blog {
    text-align: left;
    margin: 0;
    max-width: 880px;
    padding: 16px 4px 40px;
}
.shop-blog__author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.shop-blog__author-photo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 1px solid var(--btn-glass-border, rgba(255,255,255,0.25));
}
.shop-blog__author p { margin: 0; line-height: 1.3; }
.shop-blog__author-subtitle {
    color: var(--color-gray-400);
    font-size: var(--text-sm);
}
.shop-blog__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 20px 0;
}
.shop-blog__video {
    margin: 24px 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--color-dark-800);
    aspect-ratio: 16 / 9;
}
.shop-blog__video video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.shop-blog__thumb {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--color-dark-600, #141c2e);
    transition: transform var(--duration-fast, 150ms) ease;
}
.shop-blog__thumb:hover { transform: scale(1.02); }
.shop-blog__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shop-blog__bio-link a {
    color: var(--color-cyan-500, #00f3ff);
    text-decoration: underline;
}

/* Lightbox */
.shop-blog-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 9500);
    padding: 24px;
    cursor: zoom-out;
}
.shop-blog-lightbox.is-open { display: flex; }
.shop-blog-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}
.shop-blog-lightbox__close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
}

.shop-slate__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.shop-slate__eyebrow--cyan { color: var(--color-cyan-500); }
.shop-slate__eyebrow--orange { color: var(--color-orange-500); }

.shop-slate__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    color: var(--color-white);
    margin: 0 0 12px;
    line-height: 1.1;
}

.shop-slate__subtitle {
    color: var(--color-gray-400);
    font-size: var(--text-sm);
    margin: 0;
}

/* Sub-tab pills */
.shop-slate__subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 960px;
    margin: 0 auto 24px;
}

.shop-slate__subtab {
    appearance: none;
    border: 1px solid var(--btn-glass-border);
    background: transparent;
    color: var(--color-gray-400);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 120ms;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.shop-slate__subtab:hover { color: var(--color-white); border-color: rgba(255,255,255,0.4); }
.shop-slate__subtab.is-active {
    background: var(--color-white);
    color: var(--color-dark-900);
    border-color: var(--color-white);
}

.shop-slate__subtab-count {
    font-size: 10px;
    opacity: 0.7;
}

/* Section header inside panels */
.shop-slate__section-header {
    max-width: 1200px;
    margin: 32px auto 16px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
}
.shop-slate__section-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-2xl);
    color: var(--color-white);
    margin: 0;
}
.shop-slate__section-count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Collection & vault panels (sub-tab content) */
.shop-collection-panel,
.shop-vault-panel {
    display: none;
}
.shop-collection-panel.is-active,
.shop-vault-panel.is-active {
    display: block;
}

/* ── Collection grid & cards ────────────────────────────────────── */
.shop-collection-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.shop-collection-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--color-dark-600);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: transform 160ms, border-color 160ms;
}
.shop-collection-card:hover {
    transform: none;
    border-color: rgba(255,255,255,0.2);
}

.shop-collection-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-dark-900);
}
.shop-collection-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shop-collection-card__price {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-cyan-500);
    color: var(--color-dark-900);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.shop-collection-card__owned-badge {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 4px 10px;
    background: var(--color-green-500);
    color: var(--color-dark-900);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.12em;
}

.shop-collection-card__body {
    padding: 12px 14px 16px;
}

.shop-collection-card__category {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--accent-tertiary);
    margin-bottom: 6px;
}

.shop-collection-card__title {
    font-size: var(--text-sm);
    color: var(--color-white);
    line-height: 1.3;
}

.shop-collection-card__edition {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-400);
}

/* ── Vault: big balance + stats + pack grid ─────────────────────── */
.shop-vault__big-balance {
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
    font-size: clamp(48px, 10vw, 96px);
    color: var(--color-white);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 12px 0 8px;
}

.shop-vault__stats {
    max-width: 960px;
    margin: 0 auto 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 720px) {
    .shop-vault__stats { grid-template-columns: repeat(2, 1fr); }
}

.shop-vault-stat {
    background: var(--color-dark-600);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-xl);
    padding: 16px;
    text-align: center;
}

.shop-vault-stat__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    margin-bottom: 6px;
}
.shop-vault-stat__value {
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
    color: var(--color-white);
}
.shop-vault-stat--green .shop-vault-stat__value { color: var(--color-green-500); }
.shop-vault-stat--cyan .shop-vault-stat__value { color: var(--color-cyan-500); }

.shop-vault-pack-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.shop-vault-pack {
    appearance: none;
    background: var(--color-dark-600);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    padding: 20px 16px;
    cursor: pointer;
    text-align: center;
    color: var(--color-white);
    transition: transform 160ms, border-color 160ms;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.shop-vault-pack:hover {
    transform: none;
    border-color: var(--color-green-500);
}

.shop-vault-pack__top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-green-500);
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
}

.shop-vault-pack__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gray-400);
}

.shop-vault-pack__price {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 16px;
    background: var(--color-green-500);
    color: var(--color-dark-900);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
}

/* ── Inline PDP inside shop ─────────────────────────────────────── */
.shop-pdp-inline {
    position: relative;
    min-height: calc(100vh - 64px);
    background: var(--color-white);
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Inline-injected PDP content — fills the shop container */
.shop-pdp-content {
    flex: 1 1 auto;
    width: 100%;
    min-height: calc(100vh - 64px);
    background: var(--color-white);
    overflow-y: auto;
}
.shop-pdp-loading,
.shop-pdp-error {
    padding: var(--space-8);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}
.shop-pdp-error a { color: var(--color-cyan-500); text-decoration: underline; }

/* Hide the standalone PDP topbar when injected inline (host chrome takes over) */
.shop-pdp-content .pdp-topbar { display: none !important; }
/* Inline PDP body can't be position:fixed/full-screen — it's inside the shop scroll */
.shop-pdp-content .pdp-body { min-height: 0; }

.shop-root[data-pdp-open="true"] .shop-pdp-inline { display: block; }
.shop-root[data-pdp-open="false"] .shop-pdp-inline { display: none; }

/* When PDP open: hide the Π brand, show the "← Shop" back button in its place */
.shop-chrome__back {
    appearance: none;
    border: 0;
    background: transparent;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
    cursor: pointer;
    transition: background 0.15s;
}
.shop-chrome__back:hover { background: rgba(255,255,255,0.1); }
.shop-root[data-pdp-open="true"] .shop-chrome__brand { display: none; }
.shop-root[data-pdp-open="true"] .shop-chrome__back { display: inline-flex; }
/* Hide tabs while viewing a PDP — chrome reads "← Shop" only */
.shop-root[data-pdp-open="true"] .shop-tabs { visibility: hidden; }
/* Hide wordmark when PDP is open (back button takes the left slot) */
.shop-root[data-pdp-open="true"] .shop-chrome__wordmark { display: none; }

/* ── /shop/<section> subpage chrome: always show the "← Shop" back link ── */
.shop-chrome__back--section {
    display: inline-flex;
    text-decoration: none;
}
.shop-root--section .shop-chrome__brand { display: none; }
.shop-root--section .shop-tabs { visibility: hidden; }
/* Hide wordmark in section mode (back-to-shop link takes the left slot) */
.shop-root--section .shop-chrome__wordmark { display: none; }

/* PDP overlay no longer fixed — lives inside shop-pdp-inline */
.shop-root[data-pdp-open="true"] .shop-pdp-overlay,
.shop-root[data-pdp-open="true"] .app-detail-overlay {
    position: relative !important;
    inset: auto !important;
    z-index: auto;
}

/* ── Zines rail — cover-art portrait cards inside editorial rail ── */
.shop-rail__track--zines {
    align-items: flex-start;
}
.shop-rail__track--zines .shop-app--zine {
    scroll-snap-align: start;
}

/* ── Events rail: column-stacked horizontal scroll with working arrows ── */
.shop-rail--events .shop-events-stack {
    padding: var(--space-2) var(--space-6) var(--space-8);
}
@media (max-width: 767px) {
    .shop-rail--events .shop-events-stack {
        padding: var(--space-2) var(--space-4) var(--space-6);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP ZINE CARD — design-system component (.shop-zine-card)
   Portrait cover-art card with yellow ZINE tag + house pill + bottom
   title/desc/issue/Coiny-pill. Mirrors shop_long_card's tag style.
═══════════════════════════════════════════════════════════════════ */
.shop-zine-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 var(--rail-card-w, var(--shop-rail-zine-w));
    width: var(--rail-card-w, var(--shop-rail-zine-w));
    height: var(--rail-card-h, var(--shop-rail-zine-h));
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-color: var(--color-dark-900);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    text-decoration: none;
    box-shadow: var(--shadow-xl);
    transition: transform 160ms ease, box-shadow 160ms ease;
    scroll-snap-align: start;
}

.shop-zine-card__cover {
    position: absolute;
    inset: var(--space-0);
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.shop-zine-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.95) 100%);
    pointer-events: none;
    z-index: 1;
}
.shop-zine-card:hover {
    transform: none;
}
.shop-zine-card--no-image {
    background-image: linear-gradient(160deg, var(--color-dark-700), var(--color-dark-900));
}

/* Top header — sits above scrim via z-index */
.shop-zine-card__header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.shop-zine-card__house {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-white);
    max-width: calc(100% - 44px);
    overflow: hidden;
}
.shop-zine-card__house-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-cyan-500);
    flex-shrink: 0;
}
.shop-zine-card__house-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bottom body — sits above scrim via z-index, pushed to bottom by flex */
.shop-zine-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Yellow mono ZINE tag — sits above title */
.shop-zine-card__tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--color-yellow-400);
    color: var(--color-dark-900);
    line-height: 1;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.shop-zine-card__title {
    font-family: var(--font-sans);
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
    color: var(--color-white);
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.shop-zine-card__desc {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.85);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.shop-zine-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.shop-zine-card__issue {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.78);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.shop-zine-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    white-space: nowrap;
    flex-shrink: 0;
}
.shop-zine-card__pill--coiny {
    background: var(--color-green-500);
    color: var(--color-dark-900);
}
.shop-zine-card__pill--usd {
    background: var(--color-white);
    color: var(--color-dark-900);
}
.shop-zine-card__pill--owned {
    background: rgba(255,255,255,0.92);
    color: var(--color-dark-900);
}

/* ── ticket #4611 (anchor: e23f4f34e, replay-4 ESCALATION — see Shadow #4615): "touch to preview" sticker on shop zine cover ──
   Sits absolute top-right of the card so it never covers the title (bottom
   body) or price pill (bottom-right footer). Readable on both desktop and
   mobile via mono caps + light surface + dark text. The right offset
   leaves room for the admin kebab (super_admin only) without overlap by
   pulling the sticker slightly below the top edge on small viewports.
   Round-2 cleanup per Vex notes: z-index uses --z-rail (the rail layer the
   card lives in), font-size uses --text-xs, letter-spacing uses
   --tracking-wide so all three are token-driven. */
.shop-zine-card__preview-sticker {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: var(--z-rail);
    padding: var(--space-1) var(--space-2);
    background: var(--color-yellow-400);
    color: var(--color-dark-900);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-full);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-sm);
}
/* When the admin kebab is rendered, drop the sticker a row so neither
   element covers the other. Kebab is ~24px tall in the header strip. */
.shop-zine-card .shop-admin-kebab--card ~ .shop-zine-card__preview-sticker {
    top: calc(var(--space-2) + var(--space-6));
}

/* ── Shop Quests Rail — quest_card flows horizontally in rail ── */
.shop-rail__track--quests .shop-quest-b2-wrap {
    scroll-snap-align: start;
    height: var(--rail-card-h, auto);
}
.shop-rail__track--quests .shop-quest-b2-wrap .quest-card-v2 {
    width: 100%;
}

/* ── Uniform card sizing across Items, Quests, Effects, and Business rails ──
   Every rail card shares --shop-rail-card-w (tokens.css) on mobile AND
   desktop; heights are natural and stretch to the tallest card per rail. */
.shop-rail__track--items .shop-app,
.shop-rail__track--items .shop-long-card,
.shop-rail__track--items .nf-card--effect,
.shop-rail__track--quests .shop-quest-b2-wrap,
.shop-rail__track--business .shop-long-card {
    flex: 0 0 var(--rail-card-w, var(--shop-rail-card-w));
    width: var(--rail-card-w, var(--shop-rail-card-w));
    min-width: var(--rail-card-w, var(--shop-rail-card-w));
    max-width: var(--rail-card-w, var(--shop-rail-card-w));
    aspect-ratio: auto;
}

/* Item cards with a full-bleed image keep a stable 3:4 portrait shape. */
.shop-rail__track--items .shop-app {
    aspect-ratio: 3 / 4;
    height: auto;
}

/* Effect cards scale up to the items-rail card size; the icon area flexes to
   fill the stretched rail height on a soft tinted panel so the card never
   reads as an empty white rectangle. */
.shop-rail__track--items .nf-card--effect {
    display: flex;
    flex-direction: column;
}
.shop-rail__track--items .nf-card--effect {
    --shop-effect-preview-size: var(--size-24, 96px);
}
.shop-rail__track--items .nf-card--effect .nf-card__icon-area {
    flex: 1 1 auto;
    min-height: var(--size-32, 128px);
    height: auto;
    background: linear-gradient(160deg, var(--color-dark-700), var(--color-dark-900));
}
.shop-rail__track--items .nf-card--effect .nf-card__name {
    font-size: var(--text-base);
}
.shop-rail__track--items .nf-card--effect .nf-card__body {
    padding: var(--space-3) var(--space-4) 0;
    flex: 0 0 auto;
}
.shop-rail__track--items .nf-card--effect .nf-card__foot {
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.shop-rail__track--items,
.shop-rail__track--quests,
.shop-rail__track--business {
    align-items: stretch;
}

.shop-rail__track--quests .shop-quest-b2-wrap .quest-card-v2 {
    min-width: 0;
    max-width: none;
    width: 100%;
    height: 100%;
}

/* Quest cards stretch to the tallest card in the rail; the bottom hero panel
   (image or dark glyph fallback) absorbs the extra height so sparse cards
   never show a blank white band between body and hero. */
.shop-rail__track--quests .quest-card-v2__hero-image {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}
.shop-rail__track--quests .quest-card-v2__hero-img,
.shop-rail__track--quests .quest-card-v2__hero-fallback {
    height: 100%;
    min-height: calc(var(--size-32, 128px) + var(--space-8));
    aspect-ratio: auto;
}

/* ── Slate-page evolution meter (Vault Coiny Safe + Collection hero) ──
   Reuses shop_evolution_status; the slate pages run it in neon cyan via the
   --shop-create-* hooks the meter derives all its colours from. */
.shop-slate-evolution {
    max-width: 360px;
    margin-top: var(--space-4);
    --shop-create-bg: var(--color-dark-700);
    --shop-create-bg-deep: var(--color-dark-900);
    --shop-create-ink: var(--color-cyan-500);
    --shop-create-chip: color-mix(in srgb, var(--color-cyan-500) 8%, transparent);
    --shop-create-line: color-mix(in srgb, var(--color-cyan-500) 35%, transparent);
}
.shop-slate-evolution .shop-evolution {
    /* Standalone meters have no creator-card ancestor to set the column var;
       without it the grid collapses to a single stacked column. */
    --shop-evolution-meter-size: var(--size-14);
    --evolve-meter-chip-bg: var(--color-dark-900);
    --evolve-meter-chip-fg: var(--color-cyan-500);
    --evolve-meter-version-bg: color-mix(in srgb, var(--color-cyan-500) 16%, transparent);
    --evolve-meter-version-fg: var(--color-cyan-500);
}

/* ═══════════════════════════════════════════════════════════════
   VAULT — Art Locks panel (slate-themed)
   ═══════════════════════════════════════════════════════════════ */
.shop-vault__section {
    margin-bottom: var(--space-6);
}
.shop-slate__section-count {
    margin-left: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--color-cyan-500);
    text-transform: uppercase;
}

/* Tier info row (5 small cards) */
.shop-vault__tier-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
}
.shop-vault__tier-info-card {
    background: var(--color-dark-600);
    border: 1px solid var(--btn-glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
}
.shop-vault__tier-info-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.08);
    color: var(--color-white);
    font-size: 20px;
}
.shop-vault__tier-info-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-white);
}
.shop-vault__tier-info-cost {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--color-gray-400);
}

/* Tier icon color variants */
.shop-vault__tier-icon--small_print { color: var(--color-cyan-500); }
.shop-vault__tier-icon--large_print { color: var(--accent-primary); }
.shop-vault__tier-icon--original_work { color: var(--accent-tertiary); }
.shop-vault__tier-icon--collector_piece { color: var(--color-orange-500); }
.shop-vault__tier-icon--masterwork { color: var(--accent-tertiary); }

/* 3-step explainer */
.shop-vault__how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}
.shop-vault__how-step {
    background: var(--color-dark-600);
    border: 1px solid var(--btn-glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.shop-vault__how-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-cyan-500);
    color: var(--color-dark-900);
    font-weight: 700;
    font-size: 14px;
    display: grid;
    place-items: center;
}
.shop-vault__how-text {
    color: var(--color-gray-400);
    font-size: 13px;
    line-height: 1.5;
}
.shop-vault__how-text strong {
    color: var(--color-white);
}

/* Active locks list */
.shop-vault__locks {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.shop-vault__lock {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-dark-600);
    border: 1px solid var(--btn-glass-border);
    border-radius: var(--radius-xl);
}
.shop-vault__lock-shield {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: rgba(0, 243, 255, 0.12);
    color: var(--color-cyan-500);
    font-size: 18px;
    flex-shrink: 0;
}
.shop-vault__lock-info {
    flex: 1;
    min-width: 0;
}
.shop-vault__lock-tier {
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
}
.shop-vault__lock-detail {
    color: var(--color-gray-400);
    font-size: 12px;
    margin-top: 2px;
}
.shop-vault__lock-amount {
    color: var(--color-white);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
}
.shop-vault__lock-status {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}
.shop-vault__lock-status--locked {
    background: rgba(51, 230, 88, 0.15);
    color: var(--accent-primary);
}
.shop-vault__lock-status--selecting {
    background: rgba(242, 106, 44, 0.15);
    color: var(--color-orange-500);
}

/* Lock-into-art tier rows */
.shop-vault__tiers {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.shop-vault__tier {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-dark-600);
    border: 1px solid var(--btn-glass-border);
    border-radius: var(--radius-xl);
}
.shop-vault__tier--locked {
    opacity: 0.55;
}
.shop-vault__tier-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.08);
    font-size: 20px;
    flex-shrink: 0;
}
.shop-vault__tier-body {
    flex: 1;
}
.shop-vault__tier-name {
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
}
.shop-vault__tier-action {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.shop-vault__tier-cost {
    color: var(--color-white);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
}
.shop-vault__tier-btn {
    background: var(--color-cyan-500);
    color: var(--color-dark-900);
    border: 0;
    border-radius: var(--radius-full);
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.shop-vault__tier-btn:hover:not(:disabled) {
    opacity: 0.85;
}
.shop-vault__tier-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════
   VAULT — Transactions panel
   ═══════════════════════════════════════════════════════════════ */
.shop-vault__tx-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.shop-vault__tx {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-dark-600);
    border: 1px solid var(--btn-glass-border);
    border-radius: var(--radius-xl);
}
.shop-vault__tx-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    font-size: 16px;
}
.shop-vault__tx--in .shop-vault__tx-icon {
    background: rgba(51, 230, 88, 0.15);
    color: var(--accent-primary);
}
.shop-vault__tx--out .shop-vault__tx-icon {
    background: rgba(242, 106, 44, 0.15);
    color: var(--color-orange-500);
}
.shop-vault__tx-body {
    flex: 1;
    min-width: 0;
}
.shop-vault__tx-title {
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
}
.shop-vault__tx-reason {
    color: var(--color-gray-400);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}
.shop-vault__tx-time {
    color: var(--color-gray-400);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    margin-top: 4px;
}
.shop-vault__tx-amount {
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.shop-vault__tx-amount--in {
    color: var(--accent-primary);
}
.shop-vault__tx-amount--out {
    color: var(--color-orange-500);
}
.shop-vault__tx-xp {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-cyan-500);
    letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════════
   VAULT — Coiny purchase redesign
   ═══════════════════════════════════════════════════════════════ */
.shop-tab--vault.shop-slate {
    --vault-bg: #080c14;
    --vault-panel: #111827;
    --vault-panel-strong: #172033;
    --vault-line: rgba(255,255,255,0.11);
    --vault-muted: #a1a8b5;
    --vault-green: #35df6a;
    --vault-cyan: #2ee6ff;
    --vault-orange: #ff8a3d;
    background:
        linear-gradient(180deg, #080c14 0%, #0b1020 54%, #080c14 100%);
    padding: 28px 28px 88px;
}

.shop-vault-hero {
    max-width: 1180px;
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: stretch;
}

.shop-vault-hero__copy,
.shop-vault-hero__visual {
    border: 1px solid var(--vault-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.02)),
        var(--vault-panel);
}

.shop-vault-hero__copy {
    padding: 36px;
    min-width: 0;
}

.shop-vault-hero__visual {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    display: grid;
    place-items: center;
    padding: 24px;
}

.shop-vault-hero__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(53,223,106,0.16), transparent 42%),
        linear-gradient(315deg, rgba(46,230,255,0.13), transparent 46%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 26px);
    pointer-events: none;
}

.shop-tab--vault .shop-slate__eyebrow,
.shop-tab--vault .shop-slate__subtab,
.shop-vault-stat__label,
.shop-vault-pack__label,
.shop-vault-purchase__kicker,
.shop-vault-hero__rate span,
.shop-vault-hero__rate strong,
.shop-vault__tx-time,
.shop-vault__tx-xp {
    letter-spacing: 0;
}

.shop-tab--vault .shop-slate__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--vault-orange);
}

.shop-tab--vault .shop-slate__subtitle {
    max-width: 640px;
    color: var(--vault-muted);
    font-size: 16px;
    line-height: 1.5;
}

.shop-vault__big-balance {
    font-size: 88px;
    line-height: 0.95;
    margin: 0 0 14px;
    overflow-wrap: anywhere;
}

.shop-vault-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.shop-vault-hero__primary,
.shop-vault-hero__secondary {
    appearance: none;
    min-height: 44px;
    border-radius: 8px;
    padding: 0 18px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
}

.shop-vault-hero__primary {
    background: var(--vault-green);
    color: #04130a;
}

.shop-vault-hero__secondary {
    background: transparent;
    color: var(--color-white);
    border-color: var(--vault-line);
}

.shop-vault-hero__primary:hover,
.shop-vault-hero__secondary:hover {
    transform: none;
}

.shop-vault-coin {
    position: relative;
    z-index: 1;
    width: 180px;
    height: 180px;
    display: grid;
    place-items: center;
}

.shop-vault-coin svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,0.28));
}

.shop-vault-hero__rate {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(8,12,20,0.82);
    border: 1px solid var(--vault-line);
}

.shop-vault-hero__rate span {
    color: var(--vault-muted);
    font-size: 12px;
}

.shop-vault-hero__rate strong {
    color: var(--vault-green);
    font-family: var(--font-mono);
    font-size: 13px;
    white-space: nowrap;
}

.shop-vault-hero__rate a {
    color: var(--vault-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.shop-tab--vault .shop-vault__stats {
    max-width: 1180px;
    margin: 0 auto 24px;
    gap: 12px;
}

.shop-tab--vault .shop-vault-stat {
    min-height: 104px;
    padding: 18px;
    border-radius: 8px;
    background: var(--vault-panel-strong);
    border-color: var(--vault-line);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.shop-tab--vault .shop-vault-stat__label {
    font-size: 12px;
    color: var(--vault-muted);
    margin-bottom: 10px;
}

.shop-tab--vault .shop-vault-stat__value {
    font-size: 24px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.shop-tab--vault .shop-vault-stat--green .shop-vault-stat__value {
    color: var(--vault-green);
}

.shop-tab--vault .shop-vault-stat--cyan .shop-vault-stat__value {
    color: var(--vault-cyan);
}

.shop-tab--vault .shop-slate__subtabs {
    max-width: 1180px;
    justify-content: flex-start;
    margin: 0 auto 22px;
}

.shop-tab--vault .shop-slate__subtab {
    border-radius: 8px;
    min-height: 40px;
    padding: 0 14px;
}

.shop-tab--vault .shop-slate__subtab.is-active {
    background: var(--color-white);
    color: #07101d;
}

.shop-vault-purchase {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.shop-vault-purchase__copy {
    padding: 18px 0;
}

.shop-vault-purchase__kicker {
    display: block;
    color: var(--vault-cyan);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.shop-vault-purchase__title {
    margin: 0 0 10px;
    color: var(--color-white);
    font-size: 30px;
    line-height: 1.1;
}

.shop-vault-purchase__text {
    margin: 0;
    color: var(--vault-muted);
    font-size: 14px;
    line-height: 1.55;
}

.shop-vault-purchase__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.shop-vault-purchase__facts span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--color-white);
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--vault-line);
    font-size: 12px;
}

.shop-vault__pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.shop-vault-pack {
    position: relative;
    min-height: 178px;
    padding: 16px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
        var(--vault-panel-strong);
    border: 1px solid var(--vault-line);
    align-items: stretch;
    text-align: left;
    gap: 12px;
}

.shop-vault-pack:nth-child(2) {
    border-color: rgba(53,223,106,0.65);
    box-shadow: 0 14px 34px rgba(53,223,106,0.08);
}

.shop-vault-pack:hover {
    border-color: var(--vault-green);
    transform: none;
}

.shop-vault-pack__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(53,223,106,0.13);
    color: var(--vault-green);
}

.shop-vault-pack__icon svg {
    width: 24px;
    height: 24px;
}

.shop-vault-pack__body {
    min-width: 0;
}

.shop-vault-pack__top {
    display: block;
    color: var(--color-white);
    font-size: 24px;
    line-height: 1.1;
}

.shop-vault-pack__lmna {
    font-family: var(--font-mono);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.shop-vault-pack__label {
    margin-top: 4px;
    color: var(--vault-muted);
    font-size: 12px;
    text-transform: none;
}

.shop-vault-pack__price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-top: auto;
    padding: 0 13px;
    border-radius: 8px;
    background: var(--vault-green);
    color: #04130a;
    font-size: 14px;
}

.shop-vault-pack__cta {
    color: var(--vault-cyan);
    font-size: 12px;
    font-weight: 700;
}

.shop-tab--vault .shop-slate__empty,
.shop-tab--vault .shop-vault__tier-info-card,
.shop-tab--vault .shop-vault__how-step,
.shop-tab--vault .shop-vault__lock,
.shop-tab--vault .shop-vault__tier,
.shop-tab--vault .shop-vault__tx {
    border-radius: 8px;
    background: var(--vault-panel-strong);
    border-color: var(--vault-line);
}

@media (max-width: 900px) {
    .shop-vault-hero,
    .shop-vault-purchase {
        grid-template-columns: 1fr;
    }

    .shop-vault-hero__visual {
        min-height: 220px;
    }
}

@media (max-width: 720px) {
    .shop-tab--vault.shop-slate {
        padding: 18px 14px 72px;
    }

    .shop-vault-hero {
        gap: 14px;
        margin-bottom: 16px;
    }

    .shop-vault-hero__copy {
        padding: 22px;
    }

    .shop-vault__big-balance {
        font-size: 52px;
    }

    .shop-tab--vault .shop-vault__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 18px;
    }

    .shop-tab--vault .shop-vault-stat {
        min-height: 92px;
        padding: 14px;
    }

    .shop-tab--vault .shop-vault-stat__value {
        font-size: 19px;
    }

    .shop-vault-purchase__copy {
        padding: 4px 0 0;
    }

    .shop-vault-purchase__title {
        font-size: 24px;
    }

    .shop-vault__pack-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   PUDDING HEROES UNIVERSE — MEDIA CATALOG  (Steven 2026-07-22)
   Section + card + product page (media PDP). Design-token only. Screenshot
   color map:  yellow pill -> --color-yellow-400 ; dark card -> --accent-dark ;
   light card -> --surface-secondary ; purple card -> --accent-tertiary ;
   green button -> --accent-primary.
   ============================================================================= */

/* =============================================================================
   SHOP HERO — "Made by the Houses." full-bleed carousel (Steven 2026-07-22)
   Mock: big masthead heading above a full-bleed cover slide with a dark scrim,
   yellow kind pill, serif-italic overlay headline, short blurb, white View
   button, byline, dots + circular arrow controls. Design-token only.
   ============================================================================= */
.shop-hero__masthead {
    margin: var(--space-5) 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold, 800);
    letter-spacing: -0.01em;
    color: var(--text-primary);
    line-height: 1.05;
}
.shop-hero {
    position: relative;
    margin: var(--space-5) 0 var(--space-2);
}
@media (max-width: 639px) {
    .shop-hero {
        margin-right: calc(var(--space-1) - var(--space-4));
        margin-left: calc(var(--space-1) - var(--space-4));
    }
}
.shop-hero__viewport {
    position: relative;
    /* Mobile uses a true square so the artwork fills the full card footprint. */
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--accent-dark);
}
@media (min-width: 640px) {
    .shop-hero__viewport { aspect-ratio: 16 / 11; max-height: 520px; }
}
.shop-hero__slide {
    position: absolute;
    inset: 0;
    display: block;
}
.shop-hero__slide[hidden] { display: none; }
.shop-hero__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.shop-hero__art--contain {
    bottom: 0;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 45%,
        transparent 68%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 45%,
        transparent 68%,
        transparent 100%
    );
}
.shop-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.04) 46%,
        rgba(0, 0, 0, 0.35) 64%,
        rgba(0, 0, 0, 0.72) 82%,
        rgba(0, 0, 0, 0.86) 100%
    );
}
.shop-hero__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-5) var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}
.shop-hero__pill {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-dark);
    background: var(--color-yellow-400);
    padding: 4px 10px;
    border-radius: var(--radius-full, 9999px);
}
.shop-hero__headline {
    margin: var(--space-1) 0 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold, 600);
    line-height: 1.1;
    color: var(--text-inverse);
    text-shadow: 0 1px 12px rgba(0,0,0,0.4);
    max-width: 22ch;
}
.shop-hero__blurb {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: rgba(255,255,255,0.86);
    max-width: 42ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shop-hero__foot {
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.shop-hero__cta {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    border-radius: var(--radius-full, 9999px);
    text-decoration: none;
    transition: opacity 0.15s;
}
.shop-hero__cta:hover { opacity: 0.92; }
.shop-hero__byline {
    font-size: var(--text-xs);
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.72);
}
/* Controls: overlaid on the image bottom-right, clear of the bottom-left CTA. */
.shop-hero__controls {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-inline-end: var(--space-4);
    bottom: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    z-index: 3;
    pointer-events: none;
}
.shop-hero__controls > * {
    pointer-events: auto;
}
.shop-hero__dots {
    display: flex;
    align-items: center;
    gap: 7px;
}
.shop-hero__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--surface-primary);
    opacity: 0.55;
    cursor: pointer;
    transition: width 0.2s, background 0.2s, opacity 0.2s;
}
.shop-hero__dot.is-active {
    width: 20px;
    background: var(--surface-primary);
    opacity: 1;
}
.shop-hero__arrows {
    display: flex;
    gap: var(--space-2);
}
.shop-hero__arrow {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 9999px);
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.shop-hero__arrow:hover {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-color: var(--border-strong, rgba(0,0,0,0.16));
}
.shop-hero__arrow iconify-icon { display: block; }

.shop-media {
    margin: var(--space-6) 0 var(--space-4);
}
.shop-media__head {
    margin-bottom: var(--space-5);
}
.shop-media__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.shop-media__counter {
    float: right;
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.shop-media__heading {
    margin: var(--space-2) 0 var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold, 800);
    color: var(--text-primary);
    line-height: 1.1;
}
.shop-media__subline {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-secondary);
}
.shop-media__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (min-width: 900px) {
    .shop-media__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Media card ── */
.media-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shop-card-shadow, 0 1px 3px rgba(0,0,0,0.06));
    transition: var(--shop-card-transition, transform 0.15s, box-shadow 0.15s);
    border: 1px solid rgba(0,0,0,0.04);
}
.media-card:hover {
    transform: var(--shop-card-hover-lift, translateY(-2px));
    box-shadow: var(--shop-card-shadow-hover, 0 6px 20px rgba(0,0,0,0.1));
}
.media-card__panel {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary);
}
.media-card--dark .media-card__panel { background: var(--accent-dark); }
.media-card--purple .media-card__panel { background: var(--accent-tertiary); }
.media-card--light .media-card__panel { background: var(--surface-secondary); }

.media-card__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
    object-position: center;
}

.media-card__cover--pudding-heroes {
    object-position: center top;
}

.media-card__pill {
    position: absolute;
    z-index: 1;
    top: var(--space-3);
    left: var(--space-3);
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-dark);
    background: var(--color-yellow-400);
    padding: 3px 9px;
    border-radius: var(--radius-full, 9999px);
}
.media-card__glyph {
    font-size: 40px;
    line-height: 0;
    color: var(--accent-primary);            /* teal/green glyph on dark card */
    display: flex;
}
.media-card--light .media-card__glyph { color: var(--accent-tertiary); }   /* purple atom */
.media-card--purple .media-card__glyph { color: var(--text-inverse); }
.media-card__glyph iconify-icon { display: block; }

.media-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.media-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.15;
}
.media-card__desc {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.media-card__foot {
    margin-top: auto;
    padding-top: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.media-card__byline {
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.media-card__cta {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--accent-dark);
    background: var(--accent-primary);
    padding: 7px 16px;
    border-radius: var(--radius-full, 9999px);
}
.media-card__cta--soft {
    color: var(--text-primary);
    background: var(--surface-secondary);
    border: 1px solid rgba(0,0,0,0.08);
}

/* =============================================================================
   MEDIA PDP — product page (Pudding Heroes: The Rising Child + stubs)
   ============================================================================= */
.media-pdp {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-5) var(--space-8);
}
/* Standalone media PDP renders under the fixed white topbar (partial mode has no bar) */
.media-pdp-body .media-pdp {
    padding-top: calc(var(--pdp-topbar-height, 56px) + var(--space-5));
}
.media-pdp__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-5);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.media-pdp__crumb--current { color: var(--text-primary); font-weight: var(--font-semibold); }
.media-pdp__crumb-sep { color: var(--text-muted); }

.media-pdp__cover {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-5);
    background: var(--surface-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.media-pdp__cover-img {
    width: 66%;
    max-width: 300px;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    margin: var(--space-4) 0;
}
.media-pdp__cover-glyph {
    font-size: 88px;
    color: var(--accent-tertiary);
    padding: var(--space-8);
    display: flex;
}

.media-pdp__pill {
    position: static;
    display: inline-block;
    margin-bottom: var(--space-3);
}
.media-pdp__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold, 800);
    color: var(--text-primary);
    line-height: 1.1;
}
.media-pdp__subtitle {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--text-secondary);
}
.media-pdp__meta {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.media-pdp__body {
    margin: 0 0 var(--space-5);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Format selector */
.media-pdp__format { margin-bottom: var(--space-5); }
.media-pdp__format-label {
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}
.media-pdp__format-opts {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.media-pdp__format-opt {
    flex: 1;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-primary);
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.media-pdp__format-opt:hover { border-color: rgba(0,0,0,0.2); }
.media-pdp__format-opt.is-selected {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}
.media-pdp__format-name {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}
.media-pdp__format-price {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.media-pdp__format-opt.is-selected .media-pdp__format-name,
.media-pdp__format-opt.is-selected .media-pdp__format-price {
    color: var(--text-inverse);
}

/* Actions */
.media-pdp__actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.media-pdp__buy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--accent-primary);
    color: var(--accent-dark);
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    border-radius: var(--radius-full, 9999px);
    text-decoration: none;
    transition: opacity 0.15s;
}
.media-pdp__buy:hover { opacity: 0.9; }
.media-pdp__buy--soft {
    background: var(--surface-secondary);
    color: var(--text-primary);
    border: 1px solid rgba(0,0,0,0.08);
}
.media-pdp__buy-icon { font-size: 18px; }
.media-pdp__secondary {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-full, 9999px);
    text-decoration: none;
    transition: border-color 0.15s;
}
.media-pdp__secondary:hover { border-color: rgba(0,0,0,0.25); }

/* Detail rows */
.media-pdp__details {
    margin: 0 0 var(--space-6);
    border-top: 1px solid rgba(0,0,0,0.08);
}
.media-pdp__detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.media-pdp__detail-key {
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}
.media-pdp__detail-val {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-align: right;
}

/* More from the universe */
.media-pdp__more { margin-top: var(--space-6); }
.media-pdp__more-head {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: var(--font-bold);
}

/* =============================================================================
   TOLL BENCH — the want-maker's shelf  (Steven 2026-07-22 mock)
   Sits ABOVE the MEDIA grid as a compact ROW list: small icon tile · pill +
   title + byline · action button on the right. Distinct from the media grid.
   Skill items are STUBS: only 'live' rows are links; the rest render a muted
   button (honesty law — no fake destinations). Design-token only. Color map:
   pill -> --color-yellow-400 ; live button -> --accent-primary ;
   light tile -> --surface-secondary ; dark tile -> --accent-dark.
   ============================================================================= */
.shop-toll {
    margin: var(--space-6) 0 var(--space-4);
}
.shop-toll__head {
    margin-bottom: var(--space-3);
}
.shop-toll__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.shop-toll__counter {
    float: right;
    font-size: var(--text-xs);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.shop-toll__heading {
    margin: var(--space-2) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold, 800);
    color: var(--text-primary);
    line-height: 1.1;
}
.shop-toll__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Toll row (compact) ── */
.toll-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
    border-radius: var(--radius-lg);
    box-shadow: var(--shop-card-shadow, 0 1px 3px rgba(0,0,0,0.06));
}
.toll-row--placeholder {
    border-style: dashed;
    border-color: var(--border-strong, rgba(0,0,0,0.12));
    background: transparent;
    box-shadow: none;
}
.toll-row__tile {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    color: var(--accent-tertiary);
    font-size: 24px;
}
.toll-row--dark .toll-row__tile {
    background: var(--accent-dark);
    color: var(--accent-primary);
}
.toll-row--placeholder .toll-row__tile { color: var(--text-muted); }
.toll-row__tile iconify-icon { display: block; }

.toll-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.toll-row__pill {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-dark);
    background: var(--color-yellow-400);
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
}
.toll-row__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.toll-row__byline {
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.3px;
}
.toll-row__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--accent-dark);
    background: var(--accent-primary);
    padding: 8px 20px;
    border-radius: var(--radius-full, 9999px);
    text-decoration: none;
    transition: opacity 0.15s;
}
.toll-row__btn:hover { opacity: 0.92; }
/* Stub button: shelved skill — reads as a status, not a live control. */
.toll-row__btn--soft {
    color: var(--text-muted);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    cursor: default;
}

/* Toll Bench row — PDP link area (tile + body). display:contents makes the
   <a> invisible to the parent flex container so the tile and body remain
   direct flex children (layout unchanged). color:inherit prevents the link
   blue bleeding through the title and byline tokens. */
.toll-row__pdp-link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

@media (max-width: 480px) {
    .toll-row {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 10px;
        padding: var(--space-3);
    }
    .toll-row__tile {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
    .toll-row__title {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .toll-row__btn {
        align-self: center;
        padding: 8px 12px;
        font-size: var(--text-xs);
        white-space: nowrap;
    }
}

/* =============================================================================
   MEDIA PDP — Amazon reader rating (Steven ruling 2026-07-22: keep the image)
   ============================================================================= */
.media-pdp__rating {
    display: block;
    margin: 0 0 var(--space-6);
    max-width: 320px;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
}
.media-pdp__rating-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}

/* Standalone /shop entrance/exit — mirrors .fullscreen-panel's slide
   (translateX 100%->0, 0.3s cubic-bezier(0.32,0.72,0,1)) so a hard-navigated
   shop opens/closes exactly like the utility-panel (old backpack) animation.
   Drawer-mounted shop skips this: the panel itself animates. */
.drawer-container .shop-root {
    animation: shop-slide-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer-container .shop-root.shop-root--closing {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes shop-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .drawer-container .shop-root { animation: none; }
    .drawer-container .shop-root.shop-root--closing { transition: none; }
}

/* ── Want Market section (2026-08-05) ────────────────────────────────────── */
/* The want-market section reuses .shop-media and .media-card shells.         */
/* .shop-media--want-market is a modifier; no new tokens needed.              */
.shop-media--want-market { margin-top: var(--space-8); }

/* Want PDP passport block */
.want-pdp__passport {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}
.want-pdp__passport-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 9999px);
    flex-shrink: 0;
    display: block;
}
.want-pdp__passport-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.want-pdp__passport-handle {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}
.want-pdp__passport-detail {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.want-pdp__proposals {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Want PDP: History block (re-posted wants) ── */
.want-pdp__history {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.want-pdp__history-heading {
    font: var(--font-label-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-3);
}
.want-pdp__history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.want-pdp__history-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
}
.want-pdp__history-label {
    font: var(--font-body-sm);
    color: var(--color-text);
}
.want-pdp__history-date {
    font: var(--font-label-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
}


/* ── Want Market card: odds row (Steven 2026-08-05) ── */
/* Sits between the description and the media-card__foot.
   Uses only existing tokens; target-trajectory__move* colours
   come from wants.css (shop.html loads it). */
.media-card__odds-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-1);
}
.media-card__odds-pill {
    font-size: 0.72rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    background: rgba(255,255,255,0.12);
    border-radius: var(--radius-sm, 4px);
    padding: 1px 6px;
    letter-spacing: 0.02em;
}
/* Scoped nudge so the move fits the media-card layout
   without overriding the canonical wants.css rule. */
.media-card__odds-move {
    font-size: 0.72rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ── Want PDP: probability card width fix (Steven 2026-08-05) ── */
/* GOTCHA from CLAUDE.md board page: margin:0 auto on a flex item
   cancels stretch. Explicit width:100% restores it. */
.want-pdp__probability-card {
    width: 100%;
    margin-top: var(--space-5);
    box-sizing: border-box;
}
.want-pdp__probability-card .target-trajectory {
    box-sizing: border-box;
}

/* ── Want PDP: passport identity link (Steven 2026-08-05) ── */
/* Wraps avatar + meta when the owner has a real node_handle.
   Inherits color and suppresses underline so it reads as a name,
   not a hyperlink. flex+gap mirrors the outer .want-pdp__passport row. */
.want-pdp__passport-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: inherit;
    text-decoration: none;
}
.want-pdp__passport-link:hover .want-pdp__passport-handle {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Want Market rows (2026-08-05) ────────────────────────────────────────── */
/* toll-row--want: identicon tile, title clamp, right-side move+button stack. */

/* Identicon image fills the tile edge-to-edge, inheriting tile border-radius. */
.toll-row__tile--identicon {
    padding: 0;
    overflow: hidden;
}
.toll-row__tile--identicon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Title clamp: 2 lines max, ellipsis. Overrides the single-line nowrap on
   .toll-row__title so longer want text wraps gracefully. */
.toll-row__title--clamp {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: 1.25;
}

/* Right-side stack: move indicator on top, View button below. */
.toll-row__want-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
}

/* Move indicator inside want row — keep it compact next to the button. */
.toll-row__want-move {
    font-size: var(--text-xs);
    white-space: nowrap;
}

/* Subline paragraph below the Want Market heading. */
.shop-toll__subline {
    margin: var(--space-1) 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .toll-row__title--clamp {
        -webkit-line-clamp: 2;
    }
    .toll-row__want-right {
        align-items: flex-end;
    }
}

/* ── Want Market section (2026-08-05) ────────────────────────────────────── */
/* The want-market section reuses .shop-media and .media-card shells.         */
/* .shop-media--want-market is a modifier; no new tokens needed.              */
.shop-media--want-market { margin-top: var(--space-8); }

/* Want PDP passport block */
.want-pdp__passport {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}
.want-pdp__passport-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 9999px);
    flex-shrink: 0;
    display: block;
}
.want-pdp__passport-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.want-pdp__passport-handle {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}
.want-pdp__passport-detail {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.want-pdp__proposals {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Want Market 6-row clamp + subline toggle (2026-08-06) ─────────────────
   In the default (All) view, only the first 6 want rows are visible.
   When the want-market pill is active (#shop-root gains .shop-category--want-market),
   all loaded rows show and the subline swaps to "Showing the last 50."
   CSS gives this for free when the pill is toggled back off.
   ─────────────────────────────────────────────────────────────────────────── */

/* Hide rows 7+ in the default view */
#shop-root:not(.shop-category--want-market) #want-market .shop-toll__list .toll-row--want:nth-child(n+7) {
    display: none;
}

/* Subline text toggle */
.shop-wm-subline--filtered { display: none; }
#shop-root.shop-category--want-market .shop-wm-subline--default { display: none; }
#shop-root.shop-category--want-market .shop-wm-subline--filtered { display: inline; }

/* See-more button inherits the link style from .shop-rail__see-all */
button.shop-rail__see-all {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}