/* ── Design Tokens (Tesla palette) ────────────────────── */
:root {
    /* Text */
    --c-text: #171A20;          /* Carbon Dark — headings, primary text */
    --c-text-secondary: #393C41; /* Graphite — body text */
    --c-text-tertiary: #5C5E62;  /* Pewter — secondary text */
    --c-text-muted: #8E8E8E;     /* Silver Fog — placeholder, captions */

    /* Surfaces */
    --c-bg: #FFFFFF;
    --c-surface: #FFFFFF;
    --c-surface-alt: #F4F4F4;    /* Light Ash — input backgrounds, dividers */
    --c-border: #EEEEEE;         /* Cloud Gray — borders */

    /* Brand */
    --c-primary: #3E6AE1;        /* Electric Blue */
    --c-primary-hover: #2B54C5;

    /* States */
    --c-success: #2D6A4F;
    --c-warning: #D4A017;
    --c-warning-bg: #FFF8F0;
    --c-warning-border: #F6C470;
    --c-warning-text: #8A5900;
    --c-error: #BA1A1A;

    /* Type stacks — per .impeccable.md, Plus Jakarta Sans drives display (h1/h2)
       and Inter drives everything else. Two weights only (400/500). */
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, Arial, sans-serif;
    --font-body: 'Inter', -apple-system, Arial, sans-serif;
}

/* ── Global ────────────────────────────────────────────── */
html, body {
    font-family: var(--font-body);
    background-color: #FFFFFF;
    color: #171A20;
    margin: 0;
    padding: 0;
}

/* Public storefront headings use the display font. Everything inside .shop-section
   or .shop-hero that's an h1/h2 gets Plus Jakarta Sans automatically — keeps page
   markup clean and enforces consistency across storefront screens. */
.shop-section h1,
.shop-section h2,
.shop-hero h1,
.shop-hero h2 {
    font-family: var(--font-display);
}

/* ── Blazor ────────────────────────────────────────────── */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ── Auth layout ───────────────────────────────────────── */
.auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow-x: hidden;
}
@media (min-width: 768px)  { .auth-screen { padding: 1.5rem; } }
@media (min-width: 1024px) { .auth-screen { padding: 3rem; } }

.auth-card {
    width: 100%;
    max-width: 80rem;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 921px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 48px 48px rgba(23,26,32,0.04);
    background: #ffffff;
}
@media (min-width: 768px)  { .auth-card { min-height: 800px; border-radius: 0.75rem; } }
@media (min-width: 1024px) { .auth-card { grid-template-columns: 1fr 1fr; } }

/* Left image panel — hidden on mobile */
.auth-left {
    display: none;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) { .auth-left { display: block; } }

.auth-left img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-left-overlay {
    position: absolute;
    inset: 0;
    background: rgba(27, 28, 25, 0.1);
}

.auth-left-content {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
    right: 3rem;
    color: #FFFFFF;
}


.auth-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2rem;
    background: #FFFFFF;
    position: relative;
}
@media (min-width: 640px)  { .auth-right { padding: 3rem; } }
@media (min-width: 1024px) { .auth-right { padding: 3rem 6rem; } }

.auth-form-inner {
    max-width: 28rem;
    width: 100%;
    margin: 0 auto;
}
@media (min-width: 1024px) { .auth-form-inner { margin: 0; } }

/* ── Form inputs ───────────────────────────────────────── */
.field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #5C5E62;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.cartly-field {
    width: 100%;
    background: #F4F4F4;
    border: none;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    color: #171A20;
    outline: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-sizing: border-box;
    transition: box-shadow 0.2s;
}
.cartly-field:focus {
    box-shadow: 0 0 0 2px rgba(62, 106, 225, 0.4);
}
.cartly-field::placeholder {
    color: rgba(92, 94, 98, 0.5);
}

.cartly-field-group {
    display: flex;
    align-items: center;
    background: #F4F4F4;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.cartly-field-group:focus-within {
    box-shadow: 0 0 0 2px rgba(62, 106, 225, 0.4);
}
.cartly-field-group .cartly-field {
    background: transparent;
    border-radius: 0;
    flex: 1;
}
.cartly-field-group .cartly-field:focus {
    box-shadow: none;
}
.cartly-field-suffix {
    padding: 0 1rem;
    color: rgba(92, 94, 98, 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    border-left: 1px solid rgba(238,238,238,0.5);
    white-space: nowrap;
}

.cartly-field-password {
    position: relative;
}
.cartly-field-password .cartly-field {
    padding-right: 3rem;
}
.cartly-field-password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(92, 94, 98, 0.6);
    padding: 0.25rem;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.cartly-field-password-toggle:hover {
    color: #3E6AE1;
}

/* ── Buttons ───────────────────────────────────────────── */
.cartly-btn-primary {
    width: 100%;
    background: #3E6AE1;
    color: white;
    border: none;
    border-radius: 9999px;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(62,106,225,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.cartly-btn-primary:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(62,106,225,0.3);
}
.cartly-btn-primary:active:not(:disabled) {
    transform: scale(0.98);
}
.cartly-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cartly-btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(238,238,238,0.5);
    border-radius: 9999px;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: #171A20;
    cursor: pointer;
    transition: background 0.3s;
    font-family: 'Plus Jakarta Sans', sans-serif;
    width: 100%;
}
.cartly-btn-social:hover {
    background: #F4F4F4;
}

/* ── Divider with text ─────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}
.auth-divider hr {
    flex: 1;
    border: none;
    border-top: 1px solid rgba(238,238,238,0.5);
}
.auth-divider span {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8E8E8E;
    white-space: nowrap;
}

/* ── Social grid ───────────────────────────────────────── */
.auth-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0;
}

/* ── Logo ──────────────────────────────────────────────── */
.auth-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
}
.auth-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: #3E6AE1;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(62,106,225,0.3);
}
.auth-logo span.label {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #171A20;
}

/* ── Decorative blobs ──────────────────────────────────── */
.auth-blob-1 {
    position: absolute;
    bottom: -3rem;
    right: -3rem;
    width: 16rem;
    height: 16rem;
    background: rgba(206,229,218,0.2);
    border-radius: 9999px;
    filter: blur(3rem);
    z-index: 0;
    pointer-events: none;
}
.auth-blob-2 {
    position: absolute;
    top: -3rem;
    left: -3rem;
    width: 12rem;
    height: 12rem;
    background: rgba(62,106,225,0.08);
    border-radius: 9999px;
    filter: blur(3rem);
    z-index: 0;
    pointer-events: none;
}
.auth-form-inner { position: relative; z-index: 1; }


.auth-register-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: #FFFFFF;
    overflow-y: auto;
}
@media (min-width: 640px)  { .auth-register-right { padding: 3rem; } }
@media (min-width: 1024px) { .auth-register-right { padding: 3rem 6rem; } }

/* ── Dashboard layout (MudLayout-based) ──────────────── */
.dash-topnav {
    display: none;
    align-items: center;
    gap: 2rem;
}
@media (min-width: 960px) { .dash-topnav { display: flex; } }

.drawer-toggle { display: flex !important; }
@media (min-width: 960px) { .drawer-toggle { display: none !important; } }

/* ── Material Symbols ─────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Blazor error UI ──────────────────────────────────── */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Focus-visible ────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #3E6AE1;
    outline-offset: 2px;
}

/* ── Hover utility classes (replacing inline onmouseover/onmouseout) ── */
.hover-bg-light {
    transition: background-color 0.33s;
    background: transparent;
}
.hover-bg-light:hover, .hover-bg-light:focus-visible {
    background: #F4F4F4;
}

.hover-bg-subtle {
    transition: background 0.2s;
    background: transparent;
}
.hover-bg-subtle:hover, .hover-bg-subtle:focus-visible {
    background: #faf8f5;
}

.hover-upload-btn {
    transition: background 0.2s;
    background: transparent;
}
.hover-upload-btn:hover, .hover-upload-btn:focus-visible {
    background: rgba(62,106,225,0.06);
}

.hover-opacity {
    transition: opacity 0.33s;
}
.hover-opacity:hover, .hover-opacity:focus-visible {
    opacity: 0.85;
}

.hover-color-dark {
    transition: color 0.33s;
}
.hover-color-dark:hover, .hover-color-dark:focus-visible {
    color: #171A20;
}

.hover-color-remove {
    transition: color 0.33s;
}
.hover-color-remove:hover, .hover-color-remove:focus-visible {
    color: #d32f2f;
}

.hover-border-dark {
    transition: border-color 0.33s;
}
.hover-border-dark:hover, .hover-border-dark:focus-visible {
    border-color: #393C41;
}

.hover-cart-row {
    transition: background-color 0.33s;
}
.hover-cart-row:hover {
    background: #F4F4F4;
}

.hover-clear-btn {
    transition: all 0.33s;
}
.hover-clear-btn:hover, .hover-clear-btn:focus-visible {
    background: #F4F4F4;
    color: #171A20;
}

.hover-continue-link {
    transition: color 0.33s;
}
.hover-continue-link:hover, .hover-continue-link:focus-visible {
    color: #171A20;
}

.hover-breadcrumb {
    transition: color 0.33s;
}
.hover-breadcrumb:hover, .hover-breadcrumb:focus-visible {
    color: #171A20;
}

.hover-cat-filter:not(.cat-filter-active):hover,
.hover-cat-filter:not(.cat-filter-active):focus-visible {
    background: #F4F4F4;
}

/* ── Shop card hover ──────────────────────────────────── */
.shop-card:hover, .shop-card:focus-visible {
    border-color: #393C41;
}
.shop-featured-card {
    transition: opacity 0.33s;
}
.shop-featured-card:hover {
    opacity: 0.92;
}

.mall-hero {
    background: #f6f3ed;
    overflow: hidden;
}

.mall-hero__inner {
    max-width: 1240px;
    margin: 0 auto;
    min-height: calc(100svh - 56px);
    padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 40px) clamp(40px, 7vw, 72px);
    display: grid;
    grid-template-columns: minmax(0, 5.2fr) minmax(0, 4.8fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.mall-hero__copy {
    max-width: 520px;
}

.mall-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #3E6AE1;
}

.mall-hero__eyebrow::before {
    content: "";
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

.mall-hero__copy h1 {
    max-width: 9ch;
    margin: 0 0 18px;
    font-size: clamp(32px, 4.8vw, 40px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #171A20;
}

.mall-hero__lead {
    max-width: 34ch;
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.67;
    color: #5C5E62;
}

.mall-hero__context {
    max-width: 34rem;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(23,26,32,0.12);
    font-size: 13px;
    line-height: 1.6;
    color: #393C41;
}

.mall-hero__stage {
    min-height: clamp(460px, 62vh, 640px);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.mall-hero-window {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 12px;
    min-height: 0;
    text-decoration: none;
    color: #FFFFFF;
    background: color-mix(in srgb, var(--shop-accent, #3E6AE1) 84%, #171A20 16%);
    isolation: isolate;
    transition: opacity 0.33s cubic-bezier(0.5, 0, 0, 0.75);
}

.mall-hero-window:hover,
.mall-hero-window:focus-visible {
    opacity: 0.92;
}

.mall-hero-window--primary {
    grid-row: 1 / span 2;
}

.mall-hero-window__media,
.mall-hero-window__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mall-hero-window__media {
    object-fit: cover;
}

.mall-hero-window__fallback {
    background: var(--shop-accent, #3E6AE1);
}

.mall-hero-window::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23,26,32,0.08) 0%, rgba(23,26,32,0.22) 45%, rgba(23,26,32,0.76) 100%);
    z-index: 1;
}

.mall-hero-window__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 24px;
}

.mall-hero-window--primary .mall-hero-window__content {
    padding: 28px;
}

.mall-hero-window__eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}

.mall-hero-window h2 {
    max-width: 12ch;
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

.mall-hero-window--primary h2 {
    font-size: clamp(26px, 3vw, 32px);
}

.mall-hero-window p:last-child {
    max-width: 24ch;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.8);
}

.mall-hero-window--placeholder::after {
    background: linear-gradient(180deg, rgba(23,26,32,0.02) 0%, rgba(23,26,32,0.1) 45%, rgba(23,26,32,0.78) 100%);
}

/* ── Scroll hint animation ───────────────────────────── */
@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(6px); opacity: 0.6; }
}

/* ── Product card hover ───────────────────────────────── */
.product-card img {
    transition: opacity 0.33s;
}
.product-card:hover img {
    opacity: 0.85;
}

/* ── Cart page layout ────────────────────────────────── */
.cart-page-layout {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}
.cart-items-section { flex: 2; min-width: 0; }
.cart-sidebar-section { flex: 1; min-width: 280px; position: sticky; top: 80px; }
.cart-desktop-table { display: block; }
.cart-mobile-cards { display: none; }

@media (max-width: 768px) {
    .cart-page-layout { flex-direction: column; gap: 24px; }
    .cart-sidebar-section { min-width: 0; width: 100%; position: static; }
    .cart-desktop-table { display: none; }
    .cart-mobile-cards { display: block; }
}

/* ── Cart checkout form — outlined text fields ───────── */
.cart-checkout-form .mud-input-outlined .mud-input-slot,
.cart-checkout-form .mud-input-outlined input,
.cart-checkout-form .mud-input-outlined textarea {
    color: #171A20;
}
.cart-checkout-form .mud-input-outlined input::placeholder,
.cart-checkout-form .mud-input-outlined textarea::placeholder {
    color: #8E8E8E !important;
    opacity: 1 !important;
}

/* ── Public storefront responsive ─────────────────────── */
@media (max-width: 768px) {
    .shop-hero { padding: 40px 16px !important; }
    .shop-grid { gap: 16px !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
    .shop-section { padding-left: 16px !important; padding-right: 16px !important; }
    .shop-header { padding: 12px 16px !important; }
    .product-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
    .product-thumbnails { flex-direction: row !important; width: auto !important; overflow-x: auto; }
    .product-thumbnails button { width: 64px !important; height: 64px !important; flex-shrink: 0; }
    .reviews-section { margin-left: -16px !important; margin-right: -16px !important; padding: 40px 16px !important; }
    .mall-shop-grid { padding-left: 16px !important; padding-right: 16px !important; gap: 16px !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }

    /* Shop page mobile */
    .shop-hero { min-height: 60vh !important; }
    .shop-hero + div .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }

    /* Filter bar mobile */
    .shop-filter-bar { padding: 12px 16px !important; gap: 8px !important; flex-wrap: nowrap; }

    /* Featured product mobile — stack vertically */
    .shop-featured-product { grid-template-columns: 1fr !important; min-height: auto !important; }
    .shop-featured-product__details { padding: 24px !important; }

    .mall-hero__inner {
        min-height: auto;
        padding: 28px 16px 36px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mall-hero__copy {
        max-width: none;
    }

    .mall-hero__copy h1,
    .mall-hero__lead,
    .mall-hero__context {
        max-width: none;
    }

    .mall-hero__lead {
        margin-bottom: 24px;
        font-size: 14px;
    }

    .mall-hero__stage {
        min-height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 280px 172px;
        gap: 12px;
    }

    .mall-hero-window--primary {
        grid-column: 1 / span 2;
        grid-row: auto;
    }

    .mall-hero-window__content,
    .mall-hero-window--primary .mall-hero-window__content {
        padding: 18px;
    }

    .mall-hero-window h2 {
        font-size: 20px;
    }

    .mall-hero-window--primary h2 {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mall-hero-window {
        transition: none;
    }
}

/* ── Spinner ───────────────────────────────────────────── */
@keyframes spin {
    to { transform: rotate(360deg); }
}