/* Mobile storefront: keep navigation and shopping controls within the safe viewport. */
.mobile-bottom-nav { display: none; }
[inert] { pointer-events: none; }
#cart-drawer, #wishlist-drawer, #profile-drawer { overscroll-behavior: contain; }
#cart-items, #wishlist-items { min-height: 0; }
.close-btn, .auth-close { min-width: 44px; min-height: 44px; }
.auth-tab { background: none; border: 0; padding: 0; }
.add-cart-btn:hover { color: var(--bg-color); }
.review-item { background: var(--surface) !important; }
.loader-overlay {
    background-color: #000000 !important;
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh;
    z-index: 99999; display: flex !important; align-items: center; justify-content: center;
}
.loader-text {
    font-size: clamp(2.2rem, 11vw, 4rem) !important;
    letter-spacing: 0.16em !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    white-space: nowrap !important;
}
.loader-text span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: none !important;
}
#product-modal { z-index: 11000; }
#auth-overlay { z-index: 12000; }
#cart-overlay { z-index: 10000 !important; }
#cart-drawer { z-index: 10001 !important; }
.catalog-message { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; color: #b8bdc5; line-height: 1.6; }
.catalog-message button { display: block; margin: 1rem auto 0; padding: .8rem 1.4rem; border: 1px solid #555; background: var(--surface); color: white; border-radius: 8px; cursor: pointer; }
/* Product cards keep equal content rows and reserve a stable image area. */
.product-card-media { display: block; flex-shrink: 0; }
.product-card-media img { display: block; }
.compact-card .product-card-info { display: flex; flex-direction: column; flex: 1; gap: 10px; }
.compact-card .product-card-title {
    font-size: .9rem; line-height: 1.4; margin: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere; min-height: 2.8em;
}
.product-card-category { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-card .product-card-actions {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px;
    margin-top: auto; padding-top: 2px; width: 100%;
}
.compact-card .product-card-wishlist { width: 44px; min-width: 44px; height: 44px; padding: 0; }
.compact-card .product-card-add { min-width: 0; min-height: 44px; padding: 6px; white-space: normal; }
.compact-card .product-card-sold-out { margin-top: auto; }

@media (max-width: 768px), (max-width: 1024px) and (pointer: coarse) and (max-height: 500px) {
    :root { --bottom-nav-height: calc(68px + env(safe-area-inset-bottom, 0px)); }
    html { scroll-padding-top: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + 16px); }
    body { padding-bottom: var(--bottom-nav-height); }
    button, input, textarea, select { font: inherit; }
    input, textarea, select { min-width: 0; font-size: 16px !important; }
    button, a { touch-action: manipulation; }
    #main-nav { grid-template-columns: 44px minmax(0, 1fr) 44px; background: rgba(15,18,21,.96); }
    #main-nav .logo { display: flex !important; grid-column: 2; grid-row: 1; justify-self: center; margin: 0; color: white; }
    #main-nav .logo img { display: none; }
    #main-nav .logo::after { content: 'FORGE'; font: 800 24px var(--font-display); letter-spacing: -.05em; }
    #main-nav > .nav-links.right-nav { grid-column: 3; }
    #main-nav > .nav-links.right-nav > li:not(:first-child) { display: none !important; }
    #main-nav.search-mode { grid-template-columns: 1fr; }
    #main-nav.search-mode .logo { display: none !important; }
    #main-nav.search-mode > .nav-links.right-nav { grid-column: 1; }
    #inline-search-results { max-height: min(55dvh, 360px) !important; }
    .mobile-bottom-nav {
        position: fixed; inset: auto 0 0; z-index: 10005; display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%;
        height: var(--bottom-nav-height); min-height: 68px;
        padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px));
        background: #15181c; border-top: 1px solid #30343a;
        box-shadow: 0 -4px 24px #0003; transform: none; backdrop-filter: none;
    }
    .mobile-bottom-nav button {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 5px; min-width: 0; min-height: 60px; padding: 8px 4px; border: 0;
        background: transparent; color: #b8bdc5; font-size: 11px; font-weight: 600; cursor: pointer;
    }
    .mobile-bottom-nav button[aria-current="page"] { color: #ff6847; }
    .mobile-bottom-nav button[aria-current="page"]::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent); }
    .mobile-bottom-nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .mobile-nav-icon { position: relative; height: 23px; }
    .mobile-bottom-nav .nav-count-badge { top: -5px; right: -13px; font-size: 10px; min-width: 17px; height: 17px; border: 2px solid #15181c; box-sizing: content-box; }
    .nav-count-badge[hidden] { display: none; }
    .mobile-menu { height: calc(100dvh - var(--bottom-nav-height)); }
    .mobile-menu-content { min-height: 0; margin: 0 auto; padding-bottom: 24px; }
    .hero { min-height: calc(100svh - var(--bottom-nav-height)) !important; }
    .hero-img-container { inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 1 !important; }
    .hero-img { background-image: url('background-mobile.webp'), url('background.webp'); background-size: cover; background-position: 78% center; opacity: 1 !important; transform: none !important; }
    .hero-content-wrapper { flex: 1 0 auto; justify-content: center; }
    .grain { display: none; }
    .hero-bg-mesh, .marquee-content { animation: none; }
    .showcase { padding: 32px 16px; }
    .section-title { line-height: 1.25; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: baseline !important; flex-wrap: nowrap !important; gap: 0.5rem !important; }
    .section-title span { white-space: nowrap !important; margin-left: auto !important; }
    .grid-layout { gap: 12px; }
    .single-card-grid, .grid-layout:has(> .card:only-child), .grid-layout:has(> .compact-card:only-child) {
        grid-template-columns: minmax(0, 1fr) !important; max-width: 360px; margin-inline: auto;
    }
    .product-card-heading { flex-direction: column; align-items: flex-start; gap: 6px; }
    .compact-card .product-card-title { font-size: clamp(12px, 3.25vw, 14px); line-height: 1.4; margin: 0; }
    .product-card-pricing { max-width: 100%; flex-direction: row; align-items: baseline; flex-wrap: wrap; }
    .product-card-current-price { font-size: 15px; }
    .compact-card .product-card-info { padding: 10px; gap: 8px; }
    .product-card-actions { gap: 6px; }
    .product-card-wishlist { width: 44px; min-width: 44px; flex-basis: 44px; min-height: 44px; }
    .product-card-add { min-height: 44px; font-size: 11px; line-height: 1.3; white-space: normal; padding: 6px; }
    
    /* Hero Feature Badges: Single Horizontal Straight Line Infinite Running Marquee */
    .hero-features-banner {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        overflow: hidden !important;
        background: #08090C !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: 1px solid rgba(255, 62, 21, 0.25) !important;
        padding: 0.75rem 0 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    .hero-features-track {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: max-content !important;
        white-space: nowrap !important;
        animation: heroFeaturesMarquee 22s linear infinite !important;
        will-change: transform !important;
    }
    .hero-features-group {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2rem !important;
        padding-right: 2rem !important;
        flex-shrink: 0 !important;
    }
    .hero-feature-item, .hero-stripe-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 9px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    .hero-feature-icon, .hero-stripe-icon {
        font-size: 1.6rem !important;
        color: var(--accent) !important;
        flex-shrink: 0 !important;
    }
    .hero-feature-text, .hero-stripe-text {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 1px !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }
    .hero-feature-title, .hero-stripe-title {
        color: #FFFFFF !important;
        font-family: var(--font-display) !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }
    .hero-feature-sub, .hero-stripe-sub {
        color: #9E9E9E !important;
        font-family: var(--font-body) !important;
        font-size: 0.70rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }
    .hero-feature-divider, .hero-stripe-divider {
        display: inline-block !important;
        color: rgba(255, 62, 21, 0.45) !important;
        font-size: 0.8rem !important;
        flex-shrink: 0 !important;
    }
    @keyframes heroFeaturesMarquee {
        0% { transform: translate3d(0, 0, 0); }
        100% { transform: translate3d(-50%, 0, 0); }
    }
    @keyframes heroFeaturesRunningStripe {
        0% { transform: translate3d(0, 0, 0); }
        100% { transform: translate3d(-50%, 0, 0); }
    }

    /* Single Tile Bespoke Studio Layout for Create Your Own on Mobile */
    .custom-tshirt-container { flex-direction: column !important; }
    .custom-tshirt-container { position: relative !important; z-index: 100 !important; margin-bottom: 3.5rem !important;
        background: #0E1014 !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 2px solid var(--accent) !important;
        border-radius: 14px !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
        padding: 22px 18px !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        width: 100% !important;
    }
    .custom-tshirt-info {
        padding: 0 !important;
        flex-basis: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .custom-file-action-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        margin-bottom: 1.35rem !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 10px !important;
        padding: 0.75rem 0.95rem !important;
        box-sizing: border-box !important;
        min-height: 56px !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
    }
    .custom-file-action-wrap:active,
    .custom-file-action-wrap.has-artwork {
        border-color: rgba(255, 62, 21, 0.5) !important;
        background: rgba(255, 62, 21, 0.04) !important;
    }
    .custom-file-left-info {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    .custom-file-icon-box {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 8px !important;
        background: rgba(255, 62, 21, 0.12) !important;
        border: 1px solid rgba(255, 62, 21, 0.28) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--accent) !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }
    .custom-file-icon-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .custom-file-text-col {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .custom-file-title {
        color: #FFFFFF !important;
        font-family: var(--font-display) !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .custom-file-sub {
        color: rgba(255, 255, 255, 0.55) !important;
        font-family: var(--font-body) !important;
        font-size: 0.68rem !important;
        margin-top: 1px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .custom-inline-choose-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #FFFFFF !important;
        border: 1px solid rgba(255, 255, 255, 0.28) !important;
        border-radius: 6px !important;
        padding: 0.55rem 0.95rem !important;
        font-family: var(--font-display) !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        min-height: 38px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    .custom-inline-choose-btn:active {
        background: var(--accent) !important;
        border-color: var(--accent) !important;
    }
    .custom-tshirt-price-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.8rem !important;
        margin-bottom: 1.35rem !important;
        flex-wrap: wrap !important;
    }
    .custom-price-col {
        display: flex !important;
        align-items: center !important;
        gap: 0.6rem !important;
    }
    .custom-price-lbl {
        color: rgba(255, 255, 255, 0.6) !important;
        font-family: var(--font-display) !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.08em !important;
    }
    .custom-price-val {
        color: var(--accent) !important;
        font-family: var(--font-display) !important;
        font-size: 1.45rem !important;
        font-weight: 800 !important;
        text-shadow: 0 0 14px rgba(255, 62, 21, 0.4) !important;
    }
    .custom-specs-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.6) !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        font-family: var(--font-mono) !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.04em !important;
    }
    /* Strictly hide separate dropzone box on mobile: ONLY this single tile is displayed */
    .custom-tshirt-dropzone {
        display: none !important;
        border-left: none !important;
        border-top: none !important;
    }
    .custom-checkout-btn {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 0.95rem !important;
        min-height: 52px !important;
        position: relative !important;
        z-index: 105 !important;
        background: var(--accent) !important;
        color: #FFFFFF !important;
        border: none !important;
        border-radius: 8px !important;
        font-family: var(--font-display) !important;
        font-weight: 800 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        box-shadow: 0 6px 20px rgba(255, 62, 21, 0.35) !important;
    }
    #main-custom-tshirt > div { min-width: 0; flex-basis: 100% !important; }
    #main-custom-tshirt > div:first-child { padding: 0 !important; }
    #main-custom-tshirt button.custom-checkout-btn { width: 100% !important; }
    #main-reviews-container { grid-template-columns: minmax(0, 1fr) !important; }
    #shop-screen, #checkout-screen { padding: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + 24px) 16px 28px !important; }
    #shop-screen > div:first-of-type > div { width: 100%; }
    #shop-search-input { max-width: none !important; min-height: 48px; }
    .checkout-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .checkout-grid > div { padding: 20px 16px !important; min-width: 0; position: static !important; }
    .checkout-grid > div:first-child { position: relative !important; }
    .chk-grid-split { grid-template-columns: minmax(0, 1fr); }
    #checkout-items-list { max-height: none !important; }
    #cart-drawer, #wishlist-drawer, #profile-drawer {
        top: 0; height: calc(100dvh - var(--bottom-nav-height)) !important;
        padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
    }
    #cart-drawer > div:first-child, #wishlist-drawer > div:first-child { padding: 16px !important; flex-shrink: 0; }
    #cart-drawer > div:last-child { padding: 16px !important; flex-shrink: 0; }
    #cart-items, #wishlist-items { padding: 16px !important; overscroll-behavior: contain; }
    #cart-items small { display: block; line-height: 1.5; }
    #cart-items button { min-height: 44px; min-width: 44px; }
    #wishlist-empty-msg { margin: auto; }
    #wishlist-items:empty { flex: 0; padding: 0 !important; }
    .profile-sidebar { padding: 48px 20px 16px; }
    .profile-content { padding: 20px; min-width: 0; }
    #profile-user-info, #profile-display-name { overflow-wrap: anywhere; }
    .modal-overlay { padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); }
    .modal-content { width: 100%; max-height: 100%; max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); border-radius: 12px; overscroll-behavior: contain; }
    .modal-content > .close-btn { position: sticky; top: 8px; grid-column: 1; justify-self: end; margin: 8px 8px -52px 0; background: #15181ceF; border-radius: 50%; }
    .modal-img-container { height: auto; min-height: 0; }
    .modal-img-container > img#modal-img { height: min(50dvh, 380px); flex: none; object-fit: contain; }
    #modal-thumbnails { justify-content: flex-start !important; flex-shrink: 0; }
    .modal-info { padding: 20px; min-width: 0; }
    .modal-info > * { flex-shrink: 0; }
    #modal-btn { min-height: 52px; }
    #modal-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
    .size-btn { margin: 0; }
    #toast-container { bottom: calc(var(--bottom-nav-height) + 12px); left: 12px; right: 12px; max-width: none; }
    /* Customer AI deactivated per strict requirement: Admin Screen Only */
    .forge-ai-fab, #forge-ai-fab {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }
    .forge-ai-drawer, #forge-ai-drawer {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }
    #back-to-top-btn { bottom: calc(var(--bottom-nav-height) + 16px) !important; right: 14px !important; width: 44px !important; height: 44px !important; z-index: 80 !important; }
    footer { text-align: center; }
    footer p { line-height: 1.6; }
    body.keyboard-open .mobile-bottom-nav { visibility: hidden; pointer-events: none; }
    #payment-status-overlay {
        padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    }
    .payment-status-card {
        padding: 0.75rem 0.85rem !important;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
        border-radius: 12px;
    }
    .payment-success-icon-wrap { margin-bottom: 0.2rem !important; }
    .payment-success-icon-wrap .checkmark-svg { width: 40px !important; height: 40px !important; }
    .payment-badge-pill { margin-bottom: 0.25rem !important; padding: 0.18rem 0.55rem !important; font-size: 0.62rem !important; }
    .payment-title { font-size: 1.15rem !important; margin-bottom: 0.15rem !important; }
    .payment-subtitle { font-size: 0.72rem !important; margin-bottom: 0.45rem !important; line-height: 1.3 !important; }
    .order-receipt-card { padding: 0.55rem 0.75rem !important; margin-bottom: 0.5rem !important; gap: 0.25rem !important; font-size: 0.76rem !important; }
    .receipt-row { font-size: 0.72rem !important; }
    .receipt-row.highlight { padding: 0.25rem 0 !important; margin: 0.08rem 0 !important; }
    .receipt-value.accent { font-size: 0.95rem !important; }
    .receipt-value.address { max-width: 58% !important; font-size: 0.68rem !important; line-height: 1.2 !important; }
    .receipt-delivery-badge { padding: 0.25rem 0.5rem !important; font-size: 0.66rem !important; margin-top: 0.15rem !important; }
    .receipt-delivery-badge .material-symbols-outlined { font-size: 0.9rem !important; }
    .payment-success-actions { gap: 0.4rem !important; }
    .payment-success-secondary-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.4rem !important; width: 100% !important; }
    .order-action-btn { min-height: 44px !important; font-size: 0.78rem !important; }
    .order-action-btn.secondary { min-height: 40px !important; font-size: 0.72rem !important; padding: 0.25rem 0.4rem !important; }
}
@media (max-width: 359px) {
    .grid-layout { gap: 8px; }
    .compact-card .product-card-info { padding: 8px; }
    .compact-card .product-card-actions { gap: 6px; }
    .payment-status-card { padding: 0.65rem 0.65rem !important; }
    .payment-title { font-size: 1.05rem !important; }
    .payment-subtitle { font-size: 0.68rem !important; margin-bottom: 0.35rem !important; }
    .payment-steps-list { padding: 0.55rem 0.5rem; }
    .payment-step-item .step-text h4 { font-size: 0.74rem; }
    .payment-step-item .step-text p { font-size: 0.65rem; }
    .order-action-btn { min-height: 44px !important; font-size: 0.74rem; }
    .order-action-btn.secondary { min-height: 38px !important; font-size: 0.68rem; }
}
@media (max-width: 768px) and (max-height: 500px), (max-width: 1024px) and (pointer: coarse) and (max-height: 500px) {
    #cart-drawer > div:first-child, #wishlist-drawer > div:first-child { padding-block: 4px !important; }
    #cart-drawer > div:last-child { padding-block: 8px !important; }
    #cart-drawer > div:last-child > div { margin-bottom: 8px !important; }
    .hero-content-wrapper { padding-top: 20px; }
    .payment-spinner-container { width: 56px; height: 56px; margin-bottom: 0.6rem; }
    .payment-spinner { width: 48px; height: 48px; }
    .payment-lock-icon .material-symbols-outlined { font-size: 1.3rem; }
    .payment-success-icon-wrap .checkmark-svg { width: 56px; height: 56px; }
    .payment-badge-pill { margin-bottom: 0.4rem; padding: 0.2rem 0.6rem; font-size: 0.65rem; }
    .payment-subtitle { margin-bottom: 0.8rem; }
    .payment-progress-track { margin-bottom: 0.8rem; }
    .payment-steps-list { margin-bottom: 0.8rem; }
    .order-receipt-card { margin-bottom: 0.8rem; padding: 0.6rem 0.8rem; }
    .receipt-delivery-badge { padding: 0.35rem 0.5rem; }
}


/* Product Slider on Mobile */
.product-slider-track {
    gap: 0.75rem !important;
    padding-bottom: 0.5rem !important;
}
.product-slider-track .card {
    flex: 0 0 clamp(165px, calc(50% - 0.45rem), 220px) !important;
    max-width: 240px !important;
    scroll-snap-align: start;
}
.slider-nav-arrow { display: none !important; }
.slider-progress-bar-wrap { max-width: 140px; height: 2px; margin-top: 0.5rem; }


/* Mobile Slider View More Card & End Button */
.slider-view-more-card {
    flex: 0 0 clamp(165px, calc(50% - 0.45rem), 220px) !important;
    min-height: 240px !important;
    padding: 1.2rem 0.8rem !important;
}
.slider-view-more-title {
    font-size: 1.1rem !important;
}
.slider-view-more-desc {
    font-size: 0.72rem !important;
}
.btn-view-all-shop {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 0.8rem !important;
    padding: 0.7rem 1.2rem !important;
}

/* Mobile Mandatory Review Modal */
.mandatory-review-overlay {
    padding: 0.8rem !important;
}
.mandatory-review-card {
    padding: 1.4rem 1rem !important;
    max-height: 90vh;
    overflow-y: auto;
}
.mandatory-title {
    font-size: 1.3rem !important;
}
.star-btn {
    font-size: 1.8rem !important;
}


/* Mobile Bottom Straight Orange Loading Bar */
.loader-bottom-bar-wrap {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
    z-index: 100000 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
.loader-bottom-orange-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background: linear-gradient(90deg, #FF3E15 0%, #FF7A00 100%) !important;
    box-shadow: 0 0 16px #FF3E15, 0 0 28px #FF7A00, 0 0 4px #FFFFFF !important;
    animation: straightLineLeftToRight 1.4s cubic-bezier(0.25, 0.8, 0.25, 1) 1 forwards !important;
    display: block !important;
    visibility: visible !important;
}