/* Blade-specific layout rules. The main stylesheet is a static utility build,
   so new responsive layouts live here rather than relying on missing classes. */

footer li:has(> a[href="/admin/dashboard"]) {
    display: none;
}

/* Storefront typography */
:root {
    --store-font-sans: Inter, "SF Pro Text", "SF Pro Display", -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
    font-family: var(--store-font-sans);
    font-size: 16px;
    font-synthesis: none;
    font-variant-numeric: proportional-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -.005em;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    line-height: 1.15;
    letter-spacing: -.025em;
    text-wrap: balance;
}

p,
li,
dd {
    text-wrap: pretty;
}

button,
[role="button"],
input,
select,
textarea {
    line-height: 1.35;
}

strong,
b {
    letter-spacing: -.01em;
}

small {
    line-height: 1.45;
}

.ajax-submit-spinner {
    margin-right: .45rem;
}

button.is-submitting {
    cursor: wait;
    opacity: .78;
}

@media (max-width: 639px) {
    html {
        font-size: 16px;
    }
}

header {
    color: var(--header-foreground) !important;
    background: var(--header) !important;
}

header > nav {
    color: var(--header-foreground) !important;
    background: var(--brand-dark) !important;
    border-color: rgb(255 255 255 / 10%) !important;
}

header a,
header button:not([type="submit"]) {
    color: var(--header-foreground);
}

.header-inner {
    display: flex;
    width: min(100% - 1.5rem, 80rem);
    min-height: 3.75rem;
    margin-inline: auto;
    align-items: center;
    gap: .75rem;
}

.header-action {
    position: relative;
    display: flex;
    height: 2.25rem;
    align-items: center;
    gap: .35rem;
    padding-inline: .75rem;
    border-radius: .5rem;
    font-size: .8rem;
    font-weight: 700;
}

.header-account-link {
    display: inline-flex;
    height: 2.5rem;
    min-width: 0;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
    border-radius: .55rem;
    transition: background-color .15s ease;
}

.header-account-link:hover {
    background: rgb(255 255 255 / 10%);
}

.header-account-avatar {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    background: rgb(255 255 255 / 14%);
    font-size: .72rem;
    font-weight: 800;
}

.header-account-copy {
    display: grid;
    min-width: 0;
    max-width: 6rem;
    line-height: 1.05;
}

.header-account-copy small {
    color: rgb(255 255 255 / 68%);
    font-size: .52rem;
    font-weight: 600;
    line-height: 1;
}

.header-account-copy strong {
    overflow: hidden;
    margin-top: .18rem;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account-name-desktop {
    display: none;
}

.header-action:hover { background: rgb(255 255 255 / 10%); }
.header-action svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.theme-toggle { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; place-items: center; border-radius: .5rem; color: var(--header-foreground); cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.theme-toggle:hover { background: rgb(255 255 255 / 12%); transform: rotate(-8deg); }
.theme-toggle svg { grid-area: 1 / 1; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: opacity .15s ease, transform .2s ease; }
.theme-icon-sun { opacity: 0; transform: scale(.65) rotate(-45deg); }.theme-icon-moon { opacity: 1; transform: scale(1); }
.dark .theme-icon-sun { opacity: 1; transform: scale(1) rotate(0); }.dark .theme-icon-moon { opacity: 0; transform: scale(.65) rotate(45deg); }
.dark { color-scheme: dark; --brand: oklch(70% .15 155); --brand-foreground: oklch(13% .02 155); --brand-dark: oklch(52% .13 155); --header: oklch(11% .015 155); --header-foreground: oklch(96% .01 155); }
.dark header > nav { background: oklch(9% .015 155) !important; }
.dark body { background: var(--background); }
.dark input:not([type="checkbox"]):not([type="radio"]), .dark textarea, .dark select { color: var(--foreground); background-color: var(--card); border-color: var(--input); }
.dark header input { color: #f4f4f5 !important; background: #27272a !important; }
.dark header input::placeholder { color: #a1a1aa !important; }
.dark img { color-scheme: light; }

@media (min-width: 640px) {
    .header-inner { width: min(100% - 2rem, 80rem); }
    .header-account-link { padding-inline: .65rem; }
    .header-account-copy { max-width: 7rem; }
    .header-account-name-mobile { display: none; }
    .header-account-name-desktop { display: block; }
}

@media (max-width: 420px) {
    .header-account-copy { max-width: 4.5rem; }
}

.cart-count-badge {
    position: absolute;
    z-index: 2;
    display: grid;
    min-width: 1.15rem;
    height: 1.15rem;
    padding-inline: .22rem;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #e11d48;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.header-cart-count {
    top: -.2rem;
    right: -.15rem;
    box-shadow: 0 0 0 2px var(--header);
}

.mobile-cart-count {
    top: -.5rem;
    right: -.65rem;
    box-shadow: 0 0 0 2px var(--card);
}

.category-pill-active {
    background: var(--foreground);
    color: var(--background);
    border-color: var(--foreground);
}

.category-summary {
    padding: 1.5rem;
}

.category-filter-pill {
    background: var(--card);
    border-color: var(--border);
    color: var(--muted-foreground);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.category-filter-pill:hover {
    background: var(--accent);
    color: var(--foreground);
}

.category-filter-pill.category-pill-active {
    background: var(--foreground);
    border-color: var(--foreground);
    color: var(--background);
}

.category-filter-row {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
}

.category-filter-row::-webkit-scrollbar {
    display: none;
}

.category-filter-row > * {
    flex: 0 0 auto;
}

.category-empty-state {
    min-height: 13rem;
    padding: 2.5rem 1rem;
}

.category-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.product-card-title {
    min-height: 2.5rem;
}

@media (min-width: 640px) {
    .category-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .category-product-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .category-summary {
        padding: 1rem;
    }

    .category-product-grid article > div {
        padding: .625rem;
    }

    .category-product-grid .product-card-title {
        min-height: 2.25rem;
    }
}

/* Partner portal */
.partner-page { min-height: 70vh; padding: 1.5rem 0 3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, var(--background)) 0, color-mix(in srgb, var(--muted) 52%, var(--background)) 18rem, color-mix(in srgb, var(--muted) 38%, var(--background)) 100%); }
.partner-shell { width: min(100% - 2rem, 78rem); margin-inline: auto; }
.partner-welcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.12); border-radius: .9rem; color: #fff; background: linear-gradient(120deg, var(--brand-dark), color-mix(in srgb, var(--brand) 82%, #102a43)); box-shadow: 0 .35rem 1rem color-mix(in srgb, var(--brand) 18%, transparent); }
.partner-eyebrow { margin: 0 0 .25rem; color: #d8ffea !important; font-size: .68rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.partner-welcome h1 { margin: 0; color: #fff !important; font-size: clamp(1.55rem, 4vw, 2.1rem); font-weight: 900; letter-spacing: -.035em; }
.partner-welcome > div > p:last-child { margin: .35rem 0 0; color: rgba(255,255,255,.78) !important; font-size: .78rem; }
.partner-header-actions { display: flex; align-items: center; gap: .6rem; }
.partner-status { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.partner-status i { width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .2rem color-mix(in srgb, currentColor 15%, transparent); }
.partner-status.is-active { color: #d8ffea; background: rgba(255,255,255,.14); }.partner-status.is-inactive { color: #ffe4e0; background: rgba(180,35,24,.3); }
.partner-header-actions form { display: block; margin: 0; }
.partner-signout { display: inline-flex; min-height: 2.15rem; align-items: center; justify-content: center; padding: .45rem .8rem; border: 1px solid #b42318; border-radius: .5rem; color: #b42318 !important; background: #fff !important; font-size: .68rem; font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer; opacity: 1; visibility: visible; }
.partner-signout:hover { color: #fff !important; background: #b42318 !important; }
.partner-referral-card { position: relative; margin-top: 1.3rem; padding: 1.3rem; overflow: hidden; border-radius: 1rem; color: #fff; background: linear-gradient(125deg, var(--brand-dark), var(--brand) 70%, #26a269); box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--brand) 22%, transparent); }
.partner-referral-card::after { position: absolute; right: -4rem; bottom: -7rem; width: 18rem; height: 18rem; border: 2.5rem solid rgba(255,255,255,.06); border-radius: 50%; content: ''; }
.partner-referral-copy { position: relative; z-index: 1; display: flex; gap: .9rem; max-width: 49rem; }
.partner-referral-icon { display: grid; width: 2.8rem; height: 2.8rem; flex: 0 0 auto; place-items: center; border-radius: .75rem; background: rgba(255,255,255,.14); }
.partner-referral-icon svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.partner-referral-copy span:not(.partner-referral-icon) { font-size: .65rem; font-weight: 750; letter-spacing: .08em; opacity: .75; text-transform: uppercase; }
.partner-referral-copy h2 { margin: .2rem 0 .3rem; font-size: clamp(1.15rem, 3vw, 1.55rem); font-weight: 900; letter-spacing: -.02em; }.partner-referral-copy p { margin: 0; font-size: .72rem; line-height: 1.55; opacity: .83; }
.partner-share-grid { position: relative; z-index: 1; display: grid; gap: .65rem; margin-top: 1rem; }
.partner-share-field > span { display: block; margin-bottom: .3rem; font-size: .6rem; font-weight: 750; opacity: .75; }
.partner-share-field > div { display: flex; min-width: 0; align-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: .65rem; background: rgba(255,255,255,.12); backdrop-filter: blur(5px); }
.partner-share-field strong { min-width: 0; flex: 1; padding: .7rem .8rem; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.partner-share-field #agent-code { font-size: 1rem; letter-spacing: .08em; }
.partner-share-field button { display: flex; align-items: center; gap: .35rem; margin-right: .3rem; padding: .48rem .65rem; border-radius: .45rem; color: var(--brand-dark); background: #fff; font-size: .65rem; font-weight: 850; }
.partner-share-field button svg { width: .8rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.partner-copy-feedback { position: relative; z-index: 1; min-height: 1rem; margin: .4rem 0 -.4rem; font-size: .62rem; opacity: .85; }
.partner-stats { display: grid; gap: .8rem; margin-top: 1rem; }
.partner-stats article { display: flex; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--border) 85%, var(--brand)); border-radius: .85rem; background: color-mix(in srgb, var(--card) 88%, var(--accent)); box-shadow: 0 .2rem .8rem rgba(15,23,42,.045); }
.partner-stats article:nth-child(1) { background: color-mix(in srgb, #e9f8ef 35%, var(--card)); }.partner-stats article:nth-child(2) { background: color-mix(in srgb, #fff2e5 38%, var(--card)); }.partner-stats article:nth-child(3) { background: color-mix(in srgb, #eaf2ff 38%, var(--card)); }.partner-stats article:nth-child(4) { background: color-mix(in srgb, #f2edff 38%, var(--card)); }
.partner-stat-icon { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; place-items: center; border-radius: .7rem; }.partner-stat-icon svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.partner-stat-icon.is-green { color:#18703f;background:#e9f8ef}.partner-stat-icon.is-orange{color:#a44708;background:#fff2e5}.partner-stat-icon.is-blue{color:#175cd3;background:#eaf2ff}.partner-stat-icon.is-purple{color:#6938b8;background:#f2edff}
.partner-stats p { margin: 0; color: var(--muted-foreground); font-size: .65rem; }.partner-stats strong { display: block; margin-top: .1rem; font-size: 1.15rem; font-weight: 900; }.partner-stats small { display: block; margin-top: .05rem; color: var(--muted-foreground); font-size: .56rem; }
.partner-content-grid { display: grid; gap: 1rem; margin-top: 1rem; }.partner-side-stack { display: grid; align-content: start; gap: 1rem; }.partner-panel { overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 88%, var(--brand)); border-radius: .9rem; background: color-mix(in srgb, var(--card) 94%, var(--accent)); box-shadow: 0 .2rem .8rem rgba(15,23,42,.035); }.partner-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 48%, var(--card)); }.partner-panel header p { margin: 0 0 .15rem; color: var(--brand); font-size: .58rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.partner-panel header h2 { margin: 0; font-size: .95rem; font-weight: 850; }.partner-activity > header > span { padding: .3rem .55rem; border-radius: 999px; color: var(--muted-foreground); background: var(--card); font-size: .6rem; font-weight: 750; }
.partner-payout-center{margin-top:1rem;padding:clamp(1rem,2.5vw,1.5rem);border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));border-radius:1.1rem;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 5%,var(--card)),var(--card));box-shadow:0 .5rem 1.8rem rgba(15,23,42,.06)}.partner-section-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}.partner-section-heading p{margin:0;color:var(--brand);font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.partner-section-heading h2{margin:.15rem 0;font-size:clamp(1.15rem,2vw,1.5rem)}.partner-section-heading div>span{color:var(--muted-foreground);font-size:.75rem}.partner-payout-balance{display:grid;min-width:10rem;padding:.65rem .85rem;border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));border-radius:.75rem;background:var(--card)}.partner-payout-balance small{color:var(--muted-foreground);font-size:.6rem}.partner-payout-balance strong{color:var(--brand);font-size:1.15rem}.partner-payout-grid{display:grid;gap:1rem}.partner-bank-state{padding:.3rem .5rem;border-radius:999px;color:var(--muted-foreground);background:var(--card);font-size:.62rem;font-weight:800}.partner-bank-state.is-verified{color:#067647;background:#ecfdf3}.partner-bank-card form,.partner-request-card form{display:grid;gap:.8rem;padding:1rem}.partner-bank-card label,.partner-request-card label{display:grid;gap:.35rem;color:var(--foreground);font-size:.67rem;font-weight:800}.partner-bank-card input,.partner-bank-card select,.partner-request-card input,.partner-request-card textarea{width:100%;padding:.68rem .75rem;border:1px solid var(--border);border-radius:.6rem;color:var(--foreground);background:var(--card);font:inherit;outline:none}.partner-bank-card input:focus,.partner-bank-card select:focus,.partner-request-card input:focus,.partner-request-card textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}.partner-account-result{display:flex;align-items:center;gap:.7rem;padding:.7rem;border-radius:.65rem;color:var(--muted-foreground);background:var(--accent)}.partner-account-result>i{font-size:1.2rem}.partner-account-result div{display:grid}.partner-account-result small{font-size:.57rem}.partner-account-result strong{font-size:.7rem}.partner-account-result.is-success{color:#067647;background:#ecfdf3}.partner-primary-button{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.7rem;border:0;border-radius:.65rem;color:#fff;background:var(--brand);font-size:.72rem;font-weight:850;cursor:pointer}.partner-primary-button:disabled{cursor:not-allowed;opacity:.5}.partner-form-note,.partner-inline-warning{margin:0;color:var(--muted-foreground);font-size:.6rem;line-height:1.5}.partner-money-input{display:flex;align-items:center;border:1px solid var(--border);border-radius:.6rem;background:var(--card)}.partner-money-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}.partner-money-input span{padding-left:.75rem;font-size:1rem}.partner-money-input input{border:0!important;box-shadow:none!important;font-size:1rem;font-weight:850}.partner-amount-actions{display:flex;justify-content:space-between;margin-top:-.4rem;color:var(--muted-foreground);font-size:.58rem}.partner-amount-actions button{border:0;color:var(--brand);background:none;font-size:inherit;font-weight:850;cursor:pointer}.partner-payout-history{margin-top:1rem}.partner-payout-history td small{display:block;margin-top:.15rem;color:var(--muted-foreground)}
.partner-payout-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem;border:1px solid var(--border);border-radius:.7rem;background:var(--card)}.partner-payout-destination{display:flex;min-width:0;align-items:center;gap:.65rem}.partner-action-icon{display:grid;width:2.25rem;height:2.25rem;flex:0 0 auto;place-items:center;border-radius:.55rem;color:var(--brand);background:var(--accent)}.partner-payout-destination>div{display:grid;min-width:0}.partner-payout-destination small{color:var(--muted-foreground);font-size:.55rem}.partner-payout-destination strong{overflow:hidden;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.partner-payout-destination div>span{color:var(--muted-foreground);font-size:.58rem}.partner-payout-buttons{display:flex;gap:.5rem}.partner-secondary-button{display:flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.4rem;padding:.5rem .7rem;border:1px solid var(--border);border-radius:.6rem;color:var(--foreground);background:var(--card);font-size:.67rem;font-weight:800;cursor:pointer}.partner-payout-buttons .partner-primary-button{min-height:2.35rem;padding:.5rem .75rem}.partner-modal{width:min(calc(100% - 1.25rem),29rem);max-height:min(90vh,42rem);margin:auto;padding:0;overflow:visible;border:0;border-radius:.9rem;color:var(--foreground);background:transparent}.partner-modal::backdrop{background:rgba(15,23,42,.62);backdrop-filter:blur(3px)}.partner-modal-card{overflow:hidden;border:1px solid var(--border);border-radius:.9rem;background:var(--card);box-shadow:0 1.5rem 4rem rgba(15,23,42,.25)}.partner-modal-card>header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid var(--border);background:var(--accent)}.partner-modal-card header p{margin:0;color:var(--brand);font-size:.55rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.partner-modal-card header h2{margin:.1rem 0 0;font-size:1rem}.partner-modal-close{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:50%;color:var(--muted-foreground);background:var(--card);cursor:pointer}
.partner-table-wrap { overflow-x: auto; }.partner-table { width: 100%; border-collapse: collapse; font-size: .68rem; }.partner-table th { padding: .7rem .8rem; color: var(--muted-foreground); background: color-mix(in srgb, var(--muted) 55%, transparent); font-size: .57rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }.partner-table td { padding: .8rem; border-top: 1px solid var(--border); white-space: nowrap; }.partner-table td small { display: block; margin-top: .1rem; color: var(--muted-foreground); font-size: .55rem; }.partner-payment-status { padding: .25rem .5rem; border-radius: 999px; font-size: .58rem; font-weight: 800; }.partner-payment-status.is-pending { color:#a44708;background:#fff2e5}.partner-payment-status.is-paid{color:#18703f;background:#e9f8ef}.partner-amount { color: #18703f; }
.partner-empty { display: grid; min-height: 13rem; padding: 1.5rem; place-items: center; align-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 42%, transparent), transparent); text-align: center; }.partner-empty > span { display:grid;width:3.5rem;height:3.5rem;place-items:center;border-radius:50%;color:var(--brand);background:var(--accent)}.partner-empty svg{width:1.5rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.8}.partner-empty h3{margin:.8rem 0 .25rem;font-size:.9rem}.partner-empty p{max-width:22rem;margin:0;color:var(--muted-foreground);font-size:.68rem;line-height:1.5}.partner-empty button{margin-top:.9rem;padding:.55rem .8rem;border-radius:.5rem;color:var(--brand-foreground);background:var(--brand);font-size:.65rem;font-weight:800}
.partner-progress ol { margin: 0; padding: 1rem; list-style: none; }.partner-progress li { position: relative; display: flex; gap: .7rem; padding-bottom: 1rem; }.partner-progress li:last-child { padding-bottom: 0; }.partner-progress li:not(:last-child)::after { position:absolute;top:1.6rem;bottom:.2rem;left:.7rem;width:1px;background:var(--border);content:''}.partner-progress li > span { display:grid;width:1.45rem;height:1.45rem;z-index:1;flex:0 0 auto;place-items:center;border:1px solid var(--border);border-radius:50%;color:var(--brand);background:var(--card);font-size:.6rem;font-weight:850}.partner-progress li.is-done > span{color:#fff;border-color:var(--brand);background:var(--brand)}.partner-progress strong{font-size:.7rem}.partner-progress li p{margin:.15rem 0 0;color:var(--muted-foreground);font-size:.62rem;line-height:1.45}
.partner-summary dl { margin: 0; padding: .4rem 1rem; }.partner-summary dl div { display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--border);font-size:.68rem}.partner-summary dl div:last-child{border:0}.partner-summary dt{color:var(--muted-foreground)}.partner-summary dd{margin:0;font-weight:850}.partner-summary > p{margin:0;padding:.75rem 1rem;border-top:1px solid var(--border);color:var(--muted-foreground);background:var(--muted);font-size:.58rem;line-height:1.5}
@media (min-width:640px){.partner-share-grid{grid-template-columns:.65fr 1.35fr}.partner-stats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:768px){.partner-payout-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.partner-page{padding-top:2rem}.partner-stats{grid-template-columns:repeat(4,1fr)}.partner-content-grid{grid-template-columns:minmax(0,1fr) 19rem}.partner-referral-card{padding:1.5rem}.partner-stats article{padding:1.1rem}}
@media (max-width:639px){.partner-welcome{padding:.9rem}.partner-header-actions{width:100%;justify-content:space-between}.partner-referral-copy{align-items:flex-start}.partner-link-text{max-width:11rem}.partner-table thead{display:none}.partner-table,.partner-table tbody,.partner-table tr,.partner-table td{display:block}.partner-table tr{padding:.65rem .8rem;border-top:1px solid var(--border)}.partner-table tr:first-child{border-top:0}.partner-table td{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border:0;text-align:right;white-space:normal}.partner-table td::before{color:var(--muted-foreground);font-size:.58rem;font-weight:700;content:attr(data-label);text-transform:uppercase}.partner-table td small{display:inline;margin-left:.3rem}.partner-table td strong{max-width:65%}}

/* Compact partner dashboard */
.partner-page{padding:1rem 0 2.5rem}.partner-shell{width:min(100% - 1.25rem,74rem)}.partner-welcome{padding:.8rem 1rem}.partner-welcome h1{font-size:clamp(1.25rem,3vw,1.65rem)}.partner-welcome>div>p:last-child{margin-top:.2rem}.partner-referral-card{display:grid;gap:.8rem;margin-top:.8rem;padding:.85rem 1rem;border-radius:.8rem;box-shadow:0 .25rem .8rem color-mix(in srgb,var(--brand) 14%,transparent)}.partner-referral-card::after{display:none}.partner-referral-copy{align-items:center}.partner-referral-copy h2{margin:.12rem 0;font-size:.9rem;line-height:1.3}.partner-share-grid{margin-top:0}.partner-share-field>span{margin-bottom:.2rem}.partner-share-field strong{padding:.55rem .65rem}.partner-share-field button{padding:.38rem .55rem}.partner-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.65rem}.partner-stats article{gap:.55rem;padding:.7rem;border-radius:.7rem;box-shadow:none}.partner-stat-icon{width:2rem;height:2rem;border-radius:.55rem}.partner-stat-icon svg{width:1rem}.partner-stats strong{font-size:.95rem}.partner-stats small{display:none}.partner-payout-center{margin-top:.7rem;padding:.8rem;border-radius:.85rem;box-shadow:none}.partner-section-heading{margin-bottom:.65rem}.partner-section-heading h2{font-size:1rem}.partner-section-heading div>span{font-size:.66rem}.partner-payout-grid{gap:.65rem}.partner-panel{border-radius:.7rem;box-shadow:none}.partner-panel>header{padding:.7rem .8rem}.partner-panel header h2{font-size:.82rem}.partner-bank-card form,.partner-request-card form{gap:.6rem;padding:.75rem}.partner-bank-card input,.partner-bank-card select,.partner-request-card input,.partner-request-card textarea{padding:.55rem .65rem}.partner-account-result{padding:.55rem .65rem}.partner-primary-button{min-height:2.35rem}.partner-payout-history{margin-top:.65rem}.partner-payout-history summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .8rem;cursor:pointer;list-style:none}.partner-payout-history summary::-webkit-details-marker{display:none}.partner-payout-history summary>span{display:flex;align-items:center;gap:.45rem;color:var(--muted-foreground);font-size:.62rem}.partner-payout-history summary>span:first-child{display:grid;gap:.05rem}.partner-payout-history summary small{color:var(--brand);font-size:.52rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.partner-payout-history summary strong{color:var(--foreground);font-size:.8rem}.partner-payout-history[open] summary{border-bottom:1px solid var(--border)}.partner-payout-history[open] summary i{transform:rotate(180deg)}.partner-content-grid{margin-top:.7rem}.partner-activity>header{padding:.7rem .8rem}.partner-table th{padding:.55rem .65rem}.partner-table td{padding:.65rem}
@media (min-width:768px){.partner-referral-card{grid-template-columns:minmax(13rem,.75fr) minmax(0,1.25fr);align-items:end}.partner-payout-grid{grid-template-columns:1fr 1fr}.partner-bank-card form{grid-template-columns:1fr 1fr}.partner-bank-card .partner-account-result,.partner-bank-card .partner-primary-button,.partner-bank-card .partner-form-note{grid-column:1/-1}.partner-request-card form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}.partner-request-card .partner-amount-actions,.partner-request-card .partner-primary-button,.partner-request-card .partner-inline-warning{grid-column:1/-1}.partner-content-grid{grid-template-columns:1fr}}
@media (min-width:1024px){.partner-page{padding-top:1.25rem}.partner-stats article{padding:.75rem}.partner-referral-card{padding:.9rem 1rem}}
@media (max-width:639px){.partner-welcome>div>p:last-child{display:none}.partner-eyebrow{font-size:.56rem}.partner-header-actions{width:auto}.partner-status{padding:.35rem .5rem}.partner-signout{min-height:1.9rem;padding:.35rem .6rem}.partner-referral-card{gap:.6rem}.partner-share-grid{grid-template-columns:1fr}.partner-share-field>span{display:none}.partner-stats article{align-items:flex-start}.partner-stat-icon{display:none}.partner-stats p{font-size:.58rem}.partner-stats strong{font-size:.86rem}.partner-payout-center{padding:.65rem}.partner-section-heading div>span{display:none}.partner-bank-card form,.partner-request-card form{padding:.65rem}.partner-form-note{display:none}.partner-table tr{padding:.55rem .7rem}}
@media (max-width:639px){.partner-payout-actions{align-items:stretch;flex-direction:column}.partner-payout-buttons{display:grid;grid-template-columns:1fr 1fr}.partner-payout-buttons button{width:100%}.partner-modal{max-height:calc(100dvh - 1rem)}.partner-modal-card{max-height:calc(100dvh - 1rem);overflow:auto}}

/* Flat, low-noise dashboard hierarchy */
.partner-dashboard-tabs{display:flex;gap:.25rem;margin-top:.6rem;padding:.25rem;border:1px solid var(--border);border-radius:.65rem;background:var(--card)}.partner-dashboard-tabs button{position:relative;display:flex;min-height:2.25rem;flex:1;align-items:center;justify-content:center;gap:.4rem;padding:.45rem .7rem;border:0;border-radius:.45rem;color:var(--muted-foreground);background:transparent;font-size:.65rem;font-weight:800;cursor:pointer}.partner-dashboard-tabs button.is-active{color:var(--brand);background:var(--accent)}.partner-dashboard-tabs button b{display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border-radius:999px;color:#fff;background:var(--brand);font-size:.5rem}.partner-dashboard-panel{display:none}.partner-dashboard-panel.is-active{display:block}
.partner-welcome{border:0;border-radius:.7rem;box-shadow:none}.partner-referral-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.6rem;padding:.55rem .7rem;border:1px solid var(--border);color:var(--foreground);background:var(--card);box-shadow:none}.partner-referral-copy span:not(.partner-referral-icon){color:var(--muted-foreground);font-size:.52rem;opacity:1}.partner-referral-copy h2{margin:0;font-size:.78rem;letter-spacing:.06em}.partner-referral-actions{display:flex;align-items:center;gap:.4rem}.partner-referral-actions>span{margin-right:.25rem;color:var(--muted-foreground);font-size:.58rem}.partner-referral-actions button{display:flex;align-items:center;gap:.3rem;min-height:2rem;padding:.4rem .55rem;border:1px solid var(--border);border-radius:.45rem;color:var(--foreground);background:var(--card);font-size:.6rem;font-weight:800;cursor:pointer}.partner-referral-actions button:last-child{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 25%,var(--border));background:var(--accent)}.partner-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:hidden;margin-top:.6rem;border:1px solid var(--border);border-radius:.65rem;background:var(--card)}.partner-stats article,.partner-stats article:nth-child(n){display:block;padding:.65rem .8rem;border:0;border-right:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none}.partner-stats article:last-child{border-right:0}.partner-stats p{font-size:.56rem}.partner-stats strong{font-size:.88rem}.partner-payout-center{margin-top:.6rem;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.partner-payout-actions{padding:.6rem .7rem}.partner-content-grid{margin-top:.6rem}.partner-empty{min-height:9rem}.partner-empty>span{display:none}.partner-empty h3{margin:0 0 .2rem}
@media (max-width:639px){.partner-shell{width:min(100% - .8rem,74rem)}.partner-welcome{padding:.65rem .7rem}.partner-welcome h1{font-size:1.1rem}.partner-dashboard-tabs button{padding:.4rem .25rem}.partner-dashboard-tabs button i{display:none}.partner-referral-card{align-items:flex-start;flex-direction:column;gap:.45rem}.partner-referral-actions{width:100%}.partner-referral-actions>span{display:none}.partner-referral-actions button{flex:1;justify-content:center}.partner-stats{grid-template-columns:repeat(2,1fr)}.partner-stats article,.partner-stats article:nth-child(n){padding:.55rem .65rem;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.partner-stats article:nth-child(2n){border-right:0}.partner-stats article:nth-child(n+3){border-bottom:0}.partner-payout-destination span.partner-action-icon{display:none}.partner-payout-actions{padding:.6rem}.partner-payout-destination div>span{white-space:normal}}

/* Cart */
.cart-page { min-height: 60vh; padding: 1.25rem 0 4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, transparent), transparent 20rem); }
.cart-shell { width: min(100% - 1.5rem, 76rem); margin-inline: auto; }
.cart-breadcrumbs { display: flex; gap: .55rem; margin-bottom: 1rem; color: var(--muted-foreground); font-size: .78rem; }
.cart-breadcrumbs a:hover { color: var(--brand); }
.cart-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.cart-kicker { color: var(--brand); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cart-header h1 { margin: .25rem 0 0; font-size: clamp(1.8rem, 5vw, 2.55rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.cart-header p { margin: .5rem 0 0; color: var(--muted-foreground); font-size: .82rem; }
.cart-header > a { color: var(--brand); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.cart-layout { display: grid; gap: 1rem; align-items: start; }
.cart-items, .cart-summary, .cart-empty, .cart-benefits { border: 1px solid var(--border); border-radius: 1rem; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 4%); }
.cart-items { overflow: hidden; }
.cart-items-heading { display: flex; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.cart-items-heading h2 { margin: 0; font-size: .9rem; font-weight: 800; }
.cart-items-heading span { color: var(--muted-foreground); font-size: .72rem; }
.cart-item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem; }
.cart-item + .cart-item { border-top: 1px solid var(--border); }
.cart-item-image { display: grid; width: 6.5rem; height: 6.5rem; padding: .55rem; place-items: center; border: 1px solid var(--border); border-radius: .75rem; background: #fff; }
.cart-item-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s ease; }
.cart-item-image:hover img { transform: scale(1.04); }
.cart-item-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; min-width: 0; }
.cart-item-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.cart-item-brand { color: var(--brand); font-size: .65rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.cart-item-name { margin-top: .25rem; color: var(--card-foreground); font-size: .9rem; font-weight: 750; line-height: 1.35; }
.cart-item-name:hover { color: var(--brand); }
.cart-item-stock { display: flex; align-items: center; gap: .35rem; margin-top: .55rem; color: #18703f; font-size: .68rem; font-weight: 700; }
.cart-item-stock i { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.cart-item-delivery { margin-top: .2rem; color: var(--muted-foreground); font-size: .67rem; }
.cart-item-price { display: flex; flex-direction: column; align-items: flex-end; }
.cart-item-price strong { font-size: 1rem; white-space: nowrap; }
.cart-item-price > span { color: var(--muted-foreground); font-size: .7rem; text-decoration: line-through; }
.cart-item-price small { margin-top: .2rem; color: #18703f; font-size: .65rem; font-weight: 800; }
.cart-item-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .3rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.cart-quantity-form { display: flex; align-items: center; gap: .45rem; transition: opacity .15s ease; }
.cart-quantity-form.is-updating { opacity: .6; }
.cart-quantity-label { color: var(--muted-foreground); font-size: .7rem; font-weight: 700; }
.cart-quantity-control { display: grid; grid-template-columns: 2.15rem 2.25rem 2.15rem; height: 2.15rem; overflow: hidden; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); }
.cart-quantity-control button { display: grid; place-items: center; color: var(--card-foreground); font-size: 1rem; font-weight: 800; transition: color .15s ease, background-color .15s ease; }
.cart-quantity-control button:hover:not(:disabled) { color: var(--brand); background: var(--accent); }
.cart-quantity-control button:disabled { cursor: not-allowed; opacity: .3; }
.cart-quantity-control input { width: 100%; border-inline: 1px solid var(--border); color: var(--card-foreground); background: var(--card); font-size: .75rem; font-weight: 800; text-align: center; appearance: textfield; }
.cart-quantity-control input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.cart-remove-button { display: flex; align-items: center; gap: .3rem; color: #b42318; font-size: .7rem; font-weight: 700; }
.cart-remove-button svg { width: .9rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cart-summary { padding: 1.25rem; }
.cart-summary h2 { margin: 0 0 1rem; font-size: 1rem; font-weight: 850; }
.cart-summary-lines { display: grid; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.cart-summary-lines p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; color: var(--muted-foreground); font-size: .73rem; }
.cart-summary-lines strong { color: var(--card-foreground); font-weight: 750; }
.cart-summary-saving, .cart-summary-saving strong { color: #18703f !important; }
.cart-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.cart-summary-total span { font-size: .85rem; font-weight: 800; }
.cart-summary-total strong { font-size: 1.35rem; font-weight: 900; letter-spacing: -.025em; }
.cart-tax-note { margin: .25rem 0 0; color: var(--muted-foreground); font-size: .65rem; text-align: right; }
.cart-checkout-button { display: flex; min-height: 3.15rem; align-items: center; justify-content: center; gap: .55rem; margin-top: 1rem; border-radius: .65rem; color: var(--brand-foreground); background: var(--brand); font-size: .82rem; font-weight: 850; box-shadow: 0 .5rem 1.25rem color-mix(in srgb, var(--brand) 22%, transparent); transition: transform .15s ease, background-color .15s ease; }
.cart-checkout-button:hover { background: var(--brand-dark); transform: translateY(-1px); }
.cart-secure-note { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .85rem; color: var(--muted-foreground); }
.cart-secure-note svg { width: 1rem; fill: none; stroke: var(--brand); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cart-secure-note span { display: grid; font-size: .6rem; }
.cart-secure-note strong { color: var(--card-foreground); font-size: .67rem; }
.cart-help { display: grid; gap: .2rem; margin-top: 1rem; padding: .75rem; border-radius: .6rem; background: var(--accent); font-size: .67rem; text-align: center; }
.cart-help span { color: var(--muted-foreground); }
.cart-help a { color: var(--brand); font-weight: 800; }
.cart-benefits { display: grid; gap: 1rem; margin-top: 1rem; padding: 1rem; }
.cart-benefits > div { display: flex; align-items: center; gap: .65rem; }
.cart-benefits svg { width: 1.25rem; flex: 0 0 auto; fill: none; stroke: var(--brand); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cart-benefits span { display: grid; color: var(--muted-foreground); font-size: .65rem; }
.cart-benefits strong { color: var(--card-foreground); font-size: .72rem; }
.cart-empty { display: grid; max-width: 44rem; min-height: 27rem; margin-inline: auto; padding: 2rem; place-items: center; align-content: center; text-align: center; }
.cart-empty-icon { display: grid; width: 5.25rem; height: 5.25rem; place-items: center; border-radius: 50%; color: var(--brand); background: var(--accent); }
.cart-empty-icon svg { width: 2.4rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.cart-empty h2 { max-width: 28rem; margin: 1.2rem 0 .45rem; font-size: clamp(1.35rem, 4vw, 1.8rem); font-weight: 850; letter-spacing: -.025em; }
.cart-empty > p { max-width: 27rem; margin: 0; color: var(--muted-foreground); font-size: .82rem; line-height: 1.6; }
.cart-empty > a { margin-top: 1.25rem; padding: .8rem 1.2rem; border-radius: .6rem; color: var(--brand-foreground); background: var(--brand); font-size: .78rem; font-weight: 800; }
.cart-empty-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.4rem; }
.cart-empty-categories a { padding: .4rem .65rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); font-size: .65rem; }
.cart-empty-categories a:hover { border-color: var(--brand); color: var(--brand); }

@media (min-width: 640px) {
    .cart-shell { width: min(100% - 2rem, 76rem); }
    .cart-item { grid-template-columns: 8rem minmax(0, 1fr); padding: 1.25rem; }
    .cart-item-image { width: 8rem; height: 8rem; }
    .cart-item-name { font-size: 1rem; }
    .cart-benefits { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .cart-page { padding-top: 1.5rem; }
    .cart-layout { grid-template-columns: minmax(0, 1fr) 21.5rem; }
    .cart-summary { position: sticky; top: 1rem; }
}

@media (max-width: 639px) {
    .cart-page { padding-top: .75rem; }
    .cart-header { align-items: start; }
    .cart-header > a { margin-top: .4rem; }
    .cart-items, .cart-summary, .cart-empty, .cart-benefits { border-radius: .8rem; }
    .cart-items-heading span { display: none; }
    .cart-item-content { grid-template-columns: minmax(0, 1fr); }
    .cart-item-price { align-items: flex-start; }
    .cart-item-actions { margin-left: -7.5rem; }
    .cart-benefits { grid-template-columns: 1fr; }
}

/* Shared toast notifications */
.toast-region {
    position: fixed;
    z-index: 200;
    top: 1rem;
    right: 1rem;
    display: flex;
    width: min(25rem, calc(100vw - 2rem));
    flex-direction: column;
    gap: .7rem;
    pointer-events: none;
}

.app-toast {
    --toast-accent: #2563eb;
    --toast-soft: #eff6ff;
    position: relative;
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) 1.75rem;
    gap: .75rem;
    overflow: hidden;
    padding: .9rem .8rem .9rem .9rem;
    border: 1px solid color-mix(in srgb, var(--toast-accent) 24%, var(--border));
    border-radius: .85rem;
    color: var(--card-foreground);
    background: color-mix(in srgb, var(--card) 94%, var(--toast-soft));
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 16%), 0 .15rem .5rem rgb(0 0 0 / 8%);
    opacity: 0;
    pointer-events: auto;
    transform: translateX(1rem) scale(.98);
    transition: opacity .22s ease, transform .22s ease;
}

.app-toast::before { position: absolute; inset: 0 auto 0 0; width: .25rem; background: var(--toast-accent); content: ''; }
.app-toast.is-visible { opacity: 1; transform: translateX(0) scale(1); }
.app-toast.is-leaving { opacity: 0; transform: translateX(1rem) scale(.98); }
.app-toast--success { --toast-accent: #16a34a; --toast-soft: #f0fdf4; }
.app-toast--error { --toast-accent: #dc2626; --toast-soft: #fef2f2; }
.app-toast--warning { --toast-accent: #d97706; --toast-soft: #fffbeb; }
.app-toast--info { --toast-accent: #2563eb; --toast-soft: #eff6ff; }
.app-toast-icon { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: .65rem; color: var(--toast-accent); background: color-mix(in srgb, var(--toast-accent) 12%, transparent); }
.app-toast-icon svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.app-toast-content { min-width: 0; padding-top: .05rem; }
.app-toast-content strong { display: block; font-size: .8rem; font-weight: 850; line-height: 1.35; }
.app-toast-content p { margin: .2rem 0 0; color: var(--muted-foreground); font-size: .72rem; line-height: 1.5; }
.app-toast-content ul { display: grid; gap: .2rem; margin: .3rem 0 0; padding-left: 1rem; color: var(--muted-foreground); font-size: .7rem; line-height: 1.4; list-style: disc; }
.app-toast-close { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .4rem; color: var(--muted-foreground); transition: color .15s ease, background-color .15s ease; }
.app-toast-close:hover { color: var(--card-foreground); background: var(--accent); }
.app-toast-close svg { width: .9rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.app-toast-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--toast-accent); transform-origin: left; animation: toast-progress var(--toast-duration, 5000ms) linear forwards; }
.app-toast:hover .app-toast-progress { animation-play-state: paused; }

@keyframes toast-progress { to { transform: scaleX(0); } }

@media (max-width: 639px) {
    .toast-region { top: .65rem; right: .65rem; width: calc(100vw - 1.3rem); }
    .app-toast { grid-template-columns: 2.15rem minmax(0, 1fr) 1.5rem; padding: .8rem .7rem .8rem .8rem; }
    .app-toast-icon { width: 2.15rem; height: 2.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .app-toast { transition: opacity .01ms; }
    .app-toast-progress { animation: none; }
}

/* Checkout */
.checkout-page { min-height: 65vh; padding: 1.25rem 0 4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, transparent), transparent 22rem); }
.checkout-shell { width: min(100% - 1.5rem, 72rem); margin-inline: auto; }
.checkout-breadcrumbs { display: flex; gap: .55rem; margin-bottom: 1rem; color: var(--muted-foreground); font-size: .78rem; }
.checkout-breadcrumbs a:hover { color: var(--brand); }
.checkout-header { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; }
.checkout-kicker { color: var(--brand); font-size: .67rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.checkout-header h1 { margin: .25rem 0 0; font-size: clamp(1.8rem, 5vw, 2.55rem); font-weight: 900; line-height: 1.05; letter-spacing: -.04em; }
.checkout-header p { margin: .5rem 0 0; color: var(--muted-foreground); font-size: .8rem; }
.checkout-secure-heading { display: flex; align-items: center; gap: .55rem; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--card); }
.checkout-secure-heading svg { width: 1.1rem; fill: none; stroke: var(--brand); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.checkout-secure-heading span { display: grid; color: var(--muted-foreground); font-size: .6rem; }
.checkout-secure-heading strong { color: var(--card-foreground); font-size: .67rem; }
.checkout-steps { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 38rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.checkout-steps li { position: relative; display: flex; align-items: center; gap: .55rem; color: var(--muted-foreground); }
.checkout-steps li:not(:last-child)::after { position: absolute; z-index: 0; top: 1rem; right: .55rem; left: 2.55rem; height: 1px; background: var(--border); content: ''; }
.checkout-steps li > span { z-index: 1; display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--background); font-size: .7rem; font-weight: 850; }
.checkout-steps div { z-index: 1; display: grid; padding-right: .55rem; background: var(--background); }
.checkout-steps strong { color: var(--card-foreground); font-size: .7rem; }
.checkout-steps small { font-size: .58rem; }
.checkout-steps .is-complete > span, .checkout-steps .is-active > span { border-color: var(--brand); color: var(--brand-foreground); background: var(--brand); }
.checkout-steps .is-complete::after { background: var(--brand) !important; }
.checkout-layout { display: grid; gap: 1rem; align-items: start; }
.checkout-form-column { display: grid; gap: 1rem; }
.checkout-form-card, .checkout-summary, .checkout-empty { border: 1px solid var(--border); border-radius: 1rem; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 4%); }
.checkout-form-card { padding: clamp(1.1rem, 3vw, 1.5rem); }
.checkout-section-heading { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.checkout-section-heading > span { display: grid; width: 1.9rem; height: 1.9rem; flex: 0 0 auto; place-items: center; border-radius: .55rem; color: var(--brand-foreground); background: var(--brand); font-size: .65rem; font-weight: 850; }
.checkout-section-heading h2 { margin: 0; font-size: .95rem; font-weight: 850; }
.checkout-section-heading p { margin: .15rem 0 0; color: var(--muted-foreground); font-size: .68rem; }
.checkout-fields { display: grid; gap: 1rem; }
.checkout-field { display: grid; gap: .4rem; color: var(--card-foreground); font-size: .7rem; font-weight: 750; }
.checkout-field b { color: #dc2626; }
.checkout-field input, .checkout-field textarea { width: 100%; border: 1px solid var(--input); border-radius: .6rem; color: var(--card-foreground); background: var(--background); font-size: .78rem; font-weight: 400; transition: border-color .15s ease, box-shadow .15s ease; }
.checkout-field input { height: 2.85rem; padding: 0 .85rem; }
.checkout-field textarea { min-height: 5.5rem; padding: .75rem .85rem; resize: vertical; }
.checkout-field input::placeholder, .checkout-field textarea::placeholder { color: var(--muted-foreground); opacity: .7; }
.checkout-field input:focus, .checkout-field textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.checkout-delivery-note { display: flex; gap: .65rem; margin-top: 1rem; padding: .75rem; border-radius: .6rem; color: #17633a; background: #edf9f2; }
.dark .checkout-delivery-note { color: #86efac; background: rgb(22 101 52 / 18%); }
.checkout-delivery-note svg { width: 1.2rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.checkout-delivery-note span { display: grid; font-size: .64rem; line-height: 1.45; }
.checkout-delivery-note strong { font-size: .7rem; }
.checkout-back-link { justify-self: start; color: var(--muted-foreground); font-size: .72rem; font-weight: 750; }
.checkout-back-link:hover { color: var(--brand); }
.checkout-summary { padding: 1.25rem; }
.checkout-summary-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.checkout-summary-heading h2 { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 900; }
.checkout-summary-heading a { color: var(--brand); font-size: .67rem; font-weight: 800; }
.checkout-products { display: grid; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.checkout-product { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; }
.checkout-product-image { position: relative; display: grid; width: 3.5rem; height: 3.5rem; padding: .35rem; place-items: center; border: 1px solid var(--border); border-radius: .55rem; background: #fff; }
.checkout-product-image img { width: 100%; height: 100%; object-fit: contain; }
.checkout-product-image span { position: absolute; top: -.4rem; right: -.4rem; display: grid; min-width: 1.15rem; height: 1.15rem; padding: 0 .2rem; place-items: center; border-radius: 999px; color: #fff; background: #e11d48; font-size: .58rem; font-weight: 850; box-shadow: 0 0 0 2px var(--card); }
.checkout-product > div { display: flex; min-width: 0; flex-direction: column; }
.checkout-product > div a { overflow: hidden; font-size: .7rem; font-weight: 750; line-height: 1.35; text-overflow: ellipsis; }
.checkout-product > div a:hover { color: var(--brand); }
.checkout-product small { margin-top: .15rem; color: var(--muted-foreground); font-size: .6rem; }
.checkout-product > strong { font-size: .72rem; white-space: nowrap; }
.checkout-totals { display: grid; gap: .65rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.checkout-totals p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; color: var(--muted-foreground); font-size: .7rem; }
.checkout-totals strong { color: var(--card-foreground); }
.checkout-savings, .checkout-savings strong { color: #178044 !important; }
.checkout-grand-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.checkout-grand-total div { display: grid; }
.checkout-grand-total div > strong { font-size: .85rem; }
.checkout-grand-total small { color: var(--muted-foreground); font-size: .58rem; }
.checkout-grand-total > strong { font-size: 1.3rem; font-weight: 900; letter-spacing: -.03em; }
.checkout-submit { display: flex; width: 100%; min-height: 3.15rem; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; border-radius: .65rem; color: var(--brand-foreground); background: var(--brand); font-size: .8rem; font-weight: 850; box-shadow: 0 .5rem 1.25rem color-mix(in srgb, var(--brand) 22%, transparent); transition: transform .15s ease, background-color .15s ease; }
.checkout-submit:hover { background: var(--brand-dark); transform: translateY(-1px); }
.checkout-consent { max-width: 18rem; margin: .65rem auto 0; color: var(--muted-foreground); font-size: .58rem; line-height: 1.45; text-align: center; }
.checkout-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.checkout-trust-grid span { display: flex; align-items: center; gap: .35rem; color: var(--muted-foreground); font-size: .6rem; }
.checkout-trust-grid svg { width: .9rem; flex: 0 0 auto; fill: none; stroke: var(--brand); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.checkout-empty { display: grid; min-height: 24rem; padding: 2rem; place-items: center; align-content: center; text-align: center; }
.checkout-empty > span { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; border-radius: 50%; color: var(--brand); background: var(--accent); }
.checkout-empty svg { width: 2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.checkout-empty h2 { margin: 1rem 0 .3rem; font-size: 1.4rem; font-weight: 850; }
.checkout-empty p { margin: 0; color: var(--muted-foreground); font-size: .78rem; }
.checkout-empty a { margin-top: 1rem; padding: .75rem 1rem; border-radius: .6rem; color: var(--brand-foreground); background: var(--brand); font-size: .72rem; font-weight: 800; }
.checkout-payment-option { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: 1rem; border: 1.5px solid var(--brand); border-radius: .75rem; background: color-mix(in srgb, var(--accent) 55%, var(--card)); cursor: pointer; }
.checkout-payment-option > input { position: absolute; opacity: 0; pointer-events: none; }
.checkout-payment-mark { display: grid; width: 1rem; height: 1rem; place-items: center; border: 1.5px solid var(--brand); border-radius: 50%; }
.checkout-payment-option input:checked + .checkout-payment-mark::after { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); content: ''; }
.checkout-payment-icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .6rem; color: var(--brand-foreground); background: var(--brand); }
.checkout-payment-icon svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.checkout-payment-option > span:nth-of-type(3) { display: grid; }
.checkout-payment-option strong { font-size: .78rem; }
.checkout-payment-option small { margin-top: .15rem; color: var(--muted-foreground); font-size: .64rem; line-height: 1.45; }
.checkout-payment-option > b { padding: .25rem .45rem; border-radius: 999px; color: var(--brand); background: var(--card); font-size: .55rem; text-transform: uppercase; }
.checkout-payment-error { margin: .55rem 0 0; color: #dc2626; font-size: .68rem; }
.transfer-page { min-height: 70vh; padding: 1.5rem 0 4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 26rem); }
.transfer-shell { width: min(100% - 1.5rem, 42rem); margin-inline: auto; }
.transfer-card { overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); box-shadow: 0 1rem 3rem rgb(0 0 0 / 7%); }
.transfer-header { padding: 1.5rem 1.5rem 1.25rem; text-align: center; }
.transfer-status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border-radius: 999px; color: #9a6700; background: #fff6d8; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.transfer-status i { width: .42rem; height: .42rem; border-radius: 50%; background: #e8a400; }
.transfer-header h1 { margin: .85rem 0 .4rem; font-size: clamp(1.45rem, 5vw, 2rem); font-weight: 900; letter-spacing: -.035em; }
.transfer-header p { max-width: 29rem; margin: 0 auto; color: var(--muted-foreground); font-size: .75rem; line-height: 1.55; }
.transfer-alert { margin: 0 1.5rem 1rem; padding: .75rem; border-radius: .6rem; color: #b91c1c; background: #fef2f2; font-size: .7rem; }
.transfer-amount { display: grid; padding: 1.25rem; color: var(--brand-foreground); background: var(--brand); text-align: center; }
.transfer-amount span { font-size: .65rem; opacity: .8; }
.transfer-amount strong { margin: .15rem 0; font-size: 2rem; font-weight: 900; letter-spacing: -.04em; }
.transfer-amount small { font-size: .6rem; opacity: .75; }
.transfer-details { margin: 0; padding: .75rem 1.5rem; }
.transfer-details > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.transfer-details > div:last-child { border-bottom: 0; }
.transfer-details dt { color: var(--muted-foreground); font-size: .68rem; }
.transfer-details dd { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0; font-size: .76rem; text-align: right; }
.transfer-details dd strong { font-size: 1rem; letter-spacing: .05em; }
.transfer-details button { padding: .3rem .5rem; border: 1px solid var(--border); border-radius: .4rem; color: var(--brand); background: var(--background); font-size: .6rem; font-weight: 800; }
.transfer-notice { display: flex; gap: .65rem; margin: 0 1.5rem 1rem; padding: .8rem; border-radius: .65rem; color: #17633a; background: #edf9f2; }
.transfer-notice svg { width: 1.1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.transfer-notice p { display: grid; margin: 0; font-size: .64rem; line-height: 1.5; }
.transfer-card form { padding: 0 1.5rem; }
.transfer-orders-link { display: block; margin: .75rem 0 1.25rem; color: var(--muted-foreground); font-size: .68rem; font-weight: 750; text-align: center; }
.transfer-orders-link:hover { color: var(--brand); }
.transfer-steps { display: grid; gap: .65rem; margin-top: 1rem; }
.transfer-steps > div { display: flex; align-items: center; gap: .65rem; padding: .8rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--card); }
.transfer-steps span { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--brand-foreground); background: var(--brand); font-size: .65rem; font-weight: 850; }
.transfer-steps p { display: grid; margin: 0; color: var(--muted-foreground); font-size: .62rem; }
.transfer-steps strong { color: var(--card-foreground); font-size: .68rem; }
.payment-page { min-height: 75vh; padding: 1.25rem 0 4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 62%, transparent), transparent 30rem); }
.payment-shell { width: min(100% - 1.5rem, 74rem); margin-inline: auto; }
.payment-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; margin: 1rem 0 1.4rem; }
.payment-heading h1 { margin: .25rem 0; font-size: clamp(1.55rem, 5vw, 2.5rem); font-weight: 950; letter-spacing: -.045em; }
.payment-heading p { margin: 0; color: var(--muted-foreground); font-size: .75rem; }
.payment-total { display: grid; min-width: 11rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--card); text-align: right; }
.payment-total span { color: var(--muted-foreground); font-size: .6rem; }
.payment-total strong { font-size: 1.25rem; font-weight: 950; }
.payment-layout { display: grid; gap: 1rem; }
.payment-workspace, .payment-summary { border: 1px solid var(--border); border-radius: 1rem; background: var(--card); box-shadow: 0 1rem 3rem rgb(0 0 0 / 6%); }
.payment-workspace { overflow: hidden; }
.payment-alert { margin: 1rem 1rem 0; padding: .75rem .85rem; border-radius: .65rem; color: #991b1b; background: #fef2f2; font-size: .7rem; line-height: 1.5; }
.payment-alert--success { color: #166534; background: #ecfdf3; }
.payment-method-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem 0; }
.payment-method-intro strong { font-size: .76rem; }
.payment-method-intro span { color: var(--muted-foreground); font-size: .62rem; text-align: right; }
.payment-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; padding: 1rem; border-bottom: 1px solid var(--border); }
.payment-tabs button { display: flex; min-width: 0; align-items: center; gap: .6rem; padding: .8rem; border: 1px solid var(--border); border-radius: .7rem; color: var(--card-foreground); background: var(--background); text-align: left; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.payment-tabs button:hover { transform: translateY(-1px); }
.payment-tabs button.is-active { border-color: var(--brand); background: color-mix(in srgb, var(--accent) 70%, var(--card)); box-shadow: 0 0 0 1px var(--brand); }
.payment-tab-icon { display: grid; width: 2.1rem; height: 2.1rem; flex: 0 0 auto; place-items: center; border-radius: .55rem; color: var(--brand); background: var(--card); font-size: 1rem; font-weight: 900; }
.payment-tabs button.is-active .payment-tab-icon { color: var(--brand-foreground); background: var(--brand); }
.payment-tabs button > span:last-child { display: grid; min-width: 0; }
.payment-tabs strong { font-size: .72rem; }
.payment-tabs small { overflow: hidden; margin-top: .1rem; color: var(--muted-foreground); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.payment-panel { padding: 1.25rem; }
.payment-panel-heading { display: flex; gap: .7rem; margin-bottom: 1.25rem; }
.payment-panel-heading > span { display: grid; width: 2.1rem; height: 2.1rem; flex: 0 0 auto; place-items: center; border-radius: .55rem; color: var(--brand); background: var(--accent); font-size: .66rem; font-weight: 900; }
.payment-panel-heading h2 { margin: 0; font-size: 1rem; font-weight: 900; }
.payment-panel-heading p { margin: .15rem 0 0; color: var(--muted-foreground); font-size: .65rem; line-height: 1.5; }
.payment-empty-state { display: grid; min-height: 18rem; place-items: center; align-content: center; text-align: center; }
.payment-state-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 50%; color: var(--brand); background: var(--accent); font-size: 1.5rem; font-weight: 900; }
.payment-empty-state h3 { margin: .8rem 0 .25rem; font-size: .95rem; font-weight: 900; }
.payment-empty-state p { max-width: 22rem; margin: 0; color: var(--muted-foreground); font-size: .68rem; }
.payment-empty-state .checkout-submit { width: min(100%, 22rem); }
.payment-panel > [data-transfer-details] > .checkout-submit { margin-inline: auto; width: min(calc(100% - 3rem), 28rem); }
.payment-form-grid { display: grid; gap: .8rem; }
.payment-field { display: grid; gap: .35rem; color: var(--card-foreground); font-size: .65rem; font-weight: 750; }
.payment-field input, .payment-field select { width: 100%; min-height: 2.8rem; padding: 0 .8rem; border: 1px solid var(--input); border-radius: .55rem; color: var(--card-foreground); background: var(--background); font-size: .75rem; outline: none; }
.payment-field input:focus, .payment-field select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.payment-field small { color: var(--muted-foreground); font-size: .56rem; font-weight: 500; line-height: 1.4; }
.payment-field small.is-required { color: #b45309; font-weight: 750; }
.payment-security-note { margin: .75rem 0 0; color: #17633a; font-size: .62rem; }
.payment-config-warning { margin-bottom: 1rem; padding: .7rem; border-radius: .6rem; color: #92400e; background: #fffbeb; font-size: .65rem; }
.checkout-submit:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.payment-otp { display: grid; width: min(100%, 26rem); min-height: 18rem; margin: auto; padding: 1.25rem; place-items: center; align-content: center; border: 1px solid var(--border); border-radius: .85rem; background: color-mix(in srgb, var(--accent) 42%, var(--card)); text-align: center; }
.payment-otp-icon { display: grid; width: 3rem; height: 3rem; margin-bottom: .75rem; place-items: center; border-radius: 50%; color: var(--brand); background: var(--card); font-size: 1.2rem; box-shadow: 0 0 0 1px var(--border); }
.payment-otp h3 { margin: 0; font-size: 1.1rem; font-weight: 900; }
.payment-otp p { max-width: 19rem; margin: .35rem 0 1rem; color: var(--muted-foreground); font-size: .7rem; line-height: 1.5; }
.payment-otp label { display: grid; width: min(100%, 15rem); gap: .4rem; color: var(--muted-foreground); font-size: .62rem; text-align: left; }
.payment-otp input, .verification-code-field input { width: 100%; min-height: 3.2rem; padding: 0 .65rem; border: 1px solid var(--input); border-radius: .6rem; color: var(--card-foreground); background: var(--background); font-size: 1.2rem; font-weight: 900; letter-spacing: .28em; text-align: center; }
.payment-otp .checkout-submit { width: min(100%, 15rem); }
.payment-otp-back { margin-top: .75rem; color: var(--brand); font-size: .68rem; font-weight: 800; }
.firstease-offer { padding: 1rem; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: .8rem; background: color-mix(in srgb, var(--accent) 45%, var(--card)); }
.firstease-offer-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: .8rem; border-bottom: 1px solid var(--border); font-size: .7rem; font-weight: 800; }
.firstease-offer-heading strong { font-size: 1.1rem; }
.firstease-offer dl { display: grid; gap: .65rem; margin: .8rem 0; }
.firstease-offer dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .68rem; }
.firstease-offer dt { color: var(--muted-foreground); }
.payment-summary { align-self: start; padding: 1.2rem; }
.payment-summary h2 { margin: .2rem 0 1rem; font-size: .95rem; font-weight: 900; }
.payment-summary-items { display: grid; gap: .7rem; padding: .9rem 0; border-block: 1px solid var(--border); }
.payment-summary-items div, .payment-summary-total { display: flex; justify-content: space-between; gap: 1rem; font-size: .65rem; }
.payment-summary-items span { color: var(--muted-foreground); }
.payment-summary-items strong { white-space: nowrap; }
.payment-summary-total { padding: 1rem 0; font-size: .8rem; font-weight: 900; }
.payment-summary-total strong { font-size: 1rem; }
.payment-summary ul { display: grid; gap: .5rem; margin: 0; padding: .8rem 0; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .62rem; list-style: none; }
.payment-summary li::before { margin-right: .4rem; color: #16a34a; content: '✓'; font-weight: 900; }
.payment-summary > a { display: block; color: var(--brand); font-size: .65rem; font-weight: 800; text-align: center; }

/* Refined payment experience */
.payment-page {
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 22rem),
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, var(--background)), var(--background) 32rem);
}

.payment-shell {
    width: min(100% - 2rem, 76rem);
}

.payment-heading {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 1.15rem;
    color: #fff;
    background:
        radial-gradient(circle at 90% 20%, rgb(255 255 255 / 14%), transparent 15rem),
        linear-gradient(125deg, var(--brand-dark), color-mix(in srgb, var(--brand) 78%, #12372a));
    box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--brand) 20%, transparent);
}

.payment-heading::after {
    position: absolute;
    right: -4rem;
    bottom: -8rem;
    width: 18rem;
    height: 18rem;
    border: 2rem solid rgb(255 255 255 / 5%);
    border-radius: 50%;
    content: '';
    pointer-events: none;
}

.payment-heading-copy {
    position: relative;
    z-index: 1;
    max-width: 42rem;
}

.payment-secure-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .55rem;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 999px;
    color: #d1fae5;
    background: rgb(255 255 255 / 9%);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.payment-heading h1 {
    margin: .75rem 0 .4rem;
    color: #fff;
    line-height: 1.05;
}

.payment-heading p {
    max-width: 36rem;
    color: rgb(255 255 255 / 76%);
    font-size: .78rem;
    line-height: 1.55;
}

.payment-heading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-top: .9rem;
}

.payment-heading-meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: rgb(255 255 255 / 78%);
    font-size: .62rem;
    font-weight: 700;
}

.payment-total {
    position: relative;
    z-index: 1;
    min-width: 13rem;
    border-color: rgb(255 255 255 / 16%);
    color: #fff;
    background: rgb(255 255 255 / 11%);
    backdrop-filter: blur(8px);
}

.payment-total span,
.payment-total small {
    color: rgb(255 255 255 / 68%);
}

.payment-total small {
    margin-top: .2rem;
    font-size: .54rem;
}

.payment-workspace,
.payment-summary {
    border-color: color-mix(in srgb, var(--border) 82%, var(--brand));
    box-shadow: 0 .8rem 2rem rgb(15 23 42 / 7%);
}

.payment-workspace {
    border-radius: 1rem;
}

.payment-method-intro {
    padding: 1rem 1.15rem .15rem;
}

.payment-tabs {
    gap: .7rem;
    padding: .85rem 1.15rem 1.15rem;
    background: color-mix(in srgb, var(--muted) 34%, var(--card));
}

.payment-tabs button {
    position: relative;
    min-height: 5.25rem;
    padding: .85rem 2rem .85rem .85rem;
    border-width: 1.5px;
    background: var(--card);
    box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}

.payment-tabs button.is-active {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
    box-shadow: 0 0 0 1px var(--brand), 0 .45rem 1rem color-mix(in srgb, var(--brand) 10%, transparent);
}

.payment-tab-icon {
    width: 2.4rem;
    height: 2.4rem;
    background: color-mix(in srgb, var(--brand) 9%, var(--card));
    font-size: .95rem;
}

.payment-tab-check {
    position: absolute;
    top: .55rem;
    right: .55rem;
    display: none;
    width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border-radius: 50%;
    color: var(--brand-foreground);
    background: var(--brand);
    font-size: .55rem;
}

.payment-tabs button.is-active .payment-tab-check {
    display: grid;
}

.payment-tabs strong {
    font-size: .76rem;
}

.payment-tabs small {
    font-size: .58rem;
    line-height: 1.4;
    white-space: normal;
}

.payment-panel {
    min-height: 25rem;
    padding: 1.5rem;
}

.payment-panel-heading {
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.payment-panel-heading > span {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--brand-foreground);
    background: var(--brand);
    font-size: .8rem;
}

.payment-panel-heading h2 {
    font-size: 1.08rem;
}

.payment-panel-heading p {
    max-width: 34rem;
    font-size: .68rem;
}

.payment-empty-state {
    min-height: 17rem;
}

.payment-state-icon {
    width: 4rem;
    height: 4rem;
    box-shadow: 0 0 0 .55rem color-mix(in srgb, var(--brand) 5%, transparent);
}

.payment-empty-state h3 {
    font-size: 1.05rem;
}

.payment-empty-state p {
    max-width: 25rem;
    line-height: 1.55;
}

.payment-summary {
    overflow: hidden;
    padding: 0;
}

.payment-summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    color: #fff;
    background: linear-gradient(125deg, var(--brand-dark), var(--brand));
}

.payment-summary-heading span {
    color: rgb(255 255 255 / 70%);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.payment-summary-heading h2 {
    margin: .15rem 0 0;
    color: #fff;
}

.payment-summary-heading > i {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: .65rem;
    background: rgb(255 255 255 / 12%);
}

.payment-summary-items,
.payment-summary-total,
.payment-trust-list {
    margin-inline: 1.2rem;
}

.payment-summary-items {
    border-top: 0;
}

.payment-summary-total {
    align-items: baseline;
    border-bottom: 1px solid var(--border);
}

.payment-summary-total strong {
    font-size: 1.15rem;
}

.payment-trust-list {
    display: grid;
    gap: .7rem;
    padding: 1rem 0;
}

.payment-trust-list > span {
    display: grid;
    grid-template-columns: 1.8rem 1fr;
    column-gap: .55rem;
    align-items: center;
}

.payment-trust-list i {
    grid-row: 1 / 3;
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: .5rem;
    color: var(--brand);
    background: var(--accent);
    font-size: .72rem;
}

.payment-trust-list b {
    font-size: .65rem;
}

.payment-trust-list small {
    color: var(--muted-foreground);
    font-size: .56rem;
}

.payment-summary > a {
    margin: 0 1.2rem 1.2rem;
    padding: .65rem;
    border: 1px solid var(--border);
    border-radius: .55rem;
    background: var(--background);
}

@media (min-width: 640px) {
    .checkout-shell { width: min(100% - 2rem, 72rem); }
    .checkout-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .checkout-field-wide { grid-column: 1 / -1; }
    .transfer-steps { grid-template-columns: repeat(3, 1fr); }
    .payment-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payment-field-wide { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .checkout-page { padding-top: 1.5rem; }
    .checkout-layout { grid-template-columns: minmax(0, 1fr) 22.5rem; }
    .checkout-summary { position: sticky; top: 1rem; }
    .payment-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
    .payment-summary { position: sticky; top: 1rem; }
}

@media (max-width: 639px) {
    .checkout-page { padding-top: .75rem; }
    .checkout-secure-heading { display: none; }
    .checkout-steps li { gap: .35rem; }
    .checkout-steps li:not(:last-child)::after { right: .3rem; left: 2.2rem; }
    .checkout-steps div { padding-right: .3rem; }
    .checkout-steps small { display: none; }
    .checkout-form-card, .checkout-summary, .checkout-empty { border-radius: .8rem; }
    .payment-shell { width: min(100% - 1rem, 76rem); }
    .payment-heading { align-items: start; flex-direction: column; margin-top: .65rem; padding: 1.15rem; border-radius: .9rem; }
    .payment-heading h1 { margin-top: .65rem; font-size: 1.65rem; }
    .payment-heading p { font-size: .7rem; }
    .payment-heading-meta { gap: .45rem .75rem; }
    .payment-total { display: flex; width: 100%; min-width: 0; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .2rem .75rem; padding: .7rem .8rem; text-align: left; }
    .payment-total strong { font-size: 1.15rem; }
    .payment-total small { width: 100%; }
    .payment-layout { gap: .8rem; }
    .payment-workspace, .payment-summary { border-radius: .85rem; }
    .payment-method-intro { display: grid; gap: .15rem; }
    .payment-method-intro span { text-align: left; }
    .payment-tabs { grid-template-columns: 1fr; gap: .6rem; padding: .75rem; }
    .payment-tabs button { min-height: 4.6rem; padding: .75rem 2rem .75rem .75rem; }
    .payment-tab-icon { width: 2.5rem; height: 2.5rem; }
    .payment-tabs strong { font-size: .8rem; }
    .payment-tabs small { margin-top: .2rem; font-size: .63rem; line-height: 1.4; white-space: normal; }
    .payment-panel { min-height: 0; padding: 1rem; }
    .payment-panel-heading { align-items: flex-start; margin-bottom: 1rem; }
    .payment-panel-heading > span { width: 2.25rem; height: 2.25rem; }
    .payment-panel-heading h2 { font-size: .98rem; }
    .payment-empty-state { min-height: 15rem; padding-inline: .25rem; }
    .payment-empty-state .checkout-submit { min-height: 3.35rem; }
    .payment-otp { min-height: 0; padding: 1.25rem .85rem; }
    .payment-otp input, .verification-code-field input { font-size: 1.1rem; letter-spacing: .22em; }
    .payment-summary { margin-bottom: 3.5rem; }
}

@media (max-width: 1023px) {
    body.mobile-menu-active {
        overflow: hidden;
    }
}

.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    visibility: hidden;
    background: rgb(0 0 0 / 68%);
    opacity: 0;
    transition: opacity .2s ease, visibility .2s ease;
}

.mobile-drawer-backdrop.is-open {
    visibility: visible;
    opacity: 1;
}

.mobile-drawer {
    width: min(82vw, 22rem);
    height: 100%;
    overflow-y: auto;
    color: var(--card-foreground);
    background: var(--card);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform .22s ease;
}

.mobile-drawer-backdrop.is-open .mobile-drawer {
    transform: translateX(0);
}

.mobile-drawer-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.25rem;
    padding: 0 1.25rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.mobile-drawer-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.mobile-drawer-close {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--muted-foreground);
    border-radius: .45rem;
    color: var(--card-foreground);
    font-size: 1.5rem;
    line-height: 1;
}

.mobile-drawer-links {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem;
}

.mobile-drawer-links a {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3rem;
    padding: .75rem;
    border-radius: .375rem;
    color: var(--card-foreground);
    font-size: .9rem;
    font-weight: 500;
}

.mobile-drawer-links a:hover,
.mobile-drawer-links a:focus-visible {
    background: var(--accent);
    outline: none;
}

@media (min-width: 1024px) {
    .mobile-drawer-backdrop {
        display: none;
    }
}

/* Product detail */
.product-detail-page {
    flex: 1;
    padding: 1.25rem 0 5rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 45%, transparent) 0, transparent 22rem);
}

.product-detail-shell {
    width: min(100% - 1.5rem, 76rem);
    margin-inline: auto;
}

.product-breadcrumbs {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    margin-bottom: 1.1rem;
    color: var(--muted-foreground);
    font-size: .8rem;
    white-space: nowrap;
}

.product-breadcrumbs a:hover { color: var(--brand); }
.product-breadcrumbs span:last-child { overflow: hidden; text-overflow: ellipsis; }

.product-hero {
    display: grid;
    gap: 1rem;
}

.product-gallery,
.product-buy-box,
.product-details-panel {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--card);
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.product-gallery {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.product-discount-badge {
    position: absolute;
    z-index: 1;
    top: 1rem;
    left: 1rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    color: var(--deal-foreground);
    background: var(--deal);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.product-image-stage {
    display: grid;
    min-height: 22rem;
    padding: 2.25rem;
    place-items: center;
    background: #fff;
}

.product-image-stage img {
    width: 100%;
    max-width: 32rem;
    max-height: 32rem;
    object-fit: contain;
    transition: transform .35s ease;
}

.product-gallery:hover .product-image-stage img { transform: scale(1.025); }

.product-gallery-footer {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--border);
}

.product-thumbnails {
    display: flex;
    flex: 0 1 auto;
    gap: .5rem;
    min-width: 0;
    overflow-x: auto;
    padding: .15rem;
    scrollbar-width: thin;
}

.product-thumbnail {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    padding: .25rem;
    place-items: center;
    border: 2px solid var(--border);
    border-radius: .65rem;
    background: #fff;
}

.product-thumbnail:hover,
.product-thumbnail.is-active {
    border-color: var(--brand);
}

.product-thumbnail:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.product-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery-footer p { display: grid; gap: .15rem; margin: 0; font-size: .72rem; color: var(--muted-foreground); }
.product-gallery-footer strong { color: var(--card-foreground); font-size: .78rem; }

.product-buy-box { padding: clamp(1.1rem, 3vw, 2rem); }

.product-eyebrow {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted-foreground);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.product-eyebrow span:first-child { color: var(--brand); }

.product-buy-box h1 {
    max-width: 36rem;
    margin: .65rem 0 0;
    color: var(--card-foreground);
    font-size: clamp(1.65rem, 4vw, 2.45rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.product-rating-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-top: .8rem;
    color: var(--muted-foreground);
    font-size: .78rem;
}

.product-quality-mark { display: grid; width: 1.15rem; height: 1.15rem; place-items: center; border-radius: 50%; color: var(--brand-foreground); background: var(--brand); font-size: .65rem; font-weight: 900; }
.product-divider { width: 1px; height: .85rem; background: var(--border); }

.product-price-block {
    margin-top: 1.25rem;
    padding: 1.1rem 0;
    border-block: 1px solid var(--border);
}

.product-current-price { margin: 0; color: var(--card-foreground); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.product-current-price span { margin-right: .35rem; font-size: .55em; font-weight: 800; vertical-align: .45em; }
.product-price-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: .65rem; }
.product-old-price { color: var(--muted-foreground); font-size: .9rem; text-decoration: line-through; }
.product-saving { padding: .25rem .5rem; border-radius: .35rem; color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 12%, transparent); font-size: .72rem; font-weight: 800; }
.product-payment-note { margin: .65rem 0 0; color: var(--muted-foreground); font-size: .72rem; }

.product-description { padding: 1.1rem 0; }
.product-description h2 { margin: 0 0 .4rem; font-size: .95rem; font-weight: 800; }
.product-description p { margin: 0; color: var(--muted-foreground); font-size: .86rem; line-height: 1.65; }
.product-description ul { display: grid; gap: .4rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: .8rem; }
.product-description li { position: relative; padding-left: 1.25rem; }
.product-description li::before { position: absolute; left: 0; color: var(--brand); content: '✓'; font-weight: 900; }

.product-availability { display: flex; align-items: center; gap: .7rem; padding: .75rem .85rem; border-radius: .65rem; }
.product-availability.is-available { color: #17633a; background: #edf9f2; }
.product-availability.is-unavailable { color: #b91c1c; background: #fef2f2; }
.product-stock-dot { width: .6rem; height: .6rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); }
.product-availability div { display: grid; gap: .1rem; }
.product-availability strong { font-size: .8rem; }
.product-availability span:last-child { font-size: .7rem; opacity: .8; }

.product-purchase-form { margin-top: 1rem; }
.product-purchase-form > label { display: block; margin-bottom: .4rem; font-size: .72rem; font-weight: 700; }
.product-purchase-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: .65rem; }
.product-purchase-row select { width: 100%; padding: 0 .75rem; border: 1px solid var(--border); border-radius: .65rem; color: var(--card-foreground); background: var(--card); font-weight: 700; }
.product-purchase-row button { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .6rem; border-radius: .65rem; color: var(--brand-foreground); background: var(--brand); font-size: .9rem; font-weight: 800; box-shadow: 0 .5rem 1.25rem color-mix(in srgb, var(--brand) 22%, transparent); transition: transform .15s ease, background-color .15s ease; }
.is-in-cart {
    border: 1px solid #86efac !important;
    color: #166534 !important;
    background: #f0fdf4 !important;
    box-shadow: none !important;
}
.product-cart-actions {
    display: grid;
    gap: .7rem;
    margin-top: .75rem;
    padding: .9rem;
    border: 1px solid var(--border);
    border-radius: .65rem;
    color: var(--card-foreground);
    background: var(--accent);
}
.product-cart-actions[hidden] { display: none; }
.product-cart-actions > span { display: flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 750; }
.product-cart-actions > span i { color: #16a34a; font-size: .9rem; }
.product-cart-actions > div { display: flex; flex-wrap: wrap; gap: .55rem; }
.product-cart-actions a { padding: .55rem .85rem; border: 1px solid var(--brand); border-radius: .5rem; color: var(--brand-foreground); background: var(--brand); font-size: .72rem; font-weight: 800; }
.product-cart-actions a.is-secondary { border-color: var(--border); color: var(--card-foreground); background: var(--card); }
.product-purchase-row button:hover:not(:disabled) { background: var(--brand-dark); transform: translateY(-1px); }
.product-purchase-row button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.product-purchase-row button.is-in-cart:disabled { opacity: 1; }
.product-purchase-row button svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.dark .is-in-cart {
    border-color: color-mix(in srgb, #4ade80 45%, var(--border)) !important;
    color: #bbf7d0 !important;
    background: color-mix(in srgb, #166534 30%, var(--card)) !important;
}

.product-assurances { display: grid; gap: .75rem; margin-top: 1.2rem; padding-top: 1.15rem; border-top: 1px solid var(--border); }
.product-assurances > div { display: flex; align-items: center; gap: .7rem; }
.product-assurances svg { width: 1.35rem; flex: 0 0 auto; fill: none; stroke: var(--brand); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.product-assurances span { display: grid; color: var(--muted-foreground); font-size: .68rem; line-height: 1.35; }
.product-assurances strong { color: var(--card-foreground); font-size: .75rem; }

.product-details-panel { display: grid; gap: 1.5rem; margin-top: 1rem; padding: clamp(1.25rem, 3vw, 2rem); }
.product-section-kicker { color: var(--brand); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-details-panel h2, .product-related h2 { margin: .3rem 0 0; font-size: clamp(1.25rem, 3vw, 1.65rem); font-weight: 800; letter-spacing: -.025em; }
.product-service-grid { display: grid; gap: 1rem; }
.product-service-grid article { padding-top: 1rem; border-top: 1px solid var(--border); }
.product-service-grid article > span { color: var(--brand); font-size: .68rem; font-weight: 900; }
.product-service-grid h3 { margin: .35rem 0 .25rem; font-size: .88rem; font-weight: 800; }
.product-service-grid p { margin: 0; color: var(--muted-foreground); font-size: .76rem; line-height: 1.55; }

.product-related { margin-top: 2.5rem; }
.product-related-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.product-related-heading > a { color: var(--brand); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.product-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

@media (min-width: 640px) {
    .product-detail-shell { width: min(100% - 2rem, 76rem); }
    .product-assurances { grid-template-columns: repeat(3, 1fr); }
    .product-assurances > div { align-items: flex-start; }
    .product-service-grid { grid-template-columns: repeat(3, 1fr); }
    .product-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .product-detail-page { padding-top: 1.5rem; }
    .product-hero { grid-template-columns: minmax(0, 1.04fr) minmax(25rem, .96fr); align-items: start; }
    .product-gallery { position: sticky; top: 1rem; }
    .product-image-stage { min-height: 34rem; }
    .product-details-panel { grid-template-columns: .8fr 2fr; }
    .product-related-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .product-detail-page { padding-top: .75rem; }
    .product-breadcrumbs { margin-bottom: .75rem; }
    .product-gallery, .product-buy-box, .product-details-panel { border-radius: .8rem; }
    .product-image-stage { min-height: 19rem; padding: 1.5rem; }
    .product-gallery-footer { padding: .65rem; }
    .product-gallery-footer > p { display: none; }
    .product-buy-box h1 { font-size: 1.65rem; }
    .product-assurances { grid-template-columns: 1fr; }
    .product-related-grid article:nth-child(n+5) { display: none; }
}

/* Account */
.account-page { min-height: 65vh; padding: 1.25rem 0 4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 24rem); }
.account-shell { width: min(100% - 1.5rem, 76rem); margin-inline: auto; }
.account-breadcrumbs { display: flex; align-items: center; gap: .5rem; overflow: hidden; margin-bottom: 1rem; color: var(--muted-foreground); font-size: .7rem; white-space: nowrap; }
.account-breadcrumbs a:hover { color: var(--brand); }
.account-breadcrumbs strong { overflow: hidden; color: var(--card-foreground); text-overflow: ellipsis; }
.account-hero { position: relative; display: flex; align-items: center; gap: 1rem; overflow: hidden; padding: 1.2rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); box-shadow: 0 10px 30px rgb(0 0 0 / 4%); }
.account-hero::after { position: absolute; top: -4rem; right: -3rem; width: 10rem; height: 10rem; border-radius: 50%; background: color-mix(in srgb, var(--brand) 9%, transparent); content: ''; pointer-events: none; }
.account-avatar { z-index: 1; display: grid; width: 3.75rem; height: 3.75rem; flex: 0 0 auto; place-items: center; border: 3px solid color-mix(in srgb, var(--brand) 18%, transparent); border-radius: 50%; color: var(--brand); background: var(--accent); font-size: 1.25rem; font-weight: 900; }
.account-identity { z-index: 1; min-width: 0; }
.account-kicker { margin: 0 0 .15rem; color: var(--brand); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.account-identity h1 { overflow: hidden; margin: 0; font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 900; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.account-identity > p:last-child { overflow: hidden; margin: .2rem 0 0; color: var(--muted-foreground); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.account-signout { z-index: 1; margin-left: auto; }
.account-signout button { padding: .55rem .8rem; border: 1px solid var(--border); border-radius: .55rem; color: var(--muted-foreground); background: var(--card); font-size: .7rem; font-weight: 750; white-space: nowrap; }
.account-signout button:hover { border-color: #b42318; color: #b42318; background: color-mix(in srgb, #b42318 5%, var(--card)); }
.account-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: .75rem; }
.account-stats > div { display: grid; min-width: 0; padding: .9rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 3%); }
.account-stats span { color: var(--muted-foreground); font-size: .62rem; font-weight: 700; }
.account-stats strong { overflow: hidden; margin-top: .18rem; font-size: clamp(.95rem, 3vw, 1.25rem); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.account-stats small { display: none; color: var(--muted-foreground); font-size: .6rem; }
.account-mobile-nav { display: flex; gap: .4rem; overflow-x: auto; margin-top: 1rem; padding-bottom: .2rem; scrollbar-width: none; }
.account-mobile-nav::-webkit-scrollbar { display: none; }
.account-mobile-nav a { flex: 0 0 auto; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); background: var(--card); font-size: .67rem; font-weight: 750; }
.account-mobile-nav a.is-active { border-color: var(--brand); color: var(--brand-foreground); background: var(--brand); box-shadow: 0 .3rem .8rem color-mix(in srgb, var(--brand) 18%, transparent); }
.account-layout { display: grid; gap: 1rem; margin-top: 1rem; align-items: start; }
.account-sidebar { display: none; }
.account-content { min-width: 0; }
.account-panel { padding: 1rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 3%); }
.account-settings-stack { display: grid; gap: 1.25rem; }
.account-settings-card { padding: 1.25rem; box-shadow: 0 .35rem 1rem rgb(15 23 42 / 5%); }
.account-settings-card-heading { display: flex; align-items: flex-start; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.account-settings-card-heading > span { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; place-items: center; border-radius: .6rem; color: var(--brand); background: var(--accent); font-size: .85rem; }
.account-settings-card-heading h2 { margin: 0; font-size: 1rem; font-weight: 850; }
.account-settings-card-heading p { margin: .2rem 0 0; color: var(--muted-foreground); font-size: .68rem; line-height: 1.45; }
.account-settings-card form { margin-top: 1.15rem; }
.account-settings-card form label { line-height: 1.35; }
.account-settings-card form input { margin-top: .4rem; }
.account-settings-card form button { min-height: 2.65rem; padding-inline: 1rem; box-shadow: 0 .35rem .8rem color-mix(in srgb, var(--brand) 16%, transparent); }
.account-section-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; padding: .25rem .35rem .35rem; }
.account-section-header p { display: inline-flex; margin: 0; padding: .2rem .42rem; border-radius: .3rem; color: #fff; background: var(--brand); font-size: .6rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.account-section-header h2 { margin: .15rem 0 0; font-size: clamp(1.25rem, 4vw, 1.6rem); font-weight: 900; letter-spacing: -.03em; }
.account-section-header span { display: block; margin-top: .2rem; color: var(--muted-foreground); font-size: .7rem; }
.account-section-header > a { padding: .5rem .7rem; border: 1px solid var(--border); border-radius: .5rem; color: var(--brand); background: var(--card); font-size: .67rem; font-weight: 800; white-space: nowrap; }
.address-book { display: grid; gap: 1rem; }
.address-book-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.address-book-heading h2 { margin: 0; font-size: 1.05rem; font-weight: 850; }
.address-book-heading p { margin: .2rem 0 0; color: var(--muted-foreground); font-size: .72rem; }
.address-book-heading > span { padding: .3rem .55rem; border-radius: 999px; color: var(--brand); background: var(--accent); font-size: .65rem; font-weight: 800; white-space: nowrap; }
.address-card-grid { display: grid; gap: .75rem; margin-top: 1rem; }
.address-card { position: relative; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); }
.address-card.is-default { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); box-shadow: inset 3px 0 var(--brand); }
.address-card-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.address-card-heading strong { font-size: .82rem; }
.address-card-heading span { padding: .2rem .4rem; border-radius: 999px; color: var(--brand); background: var(--accent); font-size: .58rem; font-weight: 800; }
.address-card h3 { margin: .7rem 0 .2rem; font-size: .8rem; font-weight: 800; }
.address-card > p { margin: 0; color: var(--muted-foreground); font-size: .72rem; line-height: 1.55; }
.address-card details { margin-top: .75rem; }
.address-card summary, .address-remove-form button { color: var(--brand); font-size: .67rem; font-weight: 800; cursor: pointer; }
.address-remove-form { position: absolute; right: 1rem; bottom: 1rem; }
.address-remove-form button { color: #b42318; }
.address-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .75rem; padding-bottom: 1.8rem; }
.address-form-new { margin-top: 1rem; padding-bottom: 0; }
.address-form input, .address-form textarea { width: 100%; padding: .65rem .7rem; border: 1px solid var(--border); border-radius: .5rem; color: var(--card-foreground); background: var(--background); font-size: .72rem; }
.address-form textarea { grid-column: 1 / -1; resize: vertical; }
.address-form label { display: flex; grid-column: 1 / -1; align-items: center; gap: .45rem; color: var(--muted-foreground); font-size: .68rem; }
.address-form label input { width: auto; }
.address-form > button { justify-self: start; padding: .6rem .85rem; border-radius: .5rem; color: var(--brand-foreground); background: var(--brand); font-size: .7rem; font-weight: 800; }
.address-empty { display: grid; min-height: 8rem; place-items: center; align-content: center; gap: .5rem; color: var(--muted-foreground); font-size: .75rem; text-align: center; }
.address-empty i { color: var(--brand); font-size: 1.5rem; }
.order-status-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; margin-top: .35rem; }
.order-status-badge, .payment-status-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .5rem; border-radius: 999px; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.order-status-badge { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.order-pay-now { display: inline-flex; align-items: center; gap: .35rem; margin-top: .55rem; padding: .5rem .75rem; border-radius: .5rem; color: var(--brand-foreground); background: var(--brand); font-size: .68rem; font-weight: 850; box-shadow: 0 .35rem .8rem color-mix(in srgb, var(--brand) 18%, transparent); }
.order-pay-now:hover { background: var(--brand-dark); }
.payment-status-pending { color: #92400e; background: #fef3c7; }
.payment-status-paid { color: #166534; background: #dcfce7; }
.payment-status-failed, .payment-status-cancelled { color: #991b1b; background: #fee2e2; }
.order-payment-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .85rem; padding: .75rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--card); }
.order-payment-summary > span { color: var(--muted-foreground); font-size: .7rem; }
.order-payment-summary small { width: 100%; color: var(--muted-foreground); font-size: .62rem; }
.order-payment-summary > a { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; padding: .5rem .7rem; border-radius: .45rem; color: var(--brand-foreground); background: var(--brand); font-size: .66rem; font-weight: 800; }
.dark .payment-status-pending { color: #fde68a; background: rgb(146 64 14 / 28%); }
.dark .payment-status-paid { color: #bbf7d0; background: rgb(22 101 52 / 35%); }
.dark .payment-status-failed, .dark .payment-status-cancelled { color: #fecaca; background: rgb(153 27 27 / 30%); }
.checkout-address-choices { display: grid; gap: .6rem; margin-bottom: .75rem; }
.checkout-address-choice { display: grid; gap: .25rem; padding: .75rem; border: 1px solid var(--border); border-radius: .6rem; color: var(--card-foreground); background: var(--card); text-align: left; }
.checkout-address-choice.is-selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--card)); box-shadow: 0 0 0 1px var(--brand); }
.checkout-address-choice > span { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.checkout-address-choice strong { font-size: .76rem; }
.checkout-address-choice small { padding: .15rem .35rem; border-radius: 999px; color: var(--brand); background: var(--accent); font-size: .55rem; }
.checkout-address-choice b { overflow: hidden; color: var(--muted-foreground); font-size: .65rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .address-card-grid, .checkout-address-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .address-form { grid-template-columns: 1fr; } .address-form textarea, .address-form label { grid-column: 1; } }
.account-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.account-quick-actions a { display: flex; min-width: 0; min-height: 6.5rem; flex-direction: column; padding: .9rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--card); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.account-quick-actions a:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); box-shadow: 0 .6rem 1.5rem rgb(0 0 0 / 6%); transform: translateY(-2px); }
.account-action-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .55rem; color: var(--brand); background: var(--accent); }
.account-action-icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.account-quick-actions b { overflow: hidden; margin-top: auto; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.account-quick-actions small { display: none; margin-top: .15rem; color: var(--muted-foreground); font-size: .62rem; }

@media (min-width: 640px) {
    .account-shell { width: min(100% - 2rem, 76rem); }
    .account-hero { padding: 1.5rem; }
    .account-stats { gap: 1rem; }
    .account-stats > div { padding: 1rem 1.15rem; }
    .account-stats small, .account-quick-actions small { display: block; }
    .account-quick-actions a { min-height: 7.5rem; padding: 1rem; }
    .account-panel { padding: 1.25rem; }
}

@media (min-width: 1024px) {
    .account-page { padding-top: 1.5rem; }
    .account-mobile-nav { display: none; }
    .account-layout { grid-template-columns: 17rem minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
    .account-sidebar { position: sticky; top: 6.5rem; display: block; }
    .account-sidebar nav { overflow: hidden; padding: .45rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 3%); }
    .account-sidebar nav > p { margin: .35rem .6rem .55rem; color: var(--muted-foreground); font-size: .6rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
    .account-sidebar nav a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem .7rem; border-radius: .6rem; color: var(--card-foreground); }
    .account-sidebar nav a:hover { background: var(--accent); }
    .account-sidebar nav a.is-active { color: var(--brand); background: var(--accent); }
    .account-sidebar nav span { font-size: .72rem; font-weight: 800; }
    .account-sidebar nav small { display: block; margin-top: .12rem; color: var(--muted-foreground); font-size: .58rem; font-weight: 500; }
    .account-sidebar nav b { color: var(--muted-foreground); font-size: 1.15rem; }
    .account-sidebar nav a.is-active b { color: var(--brand); }
    .account-shop-link { display: block; margin-top: .75rem; padding-left: .8rem; color: var(--brand); font-size: .68rem; font-weight: 800; }
}

@media (max-width: 480px) {
    .account-hero { align-items: flex-start; }
    .account-avatar { width: 3.1rem; height: 3.1rem; }
    .account-identity > p:last-child span, .account-identity > p:last-child span ~ * { display: none; }
    .account-signout { position: absolute; top: .7rem; right: .7rem; }
    .account-signout button { padding: .4rem .55rem; }
    .account-stats > div { padding: .75rem .65rem; }
    .account-quick-actions a { min-height: 5.8rem; padding: .7rem; }
}

/* Product catalog and offers */
.catalog-page { min-height: 65vh; padding: 1.15rem 0 4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 48%, transparent), transparent 22rem); }
.catalog-shell { width: min(100% - 1.5rem, 76rem); margin-inline: auto; }
.catalog-breadcrumbs { display: flex; align-items: center; gap: .5rem; overflow: hidden; margin-bottom: .8rem; color: var(--muted-foreground); font-size: .7rem; white-space: nowrap; }
.catalog-breadcrumbs a:hover { color: var(--brand); }
.catalog-breadcrumbs strong { overflow: hidden; color: var(--card-foreground); text-overflow: ellipsis; }
.category-hero, .offers-hero { display: flex; align-items: center; gap: .9rem; padding: 1rem; border-radius: 1rem; box-shadow: 0 .6rem 1.8rem rgb(0 0 0 / 6%); }
.category-hero { border: 1px solid var(--border); background: var(--card); }
.offers-hero { color: var(--deal-foreground); background: var(--deal); background: linear-gradient(125deg, var(--deal), color-mix(in srgb, var(--deal) 78%, #7f1d1d)); }
.category-hero-icon, .offers-hero-icon { display: grid; width: 3.25rem; height: 3.25rem; flex: 0 0 auto; place-items: center; border-radius: .8rem; }
.category-hero-icon { color: var(--brand); background: var(--accent); }
.offers-hero-icon { color: inherit; background: rgb(255 255 255 / 16%); }
.offers-hero-icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.category-hero > div, .offers-hero > div { min-width: 0; }
.category-hero p, .offers-hero p { margin: 0; font-size: .6rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.category-hero p { color: var(--brand); }
.category-hero h1, .offers-hero h1 { overflow: hidden; margin: .1rem 0 0; font-size: clamp(1.25rem, 5vw, 1.8rem); font-weight: 900; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.category-hero > div > span, .offers-hero > div > span { display: block; margin-top: .15rem; color: var(--muted-foreground); font-size: .68rem; }
.offers-hero > div > span { color: currentColor; opacity: .82; }
.category-hero > a, .offers-hero > strong { margin-left: auto; white-space: nowrap; }
.category-hero > a { padding: .5rem .7rem; border: 1px solid var(--border); border-radius: .5rem; color: var(--brand); font-size: .67rem; font-weight: 800; }
.category-hero > a:hover { border-color: var(--brand); background: var(--accent); }
.offers-hero > strong { padding: .35rem .6rem; border-radius: 999px; background: rgb(255 255 255 / 15%); font-size: .68rem; }
.catalog-toolbar { display: grid; gap: .75rem; margin-top: 1rem; }
.catalog-toolbar .category-filter-row { margin: 0; }
.catalog-toolbar .category-filter-pill { padding: .48rem .72rem; border: 1px solid var(--border); border-radius: 999px; font-size: .67rem; font-weight: 750; }
.catalog-sort { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--card); }
.catalog-sort label { color: var(--muted-foreground); font-size: .65rem; font-weight: 700; white-space: nowrap; }
.catalog-sort select { min-width: 0; height: 2rem; border: 0; color: var(--card-foreground); background: transparent; font-size: .68rem; font-weight: 750; outline: none; }
.catalog-grid { margin-top: 1rem; }
.catalog-empty { display: grid; min-height: 18rem; margin-top: 1rem; padding: 2rem 1rem; place-items: center; align-content: center; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); text-align: center; }
.catalog-empty > span { color: var(--brand); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.catalog-empty h2 { max-width: 28rem; margin: .5rem 0 0; font-size: 1.15rem; font-weight: 850; }
.catalog-empty p { margin: .4rem 0 0; color: var(--muted-foreground); font-size: .72rem; }
.catalog-empty a { margin-top: 1rem; padding: .6rem .8rem; border-radius: .5rem; color: var(--brand-foreground); background: var(--brand); font-size: .68rem; font-weight: 800; }

@media (min-width: 640px) {
    .catalog-shell { width: min(100% - 2rem, 76rem); }
    .category-hero, .offers-hero { padding: 1.25rem; }
    .catalog-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .catalog-sort { justify-content: flex-start; }
    .catalog-grid { margin-top: 1.25rem; }
}

@media (max-width: 480px) {
    .category-hero > a { display: none; }
    .offers-hero > strong { align-self: flex-start; font-size: .6rem; }
    .category-hero-icon, .offers-hero-icon { width: 2.75rem; height: 2.75rem; }
}

@media (max-width: 639px) {
    .category-hero, .offers-hero { align-items: flex-start; padding: .9rem; }
    .category-hero > a, .offers-hero > strong { display: none; }
    .category-hero h1, .offers-hero h1 { font-size: 1.2rem; white-space: normal; }
    .category-hero > div > span, .offers-hero > div > span { line-height: 1.4; }
}