body:has(.store-page) {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--cg-bg);
    color-scheme: dark;
}

body:has(.store-page) .inline-alert {
    display: flex;
    align-items: center;
    gap: var(--cg-space-2);
    min-height: 1.75rem;
    margin: 0;
    padding: var(--cg-space-1) var(--cg-space-6);
    border: 0;
    border-radius: 0;
    background: rgba(var(--cg-warning-rgb), 0.2);
}

body:has(.store-page) .inline-alert p {
    margin: 0;
    font-family: var(--cg-font-ui);
    font-size: var(--cg-text-xs);
    font-weight: var(--cg-weight-semibold);
    color: #f0a35e;
}

body:has(.store-page) .inline-alert .icon {
    margin: 0;
    font-size: 16px;
    color: #f0a35e;
}

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

.store-page {
    display: flex;
    flex-direction: column;
    gap: var(--cg-space-7);
    width: 100%;
    max-width: var(--cg-content-wide);
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--cg-space-7) var(--cg-space-6) var(--cg-space-8);
    background: var(--cg-c-canvas);
    font-family: var(--cg-font-ui);
}

.store-page h1,
.store-page h2,
.store-page p {
    text-align: left;
}

.store-header {
    display: flex;
    flex-direction: column;
    gap: var(--cg-space-3);
    max-width: var(--cg-measure);
}

.store-header > h1 {
    margin: 0;
    font-family: var(--cg-font-sans);
    font-size: var(--cg-text-display);
    font-weight: var(--cg-weight-medium);
    line-height: var(--cg-leading-tight);
    letter-spacing: var(--cg-tracking-display);
    color: var(--cg-c-fg);
    text-wrap: balance;
}

.store-lede {
    margin: 0;
    font-size: var(--cg-text-lg);
    line-height: var(--cg-leading-normal);
    color: var(--cg-c-fg-muted);
}

.store-note {
    margin: 0;
    font-size: var(--cg-text-sm);
    line-height: var(--cg-leading-normal);
    color: var(--cg-c-fg-soft);
}

.store-line {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--cg-space-6);
    padding-top: var(--cg-space-7);
    border-top: 1px solid var(--cg-c-border);
}

.store-line-media {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cg-c-border);
    background: var(--cg-c-surface-sunken);
}

.store-line-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.store-line-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cg-space-4);
    min-width: 0;
}

.store-line-title {
    margin: 0;
    font-family: var(--cg-font-sans);
    font-size: var(--cg-text-3xl);
    font-weight: var(--cg-weight-medium);
    line-height: var(--cg-leading-tight);
    color: var(--cg-c-accent-fg);
    text-wrap: balance;
}

.store-line-text {
    margin: 0;
    max-width: var(--cg-measure);
    font-size: var(--cg-text-base);
    line-height: var(--cg-leading-relaxed);
    color: var(--cg-c-fg-muted);
}

.store-line-text strong {
    color: var(--cg-c-fg);
    font-weight: var(--cg-weight-semibold);
}

.store-billing {
    margin-top: var(--cg-space-1);
}

.store-billing > button {
    white-space: nowrap;
}

.store-billing,
.store-donate-presets {
    border-color: var(--cg-c-accent);
}

.store-billing > button[aria-pressed="false"],
.store-donate-presets > button[aria-pressed="false"] {
    color: var(--cg-c-fg);
}

.store-billing > button[aria-pressed="true"],
.store-donate-presets > button[aria-pressed="true"] {
    background: var(--cg-c-accent);
    color: var(--cg-c-fg-on-accent);
    font-weight: var(--cg-weight-bold);
}

.store-billing > button[aria-pressed="false"]:hover,
.store-donate-presets > button[aria-pressed="false"]:hover {
    background: var(--cg-c-accent-bg);
}

.store-offer,
.store-tier-offer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cg-space-3);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.store-offer {
    padding: var(--cg-space-5);
    border: 1px solid var(--cg-c-border-strong);
    background: var(--cg-c-surface);
}

.store-offer-term {
    margin: 0;
    font-size: var(--cg-text-sm);
    line-height: var(--cg-leading-normal);
    color: var(--cg-c-fg-muted);
}

.store-offer-term--warning {
    color: var(--cg-c-warning-fg);
}

.store-offer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cg-space-2);
    width: 100%;
}

.store-offer-actions > .store-offer-term {
    flex-basis: 100%;
}

.store-offer-actions > .cg-button {
    flex: 1 1 10rem;
    min-height: var(--cg-control-lg);
}

.store-done[disabled] {
    cursor: default;
    opacity: 1;
    color: var(--cg-c-fg-muted);
}

.store-done i.material-icons {
    color: var(--cg-c-success-fg);
}

.store-learn,
a.store-learn[class] {
    padding-left: 0;
    color: var(--cg-c-accent-fg);
}

.store-learn i.material-icons {
    font-size: 18px;
    transition: transform var(--cg-transition-fast);
}

.store-learn:hover i.material-icons {
    transform: translateX(3px);
}

.store-line--stack {
    grid-template-columns: minmax(0, 1fr);
}

.store-stack-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--cg-space-4);
}

.store-stack-heading {
    display: flex;
    flex-direction: column;
    gap: var(--cg-space-3);
    min-width: 0;
    max-width: var(--cg-measure);
}

.store-tiers {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.store-tier {
    cursor: default;
}

.store-tier-logo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.store-tier .cg-badge {
    position: absolute;
    top: var(--cg-space-5);
    right: var(--cg-space-5);
}

.store-tier-offer {
    margin-top: auto;
    padding-top: var(--cg-space-3);
    border-top: 1px solid var(--cg-c-border);
}

.store-stack-note {
    max-width: var(--cg-measure);
}

.store-bundle {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    padding: var(--cg-space-6);
    border: 1px solid rgba(var(--cg-primary-rgb), 0.6);
    background:
        linear-gradient(135deg, rgba(var(--cg-primary-rgb), 0.28), rgba(var(--cg-primary-rgb), 0) 60%),
        var(--cg-c-surface);
}

.store-bundle .store-line-title {
    font-size: var(--cg-text-display);
    color: var(--cg-c-fg);
}

.store-bundle-list {
    gap: var(--cg-space-3);
    font-size: var(--cg-text-base);
    color: var(--cg-c-fg-muted);
}

.store-bundle-list strong {
    color: var(--cg-c-fg);
    font-weight: var(--cg-weight-semibold);
}

.store-bundle-list i.material-icons {
    color: var(--cg-c-accent-fg);
}

.store-bundle .store-offer {
    background: rgba(0, 0, 0, 0.32);
}

.store-donate-form {
    gap: var(--cg-space-4);
}

.store-donate-form .cg-field {
    width: 100%;
}

.store-donate-input {
    width: 100%;
}

.store-donate-currency {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--cg-space-3);
    border: 1px solid var(--cg-c-border-strong);
    border-right: 0;
    background: var(--cg-c-surface-sunken);
    font-family: var(--cg-font-sans);
    font-size: var(--cg-text-lg);
    color: var(--cg-c-fg-muted);
}

.store-donate-input > .cg-input {
    min-width: 0;
    min-height: var(--cg-control-lg);
    font-family: var(--cg-font-sans);
    font-size: var(--cg-text-lg);
    font-variant-numeric: tabular-nums;
}

.store-donate-message {
    min-height: 1.25rem;
    margin: var(--cg-space-2) 0 0;
    font-size: var(--cg-text-sm);
    line-height: var(--cg-leading-snug);
    color: var(--cg-c-fg-muted);
}

.store-donate-message.is-error {
    font-weight: var(--cg-weight-medium);
    color: var(--cg-c-danger-fg);
}

.store-donate-message.is-success {
    color: var(--cg-c-success-fg);
}

.store-donate-remove {
    padding-left: 0;
}

.store-page [data-billing-panel].is-revealing {
    animation: store-reveal var(--cg-duration-slow) var(--cg-ease-out);
}

@keyframes store-reveal {
    from {
        opacity: 0.4;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 860px) {
    .store-line,
    .store-bundle {
        grid-template-columns: minmax(0, 1fr);
    }

    .store-header > h1 {
        font-size: var(--cg-text-3xl);
    }

    .store-bundle .store-line-title {
        font-size: var(--cg-text-3xl);
    }
}

@media (max-width: 640px) {
    .store-page {
        gap: var(--cg-space-6);
        padding: var(--cg-space-6) var(--cg-space-4) var(--cg-space-7);
    }

    .store-line {
        padding-top: var(--cg-space-6);
    }

    .store-bundle {
        padding: var(--cg-space-5) var(--cg-space-4);
    }

    .store-offer {
        padding: var(--cg-space-4);
    }

    .store-stack-header > .store-billing {
        width: 100%;
    }

    .store-billing > button {
        flex: 1 1 0;
    }
}