/* =====================================================================
   VinDevs Assets, discovery-first marketplace experience.
   Loaded after the shell cascade (render → design-system → vd-console →
   dev-os) on the three asset routes only. Consumes Developer OS tokens;
   never invents a parallel palette. Namespace: .am-* (asset market),
   .wizx-* (wizard extensions).

   The layout thesis: thumbnails are the brightest objects on the page,
   chrome recedes to slate, merchandise carries the color. One electric
   blue accent for actions/selection, emerald only for savings, amber
   only for stars, gold only for premium sellers.
   ===================================================================== */

.am-page {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3.4vw, 46px);
    padding-bottom: 72px;
}

/* ------------------------------------------------------------------ */
/* Command bar, search is the front door, keyboard-first ("/")        */
/* ------------------------------------------------------------------ */

.am-masthead {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: clamp(18px, 2.6vw, 34px);
}

.am-masthead__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.am-masthead__title h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

.am-masthead__title p {
    margin: 6px 0 0;
    color: var(--text-subtle);
    font-size: 0.95rem;
}

.am-masthead__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.am-commandbar {
    position: relative;
    z-index: 40;
}

.am-searchbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 0 10px 0 18px;
    border-radius: 16px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.16));
    background: var(--bg-surface, rgba(20, 25, 32, 0.92));
    box-shadow: var(--shadow-soft);
    transition:
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-searchbox:focus-within {
    border-color: color-mix(in oklab, var(--ds-accent) 55%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in oklab, var(--ds-accent) 16%, transparent),
        var(--shadow-soft);
}

.am-searchbox > svg {
    width: 20px;
    height: 20px;
    color: var(--text-subtle);
    flex: none;
}

.am-searchbox input {
    width: 100%;
    min-height: 56px;
    border: 0;
    background: transparent;
    color: var(--text-strong);
    font: inherit;
    font-size: 1.02rem;
    outline: none;
}

.am-searchbox input::placeholder {
    color: var(--text-subtle);
}

.am-searchbox input::-webkit-search-cancel-button {
    display: none;
}

.am-searchbox__clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-subtle);
    font-size: 1.05rem;
    cursor: pointer;
}

.am-searchbox__clear:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-strong);
}

.am-searchbox.has-value .am-searchbox__clear {
    display: inline-flex;
}

.am-searchbox__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 7px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.18));
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-subtle);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

/* Instant results dropdown */
.am-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    max-height: min(66vh, 560px);
    overflow-y: auto;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--border-strong, rgba(194, 205, 220, 0.24));
    background: var(--bg-glass, rgba(14, 18, 24, 0.97));
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow-strong);
}

.am-suggest.is-open {
    display: block;
    animation: amDrop 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes amDrop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.am-suggest__group {
    padding: 6px 0 2px;
}

.am-suggest__label {
    display: block;
    padding: 4px 10px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.am-suggest__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.am-suggest__item:hover,
.am-suggest__item.is-hot {
    background: var(--ds-surface-selected, rgba(84, 128, 255, 0.14));
    color: var(--text-strong);
}

.am-suggest__thumb {
    width: 44px;
    height: 30px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(4, 7, 10, 0.7);
    flex: none;
}

.am-suggest__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.am-suggest__item strong {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-suggest__item small {
    display: block;
    margin-top: 1px;
    font-size: 0.78rem;
    color: var(--text-subtle);
}

.am-suggest__item .am-suggest__price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
    font-size: 0.9rem;
}

.am-suggest__item svg {
    width: 16px;
    height: 16px;
    color: var(--text-subtle);
    flex: none;
}

.am-suggest__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 10px 8px;
}

/* ------------------------------------------------------------------ */
/* Filter language: chips, segmented sort, active pills                */
/* ------------------------------------------------------------------ */

.am-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.18));
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.87rem;
    font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
    transition:
        border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
        color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-chip:hover {
    border-color: var(--border-strong, rgba(194, 205, 220, 0.3));
    color: var(--text-strong);
}

.am-chip[aria-pressed="true"],
.am-chip.is-on {
    border-color: color-mix(in oklab, var(--ds-accent) 58%, transparent);
    background: color-mix(in oklab, var(--ds-accent) 16%, transparent);
    color: var(--text-strong);
}

.am-chip:disabled {
    opacity: 0.45;
    cursor: default;
}

.am-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.am-filterbar__divider {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: var(--border-soft, rgba(194, 205, 220, 0.16));
}

/* Sort segments (browse results + PDP review sort) now ride the shared
   .vd-seg primitive from design-system.css, the old .am-sortseg skin
   retired with the July 2026 icon-condensation pass. */

.am-results__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.am-typechips {
    display: flex;
    gap: 6px;
}

.am-activebar {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.am-activebar.is-on {
    display: flex;
}

.am-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 6px 0 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--ds-accent) 45%, transparent);
    background: color-mix(in oklab, var(--ds-accent) 13%, transparent);
    color: var(--text-strong);
    font-size: 0.82rem;
    font-weight: 600;
}

.am-pill button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.am-pill button:hover {
    background: rgba(255, 255, 255, 0.16);
}

.am-activebar__clear {
    border: 0;
    background: transparent;
    color: var(--text-subtle);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.am-activebar__clear:hover {
    color: var(--text-strong);
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */

.am-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.13));
    background: var(--bg-surface, rgba(22, 27, 34, 0.85));
    overflow: hidden;
    transition:
        transform 190ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-card:hover,
.am-card:focus-within {
    transform: translateY(-3px);
    border-color: var(--border-strong, rgba(194, 205, 220, 0.3));
    box-shadow: 0 18px 40px oklch(8% 0.02 252 / 0.4);
}

.am-card--styled {
    border-color: color-mix(
        in oklab,
        var(--decoration-accent, transparent) 38%,
        var(--border-soft, rgba(194, 205, 220, 0.13))
    );
}

.am-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: rgba(4, 7, 10, 0.72);
    overflow: hidden;
}

.am-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-card:hover .am-card__media img {
    transform: scale(1.045);
}

.am-card__noimg {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    color: var(--text-subtle);
}

.am-card__noimg svg {
    width: 34px;
    height: 34px;
    opacity: 0.55;
}

.am-card__media.is-missing .am-card__noimg,
.am-card__media:not(:has(img)) .am-card__noimg {
    display: flex;
}

.am-card__wm {
    position: absolute;
    right: 8px;
    bottom: 38px;
    max-width: 60%;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(6, 9, 13, 0.55);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-card__wm--img {
    padding: 0;
    background: transparent;
}

.am-card__wm--img img {
    max-width: 84px;
    max-height: 28px;
    opacity: 0.6;
}

.am-card__badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 6px;
    pointer-events: none;
}

.am-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    backdrop-filter: blur(6px);
}

.am-badge--pick {
    background: color-mix(in oklab, var(--ds-accent) 82%, black);
    color: var(--ds-accent-ink, #fff);
}

.am-badge--new {
    background: rgba(10, 14, 20, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--text-strong);
}

.am-badge--deal {
    background: color-mix(in oklab, var(--ds-success) 30%, rgba(6, 10, 8, 0.85));
    color: color-mix(in oklab, var(--ds-success) 88%, white);
}

.am-card__price {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(8, 11, 16, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    color: var(--text-strong);
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.am-card__price s {
    color: var(--text-subtle);
    font-size: 0.76rem;
    font-weight: 500;
}

.am-card__actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(-2px);
    transition:
        opacity 170ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-card:hover .am-card__actions,
.am-card:focus-within .am-card__actions {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: none) {
    .am-card__actions {
        opacity: 1;
        transform: none;
    }
}

.am-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 11, 16, 0.82);
    backdrop-filter: blur(6px);
    color: var(--text-muted);
    cursor: pointer;
    transition:
        color 150ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Shell layers carry generic `button` padding at class-level specificity
   on some pages (portfolios, marketplace); the doubled class keeps the
   icon-button geometry authoritative everywhere it ships. */
.am-iconbtn.am-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
}

.am-paddle.am-paddle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
}

/* Feature-slab save button reads larger than the card-corner icons.
   (Geometry lives here, not inline, so touch widths can grow at phone sizes.) */
.am-iconbtn.am-iconbtn--feature {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
}

.am-searchbox__clear.am-searchbox__clear {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    margin: 0;
}

.am-chip.am-chip {
    min-height: 34px;
    padding: 0 14px;
    margin: 0;
}

.am-iconbtn svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.am-iconbtn:hover {
    color: var(--text-strong);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.06);
}

.am-iconbtn:active {
    transform: scale(0.96);
}

.am-iconbtn.is-on,
.am-pdp-save.is-on {
    color: color-mix(in oklab, var(--ds-danger) 90%, white);
    border-color: color-mix(in oklab, var(--ds-danger) 55%, transparent);
}

.am-iconbtn.is-on svg path,
.am-pdp-save.is-on svg path {
    fill: currentColor;
}

.am-iconbtn.is-in {
    color: color-mix(in oklab, var(--ds-accent) 92%, white);
    border-color: color-mix(in oklab, var(--ds-accent) 55%, transparent);
}

/* Save-burst: one quiet pulse when a heart lands. */
@keyframes amPulse {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.22);
    }
    100% {
        transform: scale(1);
    }
}

.am-iconbtn.just-saved,
.am-pdp-save.just-saved {
    animation: amPulse 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 11px 13px 13px;
}

.am-card__scan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.am-card__cat {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.am-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.am-card__rating svg {
    width: 13px;
    height: 13px;
    color: var(--ds-warning, #e8c268);
}

.am-card__rating em {
    font-style: normal;
    font-weight: 500;
    color: var(--text-subtle);
    font-size: 0.74rem;
}

.am-card__rating--none {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-subtle);
}

.am-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    color: var(--text-strong);
    font-size: 0.98rem;
    font-weight: 640;
    line-height: 1.3;
    text-decoration: none;
}

.am-card__title:hover {
    color: color-mix(in oklab, var(--ds-accent) 65%, var(--text-strong));
}

/* Whole-card click affordance without nesting interactive elements. */
.am-card__title::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.am-card__seller {
    position: relative;
    z-index: 2;
}

.am-card__seller {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-subtle);
    min-width: 0;
}

.am-card__by {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-card__sold {
    flex: none;
    margin-left: auto;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.am-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ds-accent) 85%, black);
    color: var(--ds-accent-ink, #fff);
}

.am-verified svg {
    width: 9px;
    height: 9px;
}

/* ------------------------------------------------------------------ */
/* Featured slab, the front table. One asset, full attention.         */
/* ------------------------------------------------------------------ */

.am-feature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(18px, 2.4vw, 28px);
    border-radius: 20px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.14));
    overflow: hidden;
    isolation: isolate;
}

.am-feature__backdrop {
    position: absolute;
    inset: -40px;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(64px) saturate(1.1) brightness(0.42);
    opacity: 0.75;
}

.am-feature__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        oklch(12% 0.014 252 / 0.55),
        oklch(12% 0.014 252 / 0.92)
    );
}

.am-feature__media {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: rgba(4, 7, 10, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px oklch(6% 0.02 252 / 0.5);
}

.am-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Broken/absent artwork: the slab falls back to a full-width editorial. */
.am-feature.am-feature--noimg {
    grid-template-columns: 1fr;
}

.am-feature--noimg .am-feature__media {
    display: none;
}

.am-feature__media:hover img {
    transform: scale(1.03);
}

.am-feature__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

.am-feature__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--ds-accent) 80%, white);
}

.am-feature__eyebrow svg {
    width: 15px;
    height: 15px;
}

.am-feature__info h2 {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    line-height: 1.1;
    color: var(--text-strong);
}

.am-feature__info h2 a {
    color: inherit;
    text-decoration: none;
}

.am-feature__info h2 a:hover {
    color: color-mix(in oklab, var(--ds-accent) 55%, var(--text-strong));
}

.am-feature__info > p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: 52ch;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.am-feature__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 14px;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.am-feature__proof .am-card__rating svg {
    width: 14px;
    height: 14px;
}

.am-feature__proof .am-verified {
    margin-left: 2px;
}

.am-feature__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.am-feature__price {
    font-size: 1.5rem;
    font-weight: 750;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.am-feature__price s {
    margin-left: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-subtle);
}

/* ------------------------------------------------------------------ */
/* Shelves & rails                                                     */
/* ------------------------------------------------------------------ */

.am-shelf {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.am-shelf__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.am-shelf__head h2 {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text-strong);
}

.am-shelf__head p {
    margin: 3px 0 0;
    font-size: 0.85rem;
    color: var(--text-subtle);
}

.am-shelf__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.am-shelf__all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    color: var(--text-subtle);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-shelf__all svg {
    width: 14px;
    height: 14px;
    transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-shelf__all:hover {
    color: color-mix(in oklab, var(--ds-accent) 75%, white);
}

.am-shelf__all:hover svg {
    transform: translateX(2px);
}

.am-paddle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.16));
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: pointer;
    transition:
        border-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
        color 150ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-paddle svg {
    width: 16px;
    height: 16px;
}

.am-paddle:hover:not(:disabled) {
    border-color: var(--border-strong, rgba(194, 205, 220, 0.3));
    color: var(--text-strong);
}

.am-paddle:disabled {
    opacity: 0.35;
    cursor: default;
}

.am-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(216px, 22vw, 262px);
    gap: 14px;
    overflow-x: auto;
    padding: 4px;
    margin: -4px;
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
    scrollbar-width: none;
    /* Edge fades hint "there's more" without chrome. */
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        black 4px,
        black calc(100% - 28px),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        black 4px,
        black calc(100% - 28px),
        transparent 100%
    );
}

.am-rail::-webkit-scrollbar {
    display: none;
}

.am-rail > .am-card {
    scroll-snap-align: start;
}

.am-rail:focus-visible {
    outline: 2px solid var(--button-focus-ring, var(--ds-accent));
    outline-offset: 2px;
    border-radius: 12px;
}

/* ------------------------------------------------------------------ */
/* Creators strip                                                      */
/* ------------------------------------------------------------------ */

.am-creators {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px;
    margin: -4px;
    scrollbar-width: none;
}

.am-creators::-webkit-scrollbar {
    display: none;
}

.am-creator {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    padding: 12px 16px 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.13));
    background: var(--bg-surface, rgba(22, 27, 34, 0.85));
    text-decoration: none;
    transition:
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-creator:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong, rgba(194, 205, 220, 0.3));
}

.am-creator__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--ds-surface-selected, oklch(26% 0.045 258));
    color: var(--text-strong);
    font-weight: 700;
    font-size: 1.05rem;
}

.am-creator.is-verified .am-creator__avatar {
    box-shadow: 0 0 0 2px
        color-mix(in oklab, var(--ds-accent) 65%, transparent);
}

.am-creator.is-premium .am-creator__avatar {
    box-shadow: 0 0 0 2px rgba(232, 182, 76, 0.7);
}

.am-creator__meta {
    min-width: 0;
}

.am-creator__meta strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-strong);
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-creator__meta span {
    display: block;
    margin-top: 2px;
    color: var(--text-subtle);
    font-size: 0.78rem;
}

/* ------------------------------------------------------------------ */
/* Results mode (search / filters)                                     */
/* ------------------------------------------------------------------ */

.am-results {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.am-page.is-searching .am-results {
    display: flex;
}

.am-page.is-searching .am-browse {
    display: none;
}

.am-browse {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3.4vw, 46px);
}

.am-results__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.am-results__count {
    font-size: 0.92rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.am-results__count strong {
    color: var(--text-strong);
    font-weight: 700;
}

.am-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
}

.am-loadmore {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
}

.am-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 20px;
    border-radius: 16px;
    border: 1px dashed var(--border-soft, rgba(194, 205, 220, 0.22));
    text-align: center;
}

.am-empty svg {
    width: 32px;
    height: 32px;
    color: var(--text-subtle);
}

.am-empty h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 1.1rem;
}

.am-empty p {
    margin: 0;
    color: var(--text-subtle);
    font-size: 0.92rem;
    max-width: 44ch;
}

.am-empty__actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* Skeletons */
.am-skel {
    border-radius: 14px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.1));
    background: var(--bg-surface, rgba(22, 27, 34, 0.6));
    overflow: hidden;
}

.am-skel::before {
    content: "";
    display: block;
    aspect-ratio: 16 / 10;
    background: rgba(255, 255, 255, 0.04);
}

.am-skel::after {
    content: "";
    display: block;
    height: 64px;
    margin: 12px;
    border-radius: 8px;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0.035) 30%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.035) 70%
    );
    background-size: 220% 100%;
    animation: amShimmer 1.4s ease-in-out infinite;
}

@keyframes amShimmer {
    from {
        background-position: 120% 0;
    }
    to {
        background-position: -120% 0;
    }
}

/* ------------------------------------------------------------------ */
/* Cart drawer (existing ids, new skin)                                */
/* ------------------------------------------------------------------ */

.am-cartbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.am-cartbtn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--ds-accent) 85%, black);
    color: var(--ds-accent-ink, #fff);
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.asset-cart.am-cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    width: min(400px, 94vw);
    padding: 20px;
    gap: 16px;
    border-left: 1px solid var(--border-strong, rgba(194, 205, 220, 0.22));
    background: var(--bg-glass, rgba(13, 16, 22, 0.98));
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-strong);
    transform: translateX(calc(100% + 24px));
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    visibility: hidden;
}

.asset-cart.am-cart.open {
    transform: translateX(0);
    visibility: visible;
}

.am-cart .asset-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.am-cart .asset-cart-header h3 {
    margin: 2px 0 0;
    font-size: 1.2rem;
    color: var(--text-strong);
}

.am-cart .asset-cart-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.14));
    background: rgba(255, 255, 255, 0.03);
}

.am-cart .asset-cart-summary strong {
    display: block;
    margin-top: 2px;
    color: var(--text-strong);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.am-cart .asset-cart-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.am-cart .asset-cart-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.12));
    background: rgba(255, 255, 255, 0.025);
}

.am-cart .asset-cart-thumb {
    width: 64px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(4, 7, 10, 0.72);
}

.am-cart .asset-cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.am-cart .asset-cart-title {
    display: block;
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-cart .asset-cart-subtle {
    display: block;
    color: var(--text-subtle);
    font-size: 0.76rem;
    margin-top: 1px;
}

.am-cart .asset-cart-price {
    display: block;
    margin-top: 3px;
    color: var(--text-strong);
    font-weight: 700;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

/* Per-item remove is a .vd-iconbtn--sm now; pin the square geometry against
   page-scoped generic button padding carried by the shell layers. */
.am-cart .asset-cart-remove.vd-iconbtn {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    margin: 0;
}

.am-cart .asset-cart-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.am-cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: oklch(8% 0.015 252 / 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease-out;
}

.am-cart-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/* Toast (added-to-cart / saved feedback)                              */
/* ------------------------------------------------------------------ */

.am-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-strong, rgba(194, 205, 220, 0.24));
    background: var(--bg-glass, rgba(14, 18, 24, 0.97));
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-strong);
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 600;
    transform: translate(-50%, 16px);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-toast.is-on {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.am-toast svg {
    width: 16px;
    height: 16px;
    color: var(--ds-success);
}

.am-toast button {
    border: 0;
    background: transparent;
    color: color-mix(in oklab, var(--ds-accent) 80%, white);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Detail page (PDP) extensions                                        */
/* ------------------------------------------------------------------ */

.am-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.am-trust a {
    color: inherit;
    text-decoration: none;
}

.am-trust a:hover {
    color: var(--text-strong);
}

.am-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.am-trust__item svg {
    width: 15px;
    height: 15px;
    color: var(--text-subtle);
}

.am-trust__item .is-star {
    color: var(--ds-warning, #e8c268);
}

.am-sectionnav {
    position: sticky;
    top: 68px;
    z-index: 30;
    display: flex;
    gap: 4px;
    padding: 6px;
    margin: 8px 0 4px;
    border-radius: 14px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.14));
    background: var(--bg-glass, rgba(14, 18, 24, 0.9));
    backdrop-filter: blur(16px);
    overflow-x: auto;
    scrollbar-width: none;
}

.am-sectionnav::-webkit-scrollbar {
    display: none;
}

.am-sectionnav a {
    flex: none;
    padding: 7px 13px;
    border-radius: 9px;
    color: var(--text-subtle);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
        color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.am-sectionnav a:hover {
    color: var(--text-strong);
}

.am-sectionnav a.is-here {
    background: var(--ds-surface-selected, rgba(84, 128, 255, 0.16));
    color: var(--text-strong);
}

/* Review summary: big number + distribution bars = evidence, not prose. */
.am-revsum {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.13));
    background: rgba(255, 255, 255, 0.025);
    margin-bottom: 16px;
}

.am-revsum__score {
    text-align: center;
}

.am-revsum__score strong {
    display: block;
    font-size: 2.6rem;
    font-weight: 750;
    line-height: 1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.am-revsum__score .am-stars {
    margin-top: 6px;
}

.am-revsum__score small {
    display: block;
    margin-top: 4px;
    color: var(--text-subtle);
    font-size: 0.8rem;
}

.am-stars {
    display: inline-flex;
    gap: 2px;
}

.am-stars svg {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.18);
}

.am-stars svg.is-on {
    color: var(--ds-warning, #e8c268);
}

.am-revsum__bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.am-revbar {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.am-revbar__track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.am-revbar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ds-warning, #e8c268);
}

.am-revtools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.am-qa-flag {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    background: color-mix(in oklab, var(--ds-accent) 20%, transparent);
    color: color-mix(in oklab, var(--ds-accent) 82%, white);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Lightbox */
.am-lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    background: oklch(8% 0.015 252 / 0.92);
    backdrop-filter: blur(10px);
}

.am-lightbox.is-open {
    display: flex;
}

.am-lightbox img {
    max-width: min(92vw, 1400px);
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: var(--shadow-strong);
}

.am-lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(10, 14, 20, 0.7);
    color: var(--text-strong);
    font-size: 1.3rem;
    cursor: pointer;
}

.am-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 60px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(10, 14, 20, 0.6);
    color: var(--text-strong);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.am-lightbox__nav svg {
    width: 20px;
    height: 20px;
}

.am-lightbox__nav--prev {
    left: 18px;
}

.am-lightbox__nav--next {
    right: 18px;
}

.am-lightbox__count {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.asset-pdp-stage .asset-pdp-main {
    cursor: zoom-in;
}

/* Related rails on the PDP reuse the shelf language full-width. */
.am-pdp-rails {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 38px);
    margin-top: clamp(24px, 3vw, 38px);
}

/* The PDP page is a 2-col grid (design-system.css) that auto-places
   children; pin the new elements so the nav sits between gallery and
   body, and the rails span the full width under everything. */
body[data-page^="marketplace"] .asset-detail-page--pdp .am-sectionnav {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}

body[data-page^="marketplace"] .asset-detail-page--pdp .asset-pdp-body {
    grid-row: 3;
}

body[data-page^="marketplace"] .asset-detail-page--pdp .asset-pdp-buybox {
    grid-row: 1 / span 3;
}

body[data-page^="marketplace"] .asset-detail-page--pdp .am-pdp-rails {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 0;
}

@media (max-width: 900px) {
    body[data-page^="marketplace"] .asset-detail-page--pdp .am-sectionnav,
    body[data-page^="marketplace"] .asset-detail-page--pdp .asset-pdp-body,
    body[data-page^="marketplace"] .asset-detail-page--pdp .am-pdp-rails {
        grid-column: 1;
        grid-row: auto;
    }

    body[data-page^="marketplace"] .asset-detail-page--pdp .asset-pdp-buybox {
        grid-row: auto;
    }
}

/* ------------------------------------------------------------------ */
/* Wizard extensions: showcase column + coach + quality meter          */
/* ------------------------------------------------------------------ */

.wizx-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    width: min(1120px, 100%);
    margin: 32px auto 64px;
    align-items: start;
}

@media (min-width: 1080px) {
    .wizx-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .wizx-layout .sell-wizard-shell {
        width: 100%;
        margin: 0;
    }

    .wizx-showcase {
        position: sticky;
        top: 84px;
    }
}

.wizx-showcase {
    display: none;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 1080px) {
    .wizx-showcase {
        display: flex;
    }
}

.wizx-showcase__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.wizx-showcase__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-soft, rgba(194, 205, 220, 0.14));
}

.wizx-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wizx-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-success);
    animation: wizxBlink 2.4s ease-in-out infinite;
}

@keyframes wizxBlink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

/* Showcase preview card: render.css scopes .asset-preview-card under
   .wiz-review, so the persistent showcase carries its own skin. */
.wizx-showcase .asset-preview-card {
    border-radius: 16px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.15));
    background: var(--bg-surface, rgba(22, 27, 34, 0.9));
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.wizx-showcase .asset-preview-card.decorated {
    border-color: color-mix(
        in oklab,
        var(--decoration-accent, transparent) 40%,
        var(--border-soft, rgba(194, 205, 220, 0.15))
    );
}

.wizx-showcase .asset-preview-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: rgba(4, 7, 10, 0.72);
    overflow: hidden;
}

.wizx-showcase .asset-deco-layer {
    position: absolute;
    inset: 0;
}

.wizx-showcase .asset-preview-thumb {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-subtle);
    font-size: 0.86rem;
}

.wizx-showcase .asset-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wizx-showcase .asset-preview-live {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 9px;
    border-radius: 7px;
    background: rgba(8, 11, 16, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.wizx-showcase .asset-preview-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 15px 15px;
}

.wizx-showcase .asset-preview-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.wizx-showcase .asset-preview-body h3 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.wizx-showcase .asset-preview-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.wizx-showcase .asset-preview-price {
    font-weight: 750;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.wizx-showcase .asset-preview-seller {
    font-size: 0.8rem;
    color: var(--text-subtle);
}

.wizx-showcase .asset-preview-summary {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Quality meter, concrete factors, no vague score */
.wizx-quality {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.14));
    background: var(--bg-surface, rgba(20, 25, 32, 0.9));
}

.wizx-quality__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wizx-quality__head span {
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--text-muted);
}

.wizx-quality__head strong {
    font-size: 0.9rem;
    font-weight: 750;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.wizx-quality__track {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.wizx-quality__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--ds-accent);
    transition:
        width 340ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wizx-quality__fill.is-strong {
    background: var(--ds-success);
}

.wizx-quality__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-subtle);
}

.wizx-quality__hint strong {
    color: var(--text-muted);
    font-weight: 650;
}

/* Coach line under each step: the why, stated as evidence */
.wiz-why {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 56ch;
    margin: 2px 0 0;
    padding: 10px 13px;
    border-radius: 11px;
    border: 1px solid color-mix(in oklab, var(--ds-accent) 22%, transparent);
    background: color-mix(in oklab, var(--ds-accent) 7%, transparent);
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.wiz-why svg {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 2px;
    color: color-mix(in oklab, var(--ds-accent) 78%, white);
}

.wiz-why strong {
    color: var(--text-strong);
    font-weight: 650;
}

/* Launch checklist on the review step */
.wizx-launch {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding: 15px 17px;
    border-radius: 14px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.14));
    background: rgba(255, 255, 255, 0.025);
}

.wizx-launch h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--text-strong);
}

.wizx-launch ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wizx-launch li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.86rem;
    color: var(--text-subtle);
}

.wizx-launch li svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--text-subtle);
    opacity: 0.5;
}

.wizx-launch li.is-done {
    color: var(--text-muted);
}

.wizx-launch li.is-done svg {
    color: var(--ds-success);
    opacity: 1;
}

.wizx-price-hint {
    margin: 6px 0 0;
    font-size: 0.84rem;
    color: var(--text-subtle);
}

.wizx-price-hint strong {
    color: var(--text-muted);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
    .am-feature {
        grid-template-columns: 1fr;
    }

    .am-feature__info {
        gap: 10px;
    }

    .am-sectionnav {
        top: 58px;
    }
}

@media (max-width: 640px) {
    .am-searchbox {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .am-searchbox__key {
        display: none;
    }

    .am-grid {
        grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
        gap: 11px;
    }

    .am-rail {
        grid-auto-columns: 200px;
    }

    .am-card__title {
        font-size: 0.92rem;
    }

    .am-shelf__all {
        display: none;
    }

    .am-revsum {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Never let a filter/tool row push the page wider than the phone. */
    .am-typechips {
        flex-wrap: wrap;
    }

    .am-feature__cta {
        flex-wrap: wrap;
    }

    .am-results__tools {
        width: 100%;
        min-width: 0;
    }

    /* The 5-way sort segment can outrun a 390px line, let it scroll in place
       instead of stretching the page. Scoped to the marketplace results row. */
    .am-results__tools .vd-seg {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .am-results__tools .vd-seg::-webkit-scrollbar {
        display: none;
    }

    .am-toast {
        max-width: calc(100vw - 24px);
    }
}

/* ------------------------------------------------------------------ */
/* Reduced motion: everything still works, nothing moves               */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .am-card,
    .am-card__media img,
    .am-card__actions,
    .am-creator,
    .am-feature__media img,
    .am-toast,
    .asset-cart.am-cart,
    .am-shelf__all svg,
    .am-iconbtn {
        transition: none;
        animation: none;
    }

    .am-card:hover,
    .am-creator:hover {
        transform: none;
    }

    .am-card:hover .am-card__media img,
    .am-feature__media:hover img {
        transform: none;
    }

    .am-skel::after,
    .wizx-live::before,
    .am-iconbtn.just-saved,
    .am-pdp-save.just-saved,
    .am-suggest.is-open {
        animation: none;
    }
}

/* ------------------------------------------------------------------ */
/* Icon-condensation glue (July 2026). The controls ride the shared    */
/* .vd-iconbtn / .vd-seg / .vd-toolbar primitives from design-system   */
/* plus VinTip hover labels; these rules only size the page-specific   */
/* glyphs and containers around them.                                  */
/* ------------------------------------------------------------------ */

/* Masthead cart button: icon + count pill instead of the "Cart" label. */
.am-cartbtn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

/* PDP gallery paddles switched from ‹ › text glyphs to the shared SVGs. */
.asset-pdp-nav svg {
    width: 20px;
    height: 20px;
}

/* Q&A "Replying to …" chip: the cancel is a small icon button; win over
   the generic `.asset-reply-context button` text-button skin. */
.asset-reply-context .vd-iconbtn {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    border-radius: 8px;
}

.asset-reply-context .vd-iconbtn:hover {
    color: var(--ds-text, #f2f2f2);
    background: var(--ds-surface-hover, rgba(255, 255, 255, 0.06));
}

/* ------------------------------------------------------------------ */
/* Touch pointers: every control clears the 44/40 hit-area floor.      */
/* Only hit areas grow, the SVG/text glyphs keep their sizes. Desktop */
/* mouse layouts are untouched (gated on pointer: coarse).             */
/* ------------------------------------------------------------------ */

@media (pointer: coarse) {
    /* Card save / add-to-cart overlay icons (32px → 44px square). */
    .am-iconbtn.am-iconbtn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .am-iconbtn.am-iconbtn--feature {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    /* Rail + PDP-gallery paddles (32px → 44px square). */
    .am-paddle.am-paddle {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .asset-pdp-nav {
        min-width: 44px;
        min-height: 44px;
    }

    /* Filter / category / price / saved chips (34px → 40px tall; the pill
       width already clears 44). */
    .am-chip.am-chip {
        min-height: 40px;
    }

    /* Search clear button (30px → 44×40). */
    .am-searchbox__clear.am-searchbox__clear {
        width: 44px;
        min-width: 44px;
        height: 40px;
        min-height: 40px;
    }

    /* Active-filter pills: the whole pill becomes a comfortable row and the
       remove control grows from a 20px dot to a 40px target. */
    .am-pill {
        min-height: 40px;
    }

    .am-pill button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .am-activebar__clear {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* Masthead cart button. */
    .am-cartbtn {
        min-height: 44px;
    }

    /* PDP section-nav tabs (~30px tall → 44px). */
    .am-sectionnav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Lightbox close (40px → 44px) + clear the status bar on notched phones. */
    .am-lightbox__close {
        width: 44px;
        height: 44px;
        top: max(18px, env(safe-area-inset-top));
    }

    /* Cart per-item remove (26px → 44px). */
    .am-cart .asset-cart-remove.vd-iconbtn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    /* PDP "Replying to…" cancel (26px → 44px). */
    .asset-reply-context .vd-iconbtn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    /* Fixed cart drawer + toast clear the notch / home indicator. */
    .asset-cart.am-cart {
        padding-top: max(20px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .am-toast {
        bottom: calc(26px + env(safe-area-inset-bottom));
    }
}