/* Blade-specific layout rules. The main stylesheet is a static utility build,
   so new responsive layouts live here rather than relying on missing classes. */
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-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); }
}

.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-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: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%}}

/* 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; }

@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; }
}

@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; }
}

@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; }
}

@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; }
.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 svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.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-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; }
.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; }
}