/* =============================================================================
   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); }
}
/* The gutter is for the shop's content column (div.shop-page), never the
   page: shop.html also puts .shop-page on <body> (body_class), and on phones,
   where the standalone /shop flows in the window, that body padding left a
   strip of the page showing down both edges (Steven, tollbench.com, 2026-10-02).
   The utility panel never had it, its body carries no .shop-page. */
body.shop-page { padding: 0; }
.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;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    background: var(--color-dark-800);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* THE WANT MARKET COVERS THE TOP (Steven 2026-10-13: "The shop here is
   supposed to cover the top always"). Opened as a page, the site header
   (LAYOUT_CARDS, components/_layout_cards_header.html) steps aside and the
   shop's own bar is the top of the screen, sticky while the page scrolls.
   In the app's slide-over panel the panel already covers the header. Only
   the shop's own page wears body.shop-page. */
body.shop-page .lc-header[data-layout-cards-header] { display: none; }
/* Wide screens: the drawer starts under the header (layout-cards-header.css);
   with the header aside, the shop's drawer starts at the top. */
@media (min-width: 768px) {
    body.shop-page.drawer-layout .app-shell--layout-cards .drawer-panel--right { top: 0 !important; }
}

/* Title typography comes from the shared .toll-bench-header__title class
   (layout.css, Steven 2026-08-03); this keeps slot geometry. Toll Bench
   Shop (Steven 2026-10-01): the Book of Houses brand badge that sat to the
   left is retired, so the masthead sits at the bar's own left padding.

   THE TARGET AT THE SITE HEADER'S SIZE (Steven 2026-10-13: "Get the target
   to be the right size! This is the Want Market, I love this page, it has
   to be easy and sing."). The target drew at .76em of the title, 15px on a
   phone and 23px wide, a small ring beside big words, while the site
   header's mark is a 40px disc. Now the masthead wears the header's own
   mark (components/_toll_mark.html, rail-nav.css: the yellow disc at
   --boh-rail-control-size, the outer ring 85% of it), sitting where the
   header's sits: the bar's left padding (the header's --space-4, --space-3
   at 390px and under; the bar pads 12px up to 720px, so 391 to 720 adds
   --space-1), centred on the bar. The words start where "TOLL Bench"
   starts (the header's mark margin --space-2, then its gap --space-3,
   --space-2 at 390px and under) and wear the header wordmark's face, size
   and weight (.market-brand__name: --font-heading, --text-2xl,
   --font-extrabold) at every width. The 40px slot is the disc's, so the
   bar keeps its height. The back control (a section page, an open product)
   keeps its ringed 22px target, the back button's own circle and the twin
   of the X's; only its "Want Market" wears the same 24px words, so the bar
   reads the same in both states. */
.shop-chrome__wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    height: 40px;
    margin-left: 0;
}
.shop-chrome__wordmark .shop-chrome__mark {
    display: inline-flex;
    flex: 0 0 auto;
    margin-right: var(--space-2);
}
.shop-chrome .shop-chrome__wordmark.toll-bench-header__title,
.shop-chrome .shop-chrome__back-title.toll-bench-header__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-extrabold, 800);
    line-height: 1;
}
.shop-chrome__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 391px) and (max-width: 720px) {
    .shop-chrome__wordmark { margin-left: var(--space-1); }
}
@media (max-width: 390px) {
    .shop-chrome__wordmark { gap: 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; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
}

.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 masthead, 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); }

/* Back control reads "<- [target] Shop" (Steven 2026-09-02; the Toll Bench
   target replaced the Book of Houses glyph 2026-10-01): the arrow, the ringed
   Toll Bench target, and the wordmark type. The button font rules above are
   mono/uppercase; .toll-bench-header__title on the label resets both, so the
   word matches the "Toll Bench Shop" masthead. */
.shop-chrome__back-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-10);
    height: var(--size-10);
    flex: 0 0 auto;
    border: 2px solid var(--btn-glass-border);
    border-radius: var(--radius-full);
}
/* The target glyph would inherit the button's 12px text size through
   .toll-brand__glyph's 1em box; hold it at the 22px the old glyph drew at.
   Two classes deep because toll-wordmark.css (which sets the 1em) is linked
   again in the body by the bullseye partial, after this file. */
.shop-chrome__back-brand .shop-chrome__back-glyph { width: 22px; height: 22px; }
.shop-chrome__back-title { color: var(--color-white); }
.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-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;
}
/* Explicit full-bleed art (art_fit: cover). Centered, not top-anchored: the
   Want Market photo is square, and a top crop cut the sign off (2026-09-02). */
.shop-hero__art--cover {
    object-position: center;
}
.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%
    );
}

/* Desktop: the near-square hero art was letterboxed inside the 16/11 viewport,
   so the slide sat in dark bars either side (Steven 2026-09-02). Fill the card
   width instead. The bottom mask STAYS on these slides - they are book covers
   with type baked in, and the fade is what keeps that type from colliding with
   the overlay copy. Must sit AFTER the rule above: same specificity, and a
   media query adds none. */
@media (min-width: 640px) {
    .shop-hero__art--contain {
        object-fit: cover;
        /* Pulled up 40px off the top edge so the whole book title clears the
           bottom fade (Steven 2026-09-02). */
        object-position: center -40px;
        /* Fade later than the mobile mask: the wide crop puts the cover title
           lower in the frame, and the scrim already carries the copy. */
        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 55%,
            transparent 78%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 55%,
            transparent 78%,
            transparent 100%
        );
    }
}
/* THE WHOLE PICTURE IS THE LINK (Steven 2026-10-14 morning: "click
   anywhere on the image to go to the PDP page"): the slide's own href over
   the whole slide; the scrim and the words let a tap through to it, the
   button and the byline keep their own. */
.shop-hero__art-link {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
}
.shop-hero__scrim,
.shop-hero__copy { pointer-events: none; }
.shop-hero__copy a,
.shop-hero__copy button { pointer-events: auto; }
.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__pill--work {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--size-6);
    box-sizing: border-box;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    padding: var(--space-1) var(--space-2);
    white-space: nowrap;
}
.media-card__pill--work iconify-icon {
    display: block;
    width: var(--size-4);
    height: var(--size-4);
    flex: none;
    font-size: var(--text-base);
}
.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);
}

/* A RATED CARD (Steven 2026-10-13 afternoon: the Signal House stay prints
   "285" and five stars, in the text colour, where the badge was, tapping
   straight to its Airbnb page; feed/_media_card.html). A link holds no
   link, so the card is a box: its title link covers the whole card, the
   rating's own link sits above it. */
.media-card--rated { position: relative; }
.media-card__link { color: inherit; text-decoration: none; }
.media-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.media-card__link:focus-visible { outline: none; }
.media-card__link:focus-visible::after { outline: 3px solid var(--highlight-purple); outline-offset: 2px; }
.media-card__rating {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--size-6);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.media-card__rating:hover .media-card__rating-n { text-decoration: underline; }
.media-card__rating:focus-visible { outline: 3px solid var(--highlight-purple); outline-offset: 2px; border-radius: var(--radius-sm); }
.media-card__stars { display: inline-flex; gap: 1px; color: var(--text-primary); font-size: var(--text-sm); }
.media-card__stars iconify-icon { display: block; }

/* =============================================================================
   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__pill.media-card__pill--work { display: inline-flex; }
.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); }
}
/* Opened by the public pill's ClipReveal circle (shop.html via=pill, Steven
   2026-10-02): the circle was the entrance, as it is for the utility panel,
   so the page does not slide in a second time. */
.drawer-container .shop-root.shop-root--circle { animation: none; }
@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;
}

/* Certified tag (Steven 2026-10-03): one small yellow/ink pill on every shop
   card, "Certified" with the real count of certified deliveries beside it. */
.certified-tag { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full, 9999px); background: var(--color-yellow-400); color: var(--accent-dark); font-family: var(--font-heading); font-size: 10px; font-weight: var(--font-bold); letter-spacing: 1px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.certified-tag__glyph { display: block; flex: 0 0 auto; width: 1.1em; height: 1.1em; }
.certified-tag__n { font-weight: var(--font-extrabold, 800); }
.media-card__body > .certified-tag { margin-bottom: var(--space-1); }