/* Mobile experience layer
   -----------------------
   This file is intentionally loaded after the established storefront theme.
   Layout changes are scoped to phone widths, including touch landscape, so
   the desktop UI remains intact from 900px upward. */

.mobile-nav-toggle,
.mobile-filter-toggle { display: none; }

/* Class replaces repeated inline OTP styling; desktop values are identical. */
.auth-form .otp-code-input {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: .5em;
}

@media (max-width: 760px),
       (max-width: 899px) and (hover: none) and (pointer: coarse) {
    :root {
        --mobile-gutter: 16px;
        --mobile-header-height: calc(116px + max(10px, env(safe-area-inset-top)));
    }

    html {
        scroll-padding-top: calc(var(--mobile-header-height) + 16px);
        -webkit-text-size-adjust: 100%;
    }

    body {
        background-attachment: scroll;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    button, a, input, select, textarea, label { touch-action: manipulation; }

    /* Compact two-row header: brand/menu, then search. */
    .site-header {
        backdrop-filter: blur(20px) saturate(1.25);
        -webkit-backdrop-filter: blur(20px) saturate(1.25);
    }

    .header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-areas: "brand toggle" "search search";
        gap: 10px 12px;
        padding: max(10px, env(safe-area-inset-top)) var(--mobile-gutter) 10px;
    }

    .header-inner > .logo { grid-area: brand; min-width: 0; }
    .header-inner > .search-form { grid-area: search; }

    .logo-mark { width: 32px; height: 32px; }
    .logo-text { font-size: clamp(1rem, 5vw, 1.2rem); overflow: hidden; text-overflow: ellipsis; }

    .has-mobile-ui .mobile-nav-toggle {
        grid-area: toggle;
        display: grid;
        place-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 13px;
        background: rgba(255,255,255,.045);
        color: var(--text);
        cursor: pointer;
    }

    .mobile-nav-toggle span {
        display: block;
        width: 19px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: transform .18s ease, opacity .18s ease;
    }

    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .search-form { width: 100%; max-width: none; min-width: 0; }
    .search-input {
        min-width: 0;
        min-height: 44px;
        padding: 9px 16px;
        font-size: 16px;
        background: rgba(255,255,255,.055);
    }
    .search-button { width: 52px; min-height: 44px; justify-content: center; padding: 0; }

    .header-actions {
        display: flex;
        position: absolute;
        top: calc(100% + 1px);
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        margin: 0;
        padding: 10px;
        gap: 5px;
        justify-content: space-around;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: rgba(13, 13, 36, .98);
        box-shadow: 0 18px 50px rgba(0,0,0,.55);
    }

    .has-mobile-ui .header-actions { display: none; }
    .has-mobile-ui .mobile-nav-open .header-actions { display: flex; }

    .header-icon,
    .bell-trigger {
        flex: 1 1 44px;
        min-width: 44px;
        min-height: 48px;
        justify-content: center;
        border-radius: 11px;
    }
    .header-icon:active, .bell-trigger:active { background: var(--surface-2); }
    .header-icon-label { font-size: .67rem; }
    .account-menu-trigger { min-width: 44px; min-height: 48px; justify-content: center; padding: 0 10px; }
    .account-menu-name, .account-menu-caret { display: none; }

    .account-menu-panel {
        position: fixed;
        top: calc(var(--mobile-header-height) + 12px);
        left: 12px;
        right: 12px;
        width: auto;
        min-width: 0;
        max-height: calc(100dvh - var(--mobile-header-height) - 28px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .account-menu-panel a { display: flex; align-items: center; min-height: 44px; }

    .bell-panel {
        position: fixed;
        top: calc(var(--mobile-header-height) + 12px);
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100dvh - var(--mobile-header-height) - 28px);
    }
    .bell-list { max-height: calc(100dvh - var(--mobile-header-height) - 132px); }
    .bell-item a { min-height: 60px; }
    .toast-stack { top: calc(var(--mobile-header-height) + 12px); }

    /* Horizontal navigation remains compact and gains deliberate touch scroll. */
    .category-nav { position: relative; }
    .category-nav-inner {
        padding: 0 var(--mobile-gutter);
        gap: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .category-nav-inner::-webkit-scrollbar { display: none; }
    .category-nav-inner a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 9px 13px;
        font-size: .84rem;
    }
    .category-nav-inner a::after { left: 13px; right: 13px; }
    .category-nav-inner .nav-extra { margin-left: 0; }

    .verify-banner { padding-inline: var(--mobile-gutter); overflow-wrap: anywhere; }

    /* Page rhythm and type. */
    .page-content,
    .page-content-wide {
        width: 100%;
        padding: 22px var(--mobile-gutter) calc(52px + env(safe-area-inset-bottom));
    }
    .page-header { gap: 6px 10px; margin-bottom: 18px; }
    .page-header h1 { width: 100%; font-size: clamp(1.55rem, 8vw, 1.85rem); overflow-wrap: anywhere; }
    .section-title { font-size: 1.25rem; margin-bottom: 14px; }
    .home-section { margin-top: 34px; }

    .button { min-height: 44px; padding: 11px 22px; }
    .button-small, .button-compact { min-height: 42px; }
    .link-button { min-height: 44px; display: inline-flex; align-items: center; }
    .otp-code-input {
        text-align: center;
        font-size: clamp(1.25rem, 7vw, 1.5rem) !important;
        font-variant-numeric: tabular-nums;
        letter-spacing: .3em;
        padding-left: calc(15px + .3em) !important;
    }

    /* Home: less ceremony above the fold, denser discovery below. */
    .hero { padding: 34px 24px; border-radius: 18px; }
    .hero-kicker { margin-bottom: 12px; font-size: .69rem; }
    .hero h1 { font-size: clamp(1.85rem, 9.5vw, 2.35rem); }
    .hero-subtitle { margin-bottom: 24px; font-size: .96rem; line-height: 1.55; }
    .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .hero-actions .button { width: 100%; padding-inline: 12px; }

    .category-tiles,
    .game-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .category-tile { min-width: 0; padding: 18px 10px; font-size: .87rem; }
    .game-tiles .category-tile { padding: 24px 10px; font-size: .96rem; }

    /* Two-up product cards dramatically shorten catalog pages without making
       artwork too small to identify. */
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .product-card { min-width: 0; padding: 10px; border-radius: 12px; }
    .product-card-image { margin-bottom: 9px; padding: 6px; }
    .product-card-name { min-height: 2.65em; font-size: .79rem; line-height: 1.32; overflow-wrap: anywhere; }
    .product-card-meta { gap: 3px; min-height: 20px; }
    .product-card-meta .condition-badge,
    .product-card-meta .chip { font-size: .55rem; padding: 2px 5px; }
    .product-card-price { font-size: 1rem; }
    .product-card-stock { font-size: .72rem; }
    .wishlist-toggle { width: 44px; height: 44px; }

    /* Filters: explicit high-specificity stack fixes the old row override. */
    .filter-panel { padding: 14px; }
    .mobile-filter-toggle {
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }
    .has-mobile-ui .mobile-filter-toggle { display: flex; }
    .has-mobile-ui .mobile-filter-toggle[aria-expanded="false"] + .filter-form { display: none; }
    .mobile-filter-toggle > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
    .mobile-filter-state { color: var(--cyan); font-size: .76rem; font-weight: 600; }
    .mobile-filter-toggle[aria-expanded="true"] { margin-bottom: 14px; }
    .filter-panel > .filter-panel-title:has(+ .mobile-filter-toggle) { display: none; }
    .filter-bar .mobile-filter-toggle + .filter-form { padding-top: 2px; }
    .filter-panel .filter-form,
    .filter-bar .filter-form { flex-direction: column; align-items: stretch; }
    .filter-panel .filter-field,
    .filter-bar .filter-field { width: 100%; }
    .filter-panel .filter-field input[type="search"],
    .filter-panel .filter-field input[type="text"],
    .filter-panel .filter-field select,
    .filter-bar .filter-field input[type="search"],
    .filter-bar .filter-field input[type="text"],
    .filter-bar .filter-field select { width: 100%; min-width: 0; font-size: 16px; min-height: 44px; }
    .filter-choice span { min-height: 44px; display: inline-flex; align-items: center; }
    .filter-actions { width: 100%; }
    .filter-actions .button { flex: 1 1 0; }
    .filter-range input { width: auto; flex: 1 1 0; min-width: 0; }

    .filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(-1 * var(--mobile-gutter));
        padding-inline: var(--mobile-gutter);
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .filter-chips::-webkit-scrollbar { display: none; }
    .filter-chip { display: flex; align-items: center; min-height: 44px; scroll-snap-align: start; }

    /* Search/reference result rows. */
    .catalog-card { align-items: stretch; padding: 12px; }
    .catalog-card-body { width: 100%; min-width: 0; }
    .catalog-card-body > div { min-width: 0; overflow-wrap: anywhere; }
    .catalog-card-listings, .catalog-card-availability { width: 100%; }

    /* Product detail uses the phone width for content rather than nested pads. */
    .breadcrumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        margin-inline: calc(-1 * var(--mobile-gutter));
        padding-inline: var(--mobile-gutter);
        scrollbar-width: none;
    }
    .breadcrumbs::-webkit-scrollbar { display: none; }
    .product-detail { gap: 20px; padding: 14px; border-radius: 16px; }
    .product-detail-image { padding: 10px; }
    .product-detail-info { min-width: 0; }
    .product-detail-info h1 { font-size: 1.45rem; overflow-wrap: anywhere; }
    .product-detail-price { font-size: 1.8rem; }
    .other-conditions { max-width: none; padding: 12px; }
    .add-to-cart-form { display: grid; grid-template-columns: auto 76px minmax(0,1fr); }
    .add-to-cart-form select { min-height: 44px; font-size: 16px; }
    .add-to-cart-form .button { width: 100%; padding-inline: 12px; }
    .wishlist-detail-form .button { width: 100%; }
    .seller-card { display: grid; grid-template-columns: 42px minmax(0,1fr); padding: 13px; }
    .seller-go { grid-column: 2; margin-left: 0; }
    .other-vendor-row { align-items: stretch; }
    .other-vendor-who, .other-vendor-offer { width: 100%; }
    .other-vendor-offer { justify-content: space-between; flex-wrap: wrap; }
    .reviews-section { margin-top: 34px; }
    .review-form, .review-card { padding: 16px; }
    .review-meta { flex-wrap: wrap; gap: 6px 10px; }
    .review-date { margin-left: 0; width: 100%; }

    /* Cart rows become intentional cards instead of a squeezed desktop row. */
    .cart-item {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        padding: 13px;
    }
    .cart-item-image { width: 72px; height: 86px; grid-row: 1 / span 2; }
    .cart-item-details { min-width: 0; }
    .cart-item-name { display: block; margin: 0; overflow-wrap: anywhere; }
    .cart-item-actions { gap: 8px 12px; }
    .cart-quantity-form { display: grid; grid-template-columns: auto 62px minmax(88px,1fr); width: 100%; gap: 7px; }
    .cart-quantity-form input[type="number"] { width: 100%; min-height: 44px; font-size: 16px; }
    .cart-quantity-form .button { padding-inline: 10px; }
    .cart-quantity-form .button {
        border: 1px solid var(--border);
        background: var(--surface-2);
        color: var(--text);
    }
    .cart-item-subtotal { grid-column: 2; grid-row: 2; margin: 0; }
    .cart-summary { position: static; padding: 17px; }
    .empty-state { padding: 52px 12px; }

    /* Checkout: retain the proven order, remove desktop density. */
    .checkout-card { padding: 16px; border-radius: 15px; }
    .checkout-card-head { align-items: flex-start; flex-wrap: wrap; }
    .delivery-option { display: grid; grid-template-columns: auto minmax(0,1fr); padding: 13px; }
    .delivery-option-price { grid-column: 2; text-align: left; }
    .pickup-stores { margin-left: 8px; padding-left: 10px; }
    .pay-facts { padding: 12px; }
    .pay-facts > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; }
    .pay-facts dd { min-width: 0; overflow-wrap: anywhere; text-align: right; }
    .pay-code { letter-spacing: .13em; }
    .hold-bar { padding: 14px; }
    .hold-clock { font-size: 1.45rem; }
    .checkout-alert { padding: 14px; }
    .phone-pair { flex-direction: column; }
    .phone-pair select { flex-basis: auto; }

    /* Vendor page and footer. */
    .vendor-header { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; padding: 16px; }
    .vendor-avatar { width: 48px; height: 48px; font-size: 1.2rem; }
    .vendor-header > .button { grid-column: 1 / -1; width: 100%; }
    .site-footer { margin-top: 48px; }
    .footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 20px;
        padding: 38px var(--mobile-gutter) calc(40px + env(safe-area-inset-bottom));
    }
    .footer-brand { grid-column: 1 / -1; max-width: none; }
    .footer-column:last-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
    }
    .footer-column:last-child h3 { grid-column: 1 / -1; }

    /* Internal staff UI shares this stylesheet. */
    .bo-header-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: max(10px, env(safe-area-inset-top)) 16px 10px; }
    .bo-brand { min-width: 0; }
    .bo-user { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
    .bo-nav { grid-column: 1 / -1; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .bo-nav::-webkit-scrollbar, .bo-tabs::-webkit-scrollbar { display: none; }
    .bo-nav a, .bo-tabs a { flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; }
    .bo-main { padding: 20px 16px 50px; }
    .bo-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .bo-tile { min-width: 0; padding: 14px; }
    .bo-card-grid { grid-template-columns: minmax(0,1fr); }
    .bo-block, .bo-faq { padding: 16px; }
    .bo-card-head { align-items: stretch; flex-direction: column; }
    .bo-filters { display: grid; grid-template-columns: minmax(0,1fr); align-items: stretch; }
    .bo-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; }
    .bo-filters input[type="search"],
    .bo-filters .button,
    .bo-block input, .bo-block select, .bo-block textarea { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
    .bo-card-code, .bo-party, .bo-muted, .bo-lines, .bo-chat { min-width: 0; overflow-wrap: anywhere; }
    .bo-chat { max-height: none; }
}

@media (max-width: 360px) {
    :root { --mobile-gutter: 12px; }
    .header-icon-label { display: none; }
    .hero-actions { grid-template-columns: 1fr; }
    .bo-tiles { grid-template-columns: 1fr; }
    .add-to-cart-form { grid-template-columns: auto minmax(0,1fr); }
    .add-to-cart-form .button { grid-column: 1 / -1; }
    .cart-quantity-form { grid-template-columns: auto minmax(0, 1fr); }
    .cart-quantity-form .button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 899px) and (hover: none),
       (max-width: 899px) and (pointer: coarse) {
    .product-card:hover, .category-tile:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav-toggle span { transition: none; }
    html { scroll-behavior: auto; }
}