@import url("crimory-brand-system.css");

/* Shared visual language for the public game funnel: archive, case builder and checkout. */
:root {
    --cr-funnel-canvas: var(--cr-theme-canvas, #080b0c);
    --cr-funnel-surface: var(--cr-theme-surface, #121719);
    --cr-funnel-raised: var(--cr-theme-surface-raised, #192022);
    --cr-funnel-paper: #ebe2cf;
    --cr-funnel-paper-ink: #241f19;
    --cr-funnel-text: #f4f1e9;
    --cr-funnel-muted: var(--cr-theme-muted, #a9afad);
    --cr-funnel-dim: var(--cr-theme-dim, #747c79);
    --cr-funnel-line: rgba(244, 241, 233, 0.12);
    --cr-funnel-line-strong: rgba(244, 241, 233, 0.2);
    --cr-funnel-gold: var(--cr-gold, #d0a85a);
    --cr-funnel-gold-soft: var(--cr-gold-soft, #e7d3a0);
    --cr-funnel-petrol: var(--cr-accent, #638d89);
    --cr-funnel-petrol-soft: var(--cr-accent-soft, #9ab5b0);
    --cr-funnel-oxblood: #874a52;
    scrollbar-color: var(--cr-funnel-petrol) var(--cr-funnel-canvas);
}

:root::-webkit-scrollbar {
    width: 10px;
}

:root::-webkit-scrollbar-track {
    background: var(--cr-funnel-canvas);
}

:root::-webkit-scrollbar-thumb {
    border: 2px solid var(--cr-funnel-canvas);
    border-radius: 5px;
    background: var(--cr-funnel-petrol);
}

body.showcase-page,
body.cr-funnel--create,
body.cr-funnel--checkout {
    background: var(--cr-funnel-canvas) !important;
    color: var(--cr-funnel-text);
    font-family: "Manrope", "Noto Sans", system-ui, sans-serif !important;
    scrollbar-color: var(--cr-funnel-petrol) var(--cr-funnel-canvas);
}

/* Der Creator übernimmt den ruhigen, generierten Archiv-Hintergrund aus dem
   Dashboard. Die dunkle Lasur hält Formulare und Aktenkarten klar lesbar. */
html[data-crimory-skin] body.cr-funnel--create {
    background:
        linear-gradient(
            180deg,
            rgba(8, 11, 12, 0.8),
            rgba(8, 11, 12, 0.91)
        ),
        url("../img/ui/crimory-marks/archive/backgrounds/generated-wallpaper-quiet.png") !important;
    background-attachment: fixed, fixed !important;
    background-position: center top, center top !important;
    background-repeat: repeat, repeat !important;
    background-size: auto, min(1254px, 100vw) auto !important;
}

body.showcase-page::-webkit-scrollbar,
body.cr-funnel--create::-webkit-scrollbar,
body.cr-funnel--checkout::-webkit-scrollbar {
    width: 10px;
}

body.showcase-page::-webkit-scrollbar-track,
body.cr-funnel--create::-webkit-scrollbar-track,
body.cr-funnel--checkout::-webkit-scrollbar-track {
    background: var(--cr-funnel-canvas);
}

body.showcase-page::-webkit-scrollbar-thumb,
body.cr-funnel--create::-webkit-scrollbar-thumb,
body.cr-funnel--checkout::-webkit-scrollbar-thumb {
    border: 2px solid var(--cr-funnel-canvas);
    border-radius: 5px;
    background: var(--cr-funnel-petrol);
}

body.showcase-page *,
body.cr-funnel--create *,
body.cr-funnel--checkout * {
    letter-spacing: 0 !important;
}

body.showcase-page :focus-visible,
body.cr-funnel--create :focus-visible,
body.cr-funnel--checkout :focus-visible {
    outline: 2px solid var(--cr-funnel-gold) !important;
    outline-offset: 3px;
}

body.showcase-page nav,
body.cr-funnel--create #navbar,
body.cr-funnel--checkout > nav {
    border-bottom: 1px solid var(--cr-funnel-line) !important;
    background: rgba(8, 11, 12, 0.96) !important;
    color: var(--cr-funnel-text) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px);
}

body.showcase-page nav .text-primary,
body.cr-funnel--create #navbar .text-primary,
body.cr-funnel--checkout > nav .text-primary {
    color: var(--cr-funnel-gold) !important;
}

body.showcase-page nav .bg-primary,
body.cr-funnel--create #navbar .bg-primary,
body.cr-funnel--checkout > nav .bg-primary,
body.showcase-page .public-nav-mobile-primary,
body.cr-funnel--create .public-nav-mobile-primary {
    border-color: var(--cr-funnel-gold) !important;
    background: var(--cr-funnel-gold) !important;
    color: var(--cr-gold-on, #171918) !important;
    box-shadow: 0 10px 24px rgba(var(--cr-gold-rgb, 208, 168, 90), 0.16) !important;
}

body.showcase-page nav a[href="index"] > div,
body.showcase-page nav a[href="/"] > div,
body.cr-funnel--create #navbar a[href="index"] > div,
body.cr-funnel--checkout > nav a[href="index"] > div {
    border-color: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.38) !important;
    border-radius: 6px !important;
    background: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.1) !important;
}

body.showcase-page nav a.rounded-full,
body.cr-funnel--create #navbar a.rounded-full,
body.cr-funnel--checkout > nav a.rounded-full,
body.showcase-page .public-nav-mobile-cta,
body.cr-funnel--create .funnel-mobile-cta,
body.showcase-page .public-nav-menu a,
body.cr-funnel--create .public-nav-menu a {
    border-radius: 6px !important;
}

body.cr-funnel--create #navbar .funnel-mobile-cta {
    border-color: var(--cr-funnel-gold) !important;
    background: var(--cr-funnel-gold) !important;
    color: var(--cr-gold-on, #171918) !important;
}

body.showcase-page .public-nav-menu-panel,
body.cr-funnel--create .public-nav-menu-panel {
    border-color: var(--cr-funnel-line) !important;
    background: var(--cr-funnel-surface) !important;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42) !important;
}

/* Public archive and game details */
.showcase-page {
    --showcase-ink: var(--cr-funnel-text);
    --showcase-muted: var(--cr-funnel-muted);
    --showcase-line: var(--cr-funnel-line);
    --showcase-panel: var(--cr-funnel-surface);
    --showcase-wine: var(--cr-funnel-oxblood);
    --showcase-copper: var(--cr-funnel-gold);
    --showcase-teal: var(--cr-funnel-petrol);
}

.showcase-page main {
    background: var(--cr-funnel-canvas) !important;
}

.showcase-page .showcase-hero::after,
.showcase-page .showcase-detail-hero::after,
.showcase-page .showcase-shop-hero::after {
    background:
        linear-gradient(90deg, rgba(8, 11, 12, 0.97) 0%, rgba(8, 11, 12, 0.78) 48%, rgba(8, 11, 12, 0.28) 100%),
        linear-gradient(180deg, rgba(8, 11, 12, 0.12) 0%, rgba(8, 11, 12, 0.98) 100%) !important;
}

.showcase-page .showcase-hero h1,
.showcase-page .showcase-detail-hero h1,
.showcase-page .showcase-section-head h2,
.showcase-page .seo-scene-card h2,
.showcase-page .seo-host-card h2 {
    color: var(--cr-funnel-text);
    font-family: "Playfair Display", Georgia, serif !important;
    font-weight: 700;
}

.showcase-page .showcase-eyebrow,
.showcase-page .showcase-detail-kicker,
.showcase-page .seo-pulse-card > span {
    color: var(--cr-funnel-gold) !important;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-weight: 700;
}

.showcase-page .showcase-button {
    min-height: 3.05rem;
    border-radius: 6px;
    box-shadow: none;
}

.showcase-page .showcase-button-primary,
.showcase-page .showcase-button-primary:hover {
    border-color: var(--cr-funnel-gold);
    background: var(--cr-funnel-gold);
    color: var(--cr-gold-on, #171918);
    box-shadow: 0 12px 26px rgba(var(--cr-gold-rgb, 208, 168, 90), 0.17);
}

.showcase-page .showcase-button-secondary {
    border-color: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.46);
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.1);
    color: var(--cr-funnel-petrol-soft);
}

.showcase-page .showcase-button-secondary:hover {
    border-color: var(--cr-funnel-petrol);
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.17);
    color: var(--cr-funnel-text);
}

.showcase-page .showcase-stat {
    min-width: 8.5rem;
    border: 0;
    border-left: 2px solid var(--cr-funnel-gold);
    border-radius: 0;
    background: rgba(18, 23, 25, 0.72);
    backdrop-filter: blur(12px);
}

.showcase-page .showcase-stat span,
.showcase-page .showcase-card p,
.showcase-page .showcase-info p,
.showcase-page .showcase-info li,
.showcase-page .seo-scene-card p,
.showcase-page .seo-host-card p,
.showcase-page .seo-pulse-card p,
.showcase-page .seo-beat p,
.showcase-page .showcase-section-head p {
    color: var(--cr-funnel-muted);
}

.showcase-page .showcase-hero-shop-card,
.showcase-page .showcase-card,
.showcase-page .showcase-info,
.showcase-page .showcase-gallery-item,
.showcase-page .seo-scene-card,
.showcase-page .seo-host-card,
.showcase-page .seo-pulse-card,
.showcase-page .seo-beat,
.showcase-page .seo-preview-frame {
    border-color: var(--cr-funnel-line);
    border-radius: 8px;
    background: var(--cr-funnel-surface);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.showcase-page .showcase-product-card {
    background: var(--cr-funnel-surface);
}

.showcase-page .showcase-card::after,
.showcase-page .showcase-info::after,
.showcase-page .showcase-gallery-item::after,
.showcase-page .showcase-hero-shop-card::after,
.showcase-page .seo-scene-card::after,
.showcase-page .seo-beat::after,
.showcase-page .seo-host-card::after,
.showcase-page .seo-pulse-card::after,
.showcase-page .seo-preview-frame::after {
    display: none;
}

.showcase-page .showcase-card:hover,
.showcase-page .showcase-info:hover,
.showcase-page .showcase-gallery-item:hover,
.showcase-page .showcase-hero-shop-card:hover,
.showcase-page .seo-scene-card:hover,
.showcase-page .seo-beat:hover,
.showcase-page .seo-host-card:hover,
.showcase-page .seo-pulse-card:hover,
.showcase-page .seo-preview-frame:hover {
    border-color: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.38);
    background: var(--cr-funnel-raised);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
}

.showcase-page .showcase-card h3,
.showcase-page .showcase-info h3,
.showcase-page .seo-beat h3,
.showcase-page .seo-pulse-card h3,
.showcase-page .showcase-hero-shop-card strong {
    color: var(--cr-funnel-text);
}

.showcase-page .showcase-card h3,
.showcase-page .showcase-info h3 {
    font-family: "Playfair Display", Georgia, serif;
}

.showcase-page .showcase-section-alt,
.showcase-page .seo-opening-section {
    border-color: var(--cr-funnel-line);
    background: var(--cr-theme-surface-deep, #101516);
}

.showcase-page .showcase-filter,
.showcase-page .showcase-chip,
.showcase-page .showcase-card-badge,
.showcase-page .showcase-card-link-primary,
.showcase-page .showcase-card-link-secondary,
.showcase-page .seo-clue-strip li,
.showcase-page .seo-beat-step,
.showcase-page .seo-preview-frame figcaption,
.showcase-page .showcase-card-ribbon {
    border-radius: 6px;
}

.showcase-page .showcase-filter {
    border-color: var(--cr-funnel-line);
    background: var(--cr-funnel-surface);
    color: var(--cr-funnel-muted);
}

.showcase-page .showcase-filter:hover,
.showcase-page .showcase-filter.is-active {
    border-color: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.58);
    background: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.12);
    color: var(--cr-funnel-gold-soft);
}

.showcase-page .showcase-card-link-primary {
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.11);
    color: var(--cr-funnel-text);
}

.showcase-page .showcase-card-link-secondary {
    border-color: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.35);
    color: var(--cr-funnel-gold-soft);
}

.showcase-page .showcase-card-price-row {
    border-color: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.26);
    background: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.08);
}

.showcase-page .showcase-material-card {
    border-color: var(--cr-funnel-line);
    border-left: 3px solid var(--cr-funnel-petrol);
    background: var(--cr-funnel-raised);
    color: var(--cr-funnel-text);
}

.showcase-page .showcase-material-card:nth-child(2) {
    border-left-color: var(--cr-funnel-gold);
    background: var(--cr-funnel-raised);
}

.showcase-page .seo-host-steps li,
.showcase-page .summary-section {
    border-color: var(--cr-funnel-line);
    background: rgba(255, 255, 255, 0.025);
}

.showcase-page .seo-host-steps span {
    background: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.12);
    color: var(--cr-funnel-gold);
}

/* Personal case builder */
body.cr-funnel--create {
    --creator-ink: var(--cr-funnel-text);
    --creator-muted: var(--cr-funnel-muted);
    --creator-faint: var(--cr-funnel-dim);
    --creator-line: var(--cr-funnel-line);
    --creator-panel: var(--cr-funnel-surface);
    --creator-panel-soft: rgba(255, 255, 255, 0.035);
    --creator-paper: var(--cr-funnel-paper);
    --creator-gold: var(--cr-funnel-gold);
    --creator-red: var(--cr-funnel-oxblood);
}

body.cr-funnel--create .particles-bg {
    background:
        linear-gradient(115deg, rgba(135, 74, 82, 0.06), transparent 34%),
        repeating-linear-gradient(90deg, rgba(244, 241, 233, 0.025) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(0deg, rgba(244, 241, 233, 0.018) 0 1px, transparent 1px 44px) !important;
}

body.cr-funnel--create .creator-brief-copy,
body.cr-funnel--create .creator-brief-card,
body.cr-funnel--create .creator-workbench {
    border-color: var(--cr-funnel-line);
    background: var(--cr-funnel-surface) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

body.cr-funnel--create .creator-side-panel {
    border-color: var(--cr-funnel-line);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

body.cr-funnel--create .creator-title,
body.cr-funnel--create .creator-workbench .step-content > .text-center h2,
body.cr-funnel--create .creator-side-panel h2,
body.cr-funnel--create #onboarding-title,
body.cr-funnel--create #progress-title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-weight: 700 !important;
}

body.cr-funnel--create .creator-kicker,
body.cr-funnel--create .creator-workbench .step-content > .text-center > .inline-flex {
    font-family: "JetBrains Mono", Consolas, monospace;
}

body.cr-funnel--create .creator-workbench #next-btn,
body.cr-funnel--create .creator-workbench #generate-btn,
body.cr-funnel--create #onboarding-overlay [data-create-action="dismiss-onboarding"].w-full {
    border: 1px solid var(--cr-funnel-gold) !important;
    border-radius: 6px !important;
    background: var(--cr-funnel-gold) !important;
    color: var(--cr-gold-on, #171918) !important;
    box-shadow: 0 12px 26px rgba(var(--cr-gold-rgb, 208, 168, 90), 0.16) !important;
}

body.cr-funnel--create .creator-workbench .step-indicator.active {
    border-color: var(--cr-funnel-gold) !important;
    background: var(--cr-funnel-gold) !important;
    color: var(--cr-gold-on, #171918) !important;
    box-shadow: 0 0 0 3px rgba(var(--cr-gold-rgb, 208, 168, 90), 0.14) !important;
}

body.cr-funnel--create .creator-workbench .step-indicator {
    border-color: var(--cr-funnel-line-strong) !important;
    background: var(--cr-funnel-raised) !important;
    color: var(--cr-funnel-dim) !important;
}

body.cr-funnel--create .creator-workbench .step-indicator + .flex-1 {
    background: rgba(244, 241, 233, 0.08) !important;
}

body.cr-funnel--create .creator-workbench .step-indicator.completed {
    border-color: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.72) !important;
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.18) !important;
    color: var(--cr-funnel-petrol-soft) !important;
}

body.cr-funnel--create .creator-workbench .progress-segment {
    background: var(--cr-funnel-gold) !important;
}

body.cr-funnel--create .creator-workbench #wizard-container .option-btn.selected,
.dark body.cr-funnel--create .creator-workbench #wizard-container .option-btn.selected,
html.dark body.cr-funnel--create .creator-workbench #wizard-container .option-btn.selected {
    border-color: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.7) !important;
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.24) !important;
    box-shadow: 0 0 0 2px rgba(var(--cr-accent-rgb, 99, 141, 137), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body.cr-funnel--create .creator-workbench #wizard-container .option-btn.selected::after {
    background: var(--cr-funnel-petrol) !important;
    box-shadow: 0 2px 8px rgba(var(--cr-accent-rgb, 99, 141, 137), 0.35) !important;
}

body.cr-funnel--create .creator-workbench #wizard-container .creator-cluster-tab.is-active {
    border-color: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.62) !important;
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.2) !important;
    color: var(--cr-accent-on-light, #3f716d) !important;
    box-shadow: 0 0 0 2px rgba(var(--cr-accent-rgb, 99, 141, 137), 0.1) !important;
}

body.cr-funnel--create .creator-workbench [data-create-action="generate-theme-suggestions"],
body.cr-funnel--create .creator-workbench #wizard-container [data-create-action="generate-theme-suggestions"] {
    border-color: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.42) !important;
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.12) !important;
}

body.cr-funnel--create .onboarding-card,
body.cr-funnel--create #generation-modal .bg-surface-dark {
    border: 1px solid var(--cr-funnel-line) !important;
    border-radius: 8px !important;
    background: var(--cr-funnel-surface) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5) !important;
}

body.cr-funnel--create #generation-modal .bg-gradient-to-br {
    background: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.04) !important;
}

/* Checkout */
body.cr-funnel--checkout > main {
    min-height: 100vh;
    background: var(--cr-funnel-canvas);
}

body.cr-funnel--checkout .gradient-orb {
    display: none !important;
}

body.cr-funnel--checkout #checkout-content > .text-center > h1,
body.cr-funnel--checkout .summary-case-title,
body.cr-funnel--checkout .checkout-success-hero h1,
body.cr-funnel--checkout .checkout-next-panel h2 {
    color: var(--cr-funnel-text) !important;
    font-family: "Playfair Display", Georgia, serif !important;
    font-weight: 700 !important;
}

body.cr-funnel--checkout .text-primary {
    color: var(--cr-funnel-gold) !important;
}

body.cr-funnel--checkout .bg-primary,
body.cr-funnel--checkout #submit-btn,
body.cr-funnel--checkout .checkout-success-primary {
    border-color: var(--cr-funnel-gold) !important;
    background: var(--cr-funnel-gold) !important;
    color: var(--cr-gold-on, #171918) !important;
    box-shadow: 0 12px 26px rgba(var(--cr-gold-rgb, 208, 168, 90), 0.16) !important;
}

body.cr-funnel--checkout .bg-primary\/10,
body.cr-funnel--checkout [class*="bg-primary/"] {
    background-color: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.1) !important;
}

body.cr-funnel--checkout .border-primary,
body.cr-funnel--checkout [class*="border-primary/"] {
    border-color: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.5) !important;
}

body.cr-funnel--checkout .flow-bridge,
body.cr-funnel--checkout .checkout-surface,
body.cr-funnel--checkout .checkout-option,
body.cr-funnel--checkout #form-area,
body.cr-funnel--checkout .checkout-status-chip,
body.cr-funnel--checkout .checkout-fiction-note,
body.cr-funnel--checkout .checkout-success-hero,
body.cr-funnel--checkout .checkout-next-panel,
body.cr-funnel--checkout .checkout-success-actions,
body.cr-funnel--checkout .checkout-success-note {
    border-radius: 8px !important;
    border-color: var(--cr-funnel-line) !important;
    background-color: var(--cr-funnel-surface) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26) !important;
}

body.cr-funnel--checkout .checkout-status-chip {
    box-shadow: none !important;
}

body.cr-funnel--checkout .checkout-fiction-note {
    background: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.05) !important;
    box-shadow: none !important;
}

body.cr-funnel--checkout .flow-bridge {
    border-left: 3px solid var(--cr-funnel-gold) !important;
    background: var(--cr-funnel-surface) !important;
}

body.cr-funnel--checkout .flow-step {
    border-radius: 5px;
    border-color: var(--cr-funnel-line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--cr-funnel-dim);
}

body.cr-funnel--checkout .flow-step.is-complete {
    border-color: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.38);
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.1);
    color: var(--cr-funnel-petrol-soft);
}

body.cr-funnel--checkout .flow-step.is-current {
    border-color: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.48);
    background: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.12);
    color: var(--cr-funnel-gold-soft);
    box-shadow: none;
}

body.cr-funnel--checkout .flow-back-link {
    border-radius: 6px;
    border-color: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.4);
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.09);
    color: var(--cr-funnel-petrol-soft);
}

body.cr-funnel--checkout .checkout-summary-shell {
    gap: 0;
    padding: 0.85rem;
    background: var(--cr-funnel-surface) !important;
}

body.cr-funnel--checkout .summary-hero-card {
    border-radius: 6px;
    border-color: var(--cr-funnel-line);
    box-shadow: none;
}

body.cr-funnel--checkout .summary-hero-media {
    background:
        linear-gradient(130deg, rgba(8, 11, 12, 0.7), rgba(18, 23, 25, 0.36)),
        url('../img/product-mockup.png');
    background-position: center;
    background-size: cover;
}

body.cr-funnel--checkout .summary-hero-overlay {
    background: linear-gradient(180deg, rgba(8, 11, 12, 0.1), rgba(8, 11, 12, 0.9));
}

body.cr-funnel--checkout .summary-badge {
    border-radius: 5px;
    border-color: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.36);
    background: rgba(8, 11, 12, 0.58);
    color: var(--cr-funnel-gold-soft);
}

body.cr-funnel--checkout .summary-section,
body.cr-funnel--checkout .coupon-shell {
    margin-top: 0.85rem;
    border: 0;
    border-top: 1px solid var(--cr-funnel-line);
    border-radius: 0;
    background: transparent;
    padding: 0.85rem 0.1rem 0;
}

body.cr-funnel--checkout .summary-section-title,
body.cr-funnel--checkout .summary-detail-value,
body.cr-funnel--checkout .summary-asset-title,
body.cr-funnel--checkout .summary-price-row strong,
body.cr-funnel--checkout .summary-total-label {
    color: var(--cr-funnel-text);
}

body.cr-funnel--checkout .summary-detail-label,
body.cr-funnel--checkout .summary-asset-sub,
body.cr-funnel--checkout .summary-price-row,
body.cr-funnel--checkout .summary-tax-note,
body.cr-funnel--checkout .summary-case-subtitle {
    color: var(--cr-funnel-muted);
}

body.cr-funnel--checkout .summary-asset {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.35rem 0;
}

body.cr-funnel--checkout .summary-asset-icon {
    border-radius: 5px;
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.12);
    color: var(--cr-funnel-petrol-soft);
}

body.cr-funnel--checkout .summary-total-value,
body.cr-funnel--checkout .flow-case-title {
    color: var(--cr-funnel-gold-soft);
}

body.cr-funnel--checkout .checkout-option {
    background: var(--cr-funnel-surface) !important;
}

body.cr-funnel--checkout .checkout-option[data-active="true"] {
    border-color: rgba(var(--cr-gold-rgb, 208, 168, 90), 0.62) !important;
    background: var(--cr-funnel-raised) !important;
    box-shadow: inset 3px 0 0 var(--cr-funnel-gold), 0 18px 44px rgba(0, 0, 0, 0.26) !important;
}

body.cr-funnel--checkout .checkout-option[data-active="false"] {
    opacity: 0.72;
}

body.cr-funnel--checkout .checkout-option .rounded-xl,
body.cr-funnel--checkout #form-area input,
body.cr-funnel--checkout .coupon-input,
body.cr-funnel--checkout .coupon-apply-btn,
body.cr-funnel--checkout #submit-btn {
    border-radius: 6px !important;
}

body.cr-funnel--checkout .text-green-500 {
    color: var(--cr-funnel-petrol-soft) !important;
}

body.cr-funnel--checkout #form-area {
    background: var(--cr-funnel-surface) !important;
}

body.cr-funnel--checkout #form-area input,
body.cr-funnel--checkout .coupon-input {
    border-color: var(--cr-funnel-line-strong) !important;
    background: var(--cr-funnel-canvas) !important;
    color: var(--cr-funnel-text) !important;
}

body.cr-funnel--checkout #form-area input:focus,
body.cr-funnel--checkout .coupon-input:focus {
    border-color: var(--cr-funnel-gold) !important;
    box-shadow: 0 0 0 3px rgba(var(--cr-gold-rgb, 208, 168, 90), 0.13) !important;
}

body.cr-funnel--checkout .checkout-legal-checkbox:checked {
    border-color: var(--cr-funnel-petrol);
    background: var(--cr-funnel-petrol);
}

body.cr-funnel--checkout .checkout-legal-checkbox:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--cr-accent-rgb, 99, 141, 137), 0.2);
}

body.cr-funnel--checkout .checkout-success-primary,
body.cr-funnel--checkout .checkout-success-secondary {
    border-radius: 6px !important;
}

body.cr-funnel--checkout .checkout-success-secondary {
    border-color: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.4);
    background: rgba(var(--cr-accent-rgb, 99, 141, 137), 0.09);
    color: var(--cr-funnel-petrol-soft);
}

@media (max-width: 640px) {
    body.showcase-page .showcase-hero::after,
    body.showcase-page .showcase-detail-hero::after,
    body.showcase-page .showcase-shop-hero::after {
        background:
            linear-gradient(180deg, rgba(8, 11, 12, 0.2) 0%, rgba(8, 11, 12, 0.78) 45%, rgba(8, 11, 12, 0.99) 100%) !important;
    }

    body.cr-funnel--checkout .flow-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    body.cr-funnel--checkout .flow-step-divider {
        display: none;
    }

    body.cr-funnel--checkout .flow-step {
        justify-content: center;
    }

    body.showcase-page .showcase-shop-hero .showcase-hero-shoprail {
        display: none;
    }

    body.showcase-page .showcase-shop-hero .showcase-hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }

    body.showcase-page .showcase-shop-hero .showcase-stat {
        min-width: 0;
        padding: 0.65rem 0.5rem;
    }

    body.showcase-page .showcase-shop-hero .showcase-stat span {
        font-size: 0.58rem;
    }

    body.showcase-page .showcase-shop-hero .showcase-stat strong {
        overflow-wrap: anywhere;
        font-size: 0.82rem;
        line-height: 1.25;
    }

    body.showcase-page .showcase-shop-hero + .showcase-section {
        padding-top: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.showcase-page *,
    body.cr-funnel--create *,
    body.cr-funnel--checkout * {
        scroll-behavior: auto !important;
    }
}