/* ============================================================
   TOWA Store Mobile Page
   用途：
   - C端扫码店铺页
   - /s/{storeSlug}
   - 独立 Layout：_StoreLayout.cshtml

   建议：
   - 店铺页使用 Layout = "_StoreLayout"
   - _StoreLayout 的 body class 使用：store-standalone-body
   - 主体 main class 使用：store-standalone-main
============================================================ */


/* ============================================================
   0. Design Tokens
============================================================ */

:root {
    --towa-text-main: #172033;
    --towa-text-strong: #0f172a;
    --towa-text-muted: #64748b;
    --towa-text-soft: #94a3b8;
    --towa-border: rgba(226, 232, 240, .82);
    --towa-card-bg: rgba(255, 255, 255, .9);
    --towa-blue: #2563eb;
    --towa-sky: #06b6d4;
    --towa-pink: #ec4899;
    --towa-orange: #f97316;
    --towa-red: #ef4444;
    --towa-green: #16a34a;
    --towa-shadow-soft: 0 12px 34px rgba(15, 23, 42, .06);
    --towa-shadow-card: 0 12px 28px rgba(15, 23, 42, .07);
    --towa-shadow-float: 0 18px 45px rgba(15, 23, 42, .18);
    --towa-radius-lg: 34px;
    --towa-radius-md: 26px;
    --towa-radius-sm: 18px;
}


/* ============================================================
   1. Standalone Layout
============================================================ */

html,
body {
    min-height: 100%;
}

.store-standalone-body {
    margin: 0;
    min-height: 100vh;
    color: var(--towa-text-main);
    background: radial-gradient(circle at 14% 0%, rgba(255, 228, 238, .95), transparent 34%), radial-gradient(circle at 88% 8%, rgba(219, 234, 254, .72), transparent 34%), linear-gradient(180deg, #fff7fb 0%, #ffffff 42%, #fff9fb 100%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "Hiragino Sans", sans-serif;
}

.store-standalone-main {
    min-height: 100vh;
}


/* ============================================================
   2. Page Shell
============================================================ */

.store-page {
    min-height: 100vh;
    color: var(--towa-text-main);
    background: transparent;
    padding: 24px 0;
}

.store-mobile-shell {
    width: 100%;
    max-width: 520px;
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 36px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 30px 90px rgba(236, 72, 153, .10), 0 18px 60px rgba(15, 23, 42, .08);
}


/* ============================================================
   3. Store Hero
============================================================ */

.store-hero {
    position: relative;
    height: 270px;
    overflow: hidden;
    background: #ffe4ec;
}

.store-cover {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: brightness(1.08) saturate(1.12);
}

.store-cover-placeholder {
    background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .55), transparent 24%), linear-gradient(135deg, #fecdd3, #bfdbfe 52%, #d9f99d);
}

.store-hero-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .28)), linear-gradient(90deg, rgba(255, 244, 248, .52), rgba(255, 255, 255, .08));
    pointer-events: none;
}

.store-header-card {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow: 0 18px 44px rgba(236, 72, 153, .12), 0 12px 28px rgba(15, 23, 42, .10);
    backdrop-filter: blur(18px);
}

.store-logo-wrap {
    flex: 0 0 auto;
}

.store-logo {
    width: 68px;
    height: 68px;
    display: block;
    border-radius: 22px;
    object-fit: cover;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.store-logo-placeholder {
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--towa-blue);
    background: linear-gradient(135deg, #ffffff, #dbeafe);
}

.store-title-area {
    min-width: 0;
}

.store-kicker,
.section-kicker {
    color: #ec4899;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.store-title-area h1 {
    margin: 3px 0 4px;
    color: var(--towa-text-strong);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
}

.store-title-area p {
    margin: 0;
    color: var(--towa-text-muted);
    font-size: .92rem;
    line-height: 1.45;
}


/* ============================================================
   4. Store Intro
============================================================ */

.store-intro-card {
    margin: 18px;
    padding: 20px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 247, 251, .92));
    border: 1px solid rgba(255, 228, 238, .9);
    box-shadow: 0 18px 48px rgba(236, 72, 153, .08), 0 10px 28px rgba(15, 23, 42, .04);
}

.store-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 12px;
}

    .store-info-row span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 7px 11px;
        border-radius: 999px;
        color: #db2777;
        background: #fff1f6;
        border: 1px solid rgba(251, 207, 232, .9);
        font-size: .78rem;
        font-weight: 850;
    }

.store-description {
    margin: 0;
    color: #475569;
    font-size: .94rem;
    line-height: 1.8;
}


/* ============================================================
   5. Sections
============================================================ */

.store-section {
    padding: 18px;
}

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

    .section-heading h2 {
        margin: 2px 0 0;
        color: var(--towa-text-strong);
        font-size: 1.25rem;
        font-weight: 900;
    }

.product-count {
    color: var(--towa-text-muted);
    font-size: .86rem;
    font-weight: 800;
}


/* ============================================================
   6. Categories
============================================================ */

.category-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

    .category-scroll::-webkit-scrollbar {
        display: none;
    }

.category-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    color: #334155;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(226, 232, 240, .9);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 800;
    white-space: nowrap;
}

    .category-chip span {
        color: var(--towa-text-soft);
        font-size: .78rem;
    }

    .category-chip.active {
        color: #ffffff;
        border-color: transparent;
        background: linear-gradient(135deg, #ec4899, #f97316);
        box-shadow: 0 12px 24px rgba(236, 72, 153, .24);
    }

        .category-chip.active span {
            color: rgba(255, 255, 255, .82);
        }


/* ============================================================
   7. Product List
============================================================ */

.product-section {
    padding-top: 8px;
}

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

.product-card {
    overflow: hidden;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(255, 228, 238, .86);
    box-shadow: 0 18px 42px rgba(236, 72, 153, .08), 0 10px 26px rgba(15, 23, 42, .05);
}

.product-image-link {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f1f5f9;
    text-decoration: none;
}

    .product-image-link img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .22s ease;
    }

.product-card:hover .product-image-link img {
    transform: scale(1.04);
}

.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--towa-text-soft);
    font-size: 2rem;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.sale-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #fb7185, #ec4899);
    font-size: .72rem;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(236, 72, 153, .26);
}

.product-body {
    padding: 12px;
}

    .product-body h3 {
        margin: 0;
        font-size: .95rem;
        font-weight: 900;
        line-height: 1.35;
    }

        .product-body h3 a {
            color: var(--towa-text-strong);
            text-decoration: none;
        }

    .product-body p {
        min-height: 34px;
        margin: 6px 0 0;
        color: var(--towa-text-muted);
        font-size: .8rem;
        line-height: 1.45;
    }

.product-meta {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.product-price {
    color: var(--towa-red);
    font-size: 1rem;
    font-weight: 950;
}

.product-origin-price {
    color: var(--towa-text-soft);
    font-size: .78rem;
    text-decoration: line-through;
}

.stock-label {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--towa-green);
    background: #ecfdf5;
    font-size: .72rem;
    font-weight: 800;
}

    .stock-label.soldout {
        color: var(--towa-text-muted);
        background: #f1f5f9;
    }


/* ============================================================
   8. Buttons
============================================================ */

.btn-add-cart {
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #fb7185 0%, #ec4899 52%, #f97316 100%);
    box-shadow: 0 12px 24px rgba(236, 72, 153, .24), inset 0 1px 0 rgba(255, 255, 255, .22);
    font-weight: 950;
    letter-spacing: .02em;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

    .btn-add-cart:active {
        transform: translateY(0);
        box-shadow: 0 8px 18px rgba(236, 72, 153, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .btn-add-cart:disabled {
        color: #ffffff;
        background: #cbd5e1;
        box-shadow: none;
    }


/* ============================================================
   9. Empty State
============================================================ */

.empty-products {
    padding: 48px 18px;
    text-align: center;
    color: var(--towa-text-muted);
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: var(--towa-radius-md);
}

    .empty-products i {
        color: var(--towa-text-soft);
        font-size: 2.2rem;
    }

    .empty-products h3 {
        margin: 12px 0 6px;
        color: #334155;
        font-size: 1.1rem;
        font-weight: 900;
    }

    .empty-products p {
        margin: 0;
    }


/* ============================================================
   10. Bottom Fixed Bar
============================================================ */

.store-bottom-space {
    height: 104px;
}

.store-bottom-bar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 50;
    width: min(500px, calc(100% - 24px));
    display: grid;
    grid-template-columns: 76px 1fr 1.25fr;
    gap: 10px;
    padding: 10px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(226, 232, 240, .86);
    box-shadow: var(--towa-shadow-float);
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

.bottom-action,
.bottom-cart,
.bottom-checkout {
    color: #ffffff;
    background: linear-gradient(135deg, #fb7185 0%, #ec4899 52%, #f97316 100%);
    box-shadow: 0 14px 28px rgba(236, 72, 153, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.bottom-action {
    flex-direction: column;
    gap: 2px;
    color: #334155;
    background: #f8fafc;
    font-size: .76rem;
}

    .bottom-action i {
        font-size: 1.1rem;
    }

.bottom-cart {
    gap: 7px;
    color: var(--towa-blue);
    background: #eff6ff;
}

    .bottom-cart em {
        min-width: 22px;
        height: 22px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        color: #ffffff;
        background: var(--towa-red);
        font-size: .75rem;
        font-style: normal;
    }

.bottom-checkout {
    color: #ffffff;
    background: linear-gradient(135deg, var(--towa-orange), var(--towa-pink));
    box-shadow: 0 12px 22px rgba(236, 72, 153, .22);
}


/* ============================================================
   11. Responsive
============================================================ */

@media (max-width: 575.98px) {
    .store-page {
        padding: 0;
    }

    .store-mobile-shell {
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    .store-hero {
        height: 250px;
    }

    .store-bottom-bar {
        bottom: calc(10px + env(safe-area-inset-bottom));
        width: calc(100% - 20px);
    }
}

@media (max-width: 374.98px) {
    .store-header-card {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 14px;
    }

    .store-logo {
        width: 60px;
        height: 60px;
        border-radius: 20px;
    }

    .store-title-area h1 {
        font-size: 1.2rem;
    }

    .product-grid {
        gap: 12px;
    }

    .store-bottom-bar {
        grid-template-columns: 68px 1fr 1.1fr;
        gap: 8px;
        padding: 8px;
    }
}
/* ============================================================
   Product Detail Page
   URL: /p/{productId}
============================================================ */

.product-detail-shell {
    background: rgba(255, 255, 255, .96);
}

.product-detail-hero {
    position: relative;
    height: 390px;
    overflow: hidden;
    background: radial-gradient(circle at 12% 0%, rgba(255, 228, 238, .88), transparent 32%), linear-gradient(135deg, #fff1f6, #eff6ff);
}

.product-detail-topbar {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    left: 14px;
    right: 14px;
    z-index: 5;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
}

.product-back-link,
.product-cart-link {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #0f172a;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
    text-decoration: none;
    backdrop-filter: blur(14px);
}

.product-cart-link {
    position: relative;
}

    .product-cart-link em {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 20px;
        height: 20px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        color: #ffffff;
        background: #ef4444;
        font-size: .7rem;
        font-style: normal;
        font-weight: 900;
    }

.product-top-title {
    justify-self: center;
    padding: 10px 18px;
    border-radius: 999px;
    color: #334155;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .9);
    font-size: .88rem;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    backdrop-filter: blur(14px);
}

.product-detail-main-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: brightness(1.04) saturate(1.08);
}

.product-detail-image-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-size: 3rem;
    background: linear-gradient(135deg, #fff1f6, #dbeafe);
}

.product-detail-sale-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 4;
    padding: 7px 13px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #fb7185, #ec4899);
    font-size: .8rem;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(236, 72, 153, .28);
}

.product-thumb-section {
    padding: 14px 18px 0;
    background: #ffffff;
}

.product-thumb-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

    .product-thumb-scroll::-webkit-scrollbar {
        display: none;
    }

.product-thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    overflow: hidden;
    padding: 0;
    border-radius: 18px;
    border: 2px solid transparent;
    background: #f8fafc;
}

    .product-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-thumb.active {
        border-color: #ec4899;
        box-shadow: 0 10px 24px rgba(236, 72, 153, .18);
    }

.product-detail-card {
    margin: 18px;
    padding: 20px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 247, 251, .94));
    border: 1px solid rgba(255, 228, 238, .9);
    box-shadow: 0 18px 48px rgba(236, 72, 153, .08), 0 10px 28px rgba(15, 23, 42, .04);
}

.product-store-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

    .product-store-mini img,
    .product-store-logo-placeholder {
        width: 44px;
        height: 44px;
        border-radius: 16px;
        object-fit: cover;
        flex: 0 0 auto;
    }

.product-store-logo-placeholder {
    display: grid;
    place-items: center;
    color: #ec4899;
    background: #fff1f6;
    font-weight: 950;
}

.product-store-name {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 950;
}

.product-store-subtitle {
    color: #64748b;
    font-size: .78rem;
    margin-top: 2px;
}

.product-detail-kicker {
    color: #ec4899;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.product-detail-title {
    margin: 0;
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.28;
    font-weight: 950;
}

.product-detail-subtitle {
    margin: 10px 0 0;
    color: #64748b;
    font-size: .95rem;
    line-height: 1.65;
}

.product-detail-price-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
}

.product-detail-price {
    color: #ef4444;
    font-size: 1.75rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.product-detail-origin-price {
    color: #94a3b8;
    font-size: .9rem;
    text-decoration: line-through;
    margin-top: 2px;
}

.product-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

    .product-detail-meta span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 7px 10px;
        border-radius: 999px;
        color: #db2777;
        background: #fff1f6;
        border: 1px solid rgba(251, 207, 232, .9);
        font-size: .78rem;
        font-weight: 850;
    }

.product-section-title {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 950;
    margin-bottom: 14px;
}

.quantity-control {
    width: 168px;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.quantity-btn {
    width: 44px;
    height: 44px;
    border: 0;
    color: #334155;
    background: transparent;
    font-weight: 900;
}

.quantity-input {
    width: 100%;
    height: 44px;
    border: 0;
    text-align: center;
    background: transparent;
    color: #0f172a;
    font-weight: 950;
}

    .quantity-input:focus {
        outline: none;
    }

.product-detail-description {
    margin: 0;
    color: #475569;
    font-size: .95rem;
    line-height: 1.9;
    white-space: pre-line;
}

.product-notice-card {
    display: flex;
    gap: 12px;
    margin: 18px;
    padding: 18px;
    border-radius: 26px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.product-notice-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    color: #f97316;
    background: #ffedd5;
}

.product-notice-title {
    color: #9a3412;
    font-weight: 950;
    margin-bottom: 4px;
}

.product-notice-card p {
    margin: 0;
    color: #9a3412;
    font-size: .86rem;
    line-height: 1.7;
}

.product-detail-bottom-bar {
    grid-template-columns: 76px 1.1fr 1.1fr;
}

.product-bottom-add {
    border: 0;
    color: #2563eb;
    background: #eff6ff;
}

    .product-bottom-add:disabled,
    .bottom-checkout:disabled {
        color: #ffffff;
        background: #cbd5e1;
        box-shadow: none;
    }

@media (max-width: 575.98px) {
    .product-detail-hero {
        height: 360px;
    }

    .product-detail-title {
        font-size: 1.42rem;
    }

    .product-detail-price {
        font-size: 1.55rem;
    }
}

@media (max-width: 374.98px) {
    .product-detail-bottom-bar {
        grid-template-columns: 66px 1fr 1fr;
    }

    .product-bottom-add,
    .bottom-checkout {
        font-size: .86rem;
    }

    .product-detail-hero {
        height: 330px;
    }
}
/* ============================================================
   Cart Page
   URL: /cart?store={storeSlug}
============================================================ */

.cart-shell {
    background: rgba(255, 255, 255, .96);
}

.cart-header {
    position: relative;
    padding: 18px;
    background: radial-gradient(circle at 14% 0%, rgba(255, 228, 238, .95), transparent 34%), radial-gradient(circle at 92% 12%, rgba(219, 234, 254, .78), transparent 32%), linear-gradient(180deg, #fff7fb 0%, #ffffff 100%);
}

.cart-topbar {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.cart-back-link,
.cart-top-clear {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #0f172a;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    text-decoration: none;
    backdrop-filter: blur(14px);
}

.cart-top-clear {
    border: 0;
}

.cart-top-title {
    justify-self: center;
    padding: 10px 18px;
    border-radius: 999px;
    color: #334155;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .9);
    font-size: .9rem;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    backdrop-filter: blur(14px);
}

.cart-store-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 228, 238, .92);
    box-shadow: 0 18px 48px rgba(236, 72, 153, .08), 0 10px 28px rgba(15, 23, 42, .04);
}

    .cart-store-card img,
    .cart-store-logo-placeholder {
        width: 62px;
        height: 62px;
        border-radius: 22px;
        object-fit: cover;
        flex: 0 0 auto;
    }

.cart-store-logo-placeholder {
    display: grid;
    place-items: center;
    color: #ec4899;
    background: #fff1f6;
    font-size: 1.35rem;
    font-weight: 950;
}

.cart-store-kicker {
    color: #ec4899;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cart-store-card h1 {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 950;
    line-height: 1.25;
}

.cart-store-card p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.45;
}

.cart-content {
    padding: 18px;
}

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

    .cart-section-heading h2 {
        margin: 2px 0 0;
        color: #0f172a;
        font-size: 1.25rem;
        font-weight: 950;
    }

.cart-item-count {
    color: #64748b;
    font-size: .86rem;
    font-weight: 850;
}

.cart-items {
    display: grid;
    gap: 14px;
}

.cart-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 12px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(255, 228, 238, .86);
    box-shadow: 0 18px 42px rgba(236, 72, 153, .08), 0 10px 26px rgba(15, 23, 42, .05);
}

.cart-item-image {
    display: block;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 22px;
    background: #f8fafc;
    text-decoration: none;
}

    .cart-item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.cart-item-image-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-size: 1.8rem;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.cart-item-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-item-main h3 {
    margin: 0;
    font-size: .98rem;
    line-height: 1.35;
    font-weight: 950;
}

    .cart-item-main h3 a {
        color: #0f172a;
        text-decoration: none;
    }

.cart-item-price {
    margin-top: 6px;
    color: #ef4444;
    font-size: 1.05rem;
    font-weight: 950;
}

.cart-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.cart-quantity-control {
    display: grid;
    grid-template-columns: 30px 34px 30px;
    align-items: center;
    overflow: hidden;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.cart-qty-btn {
    width: 30px;
    height: 30px;
    border: 0;
    color: #334155;
    background: transparent;
    display: grid;
    place-items: center;
}

.cart-qty-value {
    text-align: center;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 950;
}

.cart-remove-btn {
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: .82rem;
    font-weight: 850;
}

    .cart-remove-btn:hover {
        color: #ef4444;
    }

.cart-summary-card {
    margin-top: 18px;
    padding: 20px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 247, 251, .94));
    border: 1px solid rgba(255, 228, 238, .9);
    box-shadow: 0 18px 48px rgba(236, 72, 153, .08), 0 10px 28px rgba(15, 23, 42, .04);
}

.cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    color: #64748b;
    font-size: .94rem;
}

    .cart-summary-row strong {
        color: #0f172a;
        font-size: 1rem;
    }

    .cart-summary-row em {
        color: #94a3b8;
        font-style: normal;
        font-weight: 800;
    }

    .cart-summary-row.total {
        margin-top: 8px;
        padding-top: 16px;
        border-top: 1px dashed #e2e8f0;
        color: #0f172a;
        font-weight: 950;
    }

        .cart-summary-row.total strong {
            color: #ef4444;
            font-size: 1.45rem;
            font-weight: 950;
        }

.cart-summary-note {
    margin: 12px 0 0;
    color: #94a3b8;
    font-size: .8rem;
    line-height: 1.6;
}

.cart-notice-card {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding: 18px;
    border-radius: 26px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.cart-notice-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    color: #f97316;
    background: #ffedd5;
}

.cart-notice-title {
    color: #9a3412;
    font-weight: 950;
    margin-bottom: 4px;
}

.cart-notice-card p {
    margin: 0;
    color: #9a3412;
    font-size: .86rem;
    line-height: 1.7;
}

.cart-empty-card {
    margin: 18px;
    padding: 42px 22px;
    border-radius: 30px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #fbcfe8;
    box-shadow: 0 18px 48px rgba(236, 72, 153, .08), 0 10px 28px rgba(15, 23, 42, .04);
}

.cart-empty-icon {
    width: 76px;
    height: 76px;
    display: inline-grid;
    place-items: center;
    border-radius: 26px;
    color: #ec4899;
    background: #fff1f6;
    font-size: 2.2rem;
    margin-bottom: 18px;
}

.cart-empty-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 950;
}

.cart-empty-card p {
    margin: 12px auto 22px;
    max-width: 360px;
    color: #64748b;
    font-size: .94rem;
    line-height: 1.75;
}

.btn-cart-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #fb7185 0%, #ec4899 52%, #f97316 100%);
    box-shadow: 0 14px 28px rgba(236, 72, 153, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
    text-decoration: none;
    font-weight: 950;
}

.cart-bottom-bar {
    grid-template-columns: 76px 1fr 1.2fr;
}

.cart-bottom-clear {
    border: 0;
    color: #64748b;
    background: #f8fafc;
}

.bottom-checkout.disabled {
    pointer-events: none;
    color: #ffffff;
    background: #cbd5e1;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .cart-header {
        padding-top: calc(16px + env(safe-area-inset-top));
    }

    .cart-item {
        grid-template-columns: 88px 1fr;
    }

    .cart-item-image {
        width: 88px;
        height: 88px;
    }
}

@media (max-width: 374.98px) {
    .cart-store-card {
        padding: 15px;
    }

        .cart-store-card img,
        .cart-store-logo-placeholder {
            width: 54px;
            height: 54px;
            border-radius: 19px;
        }

    .cart-item {
        grid-template-columns: 82px 1fr;
        gap: 12px;
    }

    .cart-item-image {
        width: 82px;
        height: 82px;
    }

    .cart-bottom-bar {
        grid-template-columns: 66px 1fr 1.1fr;
    }

    .cart-bottom-clear,
    .bottom-checkout {
        font-size: .86rem;
    }
}
/* ============================================================
   Checkout Page
   URL: /checkout?store={storeSlug}
============================================================ */

.checkout-shell {
    background: rgba(255, 255, 255, .96);
}

.checkout-header {
    position: relative;
    padding: 18px;
    background: radial-gradient(circle at 14% 0%, rgba(255, 228, 238, .95), transparent 34%), radial-gradient(circle at 92% 12%, rgba(219, 234, 254, .78), transparent 32%), linear-gradient(180deg, #fff7fb 0%, #ffffff 100%);
}

.checkout-topbar {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.checkout-back-link,
.checkout-shop-link {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #0f172a;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    text-decoration: none;
    backdrop-filter: blur(14px);
}

.checkout-top-title {
    justify-self: center;
    padding: 10px 18px;
    border-radius: 999px;
    color: #334155;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .9);
    font-size: .9rem;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    backdrop-filter: blur(14px);
}

.checkout-store-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 228, 238, .92);
    box-shadow: 0 18px 48px rgba(236, 72, 153, .08), 0 10px 28px rgba(15, 23, 42, .04);
}

    .checkout-store-card img,
    .checkout-store-logo-placeholder {
        width: 62px;
        height: 62px;
        border-radius: 22px;
        object-fit: cover;
        flex: 0 0 auto;
    }

.checkout-store-logo-placeholder {
    display: grid;
    place-items: center;
    color: #ec4899;
    background: #fff1f6;
    font-size: 1.35rem;
    font-weight: 950;
}

.checkout-store-kicker {
    color: #ec4899;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.checkout-store-card h1 {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 950;
    line-height: 1.25;
}

.checkout-store-card p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.45;
}

.checkout-content {
    padding: 18px;
}

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

    .checkout-section-heading h2 {
        margin: 2px 0 0;
        color: #0f172a;
        font-size: 1.25rem;
        font-weight: 950;
    }

    .checkout-section-heading span {
        color: #64748b;
        font-size: .86rem;
        font-weight: 850;
    }

.checkout-items {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.checkout-item {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 12px;
    padding: 12px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(255, 228, 238, .86);
    box-shadow: 0 14px 34px rgba(236, 72, 153, .06), 0 8px 22px rgba(15, 23, 42, .04);
}

.checkout-item-image {
    width: 74px;
    height: 74px;
    overflow: hidden;
    border-radius: 20px;
    background: #f8fafc;
    text-decoration: none;
}

    .checkout-item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.checkout-item-image-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-size: 1.6rem;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.checkout-item-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .checkout-item-body h3 {
        margin: 0;
        color: #0f172a;
        font-size: .95rem;
        line-height: 1.35;
        font-weight: 950;
    }

.checkout-item-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

    .checkout-item-meta span {
        color: #ef4444;
        font-weight: 950;
    }

    .checkout-item-meta em {
        color: #64748b;
        font-style: normal;
        font-weight: 850;
    }

.checkout-card {
    margin-top: 18px;
    padding: 20px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 247, 251, .94));
    border: 1px solid rgba(255, 228, 238, .9);
    box-shadow: 0 18px 48px rgba(236, 72, 153, .08), 0 10px 28px rgba(15, 23, 42, .04);
}

.checkout-card-title {
    margin-bottom: 14px;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.checkout-field {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

    .checkout-field label {
        color: #334155;
        font-size: .88rem;
        font-weight: 850;
    }

        .checkout-field label span {
            color: #ef4444;
        }

    .checkout-field input,
    .checkout-field select,
    .checkout-field textarea {
        width: 100%;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 12px 14px;
        color: #0f172a;
        background: #ffffff;
        font-size: .95rem;
    }

        .checkout-field input:focus,
        .checkout-field select:focus,
        .checkout-field textarea:focus {
            outline: none;
            border-color: #ec4899;
            box-shadow: 0 0 0 4px rgba(236, 72, 153, .10);
        }

.checkout-field-note {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: .8rem;
    line-height: 1.6;
}

.checkout-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    color: #64748b;
    font-size: .94rem;
}

    .checkout-summary-row strong {
        color: #0f172a;
    }

    .checkout-summary-row em {
        color: #94a3b8;
        font-style: normal;
        font-weight: 850;
    }

    .checkout-summary-row.total {
        margin-top: 8px;
        padding-top: 16px;
        border-top: 1px dashed #e2e8f0;
        color: #0f172a;
        font-weight: 950;
    }

        .checkout-summary-row.total strong {
            color: #ef4444;
            font-size: 1.45rem;
            font-weight: 950;
        }

.checkout-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #475569;
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

    .checkout-check input {
        margin-top: 5px;
    }

.checkout-submit-main {
    width: 100%;
    min-height: 54px;
    margin-top: 18px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #fb7185 0%, #ec4899 52%, #f97316 100%);
    box-shadow: 0 14px 28px rgba(236, 72, 153, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
    font-size: 1rem;
    font-weight: 950;
}

    .checkout-submit-main:disabled {
        background: #cbd5e1;
        box-shadow: none;
    }

.checkout-error {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
    font-size: .9rem;
    font-weight: 850;
}

.checkout-empty-card,
.checkout-success-card {
    margin: 18px;
    padding: 42px 22px;
    border-radius: 30px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #fbcfe8;
    box-shadow: 0 18px 48px rgba(236, 72, 153, .08), 0 10px 28px rgba(15, 23, 42, .04);
}

.checkout-empty-icon,
.checkout-success-icon {
    width: 76px;
    height: 76px;
    display: inline-grid;
    place-items: center;
    border-radius: 26px;
    color: #ec4899;
    background: #fff1f6;
    font-size: 2.2rem;
    margin-bottom: 18px;
}

.checkout-success-icon {
    color: #16a34a;
    background: #ecfdf5;
}

.checkout-empty-card h2,
.checkout-success-card h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 950;
}

.checkout-empty-card p,
.checkout-success-card p {
    margin: 12px auto 22px;
    max-width: 360px;
    color: #64748b;
    font-size: .94rem;
    line-height: 1.75;
}

.checkout-success-order {
    max-width: 360px;
    margin: 0 auto 22px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

    .checkout-success-order span {
        display: block;
        color: #64748b;
        font-size: .82rem;
        font-weight: 850;
        margin-bottom: 4px;
    }

    .checkout-success-order strong {
        color: #0f172a;
        font-size: 1.05rem;
        font-weight: 950;
    }

/* ============================================================
   Order Complete Page
   URL: /order/complete/{orderNo}
============================================================ */

.order-complete-shell {
    background: rgba(255, 255, 255, .96);
}

.order-complete-hero {
    padding: 42px 22px 26px;
    text-align: center;
    background: radial-gradient(circle at 14% 0%, rgba(220, 252, 231, .95), transparent 34%), radial-gradient(circle at 90% 8%, rgba(255, 228, 238, .85), transparent 32%), linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.order-complete-success-icon {
    width: 82px;
    height: 82px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 30px;
    color: #16a34a;
    background: #dcfce7;
    font-size: 2.7rem;
    box-shadow: 0 18px 42px rgba(22, 163, 74, .16);
}

.order-complete-kicker {
    color: #16a34a;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.order-complete-hero h1 {
    margin: 8px 0 10px;
    color: #0f172a;
    font-size: 1.65rem;
    font-weight: 950;
}

.order-complete-hero p {
    max-width: 390px;
    margin: 0 auto;
    color: #64748b;
    font-size: .94rem;
    line-height: 1.75;
}

.order-complete-no-card {
    margin: 22px auto 0;
    max-width: 390px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(226, 232, 240, .92);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

    .order-complete-no-card span {
        display: block;
        color: #64748b;
        font-size: .8rem;
        font-weight: 850;
        margin-bottom: 5px;
    }

    .order-complete-no-card strong {
        display: block;
        color: #0f172a;
        font-size: 1.05rem;
        font-weight: 950;
        word-break: break-all;
    }

.order-copy-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    color: #2563eb;
    background: #eff6ff;
    font-size: .86rem;
    font-weight: 900;
}

.order-complete-card {
    margin: 18px;
    padding: 20px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 247, 251, .94));
    border: 1px solid rgba(255, 228, 238, .9);
    box-shadow: 0 18px 48px rgba(236, 72, 153, .08), 0 10px 28px rgba(15, 23, 42, .04);
}

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

    .order-section-title-row h2 {
        margin: 2px 0 0;
        color: #0f172a;
        font-size: 1.15rem;
        font-weight: 950;
    }

    .order-section-title-row > span {
        color: #64748b;
        font-size: .86rem;
        font-weight: 850;
    }

.order-store-mini {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .order-store-mini img,
    .order-store-logo-placeholder {
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
        border-radius: 18px;
        object-fit: cover;
    }

.order-store-logo-placeholder {
    display: grid;
    place-items: center;
    color: #ec4899;
    background: #fff1f6;
    font-size: 1.25rem;
    font-weight: 950;
}

.order-store-mini strong {
    display: block;
    color: #0f172a;
    font-weight: 950;
}

.order-store-mini span {
    display: block;
    color: #64748b;
    font-size: .84rem;
    margin-top: 2px;
}

.order-complete-items {
    display: grid;
    gap: 10px;
}

.order-complete-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

    .order-complete-item h3 {
        margin: 0;
        color: #0f172a;
        font-size: .95rem;
        font-weight: 950;
        line-height: 1.35;
    }

    .order-complete-item p {
        margin: 5px 0 0;
        color: #64748b;
        font-size: .84rem;
    }

    .order-complete-item strong {
        color: #ef4444;
        font-weight: 950;
        white-space: nowrap;
    }

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

    .order-info-grid div {
        padding: 13px 14px;
        border-radius: 18px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

        .order-info-grid div.wide {
            grid-column: 1 / -1;
        }

    .order-info-grid span {
        display: block;
        color: #94a3b8;
        font-size: .76rem;
        font-weight: 850;
        margin-bottom: 4px;
    }

    .order-info-grid strong {
        color: #0f172a;
        font-size: .9rem;
        font-weight: 900;
        word-break: break-word;
    }

.order-summary-list {
    display: grid;
    gap: 8px;
}

    .order-summary-list div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        color: #64748b;
        font-size: .92rem;
    }

    .order-summary-list strong {
        color: #0f172a;
    }

    .order-summary-list .total {
        margin-top: 8px;
        padding-top: 14px;
        border-top: 1px dashed #e2e8f0;
    }

        .order-summary-list .total span {
            color: #0f172a;
            font-weight: 950;
        }

        .order-summary-list .total strong {
            color: #ef4444;
            font-size: 1.45rem;
            font-weight: 950;
        }

.order-status-grid {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

    .order-status-grid div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 14px;
        border-radius: 18px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

    .order-status-grid span {
        color: #64748b;
        font-size: .86rem;
        font-weight: 850;
    }

    .order-status-grid strong {
        color: #0f172a;
        font-size: .88rem;
        font-weight: 950;
    }

.order-complete-notice {
    display: flex;
    gap: 12px;
    margin: 18px;
    padding: 18px;
    border-radius: 26px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.order-complete-notice-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    color: #f97316;
    background: #ffedd5;
}

.order-complete-notice strong {
    display: block;
    color: #9a3412;
    font-weight: 950;
    margin-bottom: 4px;
}

.order-complete-notice p {
    margin: 0;
    color: #9a3412;
    font-size: .86rem;
    line-height: 1.7;
}

.order-complete-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 18px;
}

.order-primary-action,
.order-secondary-action {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 950;
}

.order-primary-action {
    color: #ffffff;
    background: linear-gradient(135deg, #fb7185 0%, #ec4899 52%, #f97316 100%);
    box-shadow: 0 14px 28px rgba(236, 72, 153, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.order-secondary-action {
    color: #2563eb;
    background: #eff6ff;
}

@media (max-width: 374.98px) {
    .order-info-grid,
    .order-complete-actions {
        grid-template-columns: 1fr;
    }

    .order-complete-item {
        flex-direction: column;
    }
}