/* Q-STORE — mobile & touch-friendly */

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* iOS: prevent focus zoom on inputs */
.search-bar input,
.newsletter-form input,
.checkout-form input,
.checkout-form textarea,
.checkout-form select,
.cart-item-qty input,
.detail-buy-form input[type="number"],
.admin-form input,
.admin-form textarea {
    font-size: 16px;
}

/* Full-width store on phones (no narrow “phone frame” gutter) */
@media (max-width: 575.98px) {
    body {
        background: var(--bg);
    }

    .phone-wrap {
        max-width: 100%;
        width: 100%;
        margin: 0;
        box-shadow: none;
        padding: 12px max(14px, env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    }

    .inner-page {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .bottom-nav {
        left: 0;
        right: 0;
        transform: none;
        max-width: none;
        width: 100%;
        padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
    }

    .site-logo {
        height: 48px;
        max-width: min(180px, 52vw);
    }

    .logo-q {
        font-size: 2rem;
    }

    .logo-text {
        font-size: 1.55rem;
    }

    .logo-tag {
        font-size: .58rem;
        letter-spacing: 2px;
    }

    .icon-btn,
    .header-actions a.icon-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .search-bar {
        padding: 10px 12px;
    }

    .location-bar {
        font-size: .82rem;
        padding: 10px 12px;
    }

    .hero-text {
        max-width: 58%;
        left: 14px;
        top: 18px;
    }

    .hero-text h1 {
        font-size: 1.05rem;
    }

    .hero-text p {
        font-size: .72rem;
        margin: 8px 0 12px;
    }

    .hero-btn {
        font-size: .75rem;
        padding: 6px 14px;
    }

    .hero-img {
        height: 180px;
    }

    .category-row {
        gap: 2px;
    }

    .cat-circle {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }

    .cat-label {
        font-size: .65rem;
    }

    .deals-card {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .deals-text {
        flex: 1 1 140px;
    }

    .deals-timer {
        margin-left: 0;
        order: 3;
        width: 100%;
        text-align: center;
        margin-top: 4px;
    }

    .deals-arrow {
        margin-left: auto;
    }

    .section-head {
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .reviews-section .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .reviews-summary {
        flex-wrap: wrap;
    }

    .product-scroll:not(.product-scroll--grid) {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        margin-inline: -14px;
        padding-inline: 14px;
        scroll-padding-inline: 14px;
    }

    .product-scroll:not(.product-scroll--grid) .product-card {
        flex: 0 0 min(260px, 82vw);
        scroll-snap-align: start;
    }

    .product-link h3 {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-btns {
        flex-direction: row;
        gap: 6px;
    }

    .product-btns .add-cart,
    .product-btns .buy-now {
        flex: 1;
        font-size: .68rem;
        padding: 9px 4px;
        min-height: 40px;
    }

    .product-scroll--grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .product-scroll--grid .product-btns {
        flex-direction: column;
    }

    .share-card {
        flex-wrap: wrap;
    }

    .share-text {
        flex: 1 1 160px;
    }

    .app-cta {
        flex-direction: column;
        text-align: center;
    }

    .app-badges {
        justify-content: center;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
    }

    .footer-links > div:last-child {
        grid-column: 1 / -1;
    }

    .nav-item {
        min-width: 56px;
        padding: 4px 4px 0;
        font-size: .62rem;
    }

    .nav-item .bi {
        font-size: 1.35rem;
    }

    .cart-item {
        flex-wrap: wrap;
    }

    .detail-actions {
        flex-direction: column;
    }

    .detail-actions .add-cart,
    .detail-actions .buy-now-lg {
        width: 100%;
        min-height: 48px;
    }

    .checkout-layout {
        gap: 16px;
    }

    .db-alert {
        font-size: .8rem;
    }
}

/* Small phones */
@media (max-width: 359.98px) {
    .site-logo {
        height: 42px;
        max-width: 48vw;
    }

    .header-actions {
        gap: 4px;
    }

    .product-scroll:not(.product-scroll--grid) .product-card {
        flex: 0 0 88vw;
    }

    .trust-title,
    .trust-sub {
        font-size: .58rem;
    }
}

/* Tablet: 2-column product grids instead of horizontal scroll */
@media (min-width: 576px) and (max-width: 991.98px) {
    .products-section .product-scroll:not(.product-scroll--grid) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }

    .products-section .product-scroll:not(.product-scroll--grid) .product-card {
        flex: none;
        width: auto;
    }

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

    .phone-wrap {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .bottom-nav {
        max-width: 100%;
    }
}

/* Touch-friendly nav & buttons everywhere below desktop */
@media (max-width: 991.98px) {
    .see-all {
        padding: 8px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .add-cart,
    .buy-now,
    .newsletter-btn,
    .hero-btn {
        min-height: 44px;
    }

    .promo-tile {
        min-height: 44px;
    }

    .category-item {
        min-width: 0;
    }
}