:root {
    --primary: #7137d8;
    --primary-dark: #5522af;
    --primary-soft: #f1eaff;

    --background: #f7f7fb;
    --surface: #ffffff;

    --text: #17141f;
    --muted: #777381;
    --border: #ebe8f1;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow:
        0 8px 30px rgba(34, 22, 54, .07);

    --container: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.app-shell {
    width: min(100%, var(--container));
    margin: 0 auto;
    padding: 20px 18px 40px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.brand {
    color: var(--primary);
    font-size: 1.45rem;
    font-weight: 800;
}

.greeting {
    margin-top: 3px;
    color: var(--muted);
    font-size: .84rem;
}

.hero {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 28px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(255,255,255,.24),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #5d27be,
            #8b55ec
        );
    color: white;
    box-shadow: var(--shadow);
}

.hero-copy {
    max-width: 600px;
}

.hero-badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-size: .72rem;
    font-weight: 700;
}

.hero h1 {
    margin: 13px 0 9px;
    max-width: 520px;
    font-size: clamp(1.8rem, 5vw, 3rem);
    line-height: 1.08;
}

.hero p {
    color: rgba(255,255,255,.82);
}

.hero-button {
    display: inline-flex;
    margin-top: 10px;
    padding: 11px 16px;
    border-radius: 12px;
    background: white;
    color: var(--primary-dark);
    font-weight: 700;
}

.hero-art {
    padding: 20px;
    font-size: 5rem;
}

.section {
    margin-top: 32px;
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}

.section-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.section-header span {
    color: var(--muted);
    font-size: .8rem;
}

.category-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(125px, 1fr));
    gap: 12px;
}

.category-card {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 3px 15px rgba(0,0,0,.025);
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.category-icon {
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 1.6rem;
}

.category-card strong {
    font-size: .9rem;
}

.category-card small {
    margin-top: 4px;
    color: var(--muted);
}

.product-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(185px, 1fr));
    gap: 14px;
}

.product-card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: .18s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.product-image {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            var(--primary-soft),
            #faf8ff
        );
}

.product-image span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--primary);
    color: white;
    font-size: 1.45rem;
    font-weight: 800;
}

.product-category,
.product-brand {
    color: var(--muted);
    font-size: .72rem;
}

.product-name {
    min-height: 42px;
    margin: 5px 0;
    font-size: .9rem;
    font-weight: 700;
}

.product-price {
    margin-top: 8px;
    color: var(--primary);
    font-size: .95rem;
    font-weight: 800;
}

@media (max-width: 600px) {
    .app-shell {
        padding: 16px 14px 32px;
    }

    .hero {
        min-height: 190px;
        padding: 22px;
    }

    .hero-art {
        display: none;
    }

    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================
   PRODUCT DETAIL
================================ */

.detail-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.detail-header-title {
    overflow: hidden;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.back-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font-size: 1.4rem;
}

.product-hero-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.product-logo-large {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            var(--primary-soft),
            #faf8ff
        );
    color: var(--primary);
    font-size: 2.4rem;
    font-weight: 900;
}

.product-hero-copy h1 {
    margin: 5px 0 8px;
    font-size: 1.25rem;
    line-height: 1.25;
}

.product-hero-copy p {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}

.detail-category {
    color: var(--muted);
    font-size: .75rem;
}

.instant-badge {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 800;
}

.product-form {
    padding-bottom: 45px;
}

.detail-section {
    margin-top: 26px;
}

.section-title,
.section-title-row {
    font-weight: 800;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.variant-count {
    color: var(--muted);
    font-size: .77rem;
    font-weight: 500;
}

.field-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 7px;
    font-size: .82rem;
    font-weight: 700;
}

.optional-label {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 500;
}

.input-shell {
    position: relative;
}

.input-shell input {
    width: 100%;
    height: 52px;
    padding: 0 48px 0 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    outline: none;
    background: var(--surface);
}

.input-shell input:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px rgba(113, 55, 216, .10);
}

.input-help {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    font-size: .7rem;
}

.nominal-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 13px;
}

.nominal-card {
    position: relative;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 12px 9px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    cursor: pointer;
    text-align: center;
}

.nominal-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nominal-card strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: .73rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.nominal-icon {
    color: var(--primary);
}

.nominal-price {
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
}

.nominal-card.selected {
    border-color: var(--primary);
    background: #fbf9ff;
    box-shadow:
        0 0 0 2px rgba(113,55,216,.08);
}

.selected-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 19px;
    height: 19px;
    display: none;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: .65rem;
}

.nominal-card.selected .selected-check {
    display: grid;
}

.detail-summary {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.detail-summary > div {
    min-width: 0;
}

.detail-summary small {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: .7rem;
}

.detail-summary strong {
    display: block;
    font-size: .83rem;
}

.detail-summary-price {
    flex: 0 0 auto;
    text-align: right;
}

.detail-summary-price strong {
    color: var(--primary);
    font-size: 1rem;
}

.primary-buy-button {
    position: sticky;
    z-index: 9;
    bottom: 82px;
    width: 100%;
    min-height: 52px;
    margin-top: 14px;
    border: 0;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );
    color: white;
    box-shadow:
        0 12px 26px rgba(92, 42, 184, .24);
    cursor: pointer;
    font-weight: 800;
}

@media (max-width: 600px) {
    .product-hero-card {
        grid-template-columns: 88px 1fr;
        padding: 14px;
    }

    .product-logo-large {
        border-radius: 20px;
        font-size: 2rem;
    }

    .product-hero-copy h1 {
        font-size: 1rem;
    }

    .nominal-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

/* Product CTA final behaviour */
.primary-buy-button {
    position: static;
    bottom: auto;
    margin-top: 16px;
}

/* ================================
   CHECKOUT
================================ */

.checkout-product-card {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

.checkout-product-logo {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            var(--primary-soft),
            #faf8ff
        );
    color: var(--primary);
    font-size: 1.6rem;
    font-weight: 900;
}

.checkout-product-info {
    min-width: 0;
}

.checkout-product-info small {
    display: block;
    color: var(--muted);
    font-size: .7rem;
}

.checkout-product-info strong {
    display: block;
    margin: 4px 0 7px;
    font-size: .88rem;
}

.checkout-product-price {
    color: var(--primary);
    font-weight: 800;
    white-space: nowrap;
}

.checkout-section {
    margin-top: 26px;
}

.checkout-section h2 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.checkout-section h2 small {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 500;
}

.summary-list {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.summary-list > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
}

.summary-list > div:last-child {
    border-bottom: 0;
}

.summary-list span {
    color: var(--muted);
    font-size: .78rem;
}

.summary-list strong {
    font-size: .8rem;
    text-align: right;
}

.payment-options {
    display: grid;
    gap: 9px;
}

.payment-option {
    display: grid;
    grid-template-columns: 42px 1fr 24px;
    gap: 11px;
    align-items: center;
    min-height: 65px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    cursor: pointer;
}

.payment-option input {
    position: absolute;
    opacity: 0;
}

.payment-option.selected {
    border-color: var(--primary);
    box-shadow:
        0 0 0 2px rgba(113,55,216,.08);
}

.payment-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 900;
}

.payment-copy strong,
.payment-copy small {
    display: block;
}

.payment-copy strong {
    font-size: .82rem;
}

.payment-copy small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .68rem;
}

.payment-radio {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: white;
    font-size: .65rem;
}

.payment-option.selected .payment-radio {
    border-color: var(--primary);
    background: var(--primary);
}

.promo-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.promo-row input,
.promo-row button {
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.promo-row input {
    padding: 0 14px;
}

.promo-row button {
    padding: 0 15px;
}

.checkout-total-card {
    margin-top: 25px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
}

.checkout-total-card > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

.checkout-total-card span {
    color: var(--muted);
    font-size: .78rem;
}

.checkout-total-card strong {
    font-size: .82rem;
}

.checkout-total-card .checkout-total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.checkout-total strong {
    color: var(--primary);
    font-size: 1.05rem;
}

.checkout-primary-button {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );
    color: white;
    box-shadow:
        0 12px 26px rgba(92,42,184,.22);
    font-weight: 800;
}

.development-note {
    margin: 10px 0 25px;
    color: var(--muted);
    font-size: .7rem;
    text-align: center;
}

.promo-row button:not(:disabled) {
    color: var(--primary);
    cursor: pointer;
    font-weight: 700;
}

.promo-message {
    margin-top: 9px;
    padding: 10px 12px;
    border-radius: 11px;
    font-size: .72rem;
}

.promo-message[data-status="success"] {
    background: #ecfdf3;
    color: #16803c;
}

.promo-message[data-status="error"] {
    background: #fff1f2;
    color: #be123c;
}

.discount-row strong {
    color: #16803c;
}

/* Fix promo row on small screens */
.promo-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.promo-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.promo-row button {
    flex: 0 0 auto;
    min-width: 108px;
    padding: 0 14px;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .promo-row button {
        min-width: 92px;
        padding: 0 12px;
        font-size: .9rem;
    }
}

.mobile-number-status {
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
}

.mobile-number-status[data-state="success"] {
    background: #ecfdf3;
    color: #16803c;
}

.mobile-number-status[data-state="error"] {
    background: #fff1f2;
    color: #be123c;
}

/* ================================
   PAYMENT PAGE
================================ */

.payment-order-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 13px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
}

.payment-order-copy {
    min-width: 0;
}

.payment-order-copy small,
.payment-order-copy strong,
.payment-order-copy span {
    display: block;
}

.payment-order-copy small,
.payment-order-copy span {
    color: var(--muted);
    font-size: .7rem;
}

.payment-order-copy strong {
    margin: 4px 0;
    font-size: .86rem;
}


.payment-amount-card {
    margin-top: 18px;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: var(--surface);
    text-align: center;
}

.payment-amount-card > small {
    color: var(--muted);
}

.payment-final-amount {
    margin: 7px 0 5px;
    color: var(--primary);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -.5px;
}

.payment-unique-info {
    color: var(--muted);
    font-size: .72rem;
}

.payment-unique-info strong {
    color: var(--text);
}

.payment-breakdown {
    margin-top: 17px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.payment-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    font-size: .75rem;
}

.payment-breakdown span {
    color: var(--muted);
}

.discount-text {
    color: #16803c;
}


.qris-payment-card {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    text-align: center;
}

.qris-title {
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.qris-instruction {
    margin: 6px 0 14px;
    color: var(--muted);
    font-size: .75rem;
}

.qris-image-wrap {
    width: min(100%, 310px);
    margin: 0 auto;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: white;
}

.qris-image {
    width: 100%;
    height: auto;
    display: block;
}

.download-qris-button {
    min-height: 46px;
    width: min(100%, 310px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 11px auto 0;
    border: 1px solid var(--primary);
    border-radius: 13px;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 800;
}

.qris-not-enabled {
    padding: 35px 18px;
    border: 1px dashed var(--primary);
    border-radius: 17px;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 800;
}

.qris-not-enabled small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-weight: 500;
}

.pay-exactly {
    margin-top: 15px;
    color: var(--muted);
    font-size: .77rem;
}

.pay-exactly strong {
    color: var(--text);
}


.payment-timer-card {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    padding: 15px;
    border-radius: 16px;
    background: var(--primary-soft);
    color: var(--primary);
}

.payment-timer-card > span {
    font-size: 1.6rem;
}

.payment-timer-card small,
.payment-timer-card strong {
    display: block;
}

.payment-timer-card small {
    font-size: .7rem;
}

.payment-timer-card strong {
    margin-top: 2px;
    font-size: 1.3rem;
}


.payment-instructions {
    margin-top: 25px;
}

.payment-instructions h2 {
    font-size: 1rem;
}

.payment-instructions > div {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 9px;
    align-items: flex-start;
    margin-top: 10px;
}

.payment-instructions > div > span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 800;
}

.payment-instructions p {
    margin: 2px 0;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45;
}


.payment-status-message {
    margin-top: 22px;
    padding: 11px;
    border-radius: 12px;
    background: #fff9e8;
    color: #8b6508;
    font-size: .75rem;
    text-align: center;
}

.payment-status-message[data-status="paid"] {
    background: #ecfdf3;
    color: #16803c;
}

.payment-status-message[data-status="expired"] {
    background: #fff1f2;
    color: #be123c;
}


#check-payment-status {
    width: 100%;
    border: 0;
}


.payment-reference {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    margin: 16px 0 25px;
    padding: 12px;
    border-radius: 13px;
    background: var(--surface);
    font-size: .67rem;
}

.payment-reference span {
    color: var(--muted);
}

.payment-reference strong {
    overflow-wrap: anywhere;
    text-align: right;
}

.payment-reference .payment-reference-secondary {
    color: var(--muted);
    font-weight: 600;
}


.unique-code-note {
    margin: 10px 0;
    color: var(--muted);
    font-size: .7rem;
    text-align: center;
}

#payment-create-form {
    width: 100%;
}

#payment-create-form .checkout-primary-button {
    width: 100%;
    border: 0;
    cursor: pointer;
}

/* ================================
   CATEGORY / PRODUCT LIST
================================ */

.category-page-header {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 22px;
}

.category-page-header small {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .7rem;
}

.category-page-header h1 {
    margin: 0;
    font-size: 1.35rem;
}

.category-total {
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 900;
    text-align: right;
}

.category-total span {
    display: block;
    color: var(--muted);
    font-size: .65rem;
    font-weight: 500;
}


.category-search-section {
    margin-bottom: 15px;
}

.category-search {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    min-height: 50px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.category-search > span {
    color: var(--muted);
    font-size: 1.2rem;
}

.category-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
}


.brand-filter-wrap {
    margin: 0 -18px 22px;
    overflow: hidden;
}

.brand-filter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 18px 8px;
    scrollbar-width: none;
}

.brand-filter::-webkit-scrollbar {
    display: none;
}

@media (max-width: 600px) {
    .brand-filter-wrap {
        margin-right: -14px;
        margin-left: -14px;
    }

    .brand-filter {
        padding-right: 14px;
        padding-left: 14px;
    }
}

.brand-chip {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
}

.brand-chip.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}


.category-products-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 14px;
}

.category-products-heading h2 {
    margin: 0;
    font-size: 1.05rem;
}

.category-products-heading small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .68rem;
}

.product-sort {
    max-width: 145px;
    min-height: 39px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;
    background: var(--surface);
    color: var(--text);
    font-size: .68rem;
}


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

.category-product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.category-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.category-product-card[hidden] {
    display: none;
}


.category-product-image {
    position: relative;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    margin: 10px 10px 0;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            var(--primary-soft),
            #faf8ff
        );
}

.category-product-image > span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #9657ed
        );
    color: white;
    font-size: 1.35rem;
    font-weight: 900;
}


.product-instant-badge {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: var(--primary);
    font-size: .58rem;
    font-weight: 800;
}


.category-product-content {
    padding: 11px;
}

.category-product-brand {
    overflow: hidden;
    color: var(--muted);
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-product-name {
    min-height: 43px;
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.category-product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
}

.category-product-footer strong {
    color: var(--primary);
    font-size: .85rem;
}

.category-product-footer span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1rem;
}


.category-empty-state {
    padding: 50px 20px;
    text-align: center;
}

.category-empty-state > div {
    color: var(--primary);
    font-size: 2rem;
}

.category-empty-state strong {
    display: block;
    margin-top: 8px;
}

.category-empty-state p {
    margin: 5px auto 0;
    max-width: 280px;
    color: var(--muted);
    font-size: .75rem;
}


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

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

/* =================================
   ORDER STATUS
================================= */

.order-status-page {
    padding-bottom: 110px;
}

.order-status-icon {
    width: 72px;
    height: 72px;
    margin: 20px auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 2rem;
    font-weight: 900;
}

.order-status-heading {
    text-align: center;
    margin-bottom: 22px;
}

.order-status-heading h1 {
    margin: 0;
    font-size: 1.35rem;
}

.order-status-heading p {
    margin: 7px auto 0;
    max-width: 320px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
}

.order-status-card {
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
}

.order-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.order-row:last-child {
    border-bottom: 0;
}

.order-row span {
    color: var(--muted);
    font-size: .72rem;
}

.order-row strong {
    max-width: 62%;
    text-align: right;
    font-size: .75rem;
    word-break: break-word;
}

.order-timeline {
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
}

.timeline-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 11px;
    position: relative;
    padding-bottom: 25px;
    opacity: .45;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item.done {
    opacity: 1;
}

.timeline-dot {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 900;
}

.timeline-item.done .timeline-dot {
    background: var(--primary);
    color: white;
}

.timeline-item strong {
    display: block;
    font-size: .78rem;
}

.timeline-item small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .66rem;
}

/* ================================
   STATIC CONTENT PAGES
   (FAQ, Terms, Privacy, Refund, Contact)
================================ */

.page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600;
}

.page-back:hover {
    color: var(--primary);
}

.page-head {
    margin-bottom: 22px;
}

.page-eyebrow {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.page-head h1 {
    margin: 12px 0 8px;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    line-height: 1.15;
}

.page-lead {
    margin: 0;
    max-width: 640px;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55;
}

.page-card {
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 3px 15px rgba(0, 0, 0, .025);
}

.prose h2 {
    margin: 22px 0 8px;
    font-size: 1.1rem;
    line-height: 1.3;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    margin: 16px 0 6px;
    font-size: .95rem;
}

.prose p {
    margin: 0 0 10px;
    color: var(--text);
    font-size: .9rem;
    line-height: 1.62;
}

.prose ul,
.prose ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.prose li {
    margin-bottom: 6px;
    color: var(--text);
    font-size: .9rem;
    line-height: 1.55;
}

.prose strong {
    font-weight: 700;
}

.prose a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

.page-note {
    padding: 12px 14px;
    margin: 16px 0 0;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: .84rem;
    line-height: 1.5;
}

/* FAQ accordion — native <details>, no JavaScript */
.faq-item {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.faq-item[open] summary::after {
    content: "\2013";
}

.faq-item .faq-answer {
    padding: 0 16px 14px;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.6;
}

.faq-item .faq-answer a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Contact page actions */
.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 6px;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
}

.contact-button:hover {
    background: var(--primary-dark);
}

.contact-button.secondary {
    background: var(--surface);
    color: var(--primary-dark);
    border: 1px solid var(--border);
}

.contact-button.secondary:hover {
    background: var(--primary-soft);
}

@media (max-width: 600px) {
    .page-card {
        padding: 16px;
    }

    .contact-button {
        width: 100%;
        justify-content: center;
    }
}

/* ================================
   SHARED SITE FOOTER
   (rendered from base.html on every page)
================================ */

.site-footer {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

.site-footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.footer-brand-name {
    color: var(--primary);
    font-size: 1.15rem;
    font-weight: 800;
}

.footer-brand-desc {
    margin: 8px 0 0;
    max-width: 420px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.6;
}

.footer-heading {
    margin: 0 0 8px;
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.footer-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: var(--muted);
    font-size: .86rem;
}

.footer-nav a:hover,
.footer-nav a:focus {
    color: var(--primary);
    text-decoration: underline;
}

@media (min-width: 640px) {
    .site-footer-inner {
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 32px;
    }
}

/* ================================
   ERROR & MAINTENANCE STATES
   (404, 500, /maintenance)
================================ */

.error-page {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.error-card {
    width: 100%;
    max-width: 520px;
    padding: 32px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
}

.error-code {
    color: var(--primary);
    font-size: clamp(2.6rem, 12vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
}

.error-title {
    margin: 12px 0 8px;
    font-size: clamp(1.3rem, 5vw, 1.7rem);
    line-height: 1.2;
}

.error-copy {
    margin: 0 auto 10px;
    max-width: 420px;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.error-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
}

.error-button:hover,
.error-button:focus {
    background: var(--primary-dark);
}

.error-button.secondary {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--primary-dark);
}

.error-button.secondary:hover,
.error-button.secondary:focus {
    background: var(--primary-soft);
}

@media (max-width: 600px) {
    .error-card {
        padding: 26px 18px;
    }

    .error-actions .error-button {
        width: 100%;
    }
}

/* ================================
   BRAND / CATEGORY LOGO IMAGES (7B1)
   Presentation-only. Rendered by the asset resolver only when an official
   asset is allowlisted; otherwise the existing purple letter/glyph fallback
   is used. No asset ships in this patch, so these are currently unused.
   Sits inside the existing logo containers (.product-image,
   .category-product-image, .product-logo-large, .checkout-product-logo) and
   fills them without stretching the artwork.
================================ */
.brand-logo-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 12px;
    object-fit: contain;
    display: block;
    margin: auto;
}

.category-icon-image {
    height: 40px;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ================================
   SITE BRAND LOCKUP
   JSX Store divisional logo in the home header and shared footer.
   Intrinsic width/height on the <img> preserves aspect ratio and
   reserves space to avoid layout shift; CSS caps the rendered size.
================================ */
.site-brand {
    display: inline-flex;
    align-items: center;
}

.site-brand:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 6px;
}

.site-brand-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.site-footer-logo {
    height: 34px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

@media (max-width: 600px) {
    .site-brand-logo {
        height: 34px;
    }
}

/* ================================
   JSX ICON SET v1
   Local SVGs from static/icons/, rendered as decorative <img> (alt="")
   beside visible text. Sizes are capped so CTAs/badges don't grow and
   no page-level horizontal overflow is introduced.
================================ */

/* Inline UI icon leading button/link text (lock, refresh, download). */
.ui-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
    vertical-align: -0.15em;
    margin-right: 6px;
}

/* Instant badge: icon scales with the badge's own font-size. */
.instant-badge,
.product-instant-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.instant-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Category search field adornment. */
.ui-icon-search {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Empty-state (no search results) illustration. */
.ui-icon-empty {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* Payment countdown icon (sits in the flex timer card, gap handles spacing). */
.payment-timer-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Generic JSX QR-payment icon inside the checkout payment-method box. */
.payment-method-icon-image {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* PATCH 7B2B1: on-device contrast fix. ui-lock / ui-refresh use JSX primary
   and are nearly invisible on the filled purple gradient CTAs. Force those
   icons to white — scoped to the primary buttons ONLY, so the outline
   Download QRIS button (.download-qris-button) keeps its purple icon and
   search/timer/qris/category icons are untouched. */
.primary-buy-button .ui-icon,
.checkout-primary-button .ui-icon {
    filter: brightness(0) invert(1);
}


/* CATEGORY CARD CENTER POLISH */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.category-card .category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.category-card > strong {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.22;
}

/* ==========================================================================
   PATCH 7C1 + 7C2 — BRIGHT DARK SHELL + CATEGORY DRAWER
   Presentation layer only.
   ========================================================================== */

:root {
    --jsx-shell: #332c63;
    --jsx-shell-bright: #403678;
    --jsx-shell-muted: #c9c4dd;
}

/* Home shell header */
.shell-header {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 22px;
    padding: 16px 18px;
    border-radius: 0 0 24px 24px;
    background:
        linear-gradient(
            135deg,
            var(--jsx-shell),
            var(--jsx-shell-bright)
        );
    box-shadow: 0 12px 30px rgba(42, 32, 91, .16);
}

.shell-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
}

.shell-brand:focus-visible,
.category-menu-toggle:focus-visible,
.category-drawer-close:focus-visible,
.category-drawer-link:focus-visible,
.category-drawer-home:focus-visible {
    outline: 3px solid rgba(255, 178, 36, .78);
    outline-offset: 3px;
}

.shell-brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: block;
    object-fit: contain;
}

.shell-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.shell-brand-name {
    color: white;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.shell-brand-name strong {
    color: #b899ff;
}

.shell-brand-tagline {
    margin-top: 5px;
    color: var(--jsx-shell-muted);
    font-size: .72rem;
    font-weight: 500;
    white-space: nowrap;
}

.category-menu-toggle {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;
    background: rgba(255,255,255,.09);
    color: white;
    cursor: pointer;
    transition:
        background .18s ease,
        transform .18s ease;
}

.category-menu-toggle:hover {
    background: rgba(255,255,255,.16);
}

.category-menu-toggle:active {
    transform: scale(.96);
}

.category-menu-bars {
    width: 23px;
    display: grid;
    gap: 4px;
}

.category-menu-bars i {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.category-menu-bars i:nth-child(2) {
    width: 18px;
    margin-left: auto;
}

.category-menu-bars i:nth-child(3) {
    width: 20px;
}

.category-menu-bars i:nth-child(4) {
    width: 15px;
    margin-left: auto;
}


/* Drawer backdrop */
.category-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(27, 22, 55, .42);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .22s ease;
}

.category-drawer-backdrop.is-open {
    opacity: 1;
}


/* Drawer */
.category-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 90;
    width: min(88vw, 370px);
    height: 100dvh;
    padding:
        max(22px, env(safe-area-inset-top))
        18px
        max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fbfaff;
    box-shadow: -18px 0 48px rgba(35, 28, 72, .20);
    transform: translateX(105%);
    visibility: hidden;
    transition:
        transform .24s ease,
        visibility .24s ease;
}

.category-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

body.category-menu-open {
    overflow: hidden;
}

.category-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.category-drawer-eyebrow {
    color: var(--primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.category-drawer-head h2 {
    margin: 4px 0 0;
    color: #1e1b2e;
    font-size: 1.65rem;
    line-height: 1.1;
}

.category-drawer-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0 0 3px;
    border: 0;
    border-radius: 13px;
    background: var(--primary-soft);
    color: var(--primary);
    font: inherit;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.category-drawer-nav {
    display: grid;
    gap: 8px;
}

.category-drawer-home,
.category-drawer-link {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #ece9f3;
    border-radius: 16px;
    background: white;
    color: #1e1b2e;
    text-decoration: none;
    font-weight: 700;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.category-drawer-home {
    justify-content: space-between;
    margin-bottom: 5px;
    background:
        linear-gradient(
            135deg,
            var(--primary-soft),
            #faf8ff
        );
    color: var(--primary);
}

.category-drawer-link:hover,
.category-drawer-home:hover {
    transform: translateX(-2px);
    border-color: rgba(113, 55, 216, .26);
}

.category-drawer-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            var(--primary-soft),
            #faf8ff
        );
    color: var(--primary);
}

.category-drawer-icon img {
    width: 25px;
    height: 25px;
    display: block;
    object-fit: contain;
}

.category-drawer-chevron {
    margin-left: auto;
    color: #9c91b4;
    font-size: 1.35rem;
}


/* Shared bright-dark footer */
.site-footer {
    margin-top: 46px;
    padding:
        30px 22px
        max(22px, env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
    background:
        linear-gradient(
            145deg,
            var(--jsx-shell),
            var(--jsx-shell-bright)
        );
    color: white;
    box-shadow: 0 -10px 30px rgba(42, 32, 91, .10);
}

.site-footer-inner {
    color: white;
}

.footer-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
}

.footer-brand-mark {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
}

.footer-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.footer-brand-title {
    color: white;
    font-size: 1.12rem;
    font-weight: 800;
}

.footer-brand-title strong {
    color: #b899ff;
}

.footer-brand-tagline {
    margin-top: 4px;
    color: var(--jsx-shell-muted);
    font-size: .72rem;
}

.site-footer .footer-brand-desc {
    color: var(--jsx-shell-muted);
}

.site-footer .footer-heading {
    color: white;
}

.site-footer .footer-nav a {
    color: #eeeafd;
}

.site-footer .footer-nav a:hover,
.site-footer .footer-nav a:focus {
    color: #ffca63;
}

.footer-bottom {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.17);
    color: var(--jsx-shell-muted);
    text-align: center;
    font-size: .82rem;
}


/* Desktop drawer remains intentionally compact. */
@media (min-width: 760px) {
    .shell-header {
        padding: 18px 22px;
    }

    .shell-brand-mark {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .shell-brand-name {
        font-size: 1.32rem;
    }

    .shell-brand-tagline {
        font-size: .78rem;
    }
}


/* Small phones */
@media (max-width: 390px) {
    .shell-header {
        padding-inline: 14px;
    }

    .shell-brand-mark {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .shell-brand-name {
        font-size: 1.05rem;
    }

    .shell-brand-tagline {
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-menu-toggle {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}

/* ==========================================================================
   PATCH 7C1B — FULL-BLEED HEADER/FOOTER REFINEMENT
   Match preview closer: no rounded shell, full-width, attach to edges.
   ========================================================================== */

.shell-header,
.site-footer {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Header should attach to the very top and span full width */
.shell-header {
    margin-top: -18px;
    margin-bottom: 22px;
    padding:
        max(18px, calc(env(safe-area-inset-top) + 10px))
        24px
        18px;
    background:
        linear-gradient(
            135deg,
            #2d2758 0%,
            #3a3270 55%,
            #443b7e 100%
        );
}

/* Footer should feel like a full-width closing section */
.site-footer {
    margin-top: 42px;
    margin-bottom: -18px;
    padding:
        30px
        24px
        max(22px, calc(env(safe-area-inset-bottom) + 18px));
    background:
        linear-gradient(
            180deg,
            #26214f 0%,
            #2e285b 45%,
            #332d63 100%
        );
}

/* Make footer content look more like a clean strip */
.site-footer-inner {
    max-width: 100%;
}

.footer-bottom {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.14);
}

/* Home header content spacing closer to preview */
.shell-brand-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
}

.shell-brand-name {
    font-size: 1.2rem;
}

.shell-brand-tagline {
    font-size: .76rem;
}

/* Reduce boxed-card feeling on the menu button */
.category-menu-toggle {
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
}

/* Small screens */
@media (max-width: 390px) {
    .shell-header {
        margin-top: -16px;
        padding-inline: 18px;
    }

    .site-footer {
        margin-bottom: -16px;
        padding-inline: 18px;
    }
}

/* ==========================================================================
   PATCH 7C5 + 7C6 — HERO CAROUSEL 5:4
   Fixed canvas / swipe / arrows / dots / autoplay.
   ========================================================================== */

.hero.hero-carousel {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    touch-action: pan-y;
    background: #6f32d3;
}

.hero-carousel-track {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(150px, .92fr);
    align-items: center;
    gap: clamp(12px, 3vw, 34px);
    padding:
        clamp(28px, 5vw, 52px)
        clamp(30px, 6vw, 64px)
        clamp(48px, 7vw, 70px);
    opacity: 0;
    visibility: hidden;
    transform: translateX(3%);
    pointer-events: none;
    transition:
        opacity .42s ease,
        transform .42s ease,
        visibility .42s ease;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.hero-slide-1 {
    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(255,255,255,.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #5b24bd 0%,
            #7137d8 48%,
            #9355ef 100%
        );
}

.hero-slide-2 {
    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(255,190,53,.24),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #4820a2 0%,
            #6b32cf 48%,
            #8b4ce7 100%
        );
}

.hero-slide-3 {
    background:
        radial-gradient(
            circle at 78% 26%,
            rgba(255,255,255,.2),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #6026bb 0%,
            #7b3dd9 50%,
            #a05cf0 100%
        );
}

.hero-slide-copy {
    position: relative;
    z-index: 4;
    min-width: 0;
}

.hero-slide .hero-badge {
    padding: 7px 13px;
    background: rgba(255,255,255,.17);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
}

.hero-slide-title,
.hero.hero-carousel h1,
.hero.hero-carousel h2 {
    max-width: 560px;
    margin: 15px 0 12px;
    color: #fff;
    font-size: clamp(1.8rem, 4.7vw, 3.35rem);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.hero.hero-carousel h2 {
    font-weight: 800;
}

.hero-slide p {
    max-width: 470px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: clamp(.88rem, 1.8vw, 1.08rem);
    line-height: 1.48;
}

.hero-slide .hero-button {
    margin-top: 22px;
    padding: 12px 19px;
    border-radius: 13px;
    box-shadow: 0 8px 25px rgba(38,15,85,.16);
}


/* ---------- Slide 1 artwork ---------- */

.hero-device-art {
    position: relative;
    z-index: 2;
    width: min(100%, 300px);
    aspect-ratio: 1 / 1.06;
    justify-self: center;
}

.hero-device-glow {
    position: absolute;
    width: 88%;
    aspect-ratio: 1;
    top: 5%;
    left: 8%;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    filter: blur(34px);
}

.hero-device {
    position: absolute;
    width: 54%;
    aspect-ratio: .62;
    top: 11%;
    left: 25%;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255,255,255,.22);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.2),
            rgba(70,22,157,.35)
        );
    box-shadow:
        0 28px 40px rgba(45,15,101,.28),
        inset 0 1px 0 rgba(255,255,255,.25);
    transform: rotate(5deg);
}

.hero-device img {
    width: 56%;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(37,14,75,.18));
}

.hero-floating-chip {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    min-width: 68px;
    min-height: 54px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 18px;
    background: rgba(117,57,220,.8);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    box-shadow: 0 15px 28px rgba(40,14,91,.25);
    backdrop-filter: blur(10px);
}

.hero-floating-chip-a {
    top: 14%;
    left: 1%;
    transform: rotate(-8deg);
}

.hero-floating-chip-b {
    bottom: 13%;
    left: 2%;
    transform: rotate(6deg);
}

.hero-floating-chip-c {
    right: 0;
    bottom: 20%;
    transform: rotate(7deg);
}


/* ---------- Slide 2 artwork ---------- */

.hero-speed-art {
    position: relative;
    width: min(100%, 280px);
    aspect-ratio: 1;
    justify-self: center;
}

.hero-speed-icon {
    position: absolute;
    z-index: 3;
    inset: 26%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 32%;
    background: rgba(255,255,255,.16);
    box-shadow: 0 24px 45px rgba(42,16,90,.27);
    backdrop-filter: blur(12px);
    transform: rotate(7deg);
}

.hero-speed-icon img {
    width: 52%;
    height: 52%;
    object-fit: contain;
}

.hero-speed-orbit {
    position: absolute;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
}

.hero-speed-orbit-1 {
    inset: 10%;
}

.hero-speed-orbit-2 {
    inset: 22%;
    border-style: dashed;
}


/* ---------- Slide 3 artwork ---------- */

.hero-category-art {
    position: relative;
    width: min(100%, 280px);
    aspect-ratio: 1;
    justify-self: center;
}

.hero-category-tile {
    position: absolute;
    width: 57%;
    min-height: 31%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    background: rgba(255,255,255,.14);
    color: #fff;
    box-shadow: 0 20px 32px rgba(39,14,84,.2);
    backdrop-filter: blur(10px);
}

.hero-category-tile strong {
    font-size: 1rem;
}

.hero-category-tile span {
    margin-top: 4px;
    color: rgba(255,255,255,.7);
    font-size: .72rem;
}

.hero-category-tile-1 {
    top: 5%;
    left: 8%;
    transform: rotate(-7deg);
}

.hero-category-tile-2 {
    top: 36%;
    right: 1%;
    transform: rotate(6deg);
}

.hero-category-tile-3 {
    bottom: 3%;
    left: 13%;
    transform: rotate(-2deg);
}


/* ---------- Controls ---------- */

.hero-carousel-arrow {
    position: absolute;
    z-index: 10;
    top: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font: inherit;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(7px);
    transform: translateY(-50%);
    transition:
        background .18s ease,
        transform .18s ease;
}

.hero-carousel-arrow:hover {
    background: rgba(255,255,255,.22);
}

.hero-carousel-prev {
    left: 13px;
}

.hero-carousel-next {
    right: 13px;
}

.hero-carousel-dots {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    transform: translateX(-50%);
}

.hero-carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    cursor: pointer;
    transition:
        width .22s ease,
        background .22s ease;
}

.hero-carousel-dot.is-active {
    width: 24px;
    background: #fff;
}


/* ---------- Mobile ---------- */

@media (max-width: 600px) {

    .hero.hero-carousel {
        min-height: 0;
        padding: 0;
    }

    .hero-slide {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(76px, .48fr);
        gap: 4px;
        padding:
            22px
            24px
            43px;
    }

    .hero-slide-title,
    .hero.hero-carousel h1,
    .hero.hero-carousel h2 {
        margin: 10px 0 8px;
        font-size: clamp(1.45rem, 6.7vw, 2.05rem);
        line-height: 1.04;
    }

    .hero-slide p {
        font-size: clamp(.75rem, 3.4vw, .9rem);
        line-height: 1.38;
    }

    .hero-slide .hero-badge {
        padding: 5px 9px;
        font-size: .65rem;
    }

    .hero-slide .hero-button {
        margin-top: 13px;
        padding: 9px 13px;
        border-radius: 10px;
        font-size: .82rem;
    }

    .hero-device-art,
    .hero-speed-art,
    .hero-category-art {
        width: 125px;
        transform: translateX(8px);
    }

    .hero-device {
        border-radius: 18px;
    }

    .hero-floating-chip {
        min-width: 43px;
        min-height: 34px;
        padding: 5px 7px;
        border-radius: 11px;
        font-size: .52rem;
    }

    .hero-category-tile {
        padding: 8px;
        border-radius: 12px;
    }

    .hero-category-tile strong {
        font-size: .68rem;
    }

    .hero-category-tile span {
        font-size: .52rem;
    }

    .hero-speed-icon {
        border-radius: 24%;
    }

    .hero-carousel-arrow {
        width: 31px;
        height: 31px;
        font-size: 1.35rem;
    }

    .hero-carousel-prev {
        left: 7px;
    }

    .hero-carousel-next {
        right: 7px;
    }

    .hero-carousel-dots {
        bottom: 14px;
        gap: 6px;
    }

    .hero-carousel-dot {
        width: 7px;
        height: 7px;
    }

    .hero-carousel-dot.is-active {
        width: 18px;
    }
}

@media (max-width: 380px) {

    .hero-slide {
        grid-template-columns:
            minmax(0, 1fr)
            72px;
        padding:
            18px
            20px
            39px;
    }

    .hero-device-art,
    .hero-speed-art,
    .hero-category-art {
        width: 105px;
    }

    .hero-slide-title,
    .hero.hero-carousel h1,
    .hero.hero-carousel h2 {
        font-size: 1.38rem;
    }
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .hero-slide,
    .hero-carousel-dot,
    .hero-carousel-arrow {
        transition: none;
    }
}

/* ==========================================================================
   PATCH 7C5B — IMAGE HERO OVERRIDE
   Hero artwork is now supplied by 1200x960 / 5:4 runtime images.
   ========================================================================== */

.hero.hero-carousel.hero-carousel-image {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #7137d8;
}

.hero-carousel-image .hero-carousel-track {
    position: absolute;
    inset: 0;
}

.hero-carousel-image .hero-image-slide {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    background: transparent;
}

.hero-carousel-image .hero-slide-link {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-carousel-image .hero-slide-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

/*
 * Keep controls readable over any future banner artwork.
 */
.hero-carousel-image .hero-carousel-arrow {
    background: rgba(26, 19, 55, .28);
    border-color: rgba(255,255,255,.35);
    box-shadow: 0 4px 18px rgba(16, 10, 36, .16);
}

.hero-carousel-image .hero-carousel-dot {
    box-shadow: 0 1px 5px rgba(20, 12, 42, .3);
}

@media (max-width: 600px) {
    .hero.hero-carousel.hero-carousel-image {
        aspect-ratio: 5 / 4;
        padding: 0;
    }

    .hero-carousel-image .hero-image-slide {
        padding: 0;
    }
}

/* ==========================================================================
   PATCH 7C7 — MOBILE PRODUCT POLISH
   Compact, consistent product cards for mobile storefront.
   Presentation only.
   ========================================================================== */

@media (max-width: 600px) {

    /* ======================================================
       HOME — PRODUCT GRID
       ====================================================== */

    .product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .product-card {
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 9px;
        border-radius: 15px;
        overflow: hidden;
    }

    .product-image {
        flex: 0 0 auto;
        aspect-ratio: 16 / 10;
        margin-bottom: 9px;
        border-radius: 11px;
        overflow: hidden;
    }

    .product-image .brand-logo-image {
        width: auto;
        max-width: 72%;
        height: auto;
        max-height: 62%;
        object-fit: contain;
    }

    .product-image > span {
        width: 45px;
        height: 45px;
        border-radius: 14px;
        font-size: 1.15rem;
    }

    .product-category,
    .product-brand {
        overflow: hidden;
        font-size: .66rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-name {
        min-height: 38px;
        display: -webkit-box;
        margin: 4px 0 0;
        overflow: hidden;
        font-size: .78rem;
        font-weight: 750;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .product-price {
        margin-top: auto;
        padding-top: 8px;
        font-size: .88rem;
        line-height: 1.2;
    }


    /* ======================================================
       CATEGORY — PRODUCT GRID
       ====================================================== */

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

    .category-product-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 15px;
    }

    .category-product-image {
        flex: 0 0 auto;
        aspect-ratio: 16 / 10;
        margin: 8px 8px 0;
        border-radius: 12px;
        overflow: hidden;
    }

    .category-product-image .brand-logo-image {
        width: auto;
        max-width: 72%;
        height: auto;
        max-height: 62%;
        object-fit: contain;
    }

    .category-product-image > span {
        width: 45px;
        height: 45px;
        border-radius: 14px;
        font-size: 1.1rem;
    }

    .category-product-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 9px;
    }

    .category-product-brand {
        font-size: .62rem;
        line-height: 1.25;
    }

    .category-product-name {
        min-height: 38px;
        margin-top: 4px;
        font-size: .74rem;
        line-height: 1.35;
    }

    .category-product-footer {
        margin-top: auto;
        padding-top: 9px;
        gap: 5px;
    }

    .category-product-footer strong {
        min-width: 0;
        overflow: hidden;
        font-size: .82rem;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .category-product-footer span {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        font-size: .95rem;
    }


    /* ======================================================
       MOBILE TOUCH BEHAVIOUR
       ====================================================== */

    .product-card,
    .category-product-card {
        -webkit-tap-highlight-color: transparent;
    }
}


/* Phones with narrower viewport */
@media (max-width: 380px) {

    .product-grid,
    .category-product-grid {
        gap: 8px;
    }

    .product-card {
        padding: 8px;
    }

    .category-product-image {
        margin: 7px 7px 0;
    }

    .category-product-content {
        padding: 8px;
    }

    .product-name,
    .category-product-name {
        font-size: .72rem;
    }

    .product-price,
    .category-product-footer strong {
        font-size: .79rem;
    }
}


/* Prevent desktop hover treatment from sticking on touch screens */
@media (hover: none) {

    .product-card:hover,
    .category-product-card:hover {
        transform: none;
        box-shadow: none;
    }

    .product-card:active,
    .category-product-card:active {
        transform: scale(.985);
    }
}

/* ==========================================================================
   PATCH 8A — CONTACT CAPTURE
   ========================================================================== */

.checkout-contact-help {
    margin: -2px 0 13px;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.5;
}

.checkout-contact-field {
    display: block;
}

.checkout-contact-field > span {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: .76rem;
    font-weight: 700;
}

.checkout-contact-input {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .82rem;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.checkout-contact-input::placeholder {
    color: var(--muted);
    opacity: .72;
}

.checkout-contact-input:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px
        rgba(113, 55, 216, .10);
}

.checkout-contact-input:invalid:not(:placeholder-shown) {
    border-color: rgba(190, 55, 55, .55);
}

@media (max-width: 600px) {
    .checkout-contact-input {
        min-height: 48px;
        font-size: 16px;
    }
}

/* ==========================================================================
   PATCH 8B1 — TRACK ORDER BY ORDER ID
   ========================================================================== */

.track-order-hero {
    margin-bottom: 22px;
    text-align: center;
}

.track-order-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: 0 auto 13px;
    border-radius: 20px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 1.8rem;
    font-weight: 900;
}

.track-order-hero h1 {
    margin: 0;
    font-size: 1.35rem;
}

.track-order-hero p {
    max-width: 350px;
    margin: 7px auto 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.55;
}

.track-order-form {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
}

.track-order-form label {
    display: block;
    margin-bottom: 7px;
    font-size: .75rem;
    font-weight: 800;
}

.track-order-form input {
    width: 100%;
    min-height: 48px;
    margin-bottom: 12px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .82rem;
    text-transform: uppercase;
}

.track-order-form input:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px
        rgba(113, 55, 216, .10);
}

.track-order-message {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--text);
    font-size: .76rem;
    line-height: 1.5;
}

.track-order-result {
    margin-top: 22px;
}

.track-order-result-heading {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 11px;
}

.track-order-result-label {
    color: var(--muted);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.track-order-result-heading strong {
    color: var(--primary);
    font-size: .95rem;
}

.track-order-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #faf8ff;
    color: var(--text);
    font-size: .74rem;
    line-height: 1.5;
}

.track-order-privacy {
    margin: 13px 2px 0;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .track-order-form input {
        font-size: 16px;
    }
}

/* ==========================================================================
   PATCH 8B2 — HEADER TRACK ORDER
   ========================================================================== */

.shell-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex: 0 0 auto;
}

.shell-track-order {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background .18s ease,
        border-color .18s ease;
}

.shell-track-order:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
}

.shell-track-order img {
    width: 17px;
    height: 17px;
    display: block;
    filter: brightness(0) invert(1);
}

.shell-track-order:focus-visible,
.category-menu-toggle:focus-visible {
    outline: 2px solid rgba(255,255,255,.85);
    outline-offset: 2px;
}

@media (max-width: 600px) {

    .shell-header {
        gap: 10px;
    }

    .shell-brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    .shell-header-actions {
        gap: 7px;
    }

    .shell-track-order {
        min-height: 40px;
        padding: 0 9px;
        gap: 6px;
        font-size: .69rem;
    }

    .shell-track-order img {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 380px) {

    .shell-track-order {
        padding-inline: 8px;
        font-size: .65rem;
    }

    .shell-brand-tagline {
        font-size: .68rem;
    }
}

/* ==========================================================================
   PATCH 8B2B — MOBILE HEADER POLISH
   Keep JSX Store + full tagline + Track Order + menu readable on mobile.
   ========================================================================== */

@media (max-width: 600px) {

    .shell-header {
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .shell-brand {
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .shell-brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .shell-brand-copy {
        min-width: 0;
    }

    .shell-brand-name {
        font-size: 1.05rem;
    }

    .shell-brand-tagline {
        margin-top: 4px;
        font-size: .62rem;
        letter-spacing: -.01em;
        white-space: nowrap;
    }

    .shell-header-actions {
        gap: 6px;
    }

    .shell-track-order {
        min-height: 40px;
        padding: 0 8px;
        gap: 5px;
        font-size: .66rem;
    }

    .shell-track-order img {
        width: 14px;
        height: 14px;
    }

    .category-menu-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
    }

    .category-menu-bars {
        width: 21px;
    }
}

@media (max-width: 380px) {

    .shell-header {
        padding-left: 10px;
        padding-right: 10px;
        gap: 6px;
    }

    .shell-brand {
        gap: 6px;
    }

    .shell-brand-mark {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .shell-brand-name {
        font-size: 1rem;
    }

    .shell-brand-tagline {
        font-size: .58rem;
    }

    .shell-track-order {
        padding-inline: 7px;
        font-size: .62rem;
    }

    .category-menu-toggle {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

/* ==========================================================================
   PATCH 8C2B — EMAIL OTP TRACK ORDER
   ========================================================================== */

.track-order-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
}

.track-order-divider::before,
.track-order-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border);
}

.track-email-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
}

.track-email-heading h2,
.track-history-heading h3 {
    margin: 0;
    font-size: .95rem;
}

.track-email-heading p,
.track-history-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.5;
}

.track-email-form {
    margin-top: 15px;
}

.track-email-form label {
    display: block;
    margin-bottom: 7px;
    font-size: .75rem;
    font-weight: 800;
}

.track-email-form input {
    width: 100%;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .82rem;
}

.track-email-form input:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px
        rgba(113, 55, 216, .10);
}

.track-otp-form {
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid var(--border);
}

.track-otp-form input {
    text-align: center;
    letter-spacing: .28em;
    font-size: 1.05rem;
    font-weight: 800;
}

.track-email-verified {
    margin-top: 4px;
    padding: 11px 13px;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
}

.track-history-heading {
    margin-top: 18px;
}

.track-history-list {
    display: grid;
    gap: 12px;
    margin-top: 13px;
}

.track-history-item {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #faf9fd;
}

.track-history-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--border);
}

.track-history-top strong {
    min-width: 0;
    font-size: .8rem;
    line-height: 1.35;
}

.track-history-top span {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: .65rem;
    font-weight: 800;
    text-align: right;
}

.track-history-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 4px 0;
    font-size: .69rem;
    line-height: 1.45;
}

.track-history-row span {
    color: var(--muted);
}

.track-history-row strong {
    text-align: right;
    overflow-wrap: anywhere;
}

.track-history-empty {
    margin-top: 13px;
    padding: 13px;
    border-radius: 12px;
    background: #faf9fd;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .track-email-form input {
        font-size: 16px;
    }

    .track-otp-form input {
        font-size: 18px;
    }
}