.basket-store-page {
    --basket-font-body: "Manrope", "Open Sans", sans-serif;
    --basket-font-display: "Space Grotesk", "Open Sans", sans-serif;

    --basket-color-surface: rgba(13, 24, 37, 0.84);
    --basket-color-surface-strong: rgba(16, 28, 43, 0.96);
    --basket-color-surface-raised: rgba(19, 34, 52, 0.99);
    --basket-color-surface-muted: rgba(132, 164, 198, 0.08);
    --basket-color-surface-accent: rgba(106, 174, 255, 0.11);
    --basket-color-text: #eff6ff;
    --basket-color-text-soft: #bfd0e5;
    --basket-color-text-muted: #8fa5bc;
    --basket-color-accent: #6aaeff;
    --basket-color-accent-strong: #2f7be5;
    --basket-color-accent-soft: rgba(106, 174, 255, 0.18);
    --basket-color-gold: #f1b365;
    --basket-color-gold-soft: rgba(241, 179, 101, 0.16);
    --basket-color-success: #44c28a;
    --basket-color-success-soft: rgba(68, 194, 138, 0.16);
    --basket-color-warning: #f1b365;
    --basket-color-border: rgba(156, 185, 219, 0.14);
    --basket-color-border-strong: rgba(166, 198, 234, 0.26);
    --basket-color-shadow: rgba(2, 7, 14, 0.54);

    --basket-radius-sm: 1rem;
    --basket-radius-md: 1.25rem;
    --basket-radius-lg: 1.5rem;
    --basket-radius-xl: 2rem;
    --basket-radius-pill: 999px;

    --basket-shadow-sm: 0 14px 30px rgba(4, 11, 20, 0.16);
    --basket-shadow-md: 0 20px 46px rgba(4, 11, 20, 0.22);
    --basket-shadow-lg: 0 30px 74px rgba(2, 7, 14, 0.3);

    --basket-duration: 220ms;
    --basket-duration-fast: 160ms;
    --basket-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
    --basket-summary-offset: clamp(5.2rem, 10vh, 7.4rem);

    position: relative;
    isolation: isolate;
    display: grid;
    gap: clamp(1.08rem, 0.74rem + 1.05vw, 1.95rem);
    max-inline-size: 1480px;
    margin-inline: auto;
    padding-block: clamp(1.08rem, 0.78rem + 1vw, 1.6rem);
    color: var(--basket-color-text);
    font-family: var(--basket-font-body);
    font-size: clamp(1.03rem, 0.99rem + 0.18vw, 1.09rem);
    line-height: 1.52;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;
    overflow-x: clip;
}

body:not(.theme-dark) .basket-store-page {
    --basket-color-surface: rgba(255, 255, 255, 0.9);
    --basket-color-surface-strong: rgba(250, 252, 255, 0.98);
    --basket-color-surface-raised: rgba(255, 255, 255, 1);
    --basket-color-surface-muted: rgba(50, 92, 140, 0.06);
    --basket-color-surface-accent: rgba(47, 123, 229, 0.08);
    --basket-color-text: #17314e;
    --basket-color-text-soft: #54708d;
    --basket-color-text-muted: #7388a1;
    --basket-color-accent: #2f7be5;
    --basket-color-accent-strong: #1b65ce;
    --basket-color-accent-soft: rgba(47, 123, 229, 0.14);
    --basket-color-gold: #c68439;
    --basket-color-gold-soft: rgba(198, 132, 57, 0.14);
    --basket-color-success: #1e9b68;
    --basket-color-success-soft: rgba(30, 155, 104, 0.12);
    --basket-color-warning: #c68439;
    --basket-color-border: rgba(68, 101, 136, 0.14);
    --basket-color-border-strong: rgba(68, 101, 136, 0.22);
    --basket-color-shadow: rgba(55, 86, 124, 0.16);

    --basket-shadow-sm: 0 14px 32px rgba(77, 106, 141, 0.08);
    --basket-shadow-md: 0 20px 52px rgba(77, 106, 141, 0.12);
    --basket-shadow-lg: 0 34px 80px rgba(77, 106, 141, 0.18);
    color-scheme: light;
}

body:not(.theme-dark) .basket-hero,
body:not(.theme-dark) .basket-toolbar,
body:not(.theme-dark) .basket-summary__panel,
body:not(.theme-dark) .basket-card,
body:not(.theme-dark) .basket-filter-empty,
body:not(.theme-dark) .basket-empty-state,
body:not(.theme-dark) .basket-stat-card,
body:not(.theme-dark) .basket-summary-card {
    box-shadow: 0 14px 28px rgba(77, 106, 141, 0.08);
}

.basket-store-page,
.basket-store-page * {
    box-sizing: border-box;
}

.basket-store-page a,
.basket-store-page a:hover,
.basket-store-page a:focus {
    text-decoration: none;
}

.basket-store-page img {
    display: block;
    max-inline-size: 100%;
}

.basket-store-page button,
.basket-store-page input,
.basket-store-page textarea,
.basket-store-page select {
    font: inherit;
}

.basket-store-page [hidden] {
    display: none !important;
}

.basket-store-page :focus-visible {
    outline: 2px solid var(--basket-color-accent);
    outline-offset: 3px;
}

.basket-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.basket-hero,
.basket-toolbar,
.basket-summary__panel,
.basket-card,
.basket-filter-empty,
.basket-empty-state {
    position: relative;
    overflow: clip;
    border: 1px solid var(--basket-color-border);
    border-radius: var(--basket-radius-xl);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 34%),
        linear-gradient(135deg, var(--basket-color-surface-strong), var(--basket-color-surface));
    box-shadow: var(--basket-shadow-md);
}

.basket-hero::before,
.basket-toolbar::before,
.basket-summary__panel::before,
.basket-card::before,
.basket-filter-empty::before,
.basket-empty-state::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--basket-color-accent) 54%, transparent), transparent);
    opacity: 0.75;
    pointer-events: none;
}

.basket-hero,
.basket-toolbar,
.basket-summary__panel,
.basket-card,
.basket-filter-empty,
.basket-empty-state {
    padding: clamp(1.16rem, 0.88rem + 0.96vw, 1.8rem);
}

.basket-hero {
    display: grid;
    gap: clamp(1.15rem, 0.95rem + 1vw, 2rem);
    grid-template-columns: minmax(0, 1.18fr) minmax(17.5rem, 22rem);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--basket-color-accent) 14%, transparent), transparent 36%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--basket-color-gold) 9%, transparent), transparent 32%),
        linear-gradient(135deg, var(--basket-color-surface-strong), var(--basket-color-surface));
}

.basket-hero__copy,
.basket-toolbar,
.basket-summary__panel,
.basket-card,
.basket-card__body,
.basket-card__footer,
.basket-filter-empty,
.basket-filter-empty__copy,
.basket-empty-state__content {
    display: grid;
    gap: 1rem;
}

.basket-kicker {
    margin: 0;
    color: var(--basket-color-accent);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.basket-kicker--muted {
    color: var(--basket-color-text-muted);
}

.basket-display-title,
.basket-section-title,
.basket-card__title,
.basket-empty-state__title {
    margin: 0;
    font-family: var(--basket-font-display);
    letter-spacing: -0.036em;
    text-wrap: balance;
}

.basket-display-title {
    font-size: clamp(2.18rem, 1.56rem + 2.1vw, 3.96rem);
    line-height: 1.03;
}

.basket-section-title {
    font-size: clamp(1.48rem, 1.12rem + 0.88vw, 2.16rem);
    line-height: 1.08;
}

.basket-section-title--compact {
    font-size: clamp(1.18rem, 1.02rem + 0.62vw, 1.56rem);
    line-height: 1.08;
}

.basket-hero__lead,
.basket-summary__copy,
.basket-card__description,
.basket-card__note,
.basket-card__callout p,
.basket-tip p,
.basket-empty-state__text {
    margin: 0;
    color: var(--basket-color-text-soft);
    font-size: clamp(1.02rem, 0.96rem + 0.22vw, 1.1rem);
    line-height: 1.66;
    text-wrap: pretty;
}

.basket-hero .basket-display-title {
    font-size: clamp(1.94rem, 1.48rem + 1.38vw, 3rem);
    max-inline-size: 27ch;
}

.basket-hero__lead {
    max-inline-size: 56rem;
    font-size: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
    line-height: 1.68;
}

.basket-toolbar__headline,
.basket-toolbar__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.9rem;
    align-items: end;
}

.basket-toolbar__result {
    display: grid;
    gap: 0.15rem;
    min-inline-size: 11.5rem;
    padding: 1rem 1.08rem;
    border: 1px solid var(--basket-color-border);
    border-radius: calc(var(--basket-radius-lg) - 0.15rem);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--basket-color-surface-raised) 97%, transparent), color-mix(in srgb, var(--basket-color-surface) 92%, transparent));
    box-shadow: var(--basket-shadow-sm);
}

.basket-toolbar__result strong {
    font-family: var(--basket-font-display);
    font-size: clamp(1.58rem, 1.18rem + 0.92vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.98;
}

.basket-toolbar__result span,
.basket-toolbar__status,
.basket-filter-empty__text,
.basket-summary__checklist li {
    color: var(--basket-color-text-soft);
    font-size: 0.98rem;
    line-height: 1.55;
}

.basket-toolbar__controls {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
}

.basket-search-field {
    display: grid;
    gap: 0;
}

.basket-search-field__input {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-block-size: 3.3rem;
    padding-inline: 1.08rem;
    border: 1px solid var(--basket-color-border-strong);
    border-radius: var(--basket-radius-pill);
    background: color-mix(in srgb, var(--basket-color-surface-raised) 96%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.basket-search-field__input:focus-within {
    border-color: color-mix(in srgb, var(--basket-color-accent) 34%, var(--basket-color-border));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 0.18rem color-mix(in srgb, var(--basket-color-accent-soft) 55%, transparent);
}

.basket-search-field__input i {
    color: var(--basket-color-text-muted);
    font-size: 1rem;
}

.basket-search-field__input input {
    flex: 1 1 auto;
    inline-size: 100%;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    color: var(--basket-color-text);
    outline: 0;
}

.basket-search-field__input input::placeholder {
    color: var(--basket-color-text-muted);
}

.basket-search-field__clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.35rem;
    padding-inline: 0.82rem;
    border: 1px solid color-mix(in srgb, var(--basket-color-accent) 20%, var(--basket-color-border));
    border-radius: var(--basket-radius-pill);
    background: color-mix(in srgb, var(--basket-color-accent-soft) 82%, transparent);
    color: var(--basket-color-accent);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.basket-search-field__clear:hover {
    background: color-mix(in srgb, var(--basket-color-accent) 16%, var(--basket-color-surface-raised));
    color: var(--basket-color-text);
}

.basket-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.basket-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-block-size: 3rem;
    padding-inline: 1.02rem;
    border: 1px solid var(--basket-color-border);
    border-radius: var(--basket-radius-pill);
    background: color-mix(in srgb, var(--basket-color-surface-raised) 95%, transparent);
    color: var(--basket-color-text-soft);
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        transform var(--basket-duration-fast) var(--basket-easing),
        border-color var(--basket-duration-fast) var(--basket-easing),
        background-color var(--basket-duration-fast) var(--basket-easing),
        color var(--basket-duration-fast) var(--basket-easing),
        box-shadow var(--basket-duration-fast) var(--basket-easing);
}

.basket-filter:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--basket-color-accent) 26%, var(--basket-color-border));
    color: var(--basket-color-text);
}

.basket-filter.is-active {
    border-color: color-mix(in srgb, var(--basket-color-accent) 38%, var(--basket-color-border));
    background: color-mix(in srgb, var(--basket-color-accent-soft) 86%, var(--basket-color-surface-raised));
    color: var(--basket-color-text);
    box-shadow: 0 14px 26px color-mix(in srgb, var(--basket-color-shadow) 10%, transparent);
}

.basket-filter__count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.75rem;
    min-block-size: 1.75rem;
    padding-inline: 0.35rem;
    border-radius: var(--basket-radius-pill);
    background: color-mix(in srgb, var(--basket-color-surface-muted) 95%, transparent);
    color: var(--basket-color-text-muted);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
}

.basket-filter.is-active .basket-filter__count {
    background: color-mix(in srgb, var(--basket-color-surface-raised) 70%, transparent);
    color: var(--basket-color-text);
}

.basket-toolbar__status,
.basket-filter-empty__text {
    margin: 0;
}

.basket-button,
.basket-inline-pill,
.basket-pill {
    transition:
        transform var(--basket-duration) var(--basket-easing),
        color var(--basket-duration) var(--basket-easing),
        background-color var(--basket-duration) var(--basket-easing),
        border-color var(--basket-duration) var(--basket-easing),
        box-shadow var(--basket-duration) var(--basket-easing),
        opacity var(--basket-duration-fast) linear;
}

.basket-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.66rem;
    min-block-size: 3.2rem;
    padding-inline: 1.14rem;
    border: 1px solid transparent;
    border-radius: var(--basket-radius-pill);
    background: transparent;
    color: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
}

.basket-button:hover {
    transform: translateY(-1px);
}

.basket-button,
.basket-button:hover,
.basket-button:focus,
.basket-button:focus-visible,
.basket-button:visited {
    text-decoration: none;
}

.basket-button--compact {
    min-block-size: 2.8rem;
    padding-inline: 1.02rem;
    font-size: 0.94rem;
}

.basket-button--primary {
    border-color: color-mix(in srgb, var(--basket-color-accent) 44%, transparent);
    background: linear-gradient(135deg, var(--basket-color-accent), var(--basket-color-accent-strong));
    color: #fff;
    box-shadow: 0 16px 28px color-mix(in srgb, var(--basket-color-accent) 22%, transparent);
}

.basket-button--primary,
.basket-button--primary:hover,
.basket-button--primary:focus,
.basket-button--primary:focus-visible,
.basket-button--primary:visited {
    color: #fff;
}

.basket-button--secondary {
    border-color: var(--basket-color-border-strong);
    background: color-mix(in srgb, var(--basket-color-surface-raised) 94%, transparent);
    color: var(--basket-color-text);
}

.basket-button--ghost {
    border-color: var(--basket-color-border);
    background: color-mix(in srgb, var(--basket-color-surface) 72%, transparent);
    color: var(--basket-color-text-soft);
}

.basket-button--secondary:hover,
.basket-button--ghost:hover {
    border-color: color-mix(in srgb, var(--basket-color-accent) 28%, var(--basket-color-border));
    background: color-mix(in srgb, var(--basket-color-surface-raised) 96%, var(--basket-color-accent-soft));
    color: var(--basket-color-text);
}

.basket-inline-pill,
.basket-pill {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.15rem;
    padding-inline: 0.9rem;
    border: 1px solid var(--basket-color-border);
    border-radius: var(--basket-radius-pill);
    background: color-mix(in srgb, var(--basket-color-surface-raised) 94%, transparent);
    color: var(--basket-color-text-soft);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.basket-inline-pill {
    backdrop-filter: blur(10px);
}

.basket-pill--accent {
    border-color: color-mix(in srgb, var(--basket-color-accent) 28%, var(--basket-color-border));
    background: var(--basket-color-accent-soft);
    color: var(--basket-color-accent);
}

.basket-pill--gold,
.basket-pill--warning {
    border-color: color-mix(in srgb, var(--basket-color-gold) 34%, var(--basket-color-border));
    background: var(--basket-color-gold-soft);
    color: var(--basket-color-gold);
}

.basket-pill--success {
    border-color: color-mix(in srgb, var(--basket-color-success) 34%, var(--basket-color-border));
    background: var(--basket-color-success-soft);
    color: var(--basket-color-success);
}

.basket-pill--muted {
    color: var(--basket-color-text-muted);
}

.basket-hero__actions,
.basket-hero__trustline,
.basket-card__badges,
.basket-card__actions,
.basket-summary__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.basket-hero__stats,
.basket-summary__stats,
.basket-grid {
    display: grid;
    gap: 1rem;
}

.basket-hero__stats,
.basket-summary__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.basket-hero__stats {
    max-inline-size: 22rem;
    justify-self: end;
}

.basket-stat-card,
.basket-summary-card {
    position: relative;
    overflow: clip;
    display: grid;
    gap: 0.62rem;
    min-block-size: 6.9rem;
    padding: 0.98rem 1.02rem;
    border: 1px solid var(--basket-color-border);
    border-radius: var(--basket-radius-lg);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--basket-color-surface-raised) 98%, transparent), color-mix(in srgb, var(--basket-color-surface) 95%, transparent));
    box-shadow: var(--basket-shadow-sm);
}

.basket-stat-card::before,
.basket-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    block-size: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--basket-color-accent) 72%, transparent), color-mix(in srgb, var(--basket-color-gold) 52%, transparent));
    opacity: 0.76;
}

.basket-stat-card__value,
.basket-summary-card__value,
.basket-card__price,
.basket-preview__value {
    display: block;
    font-family: var(--basket-font-display);
    font-size: clamp(1.68rem, 1.18rem + 1vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.98;
}

.basket-stat-card__label,
.basket-summary-card__label,
.basket-preview__label,
.basket-card__currency,
.basket-summary__money-note span {
    color: var(--basket-color-text-muted);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-transform: uppercase;
}

.basket-shell {
    display: grid;
    gap: 1.25rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
}

.basket-main {
    display: grid;
    gap: 1rem;
    min-inline-size: 0;
}

.basket-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 0.9rem;
}

.basket-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.basket-card {
    min-block-size: 100%;
    padding: 1rem;
    gap: 0.82rem;
    transition:
        transform var(--basket-duration-fast) var(--basket-easing),
        border-color var(--basket-duration-fast) var(--basket-easing),
        box-shadow var(--basket-duration-fast) var(--basket-easing);
}

.basket-card:hover,
.basket-card:focus-within {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--basket-color-accent) 28%, var(--basket-color-border));
    box-shadow: 0 16px 28px color-mix(in srgb, var(--basket-color-shadow) 12%, transparent);
}

.basket-card__header,
.basket-card__heading,
.basket-card__title-row,
.basket-card__price-row,
.basket-preview--media {
    display: grid;
    gap: 0.9rem;
}

.basket-card__header {
    gap: 0.75rem;
}

.basket-card__heading {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.75rem;
}

.basket-card__title-row {
    gap: 0.45rem;
}

.basket-card__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2.7rem;
    block-size: 2.7rem;
    border-radius: 0.9rem;
    background: var(--basket-color-accent-soft);
    color: var(--basket-color-accent);
    font-size: 0.98rem;
    border: 1px solid color-mix(in srgb, var(--basket-color-accent) 18%, var(--basket-color-border));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 24px color-mix(in srgb, var(--basket-color-shadow) 11%, transparent);
}

.basket-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.basket-card .basket-pill {
    flex: 0 0 auto;
    min-block-size: 1.8rem;
    padding-inline: 0.72rem;
    font-size: 0.76rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.basket-card__title {
    font-size: clamp(1.08rem, 0.98rem + 0.34vw, 1.28rem);
    line-height: 1.14;
    text-wrap: pretty;
}

.basket-card__body {
    gap: 0.72rem;
}

.basket-card__content {
    display: grid;
    gap: 0.72rem;
    min-inline-size: 0;
    align-content: start;
}

.basket-card__note {
    font-size: 0.88rem;
    line-height: 1.48;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.basket-card__price-row {
    justify-items: start;
    gap: 0.2rem;
    min-inline-size: 8.8rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--basket-color-accent) 18%, var(--basket-color-border));
    border-radius: calc(var(--basket-radius-lg) - 0.1rem);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--basket-color-surface-accent) 62%, transparent), transparent 86%),
        color-mix(in srgb, var(--basket-color-surface-raised) 95%, transparent);
}

.basket-card__preview {
    display: grid;
}

.basket-preview,
.basket-card__callout,
.basket-summary__money-note,
.basket-tip {
    position: relative;
    overflow: clip;
    padding: 1.02rem 1.08rem;
    border: 1px solid var(--basket-color-border);
    border-radius: calc(var(--basket-radius-lg) - 0.15rem);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--basket-color-surface-raised) 97%, transparent), color-mix(in srgb, var(--basket-color-surface) 93%, transparent));
}

.basket-preview:not(.basket-preview--media) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
}

.basket-preview--media {
    grid-template-columns: minmax(5rem, 6.75rem) minmax(0, 1fr);
    align-items: center;
    padding: 0.82rem 0.9rem;
}

.basket-preview--media img {
    inline-size: 100%;
    max-block-size: 4.7rem;
    border-radius: 0.85rem;
    object-fit: contain;
    background: color-mix(in srgb, var(--basket-color-surface-muted) 92%, transparent);
}

.basket-preview--media strong,
.basket-card__callout strong,
.basket-tip strong {
    margin: 0;
    font-size: 0.96rem;
    letter-spacing: -0.02em;
}

.basket-preview--media span {
    display: block;
    margin-top: 0.2rem;
    color: var(--basket-color-text-soft);
    font-size: 0.86rem;
    line-height: 1.45;
}

.basket-preview {
    gap: 0.35rem;
}

.basket-card__description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.93rem;
    line-height: 1.5;
}

.basket-preview__label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.basket-preview__value {
    font-size: clamp(1.4rem, 1.06rem + 0.62vw, 1.82rem);
}

.basket-card__callout strong,
.basket-tip strong {
    display: block;
    margin-bottom: 0.3rem;
}

.basket-card__callout p,
.basket-tip p {
    font-size: 0.88rem;
    line-height: 1.45;
}

.basket-card__footer {
    margin-top: auto;
    gap: 0.72rem;
    padding-top: 0.82rem;
    border-top: 1px solid color-mix(in srgb, var(--basket-color-border) 88%, transparent);
}

.basket-card__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.62rem;
}

.basket-card__actions > .basket-button,
.basket-card__actions > .basket-card__action-hint {
    inline-size: 100%;
    justify-content: center;
}

.basket-card__action-hint {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.8rem;
    padding: 0.72rem 0.9rem;
    border: 1px dashed color-mix(in srgb, var(--basket-color-border) 92%, transparent);
    border-radius: calc(var(--basket-radius-lg) - 0.15rem);
    color: var(--basket-color-text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
    background: color-mix(in srgb, var(--basket-color-surface-muted) 85%, transparent);
    text-align: center;
}

.basket-card__actions > .basket-card__action-hint:only-child {
    grid-column: 1 / -1;
}

.basket-card__primary {
    inline-size: 100%;
    min-block-size: 3.15rem;
    border-radius: 1.1rem;
    font-size: 0.94rem;
}

@media (min-width: 960px) {
    .basket-card__header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .basket-card__price-row {
        justify-items: end;
        min-inline-size: 8.8rem;
    }
}

@media (min-width: 768px) {
    .basket-card__footer {
        grid-template-columns: 1fr;
    }
}

.basket-summary {
    position: sticky;
    top: var(--basket-summary-offset);
}

.basket-summary__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basket-summary__money-note {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.basket-summary__money-note--secondary {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--basket-color-surface-raised) 95%, transparent), color-mix(in srgb, var(--basket-color-surface-muted) 85%, transparent));
}

.basket-summary__money-note strong {
    font-family: var(--basket-font-display);
    font-size: 1.28rem;
    letter-spacing: -0.03em;
}

.basket-summary__tips {
    display: grid;
    gap: 0.8rem;
}

.basket-summary__checklist {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.basket-summary__checklist li {
    position: relative;
    padding-left: 1.4rem;
}

.basket-summary__checklist li::before {
    content: "";
    position: absolute;
    inset: 0.45rem auto auto 0;
    inline-size: 0.58rem;
    block-size: 0.58rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--basket-color-accent), var(--basket-color-gold));
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--basket-color-accent-soft) 65%, transparent);
}

.basket-filter-empty {
    place-items: center;
    text-align: center;
    min-block-size: 16rem;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--basket-color-accent) 12%, transparent), transparent 38%),
        linear-gradient(135deg, var(--basket-color-surface-strong), var(--basket-color-surface));
}

.basket-filter-empty__copy {
    max-inline-size: 34rem;
    justify-items: center;
}

.basket-filter-empty__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 1.2rem;
    background: var(--basket-color-accent-soft);
    color: var(--basket-color-accent);
    font-size: 1.38rem;
}

.basket-filter-empty__title {
    margin: 0;
    font-family: var(--basket-font-display);
    font-size: clamp(1.4rem, 1.12rem + 0.62vw, 1.84rem);
    letter-spacing: -0.04em;
    line-height: 1.06;
}

.basket-empty-state {
    place-items: center;
    text-align: center;
    min-block-size: 22rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--basket-color-accent) 12%, transparent), transparent 34%),
        linear-gradient(135deg, var(--basket-color-surface-strong), var(--basket-color-surface));
}

.basket-empty-state__content {
    max-inline-size: 42rem;
    justify-items: center;
}

.basket-empty-state__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: 1.4rem;
    background: var(--basket-color-accent-soft);
    color: var(--basket-color-accent);
    font-size: 1.45rem;
}

.basket-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.basket-message-stack {
    display: grid;
    gap: 0.8rem;
}

.basket-store-page .alert {
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--basket-color-border);
    border-radius: var(--basket-radius-md);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--basket-color-surface-raised) 98%, transparent), color-mix(in srgb, var(--basket-color-surface) 93%, transparent));
    color: var(--basket-color-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 14px 26px color-mix(in srgb, var(--basket-color-shadow) 10%, transparent);
}

.basket-store-page .alert-success {
    border-color: color-mix(in srgb, var(--basket-color-success) 34%, var(--basket-color-border));
}

.basket-store-page .alert-danger {
    border-color: color-mix(in srgb, var(--basket-color-warning) 28%, var(--basket-color-border));
}

.basket-store-page .alert .close {
    color: inherit;
    opacity: 0.78;
}

@media (max-width: 1120px) {
    .basket-hero,
    .basket-shell {
        grid-template-columns: 1fr;
    }

    .basket-hero__stats {
        max-inline-size: none;
        justify-self: stretch;
    }

    .basket-toolbar__controls {
        grid-template-columns: 1fr;
    }

    .basket-summary {
        position: static;
    }
}

@media (min-width: 901px) and (max-width: 1120px) and (orientation: landscape) {
    .basket-hero,
    .basket-shell {
        grid-template-columns: minmax(0, 1fr) minmax(18.5rem, 21.5rem);
    }

    .basket-hero__stats {
        max-inline-size: 21rem;
        justify-self: stretch;
    }

    .basket-summary {
        position: sticky;
    }
}

@media (max-width: 767px) {
    .basket-store-page {
        gap: 0.9rem;
    }

    .basket-hero,
    .basket-toolbar,
    .basket-summary__panel,
    .basket-card,
    .basket-filter-empty,
    .basket-empty-state {
        border-radius: var(--basket-radius-lg);
    }

    .basket-toolbar__headline,
    .basket-toolbar__foot {
        align-items: start;
    }

    .basket-hero__actions,
    .basket-summary__actions,
    .basket-card__actions,
    .basket-empty-state__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .basket-grid {
        grid-template-columns: 1fr;
    }

    .basket-preview--media,
    .basket-card__heading {
        grid-template-columns: 1fr;
    }

    .basket-filter-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .basket-card__price-row {
        justify-items: start;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .basket-hero__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .basket-toolbar__controls {
        grid-template-columns: 1fr;
    }

    .basket-filter-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .basket-hero__stats,
    .basket-summary__stats,
    .basket-filter-group {
        grid-template-columns: 1fr;
    }

    .basket-toolbar__result,
    .basket-summary__money-note {
        inline-size: 100%;
    }

    .basket-summary__money-note {
        flex-direction: column;
        align-items: flex-start;
    }

    .basket-search-field__input {
        flex-wrap: wrap;
        padding: 0.85rem 0.95rem;
    }

    .basket-search-field__clear {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .basket-stat-card,
    .basket-summary-card {
        min-block-size: 7.4rem;
    }
}

@media (max-width: 430px) {
    .basket-hero,
    .basket-toolbar,
    .basket-summary__panel,
    .basket-card,
    .basket-filter-empty,
    .basket-empty-state {
        padding: 0.92rem;
    }

    .basket-hero .basket-display-title {
        font-size: clamp(1.52rem, 1.18rem + 1vw, 1.92rem);
    }

    .basket-hero__lead,
    .basket-toolbar__status,
    .basket-card__description,
    .basket-card__note,
    .basket-card__callout p,
    .basket-empty-state__text {
        font-size: 0.95rem;
        line-height: 1.54;
    }

    .basket-card__header,
    .basket-card__body,
    .basket-card__footer {
        gap: 0.75rem;
    }

    .basket-card__icon {
        inline-size: 2.78rem;
        block-size: 2.78rem;
        font-size: 1rem;
    }

    .basket-card__title {
        font-size: clamp(1.08rem, 0.98rem + 0.6vw, 1.28rem);
    }

    .basket-card__price {
        font-size: clamp(1.42rem, 1.18rem + 0.82vw, 1.82rem);
    }

    .basket-preview,
    .basket-card__callout,
    .basket-summary__money-note,
    .basket-tip {
        padding: 0.9rem;
    }

    .basket-button {
        min-block-size: 3rem;
        padding-inline: 0.95rem;
        font-size: 0.94rem;
    }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 540px) {
    .basket-store-page {
        gap: 0.75rem;
    }

    .basket-hero,
    .basket-toolbar,
    .basket-summary__panel,
    .basket-card,
    .basket-filter-empty,
    .basket-empty-state {
        padding: 0.9rem;
        border-radius: var(--basket-radius-lg);
    }

    .basket-hero {
        gap: 0.85rem;
    }

    .basket-hero .basket-display-title {
        font-size: clamp(1.56rem, 1.18rem + 1vw, 2rem);
        max-inline-size: none;
    }

    .basket-hero__lead {
        font-size: 0.95rem;
        line-height: 1.52;
    }

    .basket-hero__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .basket-hero__actions .basket-button {
        min-block-size: 2.95rem;
        justify-content: center;
    }

    .basket-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .basket-stat-card {
        min-block-size: 0;
        padding: 0.78rem 0.82rem;
    }

    .basket-toolbar__controls {
        grid-template-columns: 1fr;
    }

    .basket-toolbar__result {
        min-inline-size: 0;
        padding: 0.82rem 0.9rem;
    }

    .basket-filter-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .basket-search-field__input {
        padding-inline: 0.95rem;
    }

    .basket-card__footer {
        grid-template-columns: minmax(0, 1fr) minmax(9.8rem, 11rem);
        align-items: stretch;
    }

    .basket-card__actions {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (min-width: 960px) {
    .basket-toolbar--single {
        gap: 0.85rem;
        max-inline-size: 64rem;
        margin-inline: auto;
    }

    .basket-toolbar--single .basket-toolbar__headline {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.75rem 1rem;
    }

    .basket-toolbar--single .basket-toolbar__result {
        min-inline-size: 7.9rem;
        padding: 0.82rem 0.9rem;
    }

    .basket-toolbar--single .basket-toolbar__controls {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
        align-items: start;
    }

    .basket-toolbar--single .basket-search-field {
        min-inline-size: 0;
    }

    .basket-toolbar--single .basket-search-field__input {
        min-block-size: 3.05rem;
    }

    .basket-toolbar--single .basket-filter-group {
        gap: 0.5rem;
    }

    .basket-toolbar--single .basket-filter {
        min-block-size: 2.6rem;
        padding-inline: 0.9rem;
        font-size: 0.9rem;
    }

    .basket-toolbar--single .basket-toolbar__foot {
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .basket-toolbar--single .basket-toolbar__status {
        max-inline-size: none;
        font-size: 0.92rem;
    }

    .basket-card--single {
        inline-size: min(100%, 64rem);
        justify-self: center;
        padding: 1rem 1.05rem;
        gap: 0.88rem;
    }

    .basket-card--single .basket-card__body {
        grid-template-columns: minmax(0, 1fr) minmax(13.25rem, 15.5rem);
        gap: 0.85rem 1rem;
        align-items: start;
    }

    .basket-card--single .basket-card__content {
        max-inline-size: none;
        align-content: start;
    }

    .basket-card--single .basket-card__description {
        max-inline-size: 40rem;
        -webkit-line-clamp: 3;
    }

    .basket-card--single .basket-card__preview {
        inline-size: 100%;
        justify-self: stretch;
        align-self: start;
    }

    .basket-card--single .basket-card__preview--count {
        grid-column: 1 / -1;
    }

    .basket-card--single .basket-card__preview--count .basket-preview {
        justify-content: space-between;
        padding: 0.82rem 0.95rem;
    }

    .basket-card--single .basket-preview--media {
        grid-template-columns: 4.7rem minmax(0, 1fr);
        align-items: start;
        gap: 0.7rem;
        padding: 0.75rem 0.82rem;
    }

    .basket-card--single .basket-preview--media img {
        max-block-size: 5rem;
    }

    .basket-card--single .basket-preview--media strong {
        font-size: 0.92rem;
        line-height: 1.2;
    }

    .basket-card--single .basket-preview--media span {
        margin-top: 0.15rem;
        font-size: 0.82rem;
        line-height: 1.42;
    }

    .basket-card--single .basket-card__footer {
        grid-template-columns: minmax(0, 1.7fr) minmax(12.5rem, 1fr);
        align-items: stretch;
        gap: 0.8rem;
    }

    .basket-card--single .basket-card__actions {
        grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
        gap: 0.65rem;
    }

    .basket-card--single .basket-card__primary {
        inline-size: 100%;
        min-block-size: 3.25rem;
        justify-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .basket-store-page * {
        animation-duration: 0ms !important;
        scroll-behavior: auto !important;
        transition-duration: 0ms !important;
    }
}